:root {
    --bg: #edf2f7;
    --bg-accent-1: rgba(74, 144, 226, 0.13);
    --bg-accent-2: rgba(106, 176, 76, 0.12);
    --panel: #fbfdff;
    --panel-soft: #f4f8fc;
    --surface-soft: #e7edf5;
    --surface-strong: #dbe4ef;
    --text: #1e2430;
    --muted: #6d7684;
    --line: #d7dde7;
    --primary: #0f6db3;
    --danger: #b42318;
    --success-bg: #e8f6eb;
    --success-text: #206335;
    --error-bg: #fdecec;
    --error-text: #9b1c1c;
    --desktop-top-nav-height: 64px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 10% 0%, var(--bg-accent-1), rgba(74, 144, 226, 0) 42%),
        radial-gradient(circle at 90% 8%, var(--bg-accent-2), rgba(106, 176, 76, 0) 40%),
        linear-gradient(180deg, #f7fafc 0%, var(--bg) 45%, #eef3f8 100%);
    background-attachment: fixed;
    color: var(--text);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}

.site-header {
    background: #0d3b66;
    color: #fff;
}

.topbar {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

h1 {
    margin: 0;
    font-size: 1.35rem;
}

.subtitle {
    margin: 0.2rem 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.sidebar-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sidebar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #c7d7e9;
    box-shadow: 0 1px 4px rgba(12, 44, 78, 0.16);
}

.sidebar-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    padding: 0;
}

.sidebar-role {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}


.main-nav {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.main-nav a,
.button-link {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    background: var(--panel);
    color: #0d3b66;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
}

button.button-link {
    border: 1px solid var(--line);
    cursor: pointer;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.main-nav .nav-icon {
    width: 1.15rem;
    text-align: center;
    line-height: 1;
    font-size: 0.95rem;
    opacity: 0.95;
}

.main-nav .nav-label {
    line-height: 1;
}

.main-nav a.active {
    background: #dceefe;
    color: #0a2f52;
    font-weight: 700;
}

.main-nav-dropdown {
    width: 100%;
    display: grid;
    gap: 0.2rem;
}

.main-nav-dropdown-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    border: 1px solid #d0deec;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    background: var(--panel);
    color: #0d3b66;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.main-nav-dropdown-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.main-nav-dropdown-caret {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.main-nav-dropdown.open .main-nav-dropdown-caret {
    transform: rotate(180deg);
}

.main-nav-submenu {
    display: none;
    gap: 0.2rem;
}

.main-nav-dropdown.open .main-nav-submenu {
    display: grid;
}

.main-nav-submenu a {
    margin-left: 1.2rem;
}

.main-nav .whoami {
    font-size: 0.9rem;
    opacity: 0.95;
}

.logout-form {
    margin: 0;
}

.mobile-bottom-nav {
    display: none;
}

.mobile-top-controls {
    display: none;
}

.mobile-page-pill {
    font-size: 0.8rem;
    font-weight: 700;
    color: #294766;
    background: #e9f1fb;
    border: 1px solid #cbd9ea;
    border-radius: 999px;
    padding: 0.18rem 0.56rem;
    max-width: 10.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    border: 1px solid #cad8e8;
    background: #ffffff;
    color: #1b3959;
}

.mobile-menu-toggle i {
    font-size: 1.2rem;
    line-height: 1;
}

.mobile-nav-drawer .offcanvas-header {
    border-bottom: 1px solid #d7e0ec;
}

.mobile-nav-drawer .offcanvas-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.65rem;
}

.mobile-drawer-user {
    border: 1px solid #d7e2ef;
    border-radius: 0.65rem;
    padding: 0.52rem 0.6rem;
    background: #f7fbff;
}

.mobile-drawer-user-name {
    font-weight: 700;
    color: #20334a;
}

.mobile-drawer-user-role {
    font-size: 0.84rem;
    color: #5e6f85;
}

.mobile-drawer-links {
    display: grid;
    gap: 0.38rem;
}

.mobile-drawer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: #1f3f63;
    border: 1px solid #d2deec;
    border-radius: 0.6rem;
    background: #f8fbff;
    padding: 0.48rem 0.58rem;
    font-weight: 600;
}

.mobile-drawer-links a.active {
    background: #0d6fb8;
    border-color: #0d6fb8;
    color: #ffffff;
}

.mobile-drawer-logout {
    margin-top: 0.2rem;
}

.desktop-top-nav {
    display: none;
}

.flash {
    margin: 1rem 0;
    padding: 0.75rem;
    border-radius: 8px;
}

.flash.success {
    background: var(--success-bg);
    color: var(--success-text);
}

.flash.error {
    background: var(--error-bg);
    color: var(--error-text);
}

.panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--panel-soft) 100%);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    box-shadow: 0 3px 12px rgba(12, 35, 64, 0.05);
}

.panel.narrow {
    max-width: 430px;
    margin: 2rem auto;
}

.panel-compact {
    padding: 0.8rem;
}

.compact-form {
    gap: 0.55rem;
}

.compact-form label {
    gap: 0.25rem;
    font-size: 0.88rem;
}

.compact-form input,
.compact-form select,
.compact-form textarea {
    padding: 0.42rem;
}

.compact-form select[multiple] {
    min-height: 9rem;
}

.shared-member-picker-help {
    display: block;
    margin-top: 0.1rem;
}

.page-contributions #sharedMemberPicker {
    display: none;
}

.shared-member-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.15rem 0.15rem 0;
}

.shared-member-mobile-actions label.check {
    margin: 0;
    font-size: 0.84rem;
}

.shared-member-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    column-gap: 0.7rem;
    row-gap: 0.18rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.62rem;
    background: var(--panel);
    max-height: 15.5rem;
    overflow-y: auto;
}

.shared-member-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.05rem;
    padding: 0.25rem 0;
}

.shared-member-checkbox-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.allocation-summary-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    background: var(--panel);
}

.shared-allocation-table th,
.shared-allocation-table td {
    padding: 0.42rem;
    vertical-align: middle;
}

.shared-allocation-table .button-link {
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
}

.sms-compact-grid {
    display: grid;
    gap: 0.6rem;
}

.sms-compact-left,
.sms-compact-right {
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 1100px) {
    .sms-compact-grid {
        grid-template-columns: 1.35fr 1fr;
        align-items: start;
    }
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.panel-head h2 {
    margin: 0;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.9rem;
}

.card .big {
    margin: 0.4rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.welcome-panel h2 {
    margin: 0 0 0.25rem;
}

.welcome-panel .muted {
    margin: 0;
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.overview-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid #2a8a3e;
    border-radius: 10px;
    padding: 0.85rem;
}

.overview-card-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.overview-card-header h3 {
    margin: 0;
    font-size: 1rem;
}

.overview-icon {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: #e3eefc;
    color: #0b3f74;
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1;
}

.overview-total {
    margin: 0.45rem 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.overview-card p {
    margin: 0.2rem 0;
}

.overview-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.overview-card-link:hover,
.overview-card-link:focus-visible {
    border-color: #adc7e3;
    box-shadow: 0 0 0 2px rgba(13, 111, 184, 0.12);
    text-decoration: none;
}

.overview-card-link-hint {
    margin: 0.3rem 0 0;
    font-size: 0.77rem;
    font-weight: 600;
    color: #305b84;
}

.recent-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}

.recent-project-chip-muted {
    background: #eef2f7;
    color: #4d5f77;
    border-color: #d7e0eb;
}

.recent-project-chip-project {
    background: #e9f4ff;
    color: #1d4f7b;
    border-color: #bfd8ef;
}

.recent-project-chip-project:hover,
.recent-project-chip-project:focus-visible {
    background: #dbeeff;
    color: #123d64;
    border-color: #a9caea;
    text-decoration: none;
}

.recent-project-chip-share {
    background: #f2f8ee;
    color: #275c35;
    border-color: #cde3ca;
}

.recent-project-chip-activity {
    background: #fef5eb;
    color: #7b4b1b;
    border-color: #eed8c0;
}

.dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0.9rem;
}

.mini-stat {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.7rem;
    background: var(--panel);
}

.mini-stat h3 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.mini-stat .big {
    margin: 0.35rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.stack {
    display: grid;
    gap: 0.75rem;
}

.grid-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.span-2 {
    grid-column: 1 / -1;
}

.filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.filter-bar label {
    min-width: 180px;
}

label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.92rem;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem;
    background: var(--panel);
}

button {
    border: 0;
    border-radius: 8px;
    padding: 0.52rem 0.8rem;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}

button.danger {
    background: var(--danger);
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

th,
td {
    border: 1px solid var(--line);
    padding: 0.55rem;
    text-align: left;
    vertical-align: top;
}

thead th {
    background: var(--surface-soft);
}

.actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.actions form {
    margin: 0;
}

.muted {
    color: var(--muted);
}

code {
    padding: 0.1rem 0.3rem;
    background: #ecf2f7;
    border-radius: 4px;
}

.month-columns-panel {
    overflow: visible;
    --month-title-offset: 0px;
    --month-year-row-height: 1.7rem;
    --month-header-row-height: 1.55rem;
    --month-right-outstanding-width: 128px;
    --month-right-total-width: 112px;
}

.month-columns-panel .month-columns-title {
    position: static;
    background: var(--panel);
    margin: 0 0 0.75rem;
    padding: 0.2rem 0 0.55rem;
    border-bottom: 1px solid var(--line);
}

.month-columns-panel .month-columns-scroll {
    overflow-x: auto;
}

.month-columns-table .month-current {
    background: #fff4cc;
    font-weight: 700;
}

.month-columns-table thead th {
    position: sticky;
    z-index: 4;
    background: var(--surface-soft);
}

.month-columns-table .year-header-row th {
    top: 0;
    z-index: 6;
    text-align: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.05;
    font-weight: 800;
}

.month-columns-table .month-header-row th {
    top: var(--month-year-row-height);
    z-index: 5;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.05;
    font-weight: 800;
}

.month-columns-table .month-amount-row th {
    top: calc(var(--month-year-row-height) + var(--month-header-row-height));
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    z-index: 4;
    padding-top: 0.15rem;
    padding-bottom: 0.45rem;
    line-height: 1.05;
}

.month-columns-table .month-amount-row th em {
    font-style: italic;
    color: var(--text);
}

.month-columns-table thead .year-band-a {
    background: #d0e8d2;
}

.month-columns-table thead .year-band-b {
    background: #d2e2f5;
}

.month-columns-table thead .year-band-prev {
    background: #e3e7ec;
}

.month-columns-table thead th[rowspan],
.month-columns-table .month-amount-row th {
    border-bottom: 2px solid #9ca9be;
}

.month-columns-table .month-header-row .month-current,
.month-columns-table .month-amount-row .month-current {
    background: #ffe7a3;
}

.month-columns-table .member-col {
    position: sticky;
    left: 0;
    background: var(--panel);
    min-width: 132px;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--line);
    z-index: 5;
}

.month-columns-table thead .member-col {
    background: var(--surface-soft);
    z-index: 7;
}

.month-columns-table .outstanding-col,
.month-columns-table .total-col {
    position: sticky;
    background: var(--panel);
    white-space: nowrap;
    z-index: 5;
    padding-left: 0.22rem;
    padding-right: 0.22rem;
    border-left: 0;
}

.month-columns-table .outstanding-col {
    right: 0;
    min-width: 0;
    width: var(--month-right-outstanding-width);
    min-width: var(--month-right-outstanding-width);
    max-width: var(--month-right-outstanding-width);
    border-left: 1px solid var(--line);
}

.month-columns-table .total-col {
    right: var(--month-right-outstanding-width);
    min-width: 0;
    width: var(--month-right-total-width);
    min-width: var(--month-right-total-width);
    max-width: var(--month-right-total-width);
    border-right: 1px solid var(--line);
}

.month-columns-table thead .outstanding-col,
.month-columns-table thead .total-col {
    background: var(--surface-soft);
    z-index: 7;
    text-align: center;
}

.month-columns-table tbody tr:first-child td,
.month-columns-table tbody tr:first-child th {
    padding-top: 0.65rem;
}

.month-columns-table tbody .total-col,
.month-columns-table tbody .outstanding-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.month-columns-table tbody tr:not(:last-child):nth-child(odd) td:not(.month-current),
.month-columns-table tbody tr:not(:last-child):nth-child(odd) th:not(.month-current) {
    background: #f1f6fb;
}

.month-columns-table tbody tr:not(:last-child):nth-child(even) td:not(.month-current),
.month-columns-table tbody tr:not(:last-child):nth-child(even) th:not(.month-current) {
    background: #dfeaf7;
}

@media (max-width: 768px) {
    .month-columns-panel {
        --month-right-outstanding-width: 116px;
        --month-right-total-width: 102px;
    }

    .month-columns-table .member-col {
        min-width: 108px;
        max-width: 132px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        line-height: 1.2;
    }

    .month-columns-table tbody .member-col {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

.amount-credit {
    color: #1f7a38;
    font-weight: 700;
}

.amount-outstanding {
    color: #b42318;
    font-weight: 700;
}

.schedule-list {
    max-height: 8.5rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.35rem 0.45rem;
    background: #f3f8fd;
    font-size: 0.86rem;
    line-height: 1.35;
}

.project-kpis .card {
    min-height: 7.25rem;
}

.project-toolbar label {
    min-width: 260px;
}

.projects-table .project-name-cell {
    font-weight: 700;
    white-space: nowrap;
}

.projects-table .project-description-cell {
    min-width: 180px;
    max-width: 300px;
    white-space: normal;
}

.projects-table .project-action-cell {
    min-width: 180px;
    white-space: nowrap;
}

.project-action-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.projects-table .project-actions-cell {
    min-width: 0;
}

.project-detail-row[hidden] {
    display: none;
}

.project-detail-row > td {
    background: #f7fbff;
    padding: 0.6rem 0.65rem;
}

.project-detail-card {
    border: 1px solid #d6e0ea;
    border-radius: 10px;
    padding: 0.7rem;
    background: #ffffff;
}

.project-detail-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 1fr;
}

.project-detail-section h4 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}

.project-detail-section h5 {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
}

.project-detail-list-wrap + .project-detail-list-wrap {
    margin-top: 0.5rem;
}

@media (min-width: 1100px) {
    .project-detail-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
    }
}

