/* ============================================================================
   SHULEVORA RESPONSIVE MODULES — v1.0.0
   Mobile-first presentation layer for the Exams, Academic Setup, Timetable,
   Settings and Boarding modules, plus shared admin-shell smoothing.

   PURE CSS: scoped by body[data-route] (stamped in renderLayout) and overriding
   inline styles via attribute-substring selectors + !important. No markup or
   behavior changes — every control keeps its id/class/handlers.

   Breakpoints:  ≤1200 laptop · ≤1024 tablet-landscape · ≤900 tablet-portrait
                 ≤768 large phone · ≤640 phone · ≤420 small phone
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. SHARED ADMIN SHELL (all schooladmin routes)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body[data-route^="/schooladmin"] .main-content-wrapper {
        padding: 1rem !important;
    }
}

@media (max-width: 768px) {
    body[data-route^="/schooladmin"] .main-content-wrapper {
        padding: 0.65rem !important;
    }
    body[data-route^="/schooladmin"] .page-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    body[data-route^="/schooladmin"] .page-header h1 {
        font-size: 1.3rem !important;
        line-height: 1.2;
    }
    /* Every table container becomes a touch-scrollable region instead of
       squeezing columns into unreadability. */
    body[data-route^="/schooladmin"] .table-wrapper,
    body[data-route^="/schooladmin"] .table-scroll,
    body[data-route^="/schooladmin"] .data-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ----------------------------------------------------------------------------
   1. ACADEMIC SETUP  (/schooladmin/academic-structure, /academic-settings)
   ------------------------------------------------------------------------- */

/* The Architect full-width mode hides the grade sidebar with visibility:hidden
   but keeps its grid track; once the outer grid collapses to one column that
   invisible sidebar would occupy a full-height row — remove it entirely. */
body[data-route^="/schooladmin/academic"] #gradeSidebar[style*="visibility: hidden"] {
    display: none !important;
}

@media (max-width: 900px) {
    /* Outer shell: sidebar-over-content instead of side-by-side */
    body[data-route^="/schooladmin/academic"] #academicContainer > .grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 42vh;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1.5px solid var(--border-color, #e2e8f0);
    }
    /* The module's own ≤1024 icon-rail treatment (80px, labels hidden) only
       makes sense while the sidebar sits BESIDE content. Once stacked full-width,
       restore the full labelled navigation. These selectors out-specify the
       module's #gradeSidebar rules, so they win among !important declarations. */
    body[data-route^="/schooladmin/academic"] #gradeSidebar h2,
    body[data-route^="/schooladmin/academic"] #gradeSidebar p {
        display: block !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar select {
        display: block !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar .sys-nav-link span,
    body[data-route^="/schooladmin/academic"] #gradeSidebar .grade-nav-link span {
        display: inline !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar div:has(> span) {
        display: flex !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar .sys-nav-link {
        justify-content: flex-start !important;
        padding: 0.28rem 0.5rem !important;
    }
    body[data-route^="/schooladmin/academic"] #gradeSidebar .grade-nav-link {
        justify-content: space-between !important;
        padding: 0.45rem 0.6rem !important;
    }
}

@media (max-width: 768px) {
    body[data-route^="/schooladmin/academic"] #tabContent {
        padding: 0.75rem !important;
    }
    /* Collapse inline multi-column grids to a single column. auto-fit/auto-fill
       grids already adapt on their own; "1fr auto" label+action rows keep their
       shape so buttons stay beside their labels. */
    body[data-route^="/schooladmin/academic"] #tabContent [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="1fr auto"]) {
        grid-template-columns: 1fr !important;
    }
    /* Workspace/system headers and toolbars wrap instead of overflowing */
    body[data-route^="/schooladmin/academic"] .flex-between,
    body[data-route^="/schooladmin/academic"] .workspace-header {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

/* ----------------------------------------------------------------------------
   2. EXAMS & GRADING  (/schooladmin/exams)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Two-pane analysis layouts stack on tablets */
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: 1.2fr 0.8fr"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: 1fr 2fr"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: 1.2fr 1.8fr"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns:minmax(0,1.45fr) 320px"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns:1.2fr .8fr .8fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Wide KPI strips: 4-6 across → 2 across */
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: repeat(4"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body[data-route="/schooladmin/exams"] .workspace-header {
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 0.85rem 1rem !important;
    }
    /* Filter toolbars: let controls wrap and stretch full width */
    body[data-route="/schooladmin/exams"] .filter-group {
        min-width: 0;
        flex: 1 1 160px;
    }
    body[data-route="/schooladmin/exams"] .filter-select,
    body[data-route="/schooladmin/exams"] .form-input {
        max-width: 100%;
    }
    body[data-route="/schooladmin/exams"] #tabContent [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="1fr auto"]),
    body[data-route="/schooladmin/exams"] .workspace-card [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="1fr auto"]) {
        grid-template-columns: 1fr !important;
    }
    body[data-route="/schooladmin/exams"] .workspace-card {
        padding: 1rem !important;
    }
}

