/* ═════════════════════════════════════════════════════════════
   Kawosh Analysis Pages — unified instrument styling
   Loaded globally; overrides visual tokens only.
   ═════════════════════════════════════════════════════════════ */

/* ── Back link (top of every analysis page) ────────────── */

.container > a.btn-outline-secondary.btn-sm.mb-2,
.container > a.btn-outline-secondary.btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  padding: 4px 0 12px 0 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em;
  transition: color 0.2s var(--ease);
}
.container > a.btn-outline-secondary.btn-sm.mb-2:hover,
.container > a.btn-outline-secondary.btn-sm:hover {
  color: var(--cyan) !important;
}

/* ── Page hero (h1 + h6 subtitle) ──────────────────────── */

.container > h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.container > h1.fw-bold { font-weight: 300 !important; }

.container > h6 {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0;
  margin: 0 0 32px;
  line-height: 1.5;
}
.container > h6.text-secondary { color: var(--text-dim) !important; }

.container > h1 + h5,
.container > h1 + h6 { margin-top: 0; }

/* ── Save Experiment button (appears on spectrum/conn/fp/harmon) ── */

#save-experiment-btn {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--cyan) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  padding: 6px 14px !important;
  transition: all 0.2s var(--ease);
}
#save-experiment-btn:hover {
  background: rgba(78,161,255,0.08) !important;
  box-shadow: 0 0 24px var(--cyan-glow);
}

/* ── Status message (used on almost every analysis page) ── */

#status-message {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-strong) !important;
  border-left: 3px solid var(--cyan) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 12px 18px !important;
  font-size: 0.88rem;
}
#status-message.alert-danger {
  border-left-color: var(--danger) !important;
  border-color: rgba(255,85,85,0.3) !important;
}
#status-message.alert-success {
  border-left-color: var(--success) !important;
  border-color: rgba(34,197,94,0.3) !important;
}
#status-message.alert-warning {
  border-left-color: var(--warning) !important;
  border-color: rgba(245,158,11,0.3) !important;
}

/* ── Filter bars (qc, explore, spectrum, connectivity) ─── */

.row.g-2, .row.g-3 {
  row-gap: 12px;
}

.form-label {
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
  font-weight: 500;
}

.form-select, .form-control {
  background-color: var(--bg-soft) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.form-select:focus, .form-control:focus {
  background-color: var(--bg-elev) !important;
  border-color: var(--cyan) !important;
  color: var(--text) !important;
}

/* Range slider (QC threshold) */
.form-range {
  background: transparent;
  accent-color: var(--cyan);
}
.form-range::-webkit-slider-runnable-track {
  background: var(--bg-hover);
  height: 4px;
  border-radius: 2px;
}
.form-range::-webkit-slider-thumb {
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan-glow);
  border: none;
  width: 18px; height: 18px;
  margin-top: -7px;
}
.form-range::-moz-range-track {
  background: var(--bg-hover);
  height: 4px;
  border-radius: 2px;
}
.form-range::-moz-range-thumb {
  background: var(--cyan);
  border: none;
  width: 18px; height: 18px;
  box-shadow: 0 0 16px var(--cyan-glow);
}

/* ── Cards used inside analysis pages (p-3 variants) ───── */

