/*
 * MediSync mobile responsive layer.
 *
 * This file is loaded after each page's local styles so the mobile rules are
 * predictable without changing the desktop baseline. Table rows marked with
 * .mobile-card and data-label attributes become readable cards on phones.
 */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

.search-action-buttons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.search-action-buttons .btn-search,
.search-action-buttons .btn-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.search-action-buttons .btn-search {
    color: #fff;
    background: linear-gradient(135deg, #006064, #00838f, #00acc1);
    box-shadow: 0 3px 10px rgba(0, 131, 143, 0.22);
}

.search-action-buttons .btn-search:hover {
    background: linear-gradient(135deg, #004d4d, #006064, #00838f);
}

.search-action-buttons .btn-search-clear {
    color: #455a64;
    background: #ecf0f1;
}

.search-action-buttons .btn-search-clear:hover {
    background: #d5dbdb;
}

@media (max-width: 992px) {
    body {
        display: block;
    }

    .main {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .top-navbar {
        max-width: 100vw !important;
    }

    .top-navbar > div {
        min-width: 0;
    }

    .navbar-username {
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .form-grid,
    .form-grid-3col {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px !important;
    }

    .form-grid .form-group,
    .form-grid-3col .form-group,
    .form-grid .full-width,
    .form-grid-3col .full-width {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .form-actions,
    .form-grid-3col .form-actions {
        grid-column: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .form-actions > *,
    .form-grid-3col .form-actions > * {
        width: 100% !important;
        min-height: 44px;
    }

    .search-container,
    .search-container-admin,
    .filter-bar,
    .filter-form,
    .detail-search-container {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .search-input-wrap,
    .search-container .search-input-wrap,
    .search-container-admin .search-input-wrap,
    .detail-search-container .search-input-wrap,
    .filter-group,
    .filter-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .search-count,
    .search-container .search-count,
    .search-container-admin .search-count {
        align-self: flex-end;
    }

    .search-action-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .search-action-buttons .btn-search,
    .search-action-buttons .btn-search-clear {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        white-space: normal;
    }

    .filter-form .filter-group input[type="date"],
    .filter-form input[type="date"] {
        width: 100% !important;
        max-width: min(100%, 260px) !important;
        align-self: flex-start;
    }

    .form-group input[type="time"] {
        width: 100% !important;
        max-width: min(100%, 260px) !important;
    }

    .header-actions,
    .header-actions .header-left,
    .header-actions .header-right {
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .header-actions h1,
    .main h1 {
        overflow-wrap: anywhere;
        font-size: clamp(20px, 6vw, 28px) !important;
    }

    .header-actions .btn-back,
    .header-actions .btn-add,
    .header-actions .btn-add-admin,
    .header-actions .btn-med-list {
        width: 100% !important;
        justify-content: center;
        text-align: center;
        min-height: 44px;
    }

    .stats-row {
        grid-template-columns: 1fr !important;
    }

    .btn-add,
    .btn-add-admin,
    .btn-med-list,
    .btn-save,
    .btn-cancel,
    .btn-take,
    .btn-skip,
    .btn-edit,
    .btn-delete,
    .btn-report,
    .btn-view,
    .btn-reset-2fa,
    .btn-reset-admin {
        min-height: 44px;
    }

    /* Split header/body tables use the body table as the mobile card source. */
    .table-header-wrap {
        display: none !important;
    }

    /* Split table layouts: the body table already provides mobile labels. */
    .table-wrapper > table:not(.mobile-card) {
        display: none !important;
    }

    .table-wrapper,
    .table-container,
    .table-scroll-body,
    .table-body-wrap,
    .med-table-wrapper,
    .table-scroll-wrapper,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .table-wrapper table.mobile-card,
    .table-wrapper table.mobile-card tbody,
    .table-wrapper table.mobile-card tr,
    .table-wrapper table.mobile-card td,
    .table-container table.mobile-card,
    .table-container table.mobile-card tbody,
    .table-container table.mobile-card tr,
    .table-container table.mobile-card td,
    .table-scroll-body table.mobile-card,
    .table-scroll-body table.mobile-card tbody,
    .table-scroll-body table.mobile-card tr,
    .table-scroll-body table.mobile-card td,
    .table-body-wrap table.mobile-card,
    .table-body-wrap table.mobile-card tbody,
    .table-body-wrap table.mobile-card tr,
    .table-body-wrap table.mobile-card td,
    .med-table-wrapper table.mobile-card,
    .med-table-wrapper table.mobile-card tbody,
    .med-table-wrapper table.mobile-card tr,
    .med-table-wrapper table.mobile-card td,
    .table-scroll-wrapper table.mobile-card,
    .table-scroll-wrapper table.mobile-card tbody,
    .table-scroll-wrapper table.mobile-card tr,
    .table-scroll-wrapper table.mobile-card td,
    .table-responsive table.mobile-card,
    .table-responsive table.mobile-card tbody,
    .table-responsive table.mobile-card tr,
    .table-responsive table.mobile-card td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    table.mobile-card {
        border: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    table.mobile-card thead {
        display: none !important;
    }

    table.mobile-card tbody {
        background: transparent !important;
    }

    table.mobile-card tbody tr {
        margin: 0 0 12px 0 !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 131, 143, 0.12) !important;
        border-left: 4px solid #4dd0e1 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    }

    table.mobile-card tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    /* JavaScript search uses inline display:none; keep it stronger than card display. */
    table.mobile-card tbody tr.search-hidden,
    table.mobile-card tbody tr[style*="display: none"] {
        display: none !important;
    }

    table.mobile-card tbody td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf2f3 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    table.mobile-card tbody td:last-child {
        border-bottom: 0 !important;
    }

    table.mobile-card tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 42%;
        color: #00838f;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.25px;
        line-height: 1.35;
        text-align: left;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    /* Keep generated labels separate from direct text-node values. */
    table.mobile-card tbody td:not(.mobile-actions):not([data-mobile-role="actions"])::before {
        margin-right: 14px !important;
    }

    table.mobile-card tbody td > * {
        text-align: left !important;
    }

    table.mobile-card tbody td[data-label=""]::before,
    table.mobile-card tbody td.no-mobile-label::before {
        display: none !important;
    }

    table.mobile-card tbody td.mobile-card-empty,
    table.mobile-card tbody td[colspan] {
        display: block !important;
        padding: 24px 8px !important;
        text-align: center !important;
    }

    table.mobile-card tbody td[colspan]::before {
        display: none !important;
    }

    table.mobile-card tbody td.mobile-actions,
    table.mobile-card tbody td[data-mobile-role="actions"] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        text-align: left !important;
    }

    table.mobile-card tbody td.mobile-actions::before,
    table.mobile-card tbody td[data-mobile-role="actions"]::before {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    table.mobile-card tbody td.mobile-actions > a,
    table.mobile-card tbody td.mobile-actions > button,
    table.mobile-card tbody td[data-mobile-role="actions"] > a,
    table.mobile-card tbody td[data-mobile-role="actions"] > button {
        flex: 1 1 135px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal !important;
    }

    table.mobile-card tbody td > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    table.mobile-card .patients-list,
    table.mobile-card .patients-list .patient-tag,
    table.mobile-card .purpose-tag,
    table.mobile-card .purpose-badge {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .mobile-card-scroll-hint {
        display: none !important;
    }

    /* Report pending-medication list: add breathing room on phones. */
    .report-page .pending-list {
        margin-top: 16px !important;
        padding-top: 14px !important;
    }

    .report-page .pending-title {
        margin-bottom: 8px !important;
        line-height: 1.45 !important;
    }

    .report-page .pending-item {
        padding: 10px 0 !important;
        gap: 7px 10px !important;
        line-height: 1.5 !important;
    }

    .report-page .pending-item > span:first-child {
        min-width: 0 !important;
        line-height: 1.5 !important;
    }

    .report-page .pending-item .resident,
    .report-page .pending-item .med,
    .report-page .pending-item .time {
        line-height: 1.5 !important;
    }

    .report-page .pending-item .time {
        padding-top: 1px !important;
    }

    /* Report detail cards already expose every column through data-label. */
    .report-page table.mobile-card thead {
        display: none !important;
    }

    .modal,
    .delete-modal,
    .modal-overlay {
        padding: 12px !important;
        align-items: center !important;
    }

    .modal-content,
    .delete-modal-content,
    .modal-box {
        width: 100% !important;
        max-width: 450px !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto !important;
        margin: 0 auto !important;
        padding: 22px 18px !important;
    }

    .modal-actions,
    .delete-modal-actions,
    .modal-box .modal-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .modal-actions > *,
    .delete-modal-actions > *,
    .modal-box .modal-actions > * {
        width: 100% !important;
        min-height: 44px;
    }
}

@media (max-width: 576px) {
    .main {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 100px !important;
    }

    .top-navbar {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
    }

    .bottom-tab-bar {
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }

    .login-container {
        min-height: 100vh !important;
        min-height: 100svh !important;
        padding: 18px 12px !important;
        overflow-y: auto !important;
    }

    .login-box {
        width: calc(100% - 24px) !important;
        max-width: 480px !important;
        padding: 26px 18px !important;
        margin: 12px auto !important;
    }

    .login-box .login-desc {
        font-size: 13px !important;
        margin-bottom: 18px !important;
    }

    .role-btn {
        min-height: 64px;
        padding: 12px !important;
    }

    .role-btn .sub-text {
        display: block;
        overflow-wrap: anywhere;
    }

    .navbar-username {
        max-width: 28vw;
    }

    .navbar-menu-btn {
        white-space: nowrap;
    }

    .section-title,
    .main h2 {
        overflow-wrap: anywhere;
    }

    .bottom-tab-bar .bottom-tab-item {
        min-width: 0;
        text-align: center;
    }

    .bottom-tab-bar .bottom-tab-item .tab-label {
        display: block;
        max-width: 100%;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

@media print {
    table.mobile-card {
        display: table !important;
        width: auto !important;
        min-width: initial !important;
        max-width: initial !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    table.mobile-card thead {
        display: table-header-group !important;
    }

    table.mobile-card tbody {
        display: table-row-group !important;
    }

    table.mobile-card tr {
        display: table-row !important;
    }

    table.mobile-card td {
        display: table-cell !important;
        width: auto !important;
        min-width: initial !important;
        max-width: initial !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    table.mobile-card td::before {
        display: none !important;
        content: none !important;
    }
}