/*
 * The `Andamento spesa` cell of the Apify pool list (#1257): the cycle's
 * spend, the projection at its average pace, and the sentence that says it.
 *
 * Explicit `.ssmt-*` classes registered through FilamentAsset, for the reason
 * engagement-history.css gives: Filament does not scan our Blade views, so
 * Tailwind utilities written there produce no CSS.
 *
 * COLOUR RULE (#124): every colour is a design-system token; `CssTokensTest`
 * fails the build on a stray hex.
 */

/* Centred on both axes, and not for looks: the caption is as long as its
   sentence, so a block aligned to one edge would shift the chart sideways by
   the length of the words under it, and the charts of consecutive rows would
   stop lining up. Centred, each chart sits at the middle of the column. */
.ssmt-spend {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.ssmt-spend__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ⚠️ Width and height in em, and in the viewBox's own ratio (200 × 44 ≈ 4.55).
   In em so the chart grows with the text around it instead of pinning the row
   to pixels (WCAG 1.4.4); in that ratio because the viewBox is stretched with
   `preserveAspectRatio="none"`, and any other ratio turns the two dots into
   ellipses. */
.ssmt-spend__chart {
    display: block;
    width: 9.1em;
    height: 2em;
}

.ssmt-spend__cap {
    stroke: var(--tew-color-border-strong);
    stroke-width: 1;
    fill: none;
}

/* The pool's own threshold — where the account leaves the rotation — dotted,
   so it reads as a mark on the scale rather than as data. */
.ssmt-spend__threshold {
    stroke: var(--tew-color-warning);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    fill: none;
}

.ssmt-spend__today {
    stroke: var(--tew-color-border);
    stroke-width: 1;
    fill: none;
}

/* The spend line and its end dot are the engagement sparkline's own
   `.ssmt-spark__line` / `.ssmt-spark__end` (engagement-history.css): one
   sparkline, one stroke. Only the red of an account past the threshold is
   ours, scoped under the chart so it wins on specificity rather than on
   which of the two files happens to load last. */
.ssmt-spend__chart .ssmt-spend__line--over {
    stroke: var(--tew-color-danger);
}

.ssmt-spend__chart .ssmt-spend__end--over,
.ssmt-spend__crossing {
    fill: var(--tew-color-danger);
}

/* Dashed: it is a projection, not a reading. */
.ssmt-spend__projection {
    stroke: var(--tew-color-text-subtle);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}

.ssmt-spend__projection--crosses {
    stroke: var(--tew-color-danger);
}

/* The typeface comes from `fi-font-mono` on the element — the class the money
   columns beside it get from `->fontFamily(FontFamily::Mono)` — so the
   percentage cannot drift from them by being declared twice. */
.ssmt-spend__percent {
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
    text-align: end;
}

.ssmt-spend__caption {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--tew-color-text-subtle);
    white-space: nowrap;
}

/* ⚠️ The TEXT token for danger, not the stroke one: a caption is text and is
   held to 4.5:1, which the line colour is not measured against.
   The caption turns red on a projected crossing; the percentage only once the
   threshold is actually behind the account — 45% is not an alarm, the date
   under it is. */
.ssmt-spend--alarming .ssmt-spend__caption,
.ssmt-spend--over .ssmt-spend__percent {
    color: var(--tew-color-danger-text);
}