.card.shadow-sm,
.card.bg-dark.border-secondary {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.card.shadow-sm.p-3,
.card.p-3 {
  padding: 22px !important;
}
.card.shadow-sm h5,
.card h5 {
  font-size: 0.72rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  font-weight: 500;
  margin: 0 0 16px 0 !important;
}
.card h5 .badge {
  vertical-align: middle;
  margin-left: 8px;
}

/* ── Plotly containers — force theme ───────────────────── */

.plot-container,
[id$="-histogram"],
[id$="-matrix"],
[id$="-plot"],
[id="before-umap"],
[id="after-umap"],
[id="spectrum-plot"] {
  background: transparent !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Plotly SVG overrides — dark theme and consistent typography */
.js-plotly-plot .plotly .main-svg { background: transparent !important; }
.js-plotly-plot .plotly .bg,
.js-plotly-plot .plotly .paper { fill: var(--bg-soft) !important; }
.js-plotly-plot .plotly text {
  fill: var(--text-dim) !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-size: 11px !important;
}
.js-plotly-plot .plotly .gtitle {
  fill: var(--text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.js-plotly-plot .plotly .xtitle,
.js-plotly-plot .plotly .ytitle {
  fill: var(--text-dim) !important;
  font-size: 11px !important;
}
.js-plotly-plot .plotly .xtick text,
.js-plotly-plot .plotly .ytick text {
  fill: var(--text-muted) !important;
}
.js-plotly-plot .plotly .gridlayer path { stroke: var(--border) !important; }
.js-plotly-plot .plotly .zerolinelayer path { stroke: var(--border) !important; }
.js-plotly-plot .plotly .axislayerAbovetraces path { stroke: var(--border) !important; }
.js-plotly-plot .plotly .legend {
  bgcolor: transparent !important;
}
.js-plotly-plot .plotly .legend .bg {
  fill: var(--bg-soft) !important;
  stroke: var(--border) !important;
}
.js-plotly-plot .plotly .legend text { fill: var(--text-dim) !important; }
.js-plotly-plot .plotly .modebar {
  background: transparent !important;
}
.js-plotly-plot .plotly .modebar-btn path {
  fill: var(--text-muted) !important;
  transition: fill 0.2s var(--ease);
}
.js-plotly-plot .plotly .modebar-btn:hover path { fill: var(--cyan) !important; }

/* ── Log output ────────────────────────────────────────── */

pre#log-output {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--cyan-bright) !important;
  font-family: 'SF Mono', Menlo, Consolas, monospace !important;
  font-size: 0.78rem !important;
  line-height: 1.55;
  padding: 14px 18px !important;
}

/* ── Progress wrapper (hidden until job starts) ───────── */

#progress-wrapper.progress,
div.progress:has(#progress-bar) {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 26px !important;
  overflow: hidden;
}
#progress-bar.progress-bar,
.progress-bar {
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)) !important;
  color: #050810 !important;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ── Data tables (experiments, admin) ─────────────────── */

.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  border-color: var(--border) !important;
  font-size: 0.88rem;
}
.table-dark > :not(caption) > * > * {
  background: transparent !important;
  border-color: var(--border) !important;
  padding: 12px 14px;
}
.table-dark thead th {
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--border) !important;
}
.table-dark tbody tr { transition: background 0.15s var(--ease); }
.table-dark.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,0.015) !important;
}
.table-dark tbody tr:hover > * {
  background: var(--bg-hover) !important;
}

/* ── Badges on headings (connectivity N counts, focus ID) ── */

h5 .badge.bg-warning,
.badge.bg-warning.text-dark {
  background: rgba(245,158,11,0.15) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(245,158,11,0.3);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
}
h5 .badge.bg-primary {
  background: var(--cyan-glow) !important;
  color: var(--cyan) !important;
}

/* ── Three.js hosts (brainfingerprint) ────────────────── */

#brain-container {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}

/* ── Button group (fingerprint group toggle) ──────────── */

.btn-group > .btn-outline-danger,
.btn-group > .btn-outline-info,
.btn-group > .btn-outline-warning {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px !important;
}
.btn-group > .btn-outline-danger.active,
.btn-group > .btn-outline-info.active,
.btn-group > .btn-outline-warning.active {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: #050810 !important;
  box-shadow: 0 0 24px var(--cyan-glow);
}
.btn-group > .btn-outline-danger:hover:not(.active),
.btn-group > .btn-outline-info:hover:not(.active),
.btn-group > .btn-outline-warning:hover:not(.active) {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

/* ── Excluded subject list (qc) ───────────────────────── */

#excluded-list {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px !important;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ── Discovery page site cards (thumbnail style) ──────── */

.card-img-top {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.card:hover .card-img-top { opacity: 1; }

/* Discovery page — subject selection checkboxes / chips */
.form-check-input:checked {
  background-color: var(--cyan);
  border-color: var(--cyan);
}
.form-check-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}

/* ── Upload form (upload_asd) ──────────────────────────── */

#asd-form label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
#asd-form .form-control,
#asd-form .form-select {
  padding: 11px 14px;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
  .container > h1 { font-size: 1.5rem; }
  .container > h6 { margin-bottom: 24px; }
  .card.shadow-sm.p-3, .card.p-3 { padding: 16px !important; }
}

/* ═══════════════════════════════════════════════════════
   Plotly hoverlabel — readable on dark theme everywhere
   ═══════════════════════════════════════════════════════ */
.js-plotly-plot .plotly .hoverlayer .hovertext {
  fill: rgba(5, 8, 16, 0.96) !important;
  stroke: rgba(78, 161, 255, 0.5) !important;
}
.js-plotly-plot .plotly .hoverlayer .hovertext path {
  fill: rgba(5, 8, 16, 0.96) !important;
  stroke: rgba(78, 161, 255, 0.5) !important;
}
.js-plotly-plot .plotly .hoverlayer .hovertext text {
  fill: #ffffff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
}
.js-plotly-plot .plotly .hoverlayer .hovertext tspan {
  fill: #ffffff !important;
}
/* Marker line inside hover */
.js-plotly-plot .plotly .hoverlayer .spikeline {
  stroke: rgba(110, 231, 255, 0.7) !important;
  stroke-width: 1 !important;
}