/* System-adaptive scanner-display presentation. Layout belongs to dashboard.css. */

:root[data-theme="system"] {
  --waterfall-background: #061521;
  --waterfall-grid: #315d78;
  --waterfall-spectrum: #42d7ff;
  --waterfall-marker: #ffd24a;
  --waterfall-history: #35c7ff;
  color-scheme: light dark;
  --background: #eef2f7;
  --surface: #ffffff;
  --surface-emphasis: #f6f8fb;
  --text: #172033;
  --muted: #596579;
  --border: #c9d2df;
  --accent: #2458a6;
  --accent-strong: #173e79;
  --success: #176b45;
  --warning: #8a5600;
  --danger: #a12d2d;
  --focus: #6d3fc0;
  --shadow: 0 0.75rem 2rem rgb(23 32 51 / 0.12);
  --system-surface-sheen: rgb(255 255 255 / 0.32);
  --radius-small: 0.5rem;
  --radius-large: 1rem;
  --scanner-bezel: #303b48;
  --scanner-bezel-edge: #111923;
  --scanner-display: #eef4fb;
  --scanner-display-emphasis: #dfeaf7;
  --scanner-display-ink: #172033;
  --scanner-display-muted: #526a88;
  --scanner-display-rule: #9fb2c9;
  --scanner-key: #e3e9f0;
}

:root[data-theme="system"] body {
  background:
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 4%,
      color-mix(in srgb, var(--success) 7%, transparent),
      transparent 24rem
    ),
    var(--background);
}

:root[data-theme="system"] .site-header {
  border: 1px solid var(--border);
  border-top: 0.25rem solid var(--accent);
  border-radius: var(--radius-large);
  background:
    linear-gradient(180deg, var(--system-surface-sheen), transparent),
    var(--surface);
  box-shadow: var(--shadow);
}

:root[data-theme="system"] .brand h1 {
  color: var(--text);
  letter-spacing: -0.025em;
}

:root[data-theme="system"] .eyebrow,
:root[data-theme="system"] .panel-kicker {
  color: var(--accent-strong);
}

:root[data-theme="system"] .status-badge {
  border-radius: var(--radius-small);
  background: var(--surface-emphasis);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

:root[data-theme="system"] .workspace-shell {
  border: 0.3rem solid var(--scanner-bezel);
  border-radius: calc(var(--radius-large) + 0.25rem);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), transparent 35%),
    var(--scanner-bezel);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    0 1rem 2.5rem rgb(17 25 35 / 0.2);
}

:root[data-theme="system"] .workspace-tabs {
  border: 1px solid var(--scanner-bezel-edge);
  border-radius: var(--radius-small);
  background: #202a35;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.12);
}

:root[data-theme="system"] .workspace-tabs button {
  border-color: #516071;
  border-radius: 0.35rem;
  color: #eaf0f7;
  background: linear-gradient(180deg, #4a5868, #303b48);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.18);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: border-color 120ms ease;
}

:root[data-theme="system"] .workspace-tabs button[aria-selected="true"] {
  border-color: #9ec5ff;
  color: var(--on-accent, #ffffff);
  background: var(--accent);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.22),
    0 0 0 1px rgb(158 197 255 / 0.34);
}

:root[data-theme="system"] .workspace-deck {
  border: 1px solid var(--scanner-bezel-edge);
  border-radius: var(--radius-large);
  background: color-mix(in srgb, var(--surface) 88%, var(--scanner-bezel));
  box-shadow: inset 0 0 1.4rem rgb(17 25 35 / 0.08);
}

:root[data-theme="system"] [data-workspace-pane] {
  border-color: var(--border);
  background: var(--surface-emphasis);
}

:root[data-theme="system"] .panel {
  border-color: var(--border);
  background:
    linear-gradient(180deg, var(--system-surface-sheen), transparent 7rem),
    var(--surface);
}

:root[data-theme="system"] .panel-header {
  border-bottom-color: var(--border);
}

:root[data-theme="system"] #radio-activity-panel {
  border: 0.45rem solid var(--scanner-bezel);
  outline: 1px solid var(--scanner-bezel-edge);
  outline-offset: -0.15rem;
  color: var(--scanner-display-ink);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgb(20 39 25 / 0.025) 3px 4px
    ),
    linear-gradient(180deg, var(--scanner-display), var(--scanner-display-emphasis));
  box-shadow:
    inset 0 0 1.4rem rgb(20 39 25 / 0.12),
    0 0.65rem 1.35rem rgb(17 25 35 / 0.24);
}

:root[data-theme="system"] #radio-activity-panel .panel-header {
  border-bottom: 2px solid var(--scanner-display-rule);
}

