/* =============================================================================
   AUDIOSCAPE PORTAL — FORGE DESIGN SYSTEM
   Version: 3.0
   Aesthetic: Dark Industrial · IBM Plex · Amber accent
   ============================================================================= */

/* Google Fonts loaded via <link> in base.html */

/* === 1. THEME VARIABLES === */

/* ── DARK MODE (default) ──────────────────────────────────────────────────── */
:root {
  /* Canvas */
  --bg-page:    #0c0d0f;
  --bg-card:    #161719;
  --bg-input:   #0c0d0f;
  --bg-hover:   rgba(255,255,255,0.04);
  --bg-active:  rgba(245,158,11,0.10);

  /* Text */
  --text-primary:   #edecea;
  --text-secondary: #848a96;
  --text-tertiary:  #484f5a;
  --text-inverse:   #0c0d0f;

  /* Borders */
  --border-color:  rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --border-focus:  #f59e0b;

  /* Surfaces (elevated levels) */
  --surface:     #161719;
  --surface-hi:  #1e2024;
  --surface-hi2: #24272d;

  /* Brand */
  --brand-primary:       #f59e0b;
  --brand-primary-hover: #fbbf24;
  --brand-secondary:     #3b82f6;
  --brand-dim:           rgba(245,158,11,0.10);
  --brand-mid:           rgba(245,158,11,0.20);

  /* Semantic */
  --success-600:  #22c55e;
  --success-700:  #16a34a;
  --success-100:  rgba(34,197,94,0.12);
  --success-50:   rgba(34,197,94,0.06);
  --warning-600:  #f59e0b;
  --warning-700:  #d97706;
  --warning-100:  rgba(245,158,11,0.12);
  --warning-50:   rgba(245,158,11,0.06);
  --danger-600:   #ef4444;
  --danger-700:   #dc2626;
  --danger-100:   rgba(239,68,68,0.12);
  --danger-50:    rgba(239,68,68,0.06);
  --info-600:     #3b82f6;
  --info-700:     #1d4ed8;
  --info-100:     rgba(59,130,246,0.16);
  --info-50:      rgba(59,130,246,0.06);

  /* Pod colors — vivid on dark */
  --pod-pcb:       #60a5fa;
  --pod-mod:       #34d399;
  --pod-flex:      #fbbf24;
  --pod-case:      #a78bfa;
  --pod-finishing: #f472b6;
  --pod-qa:        #22d3ee;
  --pod-rehab:     #fb923c;

  /* Slate fallbacks (legacy aliases map to new semantic vars) */
  --slate-900: #edecea;
  --slate-800: #c9c6c2;
  --slate-700: #a3a09b;
  --slate-600: #848a96;
  --slate-500: #6b7280;
  --slate-400: #484f5a;
  --slate-300: #2e3340;
  --slate-200: #1e2024;
  --slate-100: #161719;
  --slate-50:  #0c0d0f;
  --gray-50:   var(--surface-hi);
  --gray-100:  var(--surface-hi2);
  --gray-200:  var(--border-strong);
  --gray-300:  rgba(255,255,255,0.2);
  --white:     #ffffff;
  --blue-700:  #2563eb;
  --blue-600:  #3b82f6;
  --blue-500:  #60a5fa;
  --blue-100:  rgba(59,130,246,0.15);
  --blue-50:   rgba(59,130,246,0.07);
  --orange-600: #d97706;
  --orange-500: #f59e0b;
  --orange-100: rgba(245,158,11,0.15);
  --orange-50:  rgba(245,158,11,0.07);

  /* Typography */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* Font weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);

  /* Radius */
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  8px;
  /* Larger radii for tablet / floor-worker card surfaces. Admin UI uses
     up to --radius-xl; submission and inventory flows use these. */
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-4xl: 16px;
  --radius-full: 9999px;
  --radius:     var(--radius-lg);

  /* Shadows — subtle on dark */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow:    0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.6);

  /* Overlays */
  --modal-backdrop: rgba(0,0,0,0.55);

  /* Soft fills — for inline notice/error blocks, badges, alert backgrounds. */
  --bg-danger-soft:    color-mix(in srgb, var(--danger-600)   15%, transparent);
  --bg-warning-soft:   color-mix(in srgb, var(--warning-600)  15%, transparent);
  --bg-success-soft:   color-mix(in srgb, var(--success-600)  15%, transparent);
  --bg-info-soft:      color-mix(in srgb, var(--brand-secondary) 15%, transparent);
  --border-danger-soft:  color-mix(in srgb, var(--danger-600)   45%, transparent);
  --border-warning-soft: color-mix(in srgb, var(--warning-600)  45%, transparent);
  --border-success-soft: color-mix(in srgb, var(--success-600)  45%, transparent);
  --border-info-soft:    color-mix(in srgb, var(--brand-secondary) 45%, transparent);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 280ms ease;

  /* Z-index */
  --z-dropdown:       1000;
  --z-sticky:         1100;
  --z-modal-backdrop: 1200;
  --z-modal:          1300;
  --z-toast:          1400;

  /* Focus ring */
  --focus-ring: #f59e0b;

  /* Topbar */
  --topbar-bg:     #161719;
  --topbar-border: rgba(255,255,255,0.07);
  --nav-panel-bg:  #111214;
}

