/* MIDNIGHT color theme — deep navy with electric cyan, neon green, violet, amber and crimson.
   Palette sourced from tutorial contact sheet (claude_generated_candidates).
   Layout/shape rules live in interrogation-layout.css. */

:root[data-theme="midnight"] {
  --interrogation-html-bg: #050b12;
  --interrogation-html-text: #b8cce0;
  --interrogation-wrap-bg:
    radial-gradient(circle at 15% 18%, rgba(0, 229, 255, 0.10), transparent 28%),
    radial-gradient(circle at 80% 22%, rgba(201, 122, 255, 0.09), transparent 26%),
    linear-gradient(180deg, #0d1625 0%, #050b12 100%);
  --interrogation-canvas-bg: #050b12;
  --interrogation-canvas-shadow: 0 0 86px rgba(0, 18, 40, 0.92);

  --c-bg:     #080e1a;
  --c-panel:  #0d1625;
  --c-panel2: #111e30;
  --c-panel3: #162540;
  --c-card:   #050b12;
  --c-line:   #1a2f4a;
  --c-line2:  #2a4a72;
  --c-text:   #b8cce0;
  --c-muted:  #4a6080;
  --c-dim:    #334560;
  --c-cyan:   #00e5ff;
  --c-blue:   #4a9eff;
  --c-red:    #ff3c3c;
  --c-yellow: #ffa520;
  --c-orange: #ff7833;
  --c-purple: #c97aff;
  --c-green:  #39ff8a;
  --c-white:  #e0efff;
  --c-black:  #020509;

  --panel-border:        rgba(0, 229, 255, 0.20);
  --panel-glow:          rgba(0, 229, 255, 0.10);
  --danger-glow:         rgba(255, 60, 60, 0.22);
  --theme-accent:        var(--c-cyan);
  --theme-accent-2:      var(--c-purple);
  --theme-bg-flat:       rgba(5, 11, 18, 0.97);
  --theme-panel-flat:    rgba(8, 14, 26, 0.95);
  --theme-panel-soft:    rgba(11, 20, 36, 0.76);
  --theme-border:        rgba(0, 229, 255, 0.22);
  --theme-border-strong: rgba(0, 229, 255, 0.68);
  --theme-glow:          rgba(0, 229, 255, 0.14);
  --theme-grid:          rgba(0, 229, 255, 0.025);
  --theme-scroll:        rgba(0, 200, 230, 0.72);
  --theme-scroll-track:  rgba(2, 6, 14, 0.76);
  --theme-hidden-node:   rgba(74, 96, 128, 0.55);

  /* fact-card tokens (card hover/selected) */
  --fact-card-bg:             #050b14;
  --fact-card-bg-hover:       #071020;
  --fact-card-border:         rgba(0, 229, 255, 0.22);
  --fact-card-border-hover:   rgba(0, 229, 255, 0.62);
  --fact-card-selected-border: rgba(255, 60, 60, 0.96);
  --fact-card-hover-glow:     rgba(0, 229, 255, 0.28);
  --fact-selected-glow:       rgba(255, 60, 60, 0.46);
}

/* ── html/body reset ─────────────────────────────────────────── */
html[data-theme="midnight"],
:root[data-theme="midnight"] body,
:root[data-theme="midnight"] .interrogation-app,
:root[data-theme="midnight"] #wrap {
  background: #050b12 !important;
  color: var(--c-text) !important;
}

/* ── base panel background ───────────────────────────────────── */
:root[data-theme="midnight"] .topbar,
:root[data-theme="midnight"] .panel,
:root[data-theme="midnight"] .modal-card,
:root[data-theme="midnight"] .toast-error,
:root[data-theme="midnight"] .map-header-panel,
:root[data-theme="midnight"] .map-chat-overlay,
:root[data-theme="midnight"] .topbar__actions-panel,
:root[data-theme="midnight"] .status-block,
:root[data-theme="midnight"] .status-bucket,
:root[data-theme="midnight"] .action-builder,
:root[data-theme="midnight"] .action-slot--empty,
:root[data-theme="midnight"] .selected-strip,
:root[data-theme="midnight"] .section-title,
:root[data-theme="midnight"] .empty-state {
  background: rgba(8, 14, 26, 0.95) !important;
  border-color: rgba(0, 229, 255, 0.18) !important;
  box-shadow: none !important;
}

