/* First-responder dispatch presentation. Layout belongs to dashboard.css. */

:root[data-theme="first-responder"] {
  color-scheme: dark;
  --background: #07111f;
  --surface: #0d1b2d;
  --surface-emphasis: #12243a;
  --text: #eef6ff;
  --muted: #adc0d6;
  --border: #36546f;
  --accent: #4ea1ff;
  --accent-strong: #7bb9ff;
  --success: #6ed8a6;
  --warning: #ffd166;
  --danger: #ff8585;
  --focus: #b9dcff;
  --shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.32);
  --radius-small: 0.35rem;
  --radius-large: 0.55rem;
  --dispatch-accent: #4ea1ff;
  --dispatch-soft: rgb(78 161 255 / 0.08);
  --dispatch-red: #d94f4f;
  --dispatch-navy: #071525;
}

:root[data-theme="first-responder"] body {
  background:
    linear-gradient(135deg, rgb(78 161 255 / 0.06), transparent 32%),
    linear-gradient(315deg, rgb(217 79 79 / 0.05), transparent 38%),
    var(--background);
}

:root[data-theme="first-responder"] .site-header {
  position: relative;
  border-color: #456581;
  background: linear-gradient(180deg, #142a43, #09182a);
  box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 0.34);
}

:root[data-theme="first-responder"] .site-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--dispatch-accent) 0 46%,
    #f5f8fb 46% 54%,
    var(--dispatch-red) 54% 100%
  );
  content: "";
  opacity: 0.9;
}

:root[data-theme="first-responder"] .overview {
  padding-top: 0.5rem;
}

