/* =====================================================================
   EyeQ School — RESPONSIVE PATCH
   ---------------------------------------------------------------------
   Load this file AFTER eyeq-theme.css (last <link> in _head_css.cshtml):

     <link href="~/css/eyeq-theme.css" rel="stylesheet" asp-append-version="true" />
     <link href="~/css/eq-responsive-patch.css" rel="stylesheet" asp-append-version="true" />

   Covers: mobile (<=575px), large mobile/small tablet (576-767px),
   tablet (768-991px), small laptop (992-1199px), laptop/desktop
   (1200-1599px), large monitor (>=1600px).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY NET — no page should ever cause horizontal body-scroll
   --------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.eq-shell, .eq-main {
    max-width: 100vw;
}

img, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* every table gets a horizontal-scroll fallback even if a page forgot to
   wrap it in .table-responsive (report/print style pages often do) */
.eq-content table:not(.dataTable) {
    max-width: 100%;
}

.table-responsive, .eq-scroll {
    -webkit-overflow-scrolling: touch;
}

/* generic safety wrap for a bare <table> with no responsive parent */
/* Only bare tables: .eq-grid / .table already size themselves (width:100%,
   right-aligned numeric cells) and turning them into display:block made
   e.g. the dashboard "Money today" table shrink to its content. */
.eq-content > table:not(.eq-grid):not(.table),
.card-body > table:not(.eq-grid):not(.table),
.eq-card-body > table:not(.eq-grid):not(.table) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* wide fixed-layout report/print tables (ReportCard, Voucher, DateSheet,
   TimeTable, SignatureSheet, RollNoSlip …) — let them scroll instead of
   breaking the page */