/* ── LIGHT MODE ───────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-page:    #f5f4f1;
  --bg-card:    #ffffff;
  --bg-input:   #ffffff;
  --bg-hover:   rgba(0,0,0,0.04);
  --bg-active:  rgba(217,119,6,0.08);

  --text-primary:   #1a1918;
  --text-secondary: #52504c;
  --text-tertiary:  #908e8a;
  --text-inverse:   #ffffff;

  --border-color:  rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.16);
  --border-focus:  #d97706;

  --surface:     #ffffff;
  --surface-hi:  #f5f4f1;
  --surface-hi2: #ece9e4;

  --brand-primary:       #d97706;
  --brand-primary-hover: #b45309;
  --brand-secondary:     #2563eb;
  --brand-dim:           rgba(217,119,6,0.08);
  --brand-mid:           rgba(217,119,6,0.16);

  --success-600:  #16a34a;
  --success-700:  #15803d;
  --success-100:  #dcfce7;
  --success-50:   #f0fdf4;
  --warning-600:  #ca8a04;
  --warning-700:  #a16207;
  --warning-100:  #fef9c3;
  --warning-50:   #fefce8;
  --danger-600:   #dc2626;
  --danger-700:   #b91c1c;
  --danger-100:   #fee2e2;
  --danger-50:    #fef2f2;
  --info-600:     #0284c7;
  --info-700:     #0369a1;
  --info-100:     #dbeafe;
  --info-50:      #f0f9ff;

  --pod-pcb:       #2563eb;
  --pod-mod:       #059669;
  --pod-flex:      #d97706;
  --pod-case:      #7c3aed;
  --pod-finishing: #db2777;
  --pod-qa:        #0891b2;
  --pod-rehab:     #ea6f07;

  --slate-900: #1a1918;
  --slate-800: #3a3835;
  --slate-700: #52504c;
  --slate-600: #6b6864;
  --slate-500: #908e8a;
  --slate-400: #b8b5b0;
  --slate-300: #d4d1cc;
  --slate-200: #e8e5e0;
  --slate-100: #f2f0ec;
  --slate-50:  #f8f6f3;
  --gray-50:   #f5f4f1;
  --gray-100:  #ece9e4;
  --gray-200:  rgba(0,0,0,0.12);
  --gray-300:  rgba(0,0,0,0.18);
  --white:     #ffffff;
  --blue-700:  #1d4ed8;
  --blue-600:  #2563eb;
  --blue-500:  #3b82f6;
  --blue-100:  #dbeafe;
  --blue-50:   #eff6ff;
  --orange-600: #ea580c;
  --orange-500: #f97316;
  --orange-100: #ffedd5;
  --orange-50:  #fff7ed;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);

  /* Overlays — lighter scrim in light mode reads as a soft veil, not a hole */
  --modal-backdrop: rgba(15,23,42,0.35);

  --focus-ring: #d97706;

  /* Chrome surfaces follow the theme in light mode (white topbar + off-white
     rail). Border softens so the rail still feels chromed. */
  --topbar-bg:     #ffffff;
  --topbar-border: rgba(0,0,0,0.08);
  --nav-panel-bg:  #fafaf9;
}

/* Light-mode nav: bump link text from --text-secondary to --text-primary so it
   crosses the WCAG-AA threshold against the near-white rail. Section headers
   stay at --text-tertiary (they're mono uppercase, treated as labels). */
[data-theme="light"] .nav-menu a { color: var(--text-primary); }
[data-theme="light"] .nav-menu a:hover { color: var(--text-primary); background: var(--bg-hover); }
[data-theme="light"] .nav-menu a.active { color: var(--brand-primary); }

/* === 2. RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100%;
  transition: background var(--transition-slow), color var(--transition-slow);
}

/* === 3. ACCESSIBILITY === */
*:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--brand-dim);
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--brand-primary); color: var(--text-inverse);
  padding: var(--space-3) var(--space-4); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--font-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  z-index: 10000; border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-base);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* === 4. TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p { color: var(--text-primary); margin-bottom: var(--space-4); }

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* === 5. LAYOUT === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 1280px) {
  .container { max-width: 1400px; padding: 0 var(--space-6); }
}
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--space-6); }

.main-content { padding: var(--space-6) var(--space-4); }
@media (min-width: 1024px) { .main-content { padding: var(--space-8) var(--space-6); } }

/* === 6. TOPBAR === */
.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  position: sticky; top: 0; z-index: var(--z-sticky);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1400px; margin: 0 auto; padding: 0 var(--space-4); min-height: 52px;
}

.header-left { display: flex; align-items: center; gap: var(--space-3); position: relative; }
.header-right { display: flex; align-items: center; gap: var(--space-3); }

.logo-wrap { display: flex; align-items: center; gap: var(--space-3); }

.logo {
  height: 32px; width: 64px; border-radius: var(--radius-md); object-fit: contain;
  opacity: 0.9;
}
/* Dim treatment is for dark mode; on white the logo reads better at full opacity. */
[data-theme="light"] .logo,
[data-theme="light"] .nav-brand .logo { opacity: 1; }

.brand {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0;
}

/* Theme toggle button */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark  { display: block; }
[data-theme="light"] .theme-toggle .icon-light { display: block; }
[data-theme="light"] .theme-toggle .icon-dark  { display: none; }

/* Topbar user pill */
.topbar-user {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 0 var(--space-2);
}

/* === 7. NAVIGATION === */

/* Hamburger button */
.hamburger-btn {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer; padding: 9px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hamburger-btn:hover {
  background: var(--bg-hover);
  border-color: var(--brand-primary);
}
.hamburger-btn span {
  width: 100%; height: 1.5px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: all var(--transition-base);
}
.hamburger-btn.active { border-color: var(--brand-primary); }
.hamburger-btn.active span { background: var(--brand-primary); }
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* Nav panel — slides in from left */
.nav-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--nav-panel-bg);
  border-right: 1px solid var(--border-color);
  z-index: var(--z-dropdown);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity var(--transition-base), visibility var(--transition-base),
              transform var(--transition-base);
  display: flex; flex-direction: column;
  padding-top: 52px; /* below topbar */
}

.nav-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Nav panel header spacer (shows brand in panel top) */
.nav-menu::before {
  content: '';
  display: block;
}

/* Nav group */
.nav-group { border-bottom: 1px solid var(--border-color); }
.nav-group:last-child { border-bottom: none; }

/* Section header button */
.nav-menu .nav-section {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent; border: none; outline: none;
  cursor: pointer; font-family: var(--font-mono);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-menu .nav-section:hover { color: var(--text-secondary); background: var(--bg-hover); }
.nav-menu button.nav-section:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: -2px;
}

/* Chevron */
.nav-chevron {
  display: inline-block; width: 0; height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid currentColor;
  transition: transform var(--transition-base); flex-shrink: 0;
}
.nav-group.open > button.nav-section .nav-chevron { transform: rotate(90deg); }

