/* ═══════════════════════════════════════════════════════════
   STATISTICS / NEW PAGES — shared + per-page styles
   ═══════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.stat-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 1.25rem 3rem;
}

@media (min-width: 640px) {
    .stat-page {
        padding: 6rem 1.5rem 3rem;
    }
}

@media (min-width: 1024px) {
    .stat-page {
        padding: 6rem 2rem 3rem;
    }
}

/* ── Page header ── */
.stat-pg-header { margin-bottom: 2rem; }

.stat-pg-breadcrumb {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--outline);
    margin-bottom: .625rem;
    flex-wrap: wrap;
}
.stat-pg-breadcrumb a { color: var(--outline); }
.stat-pg-breadcrumb a:hover { color: var(--primary); }
.stat-pg-breadcrumb-sep { color: var(--outline-variant); }



/* ── Generic card ── */
.stat-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
}
.stat-card-body { padding: 1.25rem 1.5rem; }
.stat-card-header {
    padding: .875rem 1.5rem;
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.stat-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
}

/* ── Mini stat cards ── */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 480px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .stat-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}
.stat-mini-card {
    background: var(--surface-container-lowest);
    border-radius: .875rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    min-height: 190px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.stat-mini-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-1px);
}
.stat-mini-card.error-card {
    border: 1px solid rgba(186,26,26,.25);
    background: rgba(186,26,26,.04);
}
.stat-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.stat-mini-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--outline);
}
.stat-mini-icon {
    font-size: 1.25rem;
    color: var(--primary);
}
.error-card .stat-mini-icon { color: var(--error); }
.stat-mini-value {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-top: auto;
}
.error-card .stat-mini-value { color: var(--error); }
a.stat-mini-card { text-decoration: none; color: inherit; }
.stat-mini-sub {
    font-size: .75rem;
    color: var(--outline);
}
.stat-mini-label a { color: inherit; text-decoration: none; }
.stat-mini-label a:hover { color: var(--primary); }
/* ── Stat kicker (hero label above page title) ── */
.stat-kicker {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 .5rem;
}

/* ── Period widget (hero right side) ── */
.stat-period-widget {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: var(--surface-container-low);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    flex-shrink: 0;
}
.stat-period-meta-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--outline);
    margin: 0 0 .125rem;
}
.stat-period-meta-value {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

/* ── Stat mini card icon wrap and admin badge ── */
.stat-mini-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-fixed);
    color: var(--primary);
    border-radius: .625rem;
    padding: .5rem;
}
.stat-mini-icon-wrap .material-symbols-outlined { font-size: 1.25rem; }
.stat-mini-admin-badge {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--primary-fixed);
    color: var(--primary);
    border-radius: 999px;
    padding: .25rem .625rem;
}

/* ── Wide spend cards ── */
.stat-spend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) { .stat-spend-grid { grid-template-columns: 1fr; } }
.stat-spend-card {
    border-radius: 1.25rem;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stat-spend-card-prev {
    background: var(--primary-container);
    color: var(--on-primary-container);
}
.stat-spend-card-curr {
    background: var(--secondary);
    color: var(--on-secondary);
}
.stat-spend-watermark {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    font-size: 16rem;
    opacity: .08;
    pointer-events: none;
    line-height: 1;
    color: currentColor;
}
.stat-spend-period {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: currentColor;
}
.stat-spend-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .75;
    margin: 0 0 .25rem;
    color: currentColor;
}
.stat-spend-amount {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: currentColor;
    margin: 0;
    line-height: 1;
}
.stat-spend-currency {
    font-size: 1rem;
    font-weight: 400;
    opacity: .7;
    margin-left: .375rem;
}

/* ── Year section ── */
.stat-year-section { display: flex; flex-direction: column; gap: 1rem; }
.stat-year-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
}
.stat-year-header {
    padding: 2rem 2rem 1.5rem;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
}
.stat-year-heading-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.25rem;
}
.stat-year-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}
.stat-year-summary-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.stat-year-summary-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--outline);
}
.stat-year-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.stat-year-summary-savings { color: #065f46; }
.stat-year-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--on-surface);
    text-decoration: none;
    flex: 0 0 auto;
}
.stat-year-title:hover { color: var(--primary); }
.stat-year-total { font-size: .875rem; color: var(--outline); }
.stat-year-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stat-year-export {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    padding: .375rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--outline);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.stat-year-export:hover { background: var(--surface-container); color: var(--primary); }
.stat-year-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 1.25rem 1rem;
}