/* ── base borders ────────────────────────────────────────────── */
:root[data-theme="midnight"] .app-shell,
:root[data-theme="midnight"] .interrogation-top,
:root[data-theme="midnight"] .panel,
:root[data-theme="midnight"] .panel__head,
:root[data-theme="midnight"] .panel__body,
:root[data-theme="midnight"] .tab-row,
:root[data-theme="midnight"] .action-strip,
:root[data-theme="midnight"] .selected-strip,
:root[data-theme="midnight"] .status-block,
:root[data-theme="midnight"] .status-bucket,
:root[data-theme="midnight"] .section-title,
:root[data-theme="midnight"] .empty-state,
:root[data-theme="midnight"] .action-slot--empty,
:root[data-theme="midnight"] .topbar__meta,
:root[data-theme="midnight"] .case-meta,
:root[data-theme="midnight"] .card,
:root[data-theme="midnight"] .protocol-card,
:root[data-theme="midnight"] .map-node,
:root[data-theme="midnight"] .chat-bubble,
:root[data-theme="midnight"] .ui-btn,
:root[data-theme="midnight"] .tab-btn,
:root[data-theme="midnight"] .icon-btn,
:root[data-theme="midnight"] .topbar-tab,
:root[data-theme="midnight"] .panel-collapse-rail,
:root[data-theme="midnight"] .panel-collapse-btn,
:root[data-theme="midnight"] .topbar__collapse,
:root[data-theme="midnight"] .topbar__gear,
:root[data-theme="midnight"] .map-tools--overlay,
:root[data-theme="midnight"] .map-zoom-btn,
:root[data-theme="midnight"] .dossier-filter-btn {
  border-color: rgba(0, 229, 255, 0.18) !important;
}

:root[data-theme="midnight"] .topbar:not(.topbar--collapsed),
:root[data-theme="midnight"] .dossier-panel:not(.dossier-panel--collapsed),
:root[data-theme="midnight"] .status-panel:not(.status-panel--collapsed),
:root[data-theme="midnight"] .tabs-panel,
:root[data-theme="midnight"] .map-header-panel--full .topbar,
:root[data-theme="midnight"] .full-map-stage__action .action-builder:not(.action-builder--collapsed) {
  border-color: rgba(0, 229, 255, 0.14) !important;
  box-shadow: none !important;
}

:root[data-theme="midnight"] .panel__head,
:root[data-theme="midnight"] .section-title,
:root[data-theme="midnight"] .status-block,
:root[data-theme="midnight"] .status-bucket,
:root[data-theme="midnight"] .selected-strip,
:root[data-theme="midnight"] .action-slot--empty {
  border-color: rgba(0, 229, 255, 0.14) !important;
}

:root[data-theme="midnight"] .dossier-panel:not(.dossier-panel--collapsed) > .panel__head {
  border-bottom-color: transparent !important;
}

/* ── hover states ────────────────────────────────────────────── */
:root[data-theme="midnight"] .card:hover,
:root[data-theme="midnight"] .card:focus-visible,
:root[data-theme="midnight"] .map-node:hover,
:root[data-theme="midnight"] .map-node:focus-visible {
  border-color: var(--fact-card-border-hover) !important;
  box-shadow: 0 0 14px var(--fact-card-hover-glow) !important;
}

:root[data-theme="midnight"] .card:not(.map-node):not(.card--selected) {
  border-color: var(--fact-card-border) !important;
  border-left-color: var(--fact-card-border) !important;
}

