/* ==========================================================================
   RESPONSIVE LAYOUT — desktop-first, with overrides at three breakpoints.

   Existing stylesheets are all desktop layouts (no @media rules). This file
   adds tablet + phone behaviours by overriding the most painful patterns:
     • Multi-column grids → single column
     • Wide horizontal rows of cards → horizontally scrollable strips
     • Tables with many columns → horizontal scroll wrapper
     • Side-by-side auth panels → stacked
     • Fixed-width modals → full-screen with internal scroll

   Breakpoints:
     1024px and below — tablet landscape & smaller
      768px and below — tablet portrait & large phones
      480px and below — phone portrait

   Loaded LAST in index.html so it overrides any earlier rules without
   needing !important everywhere. Where !important IS used below, it's
   because the original rule sets the property inline via JS.
   ========================================================================== */


/* ─── 1024px and below — tablet landscape & smaller ──────────────────── */
@media (max-width: 1024px) {

    /* Dashboard section grids drop to single column. The default 2-col
        layout makes charts squashed. */
    .dash-section-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Metric cards row: keep on one row but allow horizontal scroll
        rather than overflowing the viewport. */
    .metrics-row {
        grid-template-columns: repeat(5, minmax(180px, 1fr)) !important;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    [data-card-count="3"] .metrics-row { grid-template-columns: repeat(3, minmax(180px, 1fr)) !important; }
    [data-card-count="5"] .metrics-row { grid-template-columns: repeat(5, minmax(180px, 1fr)) !important; }
    [data-card-count="7"] .metrics-row { grid-template-columns: repeat(7, minmax(180px, 1fr)) !important; }

    /* Hero section (donut + flagged list etc.) → stacked */
    .peb-hero,
    [data-hero-style="donut"]   .peb-hero,
    [data-hero-style="compact"] .peb-hero,
    [data-show-flagged="false"][data-hero-style="editorial"] .peb-hero {
        grid-template-columns: 1fr !important;
    }

    /* Benchmark grid */
    .peb-bench-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─── 768px and below — tablet portrait & large phones ───────────────── */
@media (max-width: 768px) {

    /* ── Topbar / navigation ─────────────────────────────────────────── */

    /* Pebble tab bar (rounded pill tabs at top of dashboard) — let it
        scroll horizontally rather than wrap awkwardly. */
    .pebble-tabbar,
    .pebble-tabbar-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;       /* Firefox */
    }
    .pebble-tabbar::-webkit-scrollbar,
    .pebble-tabbar-inner::-webkit-scrollbar { display: none; }
    .pebble-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Hide the school name chip on small screens to save horizontal space;
        the school is implied by the user being signed in. */
    .school-chip { display: none !important; }

    /* User name/role can shrink — show only the avatar + role badge */
    .avatar-section #userName,
    .avatar-section > div > div:first-child { display: none !important; }

    /* Sign-out button gets compact */
    .pebble-signout {
        font-size: .75rem !important;
        padding: .35rem .6rem !important;
    }

    /* Topbar logo can shrink */
    .topbar img,
    .pebble-tabbar-logo {
        height: 40px !important;
    }

    /* ── Auth screen ────────────────────────────────────────────────── */

    /* Two-panel login → stacked, left panel shrinks to a header */
    .auth-screen {
        flex-direction: column !important;
        min-height: 100vh;
    }
    .auth-left {
        padding: 1.5rem 1.25rem !important;
        text-align: center;
    }
    .auth-left ul { display: none; }                   /* feature list hidden on mobile */
    .auth-left p { font-size: .9rem; margin-bottom: .5rem; }
    .auth-right {
        padding: 1.5rem 1.25rem !important;
        flex: 1;
    }
    .auth-form { width: 100%; max-width: 400px; margin: 0 auto; }
    .sso-btn {
        width: 100%;
        padding: .9rem 1rem !important;
        font-size: 1rem !important;
    }

    /* ── Cohort Overview ────────────────────────────────────────────── */

    /* Metric cards: scroll horizontally rather than try to fit all 5 */
    .metrics-row {
        display: flex !important;
        flex-direction: row;
        gap: .75rem !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        scrollbar-width: thin;
    }
    .metric-card {
        flex: 0 0 80% !important;
        max-width: 320px;
        min-width: 220px;
        scroll-snap-align: start;
    }
    .metrics-row-labels { display: none !important; }   /* "Progress / Pupils needing attention" labels would clash with scroll */

    /* Scope bar (Year / Form / Classes filters) → stacked */
    .scope-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .6rem !important;
    }
    .scope-control {
        width: 100%;
    }
    .scope-control select {
        width: 100%;
    }
    /* "Generate PDF Report" + "Download Excel" buttons → full-width row */
    .scope-bar > div[style*="margin-left:auto"] {
        margin-left: 0 !important;
        width: 100%;
        flex-wrap: wrap;
    }
    .generate-report-btn {
        flex: 1 1 auto;
        min-width: 140px;
    }

    /* Section headers and chart heights tighten */
    .dash-section { padding: 1rem !important; }
    .dash-section-title { font-size: 1.1rem !important; }
    .widget canvas { max-height: 220px; }

    /* ── Students table (snv-table) ─────────────────────────────────── */

    /* The wide table doesn't fit; wrap it in horizontal scroll. */
    .snv-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .snv-table-wrap > * { min-width: 720px; }

    /* sx-header (Students page heading + scope selects) → stacked */
    .sx-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
    }
    .sx-scope {
        flex-wrap: wrap;
        gap: .5rem !important;
    }
    .sx-scope-field {
        flex: 1 1 calc(50% - .25rem);
    }

    /* ── Modals ─────────────────────────────────────────────────────── */

    /* Generic modal — fill the screen on mobile */
    .snv-modal,
    .snv-modal-backdrop > div:not(.snv-modal-backdrop) {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: auto;
    }
    .snv-modal-body { max-height: 60vh; overflow-y: auto; }

    /* ── Forms / inputs need bigger touch targets ─────────────────── */
    button, select, input[type="text"], input[type="search"], input[type="email"], input[type="number"] {
        min-height: 40px;       /* Apple HIG / Material Design recommend ≥ 44px; 40 is a good compromise with our compact density */
    }
    .snv-check {
        width: 22px !important;
        height: 22px !important;
    }
}


