/*
 * XCore Intelligence Platform — App Shell CSS
 * Phase 22-01: VSCode Dark Modern 2026 palette + UniFi-style grid shell
 * Phase 27-07 (2026-08-16): Palette baseline patched — swapped from
 *   VSCode Dark Modern (soft-brown near-black) to Ubiquiti gray/black neutrals
 *   per CONTEXT.md §Palette & UI substrate (LOCKED). Full visual polish is
 *   deferred to Phase 30.5 UX Pass — this patch is a color-token substitution
 *   only, no template re-render.
 *
 * Original variable NAMES kept intact (--bg-editor, --bg-sidebar, --bg-input,
 * --bg-panel, --border-primary, --border-input, --fg-primary, --fg-muted, etc.)
 * so Phase 22-26 templates that reference var(--bg-panel), var(--bg-editor),
 * etc. get the new gray/black values without any template changes. Added
 * CONTEXT-locked aliases (--bg, --bg-card, --bg-hover, --border, --border-strong,
 * --fg, --ok, --warn, --alarm, --off, --radius) for Phase 27+ code that uses
 * the CONTEXT-locked names directly.
 */

/* ---------------------------------------------------------------------------
 * 1. CSS custom properties (design tokens)
 * ------------------------------------------------------------------------ */
:root {
  /* ============================================================
   * DESIGN SYSTEM — Locked by Phase 30.5. Do not add ad-hoc
   * colours, spacings, or radii below without updating this block.
   * Aliases preserved for Phase 22-27 template compatibility.
   * ============================================================ */

  /* Palette — Ubiquiti gray/black neutrals + bright cool blue accent */
  --bg:              #0F0F10;
  --bg-panel:        #1A1A1D;
  --bg-card:         #212125;
  --bg-hover:        #2A2A2D;
  --border:          #2E2E33;
  --border-strong:   #3A3A40;
  --fg:              #E6E6E8;
  --fg-muted:        #8A8A90;
  --accent:          #00A2FF;
  --accent-hover:    #0088D6;
  --ok:              #22C55E;
  --warn:            #F59E0B;
  --alarm:           #EF4444;
  --off:             #6B7280;
  --signout-fg:      #8A8A90;

  /* Spacing scale — 4/8/16/24px steps only, no arbitrary values */
  --pad-1:  4px;
  --pad-2:  8px;
  --pad-3:  16px;
  --pad-4:  24px;

  /* Radii — sharp everywhere. Pill 3px per Phase 30.5-01 sign-off
     (aligns with the "sharp corners everywhere" CONTEXT lock). */
  --radius:      4px;
  --radius-sm:   2px;
  --radius-pill: 3px;

  /* Shell geometry — sidebar 52px per Phase 30.5-01 sign-off
     (CONTEXT-locked; supersedes shipped 64px). Icons render at 20px
     inside the 52px slot; --sidebar-width-expanded stays 220px. */
  --sidebar-width:          52px;
  --sidebar-width-expanded: 220px;
  --topbar-height:          44px;

  /* Typography — Inter self-hosted (SEC-02 no CDN) with system fallback */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ============================================================
   * Legacy aliases — preserved for template compatibility
   * (40+ Phase 22-27 templates reference these names). Do NOT remove.
   * ============================================================ */
  --bg-editor:       var(--bg);          /* main content area */
  --bg-sidebar:      var(--bg-panel);    /* sidebar + activity bar + status bar */
  --bg-input:        var(--bg-hover);    /* text inputs + dropdowns + checkboxes */
  --border-primary:  var(--border);      /* subtle separation */
  --border-input:    var(--border-strong); /* input boxes, secondary dividers */
  --fg-primary:      var(--fg);          /* body text */
  --alarm-ok:        var(--ok);          /* green */
  --alarm-warn:      var(--warn);        /* amber warning */
  --alarm-crit:      var(--alarm);       /* red critical */
  --alarm-none:      var(--off);         /* neutral gray unmonitored */
  --error:           var(--alarm);       /* error messages */
  --warning:         var(--warn);        /* amber warning */
  --signout-hover-fg:var(--fg);          /* Sign Out hover text */
}

/* ---------------------------------------------------------------------------
 * 2. @font-face — Inter self-hosted (SEC-02: no CDN)
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: Inter;
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
 * 3. Base reset + typography
 * ------------------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg-editor);
  color: var(--fg-primary);
  overflow-x: hidden;
}

h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 500; }

small  { font-size: 13px; }
.tiny  { font-size: 11px; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * 4. Shell grid — top bar + sidebar + content
 * ------------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* When sidebar is expanded, widen column 1 */
body.sidebar-expanded .shell {
  grid-template-columns: 220px 1fr;
}

/* ---------------------------------------------------------------------------
 * 5. Top bar
 * ------------------------------------------------------------------------ */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-primary);
  position: relative;
  z-index: 5;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-primary);
  flex-shrink: 0;
  min-width: 40px;
}

