/* ══════════════════════════════════════════════════════════
   ES SCALPING DESK — STYLES
   ══════════════════════════════════════════════════════════ */

:root {
  --bg: #05080f; --card: #0c1220; --card-alt: #0f1628; --border: #1a2744;
  --text: #c8d6e5; --text-m: #7b8ca8; --text-d: #3d4f6e;
  --green: #00d67e; --green-d: rgba(0,214,126,0.12);
  --red: #ff4757; --red-d: rgba(255,71,87,0.12);
  --amber: #ffb347; --amber-d: rgba(255,179,71,0.12);
  --blue: #4a9eff; --blue-d: rgba(74,158,255,0.12);
  --purple: #a78bfa; --cyan: #22d3ee;
  --mono: 'JetBrains Mono', monospace; --sans: 'Outfit', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); height:100vh; overflow:hidden; display:flex; flex-direction:column; }

/* Ticker tape */
.ticker-wrap { border-bottom:1px solid var(--border); background:#000; height:36px; flex-shrink:0; overflow:hidden; }

/* Header */
.hdr { padding:8px 20px; background:linear-gradient(180deg,var(--card) 0%,var(--card-alt) 100%); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.clock-box { text-align:center; min-width:180px; }
.clock-time { font-family:var(--mono); font-size:36px; font-weight:800; color:#fff; letter-spacing:0.5px; line-height:1; }
.clock-lbl { font-family:var(--mono); font-size:9px; color:var(--text-m); text-transform:uppercase; letter-spacing:2px; margin-top:3px; font-weight:700; }
.hdr-center { display:flex; align-items:center; gap:12px; }
.hdr-title { font-size:16px; color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; }
.hdr-btn { background:var(--bg); border:1px solid var(--border); color:var(--text-m); padding:4px 10px; cursor:pointer; font-family:var(--mono); font-size:9px; border-radius:4px; transition:all 0.2s; font-weight:700; }
.hdr-btn:hover { border-color:var(--blue); color:var(--blue); }
.hdr-btn.active { border-color:var(--green); color:var(--green); }

/* Master Composite */
.master-composite { background:var(--card); border-bottom:1px solid var(--border); padding:6px 20px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:20px; }
.comp-left { display:flex; align-items:center; gap:8px; min-width:200px; }
.comp-center { flex:1; text-align:center; }
.comp-right { min-width:200px; text-align:right; }
.composite-lbl { font-family:var(--mono); font-size:9px; color:var(--text-m); letter-spacing:1.5px; text-transform:uppercase; }
.composite-val { font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin:1px 0; }
.composite-sub { font-family:var(--mono); font-size:10px; color:var(--text-m); }
/* Trend labels */
.trend-up { color:var(--green); font-weight:700; font-size:10px; }
.trend-dn { color:var(--red); font-weight:700; font-size:10px; }
.trend-neu { color:var(--amber); font-weight:600; font-size:10px; }

.score-breakdown { font-family:var(--mono); font-size:9px; color:var(--text-d); margin-top:2px; letter-spacing:0.3px; }
.score-breakdown b { color:var(--text); font-weight:700; }
.score-breakdown .breakdown-sep { color:var(--border); margin:0 4px; }

/* Page layout */
.page { padding:8px 12px; flex:1; display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; overflow-x:hidden; }
.fast-internals { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; flex-shrink:0; }
.main-content { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:3fr 2fr; gap:8px; flex:1; min-height:0; }

/* Cards */
.card { background:var(--card); border:1px solid var(--border); border-radius:6px; display:flex; flex-direction:column; overflow:hidden; }
.card-hdr { padding:5px 10px; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); font-family:var(--mono); font-size:9px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; flex-shrink:0; display:flex; justify-content:space-between; align-items:center; }
.card-hdr .bias-tag { font-size:8px; padding:1px 5px; border-radius:3px; font-weight:800; letter-spacing:0.5px; }

/* Internal cards (fast internals row) */
.internal-card { background:var(--card); border:1px solid var(--border); border-radius:6px; display:flex; flex-direction:column; overflow:hidden; }
.internal-card .card-hdr { padding:4px 8px; }
.tv-widget-wrap { flex:1; position:relative; overflow:hidden; min-height:45px; }
.tv-widget-wrap iframe { position:absolute; top:-62px; left:-5px; width:calc(100% + 10px); height:180px !important; border:none; pointer-events:none; }
.tv-symbol-wrap { flex:1; position:relative; overflow:hidden; min-height:70px; }
.tv-symbol-wrap .tradingview-widget-container { position:absolute; top:0; left:0; right:0; bottom:0; }
.tv-symbol-wrap iframe { width:100% !important; height:100% !important; border:none; }
.internal-guide { background:rgba(0,0,0,0.4); border-top:1px solid var(--border); padding:3px 6px; text-align:center; font-family:var(--mono); font-size:7px; color:var(--text-d); font-weight:700; letter-spacing:0.3px; flex-shrink:0; }

/* Tables */
.tbl-wrap { overflow-y:auto; flex:1; }
.tbl { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; text-align:left; table-layout:fixed; }
.tbl th { padding:6px 8px; color:var(--text-m); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card); z-index:2; }
.tbl td { padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.02); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbl .group-hdr td { background:rgba(255,255,255,0.04); font-weight:700; color:#fff; font-size:9px; letter-spacing:1px; padding:5px 8px; text-transform:uppercase; }
.tbl tr:hover td { background:rgba(255,255,255,0.02); }
.tbl th:nth-child(1) { width:30%; } /* Sector */
.tbl th:nth-child(2) { width:12%; text-align:right; } /* Wgt */
.tbl th:nth-child(3) { width:20%; text-align:right; } /* Change */
.tbl th:nth-child(4) { width:22%; } /* Mom */
.tbl th:nth-child(5) { width:16%; text-align:center; } /* Bias */
.tbl td:nth-child(2) { text-align:right; }
.tbl td:nth-child(3) { text-align:right; }
.tbl td:nth-child(5) { text-align:center; }

/* Macro row (horizontal) */
.macro-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; height:100%; }
.macro-card { min-height:0; }
.macro-body { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; flex-direction:column; }
.macro-price { font-family:var(--mono); font-size:20px; font-weight:800; color:#fff; line-height:1; }
.macro-change { font-family:var(--mono); font-size:11px; font-weight:700; }
.macro-note { font-family:var(--mono); font-size:7px; color:var(--text-d); padding:3px 6px; border-top:1px solid var(--border); text-align:center; line-height:1.3; }

/* Economic Calendar */
.econ-tbl { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:9px; text-align:left; }
.econ-tbl th { padding:4px 6px; color:var(--text-m); font-size:7px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card); z-index:2; }
.econ-tbl td { padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.02); white-space:nowrap; }
.econ-tbl tr:hover td { background:rgba(255,255,255,0.02); }
.impact-high { color:var(--red); font-weight:800; }
.impact-med { color:var(--amber); font-weight:700; }
.impact-low { color:var(--text-m); }
.econ-empty { text-align:center; padding:20px; color:var(--text-d); font-family:var(--mono); font-size:10px; }