:root[data-theme="midnight"] .card:not(.map-node):not(.card--selected):hover,
:root[data-theme="midnight"] .card:not(.map-node):not(.card--selected):focus-visible {
  border-color: var(--fact-card-border-hover) !important;
  border-left-color: var(--fact-card-border-hover) !important;
  box-shadow: 0 0 14px var(--fact-card-hover-glow), inset 0 0 16px rgba(255,255,255,0.018) !important;
}

:root[data-theme="midnight"] .ui-btn:hover,
:root[data-theme="midnight"] .ui-btn:focus-visible,
:root[data-theme="midnight"] .tab-btn:hover,
:root[data-theme="midnight"] .tab-btn:focus-visible,
:root[data-theme="midnight"] .icon-btn:hover,
:root[data-theme="midnight"] .icon-btn:focus-visible,
:root[data-theme="midnight"] .dossier-filter-btn:hover,
:root[data-theme="midnight"] .dossier-filter-btn:focus-visible {
  border-color: rgba(0, 229, 255, 0.55) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.16) !important;
}

/* generic button hover: text/icon to white */
:root[data-theme="midnight"] :is(.ui-btn, .tab-btn, .icon-btn, .topbar-tab,
  .panel-collapse-rail, .panel-collapse-btn, .topbar__collapse, .topbar__gear,
  .map-zoom-btn, .dossier-filter-btn):not(:disabled):is(:hover, :focus-visible) {
  color: var(--c-white) !important;
}

:root[data-theme="midnight"] :is(.ui-btn, .tab-btn, .icon-btn, .topbar-tab,
  .panel-collapse-rail, .panel-collapse-btn, .topbar__collapse, .topbar__gear,
  .map-zoom-btn, .dossier-filter-btn):not(:disabled):is(:hover, :focus-visible) .ui-icon {
  color: var(--c-white) !important;
}

/* ── active / selected states ────────────────────────────────── */
:root[data-theme="midnight"] .card--selected,
:root[data-theme="midnight"] .map-node--selected,
:root[data-theme="midnight"] .protocol-card--selected,
:root[data-theme="midnight"] .ui-btn--active:not(.topbar__gear),
:root[data-theme="midnight"] .tab-btn--active,
:root[data-theme="midnight"] .topbar-tab--active,
:root[data-theme="midnight"] .dossier-filter-btn.ui-btn--active,
:root[data-theme="midnight"] .filter-row--icons.dossier-filter-rail .dossier-filter-btn.ui-btn--active,
:root[data-theme="midnight"] .filter-row--icons.dossier-filter-rail .ui-btn--icon-only.dossier-filter-btn.ui-btn--active {
  color: var(--c-cyan) !important;
  border-color: rgba(0, 229, 255, 0.76) !important;
  background: rgba(0, 40, 60, 0.92) !important;
}

:root[data-theme="midnight"] .card.card--selected,
:root[data-theme="midnight"] .card:not(.map-node).card--selected,
:root[data-theme="midnight"] .map-node.map-node--selected {
  border-color: var(--c-red) !important;
  border-left-color: var(--c-red) !important;
  box-shadow: 0 0 14px var(--fact-selected-glow) !important;
}

:root[data-theme="midnight"] :is(.ui-btn--active:not(.topbar__gear), .tab-btn--active,
  .topbar-tab--active, .dossier-filter-btn.ui-btn--active):not(:disabled):is(:hover, :focus-visible) .ui-icon {
  --accent: var(--c-white) !important;
  color: var(--c-white) !important;
  stroke: var(--c-white) !important;
}

/* ── titles ──────────────────────────────────────────────────── */
:root[data-theme="midnight"] .panel__title,
:root[data-theme="midnight"] .panel-title-label,
:root[data-theme="midnight"] .action-builder__label,
:root[data-theme="midnight"] .status-block__title,
:root[data-theme="midnight"] .status-bucket__head,
:root[data-theme="midnight"] .section-title,
:root[data-theme="midnight"] .section-title-label,
:root[data-theme="midnight"] .status-title-label {
  color: #00e5ff !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.35) !important;
}