.topbar-user {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 13px;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Status icon buttons in top bar */
.status-icon {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-icon:hover {
  background: var(--bg-input);
  color: var(--fg-primary);
}
.status-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* Mobile hamburger */
.mobile-menu-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: none;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* ---------------------------------------------------------------------------
 * 5b. Topbar chrome parity extensions — Phase 30.6-01.
 *
 * Adds hexagon logo + Orbitron wordmark + site identity dropdown +
 * reordered right cluster. Applies to pages using the new _shell-topbar.html
 * partial (starts with super/firmware.html; base.html-consuming pages get
 * migrated in Wave 2 plans 30.6-02..06).
 *
 * The .topbar container stays flex (compatible with base.html). Layout is
 * driven by the spacer element pushing the right cluster to the far edge.
 * ------------------------------------------------------------------------ */

/* Self-hosted Orbitron (SEC-02 — no Google Fonts CDN). Body copy stays Inter. */
@font-face {
  font-family: 'Orbitron';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Orbitron-Bold.woff2') format('woff2');
}

/* Left: hexagon logo + Orbitron wordmark. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  flex-shrink: 0;
}
.xc-hex-logo {
  color: var(--accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.2));
}
.xc-wordmark {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--fg);
  line-height: 1;
  white-space: nowrap;
}
.xc-wordmark .xh { color: var(--accent); }

/* Super admin badge — mirrors site-identity slot on cross-tenant pages
   (v0.3.1 item #8). Same padding + pill radius as .site-identity-btn so the
   left-center slot lines up visually across tenant + super shells. */
.topbar-super-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 96, 96, 0.08);
  color: #ff9d9d;
  border: 1px solid rgba(255, 96, 96, 0.35);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 500 13px/1 var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-super-badge .super-badge-icon { font-size: 14px; }

/* Left-center: site identity dropdown (functional on cloud). */
.topbar-site-identity {
  position: relative;
  flex-shrink: 0;
}
.site-identity-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 500 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.site-identity-btn:hover { color: var(--fg); border-color: var(--accent); }
.site-identity-btn .site-icon  { font-size: 12px; }
.site-identity-btn .site-label { color: var(--fg); }
.site-identity-btn .site-caret {
  font-size: 10px;
  opacity: 0.7;
}
.site-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.site-dropdown[hidden] { display: none; }
.site-dropdown-item {
  display: block;
  padding: 8px 12px;
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.site-dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.site-dropdown-item.active { background: var(--bg-hover); color: var(--accent); }
.site-dropdown-item .tenant {
  color: var(--fg-muted);
  font-size: 11px;
  margin-left: 4px;
}
.site-dropdown-empty {
  padding: 8px 12px;
  color: var(--fg-muted);
  font-size: 12px;
  font-style: italic;
}

/* Spacer between site identity and right cluster — pushes right cluster to end. */
.topbar-spacer { flex: 1; min-width: 0; }

/* When .topbar-brand is present (new shell), the .topbar-user pill should NOT
   expand and center (that behavior comes from base.html's inline topbar where
   user pill is the only middle element). Instead, keep it as a compact pill
   floated to the right cluster. */
.topbar:has(> .topbar-brand) .topbar-user {
  flex: 0 0 auto;
  justify-content: flex-start;
  color: var(--fg);
  font-size: 13px;
  padding: 4px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar:has(> .topbar-brand) .topbar-user svg {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
 * 6. Sidebar
 * ------------------------------------------------------------------------ */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.15s ease;
}

/* Nav item list */
.nav-items {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
}

.nav-items li {
  display: flex;
  align-items: center;
}

.nav-items li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--fg-muted);
  text-decoration: none;
  width: 100%;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.1s, color 0.1s;
}

.nav-items li a:hover {
  background: var(--bg-input);
  color: var(--fg-primary);
}

.nav-items li.active > a {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(0, 162, 255, 0.08);
}

.nav-items li a svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Nav label — hidden when sidebar is collapsed (not expanded) */
.nav-items li a span,
.signout-btn > span {
  opacity: 1;
  transition: opacity 0.1s;
  overflow: hidden;
  white-space: nowrap;
}

body:not(.sidebar-expanded) .nav-items li a span,
body:not(.sidebar-expanded) .signout-btn > span {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Sign Out button — pinned to bottom, NEUTRAL (NOT red) per CONTEXT.md */
.signout-form {
  margin-top: auto;
  padding: 8px 0;
  border-top: 1px solid var(--border-primary);
}

.signout-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  width: 100%;
  background: none;
  border: none;
  color: var(--signout-fg);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
}
.signout-btn:hover {
  color: var(--signout-hover-fg);
  background: var(--bg-input);
}
.signout-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Sidebar expand toggle button */
.sidebar-toggle {
  background: none;
  border: none;
  border-top: 1px solid var(--border-primary);
  color: var(--fg-muted);
  cursor: pointer;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
}
.sidebar-toggle:hover {
  background: var(--bg-input);
  color: var(--fg-primary);
}
.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Toggle label text (hidden when collapsed) */
.sidebar-toggle-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.1s;
}
body.sidebar-expanded .sidebar-toggle-label {
  opacity: 1;
  width: auto;
}

/* ---------------------------------------------------------------------------
 * 7. Main content area
 * ------------------------------------------------------------------------ */
.content {
  grid-column: 2;
  grid-row: 2;
  padding: 24px;
  overflow-y: auto;
  background: var(--bg-editor);
}

/* ---------------------------------------------------------------------------
 * 8. Error container + confirm modal helpers
 * ------------------------------------------------------------------------ */
#error-container:empty  { display: none; }
#confirm-modal:empty    { display: none; }

/* ---------------------------------------------------------------------------
 * 9. Coming-soon placeholder
 * ------------------------------------------------------------------------ */
.coming-soon {
  color: var(--fg-muted);
  font-size: 15px;
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * 10. Utility classes
 * ------------------------------------------------------------------------ */
.text-muted  { color: var(--fg-muted); }
.text-accent { color: var(--accent); }
.text-error  { color: var(--error); }
.text-ok     { color: var(--alarm-ok); }
.text-warn   { color: var(--alarm-warn); }
.text-crit   { color: var(--alarm-crit); }

/* Alarm severity pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}
.pill-ok   { background: rgba(76,175,120,0.15); color: var(--alarm-ok); }
.pill-warn { background: rgba(212,160,23,0.15);  color: var(--alarm-warn); }
.pill-crit { background: rgba(224,84,84,0.15);   color: var(--alarm-crit); }
.pill-none { background: rgba(91,154,213,0.15);  color: var(--alarm-none); }

/* ---------------------------------------------------------------------------
 * 11. Mobile breakpoint (<768px) — sidebar becomes off-canvas overlay
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .shell {
    grid-template-columns: 0 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
  }

  body.sidebar-expanded .shell {
    grid-template-columns: 0 1fr;  /* expanded class unused on mobile */
  }

  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: -220px;
    width: 220px;
    height: calc(100vh - var(--topbar-height));
    z-index: 20;
    transition: left 0.2s ease;
    box-shadow: none;
  }

  body.sidebar-open .sidebar {
    left: 0;
    box-shadow: 4px 0 16px rgba(0,0,0,0.5);
  }

  /* Always show labels on mobile when sidebar is open */
  body.sidebar-open .nav-items li a span,
  body.sidebar-open .signout-btn > span {
    opacity: 1;
    width: auto;
  }

  .content {
    grid-column: 1 / -1;  /* content spans full width */
  }

  .mobile-menu-btn {
    display: flex;
  }
}

/* ============================================================
   Cloud Ops (/super/ops) — Plan 22-05
   ============================================================ */

/* Page chrome — Phase 30.5-07 (Plan F) polish: legacy hex fallbacks scrubbed,
 * all colours flow through Plan A tokens. Detailed per-page overrides live in
 * super.css scoped by .ops-page ancestor selectors. */
.ops-page {
  padding: var(--pad-3);
}

.ops-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 var(--pad-3) 0;
}

/* Tab pill nav (base — super.css .ops-page overrides to Ubiquiti underline) */
.ops-tabs {
  display: flex;
  gap: var(--pad-2);
  margin-bottom: var(--pad-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--pad-2);
}

.ops-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 6px var(--pad-3);
  transition: background 100ms, color 100ms;
}

.ops-tab:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.ops-tab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Content area */
.ops-content {
  min-height: 12rem;
}

/* Generic ops table */
.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--fg);
}

.ops-table th {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: var(--pad-2) var(--pad-3);
  text-align: left;
  text-transform: uppercase;
}

.ops-row {
  border-bottom: 1px solid var(--border);
}

.ops-row:last-child {
  border-bottom: none;
}

.ops-row--suspended {
  background: rgba(239, 68, 68, 0.06);
}

.ops-cell {
  padding: var(--pad-2) var(--pad-3);
  vertical-align: middle;
}

.ops-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ops-cell--domain,
.ops-cell--provider {
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  font-size: 13px;
}