.mode-chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.mode-monthly {
    background: #e7f3ff;
    color: #0f4c81;
}

.mode-deadline {
    background: #f0f2f7;
    color: #334155;
}

.compact-details summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.subnav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--line);
}

.subnav-tab {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    background: var(--surface-soft);
    color: #1e2f45;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.1;
}

.subnav-tab:hover {
    background: var(--surface-strong);
}

.subnav-tab.is-active {
    background: #0f6db3;
    border-color: #0f6db3;
    color: #ffffff;
}

.subnav-tab.is-disabled,
.subnav-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contribution-sticky-subnav {
    background: transparent;
}

@media (min-width: 900px) {
    .dashboard-overview-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .dashboard-mini-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

@media (max-width: 767px) {
    body.has-mobile-nav main.container {
        padding-bottom: 5.25rem;
    }

    .shared-member-checkboxes {
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
        column-gap: 0.55rem;
        row-gap: 0.18rem;
        max-height: 18rem;
    }

    body.has-mobile-nav .main-nav-top .nav-mobile-bottom {
        display: none;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        display: flex;
        gap: 0.45rem;
        justify-content: space-around;
        align-items: center;
        padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
        background: var(--panel);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 16px rgba(15, 34, 66, 0.08);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav .mobile-more-btn {
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #0d3b66;
        background: var(--surface-soft);
        border-radius: 8px;
        padding: 0.48rem 0.4rem;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .mobile-bottom-nav .mobile-more-btn {
        font: inherit;
        border: 1px solid #d1dbe7;
        cursor: pointer;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav .mobile-more-btn.active {
        background: var(--surface-strong);
        color: #082a49;
    }
}

@media (min-width: 1200px) {
    .shared-member-checkboxes {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

@media (min-width: 1200px) {
    :root {
        --desktop-sidebar-width: clamp(210px, 14vw, 240px);
    }

    body.has-sidebar {
        padding-left: var(--desktop-sidebar-width);
    }

    body.has-sidebar .site-header {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--desktop-sidebar-width);
        z-index: 20;
        overflow-y: auto;
        background: #3cae47;
        border-right: 1px solid #2c8f35;
    }

    body.has-sidebar .site-header .container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    body.has-sidebar .topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
    }

    body.has-sidebar .header-identity {
        background: var(--panel);
        padding: 1rem 0.95rem;
        border-bottom: 1px solid #dce3ec;
    }

    body.has-sidebar .sidebar-identity {
        gap: 0.6rem;
    }

    body.has-sidebar .sidebar-logo {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #c7d7e9;
    }

    body.has-sidebar .sidebar-role {
        color: #1f2d3d;
        font-size: 0.9rem;
    }

    body.has-sidebar .main-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.75rem 0.6rem 1rem;
    }

    body.has-sidebar .main-nav a {
        width: 100%;
        text-align: left;
        background: transparent;
        color: #eaffec;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 0.6rem 0.7rem;
        font-weight: 600;
    }

    body.has-sidebar .main-nav .main-nav-dropdown-toggle {
        width: 100%;
        text-align: left;
        background: transparent;
        color: #eaffec;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 0.6rem 0.7rem;
        font-size: 0.88rem;
        font-weight: 600;
    }

    body.has-sidebar .main-nav .nav-icon {
        width: 1.25rem;
        font-size: 1rem;
    }

    body.has-sidebar .main-nav .main-nav-dropdown-toggle:hover,
    body.has-sidebar .main-nav a:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
    }

    body.has-sidebar .main-nav .main-nav-dropdown.active > .main-nav-dropdown-toggle {
        background: #0a7f18;
        color: #ffffff;
        border-color: #0a7f18;
    }

    body.has-sidebar .main-nav .main-nav-submenu a {
        margin-left: 1.05rem;
        border-radius: 8px;
        padding: 0.48rem 0.58rem;
        background: rgba(8, 88, 22, 0.38);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    body.has-sidebar .main-nav .main-nav-submenu a:hover {
        background: rgba(8, 88, 22, 0.52);
        border-color: rgba(255, 255, 255, 0.2);
    }

    body.has-sidebar .main-nav .main-nav-submenu a.active {
        background: #0b791b;
        border-color: #0b791b;
        color: #ffffff;
    }

    body.has-sidebar .main-nav a.active {
        background: #0a7f18;
        color: #ffffff;
        border-color: #0a7f18;
    }

    body.has-sidebar .mobile-account-controls {
        display: none;
    }

    body.has-sidebar .desktop-top-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        position: fixed;
        top: 0;
        left: var(--desktop-sidebar-width);
        right: 0;
        min-height: var(--desktop-top-nav-height);
        z-index: 25;
        background: var(--surface-soft);
        border: 0;
        border-bottom: 1px solid #d4dae3;
        border-radius: 0;
        padding: 0.75rem 1.25rem;
        margin: 0;
    }

    body.has-sidebar .desktop-top-brand {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1e5f2a;
        line-height: 1.2;
    }

    body.has-sidebar .desktop-top-account {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-left: auto;
    }

    body.has-sidebar .desktop-logout-form {
        margin: 0;
    }

    body.has-sidebar .logout-form button {
        width: auto;
        background: var(--panel);
        color: #1f2d3d;
        border: 1px solid #d4dae3;
    }

    body.has-sidebar main.container {
        max-width: none;
        margin: 0;
        padding: 5rem 1.25rem 1rem;
    }

    body.has-sidebar .contribution-sticky-subnav {
        position: sticky;
        top: calc(var(--desktop-top-nav-height) + 0.2rem);
        z-index: 24;
        margin-left: -0.8rem;
        margin-right: -0.8rem;
        padding: 0.55rem 0.8rem 0.65rem;
        background: #f2f6fb;
        border-top: 1px solid #d4dae3;
        border-bottom: 1px solid #cdd5df;
        box-shadow: 0 3px 10px rgba(17, 40, 73, 0.06);
    }
}

/* Bootstrap-driven compact UI refresh */
:root {
    --bg: #eef4f9;
    --panel: #ffffff;
    --panel-soft: #f8fbff;
    --surface-soft: #e8eef6;
    --surface-strong: #dce7f3;
    --line: #d4dde8;
    --text: #1f2b3a;
    --muted: #657287;
    --primary: #0d6fb8;
}

body.app-shell {
    font-family: "Poppins", "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 0% 0%, rgba(44, 130, 201, 0.08), transparent 38%),
        radial-gradient(circle at 95% 10%, rgba(52, 176, 101, 0.09), transparent 35%),
        linear-gradient(180deg, #f7fbff 0%, var(--bg) 45%, #edf3f9 100%);
}

main.container {
    max-width: min(1320px, 100%);
}

.site-header {
    box-shadow: 0 2px 10px rgba(18, 38, 63, 0.08);
}

.panel {
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, var(--panel-soft) 100%);
    box-shadow: 0 4px 14px rgba(19, 41, 66, 0.05);
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.85rem;
}

.panel h2 {
    margin-bottom: 0.7rem;
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.welcome-panel h2 {
    font-size: 1.62rem;
}

.muted {
    color: var(--muted);
}

label {
    font-weight: 600;
    color: #2b3a50;
}

input,
select,
textarea {
    border-color: #cdd8e6;
    background-color: #ffffff;
    border-radius: 0.55rem;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(13, 111, 184, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(13, 111, 184, 0.12);
    outline: none;
}

button,
.button-link {
    border-radius: 0.55rem;
    font-weight: 600;
}

table:not(.month-columns-table):not(.shared-allocation-table) {
    margin-bottom: 0;
}

table:not(.month-columns-table):not(.shared-allocation-table) thead th {
    background: #edf3fa;
    color: #1f3248;
    border-bottom-width: 1px;
    white-space: nowrap;
}

table:not(.month-columns-table):not(.shared-allocation-table) tbody td,
table:not(.month-columns-table):not(.shared-allocation-table) tbody th {
    font-size: 0.92rem;
}

.table-responsive {
    border: 1px solid #d6e0ea;
    border-radius: 0.7rem;
    background: #ffffff;
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* Compact layout for data-heavy pages */
.page-dashboard_details .panel,
.page-projects .panel,
.page-contributions .panel,
.page-member_contribution_view .panel,
.page-statement .panel,
.page-expenditure .panel {
    padding: 0.62rem 0.72rem;
    margin-bottom: 0.62rem;
}

.page-dashboard_details .panel h2,
.page-projects .panel h2,
.page-contributions .panel h2,
.page-member_contribution_view .panel h2,
.page-statement .panel h2,
.page-expenditure .panel h2 {
    font-size: 1.18rem;
    margin-bottom: 0.45rem;
}

.page-dashboard_details .panel h3,
.page-projects .panel h3,
.page-contributions .panel h3,
.page-member_contribution_view .panel h3,
.page-statement .panel h3,
.page-expenditure .panel h3 {
    font-size: 1rem;
    margin: 0.2rem 0 0.42rem;
}

.page-dashboard_details label,
.page-projects label,
.page-contributions label,
.page-member_contribution_view label,
.page-statement label,
.page-expenditure label {
    font-size: 0.82rem;
    gap: 0.2rem;
}

.page-dashboard_details .grid-form,
.page-projects .grid-form,
.page-contributions .grid-form,
.page-member_contribution_view .grid-form,
.page-statement .grid-form,
.page-expenditure .grid-form {
    gap: 0.42rem;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.page-dashboard_details .filter-bar,
.page-projects .filter-bar,
.page-contributions .filter-bar,
.page-member_contribution_view .filter-bar,
.page-statement .filter-bar,
.page-expenditure .filter-bar {
    gap: 0.46rem;
    margin-bottom: 0.52rem;
}

.page-dashboard_details .filter-bar label,
.page-projects .filter-bar label,
.page-contributions .filter-bar label,
.page-member_contribution_view .filter-bar label,
.page-statement .filter-bar label,
.page-expenditure .filter-bar label {
    min-width: 150px;
}

.page-dashboard_details input,
.page-dashboard_details select,
.page-dashboard_details textarea,
.page-projects input,
.page-projects select,
.page-projects textarea,
.page-contributions input,
.page-contributions select,
.page-contributions textarea,
.page-member_contribution_view input,
.page-member_contribution_view select,
.page-member_contribution_view textarea,
.page-statement input,
.page-statement select,
.page-statement textarea,
.page-expenditure input,
.page-expenditure select,
.page-expenditure textarea {
    padding: 0.34rem 0.46rem;
    font-size: 0.84rem;
}

.page-dashboard_details .table-responsive,
.page-projects .table-responsive,
.page-contributions .table-responsive,
.page-member_contribution_view .table-responsive,
.page-statement .table-responsive,
.page-expenditure .table-responsive {
    border-radius: 0.56rem;
}

.page-dashboard_details table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-dashboard_details table:not(.month-columns-table):not(.shared-allocation-table) td,
.page-projects table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-projects table:not(.month-columns-table):not(.shared-allocation-table) td,
.page-contributions table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-contributions table:not(.month-columns-table):not(.shared-allocation-table) td,
.page-member_contribution_view table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-member_contribution_view table:not(.month-columns-table):not(.shared-allocation-table) td,
.page-statement table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-statement table:not(.month-columns-table):not(.shared-allocation-table) td,
.page-expenditure table:not(.month-columns-table):not(.shared-allocation-table) th,
.page-expenditure table:not(.month-columns-table):not(.shared-allocation-table) td {
    padding: 0.32rem 0.4rem;
    font-size: 0.82rem;
}

.page-dashboard_details .muted,
.page-projects .muted,
.page-contributions .muted,
.page-member_contribution_view .muted,
.page-statement .muted,
.page-expenditure .muted {
    font-size: 0.8rem;
    line-height: 1.3;
}

.page-member_contribution_view .member-month-columns-panel {
    --month-year-row-height: 1.45rem;
    --month-header-row-height: 1.35rem;
    --month-right-outstanding-width: 106px;
    --month-right-total-width: 96px;
}

.page-member_contribution_view .month-columns-table th,
.page-member_contribution_view .month-columns-table td {
    padding: 0.3rem 0.34rem;
    font-size: 0.78rem;
}

.page-member_contribution_view .month-columns-table .member-col {
    min-width: 120px;
}

.page-member_contribution_view .month-columns-table .total-col,
.page-member_contribution_view .month-columns-table .outstanding-col {
    min-width: 100px;
}

@media (max-width: 992px) {
    .page-dashboard_details .panel,
    .page-projects .panel,
    .page-contributions .panel,
    .page-member_contribution_view .panel,
    .page-statement .panel,
    .page-expenditure .panel {
        padding: 0.56rem 0.6rem;
        margin-bottom: 0.56rem;
    }

    .page-dashboard_details .panel h2,
    .page-projects .panel h2,
    .page-contributions .panel h2,
    .page-member_contribution_view .panel h2,
    .page-statement .panel h2,
    .page-expenditure .panel h2 {
        font-size: 1.08rem;
        margin-bottom: 0.38rem;
    }

    .page-dashboard_details .grid-form,
    .page-projects .grid-form,
    .page-contributions .grid-form,
    .page-member_contribution_view .grid-form,
    .page-statement .grid-form,
    .page-expenditure .grid-form {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    }

    .page-dashboard_details table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-dashboard_details table:not(.month-columns-table):not(.shared-allocation-table) td,
    .page-projects table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-projects table:not(.month-columns-table):not(.shared-allocation-table) td,
    .page-contributions table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-contributions table:not(.month-columns-table):not(.shared-allocation-table) td,
    .page-member_contribution_view table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-member_contribution_view table:not(.month-columns-table):not(.shared-allocation-table) td,
    .page-statement table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-statement table:not(.month-columns-table):not(.shared-allocation-table) td,
    .page-expenditure table:not(.month-columns-table):not(.shared-allocation-table) th,
    .page-expenditure table:not(.month-columns-table):not(.shared-allocation-table) td {
        padding: 0.28rem 0.34rem;
        font-size: 0.78rem;
    }

    .page-member_contribution_view .month-columns-table .member-col {
        min-width: 100px;
    }

    .page-member_contribution_view .month-columns-table .total-col,
    .page-member_contribution_view .month-columns-table .outstanding-col {
        min-width: 88px;
    }
}

.subnav-tabs {
    gap: 0.4rem;
    padding-bottom: 0.5rem;
}

.subnav-tab {
    border-radius: 999px;
    font-size: 0.84rem;
    padding: 0.4rem 0.82rem;
}

.cards {
    gap: 0.7rem;
}

.card,
.overview-card,
.mini-card {
    border-radius: 12px;
    box-shadow: none;
}

.mobile-account-controls .user-pill,
.desktop-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #d5e0eb;
    background: #ffffff;
    border-radius: 999px;
    padding: 0.32rem 0.62rem;
    font-size: 0.82rem;
    color: #1f344a;
}

.user-profile-link {
    text-decoration: none;
}

.user-pill-avatar {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    border: 1px solid #b9cedf;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    background: #ffffff;
    flex: 0 0 auto;
}

.user-profile-link:hover,
.user-profile-link:focus-visible {
    text-decoration: none;
    border-color: #9cc6ab;
    box-shadow: 0 0 0 2px rgba(46, 143, 78, 0.15);
}

.desktop-top-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    min-width: 0;
}

.desktop-top-brand-logo {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: cover;
    object-position: center 42%;
    background: #ffffff;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #c6d7e8;
    flex: 0 0 auto;
}

.desktop-top-group {
    font-size: 1.02rem;
    font-weight: 700;
    color: #1f5f2a;
}

.desktop-top-page {
    font-size: 0.9rem;
    color: #4e6078;
    background: #e9eff7;
    border: 1px solid #d4deea;
    border-radius: 999px;
    padding: 0.18rem 0.58rem;
    max-width: 24rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktop-top-links {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

.desktop-top-links a {
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #234261;
    background: #edf3f9;
}

.desktop-top-links a.active {
    background: #0d6fb8;
    border-color: #0d6fb8;
    color: #ffffff;
}

.sidebar-identity-meta {
    display: grid;
    line-height: 1.08;
    gap: 0.15rem;
}

.sidebar-org {
    font-size: 0.74rem;
    color: #5d6d82;
    letter-spacing: 0.01em;
}

.mobile-bottom-nav a,
.mobile-bottom-nav .mobile-more-btn {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav a i,
.mobile-bottom-nav .mobile-more-btn i {
    font-size: 1rem;
    line-height: 1;
}

.mobile-bottom-nav a span,
.mobile-bottom-nav .mobile-more-btn span {
    line-height: 1;
}

@media (max-width: 1199px) {
    body.has-mobile-nav main.container {
        padding-bottom: 5.45rem;
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 30;
        background: #f7fbff;
        border-bottom: 1px solid #d2dbe6;
    }

    .site-header .container {
        max-width: none;
        padding: 0.45rem 0.65rem;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
    }

    .header-identity {
        width: auto;
        min-width: 0;
    }

    .sidebar-identity {
        gap: 0.5rem;
    }

    .sidebar-logo {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .sidebar-role {
        font-size: 0.98rem;
    }

    .main-nav.main-nav-top {
        display: none;
    }

    .mobile-top-controls {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        justify-content: flex-end;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 26;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.4rem;
        align-items: center;
        padding: 0.5rem 0.55rem calc(0.5rem + env(safe-area-inset-bottom));
        background: var(--panel);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 16px rgba(15, 34, 66, 0.08);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav .mobile-more-btn {
        min-width: 0;
        text-align: center;
        text-decoration: none;
        color: #0d3b66;
        background: var(--surface-soft);
        border-radius: 8px;
        border: 1px solid #d1dbe7;
        padding: 0.46rem 0.2rem;
        font-size: 0.76rem;
        font-weight: 600;
    }

    .mobile-bottom-nav .mobile-more-btn {
        font: inherit;
        cursor: pointer;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav .mobile-more-btn.active {
        background: var(--surface-strong);
        color: #082a49;
    }

    .mobile-bottom-nav a i,
    .mobile-bottom-nav .mobile-more-btn i {
        font-size: 0.95rem;
    }

    .desktop-top-nav {
        display: none;
    }

    main.container {
        padding: 0.75rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --desktop-sidebar-width: 230px;
    }

    body.has-sidebar .site-header {
        background: linear-gradient(180deg, #3aaf4d 0%, #36a649 50%, #2f9641 100%);
        border-right: 1px solid #278838;
    }

    body.has-sidebar .header-identity {
        background: #f7fbff;
        border-bottom: 1px solid #d4dce8;
    }

    body.has-sidebar .main-nav {
        padding: 0.6rem 0.52rem 0.8rem;
        gap: 0.22rem;
    }

    body.has-sidebar .main-nav a {
        font-size: 0.88rem;
        border-radius: 10px;
        padding: 0.56rem 0.62rem;
    }

    body.has-sidebar .main-nav .main-nav-dropdown-toggle {
        font-size: 0.88rem;
        border-radius: 10px;
        padding: 0.56rem 0.62rem;
    }

    body.has-sidebar .main-nav a.active {
        background: #0b791b;
        border-color: #0b791b;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
    }

    body.has-sidebar .main-nav .main-nav-dropdown.active > .main-nav-dropdown-toggle {
        background: #0b791b;
        border-color: #0b791b;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
    }

    body.has-sidebar .desktop-top-nav {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) auto auto;
        align-items: center;
        box-shadow: 0 2px 10px rgba(17, 39, 64, 0.08);
        padding-top: 0.58rem;
        padding-bottom: 0.58rem;
    }

    .mobile-top-controls,
    .mobile-nav-drawer {
        display: none !important;
    }

    body.has-sidebar main.container {
        padding-top: 4.55rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0.8rem;
    }
}

@media (max-width: 1450px) {
    body.has-sidebar .desktop-top-links {
        display: none;
    }
}

.page-section-subnav {
    position: sticky;
    top: 3.55rem;
    z-index: 24;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid #2d8b3f;
    background: linear-gradient(180deg, #35a84a 0%, #2f9842 100%);
    box-shadow: 0 4px 12px rgba(22, 62, 31, 0.18);
}

.page-section-subnav-link {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.28rem 0.72rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
}

.page-section-subnav-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.page-section-subnav-link.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #1f6f2f;
}

@media (min-width: 1200px) {
    body.has-sidebar .page-section-subnav {
        top: calc(var(--desktop-top-nav-height) + 0.28rem);
        margin-top: 0.1rem;
    }
}

@media (max-width: 991px) {
    .page-section-subnav {
        top: 3.15rem;
        gap: 0.34rem;
        padding: 0.42rem 0.48rem;
        border-radius: 0.62rem;
    }

    .page-section-subnav-link {
        padding: 0.25rem 0.6rem;
        font-size: 0.76rem;
    }
}

/* Keep contribution sub-navigation pinned under the active top bar */
#recordContributionPanel {
    overflow: visible;
}

.contribution-subnav-placeholder {
    height: 0;
}

.contribution-sticky-subnav {
    position: sticky;
    top: var(--contrib-subnav-top, 0.55rem);
    z-index: 24;
    margin-left: -0.8rem;
    margin-right: -0.8rem;
    padding: 0.55rem 0.8rem 0.65rem;
    background: #f2f6fb;
    border-top: 1px solid #d4dae3;
    border-bottom: 1px solid #cdd5df;
    box-shadow: 0 3px 10px rgba(17, 40, 73, 0.06);
}

.contribution-sticky-subnav.is-pinned {
    position: fixed;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0.6rem;
    backdrop-filter: saturate(145%) blur(5px);
}

/* Page-by-page compact hierarchy refinements */
.page-login {
    background:
        radial-gradient(circle at 8% 10%, rgba(44, 130, 201, 0.18), transparent 42%),
        radial-gradient(circle at 92% 8%, rgba(58, 174, 77, 0.14), transparent 40%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 48%, #e8f0f8 100%);
}

.page-login .site-header {
    background: #ffffff;
    color: #1e4e74;
    border-bottom: 1px solid #d7e1ec;
}

.page-login .topbar {
    min-height: 68px;
}

.page-login .main-nav {
    display: none;
}

.page-login .header-identity h1 {
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    color: #1f66d0;
    letter-spacing: 0.01em;
}

.page-login .header-identity .subtitle {
    color: #5b6f85;
}

.page-login main.container {
    max-width: min(1440px, 100%);
    padding-top: 0.35rem;
}

.page-login .auth-shell {
    padding: 0.05rem 0 0.58rem;
}

.page-login .auth-card {
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(360px, 1fr);
    border: 1px solid #d3deea;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(18, 39, 66, 0.1);
    min-height: 420px;
    max-width: 1080px;
    margin: 0 auto;
}

.page-login .auth-showcase {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #0f5aab 0%, #1b69b5 52%, #3285ce 100%);
    color: #ffffff;
    padding: clamp(0.9rem, 1.8vw, 1.35rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
}

.page-login .auth-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 10% 95%, rgba(255, 255, 255, 0.14), transparent 36%);
    pointer-events: none;
}

.page-login .auth-showcase-brand,
.page-login .auth-showcase h2,
.page-login .auth-description,
.page-login .auth-feature-list,
.page-login .auth-chip-list {
    position: relative;
    z-index: 1;
}

.page-login .auth-showcase-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.page-login .auth-logo-wrap {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.74);
    padding: 5px;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
}

.page-login .auth-logo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.page-login .auth-brand-copy {
    min-width: 0;
}

.page-login .auth-kicker {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.page-login .auth-tagline {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
}

.page-login .auth-showcase h2 {
    margin: 0.15rem 0 0;
    font-size: clamp(1.4rem, 2.4vw, 1.95rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.page-login .auth-description {
    margin: 0;
    max-width: 26rem;
    font-size: 0.88rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.96);
}

.page-login .auth-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.22rem;
    max-width: 28rem;
}

.page-login .auth-feature-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.94);
}

.page-login .auth-feature-list li::before {
    content: "\F26A";
    font-family: "bootstrap-icons";
    line-height: 1;
    font-size: 0.92rem;
    color: #e4ffd8;
}

.page-login .auth-chip-list {
    margin-top: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-login .auth-chip {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 0.25rem 0.68rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.page-login .auth-form-panel {
    padding: clamp(0.76rem, 1.6vw, 1rem);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-login .auth-form-panel h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.1vw, 1.8rem);
    line-height: 1.05;
    font-weight: 600;
}

.page-login .auth-form-subtitle {
    margin: 0.15rem 0 0.45rem;
    font-size: 0.83rem;
}

.page-login .auth-form {
    gap: 0.36rem;
}

.page-login .auth-form label {
    gap: 0.22rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #203149;
}

.page-login .auth-input {
    height: 2.35rem;
    border-radius: 0.62rem;
    border: 1px solid #a6c4dc;
    padding: 0.4rem 0.62rem;
    font-size: 0.94rem;
}

.page-login .auth-input:focus {
    border-color: #0f6db3;
    box-shadow: 0 0 0 0.2rem rgba(15, 109, 179, 0.14);
}

.page-login .auth-password-wrap {
    position: relative;
}

.page-login .auth-password-wrap .auth-input {
    padding-right: 2.45rem;
}

.page-login .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.5rem;
    border-color: #c1d4e6;
    color: #355373;
    background: #ffffff;
}

.page-login .auth-password-toggle:hover {
    background: #edf5fe;
    border-color: #9eb8d0;
}

.page-login .auth-form-actions {
    margin-top: 0.1rem;
}

.page-login .auth-submit-btn {
    min-width: 132px;
    height: 2.2rem;
    border-radius: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.page-login .auth-help-line {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
}

@media (max-width: 1199px) {
    .page-login .auth-card {
        grid-template-columns: minmax(340px, 1.15fr) minmax(320px, 1fr);
        min-height: 0;
    }

    .page-login .auth-logo-wrap {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 991px) {
    .page-login .auth-card {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .page-login .auth-showcase {
        min-height: 128px;
        padding: 0.62rem 0.68rem 0.62rem;
        gap: 0.3rem;
    }

    .page-login .auth-showcase-brand {
        gap: 0.52rem;
    }

    .page-login .auth-logo-wrap {
        width: 56px;
        height: 56px;
        padding: 4px;
    }

    .page-login .auth-kicker {
        font-size: 0.78rem;
    }

    .page-login .auth-tagline {
        display: none;
    }

    .page-login .auth-showcase h2 {
        display: none;
    }

    .page-login .auth-description {
        display: none;
    }

    .page-login .auth-feature-list {
        display: none;
    }

    .page-login .auth-feature-list li {
        font-size: 0.89rem;
    }

    .page-login .auth-form-panel {
        padding: 0.72rem;
    }

    .page-login .auth-chip-list {
        display: none;
    }

    .page-login .auth-help-line {
        display: none;
    }

    .page-login .auth-submit-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    .page-login .topbar {
        min-height: 56px;
    }

    .page-login .header-identity h1 {
        font-size: 1.12rem;
    }

    .page-login .header-identity .subtitle {
        display: none;
    }

    .page-login .auth-shell {
        padding: 0.02rem 0 0.42rem;
    }

    .page-login .auth-showcase {
        min-height: 88px;
        padding: 0.46rem 0.56rem;
    }

    .page-login .auth-kicker {
        font-size: 0.72rem;
    }

    .page-login .auth-form-panel {
        padding: 0.6rem;
    }

    .page-login .auth-form-panel h2 {
        font-size: 1.28rem;
    }

    .page-login .auth-form-subtitle {
        margin-bottom: 0.36rem;
        font-size: 0.78rem;
    }

    .page-login .auth-form label {
        font-size: 0.84rem;
    }

    .page-login .auth-input {
        height: 2.2rem;
    }
}

.page-dashboard .dashboard-hero-panel {
    background: linear-gradient(180deg, #fdfefe 0%, #f1f7ff 100%);
    border-left: 4px solid #2e9f4f;
}

.page-dashboard .panel {
    padding: 0.72rem 0.78rem;
    margin-bottom: 0.72rem;
}

.page-dashboard .panel h2 {
    font-size: clamp(1.18rem, 1.7vw, 1.6rem);
    margin-bottom: 0.48rem;
}

.page-dashboard .dashboard-personal-panel,
.page-dashboard .dashboard-group-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.page-profile .profile-panel,
.page-profile .profile-account-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
    border: 1px solid #d3e5d8;
    box-shadow: 0 8px 20px rgba(24, 73, 42, 0.08);
}

.page-profile .profile-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.page-profile .profile-avatar-wrap {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 1px #8fcca2,
        0 8px 20px rgba(24, 92, 49, 0.18);
    background: #ffffff;
}

.page-profile .profile-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

.page-profile .profile-header-copy h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.page-profile .profile-header-copy .muted {
    margin: 0.16rem 0 0;
}

.page-profile .profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.38rem;
}

.page-profile .profile-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border: 1px solid #cfe0d6;
    border-radius: 999px;
    background: #f7fcf9;
    color: #2b4b3a;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
}

.page-profile .profile-upload-form {
    display: grid;
    gap: 0.5rem;
}

.page-profile .profile-upload-form .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.page-profile .profile-upload-form .btn {
    border-radius: 10px;
    font-weight: 600;
}

.page-profile .profile-remove-form {
    margin-top: 0.42rem;
}

.page-profile .profile-account-panel h2 {
    margin: 0 0 0.5rem;
}

.page-profile .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}

.page-profile .profile-stat-card {
    border: 1px solid #d5e6db;
    border-radius: 11px;
    background: #ffffff;
    padding: 0.58rem 0.62rem;
}

.page-profile .profile-stat-label {
    margin: 0;
    color: #557060;
    font-size: 0.8rem;
    font-weight: 600;
}

.page-profile .profile-stat-value {
    margin: 0.16rem 0 0;
    color: #163425;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 767px) {
    .page-profile .profile-header {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        text-align: center;
    }

    .page-profile .profile-avatar-wrap {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .page-profile .profile-meta-row {
        justify-content: center;
    }

    .page-profile .profile-upload-form .actions .btn {
        flex: 1;
        min-width: 0;
    }
}

.page-dashboard .dashboard-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.55rem;
}

.page-dashboard .overview-card {
    border: 1px solid #d8e2ee;
    border-left: 4px solid #2f9a47;
    border-radius: 12px;
    padding: 0.62rem;
}

.page-dashboard .overview-card h3 {
    font-size: 0.99rem;
    margin: 0;
}

.page-dashboard .overview-total {
    font-size: 1.35rem;
    margin: 0.25rem 0 0.1rem;
}

.page-dashboard .overview-card p {
    margin: 0.14rem 0;
}

.page-dashboard .dashboard-mini-grid {
    gap: 0.56rem;
    margin: 0.58rem 0 0.74rem;
}

.page-dashboard .mini-stat {
    border: 1px solid #d8e2ee;
    border-radius: 12px;
    padding: 0.62rem 0.72rem;
    background: #ffffff;
}

.page-dashboard .mini-stat h3 {
    font-size: 0.92rem;
    margin: 0;
}

.page-dashboard .mini-stat .big {
    font-size: 1.2rem;
    margin: 0.3rem 0 0;
}

@media (max-width: 767px) {
    .page-dashboard .dashboard-personal-panel .dashboard-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.46rem;
    }

    .page-dashboard .dashboard-personal-panel .overview-card {
        padding: 0.52rem;
    }

    .page-dashboard .dashboard-personal-panel .overview-card h3 {
        font-size: 0.86rem;
    }

    .page-dashboard .dashboard-personal-panel .overview-total {
        font-size: 1.08rem;
        margin: 0.2rem 0 0.08rem;
    }

    .page-dashboard .dashboard-personal-panel .overview-card p {
        font-size: 0.77rem;
        line-height: 1.22;
    }

    .page-dashboard .dashboard-personal-panel .overview-card-link-hint {
        font-size: 0.72rem;
        margin-top: 0.2rem;
    }
}

.page-users .panel {
    padding: 0.62rem 0.72rem;
    margin-bottom: 0.6rem;
}

.page-users .panel h2 {
    margin-bottom: 0.5rem;
    font-size: 1.18rem;
}

.page-users h3 {
    margin: 0.15rem 0 0.42rem;
    font-size: 1.01rem;
}

.page-users .panel-head p {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
}

.page-users label {
    font-size: 0.82rem;
    gap: 0.22rem;
}

.page-users .grid-form {
    gap: 0.42rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.page-users .stack {
    gap: 0.46rem;
}

.page-users .users-table th,
.page-users .users-table td {
    padding: 0.36rem 0.42rem;
    font-size: 0.84rem;
    vertical-align: middle;
}

.page-users .users-members-table td:first-child {
    white-space: normal;
}

.page-users .users-members-table input[type="text"] {
    width: 100%;
    min-width: 120px;
    padding: 0.28rem 0.4rem;
    font-size: 0.82rem;
}

.page-users .users-members-table input[type="text"][readonly] {
    background: #eef3f7;
    color: #384655;
    cursor: default;
}

.page-users .users-members-table td:last-child {
    white-space: nowrap;
}

.page-users .users-members-table td:last-child .inline-form {
    display: inline-flex;
    margin-right: 0.28rem;
}

.page-users .users-members-table .users-inline-edit-btn {
    min-width: 56px;
}

.page-users .users-members-table .users-manage-link {
    padding: 0.24rem 0.48rem;
    border-radius: 8px;
    font-size: 0.8rem;
}

.page-users .users-manage-head h3 {
    margin-bottom: 0.2rem;
}

.page-users .users-manage-form {
    margin-bottom: 0.48rem;
}

.page-users .users-reset-form {
    margin: 0.35rem 0 0;
    gap: 0.35rem;
}

.page-users .users-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: start;
}

.page-users .users-manage-card {
    border: 1px solid #d7e2ec;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.5rem 0.56rem;
}

.page-users .users-project-exit-form .users-project-exit-inputs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.page-users hr {
    margin: 0.55rem 0;
    border-color: #d5e0eb;
}

.page-users .user-exit-settings {
    min-width: 180px;
    gap: 0.3rem;
}

.page-users .user-exit-settings label {
    font-size: 0.8rem;
}

.page-users .user-exit-percents {
    gap: 0.35rem;
    align-items: end;
    flex-wrap: wrap;
}

.page-users .user-exit-percents label {
    min-width: 80px;
}

.page-users .user-exit-settings .muted {
    font-size: 0.72rem;
}

@media (max-width: 1180px) {
    .page-users .users-manage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .page-users .panel {
        padding: 0.56rem 0.58rem;
    }

    .page-users .panel h2 {
        font-size: 1.08rem;
        margin-bottom: 0.4rem;
    }

    .page-users .users-table th,
    .page-users .users-table td {
        padding: 0.32rem 0.34rem;
        font-size: 0.8rem;
    }

    .page-users .users-members-table th:nth-child(6),
    .page-users .users-members-table td:nth-child(6) {
        display: none;
    }

    .page-users .users-reset-form {
        flex-wrap: wrap;
    }
}

.page-projects .projects-create-panel .grid-form {
    gap: 0.48rem;
}

.page-projects .projects-kpi-panel {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.6rem;
}

.page-projects .projects-kpi-panel .card {
    padding: 0.7rem;
}

.page-projects .projects-kpi-panel .card h3 {
    margin: 0;
    font-size: 0.92rem;
}

.page-projects .projects-kpi-panel .card .big {
    margin-top: 0.25rem;
    font-size: 1.2rem;
}

.page-projects .projects-active-panel .project-toolbar {
    margin-bottom: 0.45rem;
}

.page-projects .projects-table td,
.page-projects .projects-table th {
    font-size: 0.85rem;
    padding: 0.38rem 0.42rem;
}

.page-projects .project-actions-cell .stack {
    gap: 0.38rem;
}

.page-contributions .contributions-page-shell {
    margin-bottom: 0.6rem;
}

.page-contributions .contributions-hero {
    border-left: 4px solid #2d9c45;
    background: linear-gradient(180deg, #fbfeff 0%, #f1f8ff 100%);
}

.page-contributions .contributions-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.page-contributions .contributions-hero-main h2 {
    margin: 0;
    font-size: 1.2rem;
}

.page-contributions .contributions-hero-main .muted {
    margin: 0.15rem 0 0;
}

.page-contributions .contributions-hero-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.page-contributions .contributions-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #c6d8eb;
    background: #f4f9ff;
    color: #254564;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
}

.page-contributions .contributions-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.48rem;
}

.page-contributions .contributions-kpi-card {
    border: 1px solid #d7e3ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.48rem 0.56rem;
}

.page-contributions .contributions-kpi-card h3 {
    margin: 0;
    font-size: 0.78rem;
    color: #5e7087;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.page-contributions .contributions-kpi-card p {
    margin: 0.24rem 0 0;
    font-size: 1.04rem;
    font-weight: 800;
    color: #1d3550;
}

.page-contributions #recordContributionPanel h2 {
    margin: 0;
}

.page-contributions .contributions-panel-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.42rem;
}

.page-contributions .contributions-panel-title .muted {
    margin: 0;
    font-size: 0.84rem;
}

.page-contributions .contribution-form-grid > label,
.page-contributions .contribution-form-grid > .sms-compact-grid,
.page-contributions .contribution-form-grid > #sharedContributionFields,
.page-contributions .contribution-form-grid > #projectHelpText,
.page-contributions .contribution-transfer-form > label,
.page-contributions .contribution-transfer-form > #transferProjectHelpText {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fbfdff;
    padding: 0.48rem 0.55rem;
}

.page-contributions .contributions-entry-panel .compact-form {
    gap: 0.48rem;
}

.page-contributions .contributions-entry-panel .subnav-tabs {
    margin-bottom: 0.5rem;
}

.page-contributions .contribution-mode-panel {
    padding: 0;
    margin-bottom: 0.7rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-contributions .contribution-mode-panel .contribution-sticky-subnav {
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid #2d8b3f;
    background: linear-gradient(180deg, #35a84a 0%, #2f9842 100%);
    box-shadow: 0 4px 12px rgba(22, 62, 31, 0.18);
}

.page-contributions .contribution-mode-panel .subnav-tab {
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.28rem 0.72rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
}

.page-contributions .contribution-mode-panel .subnav-tab:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.page-contributions .contribution-mode-panel .subnav-tab.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: #1f6f2f;
}

.page-contributions .contribution-mode-panel .subnav-tab.is-disabled,
.page-contributions .contribution-mode-panel .subnav-tab:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.page-contributions .contribution-mode-panel .contribution-sticky-subnav.is-pinned {
    background: linear-gradient(180deg, #35a84a 0%, #2f9842 100%);
    border: 1px solid #2d8b3f;
    box-shadow: 0 5px 14px rgba(22, 62, 31, 0.24);
}

.page-contributions .contributions-entry-panel .sms-compact-grid {
    gap: 0.45rem;
}

.page-contributions .contributions-records-panel .panel-head {
    margin-bottom: 0.45rem;
}

.page-contributions .contributions-records-panel .records-count {
    font-size: 0.82rem;
    color: #607188;
    font-weight: 600;
}

.page-contributions .pending-approvals-wrap {
    margin-bottom: 0.65rem;
}

.page-contributions .pending-approvals-wrap h3 {
    margin: 0 0 0.38rem;
    font-size: 1rem;
}

.page-contributions .pending-approvals-table td {
    vertical-align: top;
}

.page-contributions .pending-approve-form {
    gap: 0.32rem;
    min-width: 260px;
}

.page-contributions .pending-approve-inline {
    display: grid;
    grid-template-columns: minmax(95px, 1fr) minmax(90px, 100px);
    gap: 0.3rem;
}

.page-contributions .pending-approve-inline input {
    width: 100%;
}

.page-contributions .contributions-records-table td {
    vertical-align: middle;
}

.page-contributions .contrib-month-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4dfeb;
    padding: 0.16rem 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #385575;
    background: #f7fbff;
}

.page-contributions .contrib-category-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    line-height: 1.1;
}

.page-contributions .contrib-category-chip.cat-project {
    background: #e8f3ff;
    color: #184a78;
    border-color: #c0d7ee;
}

.page-contributions .contrib-category-chip.cat-share {
    background: #eaf7ed;
    color: #1f5d33;
    border-color: #c6e2cc;
}

.page-contributions .contrib-category-chip.cat-activity {
    background: #fff3e7;
    color: #7b4b1d;
    border-color: #eed4ba;
}

.page-contributions .contrib-category-chip.cat-default {
    background: #f0f4fa;
    color: #4c5f78;
    border-color: #d7e0eb;
}

.page-contributions .contrib-project-name {
    display: block;
    font-weight: 600;
    color: #1f3550;
}

.page-contributions .contrib-inline-meta {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: #647791;
}

.page-contributions .contrib-amount-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
}

.page-contributions .contribution-actions {
    flex-wrap: wrap;
    gap: 0.28rem;
}

.page-contributions .contribution-actions .button-link,
.page-contributions .contribution-actions button {
    padding: 0.26rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .page-contributions #recordContributionForm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.7rem;
        row-gap: 0.48rem;
        align-items: start;
    }

    .page-contributions #recordContributionForm > .sms-compact-grid,
    .page-contributions #recordContributionForm > #sharedContributionFields,
    .page-contributions #recordContributionForm > #projectHelpText,
    .page-contributions #recordContributionForm > button,
    .page-contributions #recordContributionForm > a.button-link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .page-contributions .contributions-hero-main h2 {
        font-size: 1.08rem;
    }

    .page-contributions .contributions-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contribution-sticky-subnav {
        margin-left: -0.55rem;
        margin-right: -0.55rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .page-contributions .contribution-mode-panel .contribution-sticky-subnav {
        margin-left: 0;
        margin-right: 0;
        padding: 0.42rem 0.48rem;
        border-radius: 0.62rem;
    }

    .page-contributions .contribution-mode-panel .subnav-tab {
        padding: 0.25rem 0.6rem;
        font-size: 0.76rem;
    }

    .page-contributions .pending-approve-form {
        min-width: 0;
    }

    .page-contributions .pending-approve-inline {
        grid-template-columns: 1fr;
    }
}

