/* ============================================================
   MASTER VORTEX — Options tab (chain + options volume)
   Companion to options.js; mirrors styles.css tokens/layout.
   ============================================================ */

/* tab strip above the chart stack */
/* DEAD-BAND FIX 2026-10-28 (CEO prescription): CHART/OPTIONS tabs
   shrunk to the size of the symbol tabs (.mc-tab: 11px font,
   2px 6px 2px 8px padding, 18px tall) and the strip's top padding
   cut 8px -> 2px to match .mc-tabbar. Row: 37px -> ~20px; the
   recovered height goes to the chart/panes below. */
.mv-opt-tabs{
  flex:0 0 auto; display:flex; gap:4px; padding:2px 4px 0;
}
.mv-opt-tab{
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:8px 8px 0 0;
  border-bottom:none; font-size:11px; font-weight:400; letter-spacing:.5px;
  padding:2px 8px; cursor:pointer; font-family:inherit;
}
.mv-opt-tab:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mv-opt-tab.active{background:rgba(30,227,8,.14); color:var(--green); border-color:rgba(30,227,8,.5);}

/* options view fills the chart column under the strip */
#mvOptView{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:var(--panel);}
#mvOptView[hidden]{display:none;}

.mv-opt-head{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--edge);
}
.mv-opt-subtabs{display:flex; gap:6px;}
.mv-opt-sub{
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:7px;
  font-size:11.5px; font-weight:400; letter-spacing:.8px; padding:6px 13px;
  cursor:pointer; font-family:inherit;
}
.mv-opt-sub:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mv-opt-sub.active{background:var(--green); color:#03140a; border-color:var(--green);}
.mv-opt-sym{font-size:17px; font-weight:400; letter-spacing:.6px; color:#fff;}
#mvOptExpiry{
  background:#0a1524; color:#e8f2ff; border:1.5px solid #1c3350; border-radius:8px;
  font-size:12.5px; font-weight:400; font-family:inherit; padding:6px 8px; cursor:pointer;
}
#mvOptExpiry:focus{outline:none; border-color:rgba(30,227,8,.65);}
.mv-opt-spot{font-size:12.5px; font-weight:400; color:var(--dim);}
.mv-opt-chip{
  font-size:10px; font-weight:400; letter-spacing:1.1px; color:var(--d-yellow);
  border:1px solid rgba(255,216,77,.55); border-radius:20px; padding:4px 9px; white-space:nowrap;
}
.mv-opt-refresh{
  margin-left:auto; background:transparent; color:var(--green); border:1.5px solid rgba(30,227,8,.5);
  border-radius:8px; width:30px; height:30px; font-size:15px; cursor:pointer; line-height:1;
}
.mv-opt-refresh:hover{background:rgba(30,227,8,.12);}

.mv-opt-detail{
  flex:0 0 auto; padding:7px 12px; font-size:12px; color:#cfe2f7;
  background:#0a1322; border-bottom:1px solid var(--edge); min-height:30px;
}
.mv-opt-detail b{color:#fff;}

.mv-opt-body{flex:1 1 auto; min-height:0; overflow:auto; position:relative;}
.mv-opt-body[hidden]{display:none;}
.mv-opt-body::-webkit-scrollbar{width:9px; height:9px;}
.mv-opt-body::-webkit-scrollbar-thumb{background:#1b3a5f; border-radius:4px;}

.mv-opt-table{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums;}
.mv-opt-table th, .mv-opt-table td{
  padding:5px 8px; text-align:right; border-bottom:1px solid #101c2e; white-space:nowrap;
}
.mv-opt-table thead th{
  position:sticky; top:0; background:#0a1524; color:var(--dim);
  font-size:10.5px; font-weight:400; letter-spacing:1px; z-index:2;
}
.mv-opt-table thead .mv-opt-group th{
  text-align:center; color:#fff; font-size:12px; letter-spacing:2px; top:0;
  background:#0b1a10; border-bottom:1px solid rgba(30,227,8,.35);
}
.mv-opt-table thead .mv-opt-cols th{top:29px;}
.mv-opt-table tbody tr{cursor:pointer;}
.mv-opt-table tbody tr:hover td{background:#0a1524;}
.mv-opt-table td.mv-opt-itm{background:#0d1830;}
.mv-opt-table td.mv-opt-strike{
  text-align:center; font-weight:400; color:#fff; background:#0a1322;
  border-left:1px solid var(--edge); border-right:1px solid var(--edge);
}
.mv-opt-table td.mv-opt-atm{background:rgba(30,227,8,.20); color:var(--green);}
.mv-opt-table td.mv-opt-sel{box-shadow:inset 0 0 0 1.5px var(--green);}

.mv-opt-empty{
  padding:52px 20px; text-align:center; font-size:15px; font-weight:400;
  color:var(--dim); letter-spacing:.4px;
}
.mv-opt-empty[hidden]{display:none;}

/* ---- options volume ---- */
.mv-opt-tiles{display:flex; gap:10px; flex-wrap:wrap; padding:12px;}
.mv-opt-tile{
  flex:1 1 140px; background:var(--panel-2); border:1px solid var(--edge);
  border-radius:10px; padding:10px 12px;
}
.mv-opt-tile-l{font-size:10.5px; font-weight:400; letter-spacing:1.2px; color:var(--dim);}
.mv-opt-tile-v{font-size:21px; font-weight:400; color:#fff; margin-top:3px;}
.mv-opt-sec{
  padding:12px 12px 4px; font-size:11.5px; font-weight:400; letter-spacing:1.4px; color:var(--green);
}
.mv-opt-flag-sample{color:var(--d-yellow); letter-spacing:.4px; font-size:10.5px; margin-left:8px;}
.mv-opt-vtable th, .mv-opt-vtable td{text-align:left;}
.mv-opt-vtable td:nth-child(2), .mv-opt-vtable td:nth-child(3),
.mv-opt-vtable td:nth-child(4), .mv-opt-vtable td:nth-child(5),
.mv-opt-vtable td:nth-child(6), .mv-opt-vtable td:nth-child(7){text-align:right;}
.mv-opt-bar-cell{width:34%;}
.mv-opt-bar{display:block; height:9px; border-radius:4px; background:rgba(30,227,8,.55); min-width:3px;}
.mv-opt-occ{font-family:Consolas, "Courier New", monospace; font-size:11px; color:#cfe2f7;}
.mv-opt-cp{
  display:inline-block; min-width:19px; text-align:center; border-radius:5px;
  font-size:10.5px; font-weight:400; padding:2px 0;
}
.mv-opt-call{background:rgba(30,227,8,.16); color:var(--green); border:1px solid rgba(30,227,8,.45);}
.mv-opt-put{background:rgba(255,59,71,.14); color:var(--red); border:1px solid rgba(255,59,71,.45);}
.mv-opt-flag{
  font-size:10px; font-weight:400; letter-spacing:.6px; color:#03140a;
  background:var(--d-yellow); border-radius:5px; padding:2px 6px; white-space:nowrap;
}

/* ---- volume sub-views: by strike / by expiration / heatmap ---- */
.mv-opt-vbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:2px 12px 10px;
}
.mv-opt-vsubs{display:flex; gap:6px;}
.mv-opt-vctl{display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap;}
.mv-opt-metric-l{
  font-size:11px; font-weight:400; letter-spacing:.8px; color:var(--dim);
  display:flex; align-items:center; gap:6px;
}
.mv-opt-metric-l[hidden]{display:none;}
#mvOptMetric{
  background:#0a1524; color:#e8f2ff; border:1.5px solid #1c3350; border-radius:8px;
  font-size:12px; font-weight:400; font-family:inherit; padding:5px 7px; cursor:pointer;
}
#mvOptMetric:focus{outline:none; border-color:rgba(30,227,8,.65);}

.mv-opt-chartwrap{position:relative; padding:4px 12px 0;}
.mv-opt-chartwrap[hidden]{display:none;}
.mv-opt-canvas{display:block; width:100%; height:300px;}
.mv-opt-tip{
  position:absolute; z-index:6; pointer-events:none; white-space:nowrap;
  background:#0c1728; border:1px solid #1d2c42; border-radius:7px;
  font-size:11.5px; font-weight:400; color:#cfe2f7; padding:5px 9px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.mv-opt-tip[hidden]{display:none;}
.mv-opt-tip b{color:#fff;}
.mv-opt-chart-note{
  padding:6px 12px 2px; font-size:11px; font-weight:400; color:var(--dim); letter-spacing:.3px;
}

/* heatmap: expirations down the side, strikes across the top,
   call and put stacked inside each cell */
.mv-opt-heatwrap{padding:4px 12px 0;}
.mv-opt-heatwrap[hidden]{display:none;}
.mv-opt-heatscroll{overflow:auto; max-height:540px; border:1px solid #101c2e; border-radius:8px;}
.mv-opt-heatscroll::-webkit-scrollbar{width:9px; height:9px;}
.mv-opt-heatscroll::-webkit-scrollbar-thumb{background:#1b3a5f; border-radius:4px;}
.mv-opt-heat{border-collapse:separate; border-spacing:0; font-size:11px; font-variant-numeric:tabular-nums;}
.mv-opt-heat th, .mv-opt-heat td{padding:0; white-space:nowrap;}
.mv-opt-heat thead th{
  position:sticky; top:0; z-index:3; background:#0a1524; color:var(--dim);
  font-size:10.5px; font-weight:400; letter-spacing:.6px; text-align:right; padding:5px 6px;
  border-bottom:1px solid var(--edge);
}
.mv-opt-heat thead th.hm-atm{color:var(--green);}
.mv-opt-heat th.hm-corner, .mv-opt-heat td.hm-exp{
  position:sticky; left:0; z-index:2; background:#0a1322; color:#dfe9f5;
  font-size:11px; font-weight:400; text-align:left; padding:4px 8px;
  border-right:1px solid var(--edge);
}
.mv-opt-heat thead th.hm-corner{z-index:4;}
.mv-opt-heat td.hm-cell{border-bottom:1px solid #0a1322; border-right:1px solid #0a1322; min-width:64px;}
.mv-opt-heat .hm-line{
  padding:3px 6px; text-align:right; color:#eef6ff; line-height:1.25; min-height:19px;
}
.mv-opt-heat .hm-none{background:transparent; color:#54687f; text-align:right;}
.mv-opt-heat td.hm-exp-sel{color:#fff; font-weight:600; background:#12283f; box-shadow:inset 3px 0 0 var(--green);}
.mv-opt-heat tr.hm-selrow td.hm-cell{border-bottom:1px solid rgba(232,242,255,.5);}

@media (max-width: 900px){
  .mv-opt-table{font-size:11px;}
  .mv-opt-table th, .mv-opt-table td{padding:4px 5px;}
  .mv-opt-tile-v{font-size:17px;}
  .mv-opt-canvas{height:230px;}
  .mv-opt-vctl{margin-left:0;}
}

/* Options view owns the chart column (CEO spot, 2026-11-02):
   companion to options.js's setChartAreaHidden — while the OPTIONS
   tab is open, no chart-area element renders under the options
   panels. Covers elements a sibling module (re)creates after
   options.js ran; the JS toggle handles everything else and
   restores exact prior display values on the way back. */
body.mv-options-open .chart-col > .chart-stack,
body.mv-options-open .chart-col > #mcGrid,
body.mv-options-open .chart-col > .mc-tabbar,
body.mv-options-open .chart-col > .range-bar{display:none !important;}