/* ==========================================================================
   /category/{id} page
   ========================================================================== */

.category-page {
    --week-ok: #6096ba;
    --week-warn: #e0a100;
    --week-over: #CD0A0A;
    --week-good: #30AD23;
    --week-ink: #232f3e;
    --week-muted: #777;
    --week-line: #e6e6e6;
    --week-soft: #f6f7f9;
    color: var(--week-ink);
}

.category-page [hidden] {
    display: none !important;
}

.category-page section {
    margin-bottom: 1.5rem;
}

.category-page .categories-header__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.category-page .categories-header__eyebrow a:hover {
    color: #0078e7;
    text-decoration: underline;
}

.category-summary__totals {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: var(--week-muted);
    font-size: .8rem;
    text-align: right;
}

.category-summary__totals strong {
    color: var(--week-ink);
}

.category-summary__totals .red,
.category-summary__totals .red strong {
    color: var(--week-over);
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.category-card {
    min-width: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--week-line);
    border-radius: 8px;
    background: #fff;
}

.category-card .week-section-head {
    margin-bottom: .6rem;
}

.category-card--chart {
    padding: .75rem 1rem;
}

.category-chart {
    position: relative;
    height: 16rem;
}

.category-card__empty {
    margin: 0;
    color: var(--week-muted);
    font-size: .875rem;
}

.category-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

/* ── Vendors ──────────────────────────────────────────────────────────── */

.share-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--week-line);
    font-size: .875rem;
}

.share-list li:last-child {
    border-bottom: 0;
}

.share-list__name {
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-list__name:hover {
    text-decoration: underline;
}

.share-list__amount {
    font-variant-numeric: tabular-nums;
}

.share-list__bar {
    grid-column: 1 / -1;
    height: 5px;
}

/* ── Tags ─────────────────────────────────────────────────────────────── */

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.category-tag {
    padding: .2rem .65rem;
    border: 1px solid #cbdbe7;
    border-radius: 999px;
    background: #eef4f9;
    color: var(--week-ink);
    font-size: .8rem;
    text-decoration: none;
}

.category-tag:hover {
    background: #e0ebf3;
}

.category-tag .fa {
    margin-right: .15rem;
    color: var(--week-muted);
}

/* ── Expenses ─────────────────────────────────────────────────────────── */

.category-expenses .week-section-head {
    justify-content: space-between;
}

.category-select-all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--week-muted);
    font-size: .8rem;
    cursor: pointer;
}

.category-group__dates {
    margin-left: .5rem;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}

.expense--selectable {
    grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr) 6.5rem auto;
}

.expense--selectable:has(input[type="checkbox"]:checked) {
    background: #eef4f9;
}

.expense__select {
    display: flex;
    align-items: center;
    padding: .25rem;
    cursor: pointer;
}

.category-expense__date {
    color: var(--week-muted);
    text-decoration: none;
    white-space: nowrap;
}

.category-expense__date:hover {
    color: #0078e7;
    text-decoration: underline;
}

.category-expenses__total {
    display: flex;
    justify-content: space-between;
    padding: .65rem .5rem;
    border-top: 2px solid var(--week-line);
    font-variant-numeric: tabular-nums;
}

.category-expenses__total strong.green {
    color: var(--week-good);
}

@media screen and (max-width: 48em) {
    .category-insights {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 35.5em) {
    .category-chart {
        height: 13rem;
    }

    .category-summary__totals {
        text-align: left;
    }

    .expense--selectable {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "select main amount actions"
            "select meta meta   actions";
    }

    .expense--selectable .expense__select { grid-area: select; }
}