:root[data-theme="first-responder"] .site-header h1,
:root[data-theme="first-responder"] .site-header .eyebrow {
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

:root[data-theme="first-responder"] .workspace-shell {
  border: 1px solid #456581;
  border-radius: var(--radius-large);
  background: linear-gradient(180deg, #0d1c2e, #071423);
  box-shadow:
    0 0 0 1px rgb(185 220 255 / 0.07) inset,
    var(--shadow);
}

:root[data-theme="first-responder"] .workspace-tabs {
  border-bottom: 1px solid #456581;
  background: #091827;
}

:root[data-theme="first-responder"] .workspace-tabs button,
:root[data-theme="first-responder"] .workspace-tabs [role="tab"] {
  border-color: #456581;
  border-radius: 0.2rem;
  background: linear-gradient(180deg, #182e45, #0a1929);
  color: var(--muted);
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset;
}

:root[data-theme="first-responder"] .workspace-tabs button:hover,
:root[data-theme="first-responder"] .workspace-tabs button:focus-visible,
:root[data-theme="first-responder"] .workspace-tabs [role="tab"]:hover,
:root[data-theme="first-responder"] .workspace-tabs [role="tab"]:focus-visible {
  border-color: var(--dispatch-accent);
  color: var(--text);
}

:root[data-theme="first-responder"] .workspace-tabs button[aria-selected="true"],
:root[data-theme="first-responder"] .workspace-tabs [role="tab"][aria-selected="true"] {
  border-color: #b6d8f6;
  background: linear-gradient(
    105deg,
    #1762a6 0 43%,
    #f5f8fb 43% 47%,
    #9e3035 47% 100%
  );
  color: #fff;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18) inset,
    0 0 1rem rgb(78 161 255 / 0.16);
}

:root[data-theme="first-responder"] .workspace-deck {
  border-radius: 0 0 var(--radius-large) var(--radius-large);
  background: rgb(3 11 20 / 0.38);
}

:root[data-theme="first-responder"] [data-workspace-pane] {
  border-color: #29445d;
  background: linear-gradient(180deg, rgb(18 36 58 / 0.72), rgb(7 17 31 / 0.7));
}

:root[data-theme="first-responder"] .panel {
  --panel-signal: var(--dispatch-accent);
  position: relative;
  border-color: #456581;
  border-top: 0.25rem solid var(--panel-signal);
  border-radius: var(--radius-small);
  background: linear-gradient(155deg, #12243a, #091828 72%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.07) inset,
    0 0.45rem 1.15rem rgb(0 0 0 / 0.28);
}

:root[data-theme="first-responder"] .scanner-controls-panel,
:root[data-theme="first-responder"] .recording-control-panel {
  --panel-signal: var(--dispatch-red);
}

:root[data-theme="first-responder"] .browser-audio-panel,
:root[data-theme="first-responder"] .recording-playback-panel {
  --panel-signal: var(--warning);
}

:root[data-theme="first-responder"] .panel h2,
:root[data-theme="first-responder"] .panel h3,
:root[data-theme="first-responder"] .radio-field-groups h3 {
  color: var(--text);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

:root[data-theme="first-responder"] .panel h2::before,
:root[data-theme="first-responder"] .panel h3::before {
  display: inline-block;
  width: 0.52rem;
  height: 0.38rem;
  margin-right: 0.4rem;
  content: "";
  background: var(--panel-signal);
}

:root[data-theme="first-responder"] #radio-activity-panel {
  --panel-signal: var(--dispatch-accent);
  border: 1px solid #7198ba;
  border-top: 0.35rem solid var(--dispatch-accent);
  background:
    linear-gradient(90deg, rgb(78 161 255 / 0.1), transparent 48%),
    linear-gradient(270deg, rgb(217 79 79 / 0.08), transparent 52%),
    #061321;
  box-shadow:
    0 0 0 0.18rem #1b344c,
    0 0 1.4rem rgb(78 161 255 / 0.15),
    0 0.7rem 1.4rem rgb(0 0 0 / 0.38);
}

:root[data-theme="first-responder"] #radio-activity-panel h2 {
  color: #dceeff;
  text-shadow: 0 0 0.55rem rgb(78 161 255 / 0.45);
}

:root[data-theme="first-responder"] #radio-activity-panel .label,
:root[data-theme="first-responder"] #radio-activity-panel dt {
  color: #8ebfe9;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

:root[data-theme="first-responder"] #radio-activity-panel .value,
:root[data-theme="first-responder"] #radio-activity-panel dd,
:root[data-theme="first-responder"] #radio-activity-panel output {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

:root[data-theme="first-responder"] .radio-view-controls {
  border: 1px solid #36546f;
  border-left: 0.3rem solid var(--dispatch-accent);
  border-radius: var(--radius-small);
  background: #091929;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset;
}

:root[data-theme="first-responder"] .radio-field-groups {
  border-color: #29445d;
  border-radius: var(--radius-small);
  background: var(--dispatch-soft);
  box-shadow: 0 0 0 1px #36546f inset;
}

:root[data-theme="first-responder"] button,
:root[data-theme="first-responder"] .button,
:root[data-theme="first-responder"] .primary-button,
:root[data-theme="first-responder"] .secondary-button {
  border-color: #5a7690;
  border-radius: 0.22rem;
  background: linear-gradient(180deg, #1b354f, #0c1d2d);
  color: var(--text);
  font-weight: 730;
  letter-spacing: 0.025em;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset;
}

:root[data-theme="first-responder"] button:hover,
:root[data-theme="first-responder"] .button:hover,
:root[data-theme="first-responder"] .primary-button:hover,
:root[data-theme="first-responder"] .secondary-button:hover {
  border-color: var(--dispatch-accent);
  background: linear-gradient(180deg, #24517a, #10304d);
}

:root[data-theme="first-responder"] .primary-button {
  border-color: #79b7ed;
  background: linear-gradient(180deg, #2877bc, #15548c);
  color: #fff;
}

:root[data-theme="first-responder"] button:focus-visible,
:root[data-theme="first-responder"] .button:focus-visible,
:root[data-theme="first-responder"] .primary-button:focus-visible,
:root[data-theme="first-responder"] .secondary-button:focus-visible,
:root[data-theme="first-responder"] input:focus-visible,
:root[data-theme="first-responder"] select:focus-visible {
  outline-color: var(--focus);
  box-shadow: 0 0 0 0.18rem rgb(185 220 255 / 0.24);
}

:root[data-theme="first-responder"] input,
:root[data-theme="first-responder"] select,
:root[data-theme="first-responder"] textarea {
  border-color: #456581;
  border-radius: 0.22rem;
  background: #061321;
  color: var(--text);
}

:root[data-theme="first-responder"] .status,
:root[data-theme="first-responder"] [data-status] {
  border-color: #456581;
  background: #091929;
  color: var(--muted);
  font-weight: 720;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

:root[data-theme="first-responder"] .status.connected,
:root[data-theme="first-responder"] .status.success,
:root[data-theme="first-responder"] [data-status="connected"],
:root[data-theme="first-responder"] [data-status="success"] {
  border-color: var(--success);
  color: var(--success);
}

:root[data-theme="first-responder"] .status.loading,
:root[data-theme="first-responder"] .status.warning,
:root[data-theme="first-responder"] [data-status="loading"],
:root[data-theme="first-responder"] [data-status="warning"] {
  border-color: var(--warning);
  color: var(--warning);
}

:root[data-theme="first-responder"] .status.error,
:root[data-theme="first-responder"] [data-status="error"] {
  border-color: var(--danger);
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="first-responder"] *,
  :root[data-theme="first-responder"] *::before,
  :root[data-theme="first-responder"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  :root[data-theme="first-responder"] {
    --background: Canvas;
    --surface: Canvas;
    --surface-emphasis: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: CanvasText;
    --accent: Highlight;
    --accent-strong: Highlight;
    --focus: Highlight;
    --dispatch-accent: Highlight;
    --dispatch-red: Highlight;
  }

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

  :root[data-theme="first-responder"] .site-header::after,
  :root[data-theme="first-responder"] .panel h2::before,
  :root[data-theme="first-responder"] .panel h3::before {
    background: Highlight;
    color: Highlight;
  }
}