/* ============================================================
   CHERI SMS — Comprehensive Responsive Layer
   Sprint 82 / Responsiveness pass — 2026-04-29

   Sits AFTER mobile.css. mobile.css handles touch-target sizing;
   this file fixes cross-cutting layout/overflow patterns at every
   tier so the existing 470 views render acceptably without per-file
   edits. Use semantic Bootstrap-compatible utilities.

   Breakpoints (Bootstrap 5):
     xs   <  576  phones (portrait)
     sm   ≥  576  phones (landscape) / small tablets
     md   ≥  768  tablets (portrait)
     lg   ≥  992  tablets (landscape) / small laptops
     xl   ≥ 1200  desktops
     xxl  ≥ 1400  large desktops
   ============================================================ */

/* ============================================================
   1. TABLE OVERFLOW — auto-scroll on narrow viewports
   The sidebar is built around tables. When a table has many
   columns it must scroll horizontally on phones rather than
   blow out the layout.
   ============================================================ */

/* Any .card containing a raw <table> gets horizontal scroll on mobile.
   Views that already wrap in .table-responsive aren't affected. */
@media (max-width: 991.98px) {
    .card-body > .table:not(.table-static),
    .card > .table:not(.table-static) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Force min-width so the inner table maintains its shape while scrolling */
    .card-body > .table:not(.table-static) {
        min-width: max-content;
    }

    /* Plain tables outside cards too */
    body > .container > .table:not(.table-static),
    body > .container-fluid > .table:not(.table-static) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* On <576px (phones), tighten table cell padding to fit more data */
@media (max-width: 575.98px) {
    .table-sm > :not(caption) > * > * {
        padding: 0.35rem 0.4rem;
        font-size: 0.78rem;
    }
    .table > :not(caption) > * > * {
        padding: 0.5rem 0.5rem;
    }
}

/* ============================================================
   2. PAGE HEADERS — always wrap on mobile
   Many pages use:
     <div class="page-header d-flex justify-content-between">
       <h4>Title</h4>
       <button>...</button>
     </div>
   Without flex-wrap the button hangs off-screen. Force wrap.
   ============================================================ */

@media (max-width: 767.98px) {
    .page-header.d-flex,
    .page-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-header .btn,
    .page-header > div > .btn {
        flex-shrink: 0;
    }
    .page-header h4 { font-size: 1.05rem; }
    .page-header h5 { font-size: 0.95rem; }
}

/* ============================================================
   3. KPI / STAT CARD ROWS — stack on phones, 2-up on tablet
   Pattern: <div class="row g-3"> with col-md-3 cards.
   Defaults to 4-up on md+, 2-up on sm, 1-up on xs.
   ============================================================ */

@media (max-width: 575.98px) {
    .row > [class*="col-md-3"],
    .row > [class*="col-md-4"] {
        margin-bottom: 0.5rem;
    }
    /* KPI numbers — scale down */
    .card-body h2 { font-size: 1.3rem; }
    .card-body h3 { font-size: 1.1rem; }
    .card-body h4 { font-size: 1rem; }
}

/* ============================================================
   4. MODAL DIALOGS — scrollable + fit small screens
   Bootstrap modals are 500px wide by default; on phones they
   become awkward. Force full-width + max-height.
   ============================================================ */

@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 0.5rem);
    }
    .modal-content {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }
    .modal-body {
        padding: 0.75rem;
    }
    .modal-footer {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* Sprint 99 (2026-05-05): tablet-portrait modal polish.
   Bootstrap's modal-lg defaults to 800px and modal-xl to 1140px, so on
   the 576-767 range (tablet portrait) they're either constrained by the
   viewport or cramped depending on body content. The audit found 28
   modal-lg/modal-xl instances without explicit modal-fullscreen-sm-down.
   This rule gives them the fullscreen-sm-down treatment globally so no
   per-view edits are needed. .modal-fullscreen on small screens uses
   100vw width + min-height:100vh, which is the desired tablet behaviour. */
@media (max-width: 767.98px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 0.5rem);
        margin: 0.5rem auto;
    }
    .modal-dialog.modal-lg .modal-content,
    .modal-dialog.modal-xl .modal-content {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }
}

/* ============================================================
   5. FORMS — labels above inputs on mobile, even with col-form-label
   ============================================================ */

