/* =============================================================================
   dense-grid.css — Analyst-desk dense layout framework (2026-08-03)
   -----------------------------------------------------------------------------
   Shared by Broad Market, Scalping Command, and SPX Command.

   Replaces the old stacked full-width `bm-section` card layout with a tight
   multi-column analyst-desk grid: everything above the fold, minimal chrome,
   data-table-first.

   Design tokens:
     --dg-bg-page    var(--bnb-bg)   page background (near-black, softer than pure black)
     --dg-bg-panel   var(--bnb-bg)   panel surface
     --dg-bg-cell    var(--bnb-surface)   nested card surface (tables, cells)
     --dg-border     #1f2733   panel border (subtle, cool grey)
     --dg-border-lt  #262d38   dashed row separators
     --dg-text       #c9d1d9   primary text
     --dg-text-mut   var(--bnb-text-muted)   muted labels
     --dg-text-dim   #4a5260   dim / tertiary
     --dg-accent     #4fd1c5   teal accent (headers, links)

   Semantic colors match dashboard convention:
     --dg-bull       #4ade80
     --dg-bear       #f87171
     --dg-warn       #ffa628
     --dg-neutral    var(--bnb-text-muted)
   ============================================================================= */

:root {
  --dg-bg-page: var(--bnb-bg);
  --dg-bg-panel: var(--bnb-bg);
  --dg-bg-cell: var(--bnb-surface);
  --dg-border: #1f2733;
  --dg-border-lt: #262d38;
  --dg-text: #c9d1d9;
  --dg-text-mut: var(--bnb-text-muted);
  --dg-text-dim: #4a5260;
  --dg-accent: #4fd1c5;
  --dg-bull: #4ade80;
  --dg-bear: #f87171;
  --dg-warn: #ffa628;
  --dg-neutral: var(--bnb-text-muted);
}

/* ---------- Global reset for dense-grid pages ---------- */
body.dg-page {
  background: var(--dg-bg-page);
  color: var(--dg-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', var(--bnb-font-body);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}

/* ---------- Grid container ---------- */
.dg-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 6px 10px 24px;
}

/* Headline row: composite regime + desk selectors + health pill */
.dg-headline {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

/* Main analysis grid: 4 equal columns on wide screens */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: start;
}

/* Column span helpers */
.dg-span-2 { grid-column: span 2; }
.dg-span-3 { grid-column: span 3; }
.dg-span-4 { grid-column: span 4; }

/* Secondary rail: 2 columns */
.dg-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

/* Responsive breakpoints -- collapse to fewer columns on smaller screens */
@media (max-width: 1600px) {
  .dg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg-span-4 { grid-column: span 3; }
}
@media (max-width: 1200px) {
  .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-span-3, .dg-span-4 { grid-column: span 2; }
  .dg-headline { grid-template-columns: 1fr; }
  .dg-rail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dg-grid, .dg-rail { grid-template-columns: 1fr; }
  .dg-span-2, .dg-span-3, .dg-span-4 { grid-column: span 1; }
}

/* ---------- Panel (replaces bm-section card) ---------- */
.dg-panel {
  background: var(--dg-bg-panel);
  border: 1px solid var(--dg-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;   /* prevent grid children from overflowing */
}

.dg-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 8px;
  background: var(--dg-bg-cell);
  border-bottom: 1px solid var(--dg-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dg-text);
  gap: 8px;
}
.dg-panel-title { color: var(--dg-text); flex: 1 1 auto; }
.dg-panel-meta { color: var(--dg-text-mut); font-weight: 500; font-size: 9.5px; letter-spacing: 0.04em; text-transform: none; }
.dg-panel-body {
  padding: 4px 8px 6px;
  flex: 1 1 auto;
  min-height: 40px;
}
.dg-panel-body.tight { padding: 0; }
.dg-panel-body.pad { padding: 6px 8px 8px; }

/* ---------- Dense tables ---------- */
.dg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dg-table th {
  text-align: left;
  padding: 3px 8px;
  color: var(--dg-text-mut);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dg-border);
  background: var(--dg-bg-panel);
  position: sticky;
  top: 0;
  z-index: 1;
}
.dg-table td {
  padding: 3px 8px;
  border-bottom: 1px dashed var(--dg-border-lt);
  color: var(--dg-text);
}
.dg-table tr:last-child td { border-bottom: none; }
.dg-table tr:hover td { background: rgba(79,209,197,0.04); }
.dg-table td.num, .dg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dg-table td.strong { color: var(--dg-text); font-weight: 600; }

/* Color helpers on cells */
.dg-bull  { color: var(--dg-bull); }
.dg-bear  { color: var(--dg-bear); }
.dg-warn  { color: var(--dg-warn); }
.dg-mut   { color: var(--dg-text-mut); }
.dg-dim   { color: var(--dg-text-dim); }
.dg-accent { color: var(--dg-accent); }

/* Bull/bear cell backgrounds (subtle) */
.dg-cell-bull { background: rgba(74,222,128,0.08); color: var(--dg-bull); }
.dg-cell-bear { background: rgba(248,113,113,0.08); color: var(--dg-bear); }
.dg-cell-warn { background: rgba(255,166,40,0.08); color: var(--dg-warn); }