@media (max-width: 640px) {
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: repeat(3, 1fr)"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns:repeat(3,1fr)"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns: repeat(4"],
    body[data-route="/schooladmin/exams"] [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    /* Action rows in headers become full-width stacks so buttons stay tappable */
    body[data-route="/schooladmin/exams"] .workspace-header .btn-premium {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------------------
   3. TIMETABLE HUB  (/schooladmin/timetable)
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:repeat(5"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    /* Control sidebar stacks above the canvas; fixed viewport-height layout
       becomes natural document flow. */
    body[data-route="/schooladmin/timetable"] .timetable-premium-wrapper {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    body[data-route="/schooladmin/timetable"] .timetable-ctrl-sidebar {
        max-height: 60vh;
    }
    body[data-route="/schooladmin/timetable"] .ts-body {
        max-height: 44vh;
    }
    body[data-route="/schooladmin/timetable"] .timetable-main-canvas {
        height: auto !important;
        min-height: 60vh;
    }
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:repeat(4"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: repeat(4"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:repeat(5"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:1.1fr .9fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* The weekly grid keeps readable column widths and scrolls sideways inside
       .grid-scroll-area (which already has overflow:auto). */
    body[data-route="/schooladmin/timetable"] .tt-grid {
        min-width: 760px;
    }
    body[data-route="/schooladmin/timetable"] .grid-toolbar {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    body[data-route="/schooladmin/timetable"] #blueprintGrid {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    body[data-route="/schooladmin/timetable"] .fixed-slot-row {
        grid-template-columns: 1fr 1fr !important;
    }
    body[data-route="/schooladmin/timetable"] [style*="min-width:220px"] {
        min-width: 0 !important;
        width: 100%;
    }
}

@media (max-width: 640px) {
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:repeat(4"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: repeat(4"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns:repeat(3,1fr)"],
    body[data-route="/schooladmin/timetable"] [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------------------------------------------
   4. INSTITUTIONAL SETTINGS  (/schooladmin/settings)
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Sticky side nav becomes a horizontal, swipeable tab strip on top */
    body[data-route="/schooladmin/settings"] #settingsContainer > div {
        flex-direction: column !important;
    }
    body[data-route="/schooladmin/settings"] #settingsNav {
        width: 100% !important;
        position: static !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.3rem !important;
        padding: 0.5rem !important;
    }
    body[data-route="/schooladmin/settings"] #settingsNav > div:first-child {
        display: none; /* "Workspace Settings" section label — redundant as a strip */
    }
    body[data-route="/schooladmin/settings"] #settingsNav .nav-item-btn {
        white-space: nowrap;
        flex: 0 0 auto;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    body[data-route="/schooladmin/settings"] #tabContent [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="1fr auto"]) {
        grid-template-columns: 1fr !important;
    }
    /* Side-by-side preview/upload blocks wrap */
    body[data-route="/schooladmin/settings"] #tabContent [style*="display: flex; gap: 1.5rem; align-items: start"] {
        flex-wrap: wrap;
    }
    body[data-route="/schooladmin/settings"] .glass-panel {
        padding: 1rem !important;
    }
}

/* ----------------------------------------------------------------------------
   5. BOARDING MANAGEMENT  (/schooladmin/boarding)
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body[data-route="/schooladmin/boarding"] .boarding-shell {
        padding: 1rem !important;
    }
    body[data-route="/schooladmin/boarding"] .panel-head {
        flex-direction: column;
        align-items: flex-start !important;
    }
    body[data-route="/schooladmin/boarding"] .panel-head .btn {
        width: 100%;
        justify-content: center;
    }
    body[data-route="/schooladmin/boarding"] .boarding-hero {
        padding: 1.25rem !important;
    }
    body[data-route="/schooladmin/boarding"] .boarding-hero h1 {
        font-size: 1.4rem !important;
    }
    body[data-route="/schooladmin/boarding"] .boarding-hero > div:last-child {
        flex-wrap: wrap;
        width: 100%;
    }
    body[data-route="/schooladmin/boarding"] .premium-table {
        min-width: 560px; /* readable columns; .table-scroll provides the swipe */
    }
}

@media (max-width: 420px) {
    body[data-route="/schooladmin/boarding"] .hostel-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
    }
    body[data-route="/schooladmin/boarding"] .hostel-metrics b {
        padding: 0.6rem 0.25rem;
        font-size: 0.85rem;
    }
}

/* ----------------------------------------------------------------------------
   6. EXAMS DESKTOP DENSITY (≥769px)
   Slightly compact header, tab shell, filters and KPI cards. Scoped above the
   phone breakpoint so mobile touch-target sizing keeps priority.
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
    body[data-route="/schooladmin/exams"] .phc-title {
        font-size: 1.45rem !important;
    }
    body[data-route="/schooladmin/exams"] .phc-subtitle {
        font-size: 0.82rem !important;
    }
    body[data-route="/schooladmin/exams"] header[style*="margin-bottom: 1.5rem"] {
        margin-bottom: 0.85rem !important;
    }
    /* Tab shell: tighter chrome, shorter tabs, slimmer second row */
    body[data-route="/schooladmin/exams"] .exam-nav-shell {
        padding: 6px !important;
        border-radius: 16px !important;
    }
    body[data-route="/schooladmin/exams"] .exam-nav-group.primary {
        padding: 4px !important;
        border-radius: 12px !important;
    }
    body[data-route="/schooladmin/exams"] .exam-nav-group.secondary {
        margin-top: 6px !important;
    }
    body[data-route="/schooladmin/exams"] .exam-nav-group.secondary .tab-3d {
        min-width: 150px;
    }
    body[data-route="/schooladmin/exams"] .tab-3d {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.68rem;
        gap: 6px;
        border-radius: 10px;
    }
    body[data-route="/schooladmin/exams"] .tab-3d i {
        font-size: 0.9rem;
    }
    body[data-route="/schooladmin/exams"] #exam-dyn-actions {
        margin-bottom: 0.85rem !important;
    }
    /* Filters: shorter controls, tighter card */
    body[data-route="/schooladmin/exams"] .filter-label {
        margin-bottom: 0.25rem;
        font-size: 0.66rem;
    }
    body[data-route="/schooladmin/exams"] .filter-select {
        height: 34px;
        font-size: 0.82rem;
        border-radius: 8px;
    }
    body[data-route="/schooladmin/exams"] .workspace-card {
        border-radius: 16px;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root .workspace-card[style*="padding: 1.25rem"] {
        padding: 0.85rem 1rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root [style*="gap: 1.5rem; align-items: flex-end"] {
        gap: 0.85rem !important;
    }
    /* Analytics header row + action buttons */
    body[data-route="/schooladmin/exams"] #exam-tab-content-root [style*="justify-content: space-between"][style*="margin-bottom: 1.5rem"] {
        margin-bottom: 0.85rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root [style*="height: 42px"] {
        height: 36px !important;
    }
    /* KPI cards: smaller headline numbers, tighter padding and icons */
    body[data-route="/schooladmin/exams"] #exam-tab-content-root [style*="font-size: 2.75rem"] {
        font-size: 2rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root .workspace-card[style*="padding: 1.5rem 1.5rem 1.25rem"] {
        padding: 1rem 1.15rem 0.85rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root .workspace-card [style*="width: 40px; height: 40px"] {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 1rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root .workspace-card [style*="margin-bottom: 1.1rem"] {
        margin-bottom: 0.6rem !important;
    }
    body[data-route="/schooladmin/exams"] #exam-tab-content-root [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 1.25rem"] {
        gap: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ----------------------------------------------------------------------------
   7. TOUCH ERGONOMICS (all five modules, coarse pointers only)
   ------------------------------------------------------------------------- */
@media (pointer: coarse) and (max-width: 768px) {
    body[data-route^="/schooladmin"] button,
    body[data-route^="/schooladmin"] select,
    body[data-route^="/schooladmin"] input[type="checkbox"] + .slider {
        touch-action: manipulation;
    }
    body[data-route^="/schooladmin"] .btn-premium,
    body[data-route^="/schooladmin"] .filter-select,
    body[data-route^="/schooladmin"] .form-input {
        min-height: 40px;
    }
}