.ops-cell--hash {
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  font-size: 13px;
  color: var(--fg-muted);
  cursor: default;
}

.ops-cell--time {
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  font-size: 13px;
  white-space: nowrap;
}

.ops-cell--error {
  color: var(--alarm);
  font-size: 13px;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-cell--empty {
  color: var(--fg-muted);
  font-style: italic;
  padding: var(--pad-4) var(--pad-3);
  text-align: center;
}

.ops-cell--actions {
  white-space: nowrap;
}

/* Status / result badges — Plan A tokens throughout, sharp 3px. */
.ops-badge {
  border-radius: var(--radius-pill);
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px var(--pad-2);
}

.ops-badge--ok,
.ops-badge--result-sent           { background: rgba(34, 197, 94, 0.15);  color: var(--ok); }
.ops-badge--warning,
.ops-badge--result-rate_limited   { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.ops-badge--failed,
.ops-badge--result-failed         { background: rgba(239, 68, 68, 0.15);  color: var(--alarm); }
.ops-badge--missing,
.ops-badge--result-skipped,
.ops-badge--default               { background: rgba(107, 114, 128, 0.20); color: var(--off); }
.ops-badge--suspended             { background: rgba(239, 68, 68, 0.20);  color: var(--alarm); }
.ops-badge--override,
.ops-badge--channel-email         { background: rgba(0, 162, 255, 0.15);  color: var(--accent); }
.ops-badge--channel-sms           { background: rgba(139, 92, 246, 0.15); color: #C4B5FD; }
.ops-badge--channel-voice         { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.ops-badge--channel-push          { background: rgba(34, 197, 94, 0.15);  color: var(--ok); }

/* Inline forms within table cells */
.ops-inline-form {
  align-items: center;
  display: flex;
  gap: 6px;
}

.ops-num-input {
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 13px;
  padding: 4px 6px;
  width: 6rem;
}

.ops-num-input:focus {
  border-color: var(--accent);
  outline: none;
}

/* Buttons */
.ops-btn {
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px var(--pad-3);
  transition: background 100ms;
}

.ops-btn:hover { background: var(--accent-hover); }

.ops-btn--sm {
  font-size: 12px;
  padding: 4px var(--pad-2);
}

.ops-btn--suspend {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: var(--alarm);
}

.ops-btn--suspend:hover {
  background: rgba(239, 68, 68, 0.25);
}

.ops-btn--restore {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--ok);
}

.ops-btn--restore:hover {
  background: rgba(34, 197, 94, 0.25);
}

/* Ledger filter form */
.ops-filter-form {
  align-items: flex-end;
  display: flex;
  gap: var(--pad-3);
  margin-bottom: var(--pad-3);
}

.ops-filter-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 500;
  gap: var(--pad-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ops-filter-select {
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 14px;
  padding: 6px var(--pad-2);
}

/* Ledger note */
.ops-note {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: var(--pad-2);
}

/* Ledger table — wider */
.ops-table--ledger {
  table-layout: fixed;
}

/* Cert status row colouring */
.ops-row--cert-failed { background: rgba(239, 68, 68, 0.06); }
.ops-row--cert-warning { background: rgba(245, 158, 11, 0.05); }


/* ---------------------------------------------------------------------------
 * Phase 24-02 SITE-01/02/03 — site tile grid + station tile ring-gauge.
 *
 * VISION §7.e LOCKED: station-tile + ring-gauge CSS ported from
 * xcore-x86/internal/web/static/index.html:297-317. DO NOT redesign.
 *
 * Site-tile grid layout is Ubiquiti-inspired (mockups/xcore-unifi-v4.html):
 * auto-fit repeating minmax(280px, 1fr) — cards flow naturally at any width.
 * ------------------------------------------------------------------------ */

.sites-page {
  padding: var(--pad-3);
}

.sites-page .page-header {
  margin-bottom: var(--pad-3);
  padding-bottom: var(--pad-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pad-3);
}

.sites-page .page-header h1 {
  margin: 0 0 var(--pad-1) 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
}

.sites-page .page-sub {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
}

.error-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--alarm);
  color: var(--alarm);
  padding: var(--pad-2) var(--pad-3);
  border-radius: var(--radius);
  margin-bottom: var(--pad-3);
}

.empty-state {
  padding: var(--pad-4);
  text-align: center;
  color: var(--fg-muted);
  background: var(--bg-panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* Site tile grid — auto-fit responsive */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pad-3);
}

/* Site tile — Phase 30.5-06 polish (Ubiquiti palette + 3px LEFT-border accent).
   Radius 4 kept sharp per feedback-ui-mockup-simplicity.md. */
.site-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--off);
  border-radius: var(--radius);
  padding: var(--pad-3);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.site-tile:hover {
  background: var(--bg-card);
}

/* Left-border color codes worst-of station status (3px accent).
   Offline uses grey dashed border per Plan 30.5-06 tile-state rule. */
.site-tile--ok      { border-left-color: var(--ok); }
.site-tile--warn    { border-left-color: var(--warn); }
.site-tile--crit    { border-left-color: var(--alarm); }
.site-tile--unmon   { border-left-color: var(--accent); }
.site-tile--offline { border-left-color: var(--off); border-left-style: dashed; }

.site-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--pad-3);
  gap: var(--pad-2);
}

.site-tile-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
}

.site-tile-status.pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px var(--pad-2);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-hover);
  color: var(--fg-muted);
}
.site-tile-status.pill.ok      { background: rgba(34, 197, 94, 0.15);  color: var(--ok); }
.site-tile-status.pill.warn    { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.site-tile-status.pill.crit    { background: rgba(239, 68, 68, 0.15);  color: var(--alarm); }
.site-tile-status.pill.unmon   { background: rgba(0, 162, 255, 0.15);  color: var(--accent); }
.site-tile-status.pill.offline { background: rgba(107, 114, 128, 0.20); color: var(--off); }

.site-tile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pad-2);
}
.site-tile-stats .stat { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.site-tile-stats .stat-label {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-tile-stats .stat-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
}
.site-tile-stats .stat-value.alarm { color: var(--alarm); }
.site-tile-stats .stat-value.zero  { color: var(--fg-muted); }
.site-tile-stats .stat-value.small { font-size: 13px; font-weight: 400; color: var(--fg-muted); }

/* Site dashboard page */
.site-dashboard {
  padding: 16px;
}

.site-dashboard .page-header {
  margin-bottom: 16px;
}

.site-dashboard .breadcrumb {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.site-dashboard .breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
}
.site-dashboard .breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.site-dashboard .breadcrumb-sep {
  margin: 0 6px;
  color: var(--border-input);
}

.site-dashboard h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg-primary);
}

/* Station tile grid */
.station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* Station tile — Phase 30.6-02 (Wave 2) polish port.
   LITERAL COPY of xcore-x86 index.html station-tile per feedback-cloud-xcore-
   literal-parity.md (locked 2026-08-18). Do NOT restyle without XCore
   counterpart update. */
