/* Assist — design tokens, light + dark (docs/ui/theme/README.md).
   Values come from Command Center (afncorp/afn-command-center@1f469cf, src/app/globals.css;
   copy in docs/ui/theme/command-center/tokens.css). Assist keeps its own --hd-* names so a
   Cerebro embed can still re-theme by overriding the --hd-* custom properties only.
   :root = light, html.dark = dark. The .dark class is set before first paint by the inline
   script in index.html and kept in sync by window.assistTheme (js/hd.js).
   RULE: gold (--hd-accent / --hd-ring) is a fill/accent only. Never use it as text colour on a
   light surface: it is 2.4:1 on white and fails AA. */

/* Inter variable, self-hosted (SIL OFL 1.1, fonts/Inter-OFL.txt). No CDN. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"), url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Surfaces / text (CC --background, --card, --foreground, --muted-foreground, --border) */
  --hd-bg: hsl(220 20% 97%);
  --hd-surface: hsl(0 0% 100%);
  --hd-surface-2: hsl(220 14% 95%);          /* CC --secondary / --muted: table head, hover, skeleton */
  --hd-text: hsl(220 25% 12%);
  --hd-muted: hsl(220 10% 46%);
  --hd-muted-strong: hsl(220 12% 38%);       /* muted text on tinted surfaces (callouts, notes, --hd-surface-2) */
  --hd-border: hsl(220 15% 90%);
  --hd-input-border: hsl(220 12% 56%);       /* stronger than CC --input: 3.5:1 on white (WCAG 1.4.11 non-text) */

  /* Brand. Light: primary is rich slate. Dark: primary becomes gold (CC does the same). */
  --hd-primary: hsl(220 28% 18%);
  --hd-on-primary: hsl(0 0% 100%);
  --hd-accent: hsl(36 55% 58%);              /* champagne gold — FILL ONLY */
  --hd-on-accent: hsl(220 25% 12%);
  --hd-accent-deep: hsl(32 50% 45%);         /* bronze hover/active on gold fills */
  --hd-link: hsl(205 85% 36%);               /* links use CC --info so they never render gold */
  --hd-gradient-gold: linear-gradient(135deg, hsl(36 55% 58%) 0%, hsl(38 45% 68%) 50%, hsl(36 55% 58%) 100%);

  /* Focus: gold ring (CC --ring) with a slate inner edge so it clears 3:1 on white too. */
  --hd-ring: hsl(36 55% 58%);
  --hd-ring-inner: hsl(220 28% 18%);

  /* Status (CC --success / --warning / --info / --danger + -light backgrounds) */
  --hd-ok: hsl(155 65% 27%);
  --hd-ok-bg: hsl(155 55% 95%);
  --hd-warn: hsl(32 80% 35%);
  --hd-warn-bg: hsl(36 85% 95%);
  --hd-info: hsl(205 85% 36%);
  --hd-info-bg: hsl(205 75% 95%);
  --hd-info-border: hsl(205 60% 75%);
  --hd-danger: hsl(0 72% 42%);
  --hd-danger-bg: hsl(0 72% 95%);
  --hd-destructive: hsl(0 72% 51%);
  --hd-on-status: hsl(0 0% 100%);

  /* Assist-specific semantic surfaces, built from CC tokens */
  --hd-note-bg: hsl(36 85% 95%);             /* = warning-light */
  --hd-note-border: hsl(32 80% 35%);         /* = warning */
  --hd-follower: hsl(230 50% 45%);           /* = CC --tertiary */
  --hd-follower-bg: hsl(230 50% 96%);
  --hd-follower-border: hsl(230 50% 45%);

  /* Chrome that stays dark in both modes (CC sidebar palette) */
  --hd-chrome: hsl(220 28% 12%);
  --hd-chrome-text: hsl(220 14% 92%);
  --hd-chrome-accent: hsl(36 55% 58%);
  --hd-backdrop: hsl(220 25% 8% / 0.45);

  /* Shape / elevation / type */
  --hd-radius-base: 0.5rem;
  --hd-radius-sm: calc(var(--hd-radius-base) - 4px);
  --hd-radius-md: calc(var(--hd-radius-base) - 2px);
  --hd-radius-lg: var(--hd-radius-base);
  --hd-radius-xl: calc(var(--hd-radius-base) + 4px);
  --hd-radius: var(--hd-radius-md);          /* default control radius (legacy name) */
  --shadow-elevated: 0 4px 12px -2px hsl(220 10% 50% / 0.08), 0 2px 4px -2px hsl(220 10% 50% / 0.04);
  --hd-shadow-pop: 0 8px 24px -4px hsl(220 25% 12% / 0.18);
  --hd-font: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
}