@media (min-width: 480px) {
    .stat-year-months {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .stat-year-months {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        padding: 1.25rem 1.5rem;
    }
}
.stat-month-cell {
    padding: .875rem;
    border-radius: .75rem;
    background: var(--surface-container-low);
    text-decoration: none;
    color: var(--on-surface);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: background 0.15s;
}
.stat-month-cell:hover { background: var(--surface-container); color: var(--primary); }
.stat-month-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--outline);
}
.stat-month-cell:hover .stat-month-name { color: var(--primary); }
.stat-month-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
}
.stat-month-badges { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .125rem; }

/* ── Generic badges ── */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.stat-badge-blue  { background: rgba(0,69,87,.1); color: var(--primary); }
.stat-badge-green { background: #d1fae5; color: #065f46; }
.stat-badge-red   { background: rgba(186,26,26,.1); color: var(--error); }

/* ── Generic table card ── */
.stat-table-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .stat-table-card {
        scrollbar-width: thin;
        scrollbar-color: var(--outline-variant) transparent;
    }

    .stat-table-card::-webkit-scrollbar {
        height: 6px;
    }

    .stat-table-card::-webkit-scrollbar-thumb {
        background: var(--outline-variant);
        border-radius: 3px;
    }
}

.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

@media (max-width: 767px) {
    .stat-table {
        min-width: 600px;
    }
}
.stat-table th {
    padding: .75rem 1.25rem;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--outline);
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
    white-space: nowrap;
}
.stat-table td {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    color: var(--on-surface);
}
.stat-table tr:last-child td { border-bottom: none; }
.stat-table tr:hover td { background: var(--surface-container); }
.stat-table .td-primary { font-weight: 600; color: var(--primary); }
.stat-table .td-primary a { color: inherit; text-decoration: none; }
.stat-table .td-primary a:hover { opacity: .8; }
.stat-table .td-muted { color: var(--outline); font-size: .8125rem; }
.stat-table .td-right { text-align: right; }
.stat-table .td-center { text-align: center; }

/* ── Navigation arrows ── */
.stat-nav-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.stat-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.stat-nav-btn:hover { background: var(--surface-container); }
.stat-nav-period {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    padding: 0 .5rem;
}

/* ── Back link ── */
.stat-back-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--outline);
    text-decoration: none;
    padding: .5rem 0;
    margin-bottom: 1.5rem;
    transition: color .15s;
}
.stat-back-link:hover { color: var(--primary); }
.stat-back-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Savings banner ── */
.stat-savings-banner {
    background: #d1fae5;
    color: #065f46;
    border-radius: .75rem;
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* ── Empty state ── */
.stat-empty { padding: 3rem; text-align: center; color: var(--outline); }
.stat-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin: 0 auto .75rem;
    opacity: .4;
}
.stat-empty-text { font-size: .9375rem; font-weight: 500; margin: 0; }

/* ── Status badges ── */
.stat-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.stat-status-ok      { background: #d1fae5; color: #065f46; }
.stat-status-pending { background: #fef3c7; color: #92400e; }
.stat-status-error   { background: rgba(186,26,26,.1); color: var(--error); }

/* ── Table action button ── */
.stat-table-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .375rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}
.stat-table-action:hover { background: var(--surface-container-low); }


/* ── Month hero layout ── */
.stat-month-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* ── Month navigator pill ── */
.stat-month-nav-pill {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--surface-container-low);
    padding: .5rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--outline-variant-rgb, 128,128,128), .1);
    flex-shrink: 0;
}
.stat-month-nav-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--surface-container-lowest);
    color: var(--primary);
    text-decoration: none;
    transition: background .15s, color .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.stat-month-nav-circle:hover { background: var(--primary); color: var(--on-primary); }
.stat-month-nav-circle--ghost { opacity: .3; pointer-events: none; cursor: default; }
.stat-month-nav-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--on-surface);
    padding: 0 1rem;
    white-space: nowrap;
}

/* ── Bento stats grid ── */
.stat-bento-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}
@media (max-width: 768px) { .stat-bento-grid { grid-template-columns: 1fr; } }

