/* ─────────────────────────────────────────────
   1. CSS VARIABLES
   Design tokens for the "Industrial Terminal"
   aesthetic: dark, precise, amber accents.
   Change values here to retheme the whole app.
───────────────────────────────────────────── */
:root {
  /* Background layers (darkest → lightest) */
  --bg0: #080a0e;
  --bg1: #0d1017;
  --bg2: #121820;
  --bg3: #171f2a;
  --bg4: #1d2535;

  /* Border lines */
  --line:  #1e2d40;
  --line2: #263548;

  /* Text hierarchy. Layer 18: brightened all three levels for better
     contrast on the --bg1/--bg2 backgrounds. Previous values were
     aesthetically correct for the "industrial terminal" look but
     text3 in particular was routinely hard to read on mobile in
     bright sunlight. New values keep the cool-grey tone while
     bringing legibility in line with WCAG AA contrast ratios. */
  --text:  #dbe4ef;  /* was #c8d4e0 — +8% luminance */
  --text1: #dbe4ef;  /* alias; some modules use --text1 */
  --text2: #8196ac;  /* was #6b8299 — pops more against --bg2 */
  --text3: #526c86;  /* was #3a5068 — was routinely unreadable */

  /* Brand accent: amber */
  --amber:      #f5a623;
  --amber2:     #e8941a;
  --amber-dim:  rgba(245,166,35,0.10);
  --amber-line: rgba(245,166,35,0.25);
  --amber-glow: rgba(245,166,35,0.35);  /* for text-shadow / box-shadow glow */

  /* Semantic colors. Layer 18 softens --green slightly — the
     previous #00e096 was WCAG-great but visually piercing on dark
     backgrounds, especially for the many small success badges and
     dot indicators. New value keeps the "success" read while
     reducing eye-strain during prolonged use. */
  --blue:       #2196f3;
  --blue-dim:   rgba(33,150,243,0.10);
  --green:      #2dd4a0;  /* was #00e096 — softer saturation, same hue */
  --green-dim:  rgba(45,212,160,0.10);
  --yellow:     #ffd740;
  --yellow-dim: rgba(255,215,64,0.08);
  --red:        #ff4444;
  --red-dim:    rgba(255,68,68,0.08);
  --orange:     #ff8c42;
  --orange-dim: rgba(255,140,66,0.08);
  --cyan:       #00d4ff;
  --purple:     #a78bfa;
  --purple-dim: rgba(167,139,250,0.10);

  /* Layer 18: dedicated focus ring for keyboard accessibility.
     Used by the :focus-visible rules below so tab navigation is
     visually obvious without turning every mouse click into an
     ugly outline. */
  --focus-ring: rgba(245,166,35,0.55);

  /* Typography */
  --mono: 'Source Code Pro', monospace;
  --head: 'Rajdhani', sans-serif;
  --body: 'Source Sans 3', sans-serif;

  /* Radii */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Spacing scale (4px base) — use these instead of arbitrary px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Elevation / shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.7);

  /* Aliases — keep legacy var names resolving to canonical brand
     so any stray var(--accent) / var(--bg) references stay on-brand
     instead of falling back to off-palette literals. */
  --accent:     var(--amber);
  --accent-dim: var(--amber-dim);
  --bg:         var(--bg0);

  /* Motion */
  --t-fast: 0.15s;
  --t-med:  0.25s;
}

/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   3. SCROLLBAR
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

/* ─────────────────────────────────────────────
   4. LOGIN PAGE
   Full-screen gate. Hidden after auth succeeds.
   TODO: Replace Auth.login() with real API call.
───────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0;
  background: var(--bg0);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` keeps the card top-aligned when it is taller than the
     viewport, so nothing gets clipped above the scroll area. */
  justify-content: safe center;
  overflow-y: auto;
  /* Prevent scroll chaining — swipes inside the auth screen stay inside
     the auth screen and do not bleed into the page behind it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}
/* Lock body scroll while the auth overlay is open. The class is toggled
   from auth.js on _applySession() / logout() and is present by default
   in shell.html (login screen visible on first paint). */
body.auth-open { overflow: hidden; }
.login-card {
  /* Round 100: elevated auth card — gradient surface, softer corners,
     layered shadow (ambient + rim), subtle entrance animation.
     Uses theme tokens throughout so the rim glow + subtle highlight
     re-tint automatically when the user switches themes. */
  background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 40px 44px;
  width: 100%; max-width: 420px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px var(--amber-dim),
    inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative;
  z-index: 1;
  animation: login-card-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes login-card-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* ── Canonical brand wordmark ─────────────────────────────────────
   The ArkitektHQ brand is a text wordmark (no image asset).
   Both `.logo` (topbar) and `.login-logo` (auth card) inherit
   from this single source of truth. To restyle the brand globally,
   change the rule below — do not introduce a new logo class. */
.logo,
.login-logo {
  font-family: var(--head);
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  cursor: default;
}
.logo span,
.login-logo span { color: var(--text3); font-weight: 400; }

.login-logo {
  font-size: 32px;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: var(--space-1);
}
.login-subtitle {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); text-align: center;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 32px;
}
.login-divider { height: 1px; background: var(--line); margin: 20px 0 24px; }
/* All auth-card measurements use rem so the layout scales cleanly
   when the user has increased their browser's default font size. */
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block; font-family: var(--mono);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 0.375rem;
  line-height: 1.3;
}
.login-field input {
  width: 100%; background: var(--bg0);
  border: 1px solid var(--line2); color: var(--text);
  padding: 0.75rem 0.875rem; border-radius: 6px;
  font-family: var(--body); font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-sizing: border-box;
}
.login-field input:hover:not(:focus) { border-color: var(--line2); background: var(--bg1); }
/* Round 100: focus ring on amber for consistency with the rest of
   the app — a 3 px soft glow + border color shift, instead of a
   bare 1 px color change that's easy to miss. */
.login-field input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
  background: var(--bg1);
}
.login-field input::placeholder { color: var(--text3); }

/* Select dropdowns in auth forms — match text input appearance */
.login-field select {
  width: 100%; background: var(--bg0);
  border: 1px solid var(--line2); color: var(--text);
  padding: 0.625rem 0.75rem; padding-right: 2rem;
  border-radius: var(--radius);
  font-family: var(--body); font-size: 0.875rem;
  outline: none; transition: border-color 0.15s;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23f5a623'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.625rem 0.375rem;
}
.login-field select:focus { border-color: var(--amber); }
.login-field select option { background: var(--bg2); color: var(--text); }

.login-btn {
  width: 100%; background: var(--amber);
  border: 1px solid var(--amber); color: #000;
  padding: 13px; border-radius: 6px;
  font-family: var(--head); font-size: 15px;
  font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer;
  margin-top: 8px;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
  box-shadow: 0 2px 8px var(--amber-line);
}
.login-btn:hover {
  background: var(--amber2);
  box-shadow: 0 4px 16px var(--amber-glow);
  transform: translateY(-1px);
}
.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px var(--amber-line);
}
.login-error {
  color: var(--red); font-family: var(--mono);
  font-size: 11px; text-align: center;
  margin-top: 12px; min-height: 16px;
}
.login-hint {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); text-align: center;
  line-height: 1.6; border-top: 1px solid var(--line);
  padding-top: 16px; margin-top: 20px;
}
.login-hint strong { color: var(--amber); }

/* ── DEMO CTA on login screen ─────────────────────────────────────── */
.demo-cta { margin-top: 18px; }
.demo-cta-divider {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 9px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 6px 0 14px;
}
.demo-cta-divider::before, .demo-cta-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.demo-btn {
  display: block; width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.demo-btn:hover {
  background: var(--amber);
  color: var(--bg0);
}
.demo-cta-note {
  font-family: var(--mono); font-size: 9px;
  color: var(--text3); text-align: center;
  line-height: 1.5; margin: 10px 0 0;
}

/* ── DEMO MODE banner ─────────────────────────────────────────────── */
.demo-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--amber-dim);
  border-bottom: 1px solid var(--amber-line);
  font-family: var(--mono); font-size: 10px;
  color: var(--amber); letter-spacing: 0.5px;
}
.demo-banner-icon {
  color: var(--amber); font-size: 14px; line-height: 1;
  animation: demo-pulse 2s ease-in-out infinite;
}
@keyframes demo-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.demo-banner strong { color: var(--amber); text-transform: uppercase; letter-spacing: 1px; }
.demo-banner-text { color: var(--text2); flex: 1; }
.demo-banner-exit {
  background: transparent;
  border: 1px solid var(--amber-line);
  color: var(--amber);
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 1px;
  padding: var(--space-1) var(--space-3); cursor: pointer;
  border-radius: var(--radius-sm);
}
.demo-banner-exit:hover {
  background: var(--amber);
  color: var(--bg0);
}
.login-badge {
  display: table; margin: 0 auto 28px;
  background: var(--amber-dim); border: 1px solid var(--amber-line);
  border-radius: 2px; padding: 3px 8px;
  font-family: var(--mono); font-size: 9px;
  color: var(--amber); letter-spacing: 0.5px; text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   4b. AUTH SCREEN VARIANTS
   Sign In / Sign Up / Forgot Password views.
   All three share #login-screen and .login-card.
   Views are toggled via AuthScreen.showView(name).

   STRUCTURE:
     #login-screen              — full-viewport overlay
       .login-card              — centred card (max 420px)
         .auth-brand            — logo + subtitle (all views)
         .auth-view#auth-view-* — one div per view, display:none when inactive
           .auth-view-header    — per-view title + subtitle
           .login-field         — shared input rows (from section 4)
           .auth-field-row      — two-column input pair (pw + confirm)
           .auth-forgot-row     — right-aligned "Forgot password?" link
           .auth-switch-row     — "Already have an account? Sign in" footer
           .auth-terms-row      — T&C checkbox row (signup only)
           .auth-strength-bar   — password strength indicator
           .auth-success-msg    — shown after forgot-pw submit
         .auth-footer           — pre-alpha badge, all views
───────────────────────────────────────────── */

/* Card overrides for multi-view layout — rem-based so the card scales
   with the user's root font size (accessibility). */
.login-card {
  padding: 2.25rem 2.5rem 1.75rem;
  max-width: 26.25rem;
}

/* Brand block — logo + subtitle at top of card */
.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}
.auth-brand .login-subtitle {
  margin-bottom: 0;
}

/* Per-view header: title + subdescription */
.auth-view-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.auth-view-title {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 3px;
}
.auth-view-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.5px;
}

/* Required field asterisk */
.auth-req { color: var(--amber); margin-left: 2px; }

/* Back navigation arrow — signup / forgot views */
.auth-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px;
  color: var(--amber); cursor: pointer;
  letter-spacing: 0.3px; margin-bottom: 10px;
  transition: color 0.15s;
}
.auth-back-btn:hover { color: var(--amber2); text-decoration: underline; }

/* Clickable link text (view switchers, forgot pw) */
.auth-link {
  color: var(--amber);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  transition: color 0.15s;
}
.auth-link:hover { color: var(--amber2); text-decoration: underline; }

/* "Forgot password?" — right-aligned above the button */
.auth-forgot-row {
  text-align: right;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* "New here? Create account" — centred below button */
.auth-switch-row {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  margin-top: 18px;
  letter-spacing: 0.3px;
}
.auth-switch-row .auth-link { margin-left: 4px; }

/* Two-column field pair (password + confirm, industry + province).
   Fluid by design — each column wants >= 9rem. On a narrower viewport
   or when the root font size scales up, the grid collapses to a single
   column instead of forcing the content to overflow. Label min-height
   (in em) absorbs 2-line wraps when a browser min-font-size setting
   bumps small labels past what the column can hold — so the inputs
   stay horizontally aligned in every case. */
.auth-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}
.auth-field-row .login-field label {
  min-height: 2.4em;   /* em, not rem — scales with the label's own font */
  line-height: 1.2;
}

/* Terms & conditions checkbox row */
.auth-terms-row {
  margin-bottom: 16px;
}
.auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  line-height: 1.6;
  letter-spacing: 0.3px;
}
.auth-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--amber);
  flex-shrink: 0;
}

/* Password strength bar */
.auth-strength-bar {
  height: 3px;
  background: var(--line2);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.25s, background 0.25s;
}
.auth-strength-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 3px;
  min-height: 12px;
  color: var(--text3);
}

/* Success state (forgot password confirmation) */
.auth-success-msg {
  text-align: center;
  padding: 20px 0 8px;
}
.auth-success-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.auth-success-title {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.auth-success-body {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  line-height: 1.7;
  letter-spacing: 0.2px;
}

/* Shared footer (pre-alpha badge) */
.auth-footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ── Mobile — auth screen ─────────────────── */
@media (max-width: 480px) {
  .login-card {
    padding: 28px 20px 22px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    max-width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #login-screen {
    align-items: flex-start;
  }
  .auth-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .auth-brand .login-logo {
    font-size: 26px;
  }
}


   Topbar is sticky. Tabs switch active panel.
   See TabModule in JS for switching logic.
───────────────────────────────────────────── */
#app-shell { display: none; }

.topbar {
  height: 52px; background: var(--bg1);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 20px; gap: 16px;
  position: sticky; top: 0; z-index: 200;
}
.logo {
  /* Wordmark base (font/color/case) inherited from shared rule
     in section 4 — keep only topbar-specific sizing here. */
  font-size: 22px;
  letter-spacing: 2px;
  flex-shrink: 0;
}
.topbar-sep { width: 1px; height: 24px; background: var(--line); flex-shrink: 0; }
.topbar-meta { font-family: var(--mono); font-size: 10px; color: var(--text3); white-space: nowrap; }
.topbar-meta strong { color: var(--amber); }
.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Tab bar */
.tabs {
  background: var(--bg1); border-bottom: 1px solid var(--line);
  display: flex; padding: 0 20px; gap: 2px; overflow-x: auto;
}
.tab {
  font-family: var(--head); font-size: 13px;
  font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3);
  padding: 12px 18px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.tab:hover { color: var(--text2); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab-badge {
  background: var(--amber-dim); color: var(--amber);
  font-family: var(--mono); font-size: 9px;
  padding: 1px 5px; border-radius: 2px;
}

/* ─────────────────────────────────────────────
   6. USER MENU DROPDOWN
   Clicking the user pill opens a dropdown with
   account info, role badge, and sign-out button.
   TODO: Wire account settings to a real settings page.
───────────────────────────────────────────── */
.user-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 4px 10px;
  font-family: var(--mono); font-size: 10px;
  color: var(--text2); cursor: pointer;
  transition: border-color 0.15s; position: relative;
}
.user-pill:hover { border-color: var(--amber); color: var(--amber); }
.user-avatar {
  width: 20px; height: 20px;
  background: var(--amber-dim); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--amber); font-weight: 700;
}
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: 6px; min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  z-index: 300; display: none;
  overflow: hidden;
}
.user-menu.open { display: block; }
.user-menu-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.user-menu-name {
  font-family: var(--head); font-size: 15px;
  font-weight: 600; color: var(--text);
}
.user-menu-email {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); margin-top: 2px;
}
/* ── Account type badge (placeholder until real roles are wired) ── */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 2px 8px;
  border-radius: 2px; font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.role-badge.owner   { background: var(--amber-dim);  color: var(--amber);  border: 1px solid var(--amber-line); }