html.dark {
  color-scheme: dark;

  --hd-bg: hsl(220 25% 8%);
  --hd-surface: hsl(220 25% 11%);
  --hd-surface-2: hsl(220 25% 14%);
  --hd-text: hsl(220 14% 95%);
  --hd-muted: hsl(220 10% 60%);
  --hd-muted-strong: hsl(220 10% 70%);
  --hd-border: hsl(220 25% 18%);
  --hd-input-border: hsl(220 15% 45%);       /* 3.4:1 on dark card */

  --hd-primary: hsl(36 60% 60%);
  --hd-on-primary: hsl(220 25% 8%);
  --hd-accent: hsl(36 60% 60%);
  --hd-on-accent: hsl(220 25% 8%);
  --hd-accent-deep: hsl(32 55% 50%);
  --hd-link: hsl(205 80% 58%);
  --hd-gradient-gold: linear-gradient(135deg, hsl(36 60% 55%) 0%, hsl(38 50% 65%) 50%, hsl(36 60% 55%) 100%);

  --hd-ring: hsl(36 60% 60%);
  --hd-ring-inner: hsl(220 25% 8%);

  --hd-ok: hsl(155 60% 48%);
  --hd-ok-bg: hsl(155 60% 15%);
  --hd-warn: hsl(36 90% 55%);
  --hd-warn-bg: hsl(36 90% 15%);
  --hd-info: hsl(205 80% 58%);
  --hd-info-bg: hsl(205 80% 15%);
  --hd-info-border: hsl(205 50% 32%);
  --hd-danger: hsl(0 75% 62%);
  --hd-danger-bg: hsl(0 65% 15%);
  --hd-destructive: hsl(0 65% 55%);
  --hd-on-status: hsl(220 25% 8%);

  --hd-note-bg: hsl(36 90% 15%);
  --hd-note-border: hsl(36 90% 55%);
  --hd-follower: hsl(230 60% 68%);
  --hd-follower-bg: hsl(230 30% 16%);
  --hd-follower-border: hsl(230 60% 68%);

  --hd-chrome: hsl(220 25% 6%);
  --hd-chrome-text: hsl(220 14% 92%);
  --hd-chrome-accent: hsl(36 60% 60%);
  --hd-backdrop: hsl(220 25% 3% / 0.6);

  --shadow-elevated: 0 4px 12px -2px hsl(220 25% 5% / 0.3);
  --hd-shadow-pop: 0 8px 24px -4px hsl(220 25% 3% / 0.6);
}

/* CC: 200ms colour-only transition while switching modes, off for reduced motion. */
html.theme-transition body * { transition: color .2s, background-color .2s, border-color .2s, fill .2s, stroke .2s; }
@media (prefers-reduced-motion: reduce) { html.theme-transition body * { transition: none; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--hd-bg); color: var(--hd-text); font: 14px/1.5 var(--hd-font); -webkit-font-smoothing: antialiased; }

