/* ===== App shell ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ===== Sidebar (desktop) ===== */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: var(--z-sidebar);
  transition: width var(--transition-base);
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar__link-label,
body.sidebar-collapsed .sidebar__user-info { display: none; }
body.sidebar-collapsed .sidebar__collapse-btn { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar__user { justify-content: center; }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar__brand-link { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; flex: 1; }
.sidebar__brand-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: block; object-fit: contain;
}
.sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar__brand-word { color: var(--sidebar-text-active); font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__brand-sub { color: var(--color-gray-500-on-dark); font-size: 11px; font-weight: 600; }
body.sidebar-collapsed .sidebar__brand-text { display: none; }
.sidebar__collapse-btn {
  background: none; border: none; color: var(--sidebar-text); padding: var(--space-2);
  border-radius: var(--radius-sm); display: flex; transition: background var(--transition-fast), transform var(--transition-base);
}
.sidebar__collapse-btn:hover { background: var(--sidebar-item-hover); }

.sidebar__nav { flex: 1; padding: var(--space-5) var(--space-3); overflow-y: auto; }
.sidebar__group-label {
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-gray-500-on-dark); padding: 0 var(--space-3); margin: var(--space-5) 0 var(--space-2);
}
.sidebar__group-label:first-child { margin-top: 0; }
.sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.sidebar__link:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); text-decoration: none; transform: translateX(2px); }
.sidebar__link.is-active { background: var(--sidebar-item-active); color: var(--sidebar-text-active); box-shadow: inset 3px 0 0 var(--color-gold-500); }
.sidebar__link-icon { display: flex; flex-shrink: 0; }

.sidebar__footer { padding: var(--space-3); border-top: 1px solid var(--sidebar-border); }
.sidebar__user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); }
.sidebar__user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-gold-accent); color: var(--color-navy-950);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-xs);
}
.sidebar__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar__user-name { color: var(--sidebar-text-active); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { color: var(--sidebar-text); font-size: var(--fs-xs); text-transform: capitalize; }
.sidebar__signout-btn {
  background: none; border: none; color: var(--sidebar-text); padding: var(--space-2);
  border-radius: var(--radius-sm); display: flex; flex-shrink: 0;
}
.sidebar__signout-btn:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); }

/* Signed-out bottom access -- deliberately not styled as an avatar/
   account chip (there is no account). A quieter icon-plus-label link,
   consistent with the rest of the nav, replaces what used to be a
   gold circle around a bare "?". */
.sidebar__admin-access {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--sidebar-text); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__admin-access:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); text-decoration: none; }
.sidebar__admin-access-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: var(--color-gold-400);
  display: flex; align-items: center; justify-content: center;
}
body.sidebar-collapsed .sidebar__admin-access { justify-content: center; }

@media (max-width: 1024px) and (min-width: 901px) {
  .sidebar { width: var(--sidebar-width-collapsed); }
  .sidebar__link-label, .sidebar__user-info, .sidebar__brand-text { display: none; }
}
@media (max-width: 900px) {
  .sidebar, .sidebar__collapse-btn { display: none; }
}