.station-tile {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-muted);   /* status accent — overridden per state */
  border-radius: var(--radius);
  padding: var(--pad-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
}
.station-tile:hover {
  border-color: var(--border-strong);
}

.station-tile.st-ok           { border-left-color: var(--alarm-ok); }
.station-tile.st-warning      { border-left-color: var(--alarm-warn); animation: st-glow-warn 2.4s ease-in-out infinite; }
.station-tile.st-critical     { border-left-color: var(--alarm-crit); animation: st-glow-crit 2.4s ease-in-out infinite; }
.station-tile.st-unmonitored  { border-left-color: var(--alarm-none); }
.station-tile.st-offline      { border-left-color: var(--off); }
@keyframes st-glow-crit { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 14px 2px rgba(239,68,68,.22); } }
@keyframes st-glow-warn { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 50% { box-shadow: 0 0 10px 2px rgba(245,158,11,.18); } }

/* Ring gauge — SVG geometry driven by ring_gauge template func
   (site.ComputeRingGauge, VISION §7.e verbatim JS port). */
.ring-gauge {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.ring-gauge svg { width: 100%; height: 100%; }
.ring-score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
}

.station-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
  line-height: 1.3;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v3 lock: no "N zones" text on tiles. Class hook preserved for template
   compatibility; visually hidden. */
.station-zones-badge {
  display: none;
}
.station-mute-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--alarm-warn);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: static;
  top: auto;
  right: auto;
}

/* v3 per-tile alarm-count pills — stacked vertically at bottom of tile.
   Single severity → one pill centered. Both severities → two pills stacked.
   LITERAL parity with XCore v3 (mockups/xcore-dashboard-v3.html). */
.station-alarm-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  width: 100%;
}
.station-alarm-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.station-alarm-pills .pill .count {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
}
.station-alarm-pills .pill-crit {
  color: var(--alarm-crit);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.30);
}
.station-alarm-pills .pill-warn {
  color: var(--alarm-warn);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.30);
}

/* v3 dashboard empty-state (first-run, no stations reporting yet). */
.empty-dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pad-4);
}
.empty-dashboard .empty-card {
  background: var(--bg-panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 48px 32px;
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.empty-dashboard .empty-icon {
  font-size: 44px;
  color: var(--accent);
  margin-bottom: var(--pad-2);
}
.empty-dashboard h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--pad-2);
}
.empty-dashboard p {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: var(--pad-3);
}

/* ---------------------------------------------------------------------------
 * Phase 24-03 SITE-04/05/08/09 — CRUD/rollup/breadcrumb additions
 * ------------------------------------------------------------------------ */

/* Breadcrumb (SITE-08) — shown only when SiteCount > 1 (per-page conditional). */
.breadcrumb {
  padding: 8px 16px 0 16px;
  font-size: 13px;
  color: var(--fg-muted);
}
.breadcrumb a         { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover   { text-decoration: underline; }
.breadcrumb-sep       { margin: 0 8px; color: var(--fg-muted); }
.breadcrumb-current   { color: var(--fg-primary); }

/* Rollup (SITE-09) — collapsible per-site groups (Phase 30.5-06 polish). */
.rollup-page details          { margin-bottom: var(--pad-3); }
.rollup-page summary          { list-style: none; cursor: pointer; }
.rollup-page summary::-webkit-details-marker { display: none; }
.rollup-site-header           {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-2) var(--pad-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
}
.rollup-site-header::before {
  content: "\25B8";
  color: var(--fg-muted);
  margin-right: var(--pad-2);
  transition: transform 100ms;
  display: inline-block;
}
.rollup-page details[open] .rollup-site-header::before { transform: rotate(90deg); }
.rollup-site-header .site-name    { font-weight: 600; color: var(--fg); }
.rollup-site-header .site-stats   { font-size: 13px; color: var(--fg-muted); }

/* Modal (SITE-04 add, SITE-05 delete) — Phase 30.5-06 polish. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-4);
  min-width: 320px;
  max-width: 500px;
  color: var(--fg);
}
.modal h2               { margin-top: 0; margin-bottom: var(--pad-1); font-size: 20px; font-weight: 600; }
.modal .modal-sub       { color: var(--fg-muted); font-size: 13px; margin: 0 0 var(--pad-3) 0; }
.modal .warn            { color: var(--fg-muted); font-size: 13px; margin-bottom: var(--pad-3); }
.modal .warn code       { font-family: Consolas, "Courier New", monospace; color: var(--fg); }
.modal label            { display: block; font-size: 13px; margin-top: var(--pad-2); margin-bottom: var(--pad-1); color: var(--fg); }
.modal input[type=text] {
  width: 100%;
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  padding: var(--pad-2);
  border-radius: var(--radius);
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: var(--pad-3);
}
.modal input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 162, 255, 0.25); }
.modal-actions          { display: flex; justify-content: flex-end; gap: var(--pad-2); margin-top: var(--pad-3); }
.btn                    {
  display: inline-flex;
  align-items: center;
  gap: var(--pad-2);
  padding: var(--pad-2) var(--pad-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}
.btn-primary            { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover      { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary          { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover    { background: var(--bg-hover); }
.btn-danger             { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.btn-danger:hover       { filter: brightness(0.9); }

/* Sites-list header actions (SITE-04 Add + SITE-09 Rollup link) */
.sites-page-header      { display: flex; justify-content: space-between; align-items: center; }
.sites-page-actions     { display: flex; gap: 8px; }

/* ---------------------------------------------------------------------------
 * Phase 24-04 SITE-07 — /super/fleet cross-tenant XCore visibility page.
 * Filter chips + search + sortable table + status pill/badge extensions.
 * ------------------------------------------------------------------------ */
.fleet-page                 { padding: 16px 24px; }
.fleet-title                { margin: 0 0 16px 0; font-size: 20px; font-weight: 600; }

.fleet-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fleet-search {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--fg-primary);
  font-size: 13px;
  min-width: 280px;
}

.fleet-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--fg-primary);
  font-size: 12px;
  cursor: pointer;
}
.chip:hover           { border-color: var(--accent); }
.chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fleet-table th,
.fleet-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-input);
}
.fleet-table th {
  background: var(--bg-input);
  font-weight: 600;
  color: var(--fg-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fleet-table th a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.fleet-table th a:hover { color: var(--accent); }

.fleet-row--ok        { }
.fleet-row--warn      { background: rgba(212,160,23,0.05); }
.fleet-row--crit      { background: rgba(224,84,84,0.05); }
.fleet-row--offline   { background: rgba(107,114,128,0.05); color: var(--fg-muted); }
.fleet-row--unclaimed { background: rgba(91,154,213,0.05); }
.fleet-row--empty td  { text-align: center; padding: 24px; }
.fleet-row--error td  { text-align: center; padding: 12px; color: var(--alarm-crit); }

/* Reuse pill from §10; add fleet-specific status modifiers.
 * Phase 30.5-07 (Plan F): tokenised to Plan A tokens. Sharp 3px per app.css .pill base. */
.pill--ok        { background: rgba(34, 197, 94, 0.15);   color: var(--ok); }
.pill--warn      { background: rgba(245, 158, 11, 0.15);  color: var(--warn); }
.pill--crit      { background: rgba(239, 68, 68, 0.15);   color: var(--alarm); }
.pill--offline   { background: rgba(107, 114, 128, 0.20); color: var(--off); }
.pill--unclaimed { background: rgba(0, 162, 255, 0.15);   color: var(--accent); }

.alarm-count {
  display: inline-block;
  background: var(--alarm-crit);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}
.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}
.badge--warn { background: rgba(212,160,23,0.15); color: var(--alarm-warn); }

.btn-small {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--fg-primary);
  text-decoration: none;
  display: inline-block;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }

/* XCore detail page */
.xcore-detail-page          { padding: 16px 24px; }
.xcore-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.xcore-detail-facts {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 8px;
  column-gap: 16px;
  max-width: 720px;
}
.xcore-detail-facts dt { font-weight: 600; color: var(--fg-muted); }
.xcore-detail-facts dd { margin: 0; }

/* ---------------------------------------------------------------------------
 * Phase 30.5-01 Task 7b — System banner palette normalization.
 *
 * Priority chain (order LOCKED per 30.5-RESEARCH.md line 207 — HTML/order
 * MUST NOT change; only CSS may):
 *   impersonation-banner > soft-delete-banner > suspend-banner >
 *   ownership-pending-banner > admin-deficit-banner > VPN cred-countdown.
 *
 * Class references match the existing partial IDs/classes (impersonation
 * uses .banner .banner-impersonation classes; the other four use their
 * #id-banner IDs). All colours reference DESIGN SYSTEM tokens.
 *
 * Font-family override: partials previously each hand-set the system font
 * stack; consolidated here to var(--font-body) so all banners inherit
 * Inter with the same fallback chain as shell chrome.
 *
 * Base banner reset: full-width, no radius (banners are top-of-page bars),
 * spacing to the scale, Inter font, 14px body-adjacent size.
 * ------------------------------------------------------------------------ */
.banner,
#soft-delete-banner,
#suspend-banner,
#ownership-pending-banner,
#admin-deficit-banner {
  padding: var(--pad-2) var(--pad-3);
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  border-radius: 0;
}
.banner a,
#soft-delete-banner a,
#suspend-banner a,
#ownership-pending-banner a,
#admin-deficit-banner a {
  color: inherit;
  text-decoration: underline;
}

/* Impersonation — highest priority; --warn on dark bg for strong visibility.
   Bright orange original (#ff9500) mapped to --warn (#F59E0B) which is the
   Plan A warning token; text uses --bg for max contrast against amber. */
.banner-impersonation {
  background: var(--warn);
  color: var(--bg);
  font-weight: 600;
}
.banner-impersonation code {
  background: var(--bg);
  color: var(--warn);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.banner-impersonation button,
.banner-impersonation input[type=submit] {
  background: var(--bg);
  color: var(--warn);
  border: 0;
  padding: var(--pad-1) var(--pad-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-body);
}

/* Soft-delete — warning tone; user has days to restore. */
#soft-delete-banner {
  background: var(--warn);
  color: var(--bg);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pad-3);
  flex-wrap: wrap;
}
#soft-delete-banner button {
  background: var(--bg);
  color: var(--warn);
  border: 0;
  padding: var(--pad-2) var(--pad-3);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Suspend — highest destructive severity; account is halted. */
#suspend-banner {
  background: var(--alarm);
  color: #fff;
  font-weight: 600;
  text-align: center;
}
#suspend-banner a {
  color: #fff;
  text-decoration: underline;
}
.suspend-banner__title {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.suspend-banner__body {
  font-weight: 400;
  margin-top: var(--pad-1);
}

/* Ownership-pending — action-needed warn tone. */
#ownership-pending-banner {
  background: var(--warn);
  color: var(--bg);
}
#ownership-pending-banner a {
  color: var(--bg);
  font-weight: 600;
  text-decoration: underline;
  margin-left: var(--pad-1);
}

/* Admin-deficit — action-needed warn tone, softer than ownership-pending. */
#admin-deficit-banner {
  background: var(--bg-panel);
  color: var(--warn);
  border-left: 3px solid var(--warn);
}
#admin-deficit-banner a {
  color: var(--warn);
  font-weight: 600;
  text-decoration: underline;
  margin-left: var(--pad-1);
}

/* ─── Phase 25 Wave 3 — Escalation Profile Builder ───────────────────────── */

.escalation-profiles-page { padding: 16px 24px; }
.escalation-profiles-page .page-actions { display: flex; gap: 12px; align-items: center; }

.escalation-profiles-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.profile-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.profile-card__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-card__default-pill {
  background: rgba(212,160,23,0.15);
  color: var(--alarm-warn);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Escalation profile edit page */
.escalation-profile-edit { padding: 16px 24px; }
.escalation-profile-edit .form-row { margin-bottom: 16px; }
.escalation-profile-edit .form-row label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--fg-muted); }
.escalation-profile-edit .form-input, .escalation-profile-edit .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--fg-primary);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
}
.escalation-profile-edit .form-input:focus, .escalation-profile-edit .form-select:focus {
  outline: none;
  border-color: var(--accent);
}
.escalation-profile-edit .form-input { width: 100%; max-width: 420px; }

.tier-accordion {
  background: var(--bg-panel);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  margin-bottom: 12px;
}
.tier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.tier-header::-webkit-details-marker { display: none; }
.tier-num-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.tier-header label { color: var(--fg-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.tier-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border-primary);
}

.recipients-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.recipient-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-input);
  padding: 8px 10px;
  border-radius: 3px;
}
.channel-matrix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
}
.channel-matrix-label {
  color: var(--fg-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding-right: 4px;
}
.channel-matrix label { color: var(--fg-primary); display: inline-flex; align-items: center; gap: 4px; }
.channel-matrix input[type="checkbox"] { margin: 0; }

.btn-icon {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
}
.btn-icon:hover { color: var(--error); }
.btn-warn {
  background: var(--warning);
  color: #1e1e1e;
  border: none;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
}
.btn-warn:hover { background: #e0b800; }

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: var(--bg-editor);
  border: 1px solid var(--border-input);
  border-radius: 4px;
  min-width: 480px;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  color: var(--fg-primary);
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-primary);
}
.modal-header--warn { background: rgba(212,160,23,0.08); }
.modal-header h2 { margin: 0; font-size: 15px; flex: 1; }
.modal-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
}
.modal-close:hover { color: var(--fg-primary); }
.modal-body { padding: 14px 16px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-primary);
}