.hd-app h1 { font-size: 18px; margin: 0 0 4px; font-weight: 650; }
.hd-app h2 { font-size: 15px; margin: 16px 0 8px; font-weight: 600; }
.hd-app h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--hd-muted); margin: 0 0 4px; }
.hd-app a { color: var(--hd-link); }
.hd-app :focus-visible { outline: 2px solid var(--hd-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--hd-ring-inner); }
.hd-app button, .hd-app select, .hd-app input, .hd-app textarea { font: inherit; color: inherit; }
.hd-app button, .hd-btn {
  min-height: 28px; padding: 4px 12px; border: 1px solid var(--hd-border); background: var(--hd-surface);
  border-radius: var(--hd-radius); cursor: pointer; text-decoration: none; color: var(--hd-text); display: inline-block;
}
.hd-app a.hd-btn { color: var(--hd-text); }
.hd-app button:hover:not(:disabled), .hd-app a.hd-btn:hover { border-color: var(--hd-primary); }
.hd-app button:disabled { opacity: .55; cursor: not-allowed; }
.hd-app button.hd-primary, .hd-app a.hd-btn.hd-primary { background: var(--hd-primary); border-color: var(--hd-primary); color: var(--hd-on-primary); }
.hd-app button.hd-primary:hover:not(:disabled), .hd-app a.hd-btn.hd-primary:hover { background: var(--hd-accent-deep); border-color: var(--hd-accent-deep); }
html:not(.dark) .hd-app button.hd-primary:hover:not(:disabled), html:not(.dark) .hd-app a.hd-btn.hd-primary:hover { background: var(--hd-text); border-color: var(--hd-text); }
/* Gold fill with dark text (CC accent button). */
.hd-app button.hd-accent, .hd-app a.hd-btn.hd-accent { background: var(--hd-accent); border-color: var(--hd-accent); color: var(--hd-on-accent); font-weight: 600; }
.hd-app button.hd-accent:hover:not(:disabled), .hd-app a.hd-btn.hd-accent:hover { border-color: var(--hd-accent-deep); box-shadow: inset 0 0 0 1px var(--hd-accent-deep); }
.hd-app button.hd-link { border: 0; background: none; color: var(--hd-link); padding: 0 4px; min-height: 24px; text-decoration: underline; }
.hd-app button.hd-danger { color: var(--hd-danger); }
.hd-app select, .hd-app input[type=text], .hd-app input[type=search], .hd-app textarea {
  border: 1px solid var(--hd-input-border); border-radius: var(--hd-radius); padding: 4px 8px; background: var(--hd-surface); min-height: 28px;
}
.hd-app input[type=checkbox], .hd-app input[type=radio] { accent-color: var(--hd-primary); }
.hd-app textarea { width: 100%; resize: vertical; }
.hd-muted { color: var(--hd-muted); }
.hd-small { font-size: 12px; }
.hd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hd-spacer { flex: 1; }
.hd-hidden { display: none !important; }
.hd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.hd-devbanner { background: var(--hd-chrome); color: var(--hd-chrome-text); font-size: 12px; text-align: center; padding: 2px 8px; }
.hd-devbanner b { color: var(--hd-chrome-accent); letter-spacing: .04em; }  /* gold on dark chrome: 7.2:1 */
.hd-top { display: flex; align-items: center; gap: 16px; background: var(--hd-surface); border-bottom: 1px solid var(--hd-border); padding: 8px 16px; flex-wrap: wrap; }
.hd-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--hd-text); text-decoration: none; }
.hd-app a.hd-brand { color: var(--hd-text); }
/* CSS-rendered mark, same treatment as Command Center's SidebarLogo: gold-gradient rounded square + "AFN". */
.hd-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--hd-radius-lg); background: var(--hd-gradient-gold); color: var(--hd-on-accent);
  font-size: 11px; font-weight: 800; letter-spacing: .02em; box-shadow: var(--shadow-elevated);
}
.hd-wordmark { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.hd-tabs { display: flex; gap: 4px; background: var(--hd-surface); border-bottom: 1px solid var(--hd-border); padding: 0 16px; }
.hd-app .hd-tabs a { padding: 8px 12px; text-decoration: none; color: var(--hd-muted); border-bottom: 3px solid transparent; }
.hd-app .hd-tabs a:hover { color: var(--hd-text); }
.hd-app .hd-tabs a.active { border-bottom-color: var(--hd-accent); color: var(--hd-text); font-weight: 600; }
.hd-main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.hd-card { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 12px 16px; box-shadow: var(--shadow-elevated); }

/* Theme toggle (ThemeToggle.razor): segmented light / dark / system */
.hd-theme { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); background: var(--hd-surface-2); }
.hd-app .hd-theme button { min-height: 24px; padding: 2px 8px; border: 1px solid transparent; background: transparent; color: var(--hd-muted-strong); font-size: 12px; border-radius: var(--hd-radius-sm); }
.hd-app .hd-theme button:hover:not(:disabled) { border-color: transparent; color: var(--hd-text); }
.hd-app .hd-theme button[aria-checked=true] { background: var(--hd-surface); color: var(--hd-text); border-color: var(--hd-border); box-shadow: var(--shadow-elevated); font-weight: 600; }
.hd-theme .ico { display: inline-block; width: 1.1em; text-align: center; }