/* Savings bento card */
.stat-bento-save-card {
    background: var(--primary-fixed);
    border-radius: .75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 16rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid rgba(0,69,87,.05);
}
.stat-bento-save-card--empty { opacity: .6; }
.stat-bento-blur-deco {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(0,69,87,.1);
    filter: blur(40px);
    pointer-events: none;
}
.stat-bento-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .375rem;
}
.stat-bento-stat-card .stat-bento-label {
    color: var(--secondary);
    opacity: 1;
}
.stat-bento-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--on-primary-fixed);
    line-height: 1.1;
    margin: .5rem 0 .25rem;
}
.stat-bento-sub {
    font-size: .875rem;
    color: var(--on-primary-fixed);
    opacity: .8;
    margin: 0;
}
.stat-bento-trend {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary-container);
    margin-top: .75rem;
}

/* Two stat cards stacked */
.stat-bento-stat-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 600px) { .stat-bento-stat-group { grid-template-columns: 1fr; } }
.stat-bento-stat-card {
    background: var(--surface-container-lowest);
    border-radius: .75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(var(--outline-variant-rgb,128,128,128),.1);
}
.stat-bento-big-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1;
    letter-spacing: -.05em;
    margin-top: .5rem;
}

/* ── Transaction log card ── */
.stat-txn-card {
    background: var(--surface-container-lowest);
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid rgba(var(--outline-variant-rgb,128,128,128),.05);
}
.stat-txn-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--surface-container);
}
.stat-txn-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
}
.stat-txn-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .stat-txn-table-wrap {
        scrollbar-width: thin;
        scrollbar-color: var(--outline-variant) transparent;
    }

    .stat-txn-table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .stat-txn-table-wrap::-webkit-scrollbar-thumb {
        background: var(--outline-variant);
        border-radius: 3px;
    }
}

.stat-txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    text-align: left;
}

@media (max-width: 767px) {
    .stat-txn-table {
        min-width: 700px;
    }
}
.stat-txn-table thead tr { background: var(--surface-container-low); }
.stat-txn-table th {
    padding: 1rem 2rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--secondary);
}
.stat-txn-th-right { text-align: right; }
.stat-txn-row { border-top: 1px solid var(--surface-container); transition: background .12s; }
.stat-txn-row:hover { background: var(--surface-bright, var(--surface-container-low)); }
.stat-txn-table td { padding: 1.5rem 2rem; vertical-align: middle; }
.stat-txn-date { font-weight: 500; color: var(--on-surface); white-space: nowrap; }
.stat-txn-store { }
.stat-txn-store-wrap { display: flex; align-items: center; gap: .75rem; }
.stat-txn-store-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    background: var(--surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.stat-txn-store-icon .material-symbols-outlined { font-size: 1.25rem; }
.stat-txn-amount { font-size: 1rem; font-weight: 700; color: var(--on-surface); white-space: nowrap; }
.stat-txn-status { }
.stat-txn-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .875rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.stat-txn-badge--ok { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.stat-txn-badge--partial { background: rgba(247,159,0,.15); color: #7a4c00; }
.stat-txn-badge--fail { background: var(--error-container); color: var(--on-error-container); }
.stat-txn-badge--processing { background: transparent; border: 1px solid var(--outline); color: var(--on-surface-variant, var(--secondary)); animation: stat-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.stat-txn-action { text-align: right; }
.stat-txn-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    text-decoration: none;
    transition: color .15s;
    padding: .25rem;
}
.stat-txn-view-btn:hover { color: var(--primary); }
.stat-txn-footer {
    padding: 2rem;
    background: var(--surface-container-low);
    text-align: center;
}
.stat-txn-footer-link {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    transition: opacity .15s;
    display: inline-flex;
    gap: .375rem;
}
.stat-txn-footer-link:hover { opacity: .75; text-decoration: underline; }

/* ── Empty state ── */
.stat-empty { padding: 3rem; text-align: center; color: var(--outline); }
.stat-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin: 0 auto .75rem;
    opacity: .4;
}
.stat-empty-text { font-size: .9375rem; font-weight: 500; margin: 0; }

/* ── Status badges ── */
.stat-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.stat-status-ok      { background: #d1fae5; color: #065f46; }
.stat-status-pending { background: #fef3c7; color: #92400e; }
.stat-status-error   { background: rgba(186,26,26,.1); color: var(--error); }

/* ── Table action button ── */
.stat-table-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .375rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}
.stat-table-action:hover { background: var(--surface-container-low); }