.page-member_contribution_view .member-summary-panel .filter-bar {
    gap: 0.48rem;
    align-items: end;
    margin-bottom: 0.4rem;
}

.page-member_contribution_view .member-summary-panel table th,
.page-member_contribution_view .member-summary-panel table td {
    font-size: 0.86rem;
}

.page-member_contribution_view .member-month-columns-panel {
    padding: 0.62rem 0.72rem;
}

.page-member_contribution_view .month-columns-title {
    font-size: 1.32rem;
    margin-bottom: 0.52rem;
}

.page-member_contribution_view .member-outstanding-panel table th,
.page-member_contribution_view .member-outstanding-panel table td {
    font-size: 0.88rem;
}

.page-statement #statement-filter .filter-bar {
    gap: 0.52rem;
}

.page-statement #statement-filter p {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.page-project_members .project-members-kpis {
    margin-top: 0.45rem;
}

.page-project_members .project-members-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.page-project_members .project-members-manage-col {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fbfdff;
    padding: 0.55rem 0.6rem;
}

.page-project_members .project-members-manage-col h3 {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

.page-project_members .project-member-checkbox-list {
    max-height: 280px;
    overflow: auto;
    display: grid;
    gap: 0.25rem;
    padding: 0.3rem 0.2rem;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    background: #ffffff;
}

@media (max-width: 991px) {
    .page-project_members .project-members-manage-grid {
        grid-template-columns: 1fr;
    }
}

.page-statement .statement-summary-panel {
    border-left: 4px solid #2d9c45;
    background: linear-gradient(180deg, #fdfefe 0%, #f4f9ff 100%);
}

.page-statement .statement-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.page-statement .statement-summary-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.page-statement .statement-summary-head .muted {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
}

.page-statement .statement-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.52rem;
}

.page-statement .statement-summary-card {
    border: 1px solid #d7e2ef;
    border-radius: 12px;
    padding: 0.58rem 0.62rem;
    background: #ffffff;
}

.page-statement .statement-summary-card-head {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.page-statement .statement-summary-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f0fc;
    color: #194b79;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.page-statement .statement-summary-card h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #30465f;
    font-weight: 700;
}

.page-statement .statement-summary-card .big {
    margin: 0.28rem 0 0;
    font-size: 1.22rem;
    font-weight: 800;
}

.page-statement #statement-projects table td,
.page-statement #statement-projects table th,
.page-statement #statement-records table td,
.page-statement #statement-records table th {
    font-size: 0.88rem;
}