/* Callouts. Muted text on any tinted surface uses --hd-muted-strong (plain muted drops under 4.5:1). */
.hd-callout { border-radius: var(--hd-radius); padding: 8px 12px; margin: 8px 0; border: 1px solid; }
.hd-callout.warn { background: var(--hd-warn-bg); border-color: var(--hd-warn); }
.hd-callout.info { background: var(--hd-info-bg); border-color: var(--hd-info-border); }
.hd-callout.danger { background: var(--hd-danger-bg); border-color: var(--hd-danger); }
.hd-callout .hd-muted, .hd-tile.warn .hd-muted, .hd-tl-item.note .meta, .hd-tl-item.fcomment .meta,
.hd-composer.mode-follower .hd-muted, .hd-table tr.hd-following .hd-muted, .hd-table tbody tr.hd-clickable:hover .hd-muted { color: var(--hd-muted-strong); }
.hd-err { color: var(--hd-danger); font-size: 12px; margin-top: 2px; }

/* Queue */
.hd-tiles { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.hd-tile { text-align: left; min-width: 150px; padding: 8px 16px !important; border-radius: var(--hd-radius-lg) !important; box-shadow: var(--shadow-elevated); }
.hd-tile b { display: block; font-size: 20px; font-weight: 650; }
.hd-tile.warn { border-color: var(--hd-warn) !important; background: var(--hd-warn-bg) !important; }
.hd-table { border-collapse: collapse; width: 100%; background: var(--hd-surface); }
.hd-table th, .hd-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hd-border); vertical-align: top; }
.hd-table th { font-size: 12px; color: var(--hd-muted-strong); font-weight: 600; background: var(--hd-surface-2); }
.hd-table tbody tr.hd-clickable { cursor: pointer; }
.hd-table tbody tr.hd-clickable:hover { background: var(--hd-surface-2); }
.hd-table tr.hd-following { background: var(--hd-follower-bg); }
.hd-table.hd-dim { opacity: .5; }
.hd-badge { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--hd-border); background: var(--hd-surface-2); color: var(--hd-text); margin-left: 4px; white-space: nowrap; }
.hd-badge.follow { background: var(--hd-follower-bg); border-color: var(--hd-follower-border); color: var(--hd-follower); }
.hd-badge.warn { background: var(--hd-warn-bg); border-color: var(--hd-warn); color: var(--hd-warn); }
.hd-badge.danger { border-color: var(--hd-danger); color: var(--hd-danger); background: var(--hd-danger-bg); }
.hd-badge.ok { border-color: var(--hd-ok); color: var(--hd-ok); background: var(--hd-ok-bg); }
.hd-warn-t { color: var(--hd-warn); font-weight: 600; }
.hd-bulkbar { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--hd-surface); border: 1px solid var(--hd-border); border-top: 0; flex-wrap: wrap; }
.hd-skel td { color: transparent; background: linear-gradient(var(--hd-surface-2), var(--hd-surface-2)) no-repeat 8px 50% / 70% 10px; }