.role-badge.admin   { background: var(--blue-dim);    color: var(--blue);   border: 1px solid rgba(33,150,243,0.25); }
.role-badge.operator{ background: var(--green-dim);   color: var(--green);  border: 1px solid rgba(0,224,150,0.25); }
.role-badge.viewer  { background: var(--bg4);         color: var(--text3);  border: 1px solid var(--line2); }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13px; color: var(--text2);
  cursor: pointer; transition: background 0.1s; border: none;
  background: none; width: 100%; text-align: left;
  font-family: var(--body);
}
.user-menu-item:hover { background: var(--bg4); color: var(--text); }
.user-menu-item.danger:hover { background: var(--red-dim); color: var(--red); }
.user-menu-divider { height: 1px; background: var(--line); margin: 4px 0; }
.user-menu-icon { font-size: 13px; width: 16px; text-align: center; }

/* ─────────────────────────────────────────────
   7. PANELS & TOOLBAR
   Each tab's main content area.
   .panel hidden by default; .panel.active shows.
───────────────────────────────────────────── */
.panel { display: none; }
.panel.active { display: block; }
.toolbar {
  padding: 12px 20px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.search-box { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.search-box input {
  width: 100%; background: var(--bg0);
  border: 1px solid var(--line2); color: var(--text);
  padding: 7px 10px 7px 32px; border-radius: var(--radius);
  font-family: var(--body); font-size: 13px; outline: none;
}
.search-box input:focus { border-color: var(--amber); }
.search-box input::placeholder { color: var(--text3); }
.search-icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text3);
  font-size: 13px; pointer-events: none;
}
select.filter {
  background: var(--bg0); border: 1px solid var(--line2);
  color: var(--text); padding: 7px 10px;
  border-radius: var(--radius); font-family: var(--body);
  font-size: 13px; outline: none; cursor: pointer;
}
select.filter:focus { border-color: var(--amber); }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }

/* ─────────────────────────────────────────────
   8. BUTTONS
   .btn        — ghost button (default)
   .btn.primary— filled amber CTA
   .btn.danger — red destructive action
   .btn.success— green confirm action
   .btn.sm     — compact variant
───────────────────────────────────────────── */
.btn {
  font-family: var(--head); font-size: 13px;
  font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 7px 14px;
  border-radius: var(--radius); border: 1px solid var(--line2);
  background: var(--bg3); color: var(--text2);
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #000; font-weight: 700; }
.btn.primary:hover { background: var(--amber2); border-color: var(--amber2); }
.btn.danger  { border-color: rgba(255,68,68,0.3); color: var(--red); }
.btn.danger:hover  { background: var(--red-dim); }
.btn.success { border-color: rgba(0,224,150,0.3); color: var(--green); }
.btn.success:hover { background: var(--green-dim); }
.btn.sm { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Round 112: upgrade modal — shown by BillingModule.showUpgradePrompt
   when a gated feature or quota is hit. Sits over whatever screen
   the user was on; two upgrade-target cards, Maybe later, and a
   See-all-plans link. */
.modal-overlay#modal-upgrade {
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay#modal-upgrade.open {
  display: flex;
}
.upgrade-modal {
  background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 32px;
  max-width: 620px;
  width: calc(100% - 32px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6),
              0 0 0 1px var(--amber-dim),
              inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative;
}
.upgrade-modal-body { text-align: center; }
.upgrade-modal-icon {
  font-size: 36px;
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
  border-radius: 50%;
}
.upgrade-modal-headline {
  font-family: var(--head);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.upgrade-modal-body-text {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 480px;
}
.upgrade-modal-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
  text-align: left;
}
@media (max-width: 520px) {
  .upgrade-modal-cards { grid-template-columns: 1fr; }
}
.upgrade-plan-card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.upgrade-plan-card.recommended {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 8px 24px -12px var(--amber-glow);
}
.upgrade-plan-badge {
  position: absolute;
  top: -10px; right: 14px;
  background: var(--amber);
  color: var(--bg0);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.upgrade-plan-name {
  font-family: var(--head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.upgrade-plan-price {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--amber);
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.upgrade-plan-features {
  list-style: none;
  padding: 0; margin: 0 0 16px 0;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.7;
  flex: 1;
}
.upgrade-plan-features li::before {
  content: '✓  ';
  color: var(--green);
  font-weight: 700;
}
.upgrade-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Round 106: wizard chunked-validation progress bar. Shown during
   large imports (>= 1000 rows) so the user has feedback while the
   async validator chews through chunks. Uses theme accent so it
   re-tints per selected palette (industrial / slate / forest /
   dusk / light). */
.wiz-progress-track {
  width: 100%;
  max-width: 360px;
  height: 8px;
  margin: 0 auto;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.wiz-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber2, var(--amber)) 100%);
  box-shadow: 0 0 12px var(--amber-glow, var(--amber-line));
  transition: width 0.18s ease-out;
}

/* Round 101: permissions-gated elements. Applied by
   UserManagement.gateUI() to any `[data-perm]` whose capability
   the current role lacks. Looks like the disabled-btn state but
   retains the cursor and title so users discover why (hover →
   "Requires admin role"). */
.perm-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important; /* allow hover for the title tooltip */
  filter: saturate(0.6);
}
.perm-disabled * { pointer-events: none; }  /* but child clicks stay blocked */

/* ─────────────────────────────────────────────
   9. TABLE
   Sortable data table used in Chemicals tab.
   th elements are clickable for column sort.
───────────────────────────────────────────── */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
thead tr { background: var(--bg2); border-bottom: 2px solid var(--line); }
th {
  padding: 9px 12px; text-align: left;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text3);
  cursor: pointer; user-select: none; white-space: nowrap;
}
th:hover { color: var(--amber); }
th.sorted { color: var(--amber); }
tbody tr { border-bottom: 1px solid var(--line); transition: background 0.1s; }
tbody tr:hover { background: rgba(245,166,35,0.03); cursor: pointer; }
tbody tr.selected { background: rgba(245,166,35,0.06); }
td {
  padding: 9px 12px; font-size: 13px;
  color: var(--text); vertical-align: middle;
}
td.mono { font-family: var(--mono); font-size: 11px; }
td.name { font-weight: 500; max-width: 220px; }
td.actions { white-space: nowrap; }

/* Round 167: mobile tap-target polish. On narrow viewports the
   dense chemical / equipment / vehicle row action columns are
   hard to hit accurately — Apple HIG + Material both want ≥ 44px
   targets; we were at ~28px. Bump padding + a small horizontal
   gap so adjacent buttons don't share edges. Desktop stays tight. */
@media (max-width: 640px) {
  td.actions .btn.sm {
    padding: 8px 12px;
    min-height: 36px;
    font-size: 13px;
  }
  td.actions .btn.sm + .btn.sm {
    margin-left: 4px;
  }
  td.actions a.btn.sm,
  td.actions button.btn.sm {
    min-width: 36px;
  }
}

/* ─────────────────────────────────────────────
   10. BADGES & TAGS
   Status badges for SDS compliance.
   Identifier tags for custom labels.
───────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 7px;
  border-radius: 2px; font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge.current    { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,224,150,0.3); }
.badge.outdated   { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(255,215,64,0.3); }
.badge.missing    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,68,68,0.3); }
.badge.unverified { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,66,0.3); }
.badge.expiring   { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(255,215,64,0.3); }
.badge.expired    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,68,68,0.3); }
.badge.active-cert{ background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,224,150,0.3); }
.id-tag {
  display: inline-block; padding: 1px 6px;
  border-radius: 2px; font-family: var(--mono);
  font-size: 10px; margin-right: 3px;
  background: var(--bg4); color: var(--text2);
  border: 1px solid var(--line2);
}
.id-tag.upc      { color: var(--cyan);   border-color: rgba(0,212,255,0.25); }
.id-tag.internal { color: var(--purple); border-color: rgba(167,139,250,0.25); }
.id-tag.custom   { color: var(--amber);  border-color: var(--amber-line); }
.id-tag.custom.removable { padding-right: 2px; }
.id-tag-x {
  background: none; border: none; padding: 0 4px;
  margin-left: 2px; cursor: pointer;
  color: var(--text3); font-size: 11px; line-height: 1;
  font-family: var(--mono); vertical-align: middle;
  transition: color .12s;
}
.id-tag-x:hover { color: var(--red, #e55); }

/* Round 77: expand the × hit target on touch devices. The default
   4px padding gives a ~12×14px target, well below Apple HIG's 44px
   recommendation. On coarse pointers we bump padding + min size and
   suppress the hover-color rule since there's no hover on touch. */
@media (hover: none) and (pointer: coarse) {
  .id-tag-x {
    min-width: 24px; min-height: 24px;
    padding: 4px 8px; font-size: 14px;
  }
}

/* Round 77: highlight matched substring in Tag Browser search. */
#tag-browser mark.search-hit {
  background: var(--amber-dim, rgba(255,193,7,0.25));
  color: var(--amber, #f5b200);
  padding: 0 1px; border-radius: 2px;
}

/* Round 77: employee card tag strip — renders above the cert strip
   when the employee has at least one identifier tag. */
.emp-card-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}

/* Round 78: inline-invalid state for the tag helper row inputs. Shows
   a soft red border when the user clicks "+ Add tag" with a missing
   scheme or empty value. Class is cleared on the next change/input
   event so the state doesn't linger. */