.eq-print-area, .print-table, .report-wrap, .voucher-wrap {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------
   1. TOUCH TARGETS — comfortable tap size on phones/tablets
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .btn, .eq-btn, .form-control, .form-select, select, input[type="text"],
    input[type="number"], input[type="date"], input[type="email"],
    input[type="password"], input[type="search"], textarea {
        min-height: 40px;
    }

    .eq-nav-link, .dropdown-item, .eq-mega a {
        min-height: 42px;
    }

    .btn, .eq-btn {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ---------------------------------------------------------------------
   2. FORMS — extra breakpoint at 768px (theme only breaks at 992/860)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .eq-form, .eq-form.two, .eq-form.three, .eq-form.four {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .eq-field.span-2, .eq-field.span-3, .eq-field.span-full {
        grid-column: span 1 !important;
    }

    .eq-filter {
        flex-direction: column;
        align-items: stretch;
    }

        .eq-filter .eq-field, .eq-filter .eq-field.grow {
            width: 100%;
            min-width: 0;
        }

        .eq-filter .eq-btn-row {
            margin-left: 0;
            width: 100%;
        }

            .eq-filter .eq-btn-row .btn, .eq-filter .eq-btn-row .eq-btn {
                flex: 1 1 auto;
            }
}

@media (min-width: 769px) and (max-width: 991px) {
    /* tablet: keep two columns instead of collapsing all the way to one */
    .eq-form.three, .eq-form.four {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* form controls never overflow their card on any screen */
.form-control, .form-select, select, textarea, input {
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   3. DASHBOARD "GO TO" STRIP & STAT CARDS — fixed 10-col grid breaks
      on anything smaller than a wide desktop
   --------------------------------------------------------------------- */
@media (max-width: 1599px) {
    .eq-goto-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .eq-goto-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .eq-goto-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

@media (min-width: 621px) and (max-width: 991px) {
    .eq-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ---------------------------------------------------------------------
   4. TOP NAV — small phones: tighter brand/search/user area
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .eq-nav {
        padding: 0 8px;
    }

    .eq-nav-brand {
        padding-right: 6px;
        gap: 6px;
    }

    .eq-context {
        padding: 6px 8px;
        gap: 6px;
        flex-wrap: wrap;
    }

        .eq-context .school b {
            max-width: 42vw;
        }

    .eq-search, .eq-nav-search {
        width: 100%;
        order: 5;
    }
}

/* dropdowns (user menu, notifications, mega panels while collapsed)
   must never spill off the edge of a small screen */
.dropdown-menu {
    max-width: calc(100vw - 16px);
}

@media (max-width: 575px) {
    .eq-nav-user .dropdown-menu, .dropdown-menu-end {
        right: 0;
        left: auto !important;
    }
}

/* ---------------------------------------------------------------------
   5. MODALS — fit small screens, keep long bodies scrollable
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

        .modal-dialog.modal-lg, .modal-dialog.modal-xl {
            max-width: calc(100vw - 16px);
        }
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------
   6. TABLES / GRIDS — readable on tablets, compact on phones
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .table, table.eq-grid {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .table, table.eq-grid {
        font-size: 12px;
    }

        .table > tbody > tr > td, .table > thead > tr > th,
        table.eq-grid tbody td, table.eq-grid thead th {
            padding: 6px 8px;
        }
}

/* frozen/pinned columns keep working, but shrink their reserved width
   on phones so more of the scrollable grid is visible */
@media (max-width: 575px) {
    [class*="pin-left"], [class*="pin-right"], .eq-pin {
        min-width: 90px;
    }
}

/* ---------------------------------------------------------------------
   7. BUTTON ROWS / ACTION BARS — always wrap, never overflow
   --------------------------------------------------------------------- */
.eq-btn-row, .btn-group, .btn-toolbar {
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .eq-btn-row .btn, .eq-btn-row .eq-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .eq-head .actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
   8. CARDS / PANELS — sensible padding at every size
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .card-body, .eq-card-body {
        padding: 12px;
    }

    .card-header, .eq-card-head {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

        .eq-card-head .right, .card-header .right {
            width: 100%;
            justify-content: flex-start;
        }
}

/* ---------------------------------------------------------------------
   8b. CARD-HEADER "title | buttons" ROW (Bootstrap row > col + col.text-end)
   Used by almost every Index/Create/Update view:
     <div class="card-header eq-card-head"><div class="row">
        <div class="col ..."><h4>Title</h4></div>
        <div class="col text-end"> ...buttons... </div></div></div>
   On phones two equal .col's squeezed the title and the buttons side by
   side. Stack them and left-align the buttons. Scoped to card headers only.
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .card-header > .row > .col,
    .eq-card-head > .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

        .card-header > .row > .col.text-end,
        .eq-card-head > .row > .col.text-end {
            text-align: left !important;
        }

            .card-header > .row > .col.text-end .btn,
            .eq-card-head > .row > .col.text-end .btn {
                margin: 4px 6px 4px 0 !important;
            }
}

/* ---------------------------------------------------------------------
   9. CONTENT WIDTH ACROSS DEVICE CLASSES
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .eq-content {
        padding: 10px !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .eq-content {
        padding: 12px 16px 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .eq-content {
        padding: 14px 20px 24px !important;
    }
}

/* large monitors: let the shell breathe a bit more instead of stopping
   dead at 1600px on ultra-wide screens */
@media (min-width: 1920px) {
    .eq-content {
        max-width: 1800px;
    }
}

/* ---------------------------------------------------------------------
   10. CHARTS / WIDGETS (ApexCharts, etc.) — force full width so the
       library's own resize logic has correct bounds
   --------------------------------------------------------------------- */
.apexcharts-canvas, .apex-charts, canvas {
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   11. UTILITY — quick visibility helpers if a view needs to hide
       low-priority columns/blocks on small screens
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   12. PRINT — keep report layouts full-width regardless of screen fixes
   --------------------------------------------------------------------- */
@media print {
    html, body {
        overflow: visible;
    }

    .eq-content, .eq-print-area, .print-table, .report-wrap, .voucher-wrap {
        overflow: visible !important;
        max-width: none !important;
    }
}

/* =====================================================================
   13. NAVBAR — HAR SCREEN SIZE / ZOOM PAR FIT
   ---------------------------------------------------------------------
   Problem: laptop (125%/150% scaling => ~1280-1536 css px) par menu
   tabs strip se bahar nikal kar hidden-scroll me chhup jate the
   (Reports, App gayab). 22" monitor (1920px) par sab fit ho jate the.

   Fix (do hisse):
   a) neeche ki CSS tabs ko screen ke hisaab se compact karti hai
   b) eyeq-app.js jo tab phir bhi na samaye use "More" dropdown me daal
      deta hai — to koi menu kabhi gayab nahi hota.
   ===================================================================== */
@media (min-width: 861px) {
    .eq-nav-item {
        flex: 0 0 auto;
    }

    .eq-nav-scroll {
        overflow-x: hidden;
    }

    .eq-nav-item.eq-nav-hidden {
        display: none !important;
    }

    .eq-nav-brand b {
        max-width: 220px;
    }
}

/* mobile drawer: "More" ki zarurat nahi, sab items normal list me */
@media (max-width: 860px) {
    .eq-nav-more {
        display: none !important;
    }

    .eq-nav-item.eq-nav-hidden {
        display: flex !important;
    }
}

/* laptop / chhota monitor: thoda compact */
@media (min-width: 861px) and (max-width: 1599px) {
    .eq-nav {
        padding: 0 10px;
        gap: 2px;
    }

    .eq-nav-link {
        padding: 0 9px;
        gap: 5px;
        font-size: 12.5px;
    }

    .eq-nav-brand {
        padding-right: 8px;
    }

        .eq-nav-brand b {
            max-width: 170px;
        }
}

/* small laptop (1366 / 125% scaling): icons hata kar jagah bachao */
@media (min-width: 861px) and (max-width: 1439px) {
    .eq-nav-link i {
        display: none;
    }

    .eq-nav-more .eq-nav-link i {
        display: inline;
    }

    .eq-nav-brand b {
        max-width: 130px;
    }

    .eq-sess-btn.eq-nav-user {
        margin-right: 4px;
        padding: 0 8px;
    }

    .eq-nav-user .who {
        display: none;
    }
}

@media (min-width: 861px) and (max-width: 1199px) {
    .eq-nav-link {
        padding: 0 7px;
        font-size: 12px;
    }

    .eq-nav-brand b {
        display: none;
    }
}

/* "More" dropdown panel */
.eq-more-panel {
    min-width: 290px;
    max-width: min(420px, calc(100vw - 16px));
    max-height: calc(100vh - var(--eq-nav-h) - 12px);
    overflow-y: auto;
    padding: 6px 8px;
}

.eq-nav-item.open .eq-more-panel {
    display: block;
}

.eq-more-sec {
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--eq-line);
}

    .eq-more-sec:last-child {
        border-bottom: 0;
    }

.eq-more-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--eq-text-2);
}

.eq-more-body {
    display: block;
}

    .eq-more-body .eq-mega-col {
        display: block;
    }

.eq-more-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--eq-radius-sm);
    color: var(--eq-text);
    font-size: 12.8px;
    text-decoration: none;
    border-bottom: 0;
}

    .eq-more-link:hover, .eq-more-link.active {
        background: var(--eq-accent-soft);
        color: var(--eq-accent-dark);
    }

    .eq-more-link i {
        display: inline;
    }

/* ---------------------------------------------------------------------
   14. EVERY SCREEN — wrapper jo JS ne bare tables par lagaya
   --------------------------------------------------------------------- */
.eq-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* long text / urls kabhi card se bahar na jayein */
.eq-content, .card-body, .eq-card-body, .modal-body {
    overflow-wrap: break-word;
}

    .eq-content table, .eq-content th, .eq-content td {
        overflow-wrap: normal;
    }

/* 1366x768 jaisi kam height wali screens: modal aur dropdown scroll karein */
@media (max-height: 760px) {
    .modal-body {
        max-height: 62vh;
    }

    .eq-mega {
        max-height: calc(100vh - var(--eq-nav-h) - 10px);
        overflow-y: auto;
    }
}

/* ultra-wide (>= 2200px): content ko zyada failne do, par center rakho */
@media (min-width: 2200px) {
    .eq-content {
        max-width: 2000px;
    }
}

/* ---------------------------------------------------------------------
   15. REPORT SWITCHER -> CHIP STYLE
   Class Wise / Section Wise / House Wise ... (13 report views,
   sab .radio-container use karte hain). Radio ka gol circle poora
   hidden hai; poora chip (box) clickable hai aur select hone par
   poora box teal color se bhar jata hai.
   --------------------------------------------------------------------- */
.col-12.d-flex:has(> .radio-container) {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.radio-container {
    position: relative;
    display: inline-flex;
    margin: 0 !important;
}

    /* gol radio button hide, par poore chip par click lagta hai */
    .radio-container input[type="radio"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        opacity: 0 !important;
        cursor: pointer;
        z-index: 2;
    }

    .radio-container label.eq-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 7px 16px;
        min-height: 34px;
        background: var(--eq-surface);
        border: 1px solid #CBD2E0;
        border-radius: 6px;
        color: var(--eq-text);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }

    .radio-container:hover label.eq-label {
        border-color: var(--eq-accent);
        color: var(--eq-accent-dark);
    }

    /* selected: poora box color se bhar jata hai */
    .radio-container input[type="radio"]:checked + label.eq-label {
        background: var(--eq-accent);
        border-color: var(--eq-accent);
        color: #fff;
        font-weight: 600;
    }

    .radio-container input[type="radio"]:focus-visible + label.eq-label {
        outline: 2px solid var(--eq-accent);
        outline-offset: 2px;
    }

@media (max-width: 575px) {
    .radio-container label.eq-label {
        padding: 6px 12px;
        font-size: 12px;
    }
}