/* ============================================================================
   css/breakpoints.css — Responsive Breakpoint Architecture (v1)
   ----------------------------------------------------------------------------
   Mobile-first scale layered ON TOP of the existing desktop-first base styles
   in app.css/login.css/forms.css. Nothing here removes or restructures
   existing rules — it only refines spacing, density, and content width at
   each tier so tablet and desktop stop looking like a stretched phone view.

   THE SCALE (and what each tier is for):

     320px  → smallest supported phone (iPhone SE / older Android). Safety
              floor: tightest spacing, guarantees no horizontal overflow.
     390px  → standard modern phone (iPhone 12-15, most Android). This is
              effectively today's "default" mobile size already tuned in
              app.css — treated as the mobile baseline.
     480px  → large phone / phablet, mobile browser zoomed out. A little
              more breathing room before the tablet jump.
     640px  → EXISTING threshold already in app.css: sidebar collapses to
              an overlay below this width, persistent sidebar above it.
              Left untouched — this file does not change that boundary,
              only documents it so the scale reads as one system.
     768px  → tablet portrait (iPad portrait, small Android tablets).
              Sidebar is already persistent (>640px); from here on we start
              using the freed-up width: wider gutters, content stops
              spanning edge-to-edge, dashboard grid gains a column.
     834px  → tablet portrait, larger (iPad Air/Pro portrait). Incremental
              refinement of the 768 tier — slightly more gutter and a wider
              reading column for forms/detail pages.
     1024px → tablet landscape / small laptop. Enough width for list pages
              (Student/Category) to reflow into a 2-column grid instead of
              one long centered column, without changing card appearance.
     1280px+→ desktop. Content is capped to a max readable width and
              centered inside the main pane (prevents cards/forms from
              stretching uncomfortably wide on large monitors); list pages
              move to a 3-column grid.

   Each tier is strictly additive over the one below it (min-width, mobile
   first) for ≥641px. The <640px range keeps the existing max-width-based
   mobile rules in app.css/login.css and only adds fine-grained spacing at
   320/390/480 so very small phones don't feel cramped relative to the
   390px baseline those files were tuned for.

   Load order: this file loads LAST (after forms.css, app.css, login.css)
   on every page, so it only ever refines spacing/layout — it never
   fights a more specific component rule for color, radius, etc.
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   TIER 0 — Safety floor (320px+, applies to everything)
   Prevents accidental horizontal scroll on the smallest supported devices.
   ────────────────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 — 320–389px: smallest phones (iPhone SE, compact Android)
   Slightly tighter gutters than the 390px baseline so content doesn't feel
   crowded on the narrowest screens. No column/structure changes.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 389px) {
  .dashboard-cards { padding: 10px 12px; gap: 10px; }
  .list-container   { padding-left: 12px; padding-right: 12px; }
  #search_bar       { padding-left: 12px; padding-right: 12px; }
  .home-card        { padding: 26px 20px 22px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 — 390–479px: standard modern phone (existing baseline)
   This matches the spacing app.css/login.css were already designed around —
   intentionally no overrides here, it's the reference point the rest of the
   scale is built from.
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   TIER 3 — 480–639px: large phones / phablets
   A little more room before the tablet/sidebar jump at 640px.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 480px) and (max-width: 639px) {
  .dashboard-cards { padding: 14px 18px; gap: 14px; }
  .list-container   { padding-left: 18px; padding-right: 18px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 4 — 640px boundary (documented, defined in app.css)
   @media (max-width: 640px) in app.css: sidebar overlay, FAB visible,
   topbar hamburger shown. Everything ≥641px keeps the persistent sidebar.
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   TIER 5 — 641–767px: small tablet / large phablet landscape
   Sidebar is persistent here already (app.css default). Start widening
   gutters now that the overlay/hamburger pattern is gone.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
  .list-container { padding-left: 22px; padding-right: 22px; }
  #search_bar      { padding-left: 22px; padding-right: 22px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 6 — 768px: tablet portrait (iPad and similar)
   Freed-up width starts being used: dashboard grid gains a column, list
   pages get a centered max-width instead of spanning edge-to-edge, and the
   Settings column gets centered rather than left-stuck.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .dashboard-cards,
  .stat-grid,
  .summary-grid,
  .quick-actions-grid {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
  }
  :root { --stat-card-min: 150px; }
  .list-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  #search_bar > .row,
  #search_bar > div {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .settings-body { margin: 0 auto; }
  .home-card      { max-width: 400px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 7 — 834px: larger tablet portrait (iPad Air/Pro)
   Incremental refinement of the 768 tier — a touch more room, same
   structure, so the jump to 1024 isn't abrupt.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 834px) {
  .dashboard-cards,
  .stat-grid,
  .summary-grid,
  .quick-actions-grid,
  .list-container,
  #search_bar > .row,
  #search_bar > div {
    max-width: 780px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 8 — 1024px: tablet landscape / small laptop
   Enough width for list pages (Student/Category) to reflow into a
   2-column grid. Card appearance, spacing, and click/long-press behavior
   are unchanged — only their position in the flow changes.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .dashboard-cards,
  .stat-grid,
  .summary-grid,
  .quick-actions-grid {
    max-width: 920px;
  }
  :root { --stat-card-min: 170px; }
  .list-container {
    max-width: 920px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    align-content: start;
  }
  /* Grid already applies the row gap each card needs via its own
     margin-bottom (set in app.css), so no extra row-gap declared here —
     avoids doubling the vertical spacing between cards. */
  #search_bar > .row,
  #search_bar > div {
    max-width: 920px;
  }
  :root { --sidebar-w: 232px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 9 — 1280px+: desktop
   Content is capped to a comfortable reading/working width and centered
   in the main pane rather than stretching edge-to-edge on wide monitors.
   List pages move to 3 columns.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .dashboard-cards,
  .stat-grid,
  .summary-grid,
  .quick-actions-grid {
    max-width: 1100px;
  }
  :root { --stat-card-min: 190px; }
  .list-container {
    max-width: 1100px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #search_bar > .row,
  #search_bar > div {
    max-width: 1100px;
  }
  .page-body { padding: 0 12px; }
  :root { --sidebar-w: 240px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Detail pages (student-view.html) — already self-contained with its own
   max-width:720px centered card, so it naturally behaves correctly from
   768px up. These rules only widen that cap slightly at the larger tiers
   so it doesn't look noticeably narrower than the list/dashboard pages
   sitting next to it in the nav.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #detail-card { max-width: 820px; }
}
@media (min-width: 1280px) {
  #detail-card { max-width: 900px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Login page — intentionally stays a single centered card at every size
   (a multi-column login form is not a usability improvement). Only the
   card's max-width grows slightly on larger screens for readability.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .wrapper { max-width: 420px; }
}
@media (min-width: 1024px) {
  .wrapper { max-width: 440px; }
}