/* Dropdown (department switcher, menus) */
.hd-dd { position: relative; display: inline-block; }
.hd-dd > summary { list-style: none; cursor: pointer; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 4px 12px; background: var(--hd-surface); }
.hd-dd > summary::-webkit-details-marker { display: none; }
.hd-pop { position: absolute; z-index: 20; background: var(--hd-surface); color: var(--hd-text); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow-pop); min-width: 260px; max-height: 340px; overflow: auto; padding: 6px; }
.hd-pop label { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-radius: var(--hd-radius-sm); }
.hd-pop label:hover { background: var(--hd-surface-2); }
.hd-pop button { display: block; width: 100%; text-align: left; border: 0 !important; }
.hd-pop button:hover { background: var(--hd-surface-2); }

/* Ticket */
.hd-ticket-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
@media (max-width: 1100px) { .hd-ticket-grid { grid-template-columns: 1fr; } }
.hd-tl-item { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 8px 12px; margin: 8px 0; }
.hd-tl-item .meta { font-size: 12px; color: var(--hd-muted); margin-bottom: 4px; }
.hd-tl-item .body { white-space: pre-wrap; }
.hd-tl-item.out { border-left: 4px solid var(--hd-primary); }
.hd-tl-item.note { background: var(--hd-note-bg); border-color: var(--hd-note-border); }
.hd-tl-item.fcomment { background: var(--hd-follower-bg); border-left: 6px double var(--hd-follower-border); border-color: var(--hd-follower-border); }
.hd-tl-event { text-align: center; color: var(--hd-muted); font-size: 12px; margin: 8px 0; }
.hd-tl-transfer { border-top: 2px solid var(--hd-border); margin: 16px 0 8px; padding-top: 6px; }
.hd-tl-transfer .h { font-weight: 600; }
.hd-tl-transfer blockquote { margin: 4px 0 0; padding: 4px 12px; border-left: 3px solid var(--hd-border); white-space: pre-wrap; }
.hd-composer { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 12px; margin-top: 12px; box-shadow: var(--shadow-elevated); }
.hd-composer textarea { min-height: 120px; }
.hd-composer.mode-note textarea { background: var(--hd-note-bg); }
.hd-composer.mode-follower { background: var(--hd-follower-bg); border-color: var(--hd-follower-border); }
.hd-tabs-inline { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.hd-tabs-inline button[aria-selected=true] { background: var(--hd-primary); color: var(--hd-on-primary); border-color: var(--hd-primary); }
.hd-side section { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 8px 12px; margin-bottom: 8px; }
.hd-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 13px; }

/* Dialog */
.hd-backdrop { position: fixed; inset: 0; background: var(--hd-backdrop); display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; z-index: 50; }
.hd-dialog { background: var(--hd-surface); color: var(--hd-text); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-xl); width: 560px; max-width: 95vw; max-height: 88vh; overflow: auto; padding: 16px 20px; box-shadow: var(--hd-shadow-pop); }
.hd-dialog label.f, .hd-form label.f { display: block; font-weight: 600; margin-top: 12px; }
.hd-dest-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.hd-dest-list label { border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 6px 10px; cursor: pointer; }
.hd-dest-list input:checked + span { font-weight: 700; color: var(--hd-text); text-decoration: underline; text-decoration-color: var(--hd-accent); text-decoration-thickness: 2px; }
.hd-form { max-width: 640px; }
.hd-form input[type=text], .hd-form select { width: 100%; }

/* Toasts (dark chrome in both modes) */
.hd-toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hd-toast { background: var(--hd-chrome); color: var(--hd-chrome-text); padding: 8px 16px; border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow-pop); max-width: 640px; }

.hd-spin { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hd-sp .7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes hd-sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hd-spin { animation: none; } }

/* Blazor boot / error UI */
#blazor-error-ui { background: var(--hd-warn-bg); color: var(--hd-text); border-top: 1px solid var(--hd-warn); bottom: 0; box-shadow: var(--shadow-elevated); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui a { color: var(--hd-link); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: var(--hd-danger-bg); border: 1px solid var(--hd-danger); border-radius: var(--hd-radius); padding: 1rem; color: var(--hd-text); }
.blazor-error-boundary::after { content: "An error has occurred."; }
.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--hd-border); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--hd-accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; color: var(--hd-text); inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }