/* MFW + Markov Dashboard — Dark Theme */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0f;
  --bg2: #141418;
  --bg3: #1c1c22;
  --border: #2a2a35;
  --text: #d4d4e0;
  --text-dim: #666680;
  --bull: #00ff88;
  --bear: #ff4444;
  --side: #ffcc00;
  --neutral: #888899;
  --poc: #ff9900;
  --vah: #00ccff;
  --val: #00ff88;
  --long: #00e5ff;
  --short: #ff6b35;
  --score-hi: #00ff88;
  --score-mid: #88cc00;
  --score-lo: #666680;
  --target: #ff8c00;
  --font: 'JetBrains Mono', 'Consolas', monospace;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; overflow: hidden; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
#app { display: grid; grid-template: "header header" auto "main sidebar" 1fr / 1fr 320px; height: 100vh; gap: 0; }

header { grid-area: header; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
header h1 { font-size: 14px; font-weight: 700; color: var(--bull); letter-spacing: 1px; }
header .pill { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.pill.bull { background: #003322; color: var(--bull); }
.pill.bear { background: #330011; color: var(--bear); }
.pill.side { background: #332200; color: var(--side); }
.pill.neutral { background: #222230; color: var(--neutral); }
header .spacer { flex: 1; }
header .ts { color: var(--text-dim); font-size: 11px; }

#main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; }
#sidebar { grid-area: sidebar; background: var(--bg2); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }

#ops-panel { border-bottom: 1px solid var(--border); padding: 0 0 8px; background: var(--bg2); }
#ops-panel h2 { font-size: 10px; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); letter-spacing: 0.5px; display: flex; justify-content: space-between; }
#ops-panel h2 span { color: var(--bull); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-grid { padding: 8px 12px; display: grid; gap: 4px; }
.ops-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
.ops-row strong { color: var(--text); }
.ops-btn { margin: 4px 12px; width: calc(100% - 24px); border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-family: var(--font); font-size: 11px; padding: 6px; border-radius: 4px; cursor: pointer; }
.ops-btn:hover { border-color: var(--bull); color: var(--bull); }
.ops-form { padding: 4px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ops-form label { display: grid; gap: 2px; font-size: 9px; color: var(--text-dim); }
.ops-form label:nth-child(2), .ops-form label:nth-child(7), .ops-form button { grid-column: 1 / -1; }
.ops-form input, .ops-form select { min-width: 0; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font); font-size: 11px; padding: 4px; border-radius: 3px; }
#ops-output { margin: 4px 12px 0; max-height: 120px; overflow: auto; white-space: pre-wrap; color: var(--text-dim); font-size: 10px; border: 1px solid var(--border); background: var(--bg); padding: 6px; border-radius: 4px; }

/* ── Chart Panels ─────────────────────────────────────────────────────────── */
.chart-stack { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.panel { background: var(--bg2); border-bottom: 1px solid var(--border); position: relative; }
.panel-label { position: absolute; top: 6px; left: 10px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; z-index: 10; pointer-events: none; }

#panel-price  { flex: 0 0 42%; }
#panel-mfw    { flex: 0 0 22%; }
#panel-vol    { flex: 0 0 14%; }
#panel-equity { flex: 0 0 22%; }

/* ── MTF Grid ─────────────────────────────────────────────────────────────── */
#mtf-grid { padding: 10px 12px; border-bottom: 1px solid var(--border); }
#mtf-grid h2 { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.5px; }
.mtf-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mtf-table th { color: var(--text-dim); font-size: 9px; font-weight: 600; padding: 2px 4px; text-align: left; border-bottom: 1px solid var(--border); }
.mtf-table td { padding: 3px 4px; border-bottom: 1px solid #1a1a22; }
.mtf-table .tf { color: var(--text-dim); font-weight: 700; }
.mtf-table .dir-bull { color: var(--bull); font-weight: 700; }
.mtf-table .dir-bear { color: var(--bear); font-weight: 700; }
.mtf-table .dir-neutral { color: var(--neutral); }
.mtf-total { margin-top: 6px; font-size: 11px; }
.mtf-total .score-val { font-weight: 700; }
.score-hi { color: var(--score-hi); }
.score-mid { color: var(--score-mid); }
.score-lo { color: var(--score-lo); }

/* ── VP Levels mini panel ─────────────────────────────────────────────────── */
#vp-mini { padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.vp-item { display: flex; flex-direction: column; gap: 2px; }
.vp-item .lbl { font-size: 9px; color: var(--text-dim); }
.vp-item .val { font-size: 12px; font-weight: 700; }
.vp-item.poc .val { color: var(--poc); }
.vp-item.vah .val { color: var(--vah); }
.vp-item.val .val { color: var(--val); }

/* ── Alert Feed ───────────────────────────────────────────────────────────── */
#alert-feed { flex: 1; overflow-y: auto; padding: 0; }
#alert-feed h2 { font-size: 10px; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); letter-spacing: 0.5px; position: sticky; top: 0; background: var(--bg2); z-index: 5; display: flex; justify-content: space-between; }
#alert-feed h2 span { color: var(--bull); }
.alert-filters { display: flex; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.filter-btn { padding: 2px 7px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 10px; font-family: var(--font); border-radius: 3px; cursor: pointer; }
.filter-btn.active { border-color: var(--bull); color: var(--bull); }
.alert-list { }
.alert-item { padding: 8px 12px; border-bottom: 1px solid #1a1a22; cursor: default; transition: background 0.15s; }
.alert-item:hover { background: var(--bg3); }
.alert-item.long { border-left: 3px solid var(--long); }
.alert-item.short { border-left: 3px solid var(--short); }
.alert-item.info { border-left: 3px solid var(--border); }
.alert-item .ah { display: flex; justify-content: space-between; margin-bottom: 3px; }
.alert-item .sig { font-size: 11px; font-weight: 700; }
.alert-item .sig.long { color: var(--long); }
.alert-item .sig.short { color: var(--short); }
.alert-item .ats { font-size: 10px; color: var(--text-dim); }
.alert-item .ab { font-size: 10px; color: var(--text-dim); line-height: 1.5; }
.no-alerts { padding: 20px 12px; color: var(--text-dim); font-size: 11px; text-align: center; line-height: 1.8; }

/* ── Bottom regime stats ──────────────────────────────────────────────────── */
#regime-stats { padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg3); }
#regime-stats h2 { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.5px; }
.regime-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.regime-table th { color: var(--text-dim); font-size: 9px; padding: 2px 4px; text-align: right; border-bottom: 1px solid var(--border); }
.regime-table th:first-child { text-align: left; }
.regime-table td { padding: 2px 4px; text-align: right; }
.regime-table td:first-child { text-align: left; }
.regime-table .r-bull { color: var(--bull); font-weight: 700; }
.regime-table .r-bear { color: var(--bear); font-weight: 700; }
.regime-table .r-side { color: var(--side); font-weight: 700; }
.no-data { color: var(--text-dim); font-size: 10px; font-style: italic; }

/* ── Loading state ────────────────────────────────────────────────────────── */
.loading { color: var(--text-dim); font-size: 11px; padding: 12px; text-align: center; }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444455; }

/* ── Pulse animation for new alerts ──────────────────────────────────────── */
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.alert-item.new { animation: slideIn 0.25s ease-out; }