.page-statement .statement-projects-panel .filter-bar,
.page-statement .statement-records-panel .filter-bar {
    gap: 0.5rem;
}

.page-statement .statement-project-name {
    display: inline-block;
    font-weight: 700;
    color: #1f3550;
}

.page-statement .statement-amount-cell,
.page-statement .statement-balance-cell {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.page-statement .statement-note-chip {
    display: inline-flex;
    align-items: center;
    max-width: 18rem;
    padding: 0.16rem 0.46rem;
    border-radius: 999px;
    border: 1px solid #d6dfeb;
    background: #f6faff;
    color: #4a5f78;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-statement .statement-month-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4dfeb;
    padding: 0.16rem 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #385575;
    background: #f7fbff;
}

.page-statement .statement-category-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    line-height: 1.1;
}

.page-statement .statement-category-chip.cat-project {
    background: #e8f3ff;
    color: #184a78;
    border-color: #c0d7ee;
}

.page-statement .statement-category-chip.cat-share {
    background: #eaf7ed;
    color: #1f5d33;
    border-color: #c6e2cc;
}

.page-statement .statement-category-chip.cat-activity {
    background: #fff3e7;
    color: #7b4b1d;
    border-color: #eed4ba;
}

.page-statement .statement-category-chip.cat-default {
    background: #f0f4fa;
    color: #4c5f78;
    border-color: #d7e0eb;
}