/* Coverage-gap modal specifics */
.coverage-gap-modal { min-width: 540px; max-width: 720px; }
.coverage-gap-intro { color: var(--fg-muted); margin-bottom: 14px; }
.coverage-gap-item {
  background: var(--bg-panel);
  border-left: 3px solid var(--alarm-warn);
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 0 3px 3px 0;
}
.coverage-gap-item h3 { margin: 0 0 6px 0; font-size: 14px; }
.coverage-gap-profile { color: var(--fg-muted); font-size: 12px; margin: 0 0 8px 0; }
.coverage-gap-windows { margin: 6px 0; padding-left: 20px; font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; }
.coverage-gap-windows__more { color: var(--fg-muted); font-style: italic; }
.coverage-gap-fixes { margin-top: 10px; font-size: 12px; }
.coverage-gap-fixes ul { margin: 4px 0; padding-left: 20px; }

/* Profile-in-use modal */
.profile-in-use-modal .blocker-list { list-style: none; padding: 0; margin: 8px 0; }
.profile-in-use-modal .blocker-list li {
  background: var(--bg-panel);
  padding: 10px 14px;
  border-left: 3px solid var(--error);
  margin-bottom: 8px;
  border-radius: 0 3px 3px 0;
}
.blocker-hint { margin: 4px 0 0 0; font-size: 12px; color: var(--fg-muted); }

/* Stale warning banner — Phase 30.5-06 Ubiquiti palette. */
.stale-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--pad-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  color: var(--fg);
  padding: var(--pad-3);
  margin: var(--pad-3) 0;
  border-radius: var(--radius);
}
.stale-warning-banner strong { display: block; margin-bottom: var(--pad-1); color: var(--warn); }
.stale-warning-banner p { margin: 0; font-size: 13px; color: var(--fg-muted); }
.stale-warning-banner__body { flex: 1; }
.stale-warning-banner__actions { display: flex; gap: var(--pad-2); align-items: center; }

/* Sick-day override modal */
.sick-day-override-modal textarea, .sick-day-override-modal input[type="datetime-local"] {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
}
.sick-day-override-modal label { display: block; margin-top: 8px; font-weight: 500; }
.sick-day-override-modal .warning-text {
  background: rgba(212,160,23,0.08);
  border-left: 3px solid var(--alarm-warn);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  border-radius: 0 3px 3px 0;
}

/* Sync-status badge */
.sync-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.sync-status--pending {
  background: rgba(212,160,23,0.15);
  color: var(--alarm-warn);
  animation: pulse-badge 2s ease-in-out infinite;
}
.sync-status--ok {
  background: rgba(76,175,120,0.15);
  color: var(--alarm-ok);
}
.sync-status--error {
  background: rgba(224,84,84,0.15);
  color: var(--alarm-crit);
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.sync-status-badge svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------------
 * Phase 28 Plan 04 — Delivery Config page
 * ------------------------------------------------------------------------ */

.delivery-page {
  padding: 24px;
  max-width: 720px;
}

.delivery-page__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.delivery-page__header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
}

.delivery-page__back {
  width: 100%;
}

.delivery-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--fg-muted);
  text-decoration: none;
}
.delivery-back-link:hover { color: var(--accent); }
.delivery-back-link svg  { width: 14px; height: 14px; }

.delivery-readonly-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Section ── */
.delivery-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.delivery-section__header {
  margin-bottom: 16px;
}

.delivery-section__header h2 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}

.delivery-section__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--fg-muted);
}

/* ── Form ── */
.delivery-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.delivery-form__label {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.delivery-form__input {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 0.85rem;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}
.delivery-form__input:focus {
  outline: none;
  border-color: var(--accent);
}
.delivery-form__input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

.delivery-form__hint {
  font-size: 0.78rem;
  color: var(--fg-muted);
}

.delivery-form__row--remove {
  margin-top: 4px;
}

.delivery-form__actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

/* ── Buttons ── */
.delivery-btn {
  padding: 7px 16px;
  border-radius: var(--radius);
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.delivery-btn--primary {
  background: var(--accent);
  color: #fff;
}
.delivery-btn--primary:hover { background: var(--accent-hover); }
.delivery-btn--test {
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border-input);
  white-space: nowrap;
}
.delivery-btn--test:hover { border-color: var(--accent); color: var(--accent); }

.delivery-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.delivery-link-btn:hover { color: var(--accent-hover); }

/* ── SIP slots ── */
.delivery-sip-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.delivery-sip-slot--hidden {
  display: none;
}
.delivery-sip-slot__legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 0 6px;
}
.delivery-sip-add {
  margin-bottom: 12px;
}
.delivery-sip-add--hidden {
  display: none;
}

/* ── Test section ── */
.delivery-section--tests .delivery-section__header {
  margin-bottom: 12px;
}
.delivery-tests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.delivery-test-card {
  background: var(--bg-editor);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-test-card__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.delivery-test-card__label svg { width: 14px; height: 14px; }
.delivery-test-card__inputs--empty {
  flex: 1;
}
.delivery-test-form {
  margin: 0;
}

/* ── Command status partial ── */
.delivery-cmd-status-container {
  margin-bottom: 16px;
  min-height: 0;
}

.delivery-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.delivery-status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.delivery-status--pending {
  background: rgba(0, 162, 255, 0.08);
  border-color: var(--accent);
  color: var(--fg);
}
.delivery-status--pending svg { color: var(--accent); animation: spin 1.2s linear infinite; }

.delivery-status--applied {
  background: rgba(34, 197, 94, 0.08);
  border-color: var(--ok);
  color: var(--fg);
}
.delivery-status--applied svg { color: var(--ok); }

.delivery-status--failed {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--alarm);
  color: var(--fg);
}
.delivery-status--failed svg { color: var(--alarm); }

.delivery-status--stale {
  background: rgba(245, 158, 11, 0.08);
  border-color: var(--warn);
  color: var(--fg);
}
.delivery-status--stale svg { color: var(--warn); }

.delivery-status__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.delivery-status__label {
  font-weight: 500;
}
.delivery-status__message {
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.delivery-status__message--error {
  color: var(--alarm);
}
.delivery-status__time {
  font-size: 0.75rem;
  color: var(--fg-muted);
}

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

/* ---------------------------------------------------------------------------
 * Phase 30.5-01 — Shell footer (extracted from base.html inline styles).
 * COMP-10 legal links. Rendered by _shell-footer.html partial and by
 * base.html's inline <footer class="app-footer"> (compat).
 * ------------------------------------------------------------------------ */
.shell-footer,
.app-footer {
  text-align: center;
  padding: var(--pad-2) var(--pad-3);
  color: var(--fg-muted);
  font-size: 0.82em;
  border-top: 1px solid var(--border);
}
.shell-footer a,
.app-footer a {
  color: var(--fg-muted);
  margin: 0 var(--pad-2);
  text-decoration: none;
}
.shell-footer a:hover,
.app-footer a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Phase 30.5-01 — /super/firmware page (canary migration).
 * Extracted from firmware.html inline styles during shell-partial migration.
 * ------------------------------------------------------------------------ */
.firmware-page {
  padding: var(--pad-3);
}
.firmware-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pad-3);
}
.firmware-page__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--fg);
}
.firmware-page__upload-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: var(--pad-2) var(--pad-3);
  cursor: pointer;
  font-size: 0.875rem;
}
.firmware-page__upload-btn:hover {
  background: var(--accent-hover);
}
.firmware-page__notice {
  background: var(--bg-panel);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--pad-2) var(--pad-3);
  margin-bottom: var(--pad-3);
  font-size: 0.875rem;
  color: var(--warn);
}
.firmware-page__empty {
  text-align: center;
  padding: var(--pad-4) var(--pad-3);
  color: var(--fg-muted);
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.firmware-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.firmware-table thead tr {
  background: var(--bg);
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.firmware-table th {
  padding: var(--pad-2) var(--pad-3);
  text-align: left;
}
.firmware-table th:last-child {
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * Phase 30.5-06 — Setup Wizard (distraction-free first-run flow).
 * body.setup-page keeps NO shell chrome (no sidebar, no topbar) per
 * Phase 23-06 ONBD-17. Palette + typography aligned to Plan A tokens.
 * ------------------------------------------------------------------------ */
body.setup-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

.setup-brand-strip {
  padding: var(--pad-3) var(--pad-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  background: var(--bg-panel);
}
.setup-brand-strip strong { color: var(--fg); font-weight: 600; letter-spacing: 0.02em; }
.setup-brand-strip small  { color: var(--fg-muted); font-size: 13px; }

.setup-wizard {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad-4);
  width: 100%;
}

.setup-header {
  text-align: center;
  margin-bottom: var(--pad-4);
  padding-bottom: var(--pad-3);
  border-bottom: 1px solid var(--border);
}
.setup-header h1 { margin-bottom: var(--pad-1); font-size: 24px; font-weight: 600; color: var(--fg); }
.setup-sub       { color: var(--fg-muted); font-size: 14px; }

.progress-dots {
  display: flex;
  justify-content: center;
  gap: var(--pad-2);
  margin-bottom: var(--pad-4);
}
.progress-dots .dot {
  display: inline-flex;
  align-items: center;
  gap: var(--pad-1);
  color: var(--fg-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.progress-dots .dot-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.progress-dots .dot.done .dot-num    { background: var(--ok);     border-color: var(--ok);     color: #fff; }
.progress-dots .dot.current .dot-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.progress-dots .dot-sep              { color: var(--border-strong); }

.wizard-step {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-3);
  margin-bottom: var(--pad-3);
}
.wizard-step.wizard-step-done { opacity: 0.6; }

.wizard-step-header {
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  margin-bottom: var(--pad-2);
}
.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.wizard-step-done .wizard-step-num { background: var(--ok); }
.wizard-step h2 { flex: 1; font-size: 17px; font-weight: 600; color: var(--fg); margin: 0; }

.wizard-badge {
  padding: 2px var(--pad-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
}
.wizard-badge-done    { background: rgba(34, 197, 94, 0.15); color: var(--ok); }
.wizard-badge-skipped { background: var(--bg-hover);         color: var(--fg-muted); }

.wizard-step p           { color: var(--fg-muted); margin-bottom: var(--pad-3); font-size: 14px; }
.wizard-actions          { display: flex; gap: var(--pad-2); flex-wrap: wrap; }
.wizard-actions .btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 0;
  padding: var(--pad-2);
}
.wizard-actions .btn-ghost:hover { color: var(--fg); text-decoration: underline; }
.btn-sm                  { padding: 4px var(--pad-2); font-size: 13px; }

.wizard-steps-list       { padding-left: var(--pad-4); color: var(--fg-muted); font-size: 14px; margin-bottom: var(--pad-3); }
.wizard-steps-list li    { margin-bottom: var(--pad-2); }
.wizard-steps-list li strong { color: var(--fg); }

.edge-host-display {
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--pad-2);
  margin: var(--pad-2) 0;
  font-family: Consolas, "Courier New", monospace;
}
.edge-host-display code   { color: var(--fg); font-size: 13px; flex: 1; }

.setup-footer {
  text-align: center;
  margin-top: var(--pad-4);
  padding-top: var(--pad-3);
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
 * Phase 30.5-06 — Account Security cluster (hub + PIN + backup codes
 * + off-clock schedule sub-pages).
 * ------------------------------------------------------------------------ */
.account-security-page {
  max-width: 800px;
}
.account-security-page .page-header {
  margin-bottom: var(--pad-3);
  padding-bottom: var(--pad-3);
  border-bottom: 1px solid var(--border);
}
.account-security-page .page-header h1 { margin-bottom: var(--pad-1); font-size: 24px; font-weight: 600; color: var(--fg); }
.account-security-page .page-sub       { color: var(--fg-muted); font-size: 14px; }

.security-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-3);
  margin-bottom: var(--pad-3);
}
.security-section h2 { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: var(--pad-2); }
.security-section p  { color: var(--fg-muted); font-size: 14px; margin-bottom: var(--pad-3); }
.security-section .row { display: flex; gap: var(--pad-2); flex-wrap: wrap; }

.security-section.danger {
  border-color: var(--alarm);
  border-left: 3px solid var(--alarm);
}

/* Off-clock schedule (account-availability) — Phase 30.5-06 polish.
   Legacy standalone shell (body.app-shell + .topbar-nav + .topbar-signout)
   normalised to Ubiquiti tokens without restructuring. */
body.app-shell {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
}
body.app-shell .topbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-3);
  gap: var(--pad-3);
  height: var(--topbar-height);
}
body.app-shell .topbar-brand {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}
body.app-shell .topbar-nav {
  display: flex;
  gap: var(--pad-3);
  flex: 1;
}
body.app-shell .topbar-nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
  padding: var(--pad-1) var(--pad-2);
  border-radius: var(--radius);
}
body.app-shell .topbar-nav a:hover  { color: var(--fg); background: var(--bg-hover); }
body.app-shell .topbar-nav a.active { color: var(--accent); }
body.app-shell .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  margin-left: auto;
}
body.app-shell .topbar-right .topbar-user { color: var(--fg-muted); font-size: 13px; flex: 0 0 auto; }
body.app-shell .topbar-signout { display: inline-flex; }
body.app-shell .btn-link {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: var(--pad-1) var(--pad-2);
}
body.app-shell .btn-link:hover { color: var(--fg); text-decoration: underline; }
body.app-shell .app-content { padding: var(--pad-4); max-width: 1200px; margin: 0 auto; }

