/* ═══════════════════════════════════════════════════════════════
   responsive.css – Master responsive stylesheet for IBretake
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ═══════════════════════════════════════════════════════════════ */

/* ── Viewport meta helper ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Utility classes ── */
.desktop-only { display: initial; }
.mobile-only  { display: none !important; }

/* ── Touch-friendly minimum tap targets ── */
@media (pointer: coarse) {
  a, button, .btn, .nav-link, input[type="submit"], select {
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════
   LANDING PAGE – Hamburger & Mobile Nav
   ═══════════════════════════════════════════ */

/* Hamburger button (hidden on desktop) */
.hamburger-btn {
  display: none;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}
.hamburger-btn:focus:not(:focus-visible),
.hamburger-btn:active {
  outline: 0;
  box-shadow: none;
}
.hamburger-btn svg { display: block; }

/* Mobile nav overlay (landing) */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav-drawer {
  position: fixed;
  top: 0; right: -300px;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transition: right .3s ease;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
.mobile-nav-drawer.active {
  right: 0;
}
.mobile-nav-drawer .drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 8px;
  margin-bottom: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.mobile-nav-drawer .drawer-close:focus:not(:focus-visible),
.mobile-nav-drawer .drawer-close:active {
  outline: 0;
  box-shadow: none;
}
.mobile-nav-drawer a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mobile-nav-drawer > .drawer-nav-link {
  border-radius: 8px;
  margin: 0 -4px;
  padding: 14px 12px;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.mobile-nav-drawer > .drawer-nav-link:hover,
.mobile-nav-drawer > .drawer-nav-link.active {
  color: var(--primary, #2d5bda);
  background: rgba(45, 91, 218, .08);
  border-bottom-color: transparent;
}
.mobile-nav-drawer a:last-child { border-bottom: none; }
.mobile-nav-drawer .drawer-auth {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-nav-drawer .drawer-auth a {
  text-align: center;
  border-bottom: none;
  border-radius: 999px;
  padding: 14px;
  font-weight: 700;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mobile-nav-drawer .drawer-auth .btn-login {
  border: 1.5px solid var(--primary, #2d5bda);
  color: var(--primary, #2d5bda);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.mobile-nav-drawer .drawer-auth .btn-signup {
  border: 1.5px solid var(--primary, #2d5bda);
  background: var(--primary, #2d5bda);
  color: #fff;
  box-shadow: 0 6px 18px rgba(45, 91, 218, .16);
}
.mobile-nav-drawer .drawer-auth a:hover {
  transform: translateY(-1px);
  box-shadow: none;
}


/* ═══════════════════════════════════════════
   STUDENT BASE – Mobile Nav
   ═══════════════════════════════════════════ */

/* Student hamburger */
.student-hamburger {
  display: none;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text, #1a1a2e);
  -webkit-appearance: none;
  appearance: none;
}
.student-hamburger:focus:not(:focus-visible),
.student-hamburger:active {
  outline: 0;
  box-shadow: none;
}

/* Student mobile nav overlay */
.student-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 11000;
}
.student-mobile-nav .nav-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.student-mobile-nav .nav-drawer {
  position: absolute;
  top: 0; right: 0;
  width: min(320px, 88vw);
  max-width: 88vw;
  height: 100%;
  background: var(--panel, #fff);
  border-left: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: none;
}
.student-mobile-nav.active .nav-drawer {
  transform: translateX(0);
}
.student-mobile-nav .nav-drawer a,
.student-mobile-nav .nav-drawer button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text, #1a1a2e);
  text-decoration: none;
  border: none;
  border-radius: 8px;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.student-mobile-nav .nav-drawer a:hover,
.student-mobile-nav .nav-drawer button:hover {
  background: rgba(45,91,218,.08);
}
.student-mobile-nav .nav-drawer a svg,
.student-mobile-nav .nav-drawer button svg {
  flex: 0 0 auto;
}
.student-mobile-nav .nav-drawer a span {
  margin-left: auto !important;
}
.student-mobile-nav .nav-drawer a.active {
  color: var(--primary, #2d5bda);
  background: var(--primary-light, #ebf0fb);
  box-shadow: inset 3px 0 0 var(--primary, #2d5bda);
}
.student-mobile-nav .student-mobile-logout {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
}
.student-mobile-nav .student-mobile-logout button {
  color: var(--red, #ef4444);
  background: rgba(239,68,68,.08);
  font-weight: 700;
}
.student-mobile-nav .student-mobile-logout button:hover {
  background: rgba(239,68,68,.12);
}


/* ═══════════════════════════════════════════
   COORDINATOR BASE – Sidebar toggle
   ═══════════════════════════════════════════ */

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1001;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  color: var(--text, #1a1a2e);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 89;
}


/* ═══════════════════════════════════════════
   ADMIN DASHBOARD – Mobile
   ═══════════════════════════════════════════ */
/* Handled inline per admin/dashboard.html */


/* ═══════════════════════════════════════════
   TABLET – max-width: 1024px
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ─ Unlock viewport lock so content can scroll at reduced widths ─ */
  body:not(.coordinator-shell) {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }
  .main-wrap {
    overflow: visible !important;
    min-height: auto !important;
    flex: none !important;
  }
  .page-frame {
    overflow: visible !important;
    min-height: auto !important;
    flex: none !important;
  }

  /* ─ Landing page ─ */
  .landing-nav .nav-links { display: none !important; }
  .landing-nav .hamburger-btn { display: flex !important; }
  .mobile-nav-overlay { display: block; }

  /* ─ Student tables → horizontal scroll ─ */
  .table-wrap, .card:has(>.table), .card:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Fallback for browsers without :has() */
  .card { overflow-x: auto; }

  /* ─ Dashboard requests card → stop viewport fill, natural flow ─ */
  .dash-requests-card {
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .dash-table-scroll {
    overflow: auto !important;
    min-height: auto !important;
    flex: none !important;
  }
  .dash-empty-card {
    flex: none !important;
    min-height: 200px !important;
  }

  /* ─ Student nav → smaller text on tablets ─ */
  .topbar .nav-link { padding: 6px 10px; font-size: 13px; }

  /* ─ Student search map → stack on tablet ─ */
  .map-app { grid-template-columns: 1fr !important; grid-template-rows: 55vh auto !important; }
  .side-panel { max-height: 45vh; overflow-y: auto; border-left: none !important; border-top: 1px solid var(--border, #e5e5e5); }

  /* ─ Contact coordinator → stack on tablet ─ */
  .request-layout { grid-template-columns: 1fr !important; }

  /* ─ Request detail → stack on tablet + unlock viewport ─ */
  .detail-grid { grid-template-columns: 1fr !important; overflow: visible !important; }
  .left-col { overflow: visible !important; }
  .right-col { overflow: visible !important; }
  .chat-panel { flex: none !important; max-height: 60vh; }
  .chat-thread { max-height: 40vh; }

  /* ─ Search results → unlock viewport fill container ─ */
  .search-flow-container {
    overflow: visible !important;
    flex: none !important;
    min-height: auto !important;
  }
  .results-scroll {
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* ─ School-grid → fluid columns on narrow ─ */
  .school-grid { grid-template-columns: 1fr !important; }

  /* ─ Confirmed banner → stack cards on tablet ─ */
  .cb-cards { grid-template-columns: 1fr !important; }

  /* ─ Messages → fluid preview ─ */
  .convo-preview { max-width: 100% !important; }

  /* ─ Offering grid → fluid columns on tablet ─ */
  .offering-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }

  /* ─ School detail → stack on tablet ─ */
  .detail-layout { grid-template-columns: 1fr !important; }
  .detail-layout .sticky-side { position: static !important; }

  /* ─ Coordinator layout → unlock viewport on tablet ─ */
  body:not(.coordinator-shell) .layout { height: auto !important; overflow: visible !important; }
  body:not(.coordinator-shell) .layout .main {
    height: auto !important;
    overflow: visible !important;
    min-height: auto !important;
    flex: none !important;
  }
  body:not(.coordinator-shell) .layout .sidebar { height: auto !important; position: static !important; }
  .coordinator-shell .layout {
    height: 100vh !important;
    overflow: hidden !important;
    grid-template-columns: var(--sidebar, 250px) minmax(0, 1fr) !important;
  }
  .coordinator-shell .layout .sidebar {
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
  }
  .coordinator-shell .layout .main {
    height: 100vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 20px 22px 96px !important;
  }

  /* ─ Coordinator settings → unlock form scroll ─ */
  .form-scroll {
    flex: none !important;
    overflow: visible !important;
    min-height: auto !important;
  }
}

@media (max-width: 900px) {
  .layout > .sidebar ~ .main,
  .layout .main {
    padding-top: 72px !important;
  }
  .layout > .sidebar ~ .sidebar-toggle,
  .sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 12px !important;
    z-index: 10001 !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #b0bdd4 !important;
    box-shadow: none !important;
  }
  .sidebar-toggle:hover {
    background: rgba(255,255,255,.08) !important;
    color: #e8edf8 !important;
  }
  body.coordinator-shell {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }
  .coordinator-shell .layout {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }
  .coordinator-shell .layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    width: var(--sidebar, 250px) !important;
    height: 100vh !important;
    transition: transform .3s !important;
    z-index: 999 !important;
  }
  .coordinator-shell .layout .sidebar.open {
    left: 0 !important;
    transform: translateX(0) !important;
  }
  .coordinator-shell .layout .sidebar.open,
  .layout .sidebar.open {
    left: 0 !important;
    transform: translateX(0) !important;
  }
  body.coordinator-shell.sidebar-is-open .sidebar-toggle {
    display: none !important;
  }
  .coordinator-shell .sidebar-toggle {
    display: flex !important;
    top: 0 !important;
  }
  .coordinator-shell .sidebar-overlay.active {
    display: block !important;
    z-index: 998 !important;
  }
  .coordinator-shell .layout .main {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding: 72px 16px 88px !important;
  }
  .coordinator-shell #ib-switcher-bar {
    justify-content: center !important;
    padding-left: 56px !important;
    padding-right: 12px !important;
  }
  .coordinator-shell #ib-switcher-bar > a:first-child,
  .coordinator-shell #ib-switcher-bar > div:last-child:not(.ib-sw-center-group) {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE – max-width: 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─ Utility ─ */
  .desktop-only { display: none !important; }
  .mobile-only  { display: initial !important; }

  /* ─ Landing page ─ */
  .landing-nav .nav-links { display: none !important; }
  .landing-nav .hamburger-btn { display: flex !important; }
  .mobile-nav-overlay { display: block; }

  /* ─ Student base ─ */
  .student-hamburger { display: flex !important; }
  .topbar .nav-links { display: none !important; }
  .topbar { position: sticky !important; top: 38px; z-index: 98; }
  .topbar-inner { padding: 10px 16px !important; }
  .main-wrap { padding: 16px 16px 0 !important; }

  /* ─ Coordinator base ─ */
  .sidebar-toggle { display: flex !important; }
  .sidebar-overlay.active { display: block !important; }
  .layout .main { padding: 16px !important; padding-top: 60px !important; }

  /* ─ Auth base ─ */
  .auth-wrapper { padding: 24px 12px !important; }
  .auth-card { padding: 24px 18px !important; }

  /* ─ Articles base ─ */
  .article-container { padding: 20px 16px !important; margin: -20px 12px 0 !important; }

  /* ─ Student dashboard ─ */
  .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .stat-card { padding: 14px !important; }
  .stat-card .value { font-size: 22px !important; }
  .stat-card .label { font-size: 11px !important; }

  /* Dashboard table → card view */
  .table thead { display: none; }
  .table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    border-bottom: 1px solid var(--border, #e5e5e5);
    gap: 6px;
  }
  .table tbody td {
    padding: 2px 0 !important;
    border: none !important;
    font-size: 13px;
  }
  .table tbody td:first-child { font-size: 15px; font-weight: 700; }

  /* ─ Student search ─ */
  .map-app { grid-template-columns: 1fr !important; grid-template-rows: 45vh auto !important; }
  .side-panel { max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-left: none !important; border-top: 1px solid var(--border, #e5e5e5); }
  svg.map-svg { min-height: 280px !important; }

  /* ─ Student results ─ */
  .school-grid { grid-template-columns: 1fr !important; }
  .results-header { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .sort-bar { width: 100%; }
  .loc-bar { flex-direction: column; gap: 10px !important; padding: 14px 16px !important; }
  .loc-bar input { min-width: 100% !important; }

  /* ─ Student select subjects ─ */
  .offering-grid { grid-template-columns: 1fr !important; }
  .filter-row { flex-direction: column; align-items: stretch !important; }
  .selected-grid .offering-card { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .offering-ia { flex-direction: row; flex-wrap: wrap; gap: 4px; }

  /* ─ Student school detail ─ */
  .detail-layout { grid-template-columns: 1fr !important; }
  .detail-layout .sticky-side { position: static !important; }

  /* ─ Student listing detail ─ */
  .detail-grid { grid-template-columns: 1fr !important; }

  /* ─ Student profile ─ */
  .profile-name-row {
    grid-template-columns: 1fr !important;
  }
  .profile-form .name-row,
  .profile-form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .phone-row, [style*="grid-template-columns:180px"] {
    grid-template-columns: 1fr !important;
  }
  .phone-row > *:first-child {
    width: 100% !important;
  }

  /* ─ Student & coordinator request detail ─ */
  .detail-grid {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  /* Override viewport lock on detail pages for mobile scrolling */
  body {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }
  .main-wrap {
    overflow: visible !important;
    min-height: auto !important;
    flex: none !important;
  }
  .page-frame {
    overflow: visible !important;
  }
  .left-col {
    overflow: visible !important;
  }
  .right-col {
    overflow: visible !important;
  }

  /* ─ Chat panel on mobile: don't lock height ─ */
  .chat-panel {
    max-height: 60vh;
    flex: none !important;
  }
  .chat-thread {
    max-height: 40vh;
  }
  .chat-input {
    flex-wrap: wrap;
  }
  .chat-input textarea {
    min-height: 44px !important;
  }

  /* ─ Status bar responsive ─ */
  .status-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  .status-bar .sb-text { min-width: 0 !important; width: 100%; }
  .status-bar .sb-actions { width: 100%; }
  .status-bar .sb-actions .btn { flex: 1; text-align: center; }

  /* ─ Student messages ─ */
  .convo-preview { max-width: 100% !important; }
  .convo-card { padding: 12px 14px !important; gap: 10px !important; flex-wrap: wrap; }
  .convo-avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; }
  .convo-school { font-size: 14px !important; }
  .convo-item { padding: 12px 16px !important; }
  .convo-body { min-width: 0; flex: 1; }
  .convo-right { flex-direction: row; gap: 8px; align-items: center; }
  .inbox-header { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .inbox-header h1 { font-size: 22px !important; }

  /* ─ Student notifications ─ */
  .notif-item { padding: 12px 16px !important; }

  /* ─ Contact coordinator ─ */
  .request-layout { grid-template-columns: 1fr !important; }

  /* ─ Flow stepper – smaller on mobile ─ */
  .flow-stepper {
    padding: 6px 12px !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .flow-step { gap: 6px !important; }
  .step-num { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  .step-label { font-size: 11px !important; }
  .step-arrow { margin: 0 4px !important; font-size: 12px !important; }

  /* ─ Flow bottom bar ─ */
  .flow-bottom-bar {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .flow-bottom-bar .btn { font-size: 13px !important; padding: 10px 16px !important; }
  .flow-bottom-bar .btn-primary { flex: 1; text-align: center; }

  /* ─ Coordinator dashboard ─ */
  .coord-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─ Coordinator offerings ─ */
  .top-layout { grid-template-columns: 1fr !important; }
  .off-grid { grid-template-columns: 1fr !important; }
  .create-card { position: static !important; min-height: auto !important; max-height: none !important; }

  /* ─ Coordinator settings ─ */
  .settings-grid { grid-template-columns: 1fr !important; }
  .bank-grid { grid-template-columns: 1fr !important; }

  /* ─ Form row – stack on mobile ─ */
  .form-row { grid-template-columns: 1fr !important; }

  /* ─ Coordinator requests ─ */
  .req-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .req-filt { white-space: nowrap; flex-shrink: 0; }
  .req-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .req-right {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .filter-tabs .tab { white-space: nowrap; flex-shrink: 0; }

  /* ─ Confirmed banner cards ─ */
  .cb-cards { grid-template-columns: 1fr !important; }
  .cb-card { flex-direction: column !important; }
  .cb-actions { flex-wrap: wrap; gap: 8px; }
  .cb-btn { flex: 1; text-align: center; min-width: 0; }

  /* ─ Reserved banner ─ */
  .reserved-banner { flex-direction: column; text-align: center; gap: 12px; padding: 16px !important; }
  .reserved-timer { text-align: center; }

  /* ─ Compose email area ─ */
  .compose-body textarea { min-height: 200px !important; }
  .email-field { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* ─ Subject table horizontal scroll indicator ─ */
  .subj-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .subj-table-wrap table,
  .table-wrap table { min-width: 600px; }

  /* ─ DOB picker popover – center on mobile ─ */
  .dob-popover,
  .coord-cal-popover {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px !important;
    z-index: 1010 !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,.15) !important;
  }
  .dob-popover.open,
  .coord-cal-popover.open {
    transform: translateY(0) !important;
  }

  /* ─ Generic modal / popup fixes ─ */
  .modal-content, .popup-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ─ Cost summary ─ */
  .cost-total { font-size: 16px !important; }

  /* ─ School card in results ─ */
  .school-card { padding: 16px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE – max-width: 480px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Landing page */
  .hero-title, [class*="hero"] h1 { font-size: 28px !important; line-height: 1.2 !important; }
  .hero-sub, [class*="hero"] p { font-size: 14px !important; }
  section { padding: 40px 0 !important; }
  .container { padding: 0 14px !important; }

  /* Student stats → single column */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Flow stepper → hide labels, show only numbers */
  .step-label { display: none !important; }
  .step-arrow { margin: 0 3px !important; }

  /* Coordinator stats */
  .coord-stats-grid { grid-template-columns: 1fr !important; }

  /* Font sizes */
  h1, .page-title { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }

  /* Cards */
  .panel, .card { padding: 12px !important; }

  /* Bottom bars */
  .flow-bottom-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px !important;
  }
  .flow-bottom-bar .btn { width: 100%; font-size: 14px !important; }

  /* Auth */
  .auth-wrapper { padding: 16px 8px !important; }
  .auth-card { padding: 20px 14px !important; }
  .auth-brand h1 { font-size: 18px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* Confirmed exam cards */
  .cb-details { padding: 12px !important; }
  .cb-school-badge { width: 40px !important; height: 40px !important; font-size: 14px !important; }
  .cb-subjects { gap: 4px !important; }
  .cb-subj { font-size: 11px !important; padding: 3px 8px !important; }

  /* School card tweaks */
  .school-card { padding: 14px !important; }
  .school-name { font-size: 16px !important; }
  .school-footer { flex-direction: column; gap: 10px; align-items: flex-start !important; }
  .school-price { font-size: 18px !important; }
  .coverage-badge { font-size: 11px !important; padding: 3px 8px !important; }

  /* Request cards */
  .req-body { padding: 10px 12px !important; }

  /* Map on very small screens */
  .map-app { grid-template-rows: 38vh auto !important; }
  svg.map-svg { min-height: 220px !important; }

  /* Email compose */
  .compose-body textarea { min-height: 160px !important; font-size: 14px !important; }

  /* Cost summary */
  .cost-total { font-size: 15px !important; }
  .cost-row { font-size: 13px !important; }

  /* Profile page */
  .phone-row { gap: 6px !important; }

  /* Badges */
  .badge { font-size: 11px !important; padding: 2px 6px !important; }

  /* Chat */
  .msg { max-width: 88% !important; padding: 8px 12px !important; }
  .msg-body { font-size: 13px !important; }

  /* School hero */
  .school-hero { padding: 18px !important; }
  .school-hero h1 { font-size: 20px !important; }
  .school-meta .meta-chip { padding: 4px 10px !important; font-size: 12px !important; }
  .mini-map { height: 180px !important; }

  /* Topbar */
  .brand-text { font-size: 14px !important; }
  .brand-logo { width: 28px !important; height: 28px !important; }

  /* Mobile drawer tuned for small phones */
  .student-mobile-nav .nav-drawer { width: min(300px, 90vw); max-width: 90vw; }
}


/* ═══════════════════════════════════════════════════════════════
   VERY SMALL MOBILE – max-width: 360px (iPhone SE, Galaxy S mini)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .topbar-inner { padding: 8px 10px !important; }
  .main-wrap { padding: 10px 10px 0 !important; }
  .brand-text { font-size: 13px !important; }
  .brand-logo { width: 26px !important; height: 26px !important; }
  .stat-card { padding: 10px !important; }
  .stat-card .value { font-size: 18px !important; }
  .auth-card { padding: 18px 12px !important; }
  .btn-submit { font-size: 14px !important; }
  .school-card { padding: 12px !important; }
  .offering-card { padding: 14px !important; }
  .flow-stepper { padding: 4px 8px !important; }
  .step-num { width: 22px !important; height: 22px !important; font-size: 9px !important; }
  .reserved-banner { padding: 12px !important; }
  .email-field { padding: 10px 12px !important; }
  .compose-body textarea { padding: 12px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SAFE AREA for notched devices (iPhone etc.)
   ═══════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .flow-bottom-bar {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .student-mobile-nav .nav-drawer,
  .mobile-nav-drawer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  /* Safe area on left/right for landscape notch phones */
  @media (orientation: landscape) {
    .main-wrap {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
    .topbar-inner {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    .flow-bottom-bar {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE responsive overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .mobile-nav-drawer {
  background: var(--panel, #1e1e2e);
}
[data-theme="dark"] .mobile-nav-drawer a {
  color: var(--text, #e0e0e0);
  border-color: var(--border, rgba(255,255,255,.08));
}
[data-theme="dark"] .mobile-nav-drawer > .drawer-nav-link:hover,
[data-theme="dark"] .mobile-nav-drawer > .drawer-nav-link.active {
  color: #dbeafe;
  background: rgba(96, 165, 250, .14);
  border-bottom-color: transparent;
}
[data-theme="dark"] .sidebar-toggle {
  background: var(--panel, #1e1e2e);
  border-color: var(--border, rgba(255,255,255,.08));
  color: var(--text, #e0e0e0);
}
[data-theme="dark"] .student-mobile-nav .nav-drawer {
  background: var(--panel, #161b2e);
  border-color: var(--border, rgba(255,255,255,.10));
}
[data-theme="dark"] .student-mobile-nav .nav-drawer a,
[data-theme="dark"] .student-mobile-nav .nav-drawer button {
  color: var(--text, #e0e0e0);
}
[data-theme="dark"] .student-mobile-nav .nav-drawer a:hover,
[data-theme="dark"] .student-mobile-nav .nav-drawer button:hover {
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .student-mobile-nav .nav-drawer a.active {
  color: #9bb7ff;
  background: rgba(78,122,255,.16);
  box-shadow: inset 3px 0 0 #8aa8ff;
}
[data-theme="dark"] .student-mobile-nav .student-mobile-logout {
  border-color: var(--border, rgba(255,255,255,.10));
}
[data-theme="dark"] .student-mobile-nav .student-mobile-logout button {
  color: #fca5a5;
  background: rgba(248,113,113,.12);
}
[data-theme="dark"] .student-mobile-nav .student-mobile-logout button:hover {
  background: rgba(248,113,113,.18);
}
[data-theme="dark"] .flow-bottom-bar {
  background: rgba(12,16,33,.95);
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE on phones – prevent layout breakage
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .flow-bottom-bar { position: static !important; }
  body { height: auto !important; overflow: auto !important; }
  .topbar { position: static !important; }
  .main-wrap { overflow: auto !important; flex: none !important; }
  .map-app { grid-template-rows: 60vh auto !important; }
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   LARGE SCREENS – min-width: 1400px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .topbar-inner { max-width: 1320px; }
  .main-wrap { max-width: 1320px; }
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGES – protected mobile layout
   Keeps article badges/dates/headlines from broad mobile rules.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .article-hero {
    max-height: 280px !important;
  }
  .article-hero img {
    height: 280px !important;
    aspect-ratio: auto !important;
  }
  .article-container {
    margin: -28px 12px 28px !important;
    padding: 26px 18px 36px !important;
    border-radius: 18px !important;
  }
  .article-meta {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px 10px !important;
    flex-wrap: wrap !important;
    margin: 0 0 20px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .article-tag {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .article-date,
  .article-read-time {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  .article-container h1 {
    font-size: clamp(25px, 7.2vw, 31px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 20px !important;
  }
  .article-container h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 34px 0 14px !important;
  }
  .article-container h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  .article-container p,
  .article-container li {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .article-container ul,
  .article-container ol {
    margin-left: 20px !important;
  }
}

@media (max-width: 480px) {
  .article-hero {
    max-height: 250px !important;
  }
  .article-hero img {
    height: 250px !important;
  }
  .article-container {
    margin: -24px 12px 26px !important;
    padding: 24px 16px 34px !important;
  }

  .article-card {
    border-radius: 18px !important;
  }
  .article-media {
    height: 220px !important;
  }
  .article-media .article-tag-badge {
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    max-width: calc(100% - 24px) !important;
    padding: 6px 11px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    text-shadow: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .article-body {
    padding: 24px 22px 26px !important;
  }
  .article-title {
    font-size: 18px !important;
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
  }
  .article-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  [data-theme="dark"] .article-media .article-tag-badge {
    background: rgba(12, 16, 33, .84) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .24) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PRINT – clean output
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .hamburger-btn, .student-hamburger, .sidebar-toggle,
  .mobile-nav-overlay, .student-mobile-nav, .sidebar-overlay,
  .flow-bottom-bar, .topbar, .sidebar { display: none !important; }
  body { height: auto !important; overflow: visible !important; }
  .layout { display: block !important; }
  .main { padding: 0 !important; }
}