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

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