/* ═══════════════════════════════════════════════════════════════
   OPTIMA · LAYOUT & RESPONSIVE — Standalone file

   Controls: sidebar visibility, hamburger toggle, mobile nav,
   page content overflow, breakpoint behavior.

   DO NOT EDIT unless fixing a layout bug. All layout logic lives here
   so other feature work cannot accidentally break responsiveness.

   Breakpoints:
   - Desktop:   >= 1025px  — sidebar docked, collapsible, full width content
   - Tablet:    768–1024px — thinner docked sidebar, collapsible, 2-column
   - Phone:     <= 767px   — sidebar is a FULL-SCREEN PANEL, hamburger only
   - Tiny:      <= 380px   — single column everything

   The phone boundary is 767px. It was once 580 here and 767 in style.css,
   which left 581-767 docking the sidebar AND giving .main full width -
   they overlapped. One number, one owner.

   There is now exactly ONE navigation surface at every size: the side
   panel. The bottom tab bar, the world chips and #mobile-nav are all
   removed - three competing systems meant every destination had to be
   reasoned about three times, and they disagreed about what was
   reachable.

   TWO MODES, ONE BUTTON (#sidebar-toggle):
   - docked (>=768px)  toggling sets body.sb-collapsed, and that PERSISTS.
                       It is a preference about how you like to work.
   - drawer (<=767px)  toggling sets .sidebar.open, and that does NOT
                       persist. A drawer left open is a covered screen.
   Nothing here may use `transform: ... !important` on .sidebar: the
   collapsed and open states are expressed as transforms, and !important
   would freeze the sidebar in place and make the button do nothing.
═══════════════════════════════════════════════════════════════ */

/* ── Collapsed (docked mode only) ── */
body.sb-collapsed .sidebar { transform: translateX(-100%); }
body.sb-collapsed .main    { margin-left: 0; }

/* ── Collapsed: the CONTENT takes the space, not the gutters ──────────
   .page is capped at 960px, so hiding the rail used to just widen the
   empty margins - but the reason anyone collapses it is to SEE MORE.
   These are the dashboard / table / grid surfaces, which genuinely use
   the width.
   Deliberately NOT widened: .exp-page, .aud-page and the other prose
   surfaces. Their narrow measure is a reading decision, not a layout
   accident - long lines of body text are harder to read, not easier. */
body.sb-collapsed :is(.page, .ti-page, .tch-page, .src-page) {
  max-width: min(100%, 1320px);
}
body.sb-collapsed .page { padding: 28px 44px; }


/* ── Hamburger button (lives in topbar, hidden on desktop) ── */

#sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#sidebar-toggle:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── Sidebar overlay (dark backdrop on mobile when sidebar is open) ── */

#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}
#sidebar-overlay.visible {
  display: block;
}


/* ══════════════════════════════════════════════════════
   DESKTOP (>= 1025px)
   Sidebar always visible, no hamburger, no bottom nav
══════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  #mobile-nav { display: none !important; }
  /* The scrim belongs to the drawer. Docked, there is nothing to dim. */
  #sidebar-overlay { display: none !important; }

  .sidebar {
    /* no `transform: !important` - see the header note */
    width: var(--sidebar-w);
  }
  .main {
    margin-left: var(--sidebar-w);
  }
}


/* ══════════════════════════════════════════════════════
   TABLET (581px – 1024px)
   Thinner sidebar, 2-column, no bottom nav
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) and (min-width: 768px) {
  :root { --sidebar-w: 220px; }

  #mobile-nav { display: none !important; }
  #sidebar-overlay { display: none !important; }

  .main { margin-left: var(--sidebar-w); }

  /* Schedule: stack calendar + upcoming vertically on narrow tablets */
  .page .grid-2 {
    gap: 16px;
  }
}

/* Narrow tablet (581–820px) */
@media (max-width: 820px) and (min-width: 768px) {
  :root { --sidebar-w: 200px; }

  .nav-item { padding: 9px 16px; font-size: 13px; }
  .nav-label { padding: 14px 16px 5px; font-size: 9px; }
  .logo-school { display: none; }
}