.page-statement .statement-project-chip,
.page-statement .statement-ref-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    max-width: 14rem;
    border-radius: 999px;
    border: 1px solid #d2dde9;
    background: #f8fbff;
    color: #2f4b6a;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.14rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-statement .statement-project-chip.is-empty,
.page-statement .statement-ref-chip.is-empty {
    color: #667a93;
    background: #f2f5f9;
}

.page-statement .statement-receipt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.26rem;
}

.page-statement .statement-receipt-actions .button-link {
    padding: 0.22rem 0.48rem;
    font-size: 0.76rem;
    line-height: 1.2;
}

.page-statement .statement-records-table td {
    vertical-align: middle;
}

.page-expenditure .expenditure-filter-form {
    gap: 0.56rem;
}

.page-expenditure .expenditure-filter-form label {
    min-width: 240px;
}

.page-expenditure .expenditure-head-picker {
    margin-bottom: 0;
    align-items: end;
}

.page-expenditure .panel-head .expenditure-head-picker label {
    min-width: 220px;
}

.page-expenditure .expenditure-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.page-expenditure .expenditure-kpi {
    border: 1px solid #d7e2ef;
    border-radius: 12px;
    padding: 0.58rem 0.62rem;
    background: #ffffff;
}

.page-expenditure .expenditure-kpi h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #30465f;
    font-weight: 700;
}

.page-expenditure .expenditure-kpi .big {
    margin: 0.28rem 0 0;
    font-size: 1.18rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.page-expenditure .expenditure-balance-positive {
    color: #1f7a38;
}

.page-expenditure .expenditure-balance-negative {
    color: #b42318;
}

.page-expenditure .expenditure-record-form {
    display: grid;
    gap: 0.55rem;
}

.page-expenditure .expenditure-record-form .span-2 {
    grid-column: 1 / -1;
}

.page-expenditure .expenditure-record-form textarea {
    min-height: 2.8rem;
}

.page-expenditure .expenditure-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.page-expenditure .expenditure-title {
    font-weight: 700;
    color: #1f3550;
}

.page-expenditure .expenditure-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d2dde9;
    background: #f8fbff;
    color: #2f4b6a;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.14rem 0.5rem;
    white-space: nowrap;
}

.page-expenditure .expenditure-chip.is-empty {
    color: #667a93;
    background: #f2f5f9;
}

.page-expenditure .expenditure-amount-cell,
.page-expenditure .expenditure-balance-cell {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.page-expenditure .expenditure-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    flex-wrap: wrap;
}

.page-expenditure .expenditure-balance-table th,
.page-expenditure .expenditure-balance-table td,
.page-expenditure .expenditure-flow-table th,
.page-expenditure .expenditure-flow-table td,
.page-expenditure .expenditure-records-table th,
.page-expenditure .expenditure-records-table td {
    font-size: 0.88rem;
}

.page-expenditure .expenditure-flow-table td {
    vertical-align: middle;
}

.page-expenditure .expenditure-chip.flow-type-in {
    background: #eaf7ed;
    color: #1f5d33;
    border-color: #c6e2cc;
}

.page-expenditure .expenditure-chip.flow-type-out {
    background: #fff3e7;
    color: #7b4b1d;
    border-color: #eed4ba;
}

.page-expenditure .expenditure-report-links {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.page-expenditure_report .report-toolbar {
    align-items: flex-start;
}

.page-expenditure_report .report-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.page-expenditure_report .report-kpi-grid {
    margin-bottom: 0;
}

.page-expenditure_report .panel {
    padding: 0.52rem 0.62rem;
    margin-bottom: 0.46rem;
}

.page-expenditure_report .panel h2 {
    margin: 0 0 0.32rem;
    font-size: 1rem;
    line-height: 1.2;
}

.page-expenditure_report .report-header-panel .muted {
    font-size: 0.8rem;
    line-height: 1.25;
}

.page-expenditure_report .report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.32rem;
}

.page-expenditure_report .expenditure-kpi {
    border: 1px solid #d7e2ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.38rem 0.44rem;
    display: grid;
    align-content: start;
    gap: 0.08rem;
}

.page-expenditure_report .expenditure-kpi h3 {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.14;
    color: #30465f;
    font-weight: 700;
}