/* Collapsible items */
.nav-group-items { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.nav-group.open > .nav-group-items { max-height: 600px; }
.nav-group-items a:last-child { border-bottom: none; }

/* Nav links */
.nav-menu a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--font-medium);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: 40px;
}
.nav-menu a:hover {
  background: var(--bg-hover); color: var(--text-primary); text-decoration: none;
}
.nav-menu a:last-child { border-bottom: none; }

.nav-icon {
  font-size: var(--text-sm); width: 1.25em; text-align: center;
  flex-shrink: 0; color: var(--text-tertiary);
}

/* Nav overlay */
.nav-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--modal-backdrop);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: calc(var(--z-dropdown) - 1);
  backdrop-filter: blur(1px);
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* === 8. CARDS === */
/* Canonical card. Compose modifiers:
     .card               default (padding-6, shadow)
     .card-compact       tighter padding (-4) for grids of small cards
     .card-feature       larger padding (-7) for hero/intro panels
     .card-flat          no shadow (use inside other containers)
     .card-hover         lifts on hover (clickable card pattern)
   Always combine with .card itself (e.g. class="card card-compact"). */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  transition: background var(--transition-slow), border-color var(--transition-slow),
              box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card-compact { padding: var(--space-4); }
.card-feature { padding: var(--space-8); }
.card-flat    { box-shadow: none; }
.card-hover:hover {
  border-color: var(--border-strong);
  background: var(--surface-hi);
  transform: translateY(-1px);
}
.card h2 {
  margin-top: 0; margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-xl);
}
.card h3 { margin-top: 0; margin-bottom: var(--space-3); font-size: var(--text-lg); }

/* Stat cards */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: background var(--transition-slow);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl); font-weight: 600;
  color: var(--text-primary); line-height: 1;
}
.stat-change {
  font-family: var(--font-mono); font-size: var(--text-xs);
  margin-top: var(--space-2);
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
}
.stat-change.positive { color: var(--success-600); }
.stat-change.negative { color: var(--danger-600); }

/* === 9. BUTTONS === */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 0.5rem 1.125rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; text-decoration: none;
  min-height: 38px; min-width: 44px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

/* Primary */
.btn, .btn-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
}
.btn:hover, .btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  box-shadow: 0 0 16px var(--brand-dim);
  text-decoration: none; color: var(--text-inverse);
}
.btn:active, .btn-primary:active { transform: translateY(1px); box-shadow: none; }

/* Secondary / Outline */
.btn-secondary, .btn-outline {
  background: transparent; color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn-secondary:hover, .btn-outline:hover {
  color: var(--text-primary); border-color: var(--brand-primary);
  background: var(--brand-dim); text-decoration: none;
}

/* Danger */
.btn-danger {
  background: transparent; color: var(--danger-600);
  border-color: rgba(239,68,68,0.35);
}
.btn-danger:hover {
  background: var(--danger-50); border-color: var(--danger-600);
  text-decoration: none; color: var(--danger-600);
}

/* Ghost */
.btn-ghost, .btn-link {
  background: transparent; color: var(--text-tertiary);
  border-color: transparent; padding: var(--space-2) var(--space-3);
}
.btn-ghost:hover, .btn-link:hover {
  background: var(--bg-hover); color: var(--text-secondary);
}

/* Sizes */
.btn-sm { padding: var(--space-1) var(--space-3); font-size: 10px; min-height: 30px; }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: 12px; min-height: 48px; }

/* Floor-worker / tablet CTA modifier. Layered on top of .btn or .btn-primary
   when the button needs to be touch-friendly on iPads (Assembly Submission
   and Inventory Report flows). Pure size bump — keeps the global tech-mono
   uppercase treatment. */
.btn-flow-cta {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  min-height: 56px;
}

/* Disabled */
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled,
.btn-outline:disabled, .btn-danger:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* Touch */
@media (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger {
    min-height: 52px; padding: var(--space-3) var(--space-5); font-size: 12px;
  }
}

/* === 10. FORM CONTROLS === */
label {
  display: block; font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-1);
}

input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-sm);
  min-height: 40px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-slow);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
::placeholder { color: var(--text-tertiary); opacity: 1; }
select option { background: var(--bg-card); color: var(--text-primary); }

@media (pointer: coarse) {
  input, select, textarea {
    min-height: 52px; padding: var(--space-3) var(--space-4); font-size: 16px;
  }
}

/* Validation states */
input:valid:not(:placeholder-shown) { border-color: var(--success-600); }
input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--danger-600); }

/* Field wrapper */
.field { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.field label { margin-bottom: var(--space-1); }
.field-required label::after { content: " *"; color: var(--danger-600); }
.field-error {
  color: var(--danger-600); font-family: var(--font-mono);
  font-size: var(--text-xs); margin-top: var(--space-1);
  display: flex; align-items: center; gap: var(--space-1);
}
.field-help {
  color: var(--text-tertiary); font-size: var(--text-xs); margin-top: var(--space-1);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--danger-600);
}
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px var(--danger-50);
}

/* Checkbox */
.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.checkbox input[type="checkbox"] { width: 16px; height: 16px; min-height: auto; cursor: pointer; }

.touch-target {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--space-2); cursor: pointer;
}

/* Form rows */
.row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.row input, .row select { padding: var(--space-2) var(--space-3); }
.row-controls { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; }

/* === 11. TABLES === */
.table, .styled-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.table thead, .styled-table thead {
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border-strong);
}
.table th, .styled-table th {
  padding: var(--space-3) var(--space-4); text-align: left;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.table td, .styled-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary); vertical-align: top;
}
.table tbody tr:hover, .styled-table tbody tr:hover { background: var(--bg-hover); }
.table-striped tbody tr:nth-child(even) { background: var(--bg-hover); }
.table-striped tbody tr:nth-child(even):hover { background: rgba(255,255,255,0.04); }
.table-compact th, .table-compact td { padding: var(--space-2) var(--space-3); }
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === 12. FILTER FORM === */
.filter-form { margin-bottom: var(--space-6); }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: end; }
.filter-grid label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-1); }
.filter-grid input, .filter-grid select { width: 100%; }
@media (max-width: 900px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-grid .field.actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .filter-grid { grid-template-columns: 1fr; } }