/* ─── 480px and below — phone portrait ───────────────────────────────── */
@media (max-width: 480px) {

    /* Tighten everything one more notch */
    body { font-size: 14px; }

    /* Topbar: hide more, show less */
    .topbar-nav, .pebble-sidenav { display: none !important; }
    .topbar { padding: .5rem .75rem !important; min-height: 56px; }

    /* Pebble tab bar: shorter, thinner pills */
    .pebble-tab {
        padding: .4rem .8rem !important;
        font-size: .8rem !important;
    }

    /* Subtitle band — collapse to one line */
    .pebble-subband {
        padding: .3rem .75rem !important;
        font-size: .75rem !important;
    }
    .pebble-subband-pill {
        font-size: .75rem !important;
        padding: .3rem .8rem !important;
    }

    /* Cohort Overview: even tighter */
    .dashboard-content { padding: .5rem !important; }
    .dash-section { padding: .75rem !important; margin-bottom: .75rem !important; }
    .dash-section-title { font-size: 1rem !important; }
    .dash-section-desc { font-size: .8rem !important; }

    /* Metric cards on phone: full-width snap */
    .metric-card {
        flex: 0 0 90% !important;
        min-width: 0;
    }

    /* Auth screen on phone */
    .auth-left { padding: 1rem !important; }
    .auth-left p { font-size: .85rem; }
    .auth-right h2 { font-size: 1.4rem; }

    /* Veyra prompts / generate report buttons: full width stacked */
    .generate-report-btn {
        flex: 1 1 100%;
        font-size: .85rem;
    }

    /* Slot tracker bar — compact label */
    .slot-tracker .slot-label {
        font-size: .8rem;
        flex-wrap: wrap;
        gap: .25rem;
    }

    /* Toast notifications — full-width */
    .snv-toast,
    [class*="toast"] {
        left: .5rem !important;
        right: .5rem !important;
        max-width: none !important;
    }
}


/* ─── Assessment status indicators ───────────────────────────────────── */
/* Distinguish "assessed + on track" from "not assessed" so users can
   scan the Students table for who still needs to be tested. The original
   stylesheet only defined .snv-cat-high / -mild / -ok / -none — we add
   two more variants here without touching the existing ones. */

.snv-cat-unassessed {
    background: #f1f3f5;
    color: #6c757d;
    border: 1px dashed #adb5bd;     /* dashed = "still to do" semantically */
    font-style: italic;
}
.snv-cat-unassessed .snv-cat-dot {
    background: #adb5bd;
    opacity: 0.6;
}

