/* ============================================================================
   forecast.css — component layer for the Forecast App demo mockups
   (see _editorial/backlog/forecast-demo.md).

   Forecast plugs into the same neobank-styled product surface as the Atlas /
   Odoo demo, so this module LOADS ON TOP of odoo-fintech.css and reuses its
   shared chrome and tokens (.fin canvas, .erp-shell, .kpi, .pill, .segment,
   .card-soft, .section-head, --fin-* palette). Here we add only what
   forecasting needs that the shared module doesn't have:

     1. Fan chart       .fanchart  (P10–P90 cone of uncertainty)
     2. Driver decomp   .decomp    (what builds up to the forecast)
     3. Forecast table  .ftable    (month rows: P50, band, plan, variance)
     4. Seasonality     .season    (12-month multiplicative index bars)
     5. Scenario cards  .scenario  (base / conservative / stretch)
     6. Levers          .lever     (interactive driver sliders)
     7. Backtest        .backtest  (past forecasts vs actuals)
     8. Confidence band .conf      (inline P10–P90 mini range)

   Load order:  rare.min.css  →  odoo-fintech.css  →  this module.
   Built only on Rare Styles + --fin-* tokens so it tracks the library on
   upgrade and good components can be promoted back into the core.
   ============================================================================ */

:root {
    /* forecast-specific tints, all derived from library hues so they move with
       the theme. The band is the brand green at low opacity — a quiet cone. */
    --fc-band:        color-mix(in srgb, var(--brand-color) 16%, white);
    --fc-band-edge:   color-mix(in srgb, var(--brand-color-dark) 30%, white);
    --fc-plan:        var(--gray-trans);      /* the plan/target reference line */
    --fc-actual:      var(--fin-ink);         /* solid history */
    --fc-committed:   var(--fin-ink);         /* darkest — most certain */
    --fc-recurring:   var(--brand-color-dark);
    --fc-pipeline:    var(--blue);
    --fc-seasonal:    var(--orange);
}

/* ---- 1. fan chart ------------------------------------------------------ */

.fanchart { display: block; width: 100%; height: auto; overflow: visible; }
.fanchart .band   { fill: var(--fc-band); stroke: none; }
.fanchart .band-inner { fill: color-mix(in srgb, var(--brand-color) 26%, white); stroke: none; }
.fanchart .median { fill: none; stroke: var(--fin-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fanchart .actual { fill: none; stroke: var(--fc-actual); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fanchart .plan   { fill: none; stroke: var(--fc-plan); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.fanchart .grid   { stroke: var(--fin-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fanchart .nowline { stroke: var(--fin-ink-soft); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.fanchart .dot    { fill: var(--fin-surface); stroke: var(--fin-accent); stroke-width: 2.5; }
.fanchart .nowlabel { fill: var(--fin-ink-soft); font-family: var(--primary-font); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.chart-axis { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--fin-ink-soft); margin-top: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--font-size-xs); color: var(--fin-ink-soft); }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 18px; height: 0; border-top: 2.5px solid currentColor; }
.chart-legend .swatch--band { height: 10px; border: 0; border-radius: 2px; background: var(--fc-band); }
.chart-legend .swatch--dash { border-top-style: dashed; border-top-width: 2px; }

/* ---- 2. driver decomposition ------------------------------------------ */

.decomp { display: flex; flex-direction: column; gap: var(--space-md); }
.decomp__bar { display: flex; height: 28px; border-radius: var(--fin-radius-sm); overflow: hidden; }
.decomp__seg { display: flex; align-items: center; justify-content: center; color: var(--fin-surface); font-family: var(--code-font); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; min-width: 0; }
.decomp__seg--committed { background: var(--fc-committed); }
.decomp__seg--recurring { background: var(--fc-recurring); }
.decomp__seg--pipeline  { background: var(--fc-pipeline); }
.decomp__seg--seasonal  { background: var(--fc-seasonal); }
.decomp__legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); }
.decomp__row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); }
.decomp__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.decomp__row .v { margin-left: auto; font-family: var(--code-font); font-variant-numeric: tabular-nums; }
.dot--committed { background: var(--fc-committed); }
.dot--recurring { background: var(--fc-recurring); }
.dot--pipeline  { background: var(--fc-pipeline); }
.dot--seasonal  { background: var(--fc-seasonal); }

/* ---- 3. forecast table ------------------------------------------------- */

.ftable { width: 100%; border-collapse: collapse; }
.ftable th { text-align: left; font-family: var(--primary-font); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fin-ink-soft); font-weight: var(--font-weight-normal); padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--fin-line); }
.ftable td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--fin-line); }
.ftable tr:last-child td { border-bottom: 0; }
.ftable .r { text-align: right; font-family: var(--code-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftable .month { font-weight: var(--font-weight-bold); white-space: nowrap; }
.ftable .band { color: var(--fin-ink-soft); }
.ftable .basis { color: var(--fin-ink-soft); font-size: var(--font-size-xs); }
.ftable tr.is-now td { background: var(--gray-lightest); }

/* a tiny inline range bar showing where P50 sits inside the P10–P90 band */
.rangebar { position: relative; height: 6px; border-radius: var(--space-lg); background: var(--fc-band); min-width: 90px; }
.rangebar__p50 { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--fin-accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--fin-surface); }

/* ---- 4. seasonality index --------------------------------------------- */

.season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 96px; }
.season__col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.season__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--brand-color-light); }
.season__bar--over { background: var(--fin-accent); }
.season__bar--under { background: var(--gray-mid-light); }
.season__m { font-size: 10px; color: var(--fin-ink-soft); font-family: var(--primary-font); }
.season__base { border-top: 1px dashed var(--fin-line); position: relative; }