/* === 13. TOASTS === */
.toast-container {
  position: fixed; top: 64px; right: 16px;
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 380px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-hi);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn var(--transition-slow) ease;
  pointer-events: auto;
}
.toast.toast-hiding { animation: toastSlideOut var(--transition-slow) ease forwards; }
@keyframes toastSlideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
.toast-icon { font-size: var(--text-lg); flex-shrink: 0; line-height: 1; }
.toast-content { flex: 1; min-width: 0; }
.toast-message { color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5; }
.toast-close {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  padding: var(--space-1); font-size: var(--text-lg); line-height: 1; opacity: 0.6;
  transition: opacity var(--transition-fast); flex-shrink: 0;
  min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.toast-close:hover { opacity: 1; background: var(--bg-hover); }
.toast-success { border-left-color: var(--success-600); }
.toast-success .toast-icon { color: var(--success-600); }
.toast-error   { border-left-color: var(--danger-600); }
.toast-error .toast-icon { color: var(--danger-600); }
.toast-warning { border-left-color: var(--warning-600); }
.toast-warning .toast-icon { color: var(--warning-600); }
.toast-info    { border-left-color: var(--brand-secondary); }
.toast-info .toast-icon { color: var(--brand-secondary); }
@media (max-width: 480px) {
  .toast-container { left: var(--space-3); right: var(--space-3); max-width: none; }
}

/* === 13b. SAVE STATUS PILL ===
   Shared between the employee submission and inventory forms — surfaces
   draft-save lifecycle (Ready / Unsaved / Saving / Saved). The modifier
   classes update only the dot color, so the pill stays unobtrusive. */
.save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-hi);
  border: 1px solid var(--border-color);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.save-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: background 0.15s;
}

.save-status.is-dirty  .save-dot { background: var(--warning-700); }
.save-status.is-saving .save-dot { background: var(--brand-primary); }
.save-status.is-saved  .save-dot { background: var(--success-600); }

/* === 14. PLAN BANNER === */
.plan-banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}
.plan-banner-icon { font-size: var(--text-base); flex-shrink: 0; }
.plan-banner-text { flex-shrink: 0; }
.plan-banner-link {
  margin-left: var(--space-2); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.plan-banner-danger {
  background: var(--danger-50); color: var(--danger-600);
  border-bottom: 1px solid var(--danger-100);
}
.plan-banner-danger .plan-banner-link { color: var(--danger-600); }
.plan-banner-warning {
  background: var(--warning-50); color: var(--warning-700);
  border-bottom: 1px solid var(--warning-100);
}
.plan-banner-warning .plan-banner-link { color: var(--warning-700); }
/* Wrap at tablet width too (was previously only at 600px and cramped on iPads). */
@media (max-width: 768px) {
  .plan-banner { flex-wrap: wrap; text-align: center; padding: var(--space-3) var(--space-4); }
  .plan-banner-text { width: 100%; }
  .plan-banner-link { width: 100%; margin-left: 0; margin-top: var(--space-2); }
}

/* Legacy flash */
.flash-wrap { margin-bottom: var(--space-4); }
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--border-color);
  margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
}
.flash-success { background: var(--success-50); border-color: var(--success-100); color: var(--success-600); }
.flash-error   { background: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-600); }
.flash-warning { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-700); }

/* === 15. BADGES & TAGS === */
.pod-tag, .pod-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.pod-tag.pcb,       .pod-badge.pcb       { color: var(--pod-pcb);       background: rgba(96,165,250,0.12); }
.pod-tag.mod,       .pod-badge.mod       { color: var(--pod-mod);       background: rgba(52,211,153,0.12); }
.pod-tag.flex,      .pod-badge.flex      { color: var(--pod-flex);      background: rgba(251,191,36,0.12); }
.pod-tag.case,      .pod-badge.case      { color: var(--pod-case);      background: rgba(167,139,250,0.12); }
.pod-tag.finishing, .pod-badge.finishing { color: var(--pod-finishing); background: rgba(244,114,182,0.12); }
.pod-tag.qa,        .pod-badge.qa        { color: var(--pod-qa);        background: rgba(34,211,238,0.12); }
.pod-tag.rehab,     .pod-badge.rehab     { color: var(--pod-rehab);     background: rgba(251,146,60,0.12); }

