/* ============================================================================
   Dental Gallery — Responsive layer (Phase 4)
   Loaded LAST so it can refine the desktop-first rules in style.css.
   Depends on tokens.css. Admin app only.
   ============================================================================ */

/* ===================== Large tablet / small laptop ===================== */
@media (max-width: 1100px) {
    .charts-grid { grid-template-columns: 1fr; }
    .summary-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .player-body { grid-template-columns: 1fr; }
}

/* ===================== Tablet ===================== */
@media (max-width: 900px) {
    :root { --sidebar-width: 250px; }
    .summary-cards { grid-template-columns: 1fr 1fr; }
    .live-queue-grid { grid-template-columns: 1fr 1fr; }
    .two-col, .cpa-metrics { grid-template-columns: 1fr; }
}

/* ===================== Mobile (sidebar collapses) ===================== */
@media (max-width: 768px) {
    .main-content {
        margin-right: 0;
        max-width: 100vw;
        padding: 1rem 0.9rem 2.5rem;
        gap: 1.25rem;
    }

    /* Header: keep hamburger + actions on one row, search wraps below */
    .top-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
    }
    .search-bar {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
    }
    .header-actions { margin-right: auto; }

    .section-header h1 { font-size: 1.5rem; }
    .section-header p { font-size: 0.95rem; }

    /* Cards stack */
    .summary-cards { grid-template-columns: 1fr; gap: 0.85rem; }
    .card { padding: 1.25rem; }
    .card-info h2 { font-size: 1.6rem; }

    /* Charts get a sane minimum height */
    .chart-container { min-height: 300px; }

    /* Modals go (almost) full-width and scroll */
    .modal-overlay { padding: 0.75rem !important; align-items: flex-start !important; }
    .modal-overlay > .glass-panel,
    .modal-overlay > div > .glass-panel {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        margin-top: 1rem;
    }
    .modal.open .modal-card { max-width: 100%; margin-top: 2vh; }
    .dlg-card { margin-top: 8vh; }

    /* Tables: smooth horizontal scroll, tighter cells */
    .table-container { padding: 1rem 0.85rem; }
    .modern-table { min-width: 560px; }
    .modern-table th, .modern-table td { padding: 0.7rem 0.6rem; font-size: 0.9rem; }

    /* Tab strips already scroll; make sure they don't wrap awkwardly */
    .financials-tabs, .settings-tabs, .tabs { flex-wrap: nowrap; overflow-x: auto; }

    /* Live queue / clinic board single column */
    .live-queue-grid { grid-template-columns: 1fr; }

    /* Calendar shrinks gracefully */
    .calendar-day-cell { min-height: 78px; }
    .calendar-month-grid { gap: 0.3rem; }

    /* Odontogram scrolls instead of breaking */
    .odontogram-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }

    /* Toasts span the bottom on small screens */
    #dgToastHost { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; width: calc(100vw - 1.5rem); }
    .dg-toast { padding: 0.75rem 0.95rem; font-size: 0.88rem; }
}

/* ===================== Small phones ===================== */
@media (max-width: 480px) {
    .main-content { padding: 0.75rem 0.7rem 2rem; }
    .section-header h1 { font-size: 1.3rem; }
    .card-info h2 { font-size: 1.45rem; }
    .top-header { gap: 0.45rem; }

    /* Stat / cpa grids single column */
    .stat-grid, .cpa-metrics { grid-template-columns: 1fr; }

    /* Buttons that sit in a row wrap instead of overflowing */
    .table-header { flex-wrap: wrap; gap: 0.6rem; }

    /* Brand text in the (open) sidebar a touch smaller */
    .sidebar .brand h2 { font-size: 0.95rem; }
}

/* ===================== Coarse pointers (touch) ===================== */
@media (hover: none) and (pointer: coarse) {
    /* Bigger tap targets */
    .nav-item, .submenu-item, .financial-tab, .settings-tab, .btn, .queue-card-btn {
        min-height: 40px;
    }
}

