/* ===== 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); }

/* Admin/editor access entry in the sidebar footer. It remains available
   to signed-in staff who need to elevate into the protected management
   area, while privileged sessions use the role-specific Management nav. */
.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; height: 100dvh; width: min(88vw, 340px);
  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: hidden;
}
.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__brand-mark {
  width: 38px; height: 38px; flex-shrink: 0; display: block; object-fit: contain;
}
.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__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.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; }
.drawer__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--sidebar-border);
  padding: var(--space-3) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--sidebar-bg);
  box-shadow: 0 -12px 30px rgba(0,0,0,0.12);
}
.drawer__support-link { min-height: 46px; }
.drawer__account {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0; padding: var(--space-3); margin-top: var(--space-1);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.drawer__account-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.drawer__account-name { color: var(--sidebar-text-active); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer__account-role { color: var(--sidebar-text); font-size: var(--fs-xs); text-transform: capitalize; }
.drawer__signout-btn {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-1); padding: var(--space-3); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: var(--sidebar-text-active);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.drawer__signout-btn:hover { background: var(--sidebar-item-hover); }
.drawer__signout-btn:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 2px; }
.drawer__signout-btn:disabled { opacity: 0.6; cursor: wait; }
.drawer__signout-btn svg { width: 18px; height: 18px; }
.drawer__admin-access { min-height: 48px; margin-top: var(--space-1); }

/* ===== 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; }
}
/* The sticky action bar (edit-department.html and similar) sits in this
   same bottom-right corner -- without this, the dev badge's high
   z-index (it needs to stay visible over everything else) put it
   directly on top of Save Draft/Publish Changes, silently intercepting
   clicks meant for those buttons. Found via a real-browser Playwright
   run, not code review alone. */
body.has-sticky-action-bar .dev-mode-badge { bottom: calc(var(--space-4) + 64px); }
@media (max-width: 900px) {
  body.has-sticky-action-bar .dev-mode-badge { bottom: calc(var(--space-3) + 108px); }
}

/* ===== 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-block: var(--space-6); }
.page-section--tight { padding-block: var(--space-4); }

/* 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;
}
.page-section__intro {
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.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)); }
.grid--two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 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: minmax(0, 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-5) 0;
}
.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 var(--space-6);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__brand-mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.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__col--legal { align-items: flex-end; text-align: right; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.site-footer__legal-links a { color: var(--color-white); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible { color: var(--color-gold-400); text-decoration-color: currentColor; }
.site-footer__meta-line { color: var(--sidebar-text); font-size: var(--fs-xs); line-height: 1.5; }
@media (max-width: 768px) {
  .site-footer__inner { flex-direction: column; padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-footer__col--legal { align-items: flex-start; text-align: left; }
  .site-footer__legal-links { justify-content: flex-start; }
}

/* ===== Sticky action bar (Edit Department and similar long-form editors) =====
   Fixed to the viewport bottom rather than `position: sticky` inside the
   workspace column -- .workspace/.app-main have no scroll container of
   their own (the document itself scrolls, matching .sidebar/.topbar's
   own `position: sticky` against that same document scroll), so a plain
   `fixed` bar stays correctly pinned everywhere this appears.
   Left offset mirrors .sidebar's own responsive width exactly (collapsed
   width at the same breakpoint, full-width with no offset once the
   sidebar itself hides) so the bar never renders underneath, or with a
   gap next to, the sidebar. `body.has-sticky-action-bar` adds bottom
   padding to the workspace AND the footer specifically so neither the
   last field of a long form nor the footer's own links ever end up
   hidden behind this fixed bar -- see edit-department.js's Problem 2,
   requirement 4 ("Do not place the action bar behind or beneath the
   footer"). */
.sticky-action-bar {
  position: fixed;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  z-index: var(--z-action-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
body.sidebar-collapsed .sticky-action-bar { left: var(--sidebar-width-collapsed); }
.sticky-action-bar__status { display: flex; align-items: center; min-width: 0; }
.sticky-action-bar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.unsaved-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-warning); }
.unsaved-indicator[hidden] { display: none; }
.unsaved-indicator__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold-500); flex-shrink: 0; }
body.has-sticky-action-bar .workspace { padding-bottom: 88px; }
body.has-sticky-action-bar .site-footer { padding-bottom: calc(var(--space-6) + 88px); }

@media (max-width: 1024px) and (min-width: 901px) {
  .sticky-action-bar { left: var(--sidebar-width-collapsed); }
}
@media (max-width: 900px) {
  .sticky-action-bar { left: 0; padding: var(--space-3) var(--space-4); }
  body.has-sticky-action-bar .workspace { padding-bottom: 112px; }
  body.has-sticky-action-bar .site-footer { padding-bottom: calc(var(--space-6) + 112px); }
}

/* Mobile tap-target hardening for the persistent shell. */
@media (max-width: 900px) {
  .topbar__menu-btn,
  .topbar__icon-btn {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}