[data-theme="light"] .pod-tag.pcb,       [data-theme="light"] .pod-badge.pcb       { background: #eff6ff; }
[data-theme="light"] .pod-tag.mod,       [data-theme="light"] .pod-badge.mod       { background: #ecfdf5; }
[data-theme="light"] .pod-tag.flex,      [data-theme="light"] .pod-badge.flex      { background: #fffbeb; }
[data-theme="light"] .pod-tag.case,      [data-theme="light"] .pod-badge.case      { background: #f5f3ff; }
[data-theme="light"] .pod-tag.finishing, [data-theme="light"] .pod-badge.finishing { background: #fdf2f8; }
[data-theme="light"] .pod-tag.qa,        [data-theme="light"] .pod-badge.qa        { background: #ecfeff; }
[data-theme="light"] .pod-tag.rehab,     [data-theme="light"] .pod-badge.rehab     { background: #fff7ed; }

/* Forms — canonical form-group + form-control + form-help.
   Many older templates redefine these locally with slight variations; new code
   should rely on the globals here. See CLAUDE.md "UI & Styling Standards". */
.form-group {
  margin-bottom: var(--space-4);
}
.form-group > label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.form-control {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: var(--text-base);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
}
.form-control:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.form-help {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.875em;
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.form-card {
  background: var(--surface-hi);
  padding: var(--space-6);
  border-radius: 8px;
  margin-top: var(--space-4);
}

/* Partial aging badges — fresh < 3d, warm 3-7d, stale 7-14d, ancient 14d+ */
.age-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
}
.age-badge.age-fresh   { color: var(--pod-mod);   background: rgba(52,211,153,0.10); }
.age-badge.age-warm    { color: var(--pod-flex);  background: rgba(251,191,36,0.12); }
.age-badge.age-stale   { color: var(--pod-rehab); background: rgba(251,146,60,0.16); font-weight: 700; }
.age-badge.age-ancient { color: var(--text-inverse); background: var(--pod-rehab); font-weight: 700; }

[data-theme="light"] .age-badge.age-fresh   { background: #ecfdf5; }
[data-theme="light"] .age-badge.age-warm    { background: #fffbeb; }
[data-theme="light"] .age-badge.age-stale   { background: #fff7ed; }
[data-theme="light"] .age-badge.age-ancient { background: var(--pod-rehab); color: #fff; }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
}
.badge-success { background: var(--success-50);  color: var(--success-600); border: 1px solid var(--success-100); }
.badge-warning { background: var(--warning-50);  color: var(--warning-700); border: 1px solid var(--warning-100); }
.badge-error, .badge-danger { background: var(--danger-50); color: var(--danger-600); border: 1px solid var(--danger-100); }
.badge-info    { background: var(--blue-50);     color: var(--blue-600);    border: 1px solid var(--blue-100); }

/* === 16. BREADCRUMBS === */
.breadcrumb { margin-bottom: var(--space-6); }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; list-style: none;
  padding: 0; margin: 0; gap: var(--space-1); font-size: var(--text-sm);
}
.breadcrumb-item { display: flex; align-items: center; gap: var(--space-1); color: var(--text-tertiary); }
.breadcrumb-item:not(:last-child)::after { content: "/"; color: var(--text-tertiary); opacity: 0.4; margin-left: var(--space-1); }
.breadcrumb-item a { color: var(--brand-primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-primary); font-weight: var(--font-medium); }

/* Step indicator.
   Markup: <nav aria-label="..."><ol class="breadcrumb-steps">
             <li class="breadcrumb-step completed|active"
                 aria-current="step" (on active only)>
               <span class="breadcrumb-step-number">N</span>
               <span>Label</span>
             </li>
           </ol></nav>
   When used as <ol>, the default list-style is reset below. The element
   also accepts <div> children for legacy callers — both render the same. */
.breadcrumb-steps {
  display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6);
  list-style: none; padding: 0; margin-top: 0;
}
.breadcrumb-step {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-tertiary); font-size: var(--text-sm);
}
.breadcrumb-step-number {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-hi); color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  border: 1px solid var(--border-strong);
}
.breadcrumb-step.active .breadcrumb-step-number {
  background: var(--brand-primary); color: var(--text-inverse); border-color: var(--brand-primary);
}
.breadcrumb-step.active { color: var(--text-primary); font-weight: var(--font-medium); }
.breadcrumb-step.completed .breadcrumb-step-number {
  background: var(--success-600); color: var(--text-inverse); border-color: var(--success-600);
}
/* Render a check mark inside the completed-step circle. Replaces the
   previously-empty <span> contents that just showed a green disk. */
.breadcrumb-step.completed .breadcrumb-step-number::before {
  content: "\2713";  /* ✓ */
  font-size: 14px;
  line-height: 1;
}
.breadcrumb-step.completed .breadcrumb-step-number { font-size: 0; }
.breadcrumb-step:not(:last-child)::after {
  content: ""; width: 40px; height: 1px; background: var(--border-strong); margin-left: var(--space-2);
}
.breadcrumb-step.completed:not(:last-child)::after { background: var(--success-600); }
/* Clickable completed step — surfaced via button or anchor inside the <li>.
   Looks like the static step but with hover affordance. */
.breadcrumb-step-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; text-decoration: none;
}
.breadcrumb-step-link:hover:not(:disabled) .breadcrumb-step-number {
  filter: brightness(1.15);
}
.breadcrumb-step-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
/* Disabled (= not-yet-completed) step keeps its visual identity but is
   not interactive. Don't dim with opacity — the step is still meaningful
   information, just not a navigation target right now. */
.breadcrumb-step-link:disabled {
  cursor: default;
}
/* Phone-mode step indicator: compact single-line "Step N of 3 · Label"
   instead of the multi-circle pipe. Saves ~80px of vertical space and
   reads naturally on a 390px-wide screen. Pulls the step number from
   data-step-num on the <li> — CSS counter() doesn't work here because
   counter-increment is suppressed on display:none elements, which
   would always count "Step 1" no matter which step is .active. */
@media (max-width: 600px) {
  .breadcrumb-steps {
    display: block;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    gap: 0;
  }
  .breadcrumb-step {
    display: none;
    font-size: var(--text-sm);
    color: var(--text-primary);
  }
  /* Active step (entry pages: form, inventory_form, review) */
  .breadcrumb-step.active { display: block; font-weight: var(--font-medium); }
  /* Submitted page has no .active — every step is .completed. Fall back
     to the last completed step so the user still sees their position. */
  .breadcrumb-steps:not(:has(.active)) .breadcrumb-step.completed:last-child {
    display: block;
  }
  .breadcrumb-step.active::before {
    content: "Step " attr(data-step-num) " of 3 \00B7 ";
    color: var(--text-secondary);
    font-weight: normal;
  }
  .breadcrumb-steps:not(:has(.active)) .breadcrumb-step.completed:last-child::before {
    content: "\2713  Step " attr(data-step-num) " of 3 \00B7 ";
    color: var(--success-600);
    font-weight: normal;
  }
  .breadcrumb-step .breadcrumb-step-number { display: none; }
  .breadcrumb-step .breadcrumb-step-link {
    display: inline;
    color: inherit;
    padding: 0;
  }
  .breadcrumb-step:not(:last-child)::after { display: none; }
}

/* === 17. EMPTY STATES === */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-tertiary); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: var(--space-4); opacity: 0.3; }
.empty-state-title {
  font-size: var(--text-xl); font-weight: var(--font-semibold);
  color: var(--text-primary); margin: 0 0 var(--space-2) 0;
}
.empty-state-description {
  font-size: var(--text-sm); color: var(--text-secondary);
  margin: 0 0 var(--space-6) 0; max-width: 380px; margin-left: auto; margin-right: auto;
}
.empty-state-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.empty-state-inline { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-tertiary); }
.empty-state-inline .empty-icon { font-size: 2rem; margin-bottom: var(--space-2); opacity: 0.3; }

/* === 18. PAGE HEADER === */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4);
}
.page-header h1, .page-header h2 { margin: 0; color: var(--text-primary); }
.page-header-actions { display: flex; gap: var(--space-2); align-items: center; }