/* ===================== Admin shell UX polish ===================== */
.top-header, .header-actions, .search-bar, #financials, #accounting {
    min-width: 0;
}

.header-actions {
    max-width: 100%;
}

.header-actions .action-btn,
#mobileNavToggle {
    flex: 0 0 auto;
}

.header-user-switcher {
    flex: 0 0 auto;
    min-width: 0;
}

#currentUserSwitcher {
    max-width: 160px;
}

.financials-tabs {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.financial-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.danger-zone button {
    white-space: nowrap;
}

/* Embedded accounting module: make it feel native inside the admin app. */
#accounting .layout {
    min-width: 0;
}

#accounting #nav {
    background: rgba(255, 255, 255, 0.035);
    border: var(--glass-border);
    border-radius: 12px;
    padding: 0.65rem;
    min-width: 0;
}

#accounting #nav a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: background var(--transition-fast), color var(--transition-fast);
}

#accounting #nav a:hover,
#accounting #nav a.active {
    background: var(--accent-primary);
    color: #fff;
}

#accounting-main {
    min-width: 0;
    width: 100%;
}

#accounting-main .card {
    background: var(--bg-surface);
    border: var(--glass-border);
    border-radius: 12px;
    padding: 1.15rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

#accounting-main .card h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

#accounting-main .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

#accounting-main .kpi {
    background: rgba(255, 255, 255, 0.045);
    border: var(--glass-border);
    border-radius: 10px;
    padding: 0.85rem;
}

#accounting-main .kpi .v {
    font-size: 1.35rem;
    font-weight: 800;
}

#accounting-main .kpi .l,
#accounting-main .small,
#accounting-main .muted,
#accounting-main .hint {
    color: var(--text-secondary);
}

#accounting-main .filters {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem;
}

#accounting-main .filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

#accounting-main input,
#accounting-main select {
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
}

#accounting-main .btn-accent,
#accounting-main .btn-green {
    min-height: 38px;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

#accounting-main .btn-accent {
    background: var(--accent-primary);
    color: #fff;
}

#accounting-main .btn-green {
    background: var(--accent-success);
    color: #fff;
}

#accounting-main table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

#accounting-main th,
#accounting-main td {
    padding: 0.65rem 0.7rem;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#accounting-main th {
    color: var(--text-secondary);
    font-weight: 700;
}

#accounting-main .num {
    direction: ltr;
    font-variant-numeric: tabular-nums;
    font-family: "Consolas", "Courier New", monospace;
}

#accounting-main .pos { color: var(--accent-success); }
#accounting-main .neg { color: var(--accent-danger); }

#accounting-main .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

#accounting-main .badge.ok {
    background: rgba(16, 185, 129, 0.16);
    color: var(--accent-success);
}

#accounting-main .badge.bad {
    background: rgba(239, 68, 68, 0.16);
    color: var(--accent-danger);
}

#accounting-main .total-row td {
    font-weight: 800;
    background: rgba(59, 130, 246, 0.08);
}

@media (max-width: 900px) {
    .top-header {
        gap: 0.75rem;
    }

    .header-actions {
        gap: 0.5rem !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.15rem;
    }

    .header-actions::-webkit-scrollbar {
        display: none;
    }

    .date-display,
    .clock-display {
        padding: 0 0.8rem !important; /* horizontal only — height is fixed at 45px */
    }

    #currentUserSwitcher {
        min-width: 96px !important;
        max-width: 122px;
    }
}

