/* File Convert — dashboard statistics panel and D3 charts.
 *
 * Loaded on every page but only ever used by the /dashboard overview, which is
 * the one place <fc-chart> appears. Everything here is scoped under .statpanel
 * or the fc-chart element itself so it cannot leak into another page.
 *
 * Colours come from the theme tokens in theme.css — nothing is hardcoded, so
 * dark mode is handled by the same declarations rather than a second block.
 * The charts read the same tokens from JavaScript at draw time; this file and
 * javascripts/account-stats.js are looking at one palette, not two.
 */

/* ------------------------------------------------------------------ *
 * Stat tiles
 * ------------------------------------------------------------------ */

.statgrid {
    display: grid;
    /* auto-fit rather than a fixed count: three across on a desktop panel, two
       on a tablet, one at 360px — with no breakpoint to maintain. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--t-elevated);
    border: 1px solid var(--t-border);
    border-radius: var(--radius-xl);
    /* A long word — an email-shaped provider name, say — must wrap rather than
       push the panel wider than the page. */
    overflow-wrap: anywhere;
}

.stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--t-highlighted);
}

/* "yesterday", "12 days ago" — words, not figures, so they need a size that
   does not overflow a narrow tile. */
.stat__value--word {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.stat__label {
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--t-default);
}

.stat__note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--t-dimmed);
}

/* ------------------------------------------------------------------ *
 * Chart cards
 * ------------------------------------------------------------------ */

.chartgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
    /* A grid item defaults to min-content width, which a wide SVG or table can
       force open past the viewport. This is what actually keeps the page from
       scrolling sideways at 360px. */
    min-width: 0;
}

.chartgrid > * {
    min-width: 0;
}

/* fc-chart is an unknown element until the script upgrades it, so it has no
   display of its own. Setting it here means the card looks right during the
   moment before the definition arrives, and if it never arrives. */
fc-chart {
    display: block;
}

.chartcard {
    padding: 16px;
    background: var(--t-elevated);
    border: 1px solid var(--t-border);
    border-radius: var(--radius-xl);
    min-width: 0;
}

.chartcard__title {
    margin: 0 0 2px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--t-highlighted);
}

.chartcard__lede {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--t-muted);
}

.chartcard__canvas {
    /* The element measures this box to size the SVG, so it must be able to
       shrink; without min-width the SVG it drew last would set the floor. */
    min-width: 0;
    width: 100%;
}

.chartcard__empty {
    margin: 0;
    padding: 14px 16px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--t-muted);
    background: var(--t-surface);
    border: 1px dashed var(--t-border-strong);
    border-radius: var(--radius-lg, 10px);
}

/* The numbers behind the chart. Visible when JavaScript or D3 is unavailable,
   and moved to the accessibility tree by the .visually-hidden class from
   form.css once a chart has actually been drawn. */
.chartcard__data {
    margin-top: 12px;
    /* Its own scroller, so a table wider than the card scrolls inside the card
       instead of widening the document. */
    overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * Fallback data table
 * ------------------------------------------------------------------ */

.fctable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    text-align: left;
}

.fctable caption {
    margin-bottom: 8px;
    font-size: 0.75rem;
    text-align: left;
    color: var(--t-dimmed);
}

.fctable th,
.fctable td {
    padding: 6px 10px 6px 0;
    font-weight: 400;
    white-space: nowrap;
    color: var(--t-default);
    border-bottom: 1px solid var(--t-border);
}

.fctable thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-dimmed);
}

.fctable tbody th {
    font-weight: 600;
    color: var(--t-highlighted);
}

.fctable tbody tr:last-child th,
.fctable tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * The SVG itself
 *
 * Geometry and colour are set by the script from the theme tokens; only
 * typography lives here, because font metrics belong with the stylesheet that
 * owns the rest of the page's type.
 * ------------------------------------------------------------------ */

.fcchart {
    display: block;
    max-width: 100%;
    overflow: visible;
}

.fcchart__tick {
    font-size: 11px;
    font-weight: 500;
}

.fcchart__tick--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
}

.fcchart__value {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Motion
 *
 * The bars grow from zero on first draw. That is decoration, so it is switched
 * off here and — because a CSS rule cannot reach a D3 transition — in
 * account-stats.js as well, which checks the same media query before animating.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .stat,
    .chartcard {
        transition: none;
    }

    .fcchart * {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * Narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
    .stat {
        padding: 12px 14px;
    }

    .stat__value {
        font-size: 1.5rem;
    }

    .chartcard {
        padding: 14px;
    }
}