.ident-input-invalid,
.form-input-invalid {
  border-color: var(--red, #e55) !important;
  box-shadow: 0 0 0 1px var(--red-dim, rgba(229,85,85,0.25));
  animation: ident-invalid-shake .22s ease-out;
}

/* Round 141: dashboard top-overdue section accent. A subtle red
   left-border makes the unified "most overdue" list visually
   distinct from the three per-resource alert sections below. */
.dash-top-overdue {
  border-left: 3px solid var(--red, #e55);
  padding-left: 10px;
  background: linear-gradient(90deg, rgba(229,85,85,0.06), transparent);
}
.dash-top-overdue .dash-alert-title { color: var(--red, #e55); }
.dash-top-overdue-icon {
  display: inline-block;
  width: 18px;
  margin-right: 4px;
  text-align: center;
}
/* Round 144: clickable top-overdue rows. Cursor + subtle hover
   tint signal interactivity; focus-visible outline keeps the
   keyboard path accessible. */
.dash-alert-clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}
.dash-alert-clickable:hover {
  background: rgba(229,85,85,0.08);
}
.dash-alert-clickable:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

/* Round 140: keyboard-shortcut help modal (`?` anywhere). */
.kbd-chord {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.kbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kbd-table th,
.kbd-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.kbd-table th {
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.kbd-table tbody tr:last-child td { border-bottom: none; }
.kbd-scope {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-align: right;
}
/* Round 134: apply to every common form input type so the signal
   shows on <select> + <textarea> + custom .form-input as well. */
input.form-input-invalid,
select.form-input-invalid,
textarea.form-input-invalid {
  outline: none;
}
@keyframes ident-invalid-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

/* Round 78: per-scheme usage badge — compact pill showing how many
   records currently use a tag with this scheme's prefix. Read-only
   affordance that makes the impact of a scheme delete obvious. */
.ident-usage-badge {
  flex-shrink: 0; font-family: var(--mono);
  font-size: 10px; color: var(--text3);
  background: var(--bg0); border: 1px solid var(--line2);
  border-radius: 10px; padding: 2px 8px;
  min-width: 48px; text-align: center; cursor: help;
}

/* Inline scheme helper used under record-edit "Tags" inputs
   (chemicals / equipment / vehicle / employees). Compact row: scheme
   picker + value input + Add button. Submits into the existing comma-
   separated tag input so save paths stay unchanged. */
.tag-helper-row {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
  margin-top: 6px; font-size: 12px;
}
/* Narrow viewport: stack helper rows so the scheme picker + value
   input + Add button don't overflow off-screen on mobile. */
@media (max-width: 640px) {
  .tag-helper-row .tag-helper-scheme,
  .tag-helper-row .tag-helper-value {
    flex: 1 1 100%; max-width: none;
  }
  .tag-helper-row .tag-helper-add { flex: 1 1 100%; }
}
.tag-helper-row .tag-helper-scheme,
.tag-helper-row .tag-helper-value {
  background: var(--bg0); border: 1px solid var(--line2);
  color: var(--text); padding: 4px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px;
}
.tag-helper-row .tag-helper-scheme { flex: 1 1 180px; max-width: 260px; }
.tag-helper-row .tag-helper-value  { flex: 0 1 120px; }
.tag-helper-row .tag-helper-preview {
  flex: 0 0 auto; color: var(--amber);
  font-family: var(--mono); font-size: 11px;
  opacity: .85; min-width: 80px;
}
.tag-helper-row .tag-helper-add {
  flex-shrink: 0; padding: 4px 10px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); border-radius: 4px; cursor: pointer;
  font-size: 11px; transition: background .12s;
}
.tag-helper-row .tag-helper-add:hover { background: var(--bg3); }
.tag-helper-row .tag-helper-add:disabled { opacity: .4; cursor: not-allowed; }
.tag-helper-note {
  font-size: 10px; color: var(--text3); margin-top: 4px;
  font-style: italic;
}
#bulk-tag-preview {
  font-family: var(--mono); font-size: 12px;
  padding: 8px 12px; border: 1px dashed var(--line);
  border-radius: 4px; margin-bottom: 16px;
  background: var(--bg1); color: var(--text3);
}
#bulk-tag-preview .bulk-tag-preview-value { color: var(--amber); }

/* Small search inputs on the Identifiers tab (scheme list + tag browser).
   Local override; mirrors the style used on other panel-toolbar search boxes. */
.ident-search {
  background: var(--bg0); border: 1px solid var(--line2);
  color: var(--text); padding: 5px 8px; border-radius: 4px;
  font-size: 12px; width: 160px; transition: border-color .12s;
}
.ident-search:focus { outline: none; border-color: var(--amber); }

/* ℹ info-icon next to STEP titles. Hover reveals the native tooltip. */
.ident-info-icon {
  display: inline-block; margin-left: 6px;
  color: var(--text3); font-size: 13px; cursor: help;
  font-family: var(--sans, sans-serif); font-weight: 400;
  user-select: none; vertical-align: middle;
}
.ident-info-icon:hover { color: var(--amber); }

/* Rows hidden by the scheme-list filter. Display:none rather than
   visibility:hidden so row heights collapse cleanly. */
.id-scheme-row.filtered-out { display: none !important; }

/* Round 74 — panel-specific utility classes completing the Round 69
   inline-style migration. Each replaces a multi-property inline bundle
   that couldn't cleanly substitute for an existing utility. */

/* Billing plan card — push the Upgrade/Current button to the bottom of
   the card regardless of how many feature bullets the plan has. */
.billing-plan-footer { margin-top: auto; padding-top: 12px; }

/* TileManager reset-to-default row inside the Reorder Tabs modal. */
.tile-reset-row { margin-top: 12px; text-align: center; }

/* LookupModule sync-source inline form. Was a naked inline bundle;
   .sync-source-card renders the card chrome, .sync-source-actions lines
   up the right-justified Open/Remove buttons, .sync-source-empty is the
   "no sync sources configured" placeholder. */
.sync-source-card {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px; margin-bottom: 8px;
}
.sync-source-actions {
  margin-top: 8px; display: flex; gap: 6px; justify-content: flex-end;
}
.sync-source-empty {
  color: var(--text3); font-size: 13px; padding: 8px 0;
}

/* Small SDS lookup result wrapper — was a naked margin-top:8px span. */
.lookup-result-wrap { margin-top: 8px; }
.form-tag {
  display: inline-block; padding: 2px 6px;
  background: var(--bg4); border: 1px solid var(--line);
  border-radius: 2px; font-size: 11px; color: var(--text3);
}

/* ─────────────────────────────────────────────
   11. MODAL
   Overlay + centered dialog box.
   Opened via ModalModule.open(name).
───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 500; display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: 6px; width: 100%; max-width: 680px;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
}
.modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--head); font-size: 18px;
  font-weight: 700; letter-spacing: 1px; color: var(--text);
}
.modal-close {
  background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 16px; padding: 4px;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--red); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   12. FORM ELEMENTS
   Shared across all modals and inline forms.
───────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: span 2; }
.form-group.span3 { grid-column: span 3; }
.form-group label {
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text3);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg0); border: 1px solid var(--line2);
  color: var(--text); padding: 8px 10px;
  border-radius: var(--radius); font-family: var(--body);
  font-size: 13px; outline: none; transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--amber); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text3); }
.form-group textarea { resize: vertical; min-height: 64px; }
.form-note { font-size: 11px; color: var(--text3); }
.form-section-title {
  font-family: var(--head); font-size: 13px;
  font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--amber);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px; margin-bottom: 14px;
  margin-top: 20px;
}
.form-section-title:first-child { margin-top: 0; }
span.req { color: var(--red); margin-left: 2px; }

/* ─────────────────────────────────────────────
   13. SDS LOOKUP PANEL
───────────────────────────────────────────── */
.lookup-result-box {
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 14px;
  margin-top: 12px; font-size: 13px; line-height: 1.7;
}

/* ─────────────────────────────────────────────
   14. STATS ROW
   Clickable summary cards at top of chemicals panel.
   Click to filter the table by that status.
───────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 12px 20px; cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.1s;
}
.stat:last-child { border-right: none; }
.stat:hover, .stat.active { background: var(--bg2); }
.stat.active { border-bottom: 2px solid var(--amber); }
.stat-n {
  font-family: var(--mono); font-size: 22px;
  font-weight: 600; line-height: 1;
}
.stat-n.c0 { color: var(--amber); }
.stat-n.c1 { color: var(--green); }
.stat-n.c2 { color: var(--yellow); }
.stat-n.c3 { color: var(--red); }
.stat-n.c4 { color: var(--orange); }
.stat-l { font-size: 10px; color: var(--text3); margin-top: 3px; font-family: var(--mono); }

/* ─────────────────────────────────────────────
   15. SIDE DETAIL PANEL
   Slide-in drawer from right edge.
   Opens when a table row or card is clicked.
─────────────────────────────────────────────
   Z-INDEX STACK (bottom → top):
     navbar:         200  (sticky header)
     side-overlay:   300  (backdrop — see #side-overlay override below)
     side-panel:     400  (drawer must be above its own backdrop)
     modal-overlay:  500  (modals open above the panel — e.g. Edit modal)
   This ensures buttons inside the panel receive clicks and don't get
   swallowed by the overlay. Previously, side-overlay (500) > side-panel (100)
   meant all in-panel clicks went to the overlay and closed the panel instead
   of reaching document attach buttons, drop zones, etc.
───────────────────────────────────────────── */
.side-panel {
  /* Round 100: gradient surface + ambient left-edge shadow so the
     drawer reads as "elevated above the page" instead of a flat
     panel slammed against the page background. */
  position: fixed; right: 0; top: 52px; bottom: 0;
  width: 380px;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  border-left: 1px solid var(--line2);
  box-shadow: -24px 0 48px -16px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), width 0.2s ease, left 0.2s ease, box-shadow 0.2s ease;
  z-index: 400; overflow-y: auto;
}
.side-panel.open {
  transform: translateX(0);
  box-shadow: -32px 0 64px -16px rgba(0,0,0,0.7);
}

/* ─────────────────────────────────────────────
   Layer 21: full-page detail mode
   Turns the side-panel into a file-explorer style
   full-screen record view. Same DOM, same render
   code, same open() entry points — just a single
   modifier class that unlocks the layout.

   Triggered by RowDetailModule.open(resource, id)
   which is called from every row click handler
   (chemicals, equipment, vehicles, employees).

   The inner content is restyled into a 2-column
   file-explorer grid: left column is the metadata
   card stack, right column is the documents +
   revisions scroller. On narrow screens the grid
   collapses to a single column.
───────────────────────────────────────────── */
.side-panel.detail-mode {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  border-left: none;
  transform: translateX(0);
  background: var(--bg1);
  padding: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
}
.side-panel.detail-mode .panel-hdr,
.side-panel.detail-mode [class*="panel-hdr"] {
  position: sticky; top: 0;
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(18,24,32,0.96) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10;
}
.side-panel.detail-mode .panel-body,
.side-panel.detail-mode [class*="panel-body"] {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 48px 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
  gap: 28px;
  align-items: start;
}
/* Metadata fields stack in the left column */
.side-panel.detail-mode .pfield {
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 8px;
}
.side-panel.detail-mode .pfield-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.side-panel.detail-mode .pfield-value {
  font-size: 14px;
  color: var(--text);
}
.side-panel.detail-mode hr.pdiv {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 12px 0;
}
/* Action button stack stays with the metadata */
.side-panel.detail-mode .pfield + div[style*="flex-direction:column"],
.side-panel.detail-mode .pfield ~ div[style*="flex-direction:column"] {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
}
/* Documents + revisions span the right column as a wide grid */
.side-panel.detail-mode [id^="sp-docs-"],
.side-panel.detail-mode [id^="esp-docs-"],
.side-panel.detail-mode [id^="eqp-docs-"],
.side-panel.detail-mode [id^="vehp-docs-"],
.side-panel.detail-mode [id^="rev-sp-"],
.side-panel.detail-mode [id^="rev-esp-"],
.side-panel.detail-mode [id^="rev-eqp-"],
.side-panel.detail-mode [id^="rev-vehp-"] {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.side-panel.detail-mode .doc-section {
  /* Layer 11 added doc-section wrapper — in detail mode we want
     the actions row to spread and the list to use the whole column */
}
.side-panel.detail-mode .doc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.side-panel.detail-mode .doc-item {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.side-panel.detail-mode .doc-item:hover {
  border-color: var(--amber);
  background: var(--bg3);
}
/* Breadcrumb + close button in the sticky header */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  flex: 1;
}
.detail-breadcrumb .detail-back {
  cursor: pointer;
  padding: 6px 12px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.detail-breadcrumb .detail-back:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.detail-breadcrumb .detail-crumb-sep { color: var(--text3); }
.detail-breadcrumb .detail-crumb-current {
  color: var(--text);
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
}
/* Mobile: collapse to single column */
@media (max-width: 820px) {
  .side-panel.detail-mode .panel-body,
  .side-panel.detail-mode [class*="panel-body"] {
    grid-template-columns: 1fr;
    padding: 18px 16px 32px 16px;
    gap: 18px;
  }
  .side-panel.detail-mode .panel-hdr {
    padding: 12px 16px;
  }
  .side-panel.detail-mode .doc-list {
    grid-template-columns: 1fr;
  }
}
/* Side-overlay is the dimming backdrop — must sit BELOW the panel (z-index 300)
   and BELOW actual modal overlays (z-index 500). Override the shared .modal-overlay rule. */
#side-overlay { z-index: 300; }
.panel-hdr {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg2);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.panel-name {
  font-family: var(--head); font-size: 16px;
  font-weight: 700; color: var(--text);
  padding-right: 8px; line-height: 1.2;
}
.panel-body { padding: 16px 20px; }
.pfield { margin-bottom: 12px; }
.pfield-label { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 3px; }
.pfield-value { font-size: 13px; color: var(--text); }
.pfield-value.mono { font-family: var(--mono); font-size: 11px; word-break: break-all; }
hr.pdiv { border: none; border-top: 1px solid var(--line); margin: 12px 0; }

/* ─────────────────────────────────────────────
   16. EQUIPMENT CARDS
   Grid of cards for the Equipment tab.
───────────────────────────────────────────── */
.eq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 16px 20px;
}
/* Layer 20: card hover glow for consistency with the Layer 18 btn
   glow treatment. Equipment, vehicle, and employee cards all get the
   same amber border + subtle underglow on hover. Vehicles previously
   had a grey hover override (cursor: default + line2 border) that
   made them feel broken next to equipment/employees — removed. */
.eq-card:hover,
.veh-card:hover,
.emp-card:hover {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 1px var(--amber-line), 0 4px 14px -6px rgba(245,166,35,0.18);
}
.veh-card {
  cursor: pointer !important;
  /* Round 106 mobile fix — see .eq-card note. */
  touch-action: manipulation;
}

.eq-card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  transition: border-color 0.15s; cursor: pointer;
  /* Round 106 mobile fix: touch-action: manipulation removes the
     300 ms click delay some mobile browsers add waiting for a
     double-tap-to-zoom gesture. Without this, taps on equipment
     cards feel laggy / sometimes fail to register on iOS Safari
     when the user scrolls past quickly. */
  touch-action: manipulation;
}
.eq-card:hover { border-color: var(--amber); }

/* Round 106 mobile fix: equipment card action buttons (Edit / ✗)
   previously sat at the bottom of the card with no explicit tap
   size. On narrow viewports they crowded into the card's tap area
   and could block the card-open tap. Stack vertically on <=480px
   and enforce the 44px Apple HIG tap target. */
@media (max-width: 480px) {
  .eq-card-actions {
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
  }
  .eq-card-actions .btn {
    width: 100%;
    min-height: 40px;
  }
}
.eq-card-name {
  font-family: var(--head); font-size: 15px;
  font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.eq-card-meta { font-family: var(--mono); font-size: 10px; color: var(--text2); line-height: 1.8; }
.eq-card-actions { margin-top: 10px; display: flex; gap: 6px; }
/* Phase 5c: utility class replacing `style="margin-top:6px;"` sprinkled
   across equipment.js + vehicle.js cards. One place to tune card row
   spacing going forward. */
.card-row-mt-6 { margin-top: 6px; }
.eq-card-note  { margin-top: 6px; font-size: 11px; color: var(--text3); }

/* ─────────────────────────────────────────────
   16b. VEHICLE CARDS & FLEET UI
   Vehicle sub-view inside Equipment tab.
   Shares .eq-card base styles, extends with
   status badges and compliance alert bar.
───────────────────────────────────────────── */
.veh-card { cursor: default; }
.veh-card:hover { border-color: var(--line2); }

/* Status badge used inside vehicle cards */
.badge.active-badge {
  background: var(--green-dim);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
}

/* Alert bar — CVIP / insurance / registration expiry warnings */
#veh-alert-bar { padding: 0 20px; }
.veh-alert {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  padding: 8px 12px; border-radius: var(--radius);
  margin-bottom: 6px; border-left: 3px solid;
}
.veh-alert.warn  { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); }
.veh-alert.danger{ background: var(--red-dim);    border-color: var(--red);    color: var(--red);    }

/* ─────────────────────────────────────────────
   16c. MAINTENANCE LOG ENTRIES
   Inside the maintenance modal.
   Each entry is a service record — append-only.
───────────────────────────────────────────── */
.maint-entry {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.maint-entry-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.maint-entry-type {
  font-family: var(--head); font-size: 13px;
  font-weight: 600; color: var(--amber);
  letter-spacing: 0.5px;
}
.maint-entry-date {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); margin-left: auto;
}
.maint-entry-cost {
  font-family: var(--mono); font-size: 11px;
  color: var(--green); background: var(--green-dim);
  border: 1px solid rgba(0,224,150,0.2);
  padding: 1px 6px; border-radius: 2px;
}
.maint-entry-meta {
  font-family: var(--mono); font-size: 10px;
  color: var(--text2); margin-bottom: 4px;
}
.maint-entry-parts {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); margin-top: 4px;
  padding-top: 4px; border-top: 1px solid var(--line);
}
.maint-entry-notes {
  font-size: 11px; color: var(--text3);
  margin-top: 4px; line-height: 1.5;
  font-style: italic;
}

@media (max-width: 600px) {
  .eq-grid { grid-template-columns: 1fr; padding: 12px; }
}

/* ─────────────────────────────────────────────
   17. EMPLOYEE CARDS
   Grid of cards for the Employee tab.
   Each card shows basic info + cert summary strip.
───────────────────────────────────────────── */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; padding: 16px 20px;
}
.emp-card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  transition: border-color 0.15s; cursor: pointer;
  /* Round 106 mobile fix — see .eq-card note. */
  touch-action: manipulation;
}
.emp-card:hover { border-color: var(--amber); }