:root[data-theme="system"] #radio-activity-panel .eyebrow,
:root[data-theme="system"] #radio-activity-panel .panel-kicker,
:root[data-theme="system"] #radio-activity-panel .secondary-value,
:root[data-theme="system"] #radio-activity-panel .status-list dt,
:root[data-theme="system"] #radio-activity-panel .radio-field-group h3,
:root[data-theme="system"] #radio-activity-panel .radio-field-list dt {
  color: var(--scanner-display-muted);
}

:root[data-theme="system"] #radio-activity-panel .panel-header h2,
:root[data-theme="system"] #radio-activity-panel .primary-value,
:root[data-theme="system"] #radio-activity-panel .status-list dd,
:root[data-theme="system"] #radio-activity-panel .radio-field-list dd {
  color: var(--scanner-display-ink);
}

:root[data-theme="system"] #radio-activity-panel .primary-value,
:root[data-theme="system"] #radio-activity-panel .secondary-value,
:root[data-theme="system"] #radio-activity-panel .status-list dd,
:root[data-theme="system"] #radio-activity-panel .radio-field-list dd {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="system"] #radio-activity-panel .primary-value {
  letter-spacing: 0.025em;
  text-shadow: 0 1px rgb(255 255 255 / 0.42);
}

:root[data-theme="system"] #radio-activity-panel .status-list > div,
:root[data-theme="system"] #radio-activity-panel .radio-field-list > div {
  border-bottom-color: var(--scanner-display-rule);
}

:root[data-theme="system"] #radio-activity-panel .radio-field-group {
  border-color: var(--scanner-display-rule);
  background: rgb(255 255 255 / 0.14);
}

:root[data-theme="system"] .radio-view-controls {
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--scanner-key);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.3);
}

:root[data-theme="system"] .radio-field-groups {
  border-top-color: var(--scanner-display-rule);
}

:root[data-theme="system"] button,
:root[data-theme="system"] .recording-action,
:root[data-theme="system"] select {
  border-color: var(--accent);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.18);
}

:root[data-theme="system"] .recordings-pagination button:hover:not(:disabled) {
  color: var(--background);
}

:root[data-theme="system"] .scanner-control-group,
:root[data-theme="system"] .recording-library,
:root[data-theme="system"] .panel-subsection {
  border-color: var(--border);
  background: rgb(36 88 166 / 0.025);
}

:root[data-theme="system"] .status-list > div,
:root[data-theme="system"] .radio-field-list > div {
  border-bottom-color: var(--border);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"][data-system-palette="auto"] {
    --background: #0d1420;
    --surface: #172033;
    --surface-emphasis: #1c2940;
    --text: #f1f5fb;
    --muted: #b9c4d4;
    --border: #3b4b63;
    --accent: #9ec5ff;
    --accent-strong: #b8d5ff;
    --success: #7ee2ae;
    --warning: #ffd17a;
    --danger: #ff9b9b;
    --focus: #d0b5ff;
    --shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.3);
    --system-surface-sheen: rgb(255 255 255 / 0.025);
    --scanner-bezel: #080d13;
    --scanner-bezel-edge: #000000;
    --scanner-display: #111b2b;
    --scanner-display-emphasis: #1c2940;
    --scanner-display-ink: #f1f5fb;
    --scanner-display-muted: #9fb3cc;
    --scanner-display-rule: #3b4b63;
    --scanner-key: #202c3a;
  }

  :root[data-theme="system"][data-system-palette="auto"]
    #radio-activity-panel
    .primary-value {
    text-shadow: 0 0 0.7rem rgb(126 226 174 / 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="system"] *,
  :root[data-theme="system"] *::before,
  :root[data-theme="system"] *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :root[data-theme="system"] {
    --background: Canvas;
    --surface: Canvas;
    --surface-emphasis: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: CanvasText;
    --accent: LinkText;
    --accent-strong: Highlight;
    --focus: Highlight;
    --scanner-bezel: CanvasText;
    --scanner-bezel-edge: CanvasText;
    --scanner-display: Canvas;
    --scanner-display-emphasis: Canvas;
    --scanner-display-ink: CanvasText;
    --scanner-display-muted: CanvasText;
    --scanner-display-rule: CanvasText;
    --scanner-key: Canvas;
  }

  :root[data-theme="system"] .site-header,
  :root[data-theme="system"] .workspace-shell,
  :root[data-theme="system"] .workspace-tabs,
  :root[data-theme="system"] .workspace-deck,
  :root[data-theme="system"] [data-workspace-pane],
  :root[data-theme="system"] .panel,
  :root[data-theme="system"] #radio-activity-panel,
  :root[data-theme="system"] .radio-view-controls {
    background: Canvas;
    box-shadow: none;
  }

  :root[data-theme="system"] .workspace-tabs button[aria-selected="true"] {
    color: HighlightText;
    background: Highlight;
    outline: 2px solid Highlight;
  }
}