/* ===== Main column ===== */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ===== Topbar ===== */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}
.topbar__menu-btn { display: none; background: none; border: none; color: var(--color-heading); padding: var(--space-2); border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.topbar__menu-btn:hover { background: var(--color-surface-2); }
.topbar__breadcrumb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.topbar__logo-mobile { display: none; height: 32px; width: 32px; object-fit: contain; }
.topbar__title { font-weight: 700; color: var(--color-heading); font-size: var(--fs-md); letter-spacing: var(--ls-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__search { position: relative; flex: 1; max-width: 380px; display: flex; align-items: center; margin-left: auto; }
.topbar__search-icon { position: absolute; left: var(--space-3); color: var(--color-text-muted); display: flex; pointer-events: none; }
.topbar__search input {
  width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) * 2 + 18px);
  border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-1);
  min-height: 40px; transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.topbar__search input:focus-visible { outline: none; border-color: var(--color-sky-400); box-shadow: 0 0 0 3px rgba(106,182,236,0.25); }
.topbar__icon-btn { position: relative; background: none; border: none; color: var(--color-heading); padding: var(--space-2); border-radius: var(--radius-md); display: flex; flex-shrink: 0; transition: background var(--transition-fast); }
.topbar__icon-btn:hover { background: var(--color-surface-2); }

/* ===== Theme toggle ===== */
.theme-toggle-btn__icon { display: none; }
/* Per spec: sun icon shows while in dark mode (click it to go light),
   moon icon shows while in light mode (click it to go dark). */
html[data-theme="dark"] .theme-toggle-btn__icon--sun { display: flex; }
html:not([data-theme="dark"]) .theme-toggle-btn__icon--moon { display: flex; }

@media (max-width: 900px) {
  .topbar__menu-btn { display: flex; }
  .topbar__logo-mobile { display: block; }
  .topbar { padding: 0 var(--space-4); gap: var(--space-3); }
}
@media (max-width: 560px) {
  .topbar__search { display: none; }
  .topbar__title { display: none; }
}

/* ===== Mobile drawer ===== */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(10, 27, 46, 0.5);
  z-index: var(--z-drawer-overlay); opacity: 0; transition: opacity var(--transition-base);
}
.drawer-overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; left: 0; height: 100vh; width: min(85vw, 320px);
  background: var(--sidebar-bg); color: var(--sidebar-text);
  z-index: var(--z-drawer); transform: translateX(-100%);
  transition: transform var(--transition-base);
  display: flex; flex-direction: column; overflow-y: auto;
}
/* Same class of bug as the documented .modal-overlay/sites.html incident
   (see tests/e2e/sites.spec.js's header comment): an author `display`
   rule at equal specificity to the UA [hidden] rule wins the cascade tie,
   so `drawerRoot.hidden = true` alone doesn't actually hide it without
   this explicit override. Caught by tests/e2e/student-portal.spec.js's
   Escape-closes-the-drawer check. */
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }
.drawer__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--sidebar-border); }
.drawer__mark {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-gold-accent); color: var(--color-navy-950);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-xs);
}
.drawer__title { color: var(--sidebar-text-active); font-weight: 800; flex: 1; }
.drawer__close-btn { background: none; border: none; color: var(--sidebar-text); padding: var(--space-2); border-radius: var(--radius-sm); display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.drawer__close-btn:hover { background: var(--sidebar-item-hover); }
.drawer__list { list-style: none; margin: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.drawer__list .sidebar__link { min-height: 48px; }

/* ===== Dev-mode badge ===== */
.dev-mode-badge {
  position: fixed; bottom: var(--space-4); right: var(--space-4);
  background: var(--color-warning-bg); color: var(--color-warning);
  border: 1px solid var(--color-gold-500);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: var(--shadow-3);
  z-index: var(--z-toast);
}
@media (max-width: 560px) {
  .dev-mode-badge { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); text-align: center; }
}

/* ===== Shared page container =====
   One reusable content wrapper (instead of ad hoc per-page margin
   hacks) that guarantees safe, consistent padding on every side --
   desktop, tablet, and mobile -- regardless of sidebar/topbar state.
   Used by pages that render their main content directly into
   #main-content without the `.container.page-section` combo already
   used elsewhere (e.g. Digital Tools, Privacy/Terms, department
   pages). */
.page-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
}
.page-content { width: 100%; min-width: 0; }
.content-section { padding: var(--space-6) 0; }
@media (max-width: 1024px) {
  .page-container { padding: var(--space-6) var(--space-5) var(--space-7); }
}
@media (max-width: 640px) {
  .page-container { padding: var(--space-5) var(--space-4) var(--space-6); }
}

/* ===== Edit Department admin page -- centered workspace =====
   Page-specific override, scoped to edit-department.html's main content
   wrapper only (added as an extra class alongside .container.page-section,
   not a change to .container/.page-section themselves -- those keep their
   existing 1500px max-width for every other page, public or admin, that
   uses them). The Edit Department workspace was sitting flush against the
   sidebar and stretching to that full 1500px, which reads as unbalanced
   for a form-heavy admin screen. This narrows it to a professional
   reading/editing width and keeps everything inside (title, description,
   alerts, department selector, tabs, form fields, action buttons, preview
   modal trigger) on the same grid, without centering the text itself --
   .container's existing `margin: 0 auto` centers the wrapper as a block;
   text and form fields remain left-aligned inside it by default. */
