/* Commune Reports Dashboard — Brand Styled */

/* ── Web Font Imports ─────────────────────────────────────────── */
/* Proxima Nova → Nunito Sans (closest free match, same humanist feel) */
/* Museo → Libre Baskerville (similar warm serif for headings) */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Brand Tokens ─────────────────────────────────────────────── */
:root {
    --sidebar-width: 250px;

    /* Commune palette */
    --linen:        #f4f0e3;
    --linen-light:  #faf8f2;
    --linen-dark:   #e8e2d0;
    --sage:         #9aa583;
    --sage-light:   #b5bdaa;
    --sage-dark:    #7d8c6e;
    --lemon:        #d8da47;
    --lemon-light:  #e8ea7a;
    --lemon-muted:  #c5c73d;
    --desert:       #c8856a;
    --desert-light: #daa48f;
    --desert-dark:  #a86b52;
    --stone:        #6b7d8a;
    --stone-light:  #8fa0ad;
    --stone-dark:   #4a5a65;
    --forest:       #3d5b47;
    --forest-light: #4f7259;
    --forest-dark:  #2c3e33;

    /* Semantic */
    --bg-page:      var(--linen);
    --bg-card:      #ffffff;
    --bg-sidebar:   var(--forest-dark);
    --text-primary: #2c3530;
    --text-secondary: #5e6b62;
    --text-muted:   #8a9189;
    --border:       var(--linen-dark);
    --accent:       var(--forest);
    --success:      var(--sage-dark);
    --warning:      var(--desert);
    --danger:       var(--desert-dark);

    /* Fonts */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-primary);
    overflow-x: hidden;
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Auth Screen ──────────────────────────────────────────────── */
.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(160deg, var(--linen) 0%, var(--linen-dark) 100%);
}

.auth-logo {
    width: 180px;
    margin-bottom: 2rem;
}

.auth-container h2 {
    font-family: var(--font-heading);
    color: var(--forest);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.btn-google {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: white;
    border: 2px solid var(--linen-dark);
    border-radius: 8px;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-google:hover {
    border-color: var(--sage);
    box-shadow: 0 2px 12px rgba(61, 91, 71, 0.12);
    transform: translateY(-1px);
}

.auth-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    background: #f0f0f0;
    color: #444;
    border: 1px solid #ccc;
    transition: all 0.2s;
    margin-top: 0.75rem;
    width: 100%;
}

.btn-external:hover {
    background: #e0e0e0;
    border-color: #bbb;
    transform: translateY(-1px);
}

.auth-back-btn {
    padding: 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--sage, #5a7a5a);
    text-decoration: none;
}

#auth-external .form-label {
    font-size: 0.9rem;
    color: var(--forest, #3d5b47);
    font-weight: 500;
}

#auth-external {
    max-width: 320px;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    color: rgba(244, 240, 227, 0.75);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo {
    width: 32px;
    height: auto;
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--linen);
    letter-spacing: 0.3px;
}

.sidebar-nav {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 400;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    color: rgba(244, 240, 227, 0.65);
}

.sidebar-nav .nav-item:hover {
    background: rgba(154, 165, 131, 0.12);
    color: var(--linen);
}

.sidebar-nav .nav-item.active {
    background: rgba(154, 165, 131, 0.18);
    color: var(--sage-light);
    border-left-color: var(--sage);
    font-weight: 600;
}

.sidebar-nav .nav-item i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.sidebar-nav .nav-section {
    padding: 14px 24px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(244, 240, 227, 0.38);
    cursor: default;
    user-select: none;
}

.sidebar-nav .nav-section:first-child {
    padding-top: 4px;
}

.sidebar-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-info {
    font-size: 0.78rem;
    color: rgba(244, 240, 227, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer .btn {
    font-family: var(--font-body);
    font-size: 0.78rem;
    border-color: rgba(244, 240, 227, 0.2);
    color: rgba(244, 240, 227, 0.5);
}

.sidebar-footer .btn:hover {
    border-color: var(--sage);
    color: var(--sage-light);
}

/* ── Main Content ─────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

/* Data-health banner (Facebook token expiry / ad-data staleness) */
.report-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 28px;
    font-size: 0.9rem;
    line-height: 1.4;
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 60;
}
.report-alert-banner.alert-error {
    background: #f8d7da;
    color: #842029;
    border-bottom-color: #f1aeb5;
}
.report-alert-banner.alert-warn {
    background: #fff3cd;
    color: #664d03;
    border-bottom-color: #ffe69c;
}
.report-alert-banner .report-alert-icon {
    font-size: 1.05rem;
    line-height: 1.3;
}
.report-alert-banner .report-alert-text { flex: 1; }

.filters-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.filter-group .form-control,
.filter-group .form-select {
    font-family: var(--font-body);
    font-size: 0.85rem;
    border-color: var(--linen-dark);
    border-radius: 6px;
}

.filter-group .form-control:focus,
.filter-group .form-select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(154, 165, 131, 0.2);
}