.snv-cat-ontrack {
    background: #e6f4ea;            /* soft green — meets typical range for age */
    color: #1e7e3a;
    border: 1px solid #cfe9d7;
}
.snv-cat-ontrack .snv-cat-dot {
    background: #2e7d32;
}

.snv-cat-strong {
    background: #e3f0fe;            /* soft blue — above typical range */
    color: #1565c0;
    border: 1px solid #cfe1f5;
    font-weight: 600;
}
.snv-cat-strong .snv-cat-dot {
    background: #1565c0;
}

/* Help-panel legend pills — render each band's tag with a soft
   background that matches the corresponding pill in the row. Colours
   pulled straight from the .snv-cat-* rules above so legend and table
   stay visually consistent. */
.snv-help-sev {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.3;
}
.snv-help-sev-high   { background: #fdecec; color: #b91c1c; border-color: #f5c2c2; }   /* Needs Support */
.snv-help-sev-mild   { background: #fef3c7; color: #b45309; border-color: #f3d9a4; }   /* Developing */
.snv-help-sev-ok     { background: #e6f4ea; color: #1e7e3a; border-color: #cfe9d7; }   /* On Track */
.snv-help-sev-strong { background: #e3f0fe; color: #1565c0; border-color: #cfe1f5; }   /* Strong */
.snv-help-sev-none   { background: #f1f3f5; color: #6c757d; border-color: #adb5bd;     /* Not assessed */
                       border-style: dashed; }

/* Whole-row dim for unassessed pupils — easy to scan visually */
.snv-row-wrap[data-assessed="false"] .snv-row {
    background: #fafbfc;
    opacity: 0.78;
}
.snv-row-wrap[data-assessed="false"] .snv-name {
    color: #5a6570;
    font-style: italic;
}
.snv-row-wrap[data-assessed="false"]:hover .snv-row {
    opacity: 1;                     /* full clarity on hover */
}


/* ─── Inline report viewer modal ─────────────────────────────────────── */

#reportViewerModal {
    position: fixed; inset: 0; z-index: 9999;
}
#reportViewerModal .rv-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 18, 22, 0.6);
    backdrop-filter: blur(2px);
    animation: rvFade 0.15s ease-out;
}
#reportViewerModal .rv-shell {
    position: absolute; inset: 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: rvPop 0.18s ease-out;
}
@keyframes rvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rvPop  { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#reportViewerModal .rv-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7ea;
    background: #fafbfc;
    flex-shrink: 0;
}
#reportViewerModal .rv-title {
    font-size: 1.05rem; font-weight: 600; color: #212529;
}
#reportViewerModal .rv-title .rv-sub {
    font-size: .82rem; font-weight: 400; color: #6c757d; margin-left: .5rem;
}
#reportViewerModal .rv-actions { display: flex; gap: .5rem; align-items: center; }

#reportViewerModal .rv-btn {
    padding: 7px 14px;
    border: 1px solid #d6d9dd;
    background: #fff;
    color: #333;
    border-radius: 6px;
    font-size: .85rem; font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
    transition: background .12s, border-color .12s;
}
#reportViewerModal .rv-btn:hover { background: #f3f4f6; border-color: #c4c8cd; }
#reportViewerModal .rv-btn-pdf {
    background: #2A6EE5; color: #fff; border-color: #2A6EE5; font-weight: 600;
}
#reportViewerModal .rv-btn-pdf:hover { background: #1d5ed4; border-color: #1d5ed4; }
#reportViewerModal .rv-btn-close {
    width: 36px; height: 36px;
    font-size: 1.4rem; line-height: 1;
    padding: 0;
    color: #6c757d;
}

#reportViewerModal .rv-body {
    flex: 1;
    position: relative;
    background: #eef0f3;
    overflow: hidden;
}
#reportViewerModal .rv-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    background: #eef0f3;
}
#reportViewerModal .rv-loader {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: #eef0f3;
    z-index: 1;
}
#reportViewerModal .rv-spinner {
    width: 44px; height: 44px;
    border: 3px solid #d8dde2;
    border-top-color: #2A6EE5;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: rvSpin 1s linear infinite;
}
@keyframes rvSpin { to { transform: rotate(360deg); } }
#reportViewerModal .rv-loader-msg { font-size: .9rem; color: #5a6570; text-align: center; }

@media (max-width: 768px) {
    #reportViewerModal .rv-shell { inset: 0; border-radius: 0; }
    #reportViewerModal .rv-header { padding: 10px 14px; }
    #reportViewerModal .rv-title { font-size: .95rem; }
    #reportViewerModal .rv-title .rv-sub { display: none; }
    #reportViewerModal .rv-btn { padding: 6px 10px; font-size: .78rem; }
    #reportViewerModal .rv-btn-close { width: 32px; height: 32px; }
}


