/* CHART FURNITURE
   ===============
   Everything around a canvas that is not the canvas: the collapsed
   exact-figures table, the live figure strip under the frame, and the dimmed
   state a summary tile takes when its series is switched off.

   NEW IN v2.8.0 AS A FILE, NOT AS RULES. Every rule here was in
   templates/dashboard.html's 1,055-line <style> block, which meant three
   things at once:

     * no other page could use them. templates/reports/monthly.html and
       templates/records.html both render figures beside data and both had to
       invent their own treatment;
     * base.html emits `{% block extra_style %}` AFTER every linked
       stylesheet, so these out-specified layout/mobile.css at every viewport
       width — see the note at the top of components/dashboard.css for the
       seventeen phone rules that had never applied;
     * ~34 KB of CSS was re-parsed on every dashboard view and shipped in
       every panel fragment, uncached, instead of riding in app.bundle.css
       behind a cache-buster.

   THE FRAME ITSELF (.chart-frame / --sm / --md / --lg / --xl, and the
   matching .chart-skeleton) is in layout/mobile.css §1, with the shorter
   heights it takes on a phone. It stays there: the desktop value and the
   mobile override have to be read side by side to make sense of either.

/* The exact figures behind each chart, collapsed by default. Charts are
   for reading a trend; the table is for transcribing a number onto a
   shift sheet. Both audiences exist, so both are served — but only one
   of them at a time. */
.breakdown-details > summary {
    cursor: pointer; user-select: none; list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--input-border); background: var(--input-bg);
    font-weight: 600;
}
.breakdown-details > summary::-webkit-details-marker { display: none; }
.breakdown-details > summary::before { content: '▸'; font-size: 10px; }
.breakdown-details[open] > summary::before { content: '▾'; }

/* ---- Live chart figures -------------------------------------------
   Every number printed beside a chart is recomputed from the series
   that are CURRENTLY VISIBLE. Before this existed, the doughnut's
   centre "TOTAL" was summed once at build time and closed over, so
   deselecting a slice removed the wedge but left the total claiming
   revenue that was no longer on screen. The same class of bug applied
   to every percentage on this page.

   .chart-live is the strip that carries those recomputed figures; it
   sits directly under the canvas so the number and the mark it
   describes are read together. */
.chart-live {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--card-border);
    font-size: 12px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.chart-live b { color: var(--text-main); font-weight: 700; }
/* Shown only while something is deselected, so an untouched chart
   carries no extra chrome. */
.chart-live .filtered-note { color: var(--caution-ink); font-weight: 600; }
.chart-live.is-empty { color: var(--caution-ink); }

/* A summary tile whose series has been switched off in the chart.
   Dimmed rather than hidden: the tile disappearing would reflow the
   grid on every legend click, and the figure is still true for the
   period — it is simply not part of what the chart is showing. */
.series-off { opacity: 0.35; filter: saturate(0.2); transition: opacity 0.2s ease, filter 0.2s ease; }
.series-off::after {
    content: 'hidden'; display: block; margin-top: 6px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 700;
}