.filters-bar .btn-outline-secondary {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 6px;
    color: var(--forest);
    border-color: var(--sage);
}

.filters-bar .btn-outline-secondary:hover {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--linen);
}

.filters-bar .btn-primary {
    background: var(--forest);
    border-color: var(--forest);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 6px;
}

.filters-bar .btn-primary:hover {
    background: var(--forest-light);
    border-color: var(--forest-light);
}

.page-content {
    padding: 28px;
}

/* A flex page fills the window so its .tp-table-scroll can take the rest of
   the height. It scrolls when its content is taller than the window, which
   happens at 801–1000px when .tp-table-scroll's 300px floor meets a tall
   header and KPI row: with overflow hidden the last rows (or whole sections)
   were simply out of reach (2026-10-05). */
.page-content.flex-page {
    height: calc(100vh - 65px);
    overflow-y: auto;
}

@media (max-height: 800px) {
    .page-content.flex-page {
        height: auto;
        overflow: visible;
    }
    .tp-table-scroll {
        max-height: 50vh;
    }
}

/* ── Section Headers ──────────────────────────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--forest);
}

.section-header h2 i {
    color: var(--sage);
}

/* Trailing period toggle buttons */
.section-header .btn-outline-primary {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--forest);
    border-color: var(--sage);
    border-radius: 20px;
    padding: 4px 14px;
}

.section-header .btn-outline-primary:hover,
.section-header .btn-outline-primary.active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--linen);
}

/* ── KPI Cards ────────────────────────────────────────────────── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(44, 53, 48, 0.06);
    border-left: 4px solid var(--sage);
    transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 53, 48, 0.1);
}

.kpi-card.highlight { border-left-color: var(--forest); }
.kpi-card.success   { border-left-color: var(--sage-dark); }
.kpi-card.warning   { border-left-color: var(--desert); }
.kpi-card.danger    { border-left-color: var(--desert-dark); }

.kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.kpi-value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-change {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
}

.kpi-change.up   { color: var(--sage-dark); }
.kpi-change.down { color: var(--desert-dark); }

/* ── Chart Panels ─────────────────────────────────────────────── */
.chart-panel {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(44, 53, 48, 0.06);
    margin-bottom: 24px;
}

.chart-panel h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--forest);
    margin: 0 0 16px 0;
}

.chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

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

/* ── Data Tables ──────────────────────────────────────────────── */
.data-table-container {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(44, 53, 48, 0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.data-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--linen-dark);
}

.data-table-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--forest);
    margin: 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.data-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--linen-dark);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.data-table thead th:hover {
    color: var(--forest);
}

.data-table thead th .sort-icon {
    margin-left: 4px;
    opacity: 0.25;
    font-size: 0.7rem;
}

.data-table thead th.sorted .sort-icon {
    opacity: 1;
    color: var(--forest);
}

.data-table tbody tr {
    border-bottom: 1px solid var(--linen);
    transition: background 0.1s;
}

.data-table tbody tr:hover {
    background: var(--linen-light);
}

.data-table tbody td {
    padding: 10px 14px;
    white-space: nowrap;
}

.data-table .number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table .positive { color: var(--sage-dark); font-weight: 600; }
.data-table .negative { color: var(--desert-dark); font-weight: 600; }

/* ── Loading & Empty States ───────────────────────────────────── */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner .spinner-border {
    color: var(--sage) !important;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--sage);
}

.empty-state .btn-primary {
    background: var(--forest);
    border-color: var(--forest);
}

