/* ==========================================================================
   HomeRP page patterns (#80)
   ==========================================================================

   The reusable page furniture: the page header, the tab bar, cards, section
   headings, the filter toolbar, the authenticated empty/loading/error states,
   and the two-column content grid.

   This file also carries the **Bootstrap bridge**: Bootstrap 5.3 sets its own
   `--bs-*` variables and bakes the rest of its component styling in at build
   time, so re-pointing its variables is not enough on its own. Where Bootstrap
   already owns a class we are adopting — `.card`, `.alert`, `.btn`, `.badge`,
   `.form-control` — we override it here (and in forms.css / datadisplay.css)
   rather than renaming, so the screens already using those classes inherit the
   Ledger look without a rewrite. Those deliberate overrides are listed in the
   "UI Design System" wiki page (#86).

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

/* --- Bootstrap bridge ----------------------------------------------------- */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--fs-md);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-ctl);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-card);
    --bs-heading-color: var(--heading);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--accent-soft);
    --bs-emphasis-color: var(--heading);
    --bs-primary: var(--accent);
    --bs-font-sans-serif: var(--font-body);
}

/* --- page header ---------------------------------------------------------- */
/* Mobile-first: the title and the actions stack on a phone instead of competing for
   one row. In 0.3.0 a 28px Fraunces title ran straight through the action buttons at
   375px (#107). */
.page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .page-head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }
}

.page-head__text {
    min-width: 0;
}

.page-head__sub {
    margin-top: .2rem;
    color: var(--muted);
    font-size: var(--fs-md);
}

.page-head__actions {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
    flex-wrap: wrap;
}

/* --- tab bar -------------------------------------------------------------- */
/* Replaces the row of eleven outline pills the Accounting area used to render. */
/* The strip: the scroller holds the tabs, and "All sections" stays pinned at the
   right edge so a hidden tab is never unreachable (#107). */
.tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.tabs__scroller {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: .25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fades whichever edge has more content, so the strip reads as scrollable. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

    .tabs__scroller::-webkit-scrollbar {
        display: none;
    }

.tabs__all {
    flex: 0 0 auto;
    min-height: var(--ctl-h);
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
}

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

/* Twelve tabs fit from 1024px up, so the button has nothing to offer there. */
@media (min-width: 1024px) {
    .tabs__all {
        display: none;
    }
}

.tabs__item {
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    min-height: var(--ctl-h);
    margin-bottom: -1px;
    padding: .5rem .7rem;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
}

    .tabs__item:hover {
        color: var(--ink);
        text-decoration: none;
    }

    .tabs__item.is-active {
        border-bottom-color: var(--accent);
        color: var(--accent);
        font-weight: var(--fw-semibold);
    }

/* --- section heading ------------------------------------------------------ */
.sec {
    margin: 1.6rem 0 .7rem;
    color: var(--heading);
    font-size: var(--fs-lg);
    font-weight: var(--heading-weight);
    letter-spacing: -.01em;
}

    .sec:first-child {
        margin-top: 0;
    }

/* --- card (overrides Bootstrap's .card) ----------------------------------- */
.card {
    display: block;
    position: relative;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--elev-1);
    color: var(--ink);
}

    /* Padding lives on the card, not on a body wrapper, so the mockup's
       `<div class="card">` and Bootstrap's `<div class="card"><div class="card-body">`
       both produce exactly one inset. A table card uses `style="padding:0"`. */
    .card > .card-body {
        padding: 0;
    }

    .card > .card-header,
    .card > .card-footer {
        padding: .5rem 0;
        border-color: var(--line);
        background: transparent;
    }

.card-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: .55rem;
}

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

.card-link {
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* --- filter toolbar ------------------------------------------------------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.toolbar__grow {
    flex: 1;
}

.search {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 240px;
    padding: .45rem .7rem;
    border: 1px solid var(--input-border);
    border-radius: var(--r-ctl);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-base);
}

    .search input {
        flex: 1;
        border: 0;
        background: transparent;
        color: var(--ink);
        font: inherit;
        outline: none;
    }

/* --- content grid --------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .grid__full {
        grid-column: auto;
    }
}

/* --- empty / loading / error states --------------------------------------- */
.state {
    padding: 2.6rem 1.5rem;
    text-align: center;
}

.state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto .9rem;
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.4rem;
}

.state h3 {
    margin: 0 0 .4rem;
    color: var(--heading);
    font-size: var(--fs-lg);
    font-weight: var(--heading-weight);
}

.state p {
    max-width: 34rem;
    margin: 0 auto 1.1rem;
    color: var(--muted);
    font-size: var(--fs-base);
}

.state__actions {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
}

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

.spinner {
    width: 22px;
    height: 22px;
    margin: 0 auto .75rem;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rp-spin .7s linear infinite;
}

@keyframes rp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- alerts (overrides Bootstrap's .alert) -------------------------------- */
.alert {
    padding: .7rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    font-size: var(--fs-base);
}

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

.alert-warning {
    border-color: var(--warn-bg);
    background: var(--warn-bg);
    color: var(--badge-amber-fg);
}

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

.alert-info {
    border-color: var(--accent-soft);
    background: var(--accent-soft);
    color: var(--accent);
}

.alert-link {
    color: inherit;
    text-decoration: underline;
}

/* --- small helper --------------------------------------------------------- */
.muted {
    color: var(--muted);
}
/* --- quick actions (phone only) ------------------------------------------- */
/* Under the hero, in thumb reach. Hidden from 1024px, where the same actions are
   the page header's buttons — never presented twice on one screen (#107). */
.qa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.qa__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 64px;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--r-ctl);
    background: var(--surface);
    box-shadow: var(--elev-1);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
}

    .qa__item:hover {
        color: var(--accent);
        text-decoration: none;
    }

    .qa__item .nav-icon {
        color: var(--accent);
    }

.qa__label {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

@media (min-width: 1024px) {
    .qa {
        display: none;
    }
}

/* --- loading skeleton ----------------------------------------------------- */
/* Rows at the final height, so the page does not jump when the data lands (#107). */
.skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.skeleton__row {
    height: 52px;
    border-radius: var(--r-ctl);
    background: linear-gradient(90deg, var(--sunken) 25%, var(--line) 37%, var(--sunken) 63%);
    background-size: 400% 100%;
    animation: rp-shimmer 1.4s ease infinite;
}

@keyframes rp-shimmer {
    to {
        background-position: -200% 0;
    }
}