/* ============================================================
   MASTER VORTEX — multi-chart layout (multichart.js)
   Loaded after styles.css; everything is namespaced .mc-* so
   the single-chart view is untouched.
   ============================================================ */

/* ---------------- Layout switcher (top bar) ---------------- */
.mc-switch{display:flex; gap:6px;}
.mc-layout-btn{
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:8px;
  font-size:12px; font-weight:400; padding:4px 7px; cursor:pointer; font-family:inherit;
  line-height:1;
}
.mc-layout-btn:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mc-layout-btn.active{background:var(--green); color:#03140a; border-color:var(--green);
  box-shadow:0 0 14px rgba(30,227,8,.45);}

/* SYNC SYMBOL toggle (2026-11-01): same pill family as the layout
   buttons, wider label, lit green when sync is on. Label stays
   fully readable at mobile widths (it wraps with the switcher
   instead of shrinking). */
.mc-sync-btn{
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:8px;
  font-size:11px; font-weight:700; letter-spacing:.6px; padding:4px 9px; cursor:pointer;
  font-family:inherit; line-height:1; white-space:nowrap;
}
.mc-sync-btn:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mc-sync-btn.active{background:var(--green); color:#03140a; border-color:var(--green);
  box-shadow:0 0 14px rgba(30,227,8,.45);}

/* ---------------- Grid ---------------- */
.mc-grid{
  /* LAYOUT COMPACTION 2026-10-28: inter-pane gap 6px -> 4px;
     pane heads/tab bar slimmed below — both charts grow. */
  flex:1 1 auto; min-height:0; display:grid; gap:4px;
}
.mc-grid.layout-2{grid-template-columns:1fr 1fr; grid-template-rows:1fr;}
.mc-grid.layout-4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.mc-grid.layout-8{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr);}
.mc-grid.layout-16{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);}
/* Dense grids: shrink the pane chrome so the chart keeps the room —
   heads may wrap to a second line instead of clipping. */
.mc-grid.layout-8 .mc-head, .mc-grid.layout-16 .mc-head{flex-wrap:wrap; row-gap:2px; padding:3px 5px;}
.mc-grid.layout-8 .mc-tf, .mc-grid.layout-16 .mc-tf{padding:2px 4px; font-size:10px;}
.mc-grid.layout-16 .mc-sym{font-size:11.5px;}
.mc-grid.layout-16 .mc-px{font-size:10.5px;}
.mc-grid.layout-16 .mc-badge{font-size:8.5px; padding:2px 5px;}
.mc-grid.layout-16 .mc-empty-msg{font-size:10.5px;}

.mc-pane{
  position:relative; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:#050a14; border:1px solid var(--edge); border-radius:8px; overflow:hidden;
}
.mc-pane.active{
  border-color:rgba(30,227,8,.75);
  box-shadow:0 0 0 1px rgba(30,227,8,.55), 0 0 18px rgba(30,227,8,.12);
}