@media (max-width: 768px) {
    .top-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem !important;
    }

    #mobileNavToggle {
        grid-column: 1;
        grid-row: 1;
    }

    .header-actions {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        margin-right: 0 !important;
    }

    .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        order: initial;
        width: 100%;
    }

    .sidebar {
        right: 0 !important;
        width: min(86vw, var(--sidebar-width));
        max-width: 320px;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 1.25rem 1rem;
        transform: translateX(100%) !important;
    }

    /* Keep the opened menu above the sticky header, search, and notifications. */
    .sidebar.open,
    #appSidebar.open { z-index: 2200 !important; }
    #sidebarBackdrop.show { z-index: 2100 !important; }
    .sidebar.open,
    #appSidebar.open {
        right: 0 !important;
        transform: none !important;
    }

    .sidebar .brand {
        margin-bottom: 1.25rem;
    }

    .nav-item {
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }

    #headerNotificationDropdown {
        left: 0 !important;
        right: auto !important;
        width: min(320px, calc(100vw - 1.5rem)) !important;
    }

    #accounting .section-header {
        align-items: flex-start !important;
    }

    #accounting .tools {
        width: 100%;
        flex-wrap: wrap;
    }

    #accounting .layout {
        flex-direction: column;
        gap: 0.85rem !important;
    }

    #accounting #nav {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #accounting #nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #accounting-main .card {
        padding: 0.95rem;
    }

    #accounting-main table {
        min-width: 560px;
    }

    .danger-zone > div {
        align-items: stretch !important;
    }

    .danger-zone button {
        width: 100% !important;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .header-actions > button[onclick="window.print()"],
    .clock-display,
    .date-display {
        display: none !important;
    }

    .header-user-switcher {
        padding: 0.2rem 0.35rem !important;
    }

    .header-user-switcher > span {
        display: none !important;
    }

    .header-user-switcher button[onclick="openStudentPortalLogin()"] {
        width: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    .header-user-switcher button[onclick="openStudentPortalLogin()"] i {
        font-size: 1rem;
    }

    #currentUserSwitcher {
        min-width: 80px !important;
        max-width: 96px;
        font-size: 0.75rem !important;
    }

    .financial-tab,
    .settings-tab {
        padding: 0.55rem 0.85rem;
        font-size: 0.84rem;
    }
}


/* ===================== Clinic Layout Responsive Fixes ===================== */
@media (max-width: 1100px) {
    /* Config Hub: stack nav and content */
    .confighub-shell {
        grid-template-columns: 1fr !important;
    }
    .confighub-nav {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    .confighub-nav-item {
        flex: 0 0 auto;
        width: auto;
    }
    
    /* EHR Grid: stack patient list and profile */
    #clinic-sub-patients > div {
        grid-template-columns: 1fr !important;
    }
    /* Let the patient list grow instead of fixed height when stacked */
    #clinic-patients-list-container {
        max-height: 300px !important;
    }
    
    /* Protocols Grid: stack protocols list and editor */
    #confighub-page-protocols .confighub-editor-panel > div:nth-of-type(2) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Adjust buttons in clinic header */
    .section-header > div:nth-child(2) {
        width: 100%;
        justify-content: flex-start;
    }
    .action-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
    .financials-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* ===================== Mobile card view for admin tables =====================
   frontend_enhancements.js labels each td with data-label (its column header);
   under 640px rows become stacked cards instead of a 560px-wide scroll. */
@media (max-width: 640px) {
    .modern-table[data-dg-cards="1"] {
        min-width: 0 !important;
        width: 100%;
    }
    .modern-table[data-dg-cards="1"] thead {
        display: none;
    }
    .modern-table[data-dg-cards="1"] tbody tr {
        display: block;
        margin-bottom: 0.8rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }
    .modern-table[data-dg-cards="1"] tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        border: none !important;
        padding: 0.35rem 0;
        font-size: 0.88rem;
        text-align: start;
    }
    .modern-table[data-dg-cards="1"] tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-secondary);
        flex-shrink: 0;
    }
    .modern-table[data-dg-cards="1"] tbody td:not([data-label])::before {
        content: none;
    }
    /* message / colspan rows keep their plain centered layout */
    .modern-table[data-dg-cards="1"] tbody td[colspan] {
        display: block;
        text-align: center;
    }
}

