/* ────────────────────────────────────────────────────────
   GESL — Grid Event Signature Library
   Dark scientific theme
   ──────────────────────────────────────────────────────── */

:root {
  --bg-base:    #0d1117;
  --bg-card:    #161b22;
  --bg-input:   #0d1117;
  --border:     #30363d;
  --text-pri:   #e6edf3;
  --text-sec:   #8b949e;
  --accent:     #58a6ff;
  --success:    #3fb950;
  --warning:    #d29922;
  --danger:     #f85149;
  --radius:     8px;
  --radius-lg:  12px;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-base);
  color: var(--text-pri);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.font-mono { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; }

/* ── Navbar ── */
.gesl-nav {
  background: #010409;
  border-bottom: 1px solid var(--border);
  height: 56px;
}
.brand-bolt   { font-size: 1.3rem; }
.brand-name   { font-weight: 700; font-size: 1.05rem; color: var(--text-pri); letter-spacing: .02em; }
.brand-sub    { font-size: .72rem; color: var(--text-sec); letter-spacing: .04em; text-transform: uppercase; }
.gesl-nav .nav-link { color: var(--text-sec); padding: .35rem .7rem; border-radius: 6px; font-size: .85rem; }
.gesl-nav .nav-link:hover, .gesl-nav .nav-link.active {
  color: var(--text-pri); background: #ffffff10;
}
.nav-search .form-control {
  background: #161b22; border-color: var(--border); color: var(--text-pri);
  font-size: .82rem; min-width: 200px;
}
.nav-search .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #58a6ff20; }