/* ---- 5. scenario cards ------------------------------------------------- */

.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .scenario-grid { grid-template-columns: 1fr; } }
.scenario {
    background: var(--fin-surface);
    border-radius: var(--fin-radius);
    border-top: 3px solid var(--gray-mid-light);
    padding: var(--space-lg);
    box-shadow: var(--fin-shadow-sm);
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.scenario--base    { border-top-color: var(--fin-accent); }
.scenario--down    { border-top-color: var(--fin-warn); }
.scenario--up      { border-top-color: var(--blue); }
.scenario__name { font-family: var(--fin-font-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); }
.scenario__value { font-family: var(--code-font); font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.02em; }
.scenario__value .unit { font-size: .5em; color: var(--fin-ink-soft); margin-left: .2em; }
.scenario__prob { font-size: var(--font-size-sm); color: var(--fin-ink-soft); }
.scenario__assumptions { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--fin-line); padding-top: var(--space-md); }
.scenario__assumptions li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-size-sm); }
.scenario__assumptions .v { font-family: var(--code-font); font-variant-numeric: tabular-nums; color: var(--fin-ink); }

/* ---- 6. levers (interactive sliders) ---------------------------------- */

.lever { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--fin-line); }
.lever:last-child { border-bottom: 0; }
.lever__label { font-size: var(--font-size-sm); }
.lever__label .sub { display: block; font-size: var(--font-size-xs); color: var(--fin-ink-soft); }
.lever__value { font-family: var(--code-font); font-variant-numeric: tabular-nums; font-size: var(--font-size-md); text-align: right; }
.lever__value .delta { font-size: var(--font-size-xs); margin-left: .3em; }
.lever input[type="range"] {
    grid-column: 1 / -1;
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: var(--space-lg);
    background: var(--gray-mid-light); outline: none; cursor: pointer;
}
.lever input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--fin-accent); border: 3px solid var(--fin-surface);
    box-shadow: var(--fin-shadow-sm); cursor: grab;
}
.lever input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--fin-accent); border: 3px solid var(--fin-surface);
    box-shadow: var(--fin-shadow-sm); cursor: grab;
}

/* the big live outcome number the levers drive */
.outcome { display: flex; flex-direction: column; gap: var(--space-xs); }
.outcome__value { font-family: var(--code-font); font-variant-numeric: tabular-nums; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -.03em; line-height: 1; color: var(--fin-accent); transition: color .2s; }
.outcome__value .unit { font-size: .35em; color: var(--fin-ink-soft); margin-left: .25em; }
.outcome__band { font-family: var(--code-font); font-variant-numeric: tabular-nums; color: var(--fin-ink-soft); font-size: var(--font-size-sm); }

/* ---- 7. backtest ------------------------------------------------------- */

.backtest { display: flex; flex-direction: column; }
.backtest__row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--fin-line); }
.backtest__row:last-child { border-bottom: 0; }
.backtest__month { font-size: var(--font-size-sm); color: var(--fin-ink-soft); }
.backtest__track { position: relative; height: 10px; border-radius: var(--space-lg); background: var(--fc-band); }
.backtest__actual { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--fin-surface); }
.backtest__actual--in  { background: var(--fin-accent); }
.backtest__actual--out { background: var(--fin-neg); }
.backtest__err { font-family: var(--code-font); font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); text-align: right; }

/* ---- 8. inline confidence range --------------------------------------- */

.conf { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--code-font); font-variant-numeric: tabular-nums; color: var(--fin-ink-soft); font-size: .9em; }
.conf__sep { opacity: .5; }

/* ---- misc small bits --------------------------------------------------- */

.tag-method { display: inline-flex; align-items: center; gap: .4em; font-family: var(--primary-font); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fin-ink-soft); background: var(--gray-light); padding: .3em .7em; border-radius: var(--space-lg); }
.assumption-note { font-size: var(--font-size-xs); color: var(--fin-ink-soft); line-height: 1.5; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 640px) {
    .decomp__legend { grid-template-columns: 1fr; }
    .season__m { font-size: 8px; }
}