/* Rotation sections */
.rotation-section { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.03); }
.rotation-section:last-child { border-bottom:none; }
.rot-label { font-family:var(--mono); font-size:10px; color:var(--text-m); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.rot-value { font-size:16px; font-weight:700; line-height:1.4; }
.rot-note { font-family:var(--mono); font-size:9px; color:var(--text-d); margin-top:4px; line-height:1.4; }

/* Tags */
.up { color:var(--green); } .dn { color:var(--red); } .neu { color:var(--amber); }
.tag { padding:1px 5px; border-radius:3px; font-size:7px; font-weight:800; display:inline-block; font-family:var(--mono); letter-spacing:0.5px; }
.tag-g { background:var(--green-d); color:var(--green); border:1px solid rgba(0,214,126,0.3); }
.tag-r { background:var(--red-d); color:var(--red); border:1px solid rgba(255,71,87,0.3); }
.tag-a { background:var(--amber-d); color:var(--amber); border:1px solid rgba(255,179,71,0.3); }

/* Footer / Gantt */
.footer-bar { border-top:2px solid var(--blue); background:#070b14; flex-shrink:0; }
.footer-slim { padding:8px 15px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.mini-gantt-wrap { flex:1; margin:0 20px; height:8px; background:rgba(255,255,255,0.04); border-radius:4px; position:relative; overflow:hidden; }
.mini-rth-bar { position:absolute; left:39.5%; width:27.1%; height:100%; background:rgba(0,214,126,0.35); border-left:1px solid var(--green); border-right:1px solid var(--green); }
.mini-now { position:absolute; width:3px; height:14px; background:var(--red); top:-3px; border-radius:2px; box-shadow:0 0 6px var(--red); transition:left 1s linear; z-index:10; }
.footer-full { display:none; padding:12px 15px; background:var(--card); border-top:1px solid var(--border); overflow-x:auto; }
.gantt-expanded-visual { display:flex; flex-direction:column; gap:3px; position:relative; min-width:800px; padding-bottom:15px; }
.g-row { height:20px; background:rgba(255,255,255,0.015); position:relative; border-radius:3px; }
.g-block { position:absolute; height:100%; display:flex; align-items:center; padding-left:6px; font-family:var(--mono); font-size:8px; font-weight:700; color:#fff; overflow:hidden; white-space:nowrap; border-radius:2px; }
.g-block:hover { filter:brightness(1.4); }
.g-tick { position:absolute; width:1px; height:100%; background:rgba(255,255,255,0.04); }
.g-tick span { position:absolute; bottom:-14px; left:-8px; font-family:var(--mono); font-size:7px; color:var(--text-d); }
.g-full-now { position:absolute; top:-4px; bottom:0; width:2px; background:var(--red); z-index:20; transition:left 1s linear; box-shadow:0 0 4px var(--red); }
.countdown-txt { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--amber); }

/* Status indicators */
.live-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:6px; animation:pulse 2s infinite; }
.closed-dot { display:inline-block; width:7px; height:7px; background:#4a5568; border-radius:50%; margin-right:6px; }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,214,126,0.4); } 50% { opacity:0.7; box-shadow:0 0 0 4px rgba(0,214,126,0); } }

/* Position warning */
.pos-warning { display:none; background:linear-gradient(90deg,var(--red),#cc2233); color:#fff; font-family:var(--mono); font-size:10px; font-weight:800; padding:4px 10px; border-radius:4px; animation:flash 1s infinite; text-align:center; }
@keyframes flash { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ══════════════════════════════════════════════════════════
   GUIDE REFERENCE PANEL
   ══════════════════════════════════════════════════════════ */
.guide-backdrop { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:900; backdrop-filter:blur(2px); }
.guide-backdrop.open { display:block; }

.guide-panel { position:fixed; top:0; right:-480px; width:460px; max-width:90vw; height:100vh; background:var(--card); border-left:2px solid var(--blue); z-index:1000; display:flex; flex-direction:column; transition:right 0.3s ease; box-shadow:-4px 0 20px rgba(0,0,0,0.5); }
.guide-panel.open { right:0; }

.guide-header { padding:12px 16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-alt) 100%); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.guide-title { font-family:var(--mono); font-size:13px; font-weight:800; color:var(--blue); letter-spacing:1.5px; }
.guide-close { background:none; border:1px solid var(--border); color:var(--text-m); font-size:20px; width:28px; height:28px; cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center; line-height:1; transition:all 0.2s; }
.guide-close:hover { border-color:var(--red); color:var(--red); }

.guide-body { flex:1; overflow-y:auto; padding:8px 0; }

.guide-section { padding:12px 16px; border-bottom:1px solid var(--border); }
.guide-section:last-child { border-bottom:none; }

.guide-section-title { font-family:var(--mono); font-size:11px; font-weight:800; color:var(--blue); letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase; }
.guide-subsection { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--cyan); letter-spacing:1px; margin:10px 0 4px; text-transform:uppercase; }

.guide-text { font-family:var(--sans); font-size:11px; color:var(--text); line-height:1.5; margin-bottom:6px; }
.guide-text strong { color:#fff; }

.guide-table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:9px; margin:6px 0 8px; }
.guide-table th { padding:4px 6px; color:var(--text-m); font-size:8px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); text-align:left; background:rgba(255,255,255,0.02); }
.guide-table td { padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--text); line-height:1.4; vertical-align:top; }
.guide-table tr:hover td { background:rgba(255,255,255,0.02); }

/* Collapsible Quick Reference */
.guide-collapsible { cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.guide-collapsible:hover { color:var(--cyan); }
.guide-collapse-icon { font-family:var(--mono); font-size:14px; font-weight:800; color:var(--text-m); transition:color 0.2s; }
.guide-collapsible:hover .guide-collapse-icon { color:var(--cyan); }

.guide-quickref { padding:8px 0 0; }
.guide-qr-line { padding:4px 0; font-family:var(--mono); font-size:10px; color:var(--text); line-height:1.5; border-bottom:1px solid rgba(255,255,255,0.02); }
.guide-qr-line:last-child { border-bottom:none; }
.guide-qr-key { display:inline-block; min-width:90px; font-weight:800; color:var(--amber); letter-spacing:0.5px; }

/* ══════════════════════════════════════════════════════════
   CROSS-ASSET CONFIRMATION MATRIX
   ══════════════════════════════════════════════════════════ */
.confirm-summary { padding:6px 10px; font-family:var(--mono); font-size:11px; font-weight:800; text-align:center; border-bottom:1px solid var(--border); letter-spacing:0.5px; color:var(--text-m); }

.confirm-tbl th:nth-child(1) { width:35%; }
.confirm-tbl th:nth-child(2) { width:25%; text-align:right; }
.confirm-tbl th:nth-child(3) { width:40%; text-align:center; }
.confirm-tbl td:nth-child(2) { text-align:right; font-weight:700; }
.confirm-tbl td:nth-child(3) { text-align:center; }

.confirm-tag { padding:1px 6px; border-radius:3px; font-size:7px; font-weight:800; display:inline-block; font-family:var(--mono); letter-spacing:0.5px; }
.confirm-tag.confirming { background:var(--green-d); color:var(--green); border:1px solid rgba(0,214,126,0.3); }
.confirm-tag.diverging { background:var(--red-d); color:var(--red); border:1px solid rgba(255,71,87,0.3); }
.confirm-tag.flat { background:var(--amber-d); color:var(--amber); border:1px solid rgba(255,179,71,0.3); }

.credit-warning { background:linear-gradient(90deg,rgba(255,71,87,0.2),rgba(255,179,71,0.2)); color:var(--amber); font-family:var(--mono); font-size:8px; font-weight:800; padding:1px 6px; border-radius:3px; border:1px solid rgba(255,179,71,0.4); animation:flash 1s infinite; display:inline-block; }

/* ══════════════════════════════════════════════════════════
   INDEX ALIGNMENT
   ══════════════════════════════════════════════════════════ */
.idx-alignment-section { border-top:1px solid var(--border); }

.idx-row { display:flex; justify-content:space-around; align-items:center; padding:4px 0; gap:8px; }
.idx-item { display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; }
.idx-sym { font-size:9px; color:var(--text-m); font-weight:700; letter-spacing:0.5px; }
.idx-val { font-weight:800; font-size:13px; }

.idx-spreads { display:flex; justify-content:center; gap:16px; padding:4px 0; font-family:var(--mono); font-size:10px; color:var(--text-m); }
.idx-spread { letter-spacing:0.3px; }

#idx-state { text-align:center; padding:4px 0; }

/* Economic Calendar card when placed below grid */
/* Today's Context + Closing Summary */
.context-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 8px; margin-bottom:8px; flex-shrink:0; }
.context-card { min-height:auto; }
.context-levels { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:4px 12px; padding:6px 10px; }
.ctx-item { display:flex; align-items:center; gap:6px; }
.ctx-lbl { font-family:var(--mono); font-size:8px; color:var(--text-d); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.ctx-val { font-family:var(--mono); font-size:11px; color:#fff; font-weight:700; }
.closing-grid { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:6px 10px; align-items:center; }

/* Data Health */
.data-health { display:inline-flex; align-items:center; gap:4px; margin-left:4px; }
.health-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.health-green { background:var(--green); box-shadow:0 0 4px var(--green); }
.health-amber { background:var(--amber); box-shadow:0 0 4px var(--amber); }
.health-red { background:var(--red); box-shadow:0 0 4px var(--red); animation:pulse-red 1.5s ease-in-out infinite; }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.4} }
.stale-warning { font-family:var(--mono); font-size:8px; color:var(--red); font-weight:700; animation:pulse-red 1.5s ease-in-out infinite; }

.econ-card { flex-shrink:0; max-height:180px; }