/* ─── Print: keep desktop layout for PDF reports ─────────────────────── */
@media print {
    /* Reports are generated as PDFs from the desktop layout — don't let
        any of the mobile rules above leak into print output. */
    .topbar, .pebble-tabbar, .pebble-subband, .scope-bar { display: none !important; }
    .dash-section-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   Wave 1 responsive fixes (June 2026 audit punch list).
   Five quick wins, ranked from the audit: layout collapses, modal
   overflow guards, touch-target sizing.
   ═════════════════════════════════════════════════════════════════════ */

/* #2  Interventions sidebar — collapse earlier so tablets in landscape
   (1024px) don't get squeezed by the 380px sidebar. Original rule fires
   at 1100px which catches 1024 but only just; tighten the threshold
   AND give the sidebar a max so 1100-1280 doesn't feel cramped either. */
@media (max-width: 1100px) {
  .ivx-split { grid-template-columns: 1fr !important; }
}

/* #6  Modal max-width safety net on phone — every dialog with an inline
   "max-width:500px;width:90%" style ends up at ~432px on a 480px viewport
   which is fine, but on a 390px iPhone screen the margins get eaten.
   Force a tighter ceiling on every common modal wrapper at ≤ 480px. */
@media (max-width: 480px) {
  .snv-modal,
  .snv-modal-backdrop > div,
  [id$="DialogBg"] > div,
  [id$="ModalBg"] > div {
    max-width: 95vw !important;
    width: 95vw !important;
    padding: 1.25rem !important;
    border-radius: 1rem !important;
  }
  /* Dialog body that uses .stp-grid (split list/detail) — go to one
     column so the inner panel doesn't overflow horizontally. */
  .stp-grid { grid-template-columns: 1fr !important; }
}

/* #7  Strategy-tips grid — at 1024px the minmax(260px, 1fr) keeps fighting
   to fit 3 cards which overflow. Drop to 200px minimum so they wrap
   sensibly. */
@media (max-width: 1024px) {
  .snv-exp-strat-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
}
@media (max-width: 640px) {
  .snv-exp-strat-list { grid-template-columns: 1fr !important; }
}

/* #8  Metric cards on tablet portrait — flex: 0 0 80% means each card
   takes 80% of the viewport width, so only one shows at a time. Drop
   to ~65% so two peek into view (signalling there's more to scroll). */
@media (max-width: 768px) {
  .metric-card { flex: 0 0 65% !important; }
}
@media (max-width: 480px) {
  .metric-card { flex: 0 0 80% !important; }   /* one-at-a-time on phone */
}

/* #9  Pebble tab touch targets on phone — original was 28px tall, below
   Apple HIG / Material's 44px / 48px minimums. Bump to 44px so users
   stop mis-tapping adjacent tabs. */
@media (max-width: 480px) {
  .pebble-tab {
    min-height: 44px !important;
    padding: .6rem .9rem !important;
    font-size: .82rem !important;
  }
}

/* ─── CSS Grid 1fr fix for dashboard section grids ─────────────────
   Symptom: after a browser resize down-then-up, left widget grows to
   ~60% width and right widget shrinks. Cause: `1fr` is shorthand for
   `minmax(auto, 1fr)`, so a wide content child (Chart.js canvas that
   redrew at a large size) can push the column past its 50% share.
   minmax(0, 1fr) enforces equal sharing regardless of content. */
.dash-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ═════════════════════════════════════════════════════════════════════
   Wave 2 responsive fixes — targeted gaps remaining after the audit
   showed most issues were already handled by existing media queries.
   ═════════════════════════════════════════════════════════════════════ */

/* Intervention pupil-card 3-score strip — at phone widths the three
   .ivx-card-score cells become so narrow that "Cognitive 62%" wraps
   onto two lines and looks broken. Drop to a tidier 1-row scroll at
   ≤480px (Cognitive | Wellbeing | Attendance still all visible, just
   not forced to share equal width). */
@media (max-width: 480px) {
  .ivx-card-scores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
  }
  .ivx-card-score { padding: .3rem .35rem; }
  .ivx-card-score-l { font-size: .55rem; }
}

