/* ==========================================================================
   HomeRP data display (#81)
   ==========================================================================

   How numbers and statuses are presented: tabular figures, right-aligned money
   columns, an explicit sign on deltas, the positive/negative colour rule, status
   pills, metric tiles and progress bars.

   The rule the mockups established: **money is right-aligned and tabular** so a
   column of figures lines up on the decimal point; a **delta carries an explicit
   sign** (`+3,120.00`) while a plain balance does not (`4,298.61`); and direction
   is coloured *only* where it means something (income positive, outflow negative)
   — never to decorate.

   Rule: tokens only — no colour, radius or spacing literal.
   ========================================================================== */

/* --- data table ----------------------------------------------------------- */
/* `.data` is applied to a plain <table> instead of Bootstrap's `.table`. */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

    table.data th {
        padding: .4rem .55rem;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: var(--label-tracking);
        text-transform: uppercase;
        text-align: left;
    }

    table.data td {
        padding: .55rem;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
    }

    table.data tbody tr:hover td {
        background: var(--accent-soft);
    }

    table.data tbody tr:last-child td {
        border-bottom: 0;
    }

/* `.table-scroll` is gone (#106). It was 0.3.0's entire mobile data strategy — pan the
   table sideways rather than reflow it — and no page used it. Collections are
   `CollectionView` now, and InteractionGuardTests fails the build if anything
   reintroduces a horizontal scroller. */

/* --- numeric alignment ---------------------------------------------------- */
/* Wrap in a right-aligned cell AND use tabular figures, so a column of money
   lines up on the decimal point rather than jittering with each glyph. */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- direction ------------------------------------------------------------ */
.pos {
    color: var(--pos);
}

.neg-t {
    color: var(--neg);
}

/* --- status pills (overrides Bootstrap's .badge) -------------------------- */
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: var(--r-pill);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.badge-grey {
    background: var(--badge-grey-bg);
    color: var(--badge-grey-fg);
}

.badge-amber {
    background: var(--badge-amber-bg);
    color: var(--badge-amber-fg);
}

.badge-green {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.badge-red {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

/* --- progress bar --------------------------------------------------------- */
.bar {
    height: 7px;
    margin-top: .5rem;
    border-radius: var(--r-sm);
    background: var(--line);
    overflow: hidden;
}

    .bar > i {
        display: block;
        height: 100%;
        background: var(--accent);
    }
/* --- the hero panel ------------------------------------------------------- */
/* One figure, given the weight it deserves: the espresso panel, the display face at
   --fs-metric, and only two things coloured — the delta and the ochre bar (#107). */
.hero {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-radius: var(--r-card);
    background: var(--hero-bg);
    color: var(--hero-fg);
    box-shadow: var(--elev-1);
}

.hero__label {
    color: var(--hero-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.hero__figure {
    margin-top: .25rem;
    font-family: var(--font-display);
    font-size: var(--fs-metric);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.hero__figure--neg {
    color: var(--hero-neg);
}

.hero__delta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: .4rem;
    font-size: var(--fs-sm);
}

.hero__delta-up {
    color: var(--hero-pos);
    font-weight: var(--fw-semibold);
}

.hero__delta-down {
    color: var(--hero-neg);
    font-weight: var(--fw-semibold);
}

.hero__delta-label {
    color: var(--hero-muted);
}

.hero__bar {
    height: 6px;
    margin-top: var(--space-3);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

    .hero__bar > i {
        display: block;
        height: 100%;
        border-radius: var(--r-pill);
        background: var(--hero-accent);
    }

.hero__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: .5rem;
    color: var(--hero-muted);
    font-size: var(--fs-sm);
}

.hero__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: var(--ctl-h);
    color: var(--hero-link);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

    .hero__link:hover {
        text-decoration: underline;
    }

/* --- KPI tiles ------------------------------------------------------------ */
.kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kpi {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--elev-1);
}

.kpi__label {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.kpi__figure {
    margin-top: .3rem;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.kpi__sub {
    margin-top: .15rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.warn-t {
    color: var(--warn);
}

@media (min-width: 1024px) {
    .kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- collections: rows on a phone, a table line from 1024px (#106) ---------- */
.collection {
    display: flex;
    flex-direction: column;
}

.collection__head {
    display: none;
}

/* Names the figures in order when the header row is hidden (#106). */
.collection__legend {
    padding-bottom: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.collection .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem var(--space-3);
    min-height: 56px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}

.row__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.row__link {
    color: var(--ink);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

    .row__link:hover {
        color: var(--accent);
        text-decoration: underline;
    }

.row__title {
    font-weight: var(--fw-semibold);
}

.row__sub {
    color: var(--muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

/* Several figures stack right-aligned on a phone. */
.row__figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.row__figure {
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* The row action sits under the figure, right-aligned — a full-width button on every
   row dominated the list and put a destructive action in the most prominent place
   on the screen (#106). */
.row__actions {
    grid-column: 2;
    justify-self: end;
}

    .row__actions .btn {
        width: auto;
    }

.collection .row.is-archived .row__main,
.collection .row.is-archived .row__figures {
    opacity: .6;
}

/* A row action that carries fields (Void with a reason; the module editor) takes the
   whole width, and its controls WRAP rather than squeeze — so a row can host an editor
   on a phone, and the fields stack instead of collapsing to an unreadable width (#106). */
.row__actions--wide {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

    /* A field keeps a readable minimum (12rem, beside the 7rem figure floor), so several
       of them wrap onto their own lines while a lone field still shares the line with
       its button — the Void-with-a-reason action is unchanged. */
    .row__actions--wide .form-control {
        flex: 1 1 12rem;
    }

@media (min-width: 1024px) {
    /* Flex, not grid: the number of figure columns varies per collection, and
       `repeat()` cannot take a CSS variable. */
    .collection__head,
    .collection .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-4);
    }

    /* Bootstrap's grid leaks into a `.row` inside `.collection`: its
       `.row { flex-wrap: wrap }` and `.row > * { width: 100% }` (with the negative
       gutter margins) are meant for the 12-column grid. Here they wrapped every
       figure and row action onto its own full-width line, so the >= 1024px
       "table" collapsed into a vertical list and the money never reached its
       column. Neutralise them, scoped to the collection so Bootstrap's own grid is
       untouched (#106). */
    .collection .row {
        margin-right: 0;
        margin-left: 0;
    }

    .collection .row > * {
        width: auto;
        padding-right: 0;
        padding-left: 0;
    }

    .collection__head {
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        letter-spacing: var(--label-tracking);
        text-transform: uppercase;
    }

    .collection__cell--main,
    .collection .row__main {
        flex: 1;
        min-width: 0;
    }

    /* The legend exists to name the figures where the header row is hidden — a phone.
       At this width the header row IS visible, so without this the names appear twice
       on every multi-figure collection (#106). */
    .collection__legend {
        display: none;
    }

    .collection__cell--figure,
    .row__figures {
        flex: 0 0 auto;
    }

    .row__figures {
        flex-direction: row;
        gap: var(--space-4);
    }

    .row__figure {
        min-width: 7rem;
        text-align: right;
    }

    .collection__cell--figure {
        min-width: 7rem;
        text-align: right;
    }

    .row__actions {
        grid-column: auto;
        flex: 0 0 auto;
    }

    .row__actions--wide {
        flex: 0 0 auto;
        justify-self: auto;
    }
}