/* ── filter.css — Filter page styles ──────────────────────────────────────── */

/* ── Macro context banner ────────────────────────────────────────────────── */
.filter-macro-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  margin: 4px 0 8px;
  border: 1px solid #263238;
}
.filter-macro-banner--risk_on { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.2) }
.filter-macro-banner--risk_off { background: rgba(239,83,80,0.06); border-color: rgba(239,83,80,0.2) }
.filter-macro-banner--crisis { background: rgba(239,83,80,0.1); border-color: rgba(239,83,80,0.3) }
.filter-macro-banner--transition { background: rgba(255,213,79,0.06); border-color: rgba(255,213,79,0.2) }
.macro-banner-regime { font-weight: 700; font-size: 12px }
.macro-banner-item { color: #90a4ae }
.macro-banner-item b { color: #cfd8dc }

/* ── Multi-select dropdown widget ─────────────────────────────────────────── */
.msel {
  position: relative;
  display: inline-block;
}
.msel-btn {
  font-size: 11px;
  height: 24px;
  padding: 0 16px 0 6px;
  background: #272a3a;
  color: #e0e0e0;
  border: 1px solid #3a3d4e;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  min-width: 48px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  line-height: 22px;
  position: relative;
}
.msel-btn::after {
  content: '\25BE';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #78909c;
}
.msel-btn.msel-active {
  color: #4ade80;
  border-color: #4ade80;
}
.msel-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 150;
  background: #272a3a;
  border: 1px solid #3a3d4e;
  border-radius: 4px;
  padding: 4px 0;
  margin-top: 2px;
  min-width: 140px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.msel.open .msel-drop {
  display: block;
}
.msel-drop label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #e0e0e0;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.msel-drop label:hover {
  background: rgba(255,255,255,0.06);
}
.msel-drop input[type="checkbox"] {
  accent-color: #4ade80;
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
}

/* ── Slim progress bar ───────────────────────────────────────────────────── */
.filter-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #4ade80, #26C6DA);
  z-index: 200;
  transition: width 0.3s ease;
  pointer-events: none;
}
.filter-progress.active { opacity: 1; }
.filter-progress.done { transition: width 0.2s ease, opacity 0.5s ease 0.3s; opacity: 0; }

/* ── Sticky filter bar — below navbar (52px) ─────────────────────────────── */
.filter-controls-bar {
  position: sticky;
  top: 52px;
  z-index: 100;
  background: #1a1d27;
  padding: 6px 0;
  border-bottom: 1px solid #2a2d3e;
}
.filter-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.filter-controls-row .control-group {
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
}
.filter-controls-row .control-group label {
  font-size: 10px;
  color: #78909c;
  white-space: nowrap;
}
/* Shared height for all inputs and selects in the filter bar */
.filter-controls-row select,
.filter-controls-row input[type="number"],
.filter-controls-row input[type="text"] {
  font-size: 11px;
  height: 24px;
  padding: 0 4px;
  background: #272a3a;
  color: #e0e0e0;
  border: 1px solid #3a3d4e;
  border-radius: 3px;
  box-sizing: border-box;
  line-height: 22px;
  min-width: 0;
}
/* Hide number input spinners so narrow widths actually take effect */
.filter-controls-row input[type="number"] {
  -moz-appearance: textfield;
}
.filter-controls-row input[type="number"]::-webkit-outer-spin-button,
.filter-controls-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Filter button — bottom-align with dropdowns, push to right edge */
.filter-controls-row .control-group:last-child {
  align-self: flex-end;
  margin-left: auto;
}
.filter-controls-row .btn-primary {
  height: 24px;
  padding: 0 12px;
  font-size: 11px;
  line-height: 22px;
  box-sizing: border-box;
}
.filter-controls-row select {
  width: auto;
}

/* ── Status line below filter bar ─────────────────────────────────────────── */
.filter-status-bar {
  display: flex;
  gap: 12px;
  padding: 2px 0 4px;
  font-size: 11px;
  min-height: 16px;
}