/* === 19. FOOTER === */
.footer {
  text-align: center; color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  padding: var(--space-8) var(--space-4); margin-top: auto;
  border-top: 1px solid var(--border-color);
  background: var(--surface);
  transition: background var(--transition-slow);
}

/* === 20. UTILITIES === */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary, .muted { color: var(--text-tertiary); }
.text-success   { color: var(--success-600); }
.text-warning   { color: var(--warning-600); }
.text-danger    { color: var(--danger-600); }
.bg-page        { background: var(--bg-page); }
.bg-card        { background: var(--bg-card); }
.bg-success     { background: var(--success-50); }
.bg-warning     { background: var(--warning-50); }
.bg-danger      { background: var(--danger-50); }
.hidden, .is-hidden { display: none !important; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.nowrap   { white-space: nowrap; }
.break    { word-break: break-word; overflow-wrap: anywhere; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono     { font-family: var(--font-mono); }
.notes    { max-width: 28ch; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.mt-0 { margin-top: 0; }      .mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }   .mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.p-0 { padding: 0; } .p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); }
.row-actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.link {
  background: none; border: none; padding: 0; color: var(--brand-primary);
  cursor: pointer; text-decoration: underline; font: inherit;
  min-height: auto; min-width: auto;
}
.link:hover { text-decoration: none; }

/* === 21. EMPLOYEE INTERFACE === */
.employee-topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  padding: var(--space-3) var(--space-4);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.employee-topbar .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 900px; margin: 0 auto;
}
.employee-topbar .logo-wrap { display: flex; align-items: center; gap: var(--space-3); }
.employee-topbar .logo { height: 32px; width: 64px; border-radius: var(--radius-md); }
.employee-topbar .brand { font-size: 13px; }
.employee-container { max-width: 900px; margin: 0 auto; padding: var(--space-4); }
@media (min-width: 768px) { .employee-container { padding: var(--space-6); } }

/* Phone-mode topbar: collapse the bug-report button to icon-only and
   tighten paddings/gaps so the theme toggle stays on screen. */
@media (max-width: 600px) {
  .employee-topbar { padding: var(--space-2) var(--space-3); }
  .employee-topbar .header-inner { gap: var(--space-2); }
  .employee-topbar .logo-wrap { gap: var(--space-2); }
  .employee-topbar .logo { width: 48px; height: 24px; }
  .employee-topbar #bugReportTrigger .bug-label { display: none; }
  .employee-topbar #bugReportTrigger {
    padding: var(--space-1) var(--space-2);
    min-width: 36px;
  }
}

/* === 22. SCROLLBAR (webkit) === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--surface-hi2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* === 23. PRINT === */
@media print {
  .topbar, .employee-topbar, .hamburger-btn, .nav-menu, .nav-overlay,
  .toast-container, .skip-link, .footer, .theme-toggle { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a { color: black; text-decoration: underline; }
  .btn, .btn-primary, .btn-secondary, .btn-danger { display: none; }
}

/* === 24. DIAGRAM EMBEDS === */
.embedded-diagram {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4); margin: var(--space-6) 0;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.embedded-diagram-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.embedded-diagram-title { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.embedded-diagram-svg svg { max-width: 100%; height: auto; display: block; }
.broken-embed {
  color: var(--danger-600); font-size: var(--text-sm);
  padding: 0.5rem 1rem; background: var(--danger-50); border-radius: 4px;
}

/* === 25. MODALS (uses native <dialog>) === */
/* Native dialog gives us focus trap, Esc-close, ARIA dialog role, and ::backdrop
   for free. We layer Forge styling on top and add a thin JS wrapper for
   backdrop-click-to-close + open/close helpers. */

dialog.modal {
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  width: min(560px, 92vw);
  max-height: 92vh;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

dialog.modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
}

dialog.modal[open] {
  animation: modal-in 140ms ease-out;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  min-width: auto;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  max-height: calc(92vh - 140px);
}

.modal-body > *:first-child { margin-top: 0; }
.modal-body > *:last-child  { margin-bottom: 0; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-color);
  background: var(--surface);
}

.modal-footer .footer-spacer { margin-right: auto; }

@media (max-width: 560px) {
  dialog.modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .modal-body { max-height: calc(100vh - 140px); }
}

/* === 26. ICON SYSTEM (Lucide sprite) === */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-xl { width: 1.75em; height: 1.75em; }
.icon-2xl { width: 2.5em; height: 2.5em; }

/* Nav links: keep the existing layout but normalize the icon slot */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.nav-icon .icon { width: 1.125em; height: 1.125em; }
.nav-menu a:hover .nav-icon,
.nav-menu a.active .nav-icon { color: var(--brand-primary); }

/* Active link: tint the text and add a subtle leading accent. */
.nav-menu a.active {
  color: var(--brand-primary);
  background: var(--brand-dim);
  box-shadow: inset 3px 0 0 var(--brand-primary);
  font-weight: var(--font-semibold);
}

/* === 27. PAGE HEADER (breadcrumb + title + primary action) === */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.page-header-text { min-width: 0; }
.page-header-title {
  margin: var(--space-2) 0 var(--space-1) 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.page-header-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Breadcrumb refinements (existing .breadcrumb stays in section 18 if present;
   these are admin-page tweaks layered on top.) */
.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.page-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}
.page-breadcrumb a:hover { color: var(--text-primary); background: var(--bg-hover); }
.page-breadcrumb .separator {
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
}
.page-breadcrumb .separator .icon { width: 12px; height: 12px; }
.page-breadcrumb .current { color: var(--text-secondary); }

/* === 28. PERSISTENT LEFT RAIL (desktop) === */
/* At >=1024px the nav-menu becomes a persistent left rail. The hamburger
   button is hidden, the overlay is suppressed, and the body padding-left
   reserves the rail's width. The nav-brand block sits at the top of the
   rail (absolute-positioned inside .nav-menu) and replaces the topbar
   brand on desktop. */

:root { --nav-rail-width: 220px; }

/* Brand block inside the nav-menu. Anchored to the top via absolute
   positioning so it overlays the existing nav padding-top:52px reserved
   for the topbar. Visible whenever the .nav-menu itself is visible
   (drawer open on mobile, always on desktop). */
/* Scoped to .nav-menu .nav-brand for higher specificity than .nav-menu a,
   which would otherwise clobber the padding / hover styling. */
.nav-menu .nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52px;
  padding: 0 var(--space-4);
  background: var(--nav-panel-bg);
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: inherit;
  z-index: 2;
  transition: background var(--transition-fast);
}
.nav-menu .nav-brand:hover {
  background: var(--bg-hover);
  text-decoration: none;
}
.nav-menu .nav-brand:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.nav-brand .logo {
  height: 24px;
  width: 48px;
  border-radius: var(--radius-md);
  object-fit: contain;
  opacity: 0.9;
}
.nav-brand .brand {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0;
}