/* Round 106 mobile fix: stack employee card action buttons on
   narrow viewports, enforce tap-target size. */
@media (max-width: 480px) {
  .eq-card-actions .btn,
  .emp-card .eq-card-actions .btn {
    min-height: 40px;
  }
}
.emp-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.emp-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--amber-dim); border: 1px solid var(--amber-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 15px;
  font-weight: 700; color: var(--amber); flex-shrink: 0;
}
.emp-card-name {
  font-family: var(--head); font-size: 15px;
  font-weight: 600; color: var(--text); line-height: 1.2;
}
.emp-card-role { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 2px; }
.emp-card-meta { font-family: var(--mono); font-size: 10px; color: var(--text2); line-height: 1.8; margin-bottom: 8px; }

/* ─────────────────────────────────────────────
   18. CERT BADGE STRIP
   Shows at bottom of each employee card.
   Coloured pills for each certification status.
───────────────────────────────────────────── */
.cert-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cert-pill {
  font-family: var(--mono); font-size: 9px;
  padding: 2px 7px; border-radius: 2px;
  font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap;
}
.cert-pill.active   { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,224,150,0.3); }
.cert-pill.expiring { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(255,215,64,0.3); }
.cert-pill.expired  { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,68,68,0.3); }
.cert-pill.none     { background: var(--bg4);        color: var(--text3);  border: 1px solid var(--line2); }
/* Inline expiry countdown tucked into the right side of an expiring or
   expired cert pill. Subtly lighter so the cert type still reads as
   primary. Rendered only when the cert has an expiry date. */
.cert-pill-meta {
  margin-left: 5px; padding-left: 5px;
  border-left: 1px solid currentColor;
  opacity: 0.75; font-weight: 500;
}

/* Small status dot rendered before the "Next Inspect:" date in the
   equipment grid. ok / watch / bad mirror the dashboard's green /
   amber / red buckets so the meaning is consistent app-wide. */
.inspect-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.inspect-dot.ok    { background: var(--green); }
.inspect-dot.watch { background: var(--yellow); }
.inspect-dot.bad   { background: var(--red); }

/* ─────────────────────────────────────────────
   19. IMPORT / EXPORT BAR
───────────────────────────────────────────── */
.io-bar {
  background: var(--bg3); border: 1px solid var(--amber-line);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  margin: 12px 20px;
}
.io-bar-label {
  font-family: var(--mono); font-size: 10px;
  color: var(--amber); font-weight: 600; letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────
   20. TOAST NOTIFICATIONS
   Auto-dismiss feedback anchored bottom-right.
───────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 10px 16px;
  font-size: 13px; color: var(--text); min-width: 200px;
  animation: slideIn 0.2s ease; display: flex;
  align-items: center; gap: 8px;
}
.toast.success { border-color: rgba(0,224,150,0.4); }
.toast.error   { border-color: rgba(255,68,68,0.4); }
.toast.info    { border-color: var(--amber-line); }
@keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ─────────────────────────────────────────────
   21. EMPTY STATE
───────────────────────────────────────────── */
.empty { padding: 60px 20px; text-align: center; color: var(--text3); }
.empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.3; }
.empty-text { font-family: var(--head); font-size: 15px; letter-spacing: 1px; }

/* ─────────────────────────────────────────────
   22. FILE DROP ZONE
───────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--line2); border-radius: var(--radius);
  padding: 20px; text-align: center; color: var(--text3);
  font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.drop-zone:hover { border-color: var(--amber); color: var(--amber); }
.drop-zone input[type=file] { display: none; }

/* ─────────────────────────────────────────────
   23. PROGRESS BAR
───────────────────────────────────────────── */
.progress-bar  { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: var(--amber); border-radius: 2px; transition: width 0.3s; }

/* ─────────────────────────────────────────────
   24. RESPONSIVE OVERRIDES
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(3,1fr); }
  .side-panel { width: 100%; top: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.span2, .form-group.span3 { grid-column: span 1; }
  .topbar-meta { display: none; }
}

/* ─────────────────────────────────────────────
   25. SUB-TABS
   Pill-style sub-view switcher used inside the
   SDS panel to toggle Register ↔ Lookup.
   Add more sub-tabs by following the same pattern.
───────────────────────────────────────────── */
.sub-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 20px;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}
.sub-tab {
  font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; padding: 5px 14px;
  border-radius: 20px; cursor: pointer;
  color: var(--text3); border: 1px solid transparent;
  transition: all 0.15s;
}
.sub-tab:hover { color: var(--text2); border-color: var(--line2); }
.sub-tab.active {
  color: var(--amber); background: var(--amber-dim);
  border-color: var(--amber-line);
}