/* ---------- Status pills ---------- */
.dg-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dg-pill.bull { background: rgba(74,222,128,0.10); color: var(--dg-bull); border-color: rgba(74,222,128,0.30); }
.dg-pill.bear { background: rgba(248,113,113,0.10); color: var(--dg-bear); border-color: rgba(248,113,113,0.30); }
.dg-pill.warn { background: rgba(255,166,40,0.10); color: var(--dg-warn); border-color: rgba(255,166,40,0.30); }
.dg-pill.neutral { background: rgba(125,133,144,0.10); color: var(--dg-text-mut); border-color: rgba(125,133,144,0.20); }
.dg-pill.accent { background: rgba(79,209,197,0.10); color: var(--dg-accent); border-color: rgba(79,209,197,0.30); }
.dg-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- Headline: composite regime + desk selectors ---------- */
.dg-composite {
  background: var(--dg-bg-panel);
  border: 1px solid var(--dg-border);
  border-radius: 4px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dg-composite-label { font-size: 9.5px; text-transform: uppercase; color: var(--dg-text-mut); letter-spacing: 0.06em; }
.dg-composite-score { font-size: 22px; font-weight: 700; color: var(--dg-text); font-variant-numeric: tabular-nums; line-height: 1; }
.dg-composite-regime { font-size: 11px; color: var(--dg-text-mut); flex: 1 1 auto; }
.dg-composite-regime b { color: var(--dg-text); font-weight: 700; }

/* Desk selector row */
.dg-desks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
/* 4-column desk variant (Swing / Scalp / Small-Cap / Indices) */
.dg-desks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .dg-desks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dg-desks, .dg-desks--4 { grid-template-columns: 1fr; }
}

/* Unified panel body layouts (2026-08-04 broad-market reflow):
   split one panel body into 2 or 3 equal columns with min-width:0 so
   children can shrink below their intrinsic min-content. */
.dg-unified-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.dg-unified-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.dg-unified-col { min-width: 0; }
@media (max-width: 1400px) {
  .dg-unified-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dg-unified-3col .dg-unified-col:last-child { grid-column: span 2; }
}
@media (max-width: 900px) {
  .dg-unified-2col, .dg-unified-3col { grid-template-columns: 1fr; }
  .dg-unified-3col .dg-unified-col:last-child { grid-column: span 1; }
}
.dg-desk {
  background: var(--dg-bg-panel);
  border: 1px solid var(--dg-border);
  border-radius: 4px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s;
}
.dg-desk:hover { filter: brightness(1.12); border-color: var(--dg-accent); }
.dg-desk-name { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dg-text); }
.dg-desk-status { font-size: 10px; }

/* ---------- Compact key-value rows (for master tape read, MTF matrix) ---------- */
.dg-kv {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--dg-border-lt);
}
.dg-kv:last-child { border-bottom: none; }
.dg-kv-label { font-size: 10px; color: var(--dg-text-mut); text-transform: uppercase; letter-spacing: 0.04em; }
.dg-kv-value { font-size: 11.5px; font-weight: 600; color: var(--dg-text); text-align: right; font-variant-numeric: tabular-nums; }
.dg-kv-hint { font-size: 9.5px; color: var(--dg-text-dim); text-align: right; }

/* ---------- MTF matrix (index × timeframe grid) ---------- */
.dg-mtf-matrix {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content max-content max-content;
  gap: 2px 6px;
  font-size: 10.5px;
  align-items: center;
}
.dg-mtf-matrix > * { padding: 2px 4px; }
.dg-mtf-matrix .dg-mtf-header {
  font-size: 9px;
  color: var(--dg-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--dg-border-lt);
}
.dg-mtf-matrix .dg-mtf-idx {
  font-weight: 700;
  color: var(--dg-text);
  font-size: 10.5px;
}
.dg-mtf-matrix .dg-mtf-close {
  color: var(--dg-text-mut);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.dg-mtf-cell {
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Loading / empty states ---------- */
.dg-loading, .dg-empty {
  font-size: 10.5px;
  color: var(--dg-text-mut);
  font-style: italic;
  padding: 12px 8px;
  text-align: center;
}
.dg-empty { color: var(--dg-text-dim); }

/* ---------- Tab strip (for switching between sub-panels in one card) ---------- */
.dg-tabs {
  display: flex;
  border-bottom: 1px solid var(--dg-border);
  background: var(--dg-bg-panel);
}
.dg-tab {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dg-text-mut);
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.dg-tab:hover { color: var(--dg-text); }
.dg-tab.active { color: var(--dg-accent); border-bottom-color: var(--dg-accent); }

/* ---------- Utility: sub-headline inside a panel ---------- */
.dg-subhead {
  font-size: 9px;
  color: var(--dg-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0 3px;
  border-bottom: 1px dashed var(--dg-border-lt);
  margin-bottom: 3px;
}

/* ---------- Compact link ---------- */
.dg-link { color: var(--dg-accent); text-decoration: none; }
.dg-link:hover { text-decoration: underline; }