/* === BLOOMBERG TERMINAL PAGE === */

.bb-grid {
    display: flex;
    height: calc(100vh - 36px);
    gap: 1px;
    background: var(--border);
    overflow: hidden;
}

.bb-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
}
.bb-col-main { flex: 1.4; }
.bb-col:nth-child(2) { flex: 1; }
.bb-col-data { flex: 0.65; }

.bb-panel {
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.bb-panel-lg { flex: 3; }
.bb-panel-md { flex: 2; }
.bb-panel-sm { flex: 1; }
.bb-panel.flex-grow { flex: 1; min-height: 0; }

.chart-box { flex: 1; padding: 4px 6px; min-height: 0; position: relative; }
.chart-box-sm { height: 110px; padding: 4px 6px; }

/* Model bar */
.model-bar {
    display: flex; gap: 12px; padding: 3px 8px;
    background: var(--bg-panel-header); border-top: 1px solid var(--border);
    font-size: 8px; flex-shrink: 0; flex-wrap: wrap;
}
.mstat { display: flex; gap: 3px; }
.mstat-l { color: var(--text-muted); }
.mstat-v { color: var(--accent-cyan); font-weight: 600; }

/* Data panels */
.data-scroll { padding: 4px 8px; overflow-y: auto; flex: 1; }

/* Signals */
.signal-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 6px;
    margin-bottom: 2px; background: var(--bg-card); border-radius: 1px;
    border-left: 3px solid var(--border);
}
.signal-row.warning { border-left-color: var(--accent-red); }
.signal-row.opportunity { border-left-color: var(--accent-green); }
.signal-row.neutral { border-left-color: var(--accent-blue); }
.signal-indicator { font-size: 8px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; width: 55px; flex-shrink: 0; }
.signal-text { font-size: 9px; font-weight: 600; flex: 1; }
.signal-text.warning { color: var(--accent-red); }
.signal-text.opportunity { color: var(--accent-green); }
.signal-text.neutral { color: var(--accent-blue); }
.signal-detail { font-size: 7px; color: var(--text-muted); max-width: 100px; text-align: right; }

/* Levels */
.level-row { display: flex; justify-content: space-between; padding: 2px 4px; font-size: 9px; }
.level-label { color: var(--text-muted); font-weight: 500; }
.level-value { font-weight: 600; }
.level-value.resistance { color: var(--accent-red); }
.level-value.support { color: var(--accent-green); }
.level-value.pivot { color: var(--accent-amber); }

/* Performance */
.perf-row { display: flex; justify-content: space-between; padding: 2px 4px; font-size: 9px; }
.perf-label { color: var(--text-muted); }
.perf-value { font-weight: 600; }
.perf-value.positive { color: var(--accent-green); }
.perf-value.negative { color: var(--accent-red); }

/* Market Grid */
.mg-category { margin-bottom: 4px; }
.mg-category-label { font-size: 7px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); padding: 2px 0; border-bottom: 1px solid rgba(30,41,59,0.5); margin-bottom: 2px; }
.mg-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; transition: background 0.1s; }
.mg-row:hover { background: rgba(30,41,59,0.3); }
.mg-name { font-size: 8px; color: var(--text-muted); font-weight: 500; }
.mg-price { font-size: 10px; color: var(--text-primary); font-weight: 600; }
.mg-change { font-size: 8px; font-weight: 600; }
.mg-change.positive { color: var(--accent-green); }
.mg-change.negative { color: var(--accent-red); }

/* Feature Importance */
.fi-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.fi-label { font-size: 7px; color: var(--text-muted); width: 65px; flex-shrink: 0; text-transform: uppercase; }
.fi-bar-bg { flex: 1; height: 4px; background: var(--bg-secondary); border-radius: 1px; overflow: hidden; }
.fi-bar { height: 100%; background: var(--accent-cyan); border-radius: 1px; transition: width 0.5s; }
.fi-value { font-size: 7px; color: var(--text-secondary); width: 30px; text-align: right; font-weight: 500; }

