/* Final visual layer shared by authenticated pages. */
:root {
    --sn-surface: #ffffff;
    --sn-surface-soft: #f4f8f5;
    --sn-line: #dbe6de;
    --sn-ink-soft: #5d7367;
    --sn-gold-soft: #fff5d7;
}

body.has-account {
    background:
        radial-gradient(circle at 96% 2%, rgba(236, 201, 99, .09), transparent 22rem),
        linear-gradient(180deg, #f8faf8 0%, #f3f6f3 100%);
}

.has-account .public-topbar {
    background: rgba(255, 255, 255, .9);
    border-bottom-color: rgba(193, 210, 199, .72);
    backdrop-filter: blur(16px) saturate(135%);
    box-shadow: 0 4px 22px rgba(20, 61, 40, .035);
}

.has-account .topbar-inner {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.has-account .notification-topbar-btn,
.has-account .topbar-logout,
.has-account .account-initial {
    border: 1px solid #dbe6de;
    border-radius: .9rem;
    background: #f3f7f4;
    box-shadow: none;
}

.has-account .topbar-account {
    min-height: 46px;
    transition: background-color .16s ease, color .16s ease;
}

.has-account .topbar-account:hover,
.has-account .topbar-account:focus-visible {
    color: #0a5f39;
    background: #f1f6f2;
}

.has-account .account-initial {
    border-radius: 50%;
    background: #e8f3eb;
}

.page-header {
    position: relative;
    padding-left: 1rem;
}

.page-header::before {
    content: '';
    position: absolute;
    top: .18rem;
    bottom: .2rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f8b4c 0%, #e6bb45 100%);
}

.page-header h1 {
    margin-bottom: .3rem;
    color: #153e2c;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.page-header p {
    max-width: 48rem;
    color: var(--sn-ink-soft);
    font-size: .92rem;
}

:is(.section-card, .table-card, .stat-card, .action-card, .profile-card, .receipt-card) {
    border-color: var(--sn-line);
    background-color: var(--sn-surface);
    box-shadow: 0 10px 30px rgba(22, 68, 44, .05);
}

.section-title {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.section-title h2,
.section-title h3 {
    color: #173e2d;
}

.section-title p {
    color: var(--sn-ink-soft);
    font-size: .86rem;
}

.stat-card {
    min-height: 100%;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.stat-card:hover {
    border-color: #c8d9ce;
    box-shadow: 0 12px 34px rgba(22, 68, 44, .075);
}

.stat-card .icon {
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: .8rem;
    border: 1px solid #d7e7dc;
    border-radius: .85rem;
    color: #087443;
    background: #edf6ef;
    box-shadow: none;
}

.stat-card h3 {
    color: #143e2b;
    font-size: clamp(1.45rem, 3vw, 1.8rem);
}

.stat-card p {
    color: var(--sn-ink-soft);
    font-size: .84rem;
}

.form-control,
.form-select,
.input-group-text {
    border-color: #cbd9d0;
    background-color: #fbfdfb;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: #9eb6a7;
    background-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: #4e9a6d;
    background-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(15, 139, 76, .1);
}

.form-control[type='file'] {
    padding: .42rem;
}

.form-control[type='file']::file-selector-button {
    min-height: 2.1rem;
    margin: -.2rem .7rem -.2rem -.2rem;
    padding: .4rem .7rem;
    border: 0;
    border-radius: .55rem;
    color: #245d40;
    background: #eaf3ec;
    font-weight: 700;
}

.form-text {
    font-size: .77rem;
}

.alert {
    border-width: 1px;
    box-shadow: none !important;
}

.alert-success { border-color: #b9d9c3; color: #205f3c; background: #eaf6ed; }
.alert-info { border-color: #c8dae8; color: #315b76; background: #f0f6fa; }
.alert-warning { border-color: #ead8aa; color: #785819; background: #fff8e7; }
.alert-danger { border-color: #ecc8c6; color: #8e3432; background: #fff0ef; }

.table-card {
    overflow: hidden;
}

.table-card .table-responsive {
    border: 1px solid #e2eae4;
    border-radius: .85rem;
}

.table-card .table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom-color: #dce6df;
    color: #52695c;
    background: #f4f7f5;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
    white-space: nowrap;
}

.table tbody td {
    border-color: #e8eeea;
}

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

.empty-state {
    border-color: #cddfd3;
    border-radius: 1rem;
    background: #f7faf8;
}

.dropdown-menu,
.modal-content {
    border: 1px solid var(--sn-line);
    border-radius: 1rem;
    box-shadow: 0 22px 55px rgba(17, 55, 36, .14);
}

.dropdown-item {
    border-radius: .65rem;
}

.modal-header,
.modal-footer {
    border-color: #e2e9e4;
}

.badge {
    padding: .42em .68em;
    border-radius: 999px;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .has-account:not(.has-sidebar) {
        padding-bottom: calc(94px + env(safe-area-inset-bottom));
    }

    .has-account .topbar-inner {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .has-account .notification-topbar-btn,
    .has-account .topbar-logout {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: .55rem;
    }

    .page-header {
        margin-bottom: 1rem;
        padding-left: .8rem;
    }

    .page-header h1 { font-size: 1.55rem; }
    .page-header p { font-size: .84rem; }

    :is(.section-card, .table-card, .profile-card, .receipt-card) {
        padding: 1rem;
        border-radius: 1rem;
    }

    .stat-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .mobile-bottom-nav {
        inset: auto .65rem calc(.65rem + env(safe-area-inset-bottom));
        gap: .15rem;
        padding: .35rem;
        border: 1px solid rgba(193, 210, 199, .9);
        border-radius: 1.15rem;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(16px) saturate(135%);
        box-shadow: 0 12px 35px rgba(20, 61, 40, .16);
    }

    .mobile-bottom-nav a {
        min-height: 55px;
        border-radius: .85rem;
    }

    .mobile-bottom-nav a.active {
        color: #075f35;
        background: #e5f2e8;
        box-shadow: none;
    }

    .has-account:not(.has-sidebar) .public-footer {
        display: none;
    }

    .contribution-mobile-summary {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-transparency: reduce) {
    .has-account .public-topbar,
    .mobile-bottom-nav {
        background: #fff;
        backdrop-filter: none;
    }
}