/* ── Drill-Through Links ──────────────────────────────────────── */
.drill-link {
    color: var(--forest);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

.drill-link:hover {
    text-decoration: underline;
    color: var(--forest-light);
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge-positive {
    background: rgba(154, 165, 131, 0.2);
    color: var(--sage-dark);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-negative {
    background: rgba(200, 133, 106, 0.2);
    color: var(--desert-dark);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── Table Filter Selects ─────────────────────────────────────── */
.data-table-header .form-select {
    font-family: var(--font-body);
    font-size: 0.82rem;
    border-color: var(--linen-dark);
    border-radius: 6px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-content {
        padding: 16px;
    }
}

/* ── Cohort Table ─────────────────────────────────────────────── */
.cohort-table .year-row {
    cursor: pointer;
    background: var(--linen-light);
}

.cohort-table .year-row:hover {
    background: var(--linen-dark) !important;
}

.cohort-table .year-row td {
    padding: 10px 14px;
    border-bottom: 2px solid var(--linen-dark);
}

.cohort-table .year-label {
    white-space: nowrap;
    font-size: 0.9rem;
}

.cohort-table .year-label i {
    color: var(--sage-dark);
    font-size: 0.75rem;
}

.cohort-table .month-row {
    cursor: pointer;
    transition: background 0.1s;
}

.cohort-table .month-row:hover {
    background: rgba(154, 165, 131, 0.08) !important;
}

.cohort-table .month-row.selected {
    background: rgba(154, 165, 131, 0.18) !important;
    border-left: 3px solid var(--sage);
}

.cohort-table .month-label {
    padding-left: 32px !important;
    white-space: nowrap;
}

.cohort-table .total-row {
    position: sticky;
    bottom: -1px;
    z-index: 10;
    background: var(--forest-dark);
    color: var(--linen);
}

.cohort-table .total-row td {
    padding: 12px 14px;
    border-top: 2px solid var(--forest);
}

.cohort-table .total-row .positive,
.cohort-table .total-row .negative {
    color: var(--linen);
}

.cohort-table .total-row:hover {
    background: var(--forest-dark);
    color: var(--linen);
}

/* ── Funnel Picker ────────────────────────────────────────────── */
.funnel-picker {
    position: relative;
    min-width: 200px;
}

.funnel-picker-btn {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background: white;
    max-width: 260px;
}

.funnel-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 300px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    margin-top: 4px;
}

.funnel-picker-search {
    padding: 8px;
    border-bottom: 1px solid var(--linen-dark);
}

.funnel-picker-search input {
    font-size: 0.85rem;
}

.funnel-picker-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.funnel-picker-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.1s;
}

.funnel-picker-list label:hover {
    background: var(--linen-light);
}

.funnel-picker-list label.d-none {
    display: none !important;
}

.funnel-picker-list input[type="checkbox"] {
    accent-color: var(--forest);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.funnel-picker-actions {
    padding: 4px 8px;
    border-top: 1px solid var(--linen-dark);
    text-align: right;
}

.funnel-picker-actions .btn-link {
    color: var(--stone);
    font-size: 0.8rem;
    text-decoration: none;
}

.funnel-picker-actions .btn-link:hover {
    color: var(--desert);
}

/* ── Tag Performance Page (flex layout, table fills remaining space) ── */
.tp-page-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 16px;
}

.tp-page-flex > .section-header,
.tp-page-flex > .kpi-row,
.tp-page-flex > .chart-grid {
    flex-shrink: 0;
}

.tp-page-flex > * { margin-bottom: 0 !important; }
.tp-page-flex .chart-panel { margin-bottom: 0 !important; }

.tp-table-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Never shorter than its header plus the scroll box's 300px floor. It was
       min-height 0 with the card's overflow hidden, so on a short window the
       card shrank (to nothing, on Membership) and cut its own rows off.
       overflow: clip keeps the rounded corners without making the card a
       scroll container, which is what lets min-height: auto hold; the
       .tp-table-scroll containment below keeps that minimum at header + 300px
       rather than the whole table. */
    min-height: auto;
    overflow: clip;
    margin-bottom: 0;
}

/* Size containment: the table's rows don't count toward the scroll box's
   minimum height, so the box fills what the window leaves (300px at least)
   and scrolls inside, with its sticky header. Tall windows only: below 801px
   the page is not pinned and the box is capped at 50vh instead. */
@media (min-height: 801px) {
    .tp-table-flex > .tp-table-scroll {
        contain: size;
    }
}

.tp-table-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 300px;
}

.tp-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    box-shadow: 0 1px 0 var(--linen-dark);
}

/* Scrollbar styling for table */
.tp-table-scroll::-webkit-scrollbar {
    width: 10px;
}

.tp-table-scroll::-webkit-scrollbar-track {
    background: var(--linen-dark);
    border-radius: 5px;
}

.tp-table-scroll::-webkit-scrollbar-thumb {
    background: var(--sage);
    border-radius: 5px;
}

.tp-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--sage-dark);
}

.tp-table-scroll tfoot .total-row {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--forest-dark);
    color: var(--linen);
}

.tp-table-scroll tfoot .total-row td {
    padding: 12px 14px;
    border-top: 2px solid var(--forest);
}

.tp-table-scroll tfoot .total-row:hover {
    background: var(--forest-dark);
    color: var(--linen);
}

.tp-table-scroll tfoot .total-row .positive,
.tp-table-scroll tfoot .total-row .negative {
    color: var(--linen);
}

/* Drill button */
#ca-drill-btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 8px;
    background: var(--forest);
    border-color: var(--forest);
}

#ca-drill-btn:hover {
    background: var(--forest-light);
    border-color: var(--forest-light);
}

/* ── CSV Export Button ────────────────────────────────────────── */
.csv-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--stone);
    background: transparent;
    border: 1px solid var(--linen-dark);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.csv-export-btn:hover {
    color: var(--forest);
    border-color: var(--sage);
    background: var(--linen);
}

.csv-export-btn i {
    font-size: 0.7rem;
}

/* ── Scrollbar Styling ────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--linen);
}

::-webkit-scrollbar-thumb {
    background: var(--sage-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sage);
}

/* External link nav item — opens a separate page (not SPA-routed) */
.sidebar-nav .nav-item-link {
    list-style: none;
}
.sidebar-nav .nav-item-link a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 400;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    color: rgba(244, 240, 227, 0.65);
    text-decoration: none;
}
.sidebar-nav .nav-item-link a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(244, 240, 227, 0.95);
}
.sidebar-nav .nav-item-link a i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}