/* ─── Krasyn EMR — Mobile Responsive Overrides ─── */
/* Mobile: ≤ 640px */
/* Tablet: 641px–1024px */

/* Hide hamburger on non-mobile by default */
.mobile-menu-toggle { display: none; }

@media (max-width: 640px) {
    /* ── Layout: sidebar slides off-screen ── */
    /* Override the scoped MainLayout rule (max-width: 640.98px) that sets
       width: 100% / position: relative. We must win the cascade here, so we
       target the same selector with higher specificity via the :is() workaround
       and the explicit element type. Using !important for dimensions only. */
    .sidebar,
    .nav-sidebar,
    [class*="sidebar"] {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        min-width: 280px !important;
        z-index: 1000 !important;
        transition: left 0.25s ease !important;
        overflow-y: auto;
    }
    .sidebar.mobile-open,
    [class*="sidebar"].mobile-open {
        left: 0 !important;
    }

    /* Prevent the .page flex column from stacking sidebar above main */
    .page {
        display: block !important;
    }

    /* Main takes full width; extra top padding clears the fixed hamburger button (44px + 12px top offset + 8px gap = 64px) */
    main,
    .main-content,
    .page-content,
    [class*="main-content"] {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 4rem 0.75rem 0.75rem 0.75rem !important;
    }

    /* ── Hamburger button ── */
    .mobile-menu-toggle {
        display: flex !important;
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 1001;
        background: var(--emr-bg-card, var(--bg-card, #fff));
        border: 1px solid var(--emr-border, var(--border-color, #e2e8f0));
        border-radius: 6px;
        padding: 0.5rem;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--emr-text-primary, #111827);
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .mobile-menu-toggle:hover {
        background: var(--emr-bg-hover, #f3f4f6);
    }

    /* Backdrop overlay */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 999;
    }
    .mobile-overlay.active {
        display: block;
    }

    /* ── Top bar — room for hamburger ── */
    .topbar,
    [class*="top-bar"],
    [class*="header-bar"] {
        padding-left: 3.5rem;
    }

    /* ── Page headers ── */
    .page-header,
    [class*="page-header"] {
        flex-direction: column;
        gap: 0.75rem;
    }
    .page-header h1,
    .page-header h2,
    [class*="page-header"] h1,
    [class*="page-header"] h2 {
        font-size: 1.25rem;
    }

    /* ── Patient chart tabs: horizontal scroll, no wrapping ── */
    .tab-nav,
    [class*="tab-bar"],
    .tabs-horizontal,
    [class*="tab-nav"] {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .tab-nav::-webkit-scrollbar,
    [class*="tab-nav"]::-webkit-scrollbar {
        display: none;
    }
    .tab-nav button,
    .tab-nav a,
    [class*="tab-nav"] button,
    [class*="tab-nav"] a {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    /* ── Tables: horizontal scroll ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ── Cards / grid ── */
    .card-grid,
    [class*="kpi-grid"],
    [class*="stats-grid"] {
        grid-template-columns: 1fr !important;
    }
    .card {
        margin-bottom: 0.75rem;
    }

    /* ── Dashboard KPI tiles: 2-column on mobile ── */
    .kpi-tiles,
    [class*="kpi-row"],
    [class*="dashboard-stats"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem;
    }

    /* ── Forms: stack vertically ── */
    .form-row,
    [class*="form-row"] {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }
    .form-row > *,
    [class*="form-row"] > * {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* PatientList filter grid specifically */
    .pl-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .pl-filter-select-group,
    .pl-filter-select {
        width: 100% !important;
        min-width: 0 !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ── Modals: full viewport ── */
    .modal-dialog,
    [class*="modal-container"],
    [class*="modal-box"] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh;
        overflow-y: auto;
    }

    /* ── Buttons / toolbars ── */
    .btn-toolbar,
    [class*="action-bar"] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ── Schedule / calendar grid: horizontal scroll ── */
    .week-grid,
    [class*="schedule-grid"],
    [class*="calendar-grid"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Patient list: hide less-critical columns ── */
    [class*="patient-list"] td:nth-child(3),
    [class*="patient-list"] th:nth-child(3),
    [class*="patient-list"] td:nth-child(4),
    [class*="patient-list"] th:nth-child(4) {
        display: none;
    }

    /* ── Encounter context strip ── */
    [class*="encounter-strip"],
    [class*="context-bar"] {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    /* ── Sidebar section labels: smaller on mobile ── */
    .nav-section-label {
        font-size: 0.7rem;
    }

    /* ── Hamburger: ensure 44×44px tap target ── */
    .mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ── Page container: reduce horizontal padding on mobile ── */
    .page-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }

    /* ── Content cards: reduce padding on mobile ── */
    .content-card {
        padding: 1rem !important;
    }

    /* ── Tap target sizing — raise small buttons and icon buttons to 44×44 ── */
    /* .btn-sm used in tables, toolbars, pill actions */
    .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Global patient banner action buttons */
    .btn-sm-primary,
    .btn-sm-secondary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Nav icon buttons in sidebar header (notifications, collapse) */
    .nav-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    /* Logout button in sidebar footer — already 100% width, just ensure height */
    .logout-button {
        min-height: 44px !important;
    }

    /* ── Fixed 2-col / 3-col grids: collapse to 1 col on mobile ── */
    /* Reports page top KPI/chart grid */
    .reports-top-grid {
        grid-template-columns: 1fr !important;
    }
    /* Quality page 3-col summary cards */
    .quality-summary-grid {
        grid-template-columns: 1fr !important;
    }
    /* Any inline grid with fixed 2+ columns should collapse on mobile.
       We add a utility class .mobile-stack that pages can use. */
    .mobile-stack {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* ── Font size enforcement: visible text must be ≥ 14px ── */
    /* Badge-level labels can be 12px, but body text bumped up */
    .nav-group-header {
        font-size: 12px;
    }
    .user-role {
        font-size: 12px;
    }

    /* ── Global patient banner: stack on mobile ── */
    .global-patient-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .global-patient-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }
    .global-patient-actions .btn-sm-primary,
    .global-patient-actions .btn-sm-secondary {
        flex: 1;
        justify-content: center;
    }
}

/* ── Narrow-desktop band (≤ 1100px): the sidebar is still expanded so the
   usable column is tight. A 1fr/1fr Reports top grid becomes cramped and
   leaves lopsided whitespace under the shorter card — collapse to one
   column so KPIs and the per-day chart each get full width. ── */
@media (max-width: 1100px) {
    .reports-top-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Tablet tweaks (641px – 1024px) ── */
@media (min-width: 641px) and (max-width: 1024px) {
    .card-grid,
    [class*="kpi-grid"],
    [class*="stats-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpi-tiles,
    [class*="kpi-row"],
    [class*="dashboard-stats"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    table {
        overflow-x: auto;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    /* Collapse known wide stats rows on tablet */
    [data-testid="cockpit-stats"],
    .weight-metrics-grid,
    .frontdesk-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Mobile catches for inline-style and known wide grids (≤ 640px) ── */
@media (max-width: 640px) {
    /* Provider Cockpit stats: 7 cols → 2 cols on phone */
    [data-testid="cockpit-stats"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Weight tracking metrics: 6 cols → 2 cols on phone */
    .weight-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Generic auto-fit grids: ensure minimum column width fits a 375px viewport */
    [class*="auto-fit-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Common dropdown panels: keep within viewport */
    [class*="search-dropdown"],
    [class*="-dropdown"] {
        max-width: calc(100vw - 1.5rem);
    }

    /* Responsive utility class — pages can opt-in by adding .responsive-collapse */
    .responsive-collapse {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
    .responsive-collapse-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Document viewer sidebars: stack instead of fixed sidebar */
    [class*="viewer-sidebar"],
    [class*="document-sidebar"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}