/* ── Hero band ── */
.hero-band {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1a2035 100%);
  border-bottom: 1px solid var(--border);
}
.hero-title  { font-size: 1.6rem; font-weight: 700; }
.hero-sub    { color: var(--text-sec); font-size: .9rem; }
.hero-search { max-width: 680px; }
.hero-search .form-control { background: #161b22; border-color: var(--border); color: var(--text-pri); }
.hero-search .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #58a6ff18; }
.hero-search .input-group-text { background: #161b22; border-color: var(--border); color: var(--text-sec); }

/* ── Stat cards ── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  text-align: center;
}
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-pri); line-height: 1.1; }
.stat-label { font-size: .75rem; color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; }

/* ── Sidebar filters ── */
.filter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-title {
  background: #0d1117;
  border-bottom: 1px solid var(--border);
  padding: .5rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-sec);
}
.filter-body { padding: .6rem .75rem; }
.filter-body .form-check-label { font-size: .82rem; color: var(--text-sec); cursor: pointer; }
.filter-body .form-check-input { background-color: #21262d; border-color: var(--border); }
.filter-body .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.ft-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.badge-count {
  background: #21262d; color: var(--text-sec);
  font-size: .68rem; padding: 1px 5px;
  border-radius: 10px; font-family: monospace;
}

/* ── Event cards grid ── */
.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  border-top: 3px solid var(--ft-color, #888);
}
.event-card:hover {
  transform: translateY(-3px);
  border-color: var(--ft-color, #888);
  box-shadow: 0 8px 24px #00000050;
}
.event-thumb {
  position: relative; height: 130px; overflow: hidden;
  background: #0d1117;
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder {
  width: 100%; height: 100%; background: #0d1117;
  display: flex; align-items: center; justify-content: center;
}
.ft-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: .65rem; font-weight: 600; color: #fff;
  padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .04em;
}
.status-chip {
  font-size: .62rem; font-weight: 600; padding: 2px 7px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: .04em;
}
.status-chip.status-pending        { background: #d2992220; color: #d29922; border: 1px solid #d2992240; }
.status-chip.status-reviewed       { background: #58a6ff20; color: #58a6ff; border: 1px solid #58a6ff40; }
.status-chip.status-verified       { background: #3fb95020; color: #3fb950; border: 1px solid #3fb95040; }
.status-chip.status-false_positive { background: #f8514920; color: #f85149; border: 1px solid #f8514940; }
.status-chip.status-uncertain      { background: #8b949e20; color: #8b949e; border: 1px solid #8b949e40; }

/* position status chip on thumbnail */
.event-thumb .status-chip {
  position: absolute; bottom: 6px; right: 6px;
}

.event-body   { padding: .7rem .8rem; }
.event-id     { font-size: .72rem; color: var(--text-sec); font-family: monospace; word-break: break-all; }
.meta-item    { font-size: .72rem; color: var(--text-sec); }

.conf-bar-wrap {
  flex: 1; height: 4px; background: #21262d;
  border-radius: 2px; overflow: hidden; min-width: 60px;
}
.conf-bar { height: 100%; border-radius: 2px; }

/* ── Event detail ── */
.event-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}
.event-detail-title { font-size: 1.1rem; font-weight: 600; }
.ft-pill {
  font-size: .75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ── Info cards ── */
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.info-card-title {
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-sec); border-bottom: 1px solid var(--border);
  padding-bottom: .5rem; margin-bottom: 0;
}
.meta-table td {
  padding: .22rem .2rem; font-size: .82rem; vertical-align: top;
  color: var(--text-sec);
}
.meta-table td:first-child { width: 45%; padding-right: .5rem; }
.meta-table td:last-child   { color: var(--text-pri); font-family: monospace; word-break: break-all; }

.arc-badge {
  background: #e74c3c18; border: 1px solid #e74c3c50;
  color: #e74c3c; border-radius: 6px;
  padding: .35rem .6rem; font-size: .75rem;
}

.tag-chip {
  display: inline-block;
  background: #21262d; border: 1px solid var(--border);
  color: var(--text-sec); border-radius: 10px;
  font-size: .72rem; padding: 2px 8px; margin: 2px;
}

.review-row {
  border-bottom: 1px solid var(--border);
  padding: .4rem 0;
  font-size: .8rem;
}
.review-row:last-child { border-bottom: none; }

/* ── Chart panel ── */
.chart-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chart-tabs {
  background: #0d1117;
  border-bottom: 1px solid var(--border);
  padding: 0 .5rem;
}
.chart-tabs .nav-link {
  color: var(--text-sec); font-size: .82rem;
  border: none; border-radius: 0;
  padding: .55rem .9rem;
  border-bottom: 2px solid transparent;
}
.chart-tabs .nav-link:hover { color: var(--text-pri); background: #ffffff08; }
.chart-tabs .nav-link.active {
  color: var(--accent); background: transparent;
  border-bottom-color: var(--accent);
}
.chart-content { padding: .25rem; }
.gesl-chart  { height: 420px; }
.chart-loading {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-sec); font-size: .85rem;
}
.chart-error {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--danger); font-size: .85rem;
}

.diag-img { border-radius: 6px; cursor: zoom-in; }
.diag-img:hover { opacity: .9; }

/* ── Similar events ── */
.sim-card {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  border-top: 2px solid var(--sim-color, #888);
  transition: transform .12s ease;
}
.sim-card:hover { transform: translateY(-2px); }
.sim-thumb {
  width: 100%; height: 70px; object-fit: cover; display: block;
  background: #161b22;
}
.sim-body { padding: .4rem .5rem; }
.sim-score { font-size: .68rem; color: var(--text-sec); }

/* ── Taxonomy ── */
.taxonomy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  border-top: 3px solid var(--ft-color, #888);
}
.tax-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700; flex-shrink: 0;
}
.tax-label   { font-weight: 600; }
.tax-key     { font-size: .72rem; font-family: monospace; }
.tax-count {
  background: #21262d; color: var(--text-sec);
  font-size: .72rem; padding: 3px 9px;
  border-radius: 10px; font-family: monospace;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border);
}
.tax-count.has-events { color: var(--accent); border-color: #58a6ff30; }
.tax-count.has-events:hover { background: #58a6ff18; }
.subtype-chip {
  font-size: .72rem; padding: 2px 8px;
  border-radius: 10px; background: #0d1117;
  border: 1px solid; color: var(--text-sec);
}
.tax-bar-wrap { height: 4px; background: #21262d; border-radius: 2px; overflow: hidden; }
.tax-bar      { height: 100%; border-radius: 2px; }

/* ── Tables ── */
.gesl-table { font-size: .82rem; }
.gesl-table th {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-sec);
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600;
}
.gesl-table td { border-color: var(--border); vertical-align: middle; }

/* ── Page titles ── */
.page-title { font-size: 1.35rem; font-weight: 700; }

/* ── Empty state ── */
.empty-state { color: var(--text-sec); }

/* ── Footer ── */
.gesl-footer {
  border-top: 1px solid var(--border);
  background: #010409;
  font-size: .75rem;
}

/* ── Tiny button variant ── */
.btn-xs { font-size: .72rem; padding: .2rem .5rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444d56; }

/* ── Bootstrap override: dark form controls ── */
.form-control, .form-select {
  background-color: #161b22;
  border-color: var(--border);
  color: var(--text-pri);
}
.form-control:focus, .form-select:focus {
  background-color: #161b22;
  border-color: var(--accent);
  color: var(--text-pri);
  box-shadow: 0 0 0 2px #58a6ff18;
}

/* ── GESL chart sidebar (waveform measurement type filter) ── */
.gesl-chart-sidebar {
  width: 195px;
  min-width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: #0a0e17;
  overflow-y: auto;
  padding: .5rem .45rem;
}
.gesl-chart-sidebar .filter-card { margin-bottom: .4rem; }
.gesl-chart-sidebar .filter-title {
  font-size: .69rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.gesl-chart-sidebar .filter-body { padding: .45rem .4rem; }
.mt-group .form-check-label  { color: var(--text-pri); font-size: .8rem; }
.mt-group .ms-3 .form-check-label { color: var(--text-sec); }

/* ── Duration dual-range slider ── */
.dur-slider-wrap {
  position: relative;
  height: 28px;
  margin: 6px 0 2px;
}
.dur-slider-track {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 100%; height: 4px;
  background: #21262d;
  border-radius: 2px;
  pointer-events: none;
}
.dur-slider-fill {
  position: absolute;
  top: 0; height: 4px;
  background: var(--accent);
  border-radius: 2px;
}
.dur-slider-input {
  position: absolute;
  width: 100%; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  margin: 0; padding: 0; height: 4px;
}
.dur-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-base);
  box-shadow: 0 0 0 2px #58a6ff40;
}
.dur-slider-input::-moz-range-thumb {
  pointer-events: all;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-base);
  box-sizing: border-box;
}
.dur-num-input {
  width: 58px !important;
  text-align: center;
  font-size: .78rem;
  padding: .2rem .3rem !important;
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ── Event card: cursor pointer + relative for overlay ── */
.event-card { cursor: pointer; position: relative; }

/* ── Event card quick-action hover overlay ── */
.event-quick-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, #00000085 35%, #000000a0);
  padding: 1.8rem .5rem .55rem;
  display: flex;
  gap: .3rem;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.event-card:hover .event-quick-actions { opacity: 1; pointer-events: auto; }
.qa-btn {
  background: #ffffff14;
  border: 1px solid #ffffff30;
  color: #fff;
  font-size: .67rem; padding: .22rem .55rem;
  border-radius: 5px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: background .12s; line-height: 1.4;
}
.qa-btn:hover { background: #ffffff28; color: #fff; }
.qa-btn.qa-verify { border-color: #3fb95045; color: #3fb950; }
.qa-btn.qa-verify:hover { background: #3fb95020; color: #3fb950; }
.qa-btn.qa-danger { border-color: #f8514945; color: #ff7b72; }
.qa-btn.qa-danger:hover { background: #f8514920; color: #ff7b72; }

/* ── Feature micro-preview chips ── */
.feat-preview-row { display: flex; flex-wrap: wrap; gap: 3px; }
.feat-chip {
  font-size: .63rem; padding: 1px 6px;
  background: #21262d; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-sec); white-space: nowrap;
}
.feat-chip.feat-arc { color: #e74c3c; border-color: #e74c3c45; background: #e74c3c12; }

/* ── Anomaly indicator ── */
.anomaly-chip { font-size: .66rem; padding: 1px 7px; border-radius: 8px; display: inline-block; }
.anomaly-fp   { background: #f8514912; border: 1px solid #f8514940; color: #f85149; }
.anomaly-ok   { background: #3fb95012; border: 1px solid #3fb95040; color: #3fb950; }
.anomaly-warn { background: #d2992215; border: 1px solid #d2992240; color: #d29922; }

/* ── Diagnostic plot card (event.html) ── */
.diag-plot-wrap img { max-height: 380px; object-fit: contain; transition: max-height .25s ease; cursor: zoom-in; }
.diag-plot-wrap.diag-zoomed img { max-height: none; cursor: zoom-out; }

/* ── Collapsible card headers ── */
.collapsible-title {
  cursor: pointer;
  user-select: none;
}
.collapsible-title:hover { background: #13181f; }
.collapse-icon {
  font-size: .72rem;
  color: var(--text-sec);
  transition: transform .2s ease;
  flex-shrink: 0;
}
/* Bootstrap sets aria-expanded on the toggle element */
.collapsible-title[aria-expanded="false"] .collapse-icon { transform: rotate(-90deg); }
.collapsible-title[aria-expanded="true"]  .collapse-icon { transform: rotate(0deg); }

/* ── Results toolbar ── */
.results-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .45rem .75rem;
}
.toolbar-vr { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.toolbar-cb { width: 15px; height: 15px; cursor: pointer; }
.toolbar-sel-label { cursor: pointer; }

/* ── Card checkbox (top-right of thumbnail) ── */
.card-cb-wrap {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 6;
  opacity: 0;
  transition: opacity .15s;
  cursor: pointer;
  padding: 2px;
  background: #00000055;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.card-cb-wrap .form-check-input { width: 15px; height: 15px; cursor: pointer; margin: 0; }
.event-card:hover .card-cb-wrap,
.event-card.is-selected .card-cb-wrap { opacity: 1; }

/* Selected card highlight */
.event-card.is-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px #58a6ff30;
}

/* ── List view table tweaks ── */
#listView .list-row:hover { background: #1e2535; }
#listView .list-row.is-selected { background: #0d1f3a; }
#listView td { padding: .45rem .5rem; border-color: var(--border); }
#listView th { padding: .4rem .5rem; }