:root[data-theme="midnight"] .card__type,
:root[data-theme="midnight"] .card__type-label,
:root[data-theme="midnight"] .card__fact-icon,
:root[data-theme="midnight"] .card__type-icon,
:root[data-theme="midnight"] .map-node__type,
:root[data-theme="midnight"] .map-node__fact-icon {
  color: var(--accent, var(--c-cyan)) !important;
  stroke: currentColor !important;
}

/* ── danger / verdict buttons ────────────────────────────────── */
:root[data-theme="midnight"] .ui-btn--danger,
:root[data-theme="midnight"] .verdict-btn,
:root[data-theme="midnight"] .status-verdict-bar .ui-btn {
  color: var(--c-red) !important;
  border-color: rgba(255, 60, 60, 0.55) !important;
  background: rgba(22, 4, 10, 0.72) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="midnight"] .ui-btn--danger:hover,
:root[data-theme="midnight"] .verdict-btn:hover,
:root[data-theme="midnight"] .status-verdict-bar .ui-btn:hover,
:root[data-theme="midnight"] .ui-btn--danger:focus-visible,
:root[data-theme="midnight"] .verdict-btn:focus-visible,
:root[data-theme="midnight"] .status-verdict-bar .ui-btn:focus-visible {
  color: var(--c-white) !important;
  border-color: rgba(255, 60, 60, 0.90) !important;
  background: rgba(32, 6, 14, 0.88) !important;
}

:root[data-theme="midnight"] .ui-btn--danger:hover .ui-icon,
:root[data-theme="midnight"] .verdict-btn:hover .ui-icon,
:root[data-theme="midnight"] .status-verdict-bar .ui-btn:hover .ui-icon,
:root[data-theme="midnight"] .ui-btn--danger:focus-visible .ui-icon,
:root[data-theme="midnight"] .verdict-btn:focus-visible .ui-icon,
:root[data-theme="midnight"] .status-verdict-bar .ui-btn:focus-visible .ui-icon {
  color: var(--c-white) !important;
}

/* ── action-ready button ─────────────────────────────────────── */
:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled) {
  color: var(--c-red) !important;
  border-color: rgba(255, 60, 60, 0.80) !important;
  background: #160610 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled) .ui-icon {
  color: var(--c-red) !important;
}

:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled):hover,
:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled):focus-visible {
  color: var(--c-white) !important;
  border-color: rgba(255, 60, 60, 0.95) !important;
  background: #200812 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled):hover .ui-icon,
:root[data-theme="midnight"] .action-builder .action-strip .ui-btn--action-ready:not(:disabled):focus-visible .ui-icon {
  color: var(--c-white) !important;
}

/* ── chat bubbles ────────────────────────────────────────────── */
:root[data-theme="midnight"] .chat-bubble,
:root[data-theme="midnight"] .chat-bubble--apparatus,
:root[data-theme="midnight"] .chat-bubble--warning,
:root[data-theme="midnight"] .chat-bubble--error,
:root[data-theme="midnight"] .chat-bubble--breakthrough,
:root[data-theme="midnight"] .chat-bubble--success,
:root[data-theme="midnight"] .chat-bubble--noeffect {
  border-color: rgba(0, 229, 255, 0.30) !important;
  background: rgba(5, 11, 22, 0.82) !important;
}

:root[data-theme="midnight"] .chat-bubble--system,
:root[data-theme="midnight"] .chat-bubble--warning,
:root[data-theme="midnight"] .chat-bubble--error,
:root[data-theme="midnight"] .chat-bubble--breakthrough,
:root[data-theme="midnight"] .chat-bubble--success,
:root[data-theme="midnight"] .chat-bubble--noeffect {
  border-color: rgba(0, 200, 255, 0.34) !important;
  background: rgba(5, 11, 22, 0.82) !important;
}

:root[data-theme="midnight"] .chat-bubble--interrogator,
:root[data-theme="midnight"] .chat-bubble--you,
:root[data-theme="midnight"] .chat-bubble--player {
  border-color: rgba(184, 204, 224, 0.72) !important;
  background: rgba(5, 14, 30, 0.82) !important;
}

:root[data-theme="midnight"] .chat-bubble--apparatus {
  border-color: rgba(201, 122, 255, 0.50) !important;
  background: rgba(14, 8, 30, 0.82) !important;
}

:root[data-theme="midnight"] .chat-bubble--suspect {
  border-color: rgba(255, 60, 60, 0.80) !important;
  background: rgba(22, 4, 10, 0.82) !important;
}

:root[data-theme="midnight"] .chat-bubble__text,
:root[data-theme="midnight"] .transcript .chat-bubble__text {
  color: #cce0f4 !important;
}

:root[data-theme="midnight"] .chat-bubble__who {
  color: #00cfe8 !important;
}

:root[data-theme="midnight"] :is(.chat-bubble--system, .chat-bubble--warning, .chat-bubble--error,
  .chat-bubble--breakthrough, .chat-bubble--success, .chat-bubble--noeffect) .chat-bubble__who {
  color: rgba(0, 229, 255, 0.88) !important;
}

:root[data-theme="midnight"] :is(.chat-bubble--interrogator, .chat-bubble--you,
  .chat-bubble--player, .chat-bubble--apparatus) .chat-bubble__who {
  color: rgba(224, 239, 255, 0.96) !important;
}

:root[data-theme="midnight"] .chat-bubble--suspect .chat-bubble__who {
  color: rgba(255, 80, 80, 0.96) !important;
}

/* ── full-map center passthrough ─────────────────────────────── */
.layout--fullscreen-map > .tabs-panel.full-map-center,
.layout--fullscreen-map > .tabs-panel.full-map-center.panel,
.layout--fullscreen-map > .tabs-panel.full-map-center::before,
.layout--fullscreen-map > .tabs-panel.full-map-center::after,
.full-map-center,
.full-map-center__spacer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.layout--fullscreen-map > .tabs-panel.full-map-center {
  pointer-events: none !important;
  isolation: auto !important;
}

.layout--fullscreen-map > .tabs-panel.full-map-center > .full-map-center__tools,
.layout--fullscreen-map > .tabs-panel.full-map-center > .map-chat-panel,
.layout--fullscreen-map > .tabs-panel.full-map-center > .action-builder,
.layout--fullscreen-map > .tabs-panel.full-map-center > .action-builder--collapsed {
  pointer-events: auto !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice {
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice--human {
  color: #58f2a2 !important;
  border-color: rgba(88, 242, 162, 0.72) !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice--android {
  color: #ff3357 !important;
  border-color: rgba(255, 51, 87, 0.72) !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice .ui-icon {
  color: currentColor !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice:not(:disabled):is(:hover, :focus-visible) {
  color: var(--c-white) !important;
  background: transparent !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice:not(:disabled):is(:hover, :focus-visible) .ui-icon {
  color: var(--c-white) !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice--human:not(:disabled):is(:hover, :focus-visible) {
  border-color: rgba(88, 242, 162, 0.90) !important;
  box-shadow: 0 0 18px rgba(88, 242, 162, 0.34), inset 0 0 16px rgba(88, 242, 162, 0.08) !important;
}

:root[data-theme="midnight"] .modal-card--report .report-choice--android:not(:disabled):is(:hover, :focus-visible) {
  border-color: rgba(255, 51, 87, 0.90) !important;
  box-shadow: 0 0 18px rgba(255, 51, 87, 0.34), inset 0 0 16px rgba(255, 51, 87, 0.08) !important;
}