@media (max-width: 575.98px) {
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
    .form-label, .col-form-label {
        margin-bottom: 0.25rem;
    }
    /* Authors used inline pixel widths on form controls in 30+ views (verified by
       grep: VendorTdsRegister, ParentAttendance/Awards/Fees/HealthReport/Documents/
       Engagement/Feedback, CanteenPOS, Receipts80G, Recon26ASHistory, etc).
       Release them all to fill available space on phones. */
    input[type="text"][style*="max-width"],
    input[type="text"][style*="width:"],
    input[type="number"][style*="max-width"],
    input[type="number"][style*="width:"],
    input[type="date"][style*="width:"],
    input[type="search"][style*="width:"],
    select[style*="max-width"],
    select[style*="min-width"],
    select[style*="width:"] {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Card / container with hardcoded max-width — release any side padding so
       phones use every available pixel (auto-shrink already handles the width). */
    .container[style*="max-width"],
    .card[style*="max-width"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Card header / body padding tightening on phones */
    .card-header { padding: 0.5rem 0.75rem; }
    .card-body   { padding: 0.75rem; }
}

/* ============================================================
   6. CHARTS — cap height on mobile to keep above-the-fold content
   Chart.js canvases without explicit height grow huge on mobile.
   ============================================================ */

@media (max-width: 767.98px) {
    .chart-container,
    canvas[id*="hart"],   /* "Chart" / "chart" */
    canvas[id*="aph"],    /* "Graph" */
    .card-body > canvas {
        max-height: 280px !important;
        height: auto !important;
    }
}

/* ============================================================
   7. SIDEBAR — refine breakpoints
   Layout already toggles at 768px. Add 992px tablet behavior:
   sidebar narrows but stays visible.
   ============================================================ */

@media (min-width: 769px) and (max-width: 991.98px) {
    /* Override the --sidebar-width custom property so .topbar.left and
       .main-content.margin-left (which both reference the var) follow. */
    :root { --sidebar-width: 240px; }
    .sidebar a { font-size: 0.78rem; padding: 6px 12px; }
    .sidebar .menu-section-title,
    .sidebar .menu-subtitle { font-size: 0.8rem; }
    .main-content { padding: 16px 20px; }
}

/* On phones: also hide the search shortcut hint badge */
@media (max-width: 575.98px) {
    .topbar .page-title {
        max-width: 60vw;
        font-size: 0.8rem;
    }
    .topbar .topbar-actions .btn-text {
        display: none;
    }
}

/* ============================================================
   8. NAV TABS — horizontal scroll instead of wrap when many tabs
   ============================================================ */

@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .nav-tabs .nav-item {
        flex-shrink: 0;
    }
    .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.7rem;
    }
}

/* ============================================================
   9. BUTTON GROUPS — stack on phones when too many
   ============================================================ */

@media (max-width: 575.98px) {
    .btn-group .btn {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }
    .d-flex.gap-2:has(> .btn:nth-child(4)),
    .d-flex.gap-3:has(> .btn:nth-child(4)) {
        flex-wrap: wrap;
    }
}

/* ============================================================
   10. CALENDAR / GRID PATTERNS — single column on phones
   Pages like /Portal/StudentAttendanceDashboard render a 7-col
   calendar grid that doesn't fit on phones.
   ============================================================ */