/* ─────────────────────────────────────────────
   26. SETTINGS PAGE
   Full-width settings layout with section cards.
   .disabled rows are greyed out placeholders.
───────────────────────────────────────────── */
.settings-page {
  max-width: 760px; margin: 0 auto;
  padding: 24px 20px;
}
.settings-section {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 20px 24px;
  margin-bottom: 16px;
}
.settings-section-title {
  font-family: var(--head); font-size: 16px;
  font-weight: 700; letter-spacing: 0.8px;
  color: var(--text); margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.settings-pill {
  font-family: var(--mono); font-size: 9px;
  font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; padding: 2px 8px;
  border-radius: 2px; background: var(--bg4);
  color: var(--text3); border: 1px solid var(--line2);
}
.settings-desc {
  font-size: 13px; color: var(--text2);
  line-height: 1.6; margin-bottom: 16px;
}
.settings-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.settings-row.disabled { opacity: 0.45; pointer-events: none; }
.settings-row-label { font-size: 13px; color: var(--text); font-weight: 500; }
.settings-row-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ─────────────────────────────────────────────
   27. THEME GRID
   Colour theme swatches in the settings page.
   Active theme gets an amber ring indicator.
───────────────────────────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-top: 4px;
}
.theme-card {
  border-radius: 10px; padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  border: 1px solid transparent;
  position: relative; overflow: hidden;
  min-height: 140px;
  display: flex; flex-direction: column;
}
.theme-card:hover {
  border-color: var(--line2);
  transform: translateY(-2px);
}
.theme-card.active::after {
  content: '✓';
  position: absolute; top: 10px; right: 12px;
  font-size: 14px; font-weight: 700;
  /* Color set inline per theme via box-shadow accent — this just
     ensures the check glyph reads against any bg. */
  text-shadow: 0 0 8px currentColor;
}
.theme-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.theme-swatch {
  display: flex; gap: 5px; margin-bottom: 12px;
}
.theme-swatch-dot {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.theme-name {
  font-family: var(--head); font-size: 15px;
  font-weight: 700; letter-spacing: 0.3px;
  margin-bottom: 3px;
  line-height: 1.2;
}
.theme-mood {
  font-family: var(--mono); font-size: 10px;
  opacity: 0.75; line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* Round 100: psychology/rationale string under mood. Small, muted,
   2-line-clamped. Reads as tooltip-ish copy that informs the choice
   without dominating the card. */
.theme-psy {
  font-family: var(--body);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Light-theme swatches sit on a light bg so rgba(255,255,255,0.55)
   is invisible — use a dark text color instead. */
body.theme-light .theme-card .theme-psy,
.theme-card[style*="#f5f6f7"] .theme-psy {
  color: rgba(0,0,0,0.55);
}

/* ─────────────────────────────────────────────
   28. THEME DEFINITIONS
   Each theme overrides the CSS variables in :root.
   Add new themes in ThemeModule.THEMES — no CSS needed.
   Psychology notes are in the JS ThemeModule below.
───────────────────────────────────────────── */
body.theme-industrial { /* default — no overrides needed */ }

/* Round 100: every theme now also overrides --amber-glow so the
   Dashboard score-ring drop-shadow + amber text-shadow re-tint
   automatically. Pre-Round-100 --amber-glow was defined only on
   :root (industrial amber), which turned into an ugly yellow halo
   behind slate/forest/dusk/arctic accents when those themes were
   active. */
body.theme-slate {
  --bg0:#070b12; --bg1:#0c1219; --bg2:#111a24; --bg3:#17222f; --bg4:#1e2c3a;
  --line:#1d2e40; --line2:#243648;
  --text:#c2cfe0; --text2:#637a91; --text3:#364f66;
  --amber:#5b9bd5; --amber2:#4a8bc4;
  --amber-dim:rgba(91,155,213,0.10); --amber-line:rgba(91,155,213,0.25);
  --amber-glow:rgba(91,155,213,0.35);
}

body.theme-forest {
  --bg0:#060c08; --bg1:#0a140e; --bg2:#101a14; --bg3:#16231b; --bg4:#1e2e24;
  --line:#1a3024; --line2:#213a2c;
  --text:#c2d8cc; --text2:#5f8a6e; --text3:#36604a;
  --amber:#4caf7d; --amber2:#3d9e6c;
  --amber-dim:rgba(76,175,125,0.10); --amber-line:rgba(76,175,125,0.25);
  --amber-glow:rgba(76,175,125,0.35);
}

body.theme-dusk {
  --bg0:#0a0810; --bg1:#100e18; --bg2:#161320; --bg3:#1e1a2a; --bg4:#262136;
  --line:#231e36; --line2:#2d2640;
  --text:#d0c8e0; --text2:#7a6d99; --text3:#4a3f66;
  --amber:#a78bfa; --amber2:#9572f5;
  --amber-dim:rgba(167,139,250,0.10); --amber-line:rgba(167,139,250,0.25);
  --amber-glow:rgba(167,139,250,0.35);
}

/* Round 101: removed `body.theme-ember` and `body.theme-arctic`
   definitions. Both themes were deleted from ThemeModule.THEMES in
   Round 100, and the migration map (ember→industrial, arctic→slate)
   rewrites legacy localStorage values on load. The CSS rules were
   unreachable dead code — ~130 bytes of bundle waste + confusion for
   the next operator wondering why they can't find the themes in the
   picker. See ThemeModule._MIGRATIONS in js/app.js if you need to
   add more migrations. */

body.theme-light {
  --bg0:#f5f6f7; --bg1:#ebedf0; --bg2:#e0e3e7; --bg3:#d4d8dd; --bg4:#c8cdd4;
  --line:#c0c5cc; --line2:#b0b6bf;
  --text:#1a1e24; --text2:#4a5060; --text3:#7a8090;
  --amber:#d97706; --amber2:#c56a05;
  --amber-dim:rgba(217,119,6,0.10); --amber-line:rgba(217,119,6,0.25);
  --amber-glow:rgba(217,119,6,0.35);
  /* Round 100: softer shadows on light backgrounds — dark shadows at
     full opacity look like "the page is broken". These overrides pull
     the ambient + lift shadows down to tasteful levels. */
  --shadow-sm: 0 2px 6px rgba(17,24,39,0.08);
  --shadow-md: 0 8px 24px rgba(17,24,39,0.12);
  --shadow-lg: 0 24px 48px rgba(17,24,39,0.18);
}

/* Round 100: light-theme-specific dashboard depth overrides. Without
   these, the 0 14px 40px -16px rgba(0,0,0,0.7) shadow on
   .dash-score-card looked like a shadow from the dead under a
   paper-white card. Matches the palette pattern used by calmly-
   designed light SaaS apps. */
body.theme-light .dash-score-card {
  box-shadow:
    0 10px 28px -12px rgba(17,24,39,0.15),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-light .dash-card {
  box-shadow:
    0 6px 18px -12px rgba(17,24,39,0.12),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
body.theme-light .dash-card:hover {
  box-shadow:
    0 12px 24px -12px rgba(17,24,39,0.18),
    0 0 0 1px var(--amber-line);
}
body.theme-light .dash-alert-section {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
body.theme-light .login-card {
  box-shadow:
    0 20px 60px rgba(17,24,39,0.15),
    0 0 0 1px var(--amber-dim),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-light .side-panel,
body.theme-light .side-panel.open {
  box-shadow: -16px 0 32px -16px rgba(17,24,39,0.18);
}

/* ─────────────────────────────────────────────
   29. DOCUMENTS MODULE
   Reusable file/link attachment UI.
   Used inside side panels and any detail view.
───────────────────────────────────────────── */
.doc-section {
  margin-top: 4px;
}
.doc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.doc-section-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-count {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  font-size: 9px;
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.doc-section-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

/* Round 129: progressive disclosure — lazy collapsible sections
   inside side panels. Documents + Revisions default-collapsed so
   the panel first-paint shows record fields + action buttons
   only; content renders on first expand (see
   SidePanelHelpers.lazyCollapse in js/panels.js). */
.sp-collapse {
  border: 1px solid var(--line);
  background: var(--bg3, var(--bg2));
  border-radius: 4px;
  margin: 4px 0;
  overflow: hidden;
}
.sp-collapse[open] {
  border-color: var(--amber-line);
}
.sp-collapse-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: 40px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.sp-collapse-summary::-webkit-details-marker { display: none; }
.sp-collapse-summary::marker { display: none; content: ''; }
.sp-collapse-summary:hover {
  background: var(--amber-dim);
}
.sp-collapse-title {
  flex: 1 1 auto;
}
.sp-count-badge {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  font-size: 9px;
  padding: 1px 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex: 0 0 auto;
}
.sp-count-badge.empty {
  background: transparent;
  color: var(--text3);
  border-color: var(--line);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.sp-collapse-chevron {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text3);
  transition: transform 0.15s ease;
}
.sp-collapse[open] .sp-collapse-chevron {
  transform: rotate(180deg);
  color: var(--amber);
}
.sp-collapse > *:not(summary) {
  padding: 0 12px 12px;
}
/* Touch-target bump on coarse pointers (mobile). */
@media (hover: none) and (pointer: coarse) {
  .sp-collapse-summary { min-height: 48px; padding: 12px 14px; }
}

/* Round 110 mobile camera upload: on small screens the three
   action buttons (Link / Photo / Upload) compete for space and
   can truncate. Wrap them onto two lines with a bit more gap
   and raise each button's min-height so the camera option (the
   🔴 star feature on mobile) is easy to thumb-tap. */
@media (max-width: 640px) {
  .doc-section-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .doc-section-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .doc-section-actions .btn {
    min-height: 40px;
    padding: 8px 14px;
    flex: 1 1 auto;
  }
}
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-empty {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
  padding: 8px 0;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  transition: border-color 0.15s;
}
.doc-item:hover {
  border-color: var(--line2);
}
.doc-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.doc-item-info {
  flex: 1;
  min-width: 0;
}
.doc-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}
.doc-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   30. STORAGE WIDGET
   Used in Settings tab, rendered by
   DocumentsModule.renderStorageWidget().
───────────────────────────────────────────── */
.storage-widget {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
}
.storage-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}
.storage-widget-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-right: 8px;
}
.storage-tier-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}
.tier-free     { background: var(--bg4); color: var(--text3); border: 1px solid var(--line2); }
.tier-pro      { background: rgba(91,155,213,0.12); color: #5b9bd5; border: 1px solid rgba(91,155,213,0.3); }
.tier-business { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-line); }
.storage-widget-summary {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.storage-used   { color: var(--text); font-weight: 600; }
.storage-sep    { color: var(--text3); }
.storage-limit  { color: var(--text3); }
.storage-link-only { color: var(--text3); font-size: 11px; }
.storage-bar-track {
  height: 6px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.storage-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.storage-bar-fill-ok     { background: var(--green, #4caf7d); }
.storage-bar-fill-warn   { background: var(--yellow, #e5a820); }
.storage-bar-fill-danger { background: var(--red, #e05a5a); }
.storage-bar-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 10px;
}
.storage-doc-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}
.storage-warning {
  margin-top: 10px;
  background: rgba(224,90,90,0.10);
  border: 1px solid rgba(224,90,90,0.3);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text2);
}

/* ─────────────────────────────────────────────
   31. BILLING MODULE
   Plan comparison cards, status indicators,
   founding member notice, overage warnings.
   All rendered by BillingModule in app.js.
───────────────────────────────────────────── */

/* Plan cards grid — 3 columns on wide, stacks on narrow */
.billing-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .billing-plan-cards { grid-template-columns: 1fr; }
}

.billing-plan-card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.billing-plan-card:hover {
  border-color: var(--line2);
}
.billing-plan-card.current {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.billing-plan-name {
  font-family: var(--head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.billing-plan-card.current .billing-plan-name {
  color: var(--amber);
}

.billing-plan-price {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.billing-plan-storage {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.billing-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  flex: 1;
}
.billing-plan-features li {
  font-size: 11px;
  color: var(--text2);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}
.billing-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
}

.billing-plan-current-badge {
  text-align: center;
  padding: 7px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Founding member rate-lock notice */
.billing-founding-notice {
  background: var(--bg3);
  border: 1px solid var(--amber-line);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* Subscription status row (active / canceling / past_due) */
.billing-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.billing-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #4caf7d);  /* default: active */
  flex-shrink: 0;
}
/* Status dot color variants — set via JS by adding a class to billing-status-row */
.billing-status-row.status-past-due    .billing-status-dot { background: var(--red,    #e05a5a); }
.billing-status-row.status-canceling   .billing-status-dot { background: var(--yellow, #e5a820); }
.billing-status-row.status-canceled    .billing-status-dot { background: var(--text3); }

/* Overage warning banner */
.billing-overage-warning {
  background: rgba(224, 90, 90, 0.08);
  border: 1px solid rgba(224, 90, 90, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* Overage pricing reference table */
.billing-overage-ref {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.billing-overage-ref-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.billing-overage-ref-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  font-size: 11px;
  color: var(--text2);
  font-family: var(--mono);
}
.billing-overage-ref-grid span:nth-child(even) {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   32. EQUIPMENT & VEHICLE PANEL
   Same structure as side-panel (section 24).
   Shares .panel-hdr, .panel-body, .pfield,
   .pdiv styles already defined above.
───────────────────────────────────────────── */
/* eq-side-panel and veh-side-panel use the
   same .side-panel class — no extra rules needed
   unless specific overrides are required. */

/* ─────────────────────────────────────────────
   33. BILLING CARD REFINEMENTS
───────────────────────────────────────────── */
.billing-plan-price {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 2px;
}
.billing-plan-price-unit {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6;
}
.billing-plan-price-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}
.billing-founding-badge {
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  display: inline-block;
}
/* Make plan cards stretch to equal height */
.billing-plan-cards {
  align-items: stretch;
}
.billing-plan-card {
  display: flex;
  flex-direction: column;
}
/* Overage footnote — replaces the table */
.billing-overage-footnote {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  line-height: 1.7;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ─────────────────────────────────────────────
   30. PDF VIEWER OVERLAY
   Fullscreen inline PDF viewer.
   Renders PDFs via native browser <iframe>.
───────────────────────────────────────────── */
.pdf-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg0, #050a0f);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pdf-viewer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.pdf-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg2, #0f1720);
  border-bottom: 1px solid var(--line, #1a2636);
  flex-shrink: 0;
  min-height: 44px;
}
.pdf-viewer-title {
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #cdd6e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.pdf-viewer-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.pdf-viewer-body {
  flex: 1;
  overflow: hidden;
}
.pdf-viewer-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg1, #0a1018);
}
.pdf-viewer-mobile-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text, #cdd6e0);
  padding: 40px 20px;
}

/* ─────────────────────────────────────────────
   31. REVISION TRACKER
   Change history timeline for any entity.
───────────────────────────────────────────── */
.rev-section {
  margin-top: 4px;
}
.rev-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rev-section-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rev-count {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  font-size: 9px;
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.rev-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rev-empty {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
  padding: 8px 0;
}
.rev-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--line, #1a2636);
  transition: border-color 0.15s;
}
.rev-item:hover {
  border-left-color: var(--amber-line, rgba(229,168,32,0.25));
}
.rev-item-icon {
  font-size: 12px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  padding-top: 1px;
}
.rev-item-body {
  flex: 1;
  min-width: 0;
}
.rev-item-summary {
  font-size: 11px;
  color: var(--text, #cdd6e0);
  line-height: 1.4;
}
.rev-item-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
  line-height: 1.4;
}
.rev-action-label {
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rev-fields {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  opacity: 0.7;
}
.rev-badge {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.2px;
}
.rev-show-more {
  padding: 6px 0 2px;
  text-align: center;
}

/* ─────────────────────────────────────────────
   32. TILE MANAGER — Draggable Tab Reorder
   Desktop: HTML5 drag and drop on tab elements.
   Mobile: ≡ button opens reorder modal.
───────────────────────────────────────────── */

/* ── Desktop drag states ─────────────────── */
.tab-draggable {
  cursor: grab;
}
.tab-draggable:active {
  cursor: grabbing;
}
.tab-dragging {
  opacity: 0.35;
  border-bottom-color: transparent !important;
}

/* Drop zone indicators — vertical bars on left/right edge */
.tab-drop-before {
  box-shadow: inset 3px 0 0 0 var(--amber);
}
.tab-drop-after {
  box-shadow: inset -3px 0 0 0 var(--amber);
}

/* ── Mobile reorder button ───────────────── */
.tab-reorder-btn {
  background: none;
  border: 1px solid var(--line2);
  border-radius: var(--radius, 4px);
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  margin-right: 4px;
  font-family: var(--mono);
}
.tab-reorder-btn:hover {
  color: var(--amber);
  border-color: var(--amber-line);
}

/* ── Mobile reorder modal rows ───────────── */
.tile-reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 6px;
  transition: background 0.15s;
}
.tile-reorder-row:hover {
  background: var(--bg4, var(--bg3));
}
.tile-reorder-label {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}
.tile-reorder-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Hide reorder button on desktop ──────── */
@media (min-width: 769px) {
  .tab-reorder-btn {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   33. DOCUMENT DROP ZONE & LABEL SUGGESTIONS
   Drag-and-drop PDF target inside doc sections.
   Label suggestion pills for quick labelling.
───────────────────────────────────────────── */
.doc-dropzone {
  border: 2px dashed var(--line2, #243648);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.doc-dropzone:hover {
  border-color: var(--amber-line, rgba(229,168,32,0.25));
}
.doc-dropzone-active {
  border-color: var(--amber) !important;
  background: var(--amber-dim, rgba(229,168,32,0.06)) !important;
}
.doc-dropzone-inner {
  pointer-events: none;
}
.doc-dropzone-icon {
  font-size: 24px;
  margin-bottom: 4px;
  opacity: 0.6;
}
.doc-dropzone-text {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.5px;
}
.doc-dropzone-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
}

/* Label suggestion pills */
.doc-label-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.doc-suggest-pill {
  background: var(--bg3, #17222f);
  border: 1px solid var(--line, #1a2636);
  border-radius: 12px;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.doc-suggest-pill:hover {
  border-color: var(--amber-line, rgba(229,168,32,0.25));
  color: var(--amber);
}

/* ═══════════════════════════════════════════════════════════════════
   USER MANAGEMENT
   Styles for the UserManagement module — team member table,
   invite modal, permission matrix, activity log.
   ───────────────────────────────────────────────────────────────
   All colours use CSS variables for theme compatibility.
═══════════════════════════════════════════════════════════════════ */

/* ── Header bar ────────────────────────────────────────────────── */
.um-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.um-header-left { display: flex; align-items: baseline; gap: 10px; }
.um-header-right { display: flex; gap: 6px; flex-wrap: wrap; }
.um-title {
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}
.um-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

/* ── Filters ───────────────────────────────────────────────────── */
.um-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.um-search {
  flex: 1;
  min-width: 180px;
  background: var(--bg3, #171f2a);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.um-search:focus { border-color: var(--amber-line); }
.um-search::placeholder { color: var(--text3); }
.um-role-filter {
  background: var(--bg3, #171f2a);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}

/* ── Table ──────────────────────────────────────────────────────── */
.um-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.um-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 13px;
}
.um-th {
  background: var(--bg3, #171f2a);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  user-select: none;
}
.um-sortable { cursor: pointer; }
.um-sortable:hover { color: var(--amber); }
.um-td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.um-row:last-child .um-td { border-bottom: none; }
.um-row:hover { background: rgba(245,166,35,0.03); }
.um-row-me { background: rgba(245,166,35,0.04); }
.um-row-me:hover { background: rgba(245,166,35,0.06); }

/* User cell — avatar + name/email */
.um-td-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
.um-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.um-user-info { min-width: 0; }
.um-user-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-user-email {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-you-badge {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Role select dropdown (inline in table) */
.um-role-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 20px 3px 8px;
  border-radius: 4px;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%236b8299'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 5px;
  transition: border-color 0.15s;
}
.um-role-select:hover { border-color: var(--amber-line); }

/* Status badges */
.um-status {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.um-status-active {
  color: var(--green);
  background: var(--green-dim);
}
.um-status-invited {
  color: var(--amber);
  background: var(--amber-dim);
}
.um-status-disabled {
  color: var(--red);
  background: var(--red-dim);
}

/* Date + action columns */
.um-td-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}
.um-td-actions {
  white-space: nowrap;
}
.um-td-actions .btn { margin-left: 4px; }
.um-td-actions .btn:first-child { margin-left: 0; }
.um-self-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

/* ── Empty / no access ─────────────────────────────────────────── */
.um-empty {
  text-align: center;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 12px;
  padding: 32px 16px;
}
.um-no-access {
  text-align: center;
  padding: 40px 16px;
}
.um-no-access-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
.um-no-access-title {
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.um-no-access-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

/* ── Permission matrix table ───────────────────────────────────── */
.um-perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.um-perm-th {
  background: var(--bg3, #171f2a);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.um-perm-th:first-child { text-align: left; }
.um-perm-td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.um-perm-cap-label {
  text-align: left;
  font-family: var(--body);
  font-size: 12px;
  color: var(--text);
}
.um-perm-role-col { min-width: 70px; }
.um-perm-yes {
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
}
.um-perm-no {
  color: var(--text3);
  font-size: 11px;
}
.um-perm-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Activity log ──────────────────────────────────────────────── */
.um-activity-list { display: flex; flex-direction: column; gap: 0; }
.um-activity-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.um-activity-row:last-child { border-bottom: none; }
.um-activity-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
  min-width: 120px;
  flex-shrink: 0;
}
.um-activity-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.um-activity-target {
  font-family: var(--mono);
  color: var(--amber);
}
.um-activity-detail {
  color: var(--text2);
  font-style: italic;
}

/* ── Form elements (used in invite modal) ──────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 5px;
}
.form-input {
  width: 100%;
  background: var(--bg3, #171f2a);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.form-input:focus { border-color: var(--amber-line); }
select.form-input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%236b8299'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 8px 5px;
  padding-right: 28px;
}
.form-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
  line-height: 1.4;
}
.form-error {
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 8px;
  min-height: 16px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .um-header { flex-direction: column; }
  .um-header-right { width: 100%; }
  .um-td-name { min-width: 140px; }
  .um-td-date { display: none; }
  .um-activity-time { min-width: 80px; font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS SUB-TABS
   Three-tab navigation inside the Settings panel:
   General | Users & Permissions | Storage & Billing
═══════════════════════════════════════════════════════════════════ */
.settings-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.settings-sub-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 16px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.settings-sub-tab:hover { color: var(--text2); }
.settings-sub-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.settings-sub-content { display: none; }
.settings-sub-content.active { display: block; }

/* ── Role summary chips (user management toolbar) ──────────────── */
.um-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.um-summary-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg3, #171f2a);
}
.um-summary-count {
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 18px;
  font-weight: 700;
}
.um-summary-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.3px;
}
.um-summary-owner  .um-summary-count { color: var(--amber); }
.um-summary-admin  .um-summary-count { color: var(--blue); }
.um-summary-operator .um-summary-count { color: var(--green); }
.um-summary-viewer .um-summary-count { color: var(--text3); }
.um-summary-owner  { border-color: var(--amber-line); }
.um-summary-admin  { border-color: rgba(33,150,243,0.2); }

/* ── Toolbar (search + filter + action buttons) ────────────────── */
.um-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.um-toolbar-left {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.um-toolbar-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .settings-sub-tabs { overflow-x: auto; }
  .settings-sub-tab { font-size: 10px; padding: 8px 10px 6px; }
  .um-toolbar { flex-direction: column; align-items: stretch; }
  .um-toolbar-right { justify-content: flex-end; }
  .um-summary-chip { padding: 4px 8px; }
  .um-summary-count { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS TOGGLES + INLINE INPUTS
   Functional toggle switches and inline edit fields for Settings.
═══════════════════════════════════════════════════════════════════ */

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--line2);
  border-radius: 11px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; bottom: 3px;
  background: var(--text3);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-slider {
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--amber);
}

/* Inline text input (settings rows) */
.settings-inline-input {
  background: var(--bg3, #171f2a);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  width: 200px;
  max-width: 50%;
  outline: none;
  transition: border-color 0.15s;
}
.settings-inline-input:focus { border-color: var(--amber-line); }

/* Inline select (settings rows) */
.settings-inline-select {
  background: var(--bg3, #171f2a);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%236b8299'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px 5px;
  padding-right: 24px;
}
.settings-inline-select:focus { border-color: var(--amber-line); }

/* Wire note — dev guidance below settings rows */
.settings-wire-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  opacity: 0.6;
  margin-top: 8px;
  line-height: 1.4;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}

/* ── Document source badges ────────────────────────────────────── */
.doc-src-badge {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 4px;
}
.doc-src-upload {
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-dim);
}
.doc-src-link {
  color: var(--blue);
  background: var(--blue-dim);
  border: 1px solid var(--blue-dim);
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD
   Compliance overview — score ring, summary cards, alert lists.
═══════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════
   DASHBOARD — Round 99 visual refresh
   ═════════════════════════════════════════════════════════════════
   Elevated the hero treatment: bigger score ring, typography pop,
   gradient + shadow depth on cards, tactile hover, generous spacing.
   Same semantic palette — no new colors, just pushed harder. */
.dash-top {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Score card: hero element. Elevated with a subtle inner gradient,
   warm edge on the amber ring, and breathing room. */
.dash-score-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 28px 20px;
  min-width: 200px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Ambient warm glow behind the ring — adds depth without noise. */
.dash-score-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 20px));
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--amber-dim) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dash-score-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.dash-score-ring {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px var(--amber-dim));
}
.dash-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.02em;
}
.dash-score-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 14px;
  z-index: 1;
  font-weight: 600;
}
.dash-score-breakdown {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
  z-index: 1;
  letter-spacing: 0.5px;
}
.dash-score-breakdown span {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

/* Summary cards: elevated with inner gradient + shadow. Hover adds
   a lift and a warmer border. Grid gap bumped to 16 from 12. */
.dash-cards {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  min-width: 0;
}
.dash-card {
  background: linear-gradient(170deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.dash-card:hover {
  border-color: var(--amber-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Subtle top-edge accent on hover — brand amber catches the eye. */
.dash-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--amber) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.dash-card:hover::after { opacity: 1; }
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.dash-card-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.dash-card-total {
  font-family: var(--head, 'Rajdhani', sans-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.dash-card-items { display: flex; flex-direction: column; gap: 6px; }
.dash-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.dash-card-item strong { color: var(--text); font-weight: 600; }
.dash-card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* Alert sections: elevated to match the cards. Icon pills on rows
   for faster visual scanning. */
.dash-alerts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-alert-section {
  background: linear-gradient(170deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.dash-alert-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-alert-count {
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0;
}
.dash-alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  gap: 12px;
  transition: padding-left 0.15s ease;
}
.dash-alert-row:hover { padding-left: 4px; }
.dash-alert-row:first-of-type { border-top: none; padding-top: 0; }
.dash-alert-row-main {
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.dash-alert-row-main strong { color: var(--text); font-weight: 600; }
.dash-alert-row-meta {
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.dash-alert-warning .dash-alert-row-meta {
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid var(--amber-line);
}
.dash-alert-critical .dash-alert-row-meta {
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(255,68,68,0.25);
}

.dash-no-alerts {
  background: linear-gradient(170deg, var(--green-dim) 0%, rgba(45,212,160,0.03) 100%);
  border: 1px solid rgba(45,212,160,0.25);
  border-radius: 10px;
  padding: 24px;
  font-size: 14px;
  color: var(--green);
  text-align: center;
  font-weight: 500;
  box-shadow: 0 0 20px rgba(45,212,160,0.05);
}

/* Recent activity rows */
.dash-activity-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.dash-activity-row:first-of-type { border-top: none; padding-top: 0; }
.dash-activity-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  min-width: 72px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.dash-activity-body {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

/* ── Dashboard: deterministic tile column counts per breakpoint ───
   Without these, auto-fit + minmax(160px, 1fr) can produce awkward
   2+1 layouts at mid-sized viewports. These overrides lock it to a
   sensible count at each range. */
@media (max-width: 1024px) {
  .dash-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .dash-top { flex-direction: column; }
  .dash-score-card { width: 100%; }
  .dash-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .dash-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-card { padding: 12px 14px 10px; }
  .dash-card-total { font-size: 22px; }
  .dash-card-title { font-size: 9px; }
}
@media (max-width: 420px) {
  .dash-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive small-screen overrides
   Targets: topbar, tabs, modals, cards, forms, dashboard, panels
═══════════════════════════════════════════════════════════════════ */

/* ── Topbar: collapse meta, shrink logo ───────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 8px; height: 46px; }
  .logo { font-size: 17px; letter-spacing: 1px; }
  .topbar-sep { display: none; }
  .topbar-right .btn { font-size: 10px; padding: 3px 8px; }
  .user-pill { font-size: 12px; }
  #user-display-name { display: none; }
}

/* ── Tabs: scrollable, compact ────────────────────────────────── */
@media (max-width: 640px) {
  .tabs { padding: 0 8px; gap: 0; }
  .tab { font-size: 11px; padding: 10px 8px; letter-spacing: 0.5px; }
  .tab-badge { font-size: 9px; padding: 1px 4px; }
}

/* ── Modals: full-screen on mobile ────────────────────────────── */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0;
    max-height: 100dvh;
    margin: 0;
  }
  .modal-body { max-height: 70dvh; overflow-y: auto; }
  .modal-header h3, .modal-title { font-size: 15px; }
}

/* ── Employee cards: single column ────────────────────────────── */
@media (max-width: 640px) {
  .emp-grid { grid-template-columns: 1fr; padding: 8px 12px; gap: 8px; }
  .emp-card { padding: 10px; }
}

/* ── Equipment cards: single column ───────────────────────────── */
@media (max-width: 480px) {
  .eq-grid { padding: 8px; gap: 8px; }
}

/* ── Stats row: wrap on small screens ─────────────────────────── */
@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat { padding: 8px; }
  .stat-val { font-size: 18px; }
}

/* ── Filter toolbars: stack vertically ────────────────────────── */
@media (max-width: 640px) {
  .filter-bar, .io-bar { flex-wrap: wrap; gap: 6px; margin: 8px 12px; }
  .filter-bar input, .filter-bar select { min-width: 0; flex: 1; }
}

/* ── Dashboard: compact mobile layout ─────────────────────────────
   The tile column count override is up in the dash-cards media rules
   above; this block only shrinks the score ring and card paddings.
   The .dash-score-value no longer needs a `top:` override because
   its .dash-score-ring-wrap parent uses transform-based centring
   that adapts to the smaller ring automatically. */
@media (max-width: 480px) {
  .dash-top { flex-direction: column; gap: 12px; }
  .dash-score-card { width: 100%; padding: 16px 14px; }
  .dash-score-ring-wrap { width: 104px; height: 104px; }
  .dash-score-value { font-size: 26px; }
  .dash-card { padding: 10px 12px; }
  .dash-alert-row { flex-direction: column; gap: 2px; }
  .dash-alert-row-meta { text-align: left; }
}

/* ── Settings: compact sub-tabs ───────────────────────────────── */
@media (max-width: 480px) {
  .settings-sub-tabs { gap: 0; }
  .settings-sub-tab { font-size: 10px; padding: 8px 10px 6px; }
  .settings-page { padding: 0 4px; }
  .settings-section { padding: 12px 0; }
  .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .settings-inline-input, .settings-inline-select { width: 100%; max-width: 100%; }
  .toggle { align-self: flex-start; }
}

/* ── User management: compact table ───────────────────────────── */
@media (max-width: 480px) {
  .um-toolbar { flex-direction: column; }
  .um-toolbar-left { flex-direction: column; }
  .um-search { min-width: 0; width: 100%; }
  .um-summary { gap: 4px; }
  .um-summary-chip { padding: 3px 6px; }
  .um-summary-count { font-size: 14px; }
}

/* ── Side panels: full screen on mobile (already handled at 768px,
     but ensure proper layering and close button size) ─────────── */
@media (max-width: 640px) {
  .panel-hdr { padding: 12px; }
  .panel-body { padding: 12px; }
  .panel-name { font-size: 16px; }
  .pfield { padding: 4px 0; }
}

/* ── Toast: full width on mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .toast-container { bottom: 12px; right: 12px; left: 12px; }
  .toast { min-width: 0; width: 100%; font-size: 12px; }
}

/* ── Billing plan cards: stack vertically ─────────────────────── */
@media (max-width: 640px) {
  .billing-plan-cards { grid-template-columns: 1fr !important; }
  .billing-plan-card { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FIDELITY: LOGIN + DASHBOARD VISUAL POLISH
   Additive only — overrides previous rules where redeclared.
═══════════════════════════════════════════════════════════════════ */

/* ── Login: ambient backdrop + grid overlay ────────────────────── */
#login-screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(245,166,35,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(245,166,35,0.06), transparent 60%),
    linear-gradient(180deg, #0b0b0d 0%, #050506 100%);
  /* Clip the ambient backdrop (::after orb, ::before grid) horizontally
     but keep vertical scrolling enabled so tall auth forms can scroll
     on narrow viewports. Re-asserted from the base declaration above
     because this section is additive-override and would otherwise
     clobber the base rule's overflow-y: auto. */
  overflow-x: hidden;
  overflow-y: auto;
}
#login-screen::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
#login-screen::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.18), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  animation: login-orb 12s ease-in-out infinite;
}
@keyframes login-orb {
  0%,100% { transform: translate(-15%, -10%); opacity: 0.7; }
  50%     { transform: translate( 10%,  15%); opacity: 1; }
}

/* ── Login card: gradient border + lift ────────────────────────── */
.login-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,20,24,0.92), rgba(12,12,14,0.92));
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    0 0 0 1px rgba(245,166,35,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: login-card-in 0.5s cubic-bezier(.2,.8,.2,1) both;
}
.login-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(245,166,35,0.55), rgba(245,166,35,0) 35%,
    rgba(245,166,35,0) 65%, rgba(245,166,35,0.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Login logo: glow ──────────────────────────────────────────── */
.login-logo {
  font-size: 36px;
  letter-spacing: 4px;
  text-shadow:
    0 0 18px rgba(245,166,35,0.45),
    0 0 2px rgba(245,166,35,0.6);
}

/* ── Login fields: depth + amber focus glow ────────────────────── */
.login-field input {
  background: linear-gradient(180deg, #0a0a0c, #060608);
  border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-field input:focus {
  border-color: var(--amber);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 0 0 3px rgba(245,166,35,0.15);
}

/* ── Login button: gradient + glow ─────────────────────────────── */
.login-btn {
  background: linear-gradient(180deg, #ffc24a, var(--amber) 55%, #d98c10);
  border: 1px solid #ffcf6b;
  box-shadow:
    0 10px 24px -8px rgba(245,166,35,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.login-btn:hover {
  background: linear-gradient(180deg, #ffd066, #ffb422 55%, #e89412);
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -8px rgba(245,166,35,0.7),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.login-btn:active { transform: translateY(0); }

/* ── Demo CTA button polish ────────────────────────────────────── */
.demo-btn {
  position: relative;
  overflow: hidden;
}
.demo-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(245,166,35,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.demo-btn:hover::after { transform: translateX(100%); }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD: visual polish
═══════════════════════════════════════════════════════════════════ */

#panel-dashboard { animation: dash-fade-in 0.35s ease both; }
@keyframes dash-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   Round 100: Dashboard hero overrides — theme-aware.
   Pre-Round-100 these used hardcoded #16161a/#0e0e11/rgba(245,
   166,35,…) which turned into mud on every theme except
   industrial. Now everything uses --bg{0,1,2,3,4} + --amber* so
   slate / forest / dusk / ember / arctic / light all re-tint
   correctly.
   ─────────────────────────────────────────────────────────────── */
.dash-score-card {
  background:
    radial-gradient(circle at 50% 30%, var(--amber-dim), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg0));
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  box-shadow:
    0 14px 40px -16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 24px 28px 18px;
}
.dash-score-card::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  width: 140px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--amber-line), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.dash-score-ring-wrap,
.dash-score-label,
.dash-score-breakdown { position: relative; z-index: 1; }
.dash-score-value {
  z-index: 2;
  text-shadow: 0 0 16px var(--amber-glow, var(--amber-line));
}

/* Summary cards: gradient + lift on hover */
.dash-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg2), var(--bg0));
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 24px -16px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    transform var(--t-fast) ease,
    border-color var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
  overflow: hidden;
}
.dash-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--amber), transparent);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.dash-card:hover {
  transform: translateY(-2px);
  border-color: var(--amber-line);
  box-shadow:
    0 16px 32px -16px rgba(0,0,0,0.85),
    0 0 0 1px var(--amber-line);
}
.dash-card:hover::before { opacity: 1; }
/* Round 100: drop the white→gray gradient text-clip on the total.
   On the industrial theme it read as a subtle metallic; on slate/
   forest/dusk/ember/arctic/light it became unreadable or wrong-
   colored. Plain var(--text) respects theme and keeps contrast. */
.dash-card-total { color: var(--text); }

/* Alert sections: left accent rail */
.dash-alert-section {
  position: relative;
  background: linear-gradient(180deg, var(--bg2), var(--bg0));
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 16px 18px 14px 20px;
}
.dash-alert-section::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--amber);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--amber-glow, var(--amber-line));
}
.dash-alert-row {
  border-top-color: var(--line);
  transition: background var(--t-fast) ease;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
}
.dash-alert-row:hover {
  background: var(--amber-dim);
}
.dash-alert-critical::before {
  background: var(--red);
  box-shadow: 0 0 12px var(--red-dim);
}

.dash-no-alerts {
  background:
    radial-gradient(ellipse at center, var(--green-dim), transparent 70%),
    var(--green-dim);
  border: 1px solid var(--green-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 0 24px -8px var(--green-dim);
  padding: 18px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   IDENTIFIERS PANEL POLISH
   UX-only styling for the Identifiers tab. All structural styling
   for #panel-identifiers lives here.
══════════════════════════════════════════════════════════════════ */

/* Intro blurb at top of the panel */
.ident-intro {
  font-size: 13px;
  color: var(--text2);
  margin-top: var(--space-2, 8px);
  line-height: 1.65;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px;
}
.ident-intro strong { color: var(--text); }
.ident-intro-example {
  display: block;
  margin-top: 6px;
  color: var(--text3);
  font-size: 12px;
}
.ident-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 0 1px;
}

/* Numbered section blocks */
.ident-section { }
.ident-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.ident-section-step {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: .5px;
  font-weight: 600;
}
.ident-section-title {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.ident-section-desc {
  font-size: 12px;
  color: var(--text3);
  margin-top: 4px;
  line-height: 1.55;
  max-width: 600px;
}

/* Per-field micro labels in scheme rows */
.ident-field-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .5px;
  color: var(--text3);
  margin-bottom: 3px;
  text-transform: uppercase;
}

/* Friendlier empty state */
.ident-empty {
  border: 1px dashed var(--line2);
  border-radius: var(--radius-md, 6px);
  padding: 18px 20px;
  text-align: center;
  background: var(--bg2);
}
.ident-empty-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ident-empty-body {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.6;
}

/* Tag browser groups */
.ident-tag-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 6px);
  background: var(--bg2);
  margin-bottom: 10px;
  overflow: hidden;
}
.ident-tag-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--line);
}
.ident-tag-group-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: .5px;
}
.ident-tag-group-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
}
.ident-tag-group-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}
.ident-tag-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg0);
  overflow: hidden;
}
.ident-tag-pill-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  padding: 4px 8px;
  border-right: 1px solid var(--line);
}
.ident-tag-pill-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  padding: 4px 6px;
  border-right: 1px solid var(--line);
}
.ident-tag-pill-x {
  background: none;
  border: none;
  color: var(--text3);
  padding: 4px 7px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: color .15s;
}
.ident-tag-pill-x:hover { color: var(--red, #e55); }

/* ═══════════════════════════════════════════════════════════════
   PANEL CONSISTENCY
   ───────────────────────────────────────────────────────────────
   Shared building blocks used across every tab panel so the app
   feels like it was built by one person:
     .panel-header   — title + subtitle + primary action(s)
     .panel-toolbar  — search / filters / view-toggle row
     .empty-state    — friendly empty placeholder with single CTA
   Reuses existing tokens. No new colors invented.
═══════════════════════════════════════════════════════════════ */
/* Round 99: panel header hero treatment — bigger title, gradient
   background, thicker bottom separator for cleaner section breaks. */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 20px;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* Thin amber accent bar along the bottom of the header — identifies
   the active panel at a glance without being noisy. */
.panel-header::after {
  content: '';
  position: absolute;
  left: 24px; right: 24px;
  bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--amber) 0%, transparent 40%);
  opacity: 0.4;
}
.panel-header-text { min-width: 0; flex: 1; }
.panel-header-title {
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 6px;
}
.panel-header-sub {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Toolbar variant — same row metrics as .toolbar but explicitly
   placed directly under .panel-header. Inherits .toolbar styles
   when the same element carries both classes. */
.panel-toolbar {
  padding: 10px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 44px;
}
.panel-toolbar .search-box { flex: 1; min-width: 200px; max-width: 320px; }
.panel-toolbar .toolbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Sticky table headers under the toolbar so context is preserved
   when scrolling long lists. */
.table-container { max-height: calc(100vh - 260px); overflow: auto; }
.table-container thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg2);
}

/* Friendly empty state — one message, one hint, one CTA */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--text2);
  max-width: 480px;
  margin: 0 auto;
}
.empty-state-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--text3);
  opacity: 0.6;
}
.empty-state-title {
  font-family: var(--head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 0 0 6px;
}
.empty-state-hint {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 18px;
}
.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Settings sub-section description — consistent one-liners */
.settings-section .settings-section-title { letter-spacing: 0.5px; }

/* ═══════════════════════════════════════════════════════════════
   NAV POLISH — topbar + tab bar UX improvements
   Added without altering existing rules. Reuses tokens.
═══════════════════════════════════════════════════════════════ */

/* Version pill — sits next to logo */
.version-pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid var(--line2);
  padding: 2px 7px;
  border-radius: var(--radius, 4px);
  white-space: nowrap;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Subtle keyboard shortcut hint in topbar */
.topbar-hint {
  opacity: 0.65;
  font-size: 9px;
  letter-spacing: 0.4px;
}

/* Ghost / secondary button styling for less prominent actions */
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--text2);
}
.btn.ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--bg2);
}

/* User avatar — guarantee a perfect circle and uppercase initial */
.user-avatar {
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.user-avatar:empty::before {
  content: "·";
  color: var(--text3);
}

/* Tab group separator — subtle vertical line between tab clusters */
.tab-group-sep {
  width: 1px;
  align-self: center;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Stronger active-tab affordance: slight elevated background + thicker underline */
.tabs .tab {
  border-bottom-width: 3px;
  border-radius: 4px 4px 0 0;
  transition: background-color var(--t-fast, .15s), color var(--t-fast, .15s),
              border-color var(--t-fast, .15s);
}
.tabs .tab:hover {
  background: var(--bg2);
}
.tabs .tab.active {
  background: var(--bg2);
  box-shadow: inset 0 -3px 0 var(--amber), 0 -1px 0 var(--line2);
}

/* Hide / dim count badge when zero */
.tab-badge[data-zero="true"],
.tab-badge.is-zero {
  background: transparent;
  color: var(--text3);
  opacity: 0.5;
}

/* Tab bar container — fade-edge gradient on mobile via wrapper trick */
.tabs {
  position: relative;
  scrollbar-width: thin;
}

/* Mobile fade-edge affordance for horizontal scroll */
@media (max-width: 640px) {
  .tabs {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .tabs .tab { scroll-snap-align: start; }
  .tab-group-sep { display: none; }
  .topbar-hint { display: none; }
  .version-pill { font-size: 8px; padding: 1px 5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS POLISH
   Sub-nav, card treatment, toggle component, danger zone.
   Reuses existing tokens (--bg2, --line2, --space-*, --radius-*).
═══════════════════════════════════════════════════════════════════ */

/* In-page sub-nav (anchor pills) — sticky under panel header */
.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
}
.settings-subnav-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.settings-subnav-pill:hover,
.settings-subnav-pill.active {
  color: var(--text);
  border-color: var(--accent, var(--text2));
  background: var(--bg3, var(--bg2));
}

/* Card treatment for each settings sub-section */
.settings-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  scroll-margin-top: 80px;
}
.settings-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.settings-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 14px;
  flex-shrink: 0;
}
.settings-card-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  line-height: 1.5;
}
.settings-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.settings-card-hint {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text3);
}
.settings-placeholder {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text3);
  background: var(--bg);
  border: 1px dashed var(--line2);
  border-radius: var(--radius-sm);
}

/* Consistent toggle row component */
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line2);
}
.settings-toggle:first-of-type { border-top: none; }
.settings-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 999px;
  transition: 0.18s;
}
.settings-switch-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: 0.18s;
}
.settings-switch input:checked + .settings-switch-slider {
  background: var(--accent, var(--text));
  border-color: var(--accent, var(--text));
}
.settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(16px);
  background: var(--bg);
}

/* Plan line for SDS auto-update */
.settings-plan-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text2);
}
.settings-plan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--text2));
  flex-shrink: 0;
}
.settings-plan-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
}