.account-availability-page {
  padding: var(--pad-4);
  max-width: 800px;
}
.account-availability-page .page-header {
  margin-bottom: var(--pad-3);
  padding-bottom: var(--pad-3);
  border-bottom: 1px solid var(--border);
}
.account-availability-page .page-header h1 { font-size: 24px; font-weight: 600; color: var(--fg); margin-bottom: var(--pad-1); }
.account-availability-page .hint-text      { color: var(--fg-muted); font-size: 14px; }

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--pad-2);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.schedule-table th, .schedule-table td {
  padding: var(--pad-2) var(--pad-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}
.schedule-table th {
  color: var(--fg-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  background: var(--bg-card);
}
.schedule-table td { color: var(--fg); }

/* PIN input monospace override — Phase 30.5-06 (used in account-security-pin). */
input.pin-input,
.auth-card input.pin-input {
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 18px;
}

/* Backup codes grid — .backup-codes list (account-security-backup-codes). */
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pad-2);
  padding: var(--pad-3);
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  list-style: none;
  margin: 0 0 var(--pad-3) 0;
}
.backup-codes li {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  color: var(--fg);
  padding: var(--pad-1);
  text-align: center;
  background: var(--bg-panel);
  border-radius: var(--radius-pill);
}
.backup-codes li code { color: var(--fg); }

/* ---------------------------------------------------------------------------
 * Audit log cluster (Phase 30.5-06 polish — log.html + log_detail.html
 *   + log_row.html). Closes Blocker 1: 49 combined inline `style=` attrs
 *   from Phase 29-04 consolidated into class-based CSS using Plan A tokens.
 *
 * Action pill colour mapping (LOCKED per Plan 30.5-06 Task 4b):
 *   create / success           → var(--ok)        green
 *   update / audit-neutral     → var(--warn)      amber
 *   delete / impersonate       → var(--alarm)     red
 *   login / logout             → var(--fg-muted)  gray
 * ------------------------------------------------------------------------ */
:root {
  /* Monospace font stack — used by audit log rows + JSON diff + IP columns. */
  --font-mono: Consolas, "Courier New", monospace;
}

.audit-log-view {
  padding: var(--pad-3);
}
.audit-log-view h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--pad-3);
}

/* Filter bar */
.audit-filter-bar {
  display: flex;
  gap: var(--pad-3);
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-3);
  margin-bottom: var(--pad-2);
}
.audit-filter-bar .filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--pad-1);
  min-width: 140px;
}
.audit-filter-bar .filter-field > span {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.audit-filter-bar .filter-field input,
.audit-filter-bar .filter-field select {
  padding: var(--pad-2);
  background: var(--bg-hover);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 140px;
}
.audit-filter-bar .filter-field input:focus,
.audit-filter-bar .filter-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 162, 255, 0.25);
}

/* Active filter pills (removable ✕) */
.audit-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-2);
  padding: var(--pad-2) 0 var(--pad-3);
}
.audit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pad-1);
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  padding: 2px var(--pad-2);
  font-size: 12px;
  border-radius: var(--radius-pill);
}
.audit-pill a {
  color: var(--fg-muted);
  margin-left: var(--pad-1);
  text-decoration: none;
}
.audit-pill a:hover { color: var(--fg); text-decoration: none; }

/* Export actions row */
.log-export-actions {
  display: flex;
  gap: var(--pad-2);
  margin: var(--pad-2) 0;
}

/* Summary line */
.alarm-history-summary {
  color: var(--fg-muted);
  font-size: 13px;
  margin: var(--pad-2) 0;
}

/* Audit log table */
.alarm-history-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.alarm-history-table col.col-when   { width: 140px; }
.alarm-history-table col.col-actor  { width: 180px; }
.alarm-history-table col.col-role   { width: 80px; }
.alarm-history-table col.col-action { width: 150px; }
.alarm-history-table col.col-ip     { width: 120px; }
.alarm-history-table thead th {
  text-align: left;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--pad-2) var(--pad-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.alarm-history-table tbody td {
  padding: var(--pad-2) var(--pad-3);
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
}

/* Data-row hover cue */
tr.audit-data-row              { cursor: pointer; transition: background 100ms; }
tr.audit-data-row:hover        { background: var(--bg-hover); }
tr.audit-data-row td           { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row-when                { color: var(--fg-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-row-role                { color: var(--fg-muted); font-size: 12px; }
.audit-row-action              { font-family: var(--font-mono); font-size: 12px; }
.audit-row-target-link         { color: var(--accent); text-decoration: none; }
.audit-row-target-link:hover   { text-decoration: underline; }
.audit-row-target-plain        { color: var(--fg-muted); }
.audit-row-target-none         { color: var(--fg-muted); font-style: italic; }
.audit-row-ip                  { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.audit-row-empty               { color: var(--fg-muted); text-align: center; padding: var(--pad-4); }

/* Action pill — colour-mapped (LOCKED mapping above) */
.audit-action-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pad-1);
  padding: 2px var(--pad-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  text-transform: lowercase;
}
.audit-action-pill--create      { background: rgba(34, 197, 94, 0.15);  color: var(--ok); }
.audit-action-pill--update      { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.audit-action-pill--delete      { background: rgba(239, 68, 68, 0.15);  color: var(--alarm); }
.audit-action-pill--impersonate { background: rgba(239, 68, 68, 0.15);  color: var(--alarm); }
.audit-action-pill--login       { background: rgba(107, 114, 128, 0.20); color: var(--fg-muted); }
.audit-action-pill--logout      { background: rgba(107, 114, 128, 0.20); color: var(--fg-muted); }
.audit-action-pill--neutral     { background: rgba(107, 114, 128, 0.20); color: var(--fg-muted); }

/* Load-more row */
.audit-load-more            { text-align: center; padding: var(--pad-2); }
.audit-load-more button {
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  padding: var(--pad-1) var(--pad-3);
  font-size: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
}
.audit-load-more button:hover { color: var(--fg); border-color: var(--accent); }

/* Detail row (expanded via HTMX row-swap) */
tr.audit-detail-row td {
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.audit-detail-wrap {
  padding: var(--pad-3);
  background: var(--bg-card);
  font-size: 13px;
  color: var(--fg);
  border-top: 1px solid var(--border);
}
.audit-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-3);
  margin-bottom: var(--pad-3);
  font-size: 12px;
  color: var(--fg-muted);
}
.audit-detail-meta strong { color: var(--fg); }
.audit-detail-meta a      { color: var(--accent); text-decoration: none; }
.audit-detail-meta a:hover { text-decoration: underline; }

.audit-detail-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-3);
}
.audit-detail-diff-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--pad-1);
  letter-spacing: 0.05em;
}
.audit-detail-json {
  margin: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-2) var(--pad-3);
  overflow-x: auto;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  max-height: 320px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.audit-detail-json-empty {
  color: var(--fg-muted);
  font-style: italic;
}
.audit-detail-empty {
  color: var(--fg-muted);
  font-style: italic;
}

/* JSON diff colour highlights (embedded in <pre>) */
.audit-diff-add       { background: rgba(34, 197, 94, 0.15); color: var(--ok); }
.audit-diff-remove    { background: rgba(239, 68, 68, 0.15); color: var(--alarm); }
.audit-diff-unchanged { color: var(--fg-muted); }