/* ── Log area — fixed 2 lines ─────────────────────────────────────────────── */
.filter-log {
  height: 33px;
  overflow-y: hidden;
  font-size: 11px;
  font-family: monospace;
  color: #78909c;
  padding: 0;
  line-height: 1.5;
}
.filter-log .log-line { white-space: nowrap; }
.filter-log .log-ok  { color: #4ade80; }
.filter-log .log-err { color: #EF5350; }

/* ── Results table ───────────────────────────────────────────────────────── */
.filter-table-wrap {
  overflow-x: clip;
}
.filter-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
}
.filter-table th,
.filter-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #2a2d3e;
  text-align: right;
}
.filter-table th {
  background: #1a1d27;
  color: #90a4ae;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
  z-index: 50;
  position: sticky;
  top: var(--filter-bar-h, 90px);
}
.filter-table th:hover {
  color: #e0e0e0;
}
.filter-table th.sort-asc::after  { content: ' \25B2'; font-size: 9px; }
.filter-table th.sort-desc::after { content: ' \25BC'; font-size: 9px; }
.filter-table th:first-child,
.filter-table td:first-child {
  text-align: left;
}
.filter-table td.col-ticker {
  font-weight: 600;
  color: #e0e0e0;
  text-align: left;
  max-width: 50px;
}
.filter-table td.col-signals {
  text-align: left;
}
.filter-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Value colors ────────────────────────────────────────────────────────── */
.v-pos { color: #4ade80; }
.v-neg { color: #EF5350; }
.v-neu { color: #78909c; }
.v-dex-pos { color: #42A5F5; }
.v-dex-neg { color: #EF5350; }
.v-vex-pos { color: #CE93D8; }
.v-vex-neg { color: #FF7043; }
.v-skew-put  { color: #FFB74D; }
.v-skew-call { color: #CE93D8; }

/* ── Signal badges ───────────────────────────────────────────────────────── */
.sig-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
  font-weight: 600;
}
.sig-trapdoor  { background: rgba(239,83,80,0.2);  color: #EF5350; }
.sig-pin       { background: rgba(255,213,79,0.2);  color: #FFD54F; }
.sig-near-flip { background: rgba(38,198,218,0.2);  color: #26C6DA; }
.sig-ext-pcr   { background: rgba(206,147,216,0.2); color: #CE93D8; }

/* Trade structure flow signals */
.sig-bull_spread_call { background: rgba(74,222,128,0.2);  color: #4ade80; }
.sig-bear_spread_put  { background: rgba(239,83,80,0.2);   color: #EF5350; }
.sig-bull_big_call    { background: rgba(74,222,128,0.15);  color: #66bb6a; }
.sig-bull_sell_put    { background: rgba(38,198,218,0.2);   color: #26C6DA; }
.sig-gamma_squeeze_multi { background: rgba(255,87,34,0.3); color: #FF5722; font-weight: 700; border: 1px solid rgba(255,87,34,0.5); }
.sig-pos_gamma_region { background: rgba(0,230,118,0.2); color: #00E676; font-weight: 700; border: 1px solid rgba(0,230,118,0.4); }
.sig-gamma_support_reclaim { background: rgba(0,230,118,0.35); color: #00E676; font-weight: 700; border: 2px solid rgba(0,230,118,0.7); text-shadow: 0 0 6px rgba(0,230,118,0.5); }

/* ΔOI signal badges */
.sig-wall_crumble  { background: rgba(239,83,80,0.15);  color: #EF5350; }
.sig-wall_build    { background: rgba(74,222,128,0.15);  color: #4ade80; }
.sig-vol_oi_open   { background: rgba(74,222,128,0.15);  color: #81C784; }
.sig-vol_oi_close  { background: rgba(239,83,80,0.15);   color: #E57373; }

/* ΔOI flow badges (table column) */
.badge-doi {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-call_building  { background: rgba(74,222,128,0.1);  color: #4ade80; }
.badge-call_unwinding { background: rgba(229,115,115,0.1); color: #E57373; }
.badge-put_building   { background: rgba(239,83,80,0.1);   color: #EF5350; }
.badge-put_unwinding  { background: rgba(129,199,132,0.1); color: #81C784; }

/* ── Regime badges ───────────────────────────────────────────────────────── */
.regime-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.regime-1 { background: rgba(255,213,79,0.2);  color: #FFD54F; }
.regime-2 { background: rgba(38,198,218,0.2);  color: #26C6DA; }
.regime-3 { background: rgba(74,222,128,0.15); color: #4ade80; }
.regime-4 { background: rgba(74,222,128,0.1);  color: #81c784; }
.regime-5 { background: rgba(239,83,80,0.15);  color: #ef9a9a; }
.regime-6 { background: rgba(239,83,80,0.2);   color: #EF5350; }
.regime-7 { background: rgba(239,83,80,0.25);  color: #e53935; }
.structure-badge { background: rgba(156,39,176,0.15); color: #CE93D8; margin-left: 3px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.filter-empty {
  text-align: center !important;
  color: #78909c;
  padding: 24px 8px !important;
  font-style: italic;
}

/* ── Glossary / column definitions ───────────────────────────────────────── */
.glossary-details {
  margin: 24px 0 16px;
  border: 1px solid #2a2d3e;
  border-radius: 6px;
  background: #1a1d27;
}
.glossary-summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #90a4ae;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.glossary-summary::-webkit-details-marker { display: none; }
.glossary-summary::before {
  content: '\25B6';
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  transition: transform 0.15s;
}
details[open] > .glossary-summary::before { transform: rotate(90deg); }
.glossary-summary:hover { color: #e0e0e0; }
.glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 0 0 12px;
}
.glossary-table th {
  background: #1e2130;
  color: #90a4ae;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #2a2d3e;
}
.glossary-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #222538;
  color: #cfd8dc;
  vertical-align: top;
  line-height: 1.5;
}
.glossary-table td:first-child {
  white-space: nowrap;
  color: #e0e0e0;
}
.glossary-table td code {
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  color: #80cbc4;
}