/* Danger zone */
.settings-card-danger {
  border-color: var(--amber, var(--line2));
}
.settings-card-danger .settings-card-icon {
  color: var(--amber, var(--text2));
  border-color: var(--amber, var(--line2));
}

/* Mobile: stack and let sub-nav scroll horizontally */
@media (max-width: 640px) {
  .settings-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .settings-subnav-pill { flex-shrink: 0; }
  .settings-card { padding: var(--space-3) var(--space-4); }
  .settings-toggle {
    flex-direction: row;
    align-items: center;
  }
  .settings-card-actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
   A11Y + MOBILE PASS (v0.5.6)
   Skip link, focus rings, and mobile coverage for recently-added
   components.
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip link: visually hidden until focused ──────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 8px 14px;
  background: var(--bg2);
  color: var(--amber);
  border: 2px solid var(--amber);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: none;
}

/* ── Universal keyboard focus ring ─────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Don't double-ring native form controls that already get one */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}

/* ── Mobile coverage for recently-added panels ─────────────── */

/* Settings sub-nav: horizontally scrollable on small screens
   (existing rule at 640px already handles flex-wrap; reinforce
   here at 480px to ensure no overflow on very narrow viewports) */
@media (max-width: 480px) {
  .settings-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .settings-subnav-pill { flex-shrink: 0; white-space: nowrap; }
  .settings-card,
  .settings-section { padding: 12px 14px; }
}