.page-expenditure_report .expenditure-kpi .big {
    margin: 0.18rem 0 0;
    font-size: 1rem;
    line-height: 1.12;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.page-expenditure_report .expenditure-balance-table th,
.page-expenditure_report .expenditure-balance-table td,
.page-expenditure_report .expenditure-flow-table th,
.page-expenditure_report .expenditure-flow-table td {
    font-size: 0.8rem;
}

.page-expenditure_report .expenditure-balance-table tbody tr:nth-child(even) td,
.page-expenditure_report .expenditure-flow-table tbody tr:nth-child(even) td {
    background: #dfeaf7;
}

.page-statement .statement-projects-table tbody tr:nth-child(even) td,
.page-statement .statement-records-table tbody tr:nth-child(even) td,
.page-member_contribution_view table:not(.month-columns-table):not(.shared-allocation-table) tbody tr:nth-child(even) td {
    background: #dfeaf7;
}

.page-receipt .receipt-panel {
    max-width: 980px;
    margin: 0 auto;
}

.page-receipt .receipt-head {
    margin-bottom: 0.35rem;
}

.page-receipt .receipt-print-note {
    margin: 0.1rem 0 0.45rem;
}

.page-receipt .receipt-section-title {
    margin: 0.55rem 0 0.28rem;
    font-size: 1rem;
}

.page-receipt .receipt-meta-table th,
.page-receipt .receipt-meta-table td,
.page-receipt .receipt-details-table th,
.page-receipt .receipt-details-table td,
.page-receipt .receipt-breakdown-table th,
.page-receipt .receipt-breakdown-table td {
    vertical-align: middle;
    font-size: 0.9rem;
}

.page-receipt .receipt-meta-table th,
.page-receipt .receipt-details-table th {
    width: 18%;
    white-space: nowrap;
}

.page-receipt .receipt-amount-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.page-receipt .receipt-breakdown-table tfoot th {
    font-weight: 800;
}

@media (max-width: 991px) {
    .page-expenditure_report .report-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    @page {
        size: auto;
        margin: 7mm;
    }

    body.page-expenditure_report .site-header,
    body.page-expenditure_report .desktop-top-nav,
    body.page-expenditure_report .page-section-subnav,
    body.page-expenditure_report .mobile-bottom-nav,
    body.page-expenditure_report .mobile-top-controls,
    body.page-expenditure_report .offcanvas {
        display: none !important;
    }

    body.page-statement .site-header,
    body.page-statement .desktop-top-nav,
    body.page-statement .page-section-subnav,
    body.page-statement .mobile-bottom-nav,
    body.page-statement .mobile-top-controls,
    body.page-statement .offcanvas,
    body.page-statement #statement-filter .actions {
        display: none !important;
    }

    body.page-dashboard_details .site-header,
    body.page-dashboard_details .desktop-top-nav,
    body.page-dashboard_details .page-section-subnav,
    body.page-dashboard_details .mobile-bottom-nav,
    body.page-dashboard_details .mobile-top-controls,
    body.page-dashboard_details .offcanvas,
    body.page-dashboard_details .details-export-toolbar {
        display: none !important;
    }

    body.page-member_contribution_view .site-header,
    body.page-member_contribution_view .desktop-top-nav,
    body.page-member_contribution_view .page-section-subnav,
    body.page-member_contribution_view .mobile-bottom-nav,
    body.page-member_contribution_view .mobile-top-controls,
    body.page-member_contribution_view .offcanvas,
    body.page-receipt .site-header,
    body.page-receipt .desktop-top-nav,
    body.page-receipt .page-section-subnav,
    body.page-receipt .mobile-bottom-nav,
    body.page-receipt .mobile-top-controls,
    body.page-receipt .offcanvas {
        display: none !important;
    }

    body.page-expenditure_report {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.page-statement,
    body.page-dashboard_details,
    body.page-member_contribution_view,
    body.page-receipt {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.page-expenditure_report main.container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-statement main.container,
    body.page-dashboard_details main.container,
    body.page-member_contribution_view main.container,
    body.page-receipt main.container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-expenditure_report .panel {
        box-shadow: none !important;
        border: 1px solid #999999 !important;
        background: #ffffff !important;
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    body.page-statement .panel,
    body.page-dashboard_details .panel,
    body.page-member_contribution_view .panel,
    body.page-receipt .panel {
        box-shadow: none !important;
        border: 1px solid #999999 !important;
        background: #ffffff !important;
    }

    body.page-expenditure_report .report-actions,
    body.page-expenditure_report .report-actions .button-link,
    body.page-expenditure_report .report-actions button {
        display: none !important;
    }

    body.page-expenditure_report [data-report-print-note] {
        display: none !important;
    }

    body.page-dashboard_details .filter-bar,
    body.page-statement .filter-bar,
    body.page-member_contribution_view .filter-bar {
        display: none !important;
    }

    body.page-receipt .receipt-actions,
    body.page-receipt .receipt-share-wrap,
    body.page-receipt .receipt-print-note {
        display: none !important;
    }

    body.page-expenditure_report h2,
    body.page-statement h2,
    body.page-dashboard_details h2,
    body.page-member_contribution_view h2,
    body.page-receipt h2 {
        font-size: 13px !important;
        line-height: 1.15 !important;
        margin: 0 0 0.2rem !important;
    }

    body.page-expenditure_report p,
    body.page-statement p,
    body.page-dashboard_details p,
    body.page-member_contribution_view p,
    body.page-receipt p,
    body.page-expenditure_report .muted,
    body.page-statement .muted,
    body.page-dashboard_details .muted,
    body.page-member_contribution_view .muted,
    body.page-receipt .muted {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin: 0.1rem 0 !important;
    }

    body.page-expenditure_report .panel,
    body.page-statement .panel,
    body.page-dashboard_details .panel,
    body.page-member_contribution_view .panel,
    body.page-receipt .panel {
        border-radius: 0 !important;
        margin: 0 0 0.2rem !important;
        padding: 0.18rem 0.24rem !important;
    }

    body.page-expenditure_report table,
    body.page-statement table,
    body.page-dashboard_details table,
    body.page-member_contribution_view table,
    body.page-receipt table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        font-size: 10px !important;
        margin: 0 !important;
    }

    body.page-expenditure_report table th,
    body.page-expenditure_report table td,
    body.page-statement table th,
    body.page-statement table td,
    body.page-dashboard_details table th,
    body.page-dashboard_details table td,
    body.page-member_contribution_view table th,
    body.page-member_contribution_view table td,
    body.page-receipt table th,
    body.page-receipt table td {
        border: 1px solid #8b96a1 !important;
        padding: 0.16rem 0.24rem !important;
        vertical-align: top !important;
        color: #000000 !important;
    }

    body.page-expenditure_report table thead th,
    body.page-statement table thead th,
    body.page-dashboard_details table thead th,
    body.page-member_contribution_view table thead th,
    body.page-receipt table thead th {
        background: #d8dee6 !important;
        color: #102334 !important;
        font-weight: 700 !important;
    }

    body.page-expenditure_report table tbody tr:nth-child(odd) td,
    body.page-statement table tbody tr:nth-child(odd) td,
    body.page-dashboard_details table tbody tr:nth-child(odd) td,
    body.page-member_contribution_view table tbody tr:nth-child(odd) td,
    body.page-receipt table tbody tr:nth-child(odd) td {
        background: #f1f6fb !important;
    }

    body.page-expenditure_report table tbody tr:nth-child(even) td,
    body.page-statement table tbody tr:nth-child(even) td,
    body.page-dashboard_details table tbody tr:nth-child(even) td,
    body.page-member_contribution_view table tbody tr:nth-child(even) td,
    body.page-receipt table tbody tr:nth-child(even) td {
        background: #dfeaf7 !important;
    }

    body.page-receipt .receipt-panel {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    body.page-receipt .receipt-section-title {
        margin: 0.2rem 0 0.12rem !important;
        font-size: 10.4px !important;
        line-height: 1.15 !important;
    }

    body.page-receipt .receipt-amount-cell {
        text-align: right !important;
    }

    body.page-expenditure_report .report-header-panel {
        padding-bottom: 0.16rem !important;
    }

    body.page-expenditure_report .report-toolbar {
        margin: 0 !important;
        gap: 0.18rem !important;
    }

    body.page-expenditure_report .report-toolbar .muted {
        font-size: 8.7px !important;
        line-height: 1.15 !important;
    }

    body.page-expenditure_report .panel h3 {
        margin: 0 !important;
        font-size: 9.2px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    body.page-expenditure_report .expenditure-kpi .big {
        margin: 0.06rem 0 0 !important;
        font-size: 10.2px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }

    body.page-expenditure_report .report-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.12rem !important;
        margin: 0 !important;
    }

    body.page-expenditure_report .expenditure-kpi {
        padding: 0.12rem 0.16rem !important;
        min-height: 0 !important;
    }

    body.page-expenditure_report .expenditure-title {
        font-size: 9px !important;
        line-height: 1.12 !important;
    }

    body.page-expenditure_report .statement-summary-grid,
    body.page-statement .statement-summary-grid,
    body.page-dashboard_details .statement-summary-grid,
    body.page-member_contribution_view .statement-summary-grid,
    body.page-expenditure_report .report-kpi-grid,
    body.page-statement .report-kpi-grid,
    body.page-dashboard_details .report-kpi-grid,
    body.page-member_contribution_view .report-kpi-grid {
        gap: 0.18rem !important;
    }

    body.page-expenditure_report .statement-summary-card,
    body.page-statement .statement-summary-card,
    body.page-dashboard_details .statement-summary-card,
    body.page-member_contribution_view .statement-summary-card,
    body.page-expenditure_report .expenditure-kpi,
    body.page-statement .expenditure-kpi,
    body.page-dashboard_details .expenditure-kpi,
    body.page-member_contribution_view .expenditure-kpi {
        border: 1px solid #8b96a1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.2rem 0.26rem !important;
    }

    body.page-statement .statement-category-chip,
    body.page-statement .statement-project-chip,
    body.page-statement .statement-ref-chip,
    body.page-statement .statement-note-chip,
    body.page-expenditure_report .expenditure-chip {
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        color: #000 !important;
        padding: 0 !important;
        font-size: 8.4px !important;
        box-shadow: none !important;
    }

    body.page-statement .statement-receipt-actions {
        display: none !important;
    }

    body.page-member_contribution_view .month-columns-scroll {
        overflow: visible !important;
    }

    body.page-member_contribution_view .month-columns-table thead th,
    body.page-member_contribution_view .month-columns-table .member-col,
    body.page-member_contribution_view .month-columns-table .total-col,
    body.page-member_contribution_view .month-columns-table .outstanding-col {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        white-space: normal !important;
    }
}

@media (min-width: 992px) {
    .page-expenditure .expenditure-record-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .page-statement .statement-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-statement .statement-summary-card {
        padding: 0.5rem;
    }

    .page-statement .statement-summary-card h3 {
        font-size: 0.82rem;
    }

    .page-statement .statement-summary-card .big {
        font-size: 1.02rem;
    }

    .page-statement .statement-note-chip {
        max-width: 12rem;
    }

    .page-statement .statement-project-chip,
    .page-statement .statement-ref-chip {
        max-width: 8rem;
    }

    .page-expenditure .expenditure-filter-form label {
        min-width: 0;
        width: 100%;
    }

    .page-expenditure .panel-head .expenditure-head-picker {
        width: 100%;
    }
}

/* Improve action-link contrast in content tables/forms */
main.container .button-link {
    color: #1c3f63 !important;
    border-color: #c2d2e4 !important;
    background: #f7fbff !important;
}

main.container .button-link:hover {
    color: #14324f !important;
    border-color: #9db5cf !important;
    background: #eaf3fc !important;
}

main.container .btn-outline-secondary {
    --bs-btn-color: #1c3f63;
    --bs-btn-border-color: #c2d2e4;
    --bs-btn-hover-color: #14324f;
    --bs-btn-hover-bg: #eaf3fc;
    --bs-btn-hover-border-color: #9db5cf;
    --bs-btn-active-color: #14324f;
    --bs-btn-active-bg: #e3eef9;
    --bs-btn-active-border-color: #8ea9c6;
}

/* Final compact pass for heavy-data screens */
body.page-dashboard_details main.container .panel,
body.page-projects main.container .panel,
body.page-contributions main.container .panel,
body.page-member_contribution_view main.container .panel,
body.page-statement main.container .panel,
body.page-expenditure main.container .panel,
body.page-users main.container .panel {
    padding: 0.58rem 0.66rem;
    margin-bottom: 0.56rem;
}

body.page-dashboard_details main.container .panel h2,
body.page-projects main.container .panel h2,
body.page-contributions main.container .panel h2,
body.page-member_contribution_view main.container .panel h2,
body.page-statement main.container .panel h2,
body.page-expenditure main.container .panel h2,
body.page-users main.container .panel h2 {
    font-size: 1.08rem;
    margin-bottom: 0.38rem;
}

body.page-dashboard_details main.container label,
body.page-projects main.container label,
body.page-contributions main.container label,
body.page-member_contribution_view main.container label,
body.page-statement main.container label,
body.page-expenditure main.container label,
body.page-users main.container label {
    font-size: 0.8rem;
    gap: 0.18rem;
}

body.page-dashboard_details main.container .filter-bar,
body.page-projects main.container .filter-bar,
body.page-contributions main.container .filter-bar,
body.page-member_contribution_view main.container .filter-bar,
body.page-statement main.container .filter-bar,
body.page-expenditure main.container .filter-bar,
body.page-users main.container .filter-bar {
    gap: 0.42rem;
    margin-bottom: 0.46rem;
}

body.page-dashboard_details main.container .grid-form,
body.page-projects main.container .grid-form,
body.page-contributions main.container .grid-form,
body.page-member_contribution_view main.container .grid-form,
body.page-statement main.container .grid-form,
body.page-expenditure main.container .grid-form,
body.page-users main.container .grid-form {
    gap: 0.38rem;
}

body.page-dashboard_details main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-dashboard_details main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-projects main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-projects main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-contributions main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-contributions main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-member_contribution_view main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-member_contribution_view main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-statement main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-statement main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-expenditure main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-expenditure main.container table:not(.month-columns-table):not(.shared-allocation-table) td,
body.page-users main.container table:not(.month-columns-table):not(.shared-allocation-table) th,
body.page-users main.container table:not(.month-columns-table):not(.shared-allocation-table) td {
    padding: 0.28rem 0.34rem;
    font-size: 0.79rem;
}

body.page-member_contribution_view main.container .member-month-columns-panel {
    --month-year-row-height: 1.4rem;
    --month-header-row-height: 1.28rem;
    --month-right-outstanding-width: 96px;
    --month-right-total-width: 92px;
}

@media (max-width: 991px) {
    body.page-dashboard_details main.container .panel,
    body.page-projects main.container .panel,
    body.page-contributions main.container .panel,
    body.page-member_contribution_view main.container .panel,
    body.page-statement main.container .panel,
    body.page-expenditure main.container .panel,
    body.page-users main.container .panel {
        padding: 0.5rem 0.54rem;
        margin-bottom: 0.5rem;
    }

    body.page-dashboard_details main.container .panel h2,
    body.page-projects main.container .panel h2,
    body.page-contributions main.container .panel h2,
    body.page-member_contribution_view main.container .panel h2,
    body.page-statement main.container .panel h2,
    body.page-expenditure main.container .panel h2,
    body.page-users main.container .panel h2 {
        font-size: 1rem;
    }
}

/* Modern green theme refresh */
:root {
    --bs-primary: #218b4a;
    --bs-primary-rgb: 33, 139, 74;
    --bs-success: #218b4a;
    --bs-success-rgb: 33, 139, 74;
    --bs-info: #2b7a57;
    --bs-info-rgb: 43, 122, 87;
}

body.app-shell {
    background-color: #edf7ef;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(59, 148, 84, 0.15), rgba(59, 148, 84, 0) 44%),
        radial-gradient(circle at 88% 7%, rgba(115, 176, 70, 0.14), rgba(115, 176, 70, 0) 38%),
        linear-gradient(180deg, #f8fdf9 0%, #eef8f0 48%, #e5f3e8 100%);
    color: #1e2a23;
}

body.app-shell .site-header {
    background: linear-gradient(180deg, #267c44 0%, #206b3b 100%);
    border-bottom: 1px solid #1d5f35;
}

body.has-sidebar .site-header {
    background: linear-gradient(180deg, #2f9d52 0%, #278847 56%, #216f3c 100%);
    border-right: 1px solid #1b6335;
    border-bottom: 0;
}

body.has-sidebar .header-identity {
    background: linear-gradient(180deg, #f8fffa 0%, #eef8f1 100%);
    border-bottom: 1px solid #d2e7d8;
}

body.has-sidebar .main-nav a,
body.has-sidebar .main-nav .main-nav-dropdown-toggle {
    color: #f1fff3;
    border-color: transparent;
}

body.has-sidebar .main-nav a.active,
body.has-sidebar .main-nav .main-nav-dropdown.active > .main-nav-dropdown-toggle {
    background: #166932;
    border-color: #166932;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(12, 56, 29, 0.24);
}

.desktop-top-nav {
    background: linear-gradient(180deg, #f9fffb 0%, #eef8f1 100%);
    border: 1px solid #d3e8d9;
    box-shadow: 0 4px 12px rgba(25, 73, 43, 0.08);
}

.desktop-top-group {
    color: #1d6c3a;
}

.desktop-top-page {
    background: #e8f5ec;
    border-color: #cde4d3;
    color: #2c5f3f;
}

.desktop-top-links a {
    background: #edf8f0;
    border-color: #d1e7d7;
    color: #25543a;
}

.desktop-top-links a.active {
    background: #218b4a;
    border-color: #218b4a;
    color: #ffffff;
}

.mobile-page-pill {
    color: #24573a;
    background: #eaf7ee;
    border-color: #cce4d3;
}

.mobile-menu-toggle {
    border-color: #cfe3d6;
    color: #22523a;
    background: #f7fef9;
}

.page-section-subnav {
    background: linear-gradient(180deg, #279348 0%, #1f7f3f 100%);
    border: 1px solid #1b6f38;
    box-shadow: 0 6px 16px rgba(20, 72, 38, 0.22);
}

.page-section-subnav-link {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(233, 248, 238, 0.45);
    color: #f6fff8;
}

.page-section-subnav-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

.page-section-subnav-link.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #1f6239;
}

main.container .panel,
main.container .card,
main.container .overview-card,
main.container .mini-stat,
main.container .project-detail-card,
main.container .users-manage-card,
main.container .contributions-kpi-card,
main.container .expenditure-kpi,
main.container .statement-summary-card {
    border-color: #d3e5d8;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
    box-shadow: 0 6px 16px rgba(26, 74, 43, 0.08);
}

main.container table:not(.month-columns-table):not(.shared-allocation-table) thead th {
    background: #e8f4eb;
    color: #1f4f34;
    border-bottom-color: #bcd8c5;
}

main.container table:not(.month-columns-table) tbody tr:nth-child(odd) td,
main.container table:not(.month-columns-table) tbody tr:nth-child(odd) th {
    background: #f1f6fb;
}

main.container table:not(.month-columns-table) tbody tr:nth-child(even) td,
main.container table:not(.month-columns-table) tbody tr:nth-child(even) th {
    background: #dfeaf7;
}

main.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main.container select,
main.container textarea,
main.container .form-control,
main.container .form-select {
    border-color: #b6d4bf !important;
    background-color: #f6fff8 !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 251, 243, 0.95)),
        repeating-linear-gradient(90deg, rgba(42, 119, 66, 0.06) 0 1px, transparent 1px 22px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(35, 114, 59, 0.08);
    color: #1f2b22;
}

main.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
main.container select:focus,
main.container textarea:focus,
main.container .form-control:focus,
main.container .form-select:focus {
    border-color: #3da464 !important;
    box-shadow: 0 0 0 0.2rem rgba(61, 164, 100, 0.2), inset 0 0 0 1px rgba(27, 103, 52, 0.08) !important;
}

main.container .btn-primary,
main.container button.btn-primary {
    --bs-btn-bg: #218b4a;
    --bs-btn-border-color: #218b4a;
    --bs-btn-hover-bg: #1b763f;
    --bs-btn-hover-border-color: #1b763f;
    --bs-btn-active-bg: #186b39;
    --bs-btn-active-border-color: #186b39;
}

main.container .btn-outline-primary {
    --bs-btn-color: #1f7f43;
    --bs-btn-border-color: #9bc8a8;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #218b4a;
    --bs-btn-hover-border-color: #218b4a;
    --bs-btn-active-bg: #1a743f;
    --bs-btn-active-border-color: #1a743f;
}

main.container .button-link {
    color: #1f633c !important;
    border-color: #bddbc6 !important;
    background: #f4fbf6 !important;
}

main.container .button-link:hover {
    color: #184f30 !important;
    border-color: #99c8a8 !important;
    background: #e8f6ec !important;
}

.mobile-bottom-nav {
    background: #f5fdf7 !important;
    border-top-color: #cde2d4 !important;
}

.mobile-bottom-nav a,
.mobile-bottom-nav .mobile-more-btn {
    color: #28533b !important;
    background: #eaf5ee !important;
    border-color: #c7ddcf !important;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav .mobile-more-btn.active {
    background: #218b4a !important;
    border-color: #218b4a !important;
    color: #ffffff !important;
}

.mobile-nav-drawer .offcanvas-body {
    background: linear-gradient(180deg, #f9fffb 0%, #eef8f1 100%);
}

@media (max-width: 1199px) {
    body.app-shell .site-header {
        background: linear-gradient(180deg, #f9fffb 0%, #eef8f1 100%);
        border-bottom: 1px solid #cfe3d6;
    }

    .sidebar-role {
        color: #204a35;
    }
}

/* Full-width section subnav with responsive overflow */
.page-section-subnav {
    position: sticky !important;
    z-index: 24 !important;
    width: 100%;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    top: 3.2rem !important;
    display: grid;
    grid-template-columns: repeat(var(--subnav-columns, var(--subnav-count, 1)), minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    column-gap: 0.08rem;
    row-gap: 0.08rem;
}

.page-section-subnav-link {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 !important;
    border-radius: 0 !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.05;
    min-height: 2.1rem;
}

.page-section-subnav-more {
    width: 100%;
}

.page-section-subnav-more-toggle::after {
    margin-left: 0.38rem;
}

.page-section-subnav-more-menu {
    min-width: 14rem;
}

.page-section-subnav-more.active .page-section-subnav-more-toggle {
    background: #ffffff;
    border-color: #ffffff;
    color: #1f6239;
}

.page-section-subnav-link.is-subnav-overflow-hidden {
    display: none !important;
}

@media (min-width: 1200px) {
    body.has-sidebar .page-section-subnav {
        top: var(--desktop-top-nav-height) !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 991px) {
    .page-section-subnav {
        top: 3.05rem !important;
        grid-template-columns: repeat(var(--subnav-columns, 1), minmax(0, 1fr));
        column-gap: 0.06rem;
        row-gap: 0.06rem;
    }

    .page-section-subnav-link {
        font-size: 0.68rem;
        line-height: 1.02;
        min-height: 1.95rem;
    }
}

/* Dashboard welcome hero refresh */
.page-dashboard .dashboard-hero-panel {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1d7640;
    border-radius: 14px;
    background: linear-gradient(135deg, #1b6f3c 0%, #238e4a 46%, #49af6f 100%);
    color: #ffffff;
}

.page-dashboard #dashboard-welcome.dashboard-hero-panel {
    background: linear-gradient(135deg, #155e33 0%, #1f7f43 48%, #3ca864 100%) !important;
    border-color: #155e33 !important;
}

.page-dashboard .dashboard-hero-panel::before,
.page-dashboard .dashboard-hero-panel::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.3;
}

.page-dashboard .dashboard-hero-panel::before {
    width: 320px;
    height: 320px;
    right: -110px;
    top: -130px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 70%);
}

.page-dashboard .dashboard-hero-panel::after {
    width: 260px;
    height: 260px;
    left: -90px;
    bottom: -130px;
    background: radial-gradient(circle, rgba(209, 245, 222, 0.38) 0%, rgba(209, 245, 222, 0) 72%);
}

.page-dashboard .dashboard-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: stretch;
    padding: 0.95rem;
}

.page-dashboard .dashboard-hero-main {
    display: grid;
    align-content: center;
    gap: 0.36rem;
}

.page-dashboard .dashboard-hero-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-dashboard .dashboard-hero-main h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.95rem);
    line-height: 1.16;
    color: #ffffff;
}

.page-dashboard .dashboard-hero-meta {
    margin: 0;
    color: rgba(247, 255, 250, 0.92);
    font-size: 0.88rem;
    font-weight: 500;
}

.page-dashboard #dashboard-welcome .dashboard-hero-kicker,
.page-dashboard #dashboard-welcome .dashboard-hero-main h2,
.page-dashboard #dashboard-welcome .dashboard-hero-meta,
.page-dashboard #dashboard-welcome .dashboard-hero-slide,
.page-dashboard #dashboard-welcome .dashboard-hero-stat-label,
.page-dashboard #dashboard-welcome .dashboard-hero-stat-value {
    color: #f7fffb !important;
}

.page-dashboard #dashboard-welcome .dashboard-hero-stat-value.amount-outstanding {
    color: #ffe4e4 !important;
}

.page-dashboard #dashboard-welcome .dashboard-hero-stat-value.amount-credit {
    color: #d8ffe8 !important;
}

.page-dashboard .dashboard-hero-rotator {
    position: relative;
    min-height: 2.1rem;
    margin: 0.28rem 0 0.2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0.26rem 0.54rem;
    border-radius: 10px;
    border: 1px solid rgba(236, 255, 244, 0.45);
    background: rgba(12, 73, 38, 0.24);
}

.page-dashboard .dashboard-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fffb;
    text-shadow: 0 1px 3px rgba(8, 40, 20, 0.45);
    opacity: 1;
    transform: translateY(0);
    animation: dashboardHeroSlide 12s infinite;
}

.page-dashboard .dashboard-hero-slide:nth-child(1) {
    animation-delay: 0s;
}

.page-dashboard .dashboard-hero-slide:nth-child(2) {
    animation-delay: 4s;
}

.page-dashboard .dashboard-hero-slide:nth-child(3) {
    animation-delay: 8s;
}

.page-dashboard .dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.page-dashboard .dashboard-hero-actions .btn {
    border-width: 1px;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-weight: 600;
}

.page-dashboard .dashboard-hero-actions .btn-light {
    color: #1c6938;
}

.page-dashboard .dashboard-hero-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
}

.page-dashboard .dashboard-hero-actions .btn-outline-light:hover {
    color: #1a6435;
    background: #ffffff;
}

.page-dashboard .dashboard-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    align-content: center;
}

.page-dashboard .dashboard-hero-stat-card {
    border: 1px solid rgba(225, 248, 233, 0.48);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
    padding: 0.5rem 0.55rem;
    display: grid;
    gap: 0.2rem;
}

.page-dashboard .dashboard-hero-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(234, 253, 241, 0.95);
}

.page-dashboard .dashboard-hero-stat-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.page-dashboard .dashboard-hero-stat-value.amount-outstanding {
    color: #ffe7e7;
}

.page-dashboard .dashboard-hero-stat-value.amount-credit {
    color: #d8ffe8;
}

.page-dashboard .dashboard-hero-stat-value.muted {
    color: #e8fbea;
}

@keyframes dashboardHeroSlide {
    0%,
    30% {
        opacity: 1;
        transform: translateY(0);
    }
    34%,
    100% {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@media (max-width: 991px) {
    .page-dashboard .dashboard-hero-shell {
        grid-template-columns: 1fr;
        padding: 0.78rem;
    }

    .page-dashboard .dashboard-hero-main h2 {
        font-size: clamp(1.1rem, 5.3vw, 1.5rem);
    }

    .page-dashboard .dashboard-hero-meta {
        font-size: 0.8rem;
    }

    .page-dashboard .dashboard-hero-slide {
        font-size: 0.88rem;
    }

    .page-dashboard .dashboard-hero-actions .btn {
        padding: 0.25rem 0.56rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 575px) {
    .page-dashboard .dashboard-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .page-dashboard .dashboard-hero-stat-card {
        padding: 0.42rem 0.46rem;
    }

    .page-dashboard .dashboard-hero-stat-value {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-dashboard .dashboard-hero-slide {
        animation: none;
        opacity: 0;
        transform: none;
    }

    .page-dashboard .dashboard-hero-slide.is-first {
        opacity: 1;
    }
}

.print-letterhead {
    display: none;
}

.print-watermark {
    display: none;
}

@media print {
    .print-watermark {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
        pointer-events: none !important;
        opacity: 0.055 !important;
    }

    .print-watermark img {
        width: min(60vw, 520px) !important;
        max-width: 520px !important;
        min-width: 220px !important;
        height: auto !important;
        object-fit: contain !important;
        filter: grayscale(15%);
    }

    body.app-shell main.container {
        position: relative !important;
    }

    body.app-shell main.container > *:not(.print-watermark) {
        position: relative !important;
        z-index: 2 !important;
    }

    .print-letterhead {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.38rem !important;
        margin: 0 0 0.22rem !important;
        padding: 0 0 0.18rem !important;
        border-bottom: 1.2px solid #739d84 !important;
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .print-letterhead-logo {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 1px solid #7da38c !important;
        background: #ffffff !important;
        overflow: hidden !important;
        flex: 0 0 36px !important;
    }

    .print-letterhead-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 42% !important;
        padding: 0 !important;
        display: block !important;
    }

    .print-letterhead-meta {
        display: grid !important;
        gap: 0.03rem !important;
        text-align: center !important;
    }

    .print-letterhead-title {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #143727 !important;
    }

    .print-letterhead-line {
        margin: 0 !important;
        font-size: 8.7px !important;
        line-height: 1.15 !important;
        color: #000000 !important;
    }
}

/* Dashboard true carousel banner */
.page-dashboard .dashboard-hero-carousel {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(227, 252, 236, 0.42);
    background: rgba(12, 74, 40, 0.2);
    min-height: 7.2rem;
}

.page-dashboard .dashboard-hero-carousel-inner {
    border-radius: 12px;
}

.page-dashboard .dashboard-hero-banner {
    min-height: 7.2rem;
    padding: 0.92rem 2.55rem 0.74rem 0.9rem;
    display: grid;
    align-content: center;
    gap: 0.2rem;
    background-size: cover;
    background-position: center;
}

.page-dashboard .dashboard-hero-banner-1 {
    background-image:
        radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 35%),
        linear-gradient(120deg, #0f5a32 0%, #1f7b43 54%, #31a45c 100%);
}

.page-dashboard .dashboard-hero-banner-2 {
    background-image:
        radial-gradient(circle at 80% 18%, rgba(255, 243, 198, 0.22), rgba(255, 243, 198, 0) 40%),
        linear-gradient(120deg, #145c47 0%, #1f7a5e 52%, #2ea57d 100%);
}

.page-dashboard .dashboard-hero-banner-3 {
    background-image:
        radial-gradient(circle at 82% 20%, rgba(224, 241, 255, 0.2), rgba(224, 241, 255, 0) 40%),
        linear-gradient(120deg, #195648 0%, #1f6f5a 50%, #2c9479 100%);
}

.page-dashboard .dashboard-hero-banner-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(235, 255, 243, 0.95);
}

.page-dashboard .dashboard-hero-banner h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    font-weight: 700;
    color: #f9fffb;
    text-shadow: 0 1px 2px rgba(6, 32, 17, 0.35);
}

.page-dashboard .dashboard-hero-banner p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.24;
    color: rgba(241, 255, 247, 0.94);
}

.page-dashboard .dashboard-hero-carousel-indicators {
    margin: 0;
    left: 0.55rem;
    right: auto;
    bottom: auto;
    top: 0.35rem;
    justify-content: flex-start;
    gap: 0.22rem;
}

.page-dashboard .dashboard-hero-carousel-indicators [data-bs-target] {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    border: 0;
    opacity: 0.55;
    background-color: rgba(235, 255, 244, 0.78);
}

.page-dashboard .dashboard-hero-carousel-indicators .active {
    opacity: 1;
    background-color: #ffffff;
}

.page-dashboard .dashboard-hero-carousel-control {
    width: 1.9rem;
    opacity: 0.96;
}

.page-dashboard .dashboard-hero-carousel-control .carousel-control-prev-icon,
.page-dashboard .dashboard-hero-carousel-control .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background-color: rgba(5, 29, 15, 0.34);
    background-size: 64% 64%;
}

@media (max-width: 991px) {
    .page-dashboard .dashboard-hero-carousel,
    .page-dashboard .dashboard-hero-banner {
        min-height: 6.5rem;
    }

    .page-dashboard .dashboard-hero-banner {
        padding: 0.78rem 2.15rem 0.62rem 0.7rem;
    }

    .page-dashboard .dashboard-hero-banner h3 {
        font-size: 0.9rem;
    }

    .page-dashboard .dashboard-hero-banner p {
        font-size: 0.74rem;
    }
}

/* Top-right account dropdown (Profile, Settings, Log out) */
.desktop-account-toggle,
.mobile-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid #cfe0d4;
    background: #f7fef9;
    color: #1f5135;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1;
}

.desktop-account-toggle {
    padding: 0.3rem 0.66rem 0.3rem 0.34rem;
}

.desktop-account-toggle span {
    max-width: 16.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktop-account-toggle:hover,
.desktop-account-toggle:focus-visible,
.mobile-account-toggle:hover,
.mobile-account-toggle:focus-visible {
    border-color: #9fc8ab;
    background: #eff9f2;
    color: #18482f;
}

.desktop-account-toggle .user-pill-avatar,
.mobile-account-toggle .user-pill-avatar {
    width: 1.55rem;
    height: 1.55rem;
}

.mobile-account-toggle {
    width: 2.2rem;
    height: 2.2rem;
    justify-content: center;
    padding: 0.24rem;
}

.mobile-account-toggle.dropdown-toggle::after {
    display: none;
}

.account-dropdown-menu {
    min-width: 12.8rem;
    border: 1px solid #cfe0d4;
    border-radius: 0.7rem;
    background: #fbfffc;
    box-shadow: 0 8px 20px rgba(15, 60, 33, 0.16);
    padding: 0.3rem;
}

.account-dropdown-menu .dropdown-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    color: #234a34;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.44rem 0.55rem;
}

.account-dropdown-menu .dropdown-item i {
    width: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.account-dropdown-menu .dropdown-item:hover,
.account-dropdown-menu .dropdown-item:focus-visible {
    background: #eaf6ee;
    color: #1d5c36;
}

.account-dropdown-logout {
    margin: 0;
}

.account-dropdown-logout .dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.account-dropdown-logout .dropdown-item.text-danger {
    color: #b42318 !important;
}

.account-dropdown-logout .dropdown-item.text-danger:hover,
.account-dropdown-logout .dropdown-item.text-danger:focus-visible {
    color: #912018 !important;
    background: #fdeceb;
}

/* User appearance preferences */
body.app-shell {
    font-size: calc(16px * var(--app-font-scale, 1));
}

body.app-shell.theme-dark {
    --bg: #111714;
    --panel: #1b2420;
    --panel-soft: #1e2924;
    --surface-soft: #223029;
    --surface-strong: #2a3a31;
    --line: #33463c;
    --text: #e7efe9;
    --muted: #b4c5bc;
    --primary: #4fa879;
    background-color: #111714;
    background-image:
        radial-gradient(circle at 10% 0%, rgba(79, 168, 121, 0.2), rgba(79, 168, 121, 0) 44%),
        radial-gradient(circle at 90% 8%, rgba(53, 116, 86, 0.24), rgba(53, 116, 86, 0) 38%),
        linear-gradient(180deg, #111714 0%, #131c18 45%, #111714 100%);
    color: var(--text);
}

body.app-shell.theme-dark .desktop-top-nav,
body.app-shell.theme-dark .site-header,
body.app-shell.theme-dark .mobile-nav-drawer .offcanvas-body {
    background: linear-gradient(180deg, #17231d 0%, #15211b 100%) !important;
    border-color: #2f4438 !important;
}

body.app-shell.theme-dark main.container .panel,
body.app-shell.theme-dark main.container .card,
body.app-shell.theme-dark main.container .overview-card,
body.app-shell.theme-dark main.container .mini-stat,
body.app-shell.theme-dark main.container .project-detail-card,
body.app-shell.theme-dark main.container .users-manage-card,
body.app-shell.theme-dark main.container .contributions-kpi-card,
body.app-shell.theme-dark main.container .expenditure-kpi,
body.app-shell.theme-dark main.container .statement-summary-card {
    background: linear-gradient(180deg, #1b2520 0%, #1a231f 100%) !important;
    border-color: #30443a !important;
    color: #e8f1eb !important;
}

body.app-shell.theme-dark main.container .muted {
    color: #adc0b7 !important;
}

body.app-shell.theme-dark main.container table:not(.month-columns-table):not(.shared-allocation-table) thead th {
    background: #223228 !important;
    color: #e6f0ea !important;
    border-bottom-color: #395346 !important;
}

body.app-shell.theme-dark main.container table:not(.month-columns-table):not(.shared-allocation-table) td {
    background: #1c2722 !important;
    border-color: #32473c !important;
    color: #e6f0ea !important;
}

body.app-shell.theme-dark main.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.app-shell.theme-dark main.container select,
body.app-shell.theme-dark main.container textarea,
body.app-shell.theme-dark main.container .form-control,
body.app-shell.theme-dark main.container .form-select {
    background-color: #18221e !important;
    background-image:
        linear-gradient(180deg, rgba(24, 34, 30, 0.96), rgba(27, 40, 34, 0.96)),
        repeating-linear-gradient(90deg, rgba(88, 164, 121, 0.08) 0 1px, transparent 1px 22px) !important;
    border-color: #3c5649 !important;
    color: #e7efe9 !important;
}

body.app-shell.theme-dark main.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.app-shell.theme-dark main.container select:focus,
body.app-shell.theme-dark main.container textarea:focus,
body.app-shell.theme-dark main.container .form-control:focus,
body.app-shell.theme-dark main.container .form-select:focus {
    border-color: #5fb187 !important;
    box-shadow: 0 0 0 0.2rem rgba(95, 177, 135, 0.22), inset 0 0 0 1px rgba(95, 177, 135, 0.12) !important;
}

/* Dashboard body modernization */
.page-dashboard .dashboard-hero-title-row {
    display: flex;
    align-items: center;
    gap: 0.72rem;
}

.page-dashboard .dashboard-hero-title-copy {
    min-width: 0;
}

.page-dashboard .dashboard-hero-title-copy h2 {
    margin: 0;
}

.page-dashboard .dashboard-hero-user-avatar {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 999px;
    flex: 0 0 3.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 18px rgba(12, 44, 26, 0.24);
}

.page-dashboard .dashboard-hero-user-avatar-photo {
    background: #ffffff;
}

.page-dashboard .dashboard-hero-user-avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

.page-dashboard .dashboard-hero-user-avatar-fallback {
    background: linear-gradient(135deg, #f5fff7 0%, #d9f0df 100%);
    color: #145e32;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.page-dashboard .dashboard-hero-title-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.18rem;
}

.page-dashboard .dashboard-hero-meta-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.22);
    color: #f4fff8;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.52rem;
}

.page-dashboard .dashboard-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.page-dashboard .dashboard-section-head h2 {
    margin-bottom: 0.18rem;
}

.page-dashboard .dashboard-section-head .muted {
    margin: 0;
}

.page-dashboard .dashboard-toolbar-panel {
    border-radius: 14px;
    border-color: #cde3d3;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
}

.page-dashboard .dashboard-toolbar-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0.72rem;
    align-items: end;
}

.page-dashboard .dashboard-filter-form {
    margin: 0;
}

.page-dashboard .dashboard-filter-form .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2a5a41;
}

.page-dashboard .dashboard-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.42rem;
}

.page-dashboard .dashboard-toolbar-actions .btn {
    border-radius: 10px;
    font-weight: 600;
}

.page-dashboard .dashboard-filter-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #c7dfd0;
    background: #eef9f1;
    color: #1d6e3b;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.62rem;
}

.page-dashboard .dashboard-personal-panel,
.page-dashboard .dashboard-group-panel {
    border-radius: 14px;
    border-color: #cde3d3;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
}

.page-dashboard .dashboard-admin-panel {
    border-radius: 14px;
    border-color: #cde3d3;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
}

.page-dashboard .dashboard-admin-tool-card {
    border-left: 4px solid #1f8a48;
    background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
}

.page-dashboard .dashboard-admin-tool-header {
    align-items: center;
}

.page-dashboard .dashboard-admin-tool-icon {
    background: linear-gradient(135deg, #edf8f1 0%, #d4ecd9 100%);
    color: #1f6e3d;
}

.page-dashboard .dashboard-admin-tool-icon i {
    font-size: 0.95rem;
    line-height: 1;
}

.page-dashboard .dashboard-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 0.65rem;
}

.page-dashboard .overview-card {
    border-color: #cfe0d8;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-dashboard .overview-card:hover,
.page-dashboard .overview-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(20, 83, 44, 0.12);
    border-color: #9fcbb0;
}

.page-dashboard .dashboard-mini-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.page-dashboard .dashboard-card-row .overview-card p:last-child {
    margin-top: auto;
}

.page-dashboard .dashboard-mini-row .mini-stat {
    height: 100%;
}

.page-dashboard .mini-stat {
    border-color: #cfe0d8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
}

body.app-shell.theme-dark .page-dashboard .dashboard-toolbar-panel {
    border-color: #355046 !important;
    background: linear-gradient(180deg, #1b2520 0%, #1a231f 100%) !important;
}

body.app-shell.theme-dark .page-dashboard .dashboard-filter-form .form-label {
    color: #d8f1e2;
}

body.app-shell.theme-dark .page-dashboard .dashboard-personal-panel,
body.app-shell.theme-dark .page-dashboard .dashboard-group-panel,
body.app-shell.theme-dark .page-dashboard .dashboard-admin-panel,
body.app-shell.theme-dark .page-dashboard .overview-card,
body.app-shell.theme-dark .page-dashboard .mini-stat {
    border-color: #355046 !important;
    background: linear-gradient(180deg, #1b2520 0%, #1a231f 100%) !important;
}

body.app-shell.theme-dark .page-dashboard .dashboard-admin-tool-card {
    border-left-color: #62c886;
}

body.app-shell.theme-dark .page-dashboard .dashboard-admin-tool-icon {
    background: linear-gradient(135deg, #264033 0%, #305043 100%);
    color: #dcf6e6;
}

body.app-shell.theme-dark .page-dashboard .dashboard-filter-chip {
    border-color: #436757;
    background: #213228;
    color: #d9f0e2;
}

body.app-shell.theme-dark .page-dashboard .dashboard-hero-user-avatar-fallback {
    background: linear-gradient(135deg, #243a2f 0%, #2e4c3d 100%);
    color: #dff7e7;
}

@media (max-width: 767px) {
    .page-dashboard .dashboard-hero-user-avatar {
        width: 2.55rem;
        height: 2.55rem;
        flex-basis: 2.55rem;
    }

    .page-dashboard .dashboard-hero-meta-chip {
        font-size: 0.66rem;
    }

    .page-dashboard .dashboard-toolbar-wrap {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .page-dashboard .dashboard-toolbar-actions {
        justify-content: stretch;
    }

    .page-dashboard .dashboard-toolbar-actions .btn {
        flex: 1 1 calc(50% - 0.3rem);
    }
}