/* ══════════════════════════════════════════════════════
   PHONE (<= 767px)
   Sidebar is a full-screen panel behind the hamburger.
   No bottom nav of any kind; content full-width.
══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  :root { --sidebar-w: 0px; --topbar-h: 52px; }

  /* ── Hamburger: visible ── */
  #sidebar-toggle { display: flex !important; }

  /* ── Sidebar: a FULL-SCREEN PANEL, not a slide-in drawer ──
     A docked panel is impossible here: 260px of rail on a 375px screen
     leaves ~115px of content. An 84vw drawer was the compromise, and it
     was the worst of both - too narrow to show the whole map, wide enough
     to feel cramped, and it left a strip of dimmed app on the right that
     invited a mis-tap.
     Full width instead: the panel IS the screen while it is open. Every
     destination is legible, nothing is half-shown, and dismissing it is
     one deliberate action (the X, or Escape) rather than a guess at where
     the app ends and the scrim begins.
     z-index clears the tab bar (900), so the panel covers it - otherwise
     the bar floats over the panel's own footer, where Sign Out lives. */
  .sidebar {
    transform: translateX(-100%);
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-right: none;
    background: var(--bg2);
    z-index: 1000;
  }
  .sidebar.open { transform: translateX(0); }
  /* The panel wins over a remembered desktop collapse: the two modes share
     one element, and only the panel state is meaningful here. */
  body.sb-collapsed .sidebar.open { transform: translateX(0); }

  /* No scrim: at full width there is nothing behind it left to dim, and a
     backdrop you cannot see is just another way to close by accident. */
  #sidebar-overlay { display: none !important; }

  /* The close button only exists at this size, because only here does the
     panel cover the app. */
  #sb-close { display: flex !important; }

  /* Room to breathe now that the panel owns the screen. */
  .sidebar .nav-item { padding: 14px 22px; font-size: 16px; }
  .sidebar .nav-label { padding: 20px 22px 8px; font-size: 12px; }
  .sidebar .nav-icon { font-size: 19px; }
  .sidebar-nav { padding-bottom: 8px; }

  /* ── Main area: full width, room for bottom nav ── */
  .main {
    margin-left: 0 !important;
    padding-bottom: 16px;   /* was 74px for the removed tab bar */
  }

  /* ── Topbar: tighter padding ── */
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-title { font-size: 14px; }

  /* ── Page content ── */
  .page {
    padding: 14px 12px;
    overflow-x: hidden;
  }

  /* ── Bottom nav: REMOVED along with the tab bar and world chips.
     The side panel is the only navigation. ── */
  #mobile-nav { display: none !important; }

  /* ── Grids: collapse to fewer columns ── */
  .grid-2 { grid-template-columns: 1fr !important; gap: 12px; }
  .grid-3 { grid-template-columns: 1fr !important; gap: 12px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Schedule week view: allow horizontal scroll if needed ── */
  .page [style*="grid-template-columns:repeat(7"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Cards: tighter padding ── */
  .card { padding: 14px 16px; }
  .stat-card { padding: 12px 14px; }

  /* ── Section headers: wrap buttons ── */
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Buttons: ensure minimum tap target ── */
  .btn-sm {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* ── Prevent horizontal overflow on any element ── */
  .src-page,
  .fc-page,
  .rc-page,
  [class*="page-"] {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── Source form: stack everything ── */
  .src-form-grid,
  .src-form-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .src-form-card {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }

  .src-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .src-header-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* File input: wrap so it doesn't overflow */
  .src-form-card input[type="file"] {
    max-width: 100%;
    font-size: 11px !important;
  }

  /* Source cards grid */
  .src-grid {
    grid-template-columns: 1fr !important;
  }

  /* Source card badge row: wrap if too many */
  .src-card-meta {
    flex-wrap: wrap;
    gap: 4px;
  }

  .src-card-top {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Textarea: shorter on phones */
  .src-textarea {
    min-height: 140px !important;
  }

  /* Subject filter bar */
  .subj-bar { padding: 8px 12px; }
  .subj-bar-inner { gap: 6px; }

  /* ── Chat: sidebar hidden by default ── */
  .chat-layout { flex:1; min-height:0; }
  .chat-sidebar { display: none; }
  #page-chat { padding: 0; display:flex; flex-direction:column; overflow:hidden; }
  .cw-grid { grid-template-columns: 1fr; max-width: 220px; }
  .chat-bubble { max-width: 88%; }
  .chat-notice { max-width: 88%; }
  .cw-title { font-size: 20px; }
  .cw-star-wrap { width: 56px; height: 56px; margin-bottom: 16px; }
  .cw-star-img { width: 28px; height: 28px; }
}


/* ══════════════════════════════════════════════════════
   EXTRA SMALL (< 380px — iPhone SE, etc.)
══════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .grid-4 { grid-template-columns: 1fr !important; gap: 8px; }
  .page { padding: 10px 8px; }
  .topbar { padding: 0 8px; }

  .streak-card { flex-direction: column; align-items: flex-start; gap: 8px; }

  .sidebar {
    width: 260px !important;
    min-width: 260px !important;
  }

  /* Source form: even tighter */
  .src-form-card {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  .src-textarea {
    min-height: 120px !important;
  }

  .src-form-actions {
    flex-direction: column;
  }
  .src-form-actions .btn-sm {
    width: 100%;
    justify-content: center;
  }

  /* Source cards: tighter */
  .src-card {
    padding: 14px !important;
  }
}


/* ══════════════════════════════════════════════════════
   GLOBAL OVERFLOW PROTECTION
   Prevents any page content from causing horizontal scroll
══════════════════════════════════════════════════════ */

.main {
  overflow-x: hidden;
}

.page {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tables, pre-formatted text: scroll within container */
.page table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.page pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Long URLs / strings don't break layout */
.page a,
.page code {
  word-break: break-all;
}