/* Dashboard SDS Monitoring card: dash-card grid behaviour */
@media (max-width: 700px) {
  .dash-card {
    grid-column: span 2 !important;
  }
}
@media (max-width: 480px) {
  .dash-card {
    grid-column: 1 / -1 !important;
  }
}

/* Identifier panel sub-section cards: stack at small width */
@media (max-width: 640px) {
  .ident-section [style*="grid-template-columns:1fr 1fr 1fr"],
  .ident-section [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .ident-section { padding: 16px !important; }
  .ident-page { padding: 16px 16px 0 !important; }
  .ident-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Sync-status pill: hide text label, show only the dot */
@media (max-width: 640px) {
  #sync-status-pill #sync-status-text {
    display: none;
  }
  #sync-status-pill {
    padding: 4px 6px;
  }
}

/* Panel header: wrap title + actions row at small width */
@media (max-width: 640px) {
  .panel-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .panel-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ── Reduced motion: kill entrance animations ──────────────── */
@media (prefers-reduced-motion: reduce) {
  #login-screen::after,
  .login-card,
  #panel-dashboard,
  .panel,
  .modal,
  .side-panel,
  .toast {
    animation: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── High contrast mode ────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --text: #ffffff;
    --text2: #ffffff;
  }
  .tab.active {
    border: 2px solid var(--amber);
  }
  .btn.primary {
    border: 2px solid var(--amber);
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM REFERENCE
   The brand tokens declared in §1 are the canonical source.
   web-marketing/assets/styles.css duplicates this block (cannot
   import) and MUST be kept in sync. If you change a brand token
   here, update the marketing copy too.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   AIAssist — inline drawer (Layer 9)
   The ✨ button on a chemical row inserts a
   new <tr class="ai-assist-drawer"> beneath it
   that holds a progressive pipeline visualizer
   and the final diff / accept / reject UI.
───────────────────────────────────────────── */
.ai-assist-drawer td.ai-drawer-cell {
  background: var(--bg2);
  border-top: 1px solid var(--amber);
  padding: 0;
}
.ai-drawer-inner {
  padding: 14px 18px 18px 18px;
}
.ai-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
}
.ai-drawer-icon { color: var(--amber); font-size: 16px; }
.ai-drawer-title { font-weight: 600; color: var(--text1); }
.ai-drawer-close {
  padding: 2px 8px !important;
  font-size: 11px !important;
  margin-left: auto;
}

/* Loading state — replaces the previous 4-stage progress animation
   with a simple spinner + text. Much less visual noise while we
   wait for Gemini (or rule engine) to return. */
.ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
}
.ai-loading-text {
  font-style: italic;
}
.ai-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

.ai-result-slot:empty { display: none; }

.ai-result-card {
  padding: 6px 0 0 0;
}

/* Main row: icon + title + reasoning */
.ai-result-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0 10px 0;
}
.ai-result-icon {
  flex: 0 0 auto;
  font-size: 18px;
  padding: 6px 12px !important;
  line-height: 1;
}
.ai-result-body {
  flex: 1;
  min-width: 0;
}
.ai-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 4px;
  font-family: var(--head);
}
.ai-result-reasoning {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
  max-width: 760px;
}
.ai-replacing-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 175, 0, 0.06);
  border: 1px solid rgba(255, 175, 0, 0.25);
  border-left: 3px solid var(--amber);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text2);
  line-height: 1.5;
  max-width: 760px;
}
.ai-replacing-banner .ai-host {
  font-family: var(--mono);
  color: var(--amber);
  background: rgba(245, 166, 35, 0.08);
  padding: 1px 5px;
  border-radius: 2px;
}
.ai-replacing-banner strong {
  color: var(--text);
}

/* Round 155: "verified by N orgs" peace-of-mind badge. Small inline
   pill under the reasoning line. Green accent so it reads as a trust
   signal without competing with the primary action buttons. */