/* Risk Intel */
.risk-intel-header {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.risk-score-badge {
    font-size: 16px; font-weight: 700; min-width: 32px; text-align: center;
    padding: 2px 6px; border-radius: 2px; line-height: 1.2;
}
.risk-score-badge.critical { color: #dc2626; background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); }
.risk-score-badge.high { color: #ef4444; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); }
.risk-score-badge.elevated { color: #f59e0b; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); }
.risk-score-badge.normal { color: #10b981; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); }
.risk-level-text { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.risk-sublabel { font-size: 7px; color: var(--text-muted); letter-spacing: 1px; }

.risk-factor {
    display: flex; align-items: flex-start; gap: 6px; padding: 3px 4px;
    margin-bottom: 2px; background: var(--bg-card); border-radius: 1px;
    border-left: 2px solid var(--border);
}
.risk-factor.factor-critical { border-left-color: #dc2626; }
.risk-factor.factor-high { border-left-color: #ef4444; }
.risk-factor.factor-elevated { border-left-color: #f59e0b; }
.risk-factor.factor-low { border-left-color: #10b981; }
.risk-factor-tag {
    font-size: 6px; font-weight: 700; letter-spacing: 1px; padding: 1px 4px;
    border-radius: 1px; flex-shrink: 0; min-width: 42px; text-align: center; margin-top: 1px;
}
.risk-factor-tag.tag-critical { background: rgba(220,38,38,0.15); color: #dc2626; }
.risk-factor-tag.tag-high { background: rgba(239,68,68,0.15); color: #ef4444; }
.risk-factor-tag.tag-elevated { background: rgba(245,158,11,0.15); color: #f59e0b; }
.risk-factor-tag.tag-low { background: rgba(16,185,129,0.15); color: #10b981; }
.risk-factor-body { flex: 1; min-width: 0; }
.risk-factor-title { font-size: 8px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.risk-factor-detail { font-size: 7px; color: var(--text-muted); margin-top: 1px; line-height: 1.3; }

/* SITREP */
.sitrep-supply-header {
    display: flex; align-items: center; gap: 8px; padding: 6px 0 4px;
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.sitrep-supply-number { font-size: 22px; font-weight: 700; line-height: 1; min-width: 50px; }
.sitrep-supply-meta { flex: 1; }
.sitrep-supply-label { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-secondary); }
.sitrep-supply-pct { font-size: 7px; color: var(--text-muted); letter-spacing: 1px; }
.sitrep-score { font-size: 16px; font-weight: 700; text-align: right; line-height: 1.2; }

.sitrep-breakdown { margin-bottom: 6px; }
.sitrep-breakdown-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.sitrep-breakdown-src { font-size: 7px; color: var(--text-muted); width: 72px; flex-shrink: 0; }
.sitrep-breakdown-bar { flex: 1; height: 3px; background: var(--bg-secondary); border-radius: 1px; overflow: hidden; }
.sitrep-breakdown-fill { height: 100%; background: var(--accent-red); border-radius: 1px; }
.sitrep-breakdown-val { font-size: 7px; color: var(--text-secondary); font-weight: 600; width: 28px; text-align: right; }

.sitrep-section-label {
    font-size: 7px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted);
    padding: 4px 0 2px; border-bottom: 1px solid rgba(30,41,59,0.5); margin: 4px 0 3px;
}

.sitrep-chokepoint {
    display: flex; align-items: center; gap: 6px; padding: 3px 0;
    border-bottom: 1px solid rgba(30,41,59,0.2);
}
.sitrep-cp-status {
    font-size: 6px; font-weight: 700; letter-spacing: 0.5px; color: #0a0e17;
    padding: 2px 4px; border-radius: 1px; min-width: 52px; text-align: center; flex-shrink: 0;
}
.sitrep-cp-body { flex: 1; min-width: 0; }
.sitrep-cp-name { font-size: 8px; font-weight: 600; color: var(--text-primary); }
.sitrep-cp-detail { font-size: 7px; color: var(--text-muted); }

.sitrep-scenario {
    display: flex; gap: 6px; padding: 3px 0;
    border-bottom: 1px solid rgba(30,41,59,0.2);
}
.sitrep-sc-impact {
    font-size: 9px; font-weight: 700; min-width: 48px; flex-shrink: 0; text-align: right;
}
.sitrep-sc-body { flex: 1; min-width: 0; }
.sitrep-sc-label { font-size: 7px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.sitrep-sc-desc { font-size: 7px; color: var(--text-muted); line-height: 1.3; }

/* === TABLET === */
@media (max-width: 1200px) {
    .bb-grid { flex-direction: column; height: auto; overflow-y: auto; }
    .bb-col { min-height: unset; }
    .bb-col-main, .bb-col:nth-child(2), .bb-col-data { flex: unset; }
    .bb-panel-lg { flex: unset; height: 320px; }
    .bb-panel-md { flex: unset; height: 260px; }
    .bb-panel-sm { flex: unset; height: 180px; }
    .bb-panel.flex-grow { flex: unset; height: 200px; }
    .chart-box-sm { height: 100px; }
}

/* === MOBILE === */
@media (max-width: 768px) {
    .bb-grid { height: auto; overflow-y: auto; gap: 0; }
    .bb-col { flex: unset !important; }
    .bb-panel-lg { height: 260px; }
    .bb-panel-md { height: 220px; }
    .bb-panel-sm { height: 180px; }
    .bb-panel.flex-grow { height: 200px; }
    .chart-box-sm { height: 90px; }
    .model-bar { gap: 6px; padding: 4px 6px; font-size: 7px; flex-wrap: wrap; }
    .mstat { gap: 2px; }
    .data-scroll { padding: 4px 6px; }
    .signal-row { padding: 5px 6px; gap: 4px; -webkit-tap-highlight-color: transparent; }
    .signal-indicator { font-size: 7px; width: 45px; }
    .signal-text { font-size: 8px; }
    .signal-detail { font-size: 7px; max-width: 80px; }
    .mg-row { padding: 4px 4px; }
    .mg-name { font-size: 8px; }
    .mg-price { font-size: 9px; }
    .mg-change { font-size: 8px; }
    .risk-intel-header { gap: 6px; flex-wrap: wrap; }
    .risk-score-badge { font-size: 14px; min-width: 28px; }
    .risk-level-text { font-size: 9px; }
    .risk-sublabel { font-size: 7px; }
    .fi-label { width: 55px; font-size: 6px; }
    .fi-row { gap: 4px; margin-bottom: 3px; }
    .risk-factor { padding: 4px 4px; gap: 4px; }
    .risk-factor-title { font-size: 8px; }
    .risk-factor-detail { font-size: 7px; }
}

/* === SMALL PHONE === */
@media (max-width: 480px) {
    .bb-panel-lg { height: 220px; }
    .bb-panel-md { height: 180px; }
    .bb-panel-sm { height: 150px; }
    .bb-panel.flex-grow { height: 160px; }
    .chart-box { padding: 2px 3px; }
    .chart-box-sm { height: 75px; padding: 2px 3px; }
    .level-row, .perf-row { font-size: 8px; padding: 3px 4px; }
    .model-bar { gap: 4px; padding: 3px 4px; }
    .signal-detail { display: none; }
    .mg-category-label { font-size: 7px; }
    .risk-score-badge { font-size: 12px; min-width: 24px; padding: 1px 4px; }
    .risk-factor-tag { font-size: 6px; min-width: 36px; }
}