/* DG responsive tab strip patch */
@media (max-width: 900px) {
    .financials-tabs, .settings-tabs, .tabs, .staffspace-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}
.financial-tab,
.hr-tab,
.staffspace-tabs .staffspace-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
@media (max-width: 560px) {
    .financial-tab,
    .settings-tab,
    .hr-tab,
    .staffspace-tabs .staffspace-tab {
        padding: 0.55rem 0.85rem;
        font-size: 0.84rem;
    }
}

/* ============================================================================
   Global wide-content safety net (Phase 5 — responsive audit)
   frontend_enhancements.js#ensureTablesScroll wraps every un-wrapped table in
   .dg-scroll-x so wide tables scroll instead of being clipped by the
   overflow-x:hidden on .main-content / #views-container.
   ============================================================================ */
.dg-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.dg-scroll-x > table { min-width: max-content; }

/* Panels must be allowed to shrink so their scroll wrappers engage instead of
   pushing the page wide (flexbox/grid children default to min-width:auto). */
.glass-panel,
.view-section,
.view-section-sub,
#labViewContent,
#dental_lab_tab,
#inventory,
#views-container > section {
    min-width: 0;
}

/* ===================== Lab module responsive ===================== */
#dental_lab_tab .lab-subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#dental_lab_tab .lab-pill { flex: 0 0 auto; }

@media (max-width: 700px) {
    /* Dense inline grids in lab cards + detail modal collapse gracefully.
       Inline styles need attribute-substring targeting + !important. */
    #dental_lab_tab [style*="grid-template-columns:repeat(4"],
    #dental_lab_tab [style*="grid-template-columns: repeat(4"],
    #labModalOverlay [style*="grid-template-columns:repeat(4"],
    #labModalOverlay [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #labModalOverlay [style*="grid-template-columns:repeat(3"],
    #labModalOverlay [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    #labModalOverlay [style*="grid-template-columns:1fr 1fr"],
    #labModalOverlay [style*="grid-template-columns: 1fr 1fr"],
    #labModalOverlay [style*="grid-template-columns:repeat(2"],
    #labModalOverlay [style*="grid-template-columns: repeat(2"],
    #dental_lab_tab [style*="grid-template-columns:repeat(4"],
    #dental_lab_tab [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    /* Lab modal goes near full-width on phones */
    #labModalOverlay > .glass-panel { max-width: 100% !important; }
}


/* Clinic Settings Hub — compact navigation and touch layout */
@media (max-width:1100px) {
    .confighub-shell { grid-template-columns:1fr !important; }
    .confighub-nav { position:static; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
    .confighub-nav-group { display:none; }
    .confighub-nav-item { justify-content:center; padding:.6rem .45rem; text-align:center; }
    .confighub-nav-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:720px) {
    .clinic-config-hero { grid-template-columns:auto minmax(0,1fr); padding:1rem; }
    .clinic-config-unit { grid-column:1 / -1; min-width:0; }
    .confighub-nav { grid-template-columns:repeat(2,minmax(0,1fr)); padding:.5rem; }
    .confighub-nav-item { justify-content:flex-start; padding:.65rem; }
    .confighub-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
    .confighub-card { min-height:165px; padding:.85rem; }
    .confighub-page-head { display:block; }
    .confighub-page-head > :last-child:not(:first-child) { margin-top:.75rem; }
}
@media (max-width:460px) {
    .clinic-config-hero { gap:.75rem; }
    .clinic-config-hero-icon { width:42px; height:42px; border-radius:12px; }
    .clinic-config-hero h2 { font-size:1.12rem; }
    .clinic-config-hero p { font-size:.79rem; }
    .confighub-card-grid { grid-template-columns:1fr; }
    .confighub-card { min-height:145px; }
    .confighub-card > span:not(.confighub-card-icon) { min-height:0; }
}