.ai-registry-badge {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text2);
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-left: 3px solid #4ade80;
  border-radius: 3px;
  line-height: 1.4;
}
.ai-registry-badge .ai-registry-icon {
  color: #4ade80;
  font-weight: 700;
}
.ai-registry-badge strong {
  color: var(--text);
}

/* Round 162: per-row SDS verification pill on the chemicals grid.
   Small inline badge adjacent to the SDS link button. Empty span
   (no content) is rendered for unverified / unfetched rows to
   reserve the DOM node for an in-place update after the batch
   fetch returns. */
.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.verified-pill:empty {
  display: none;
}
.verified-pill .verified-pill-icon {
  color: #4ade80;
  font-weight: 700;
}

/* Round 167: per-row URL health indicator. Small colored dot
   next to the SDS link button. Pre-fetch / demo renders the
   healthy color; real status patches in after the batch fetch. */
.url-health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--line);
}
.url-health-dot:empty { /* placeholder with no class → dim gray */ }
.url-health-dot.url-health-healthy { background: #4ade80; }
.url-health-dot.url-health-failing { background: var(--red); }
.url-health-dot.url-health-stale   { background: var(--amber); }
.url-health-dot[data-unfetched="1"] {
  background: var(--line);
  opacity: 0.5;
}

/* Round 162: SDS Verification card inside the chemical edit modal.
   Sits between the SDS Information form section and Additional Info.
   Read-only summary of identity + last-verified + network count. */
.sds-verification-card {
  margin: 14px 0 6px 0;
  padding: 12px 14px;
  background: rgba(74, 222, 128, 0.04);
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 5px;
}
.sds-verification-card .form-section-title {
  margin: 0 0 8px 0;
  padding: 0;
  border: none;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.sdsv-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sdsv-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.5;
}
.sdsv-label {
  color: var(--text2);
  min-width: 110px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sdsv-val {
  color: var(--text);
  flex: 1;
}
.sdsv-muted {
  color: var(--text3);
  font-style: italic;
}
.sdsv-badge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text2);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-left: 3px solid #4ade80;
  border-radius: 3px;
  align-self: flex-start;
  width: max-content;
}
.sdsv-badge .sdsv-badge-icon {
  color: #4ade80;
  font-weight: 700;
}
.sdsv-badge strong {
  color: var(--text);
}

.ai-result-flags {
  margin: 6px 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-risk-flag {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(255, 175, 0, 0.08);
  color: var(--amber);
  border: 1px solid rgba(255, 175, 0, 0.25);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ai-no-flags {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  font-style: italic;
}
.ai-diff-table {
  width: 100%;
  max-width: 820px;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.ai-diff-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
}
.ai-diff-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ai-diff-label { color: var(--text2); font-weight: 600; }
.ai-diff-old   { color: var(--text3); text-decoration: line-through; font-family: var(--mono); }
.ai-diff-new   { color: var(--green); font-family: var(--mono); font-weight: 600; }
.ai-no-diff {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  padding: 6px 0;
}
.ai-result-cadence {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  margin: 8px 0;
  padding: 6px 10px;
  background: var(--bg1);
  border-left: 2px solid var(--amber);
}
.ai-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.ai-result-error {
  padding: 10px 12px;
  background: rgba(255, 68, 68, 0.08);
  border: 1px solid rgba(255, 68, 68, 0.25);
  color: var(--red);
  font-size: 12px;
  border-radius: 4px;
}

/* Ghost button variant used by the Details toggle so it's
   visually de-emphasized vs Apply/Dismiss. */
.btn.sm.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text3);
}
.btn.sm.ghost:hover {
  background: var(--bg3);
  border-color: var(--line);
  color: var(--text2);
}

/* Details panel — collapsed by default. Expanded by AIAssist.toggleDetails.
   Contains the diff table, risk flag chips, provider badge, cadence note
   — everything that used to be in the main card but confused regular users. */
.ai-details-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  animation: ai-fade-in 0.2s ease;
}
@keyframes ai-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-details-section {
  margin-bottom: 14px;
}
.ai-details-section-title {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  margin-bottom: 6px;
}
.ai-details-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  padding: 6px 10px;
  background: var(--bg1);
  border-left: 2px solid var(--amber);
}
.ai-details-meta strong { color: var(--text2); }

/* ─────────────────────────────────────────────
   Welcome empty state — blank SDS register
   Large, visually dominant prompt to bulk-import.
───────────────────────────────────────────── */
.empty-welcome {
  text-align: center;
  padding: 56px 32px 48px 32px;
  max-width: 640px;
  margin: 24px auto;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.empty-welcome-icon {
  font-size: 56px;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(255,175,0,0.15));
}
.empty-welcome-title {
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.empty-welcome-hint {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.empty-welcome-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.empty-welcome-or {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
}
.empty-welcome-tips {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.empty-welcome-tip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.3px;
}
.btn.lg {
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   PDF Directory — folder tree view
   Collapsible folders grouped by resource + type.
───────────────────────────────────────────── */
.folder-group {
  margin: 0 0 6px 0;
}
.folder-group.folder-type {
  margin-left: 28px;
  border-left: 1px dashed var(--line);
  padding-left: 4px;
}
.folder-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.folder-header:hover {
  background: var(--bg3);
  border-color: var(--amber);
}
.folder-header-sub {
  padding: 7px 12px;
  background: var(--bg1);
  border-color: var(--line2, var(--line));
  font-size: 12px;
}
.folder-chev {
  width: 14px;
  display: inline-block;
  text-align: center;
  color: var(--text3);
  font-size: 10px;
}
.folder-icon {
  font-size: 14px;
}
.folder-name {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  flex: 1;
}
.folder-header-sub .folder-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--text2);
}
.folder-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  background: var(--bg1);
  border: 1px solid rgba(255, 175, 0, 0.2);
  border-radius: 2px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.folder-body {
  padding: 8px 0 14px 28px;
}
.folder-header-sub + .folder-body {
  padding-left: 18px;
}
.folder-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.folder-doc-row {
  display: grid;
  grid-template-columns: minmax(180px, 2.2fr) minmax(120px, 1.6fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--bg1);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.folder-doc-row:hover {
  background: var(--bg2);
  border-color: var(--line);
}
.folder-doc-title {
  font-size: 12px;
  color: var(--text1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-doc-parent {
  font-size: 11px;
  color: var(--text2);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-doc-meta {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.folder-doc-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.folder-empty {
  padding: 40px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text3);
}

/* AI status line in settings */
.ai-status-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  margin: 8px 0 12px 0;
}
.ai-status-line strong { color: var(--text2); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER 13: MOBILE FUNCTIONALITY IMPROVEMENTS
   Focuses on four things:
     1. Tap targets — all buttons ≥ 44px on mobile (iOS HIG minimum)
     2. Safe areas — notch + home indicator via env(safe-area-inset-*)
     3. Horizontal scroll containment — tables scroll inside their
        own wrapper, never force the whole page to scroll
     4. Panel header actions that don't overflow on narrow screens
   ═══════════════════════════════════════════════════════════════════ */

/* ── Safe-area insets for devices with notches / home indicators ── */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .tabs {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .toast-container {
    bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  }
  .modal-overlay {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Tap targets: buttons ≥ 44px on touch devices (iOS HIG) ─────── */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 40px;
    padding: 10px 16px;
  }
  .btn.sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .btn.lg {
    min-height: 48px;
  }
  /* Radio + checkbox labels get a larger touch area */
  label {
    min-height: 32px;
  }
  /* Prevent iOS from auto-zooming on input focus by keeping font ≥ 16px */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Panel header actions: wrap gracefully on narrow screens ───── */
@media (max-width: 640px) {
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .panel-header-text { width: 100%; }
  .panel-header-title { font-size: 18px; }
  .panel-header-sub { font-size: 12px; line-height: 1.4; }
  .panel-header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .panel-header-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* ── Horizontal scroll containment for wide tables ──────────────── */
@media (max-width: 900px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Momentum scrolling on iOS, and hide the ugly system scrollbar
       on mobile browsers that respect this. */
    scrollbar-width: thin;
  }
  /* Tables keep their natural width inside the scroller — don't
     shrink columns to the point of illegibility. */
  .table-container table {
    min-width: 640px;
  }
}

/* ── Empty-welcome state: responsive padding on very small screens */
@media (max-width: 480px) {
  .empty-welcome {
    padding: 32px 16px 28px;
    margin: 12px auto;
  }
  .empty-welcome-icon { font-size: 44px; }
  .empty-welcome-title { font-size: 18px; }
  .empty-welcome-hint { font-size: 12px; }
  .empty-welcome-actions { flex-direction: column; gap: 8px; }
  .empty-welcome-or { display: none; }
  .empty-welcome-tips { flex-direction: column; gap: 6px; }
}

/* ── Folder tree on mobile: compact layout, no horizontal overflow */
@media (max-width: 640px) {
  .folder-header { padding: 10px 12px; gap: 8px; }
  .folder-header-sub { padding: 6px 10px; }
  .folder-name { font-size: 12px; }
  .folder-count { font-size: 9px; padding: 2px 5px; }
  .folder-body { padding-left: 18px; }
  .folder-group.folder-type { margin-left: 16px; }
  /* Stack doc rows vertically on very narrow screens — the grid
     layout is unreadable below ~500px */
  .folder-doc-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }
  .folder-doc-parent,
  .folder-doc-meta { font-size: 10px; }
  .folder-doc-actions { justify-content: flex-start; }
}

/* ── AI Assist drawer on mobile: stack the action buttons ──────── */
@media (max-width: 640px) {
  .ai-drawer-inner { padding: 12px 14px 16px; }
  .ai-drawer-header { flex-wrap: wrap; }
  .ai-drawer-title {
    font-size: 13px;
    white-space: normal;
    overflow: visible;
  }
  .ai-result-main { flex-direction: column; gap: 10px; }
  .ai-result-icon { align-self: flex-start; }
  .ai-result-reasoning { font-size: 13px; max-width: 100%; }
  .ai-result-actions { flex-wrap: wrap; }
  .ai-result-actions .btn { flex: 1 1 calc(50% - 4px); }
  .ai-diff-table { font-size: 11px; }
  .ai-diff-table th,
  .ai-diff-table td { padding: 4px 6px; }
}

/* ── Chemicals / Equipment / Employees row action cells ─────────
   On mobile, tall multi-button action cells don't fit — collapse
   the chemical actions to icons only and let the name column use
   whatever remains. */
@media (max-width: 640px) {
  #chem-tbody .actions,
  #eq-grid .actions,
  #emp-grid .actions {
    white-space: nowrap;
  }
  #chem-tbody td.name {
    font-size: 12px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 18: UI COLOUR POLISH
   - brighter text hierarchy (done in :root above)
   - softer success green (done in :root above)
   - keyboard focus rings via :focus-visible so tab navigation is
     visible without polluting mouse-click UX
   - subtle hover transitions on interactive surfaces for consistency
   ═══════════════════════════════════════════════════════════════════ */

/* Focus ring — only shows on keyboard focus, not on mouse click.
   :focus-visible is supported in all modern browsers; :focus is a
   fallback for older ones (and is suppressed by the rule below when
   the browser supports :focus-visible). */
.btn:focus-visible,
.tab:focus-visible,
.sub-tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[onclick]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Suppress the older :focus outline only when the browser supports
   :focus-visible (which is where we take over with the ring above).
   Browsers without :focus-visible support still get the default
   outline via :focus — progressive enhancement, no accessibility
   regression. */
@supports selector(:focus-visible) {
  .btn:focus:not(:focus-visible),
  .tab:focus:not(:focus-visible),
  .sub-tab:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible) {
    outline: none;
  }
}

/* Subtle amber underglow on .btn hover for consistency with the
   existing hover states that only change border colour. Adds a
   1px box-shadow glow so the hover is more tactile. Respects
   prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover {
    box-shadow: 0 0 0 1px var(--amber-line), 0 2px 8px -2px rgba(245,166,35,0.15);
  }
  .btn.primary:hover {
    box-shadow: 0 0 0 1px var(--amber), 0 4px 14px -4px rgba(245,166,35,0.45);
  }
  .btn.danger:hover {
    box-shadow: 0 0 0 1px rgba(255,68,68,0.4), 0 2px 8px -2px rgba(255,68,68,0.2);
  }
  .btn.success:hover {
    box-shadow: 0 0 0 1px rgba(45,212,160,0.4), 0 2px 8px -2px rgba(45,212,160,0.2);
  }
}

/* Slightly brighter status badges — the soft success green means the
   "current" badge now reads a touch less saturated, compensate by
   bumping its background tint. */
.badge.current {
  background: rgba(45,212,160,0.14);
}

/* ── Branded text selection (instant polish) ─────────────────────
   Instead of the browser default blue, text selection uses the
   brand amber with a dark foreground. Works everywhere selection
   is possible. */
::selection {
  background: rgba(245,166,35,0.35);
  color: #fff;
}
::-moz-selection {
  background: rgba(245,166,35,0.35);
  color: #fff;
}

/* ── Custom scrollbars for the dark theme ────────────────────────
   The default white/grey scrollbars on Mac and Windows look wrong
   against our near-black backgrounds. Firefox uses scrollbar-color;
   WebKit-based browsers use ::-webkit-scrollbar-*. Both set so we
   get consistent treatment everywhere. Narrow (10px) and unobtrusive
   with a subtle amber thumb on hover. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) var(--bg0);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--bg0);
}
*::-webkit-scrollbar-thumb {
  background: var(--bg4);
  border-radius: 6px;
  border: 2px solid var(--bg0);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--amber2);
}
*::-webkit-scrollbar-corner {
  background: var(--bg0);
}

/* ── Panel header separation ─────────────────────────────────────
   Adds a subtle dashed rule under every panel header so it reads
   as a distinct section from the content below. Matches the
   industrial-terminal aesthetic without being visually loud. */
.panel-header {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 16px;
}

/* ── Tab active state: stronger visual weight ────────────────────
   The current active tab used a border-bottom + amber color, but
   at a glance it could blend with the other tabs. Thicken the
   border, add a faint amber background glow so the active tab is
   unmistakable. */
.tab.active {
  border-bottom-width: 2px;
  background: linear-gradient(180deg, rgba(245,166,35,0.02), rgba(245,166,35,0.08));
}