@media (min-width: 1024px) {
  /* Reserve space for the rail; topbar shifts right with body content */
  body { padding-left: var(--nav-rail-width); }

  /* Persistent rail — visible, no transform, no transition */
  .nav-menu {
    width: var(--nav-rail-width);
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
    border-right: 1px solid var(--border-color);
  }

  /* Tighter section header padding so headers read as dividers */
  .nav-menu .nav-section {
    padding-top: var(--space-3);
    padding-bottom: var(--space-2);
  }

  /* Hamburger + overlay are redundant on desktop */
  .hamburger-btn,
  .nav-overlay { display: none !important; }

  /* Hide topbar's redundant brand (rail has its own) */
  .topbar .header-right .logo-wrap { display: none; }
}

/* === 29. DATA TABLE (sortable, sticky header, density) === */
/* Used with the data_table Jinja macro + static/js/data-table.js.
   Wraps an ordinary .table with sticky thead, sort buttons, and density toggle.
   .table-compact already exists; we add .table-comfortable as the default. */

.data-table-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.data-table-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Density segmented toggle */
.density-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.density-btn {
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.density-btn + .density-btn { border-left: 1px solid var(--border-color); }
.density-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.density-btn.active {
  background: var(--brand-dim);
  color: var(--brand-primary);
}
/* In light mode --brand-dim is only 8% amber and washes out on white. */
[data-theme="light"] .density-btn.active {
  background: var(--brand-mid);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}
.density-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* Scrolling wrapper with sticky thead */
.data-table-wrap .table-scroll {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.data-table thead { position: sticky; top: 0; z-index: 1; }
.data-table thead tr { background: var(--surface-hi); }

/* Light mode: --surface-hi equals --bg-page (both #f5f4f1), so the thead
   blends into body rows. Use the darker step (--surface-hi2) instead. */
[data-theme="light"] .table thead,
[data-theme="light"] .styled-table thead,
[data-theme="light"] .data-table thead tr { background: var(--surface-hi2); }

/* Sortable headers — wrap label in a button for keyboard support */
.data-table th[data-sortable] { padding: 0; }
.data-table th[data-sortable] .sort-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.data-table th[data-sortable] .sort-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.data-table th[data-sortable] .sort-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.data-table .sort-arrow { display: inline-flex; align-items: center; }
.data-table .sort-arrow .icon { width: 12px; height: 12px; }
.data-table .sort-arrow-active { display: none; transition: transform var(--transition-fast); }
.data-table th[data-sort-dir="asc"]  .sort-arrow-idle { display: none; }
.data-table th[data-sort-dir="asc"]  .sort-arrow-active { display: inline-flex; transform: rotate(180deg); color: var(--brand-primary); }
.data-table th[data-sort-dir="desc"] .sort-arrow-idle { display: none; }
.data-table th[data-sort-dir="desc"] .sort-arrow-active { display: inline-flex; color: var(--brand-primary); }
.data-table th[aria-sort] { color: var(--brand-primary); }

/* Density modifiers */
.table-comfortable th, .table-comfortable td { padding: var(--space-3) var(--space-4); }
.table-comfortable th[data-sortable] { padding: 0; }   /* button supplies the padding */
.table-comfortable th[data-sortable] .sort-btn { padding: var(--space-3) var(--space-4); }
.table-compact th[data-sortable] { padding: 0; }
.table-compact th[data-sortable] .sort-btn { padding: var(--space-2) var(--space-3); }

/* Column alignment helpers (paired with col.align in the macro) */
.ta-left   { text-align: left;   }
.ta-center { text-align: center; }
.ta-right  { text-align: right;  }
.data-table td.ta-right,
.data-table th.ta-right .sort-btn { justify-content: flex-end; text-align: right; }
.data-table td.ta-center,
.data-table th.ta-center .sort-btn { justify-content: center; text-align: center; }

/* === 30. STICKY PAGE-ACTION BAR === */
/* Use for long forms (planner, config wizards) where the primary action
   would otherwise scroll off-screen. Apply at the bottom of the form
   container as the last child. */

.page-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-6) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.page-action-bar .page-action-summary {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .page-action-bar {
    flex-wrap: wrap;
  }
  .page-action-bar .page-action-summary {
    width: 100%;
    margin-bottom: var(--space-2);
  }
}

/* === 31. INLINE VALIDATION STATE === */
/* Applied by static/js/forms.js when a constraint is unmet. The style is
   subtle — server-side validation still owns the canonical message; this is
   just an early visual signal to the user. */

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-600) 18%, transparent);
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  outline-color: var(--danger-600);
}

/* Inline error message — appended by forms.js after invalid fields.
   Empty span collapses (no spacing footprint when no message). */
.field-error {
  display: block;
  min-height: 1.25em;
  margin-top: 4px;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--danger-600);
}
.field-error:empty { display: none; }

/* === 32. LOADING STATES === */
/* Buttons in aria-busy state get a spinner overlay. Apply when a form is
   submitting; static/js/forms.js does this automatically when the form has
   data-forge-busy. */

@keyframes forge-spin { to { transform: rotate(360deg); } }