/* Cohort heatmap — at iPad portrait the year columns (68px each) +
   210px label column adds up to ~700px for 7 years. Comfortable on
   landscape, tight on portrait. Wrap the heatmap in horizontal scroll
   so labels stay readable instead of word-breaking. */
@media (max-width: 768px) {
  #domainHeatmapContainer { overflow-x: auto; }
  #domainHeatmapContainer > table { min-width: 720px; }
}

/* Expanded student row's assessment-history table — same horizontal
   overflow concern at narrow widths. */
@media (max-width: 768px) {
  .snv-hist-scroll, .snv-hist { overflow-x: auto; }
  .snv-hist-table { min-width: 540px; }
}

/* Interventions "Progress since baseline" table — let it scroll on
   narrow screens rather than stacking columns vertically. */
@media (max-width: 768px) {
  .ivx-pc-tablewrap { overflow-x: auto; }
  .ivx-pc-table { min-width: 520px; }
}

/* Modals: when the inline JS sets a fixed max-width: 500px / max-width: 560px
   the outer dialog can extend slightly past a phone viewport with the
   .85rem padding the dialog itself uses. Belt-and-braces guard so
   nothing in a modal ever overflows the visible viewport horizontally. */
@media (max-width: 480px) {
  body > [id$="DialogBg"],
  body > [id$="ModalBg"],
  body > .snv-modal-backdrop {
    padding: .5rem !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   Wave 3: hamburger nav for small tablets and phones
   The tabbar has 4 tabs + logo + school chip + avatar + role + sign-out
   crammed into one horizontal strip. Below ~900px the inline overflow-x
   scroll is technically usable but non-discoverable. Hide the tabs
   behind a hamburger button that opens a vertical drawer panel.
   ═════════════════════════════════════════════════════════════════════ */

/* Default desktop state — hamburger button is invisible, tabs are
   inline. Style the hamburger itself so it's ready when shown. */
.pebble-hamburger {
  display: none;             /* hidden until the breakpoint below kicks in */
  background: transparent;
  border: 1px solid var(--mist, #E1E6EE);
  border-radius: .4rem;
  padding: .5rem .65rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
}
.pebble-hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--deep, #004272);
  border-radius: 1px;
  transition: transform .15s ease, opacity .15s ease;
}
/* Animate to an X when the drawer is open */
body[data-mobile-nav="open"] .pebble-hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body[data-mobile-nav="open"] .pebble-hamburger-bar:nth-child(2) {
  opacity: 0;
}
body[data-mobile-nav="open"] .pebble-hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ─── Breakpoint: tablet portrait + phones ───────────────────────── */
@media (max-width: 900px) {
  /* Show the hamburger */
  .pebble-hamburger { display: inline-flex !important; }

  /* Hide the inline tab strip by default — drawer-only navigation */
  .pebble-tabbar-inner {
    display: none !important;
  }
  /* When the drawer is open, reveal the tab strip as a vertical
     overlay panel positioned just below the tab bar header. */
  body[data-mobile-nav="open"] .pebble-tabbar-inner {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-bottom: 1px solid var(--mist, #E1E6EE);
    padding: .5rem .75rem;
    gap: .25rem;
    z-index: 1500;
    max-height: 70vh;
    overflow-y: auto;
  }
  body[data-mobile-nav="open"] .pebble-tabbar-inner .pebble-tab {
    width: 100%;
    text-align: left;
    padding: .85rem 1rem;
    border-radius: .4rem;
    font-size: 1rem;
    min-height: 44px;
  }
  body[data-mobile-nav="open"] .pebble-tabbar-inner .pebble-tab.active {
    background: var(--pale, #F4F1EA);
    color: var(--deep, #004272);
    font-weight: 700;
  }
  /* Make the tabbar position relative so the absolute-positioned
     drawer anchors to it correctly. */
  .pebble-tabbar { position: relative; }
}

/* ─── Phone-specific tweaks for the right-side header items ──────── */
@media (max-width: 600px) {
  /* The school chip eats too much horizontal space on phones.
     Hide it; the school name is still in the report subtitle. */
  .pebble-tabbar-right .school-chip { display: none !important; }
}
@media (max-width: 480px) {
  /* On very narrow phones, also drop the sign-out button label.
     Keep avatar + role badge as the minimum identifying chrome. */
  .pebble-tabbar-right .pebble-signout {
    font-size: 0 !important;
    padding: .45rem .6rem !important;
  }
  .pebble-tabbar-right .pebble-signout::before {
    content: "↪";
    font-size: 1rem;
    color: var(--mid, #4b5a66);
  }
}