.edit-dept-page {
  max-width: 1240px;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
@media (max-width: 1024px) {
  .edit-dept-page { padding-left: var(--space-5); padding-right: var(--space-5); }
}
@media (max-width: 640px) {
  /* Full available width on small screens, no horizontal scrolling --
     .container's base padding (--space-5 below 640px) already applies;
     this just removes the max-width cap so narrow viewports use all the
     space they have. */
  .edit-dept-page { max-width: 100%; padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ===== Workspace (page content area) ===== */
.workspace { flex: 1; width: 100%; }
.page-header {
  padding: var(--space-6) 0 var(--space-5);
}
.page-header h1 { margin-bottom: var(--space-2); }
.page-header p { color: var(--color-text-muted); max-width: 640px; margin-bottom: 0; }

.page-section { padding: var(--space-6) 0; }
.page-section--tight { padding: var(--space-4) 0; }
@media (max-width: 560px) {
  .page-section { padding: var(--space-5) 0; }
  .page-section__header { margin-bottom: var(--space-4); }
}
/* Readability fix (visual-direction pass): a page's intro paragraph --
   the plain <p> right after <h1>, before any card/grid content -- was
   stretching to the full container width (1136px measured on a 1400px
   viewport), well past a comfortable reading line length. Grid/card
   text isn't affected since it's already narrowed by its own column
   width. Scoped to just the intro paragraph pattern, not every <p>
   everywhere, so form labels/card text/etc. are untouched. */
.container.page-section > h1 + p,
.container.page-section > section > p,
.page-container > .page-section__header + p {
  max-width: 700px;
}

/* Section rhythm -- alternating full-bleed backgrounds so the page
   doesn't read as one flat, undifferentiated surface top to bottom. */
.section--white { background: var(--section-bg-white); }
.section--sky { background: var(--section-bg-sky); }
.section--warm { background: var(--section-bg-warm); }
.section--navy {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 100%);
  color: var(--color-white);
}
.section--navy h2 { color: var(--color-white); }
.section--navy .page-section__header .badge--neutral { background: rgba(255,255,255,0.12); color: #e8f3fc; }

.page-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.grid { display: grid; gap: var(--space-5); }
.grid--departments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--system-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1700px) {
  .grid--departments { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--emergency { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--resources { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Help-topic / Featured Tool cards: 4 columns on wide desktop, 3 on
   standard desktop, 2 on tablet, 1 on mobile -- gives 8 help-topic cards
   two even rows of 4 on wide screens instead of an awkward final row of
   2 out of 3 columns. */
.grid--help-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1500px) {
  .grid--help-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--help-topics { grid-template-columns: minmax(0, 1fr); }
}
.grid--two-col { grid-template-columns: 2fr 1fr; }

@media (max-width: 1200px) {
  .grid--departments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .grid--quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid--departments { grid-template-columns: minmax(0, 1fr); }
  .grid--quick-actions { grid-template-columns: minmax(0, 1fr); }
  .grid--emergency { grid-template-columns: minmax(0, 1fr); }
  .grid--resources { grid-template-columns: minmax(0, 1fr); }
  .grid--system-cards { grid-template-columns: minmax(0, 1fr); }
  .grid--stats { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Footer ===== */
.site-footer {
  background: linear-gradient(165deg, var(--color-navy-950) 0%, var(--color-navy-900) 100%);
  color: var(--sidebar-text);
  padding: var(--space-7) 0 var(--space-6);
}
.site-footer__inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); padding: 0 var(--space-6);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: var(--sidebar-text); font-size: var(--fs-sm); text-decoration: none; }
.site-footer__col a:hover { color: var(--color-white); text-decoration: underline; }
.site-footer__col-heading { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gray-500-on-dark); margin-bottom: var(--space-1); }
.site-footer__wordmark { font-size: var(--fs-lg); font-weight: 800; color: var(--color-white); letter-spacing: var(--ls-tight); }
.site-footer__powered { font-size: var(--fs-sm); color: var(--sidebar-text); }
.site-footer__powered strong { color: var(--color-gold-400); }
.site-footer__meta-line { font-size: var(--fs-xs); color: var(--color-gray-500-on-dark); margin-top: var(--space-2); }
.site-footer__org-line { font-size: var(--fs-sm); color: var(--sidebar-text); }
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-5); padding-left: var(--space-4); padding-right: var(--space-4); }
}