button[aria-busy="true"],
.btn[aria-busy="true"],
.btn-primary[aria-busy="true"],
.btn-secondary[aria-busy="true"],
.btn-outline[aria-busy="true"],
.btn-danger[aria-busy="true"],
.btn-ghost[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
}
button[aria-busy="true"]::after,
.btn[aria-busy="true"]::after,
.btn-primary[aria-busy="true"]::after,
.btn-secondary[aria-busy="true"]::after,
.btn-outline[aria-busy="true"]::after,
.btn-danger[aria-busy="true"]::after,
.btn-ghost[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: forge-spin 0.7s linear infinite;
  color: var(--text-inverse);
}
/* Light buttons need a darker spinner */
.btn-secondary[aria-busy="true"]::after,
.btn-outline[aria-busy="true"]::after,
.btn-ghost[aria-busy="true"]::after {
  color: var(--text-primary);
}

/* Skeleton row for async-loading tables */
@keyframes forge-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-row td { padding: var(--space-3) var(--space-4); }
.skeleton-cell {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
  background-color: var(--surface-hi);
  background-image: linear-gradient(90deg,
    var(--surface-hi) 0%,
    var(--bg-hover) 50%,
    var(--surface-hi) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: forge-shimmer 1.4s ease-in-out infinite;
}
.skeleton-cell-sm { width: 40%; }
.skeleton-cell-md { width: 60%; }
.skeleton-cell-lg { width: 90%; }

/* === 33. COMMAND PALETTE === */
/* Top-aligned modal variant. Reuses .modal backdrop styling. */

.command-palette {
  /* Override .modal centering — palette sits near the top */
  top: 12vh;
  margin-top: 0;
  margin-bottom: auto;
  width: min(640px, 92vw);
  max-height: 70vh;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
/* Only flex when the dialog is open — never override the native hidden state. */
.command-palette[open] { display: flex; }

.palette-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-5);
  outline: none;
  border-bottom: 1px solid var(--border-color);
}
.palette-input::placeholder { color: var(--text-tertiary); }

.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
  min-height: 200px;
  max-height: 50vh;
}

.palette-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-5) var(--space-1);
}

.palette-group { display: flex; flex-direction: column; }

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: var(--space-2) var(--space-5);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.palette-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.palette-item.selected {
  background: var(--brand-dim);
  color: var(--text-primary);
  outline: 1px solid var(--brand-mid);
  outline-offset: -1px;
}
.palette-item .icon { width: 16px; height: 16px; color: var(--brand-primary); flex-shrink: 0; }
.palette-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.palette-loading {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.palette-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--border-color);
  background: var(--surface-hi);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.palette-footer .palette-spacer { flex: 1; }
.palette-footer kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--text-secondary);
}

/* Shortcut help dialog */
.shortcut-help {
  width: min(420px, 92vw);
}
.shortcut-table {
  width: 100%;
  border-collapse: collapse;
}
.shortcut-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.shortcut-table td:first-child {
  width: 40%;
  white-space: nowrap;
}
.shortcut-table tr:last-child td { border-bottom: none; }
.shortcut-table kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-hi);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--text-primary);
}

/* === 34. ONBOARDING TOUR === */
/* Coachmark overlay built by static/js/onboarding.js. */

.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9000;
  pointer-events: auto;
}
/* "Cutout" highlights the target element by drawing a bright outline */
.onboarding-cutout {
  position: fixed;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  outline: 2px solid var(--brand-primary);
  outline-offset: 0;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
  z-index: 1; /* above backdrop's own background */
}

.onboarding-popover {
  position: fixed;
  width: 360px;
  max-width: 92vw;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  z-index: 9100;
  transition: top 0.25s ease, left 0.25s ease;
}

.onboarding-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.onboarding-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.onboarding-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.onboarding-body kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-hi);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--text-primary);
}
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* === 35. PALETTE TRIGGER (topbar pill) === */
/* Visible entry point for the command palette. Tablet-discoverable.
   Acts as a search pill on desktop, collapses to icon-only at narrow widths. */

.palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-hi);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px 6px 8px;
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.palette-trigger:hover {
  background: var(--bg-hover);
  border-color: var(--brand-primary);
  color: var(--text-primary);
}
.palette-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.palette-trigger-icon { display: inline-flex; }
.palette-trigger-icon .icon { width: 14px; height: 14px; color: var(--text-tertiary); }
.palette-trigger:hover .palette-trigger-icon .icon { color: var(--brand-primary); }
.palette-trigger-label { font-size: 11px; }
.palette-trigger-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-color);
  margin-left: 2px;
}
.palette-trigger-kbd kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Tablet: hide the label and kbd hint, keep just the icon (still tappable) */
@media (max-width: 900px) {
  .palette-trigger-label,
  .palette-trigger-kbd { display: none; }
  .palette-trigger { padding: 6px 8px; }
}

/* === 36. ROW & STACK UTILITIES === */
/* Common flex patterns extracted from ~300 inline style="display:flex;..."
   attributes. The .row shorthand bundles align-items: center because that's
   the dominant default; opt out with .items-start / .items-end. */

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.row-tight { display: flex; align-items: center; gap: var(--space-2); }
.row-wide  { display: flex; align-items: center; gap: var(--space-4); }
.row-wrap  { flex-wrap: wrap; }
.row-end   { justify-content: flex-end; }
.row-between { justify-content: space-between; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stack-tight { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-wide  { display: flex; flex-direction: column; gap: var(--space-4); }

/* Text size utilities (token-based) — paired with existing color utilities */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }

/* No-margin reset, common for inline-form siblings */
.m-0 { margin: 0; }

/* Auto-margin spacing (push apart in a flex row) */
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* === 37. MANAGEMENT PLANNING TABS === */
/* Shared tab strip rendered by the management_tabs() macro across all
   planning surfaces (daily, quarterly, history). Mirrors the visual of
   .dashboard-tabs so managers see the same nav pattern everywhere. */

.management-tabs {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--space-6);
  gap: 0;
}

.mgmt-tab {
  padding: 0.625rem var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.mgmt-tab:hover {
  color: var(--text-primary);
}

.mgmt-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}