/* Fabric what-if reuses dashboard panels, controls, typography and blue/teal palette. */
#main[data-page="scenario"] #filters,#main[data-page="scenario"] #active-filters,#main[data-page="scenario"] .target-toggle,#main[data-page="scenario"] #footer-info{display:none}
.fabric-scope{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:0 0 18px}
.fabric-whatif .scenario-layout{align-items:start}
.fabric-controls{position:sticky;top:18px;display:block}
.fabric-controls .filter-field,.fabric-controls .range-field{width:100%;margin-top:18px}
.fabric-controls .button{width:100%;margin-top:12px}
.fabric-controls .scenario-scope-note{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.fabric-controls .fabric-error{color:var(--red)}
.fabric-placeholder{padding:24px;margin:0;line-height:1.6}
.fabric-result{min-width:0}
.fabric-result>.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.fabric-result .kpi-value{font-size:24px;white-space:normal;overflow-wrap:anywhere}
.fabric-result .chart-legend{flex-wrap:wrap;justify-content:flex-end;font-size:11px}
.fabric-result .panel-head{flex-wrap:wrap}
.fabric-chart-subtitle{font-size:11px;color:var(--muted);line-height:1.6;margin-top:8px}
.fabric-chart{width:100%;min-width:0;padding:4px 14px}
.fabric-chart svg{display:block;width:100%;overflow:visible}
.fabric-chart svg text{font-size:12px;font-family:inherit;fill:var(--muted)}
.fabric-chart .gridline{stroke:var(--line);stroke-width:1}
.fabric-period-panel,.fabric-result .table-panel{margin-top:20px}
.fabric-period-panel .panel-head{padding-bottom:0}
.fabric-result .chart-caption{gap:10px;flex-wrap:wrap;line-height:1.6}
.fabric-history-note,.fabric-result-note{font-size:11px;color:var(--muted);line-height:1.7;padding:0 22px 16px}
.fabric-result-note{padding:14px 0 0}
.fabric-tooltip{position:fixed;z-index:85;pointer-events:none;background:var(--navy);color:white;border-radius:7px;padding:12px 14px;box-shadow:var(--shadow);font-size:12px;max-width:calc(100vw - 24px)}
.fabric-tooltip>strong{display:block;margin-bottom:8px;font-weight:600}
.fabric-tooltip>div{display:flex;justify-content:space-between;gap:20px;margin-top:6px}
.fabric-tooltip>small{display:block;margin-top:9px;line-height:1.6;color:#c6d4e5}
@media(max-width:1100px){.fabric-whatif .scenario-layout{grid-template-columns:230px minmax(0,1fr)}.fabric-result>.kpis{grid-template-columns:1fr}.fabric-result .kpi{padding:14px 17px}.fabric-result .kpi-value{font-size:23px}.fabric-result .kpi-bottom{margin-top:5px}}
@media(max-width:760px){.fabric-whatif .scenario-layout{grid-template-columns:minmax(0,1fr)}.fabric-controls{position:static}.fabric-result .panel-head{align-items:flex-start}.fabric-result .chart-legend{justify-content:flex-start}.fabric-chart{padding:4px 5px}.fabric-scope{font-size:11px}.fabric-result .kpi-value{font-size:25px}}
/* Override the retired two-column what-if control grid only in the Fabric view. */
.fabric-whatif .scenario-layout>.fabric-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;position:static}
.fabric-whatif .scenario-layout>.fabric-controls .filter-field,.fabric-whatif .scenario-layout>.fabric-controls .range-field{margin:0;width:100%}
.fabric-whatif .scenario-layout>.fabric-controls .scenario-scope-note{margin:0;font-size:11px;line-height:1.6}