/* ---------------- Pane header ---------------- */
.mc-head{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  padding:3px 6px; background:#0a1322; border-bottom:1px solid var(--edge);
}
.mc-sym{
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:#fff; font-family:inherit; font-size:12px; font-weight:400;
  letter-spacing:.5px; padding:1px 4px; cursor:pointer; white-space:nowrap;
}
.mc-sym:hover{border-color:rgba(30,227,8,.5);}
.mc-badge{
  font-size:9px; font-weight:400; letter-spacing:1px; white-space:nowrap;
  padding:2px 5px; border-radius:4px; color:#03140a; background:#8fa8c4;
}
.mc-badge.bull{background:var(--green);}
.mc-badge.bear{background:var(--red);}
.mc-badge.neutral{background:#cdaa19;}
.mc-px{font-size:11px; font-weight:400; white-space:nowrap;}
.mc-tfs{margin-left:auto; display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end;}
.mc-tf{
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:6px;
  font-size:10px; font-weight:400; padding:2px 5px; cursor:pointer; font-family:inherit;
}
.mc-tf:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mc-tf.active{background:var(--green); color:#03140a; border-color:var(--green);}

/* ---------------- Pane chart ---------------- */
/* Pane body is a ROW: drawings.js docks the pane's own toolbar
   (37px, in flow) at the left and the chart wrap takes the rest. */
.mc-body{display:flex; flex-direction:row; flex:1 1 auto; min-height:0; min-width:0;}
.mc-chartwrap{position:relative; flex:1 1 auto; min-height:0; min-width:0;}
.mc-chart{position:absolute; inset:0;}
/* Per-pane RESET (CEO request, 2026-10-26): bottom-right corner
   of each pane chart, mirroring the main chart's own corner
   RESET (.main-reset in ranges.css). Sits above the pane
   overlay canvases (zones z-4, indicator mirror z-5); those are
   pointer-events:none, so the corner stays clickable. */
.mc-reset{
  position:absolute; right:8px; bottom:8px; z-index:6;
  background:rgba(7,13,24,.72); color:var(--green, #1ee308);
  border:1px solid rgba(30,227,8,.45); border-radius:6px;
  font-size:11px; font-weight:400; letter-spacing:.08em;
  padding:3px 8px; cursor:pointer; font-family:inherit;
}
.mc-reset:hover{background:rgba(30,227,8,.16); color:#fff;}
.mc-grid.layout-16 .mc-reset{font-size:9.5px; padding:2px 5px; right:5px; bottom:5px;}

/* Per-pane range bar (CEO bug, 2026-11-04 — range bar dead on
   double screen): reuses the single-chart .range-bar /
   .range-btn styling (ranges.css) seated directly under each
   pane's head. The head above already draws the pane's top
   edge, so the pane variant trades the bar's top border for a
   bottom one and runs a touch tighter. */
.mc-rangebar{border-top:none; border-bottom:1px solid var(--edge, #16283f); padding:1px 6px;}
.mc-rangebar .range-btn{font-size:10.5px; padding:1px 5px;}

/* ---------------- Symbol picker menu ---------------- */
.mc-menu{
  position:absolute; top:29px; left:6px; z-index:30; width:196px;
  background:#0a1322; border:1px solid #1d2c42; border-radius:8px; padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.mc-menu input{
  width:100%; padding:7px 8px; margin-bottom:6px; background:#0a1524; color:#e8f2ff;
  border:1.5px solid #1c3350; border-radius:8px; font-size:12px;
  font-weight:400; letter-spacing:.8px; font-family:inherit; text-transform:uppercase;
}
.mc-menu input:focus{outline:none; border-color:rgba(30,227,8,.65);}
.mc-mi{
  padding:5px 8px; cursor:pointer; border-radius:6px;
  font-size:12.5px; font-weight:400; letter-spacing:.3px; color:#e8f2ff;
}
.mc-mi:hover{background:#0b1a10;}
.mc-menu-err{font-size:11px; font-weight:400; color:var(--red); min-height:0; padding:2px 2px 0;}

/* Tab bar styles removed with the strip (CEO order 2026-11-04). */

/* ---------------- Mobile (<=900px, matches styles.css) ----------------
   The grid collapses to a vertical stack of charts; the page
   scrolls (body already switches to overflow-y:auto there). */
@media (max-width: 900px){
  body.mc-on .chart-col{height:auto; min-height:0; flex:0 0 auto;}
  .mc-grid{overflow:visible;}
  .mc-grid.layout-2, .mc-grid.layout-4, .mc-grid.layout-8, .mc-grid.layout-16{
    grid-template-columns:1fr; grid-template-rows:none;
  }
  .mc-pane{min-height:330px;}
  .mc-layout-btn{padding:6px 9px; font-size:13px;}
  .mc-sync-btn{padding:6px 10px; font-size:12px;}
  .mc-tf{padding:3px 5px; font-size:10px;}
}

/* Per-pane chart-type button (2026-10-30): compact label button
   in the pane head; its menu is the shared .ct-menu singleton
   (chart-types.css) that multichart.js positions fixed on body. */
.mc-ct{
  flex:none; height:22px; padding:0 8px; margin-left:6px;
  background:#0a1322; color:#e3ecf7;
  border:1px solid #1d2c42; border-radius:6px;
  font:600 10.5px "Segoe UI", Arial, sans-serif;
  cursor:pointer; white-space:nowrap;
}
.mc-ct:hover{ border-color:#2e4a73; background:#0d1830; }