/* LCARS-inspired presentation. Layout and pane lifecycle belong to dashboard.css. */

:root[data-theme="lcars"] {
  color-scheme: dark;
  --background: #0b0910;
  --surface: #17121d;
  --surface-emphasis: #241a2b;
  --text: #fff4df;
  --muted: #d2bfd7;
  --border: #9b6fbd;
  --accent: #e89547;
  --accent-strong: #f3b45f;
  --success: #9bd68b;
  --warning: #f1c85f;
  --danger: #ef8585;
  --focus: #ffe28a;
  --shadow: none;
  --radius-small: 0.85rem 0.3rem 0.85rem 0.3rem;
  --radius-large: 1.6rem 0.45rem 1.6rem 0.45rem;
  --lcars-panel: #e89547;
  --lcars-panel-soft: rgb(232 149 71 / 0.1);
  --lcars-pink: #d36b9b;
  --lcars-blue: #91ace2;
  --lcars-violet: #b781d1;
  --lcars-ink: #100d14;
}

:root[data-theme="lcars"] body {
  background:
    linear-gradient(90deg, rgb(232 149 71 / 0.13), transparent 24rem),
    radial-gradient(circle at 86% 14%, rgb(155 111 189 / 0.12), transparent 28rem),
    var(--background);
}

:root[data-theme="lcars"] .site-header {
  position: relative;
  padding-left: clamp(2.4rem, 7vw, 6rem);
  border: 0;
  border-bottom: 0.7rem solid var(--accent);
  border-radius: 2.6rem 0.35rem 0.35rem 0;
  background: var(--surface);
  box-shadow: inset 1.4rem 0 var(--lcars-pink);
}

:root[data-theme="lcars"] .site-header::after {
  position: absolute;
  right: 0;
  bottom: -0.7rem;
  width: min(45%, 24rem);
  height: 0.7rem;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--lcars-pink) 0 42%,
      transparent 42% 47%,
      var(--lcars-blue) 47% 72%,
      transparent 72% 77%,
      var(--lcars-violet) 77%
    );
  border-radius: 999px 0 0 999px;
}

:root[data-theme="lcars"] .brand h1,
:root[data-theme="lcars"] .panel h2 {
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

:root[data-theme="lcars"] .eyebrow,
:root[data-theme="lcars"] .panel-kicker {
  color: var(--accent-strong);
  letter-spacing: 0.16em;
}

:root[data-theme="lcars"] .status-badge {
  border: 0;
  border-radius: 999px 0.3rem 0.3rem 999px;
  color: var(--lcars-ink);
  background: var(--warning);
  box-shadow: inset 1rem 0 rgb(255 244 223 / 0.18);
  text-transform: uppercase;
}

:root[data-theme="lcars"] .workspace-shell {
  border: 0.65rem solid var(--border);
  border-top-color: var(--lcars-pink);
  border-right-width: 0.2rem;
  border-bottom-color: var(--accent);
  border-left-width: 1.15rem;
  border-radius: 2.3rem 0.4rem 2.3rem 0.4rem;
  background: var(--lcars-ink);
  box-shadow: inset 1rem 0 var(--lcars-panel-soft);
}

:root[data-theme="lcars"] .workspace-tabs {
  border: 0;
  border-radius: 999px 0.35rem 0.35rem 999px;
  background: var(--lcars-blue);
  box-shadow:
    inset 1.4rem 0 var(--lcars-pink),
    inset -0.5rem 0 var(--lcars-violet);
}

:root[data-theme="lcars"] .workspace-tabs button {
  border: 0;
  border-radius: 999px;
  color: var(--lcars-ink);
  background: var(--accent);
  box-shadow: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

:root[data-theme="lcars"] .workspace-tabs button:hover:not(:disabled) {
  background: var(--accent-strong);
}

:root[data-theme="lcars"] .workspace-tabs button[aria-selected="true"] {
  color: var(--lcars-ink);
  background: #ffe28a;
  box-shadow: inset 0 -0.25rem rgb(211 107 155 / 0.7);
}

:root[data-theme="lcars"] .workspace-deck {
  border: 2px solid var(--border);
  border-left-width: 0.7rem;
  border-radius: 1.8rem 0.3rem 1.8rem 0.3rem;
  background:
    linear-gradient(90deg, var(--lcars-panel-soft), transparent 12rem),
    var(--surface);
}

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

:root[data-theme="lcars"] .panel {
  --lcars-panel: #e89547;
  --lcars-panel-soft: rgb(232 149 71 / 0.1);
  position: relative;
  border: 0;
  border-left: 0.65rem solid var(--lcars-panel);
  border-radius: 1.5rem 0.3rem 0.3rem 1.5rem;
  background:
    linear-gradient(90deg, var(--lcars-panel-soft), transparent 9rem),
    var(--surface);
  box-shadow: inset 0.65rem 0 rgb(255 244 223 / 0.025);
}

:root[data-theme="lcars"] .scanner-panel {
  --lcars-panel: var(--lcars-violet);
  --lcars-panel-soft: rgb(183 129 209 / 0.11);
}

:root[data-theme="lcars"] .scanner-controls-panel,
:root[data-theme="lcars"] .radio-view-controls {
  --lcars-panel: var(--lcars-pink);
  --lcars-panel-soft: rgb(211 107 155 / 0.1);
}

:root[data-theme="lcars"] .browser-audio-panel {
  --lcars-panel: var(--lcars-blue);
  --lcars-panel-soft: rgb(145 172 226 / 0.1);
}

:root[data-theme="lcars"] .recording-capture-panel,
:root[data-theme="lcars"] .recording-library-panel {
  --lcars-panel: #d7b778;
  --lcars-panel-soft: rgb(215 183 120 / 0.1);
}

:root[data-theme="lcars"] .panel::after {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  width: 3.8rem;
  height: 0.38rem;
  content: "";
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--lcars-panel) 0 48%,
      transparent 48% 56%,
      var(--lcars-pink) 56% 74%,
      transparent 74% 82%,
      var(--lcars-blue) 82%
    );
}