@media (max-width: 575.98px) {
    [style*="grid-template-columns: repeat(7"],
    [style*="grid-template-columns:repeat(7"] {
        grid-template-columns: repeat(7, minmax(28px, 1fr)) !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================================
   11. PRINT — hide nav, expand content
   ============================================================ */

@media print {
    .sidebar, .topbar, .sidebar-backdrop, .sidebar-toggle,
    nav, .breadcrumb, .btn, .page-header .btn-group {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    .table { font-size: 0.75rem !important; }
}

/* ============================================================
   12. ACCESSIBILITY — respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   13. UTILITY — view-on-mobile / view-on-desktop helpers
   For cases where authors want explicit hide/show beyond
   Bootstrap's d-md-none, etc.
   ============================================================ */

.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 767.98px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
    .mobile-only-flex { display: flex !important; }
    .mobile-only-inline { display: inline !important; }
}

/* ============================================================
   14. LONG TEXT / EMAIL ADDRESSES — wrap inside table cells
   Common offender: <code>uuid-like-string</code> in tables
   forces horizontal scroll. Allow word-break inside tables.
   ============================================================ */

@media (max-width: 767.98px) {
    .table code,
    .table small {
        word-break: break-word;
        white-space: normal;
    }
}


/* ============================================================
   15. TEXT EXPANSION — multi-language overflow protection
   Sprint 84 — German/Tamil/Hindi/Russian translations are typically
   20-35% longer than English. These rules let text reflow rather
   than overflow when those languages are selected.
   ============================================================ */

/* Sidebar nav links — wrap to 2 lines if needed */
.sidebar a, .sidebar .menu-section-title, .sidebar .menu-subtitle {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
    min-height: auto;
}

/* Buttons — allow wrapping inside instead of clipping */
.btn:not(.btn-icon):not(.btn-close) {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    min-height: 2rem;
    line-height: 1.3;
}

/* Form labels: long translated labels should wrap */
.form-label, label {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Card headers + KPI stat labels: wrap long descriptions */
.card-header, .card-title, .kpi-label, .stat-label {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Page header h1-h6: never let translated headings overflow */
.page-header h1, .page-header h2, .page-header h3,
.page-header h4, .page-header h5, .page-header h6,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Table headers: vertically align top + wrap */
.table thead th, table.table th {
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

/* Dropdown options — Bootstrap caps width which can clip translations */
.dropdown-menu { min-width: max-content; max-width: 90vw; }

/* Modal title: wrap if translation is long */
.modal-title { white-space: normal; word-break: break-word; line-height: 1.3; }

/* Nav tabs: tab text can wrap but the row scrolls horizontally */
.nav-tabs .nav-link {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Badges — allow them to grow vertically with longer translated status names */
.badge { white-space: normal; line-height: 1.2; }

/* Topbar page-title — already truncates on phones; on desktop give it room */
@media (min-width: 992px) {
    .topbar .page-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 50vw;
        line-height: 1.2;
    }
}

/* Tooltip arrow position breaks if tooltip text wraps — cap width */
.tooltip { max-width: 280px; }

/* ============================================================
   16. SPRINT 99 — TABLET-PORTRAIT POLISH (576-991px)
   The Sprint 92 responsive audit found two patterns that
   degrade the tablet-portrait experience even though phones
   and desktops both render cleanly:

     (a) ~40 filter/form rows declare col-md-X without a
         col-sm-Y fallback. Bootstrap then keeps the col-md-X
         layout from 768 upward (where it's tight) and only
         drops to full-width at 575 and below. The 576-767
         band squishes 4-5 controls into &lt;100px each.

     (b) Leaflet/Google-map cards use fixed heights
         (height:400-500px) that consume the entire visible
         area on tablet portrait, pushing the controls panel
         below the fold.

   Both fixed here cross-cuttingly so no per-view edits are
   required for the typical case.
   ============================================================ */

/* (a) Convert col-md-3 / col-md-2 to roughly 2-up on tablet
       portrait when no col-sm-* is present. Bootstrap's class-
       attribute pattern lets us target this with attribute
       selectors. We use the [class*="col-md-3"]:not([class*="col-sm"])
       form so rows that DO declare an explicit col-sm-* keep
       their author intent. col-md-2 / col-md-3 become 6/12;
       col-md-4 becomes 12/12 (full-width). */
@media (max-width: 767.98px) and (min-width: 576px) {
    [class*="col-md-2"]:not([class*="col-sm-"]):not([class*="col-xs-"]),
    [class*="col-md-3"]:not([class*="col-sm-"]):not([class*="col-xs-"]) {
        flex: 0 0 50%;
        max-width: 50%;
    }
    [class*="col-md-4"]:not([class*="col-sm-"]):not([class*="col-xs-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* (b) Leaflet / Google-map containers — clamp height on small
       viewports so the bus marker remains visible alongside the
       controls panel (admin map) or the boarding-history table
       (parent map). */
@media (max-width: 767.98px) {
    #map, #busMap, .map-container, [id*="leaflet"], .leaflet-container {
        height: 280px !important;
        min-height: 200px !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    #map, #busMap, .map-container, .leaflet-container {
        height: 360px !important;
        min-height: 240px !important;
    }
}

/* (c) SetupWizard's 5-step circle indicator — flex-wrap on phones
       so the steps stack two rows instead of overflowing horizontally.
       Targets the typical pattern: a .d-flex container whose direct
       children are the step circles + connector lines. We rely on
       the wizard's container having `.setup-wizard-steps` (added by
       a per-file edit in this sprint where needed). */
@media (max-width: 575.98px) {
    .setup-wizard-steps {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .setup-wizard-steps > * {
        flex: 1 1 auto;
        min-width: 0;
    }
}