:root[data-theme="lcars"] .panel-header {
  margin-right: 4.2rem;
  /* Reserve the curved end for decoration, not text or controls. */
  padding-right: 1.6rem;
  border-bottom: 0.35rem solid var(--lcars-panel);
  border-radius: 0 0 1.4rem 0;
}

:root[data-theme="lcars"] .panel-header h2,
:root[data-theme="lcars"] .panel-header .panel-kicker {
  color: var(--text);
}

:root[data-theme="lcars"] .recording-library-header > div {
  min-width: 0;
}

:root[data-theme="lcars"] #recordings-refresh {
  flex-shrink: 0;
}

:root[data-theme="lcars"] #radio-activity-panel {
  --lcars-panel: #f3b45f;
  --lcars-panel-soft: rgb(243 180 95 / 0.14);
  border-left-width: 1rem;
  outline: 2px solid var(--lcars-pink);
  outline-offset: -0.35rem;
  background:
    linear-gradient(135deg, rgb(243 180 95 / 0.11), transparent 16rem),
    var(--surface-emphasis);
  box-shadow:
    inset 1rem 0 rgb(243 180 95 / 0.05),
    0 0 0 0.25rem var(--lcars-ink);
}

:root[data-theme="lcars"] #radio-activity-panel .primary-value {
  color: #ffe28a;
  letter-spacing: 0.035em;
}

:root[data-theme="lcars"] #radio-activity-panel .secondary-value {
  color: #f0cfab;
}

:root[data-theme="lcars"] .radio-view-controls {
  border: 0;
  border-left: 0.55rem solid var(--lcars-pink);
  border-radius: 999px 0.3rem 0.3rem 999px;
  background: rgb(211 107 155 / 0.1);
}

:root[data-theme="lcars"] .radio-field-groups {
  border-color: var(--lcars-violet);
  /* Keep the rectangular data grid inside its rounded clipping boundary. */
  border-radius: var(--radius-small);
  background: rgb(183 129 209 / 0.07);
}

:root[data-theme="lcars"] .radio-field-group,
:root[data-theme="lcars"] .scanner-control-group,
:root[data-theme="lcars"] .recording-item {
  border-color: color-mix(in srgb, var(--lcars-panel) 60%, var(--border));
  background: var(--lcars-panel-soft);
}

:root[data-theme="lcars"] .status-list > div,
:root[data-theme="lcars"] .radio-field-list > div {
  border-bottom-color: rgb(232 149 71 / 0.34);
}

:root[data-theme="lcars"] button,
:root[data-theme="lcars"] .recording-action,
:root[data-theme="lcars"] select {
  border: 0;
  border-radius: 999px 0.3rem 0.3rem 999px;
  color: var(--lcars-ink);
  background: var(--accent);
  box-shadow: inset 0.7rem 0 rgb(255 244 223 / 0.12);
}

:root[data-theme="lcars"] button:hover:not(:disabled),
:root[data-theme="lcars"] .recording-action:hover {
  color: var(--lcars-ink);
  background: var(--accent-strong);
}

:root[data-theme="lcars"] #audio-stop,
:root[data-theme="lcars"] #scanner-reconnect,
:root[data-theme="lcars"] #recording-stop,
:root[data-theme="lcars"] #recordings-refresh {
  color: var(--lcars-ink);
  background: var(--lcars-blue);
}

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

@media (forced-colors: active) {
  :root[data-theme="lcars"] {
    --background: Canvas;
    --surface: Canvas;
    --surface-emphasis: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: CanvasText;
    --accent: LinkText;
    --accent-strong: Highlight;
    --focus: Highlight;
    --lcars-panel: CanvasText;
    --lcars-panel-soft: Canvas;
    --lcars-pink: CanvasText;
    --lcars-blue: CanvasText;
    --lcars-violet: CanvasText;
    --lcars-ink: CanvasText;
  }

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

  :root[data-theme="lcars"] .site-header::after,
  :root[data-theme="lcars"] .panel::after {
    content: none;
  }

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