@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* --- VARIABLES --- */
/* Light Mode.
   Palette, radii and shadows follow the budget design: a navy brand on cool greys, generous
   corner radii, and shadows soft enough to read as depth rather than as a drawn edge. Pages
   should reach for these tokens instead of literal colours so the two themes stay in step. */
:root {
    /* Cool-grey neutrals + teal primary (original app palette, user preference), kept alongside the
       brand guide's fonts, ring+core logo, and per-domain rule: money/primary = teal, health = green. */
    --background-color: #f4f5f7;
    --surface-color: #ffffff;
    --surface-muted-color: #fafbfc;   /* group headers, table headers, inset strips */
    --hover-surface-color: #f4f6f7;   /* row/nav/button hover */
    --text-primary-color: #17303f;
    --text-secondary-color: #6b7683;
    --text-faint-color: #a9b2bc;      /* captions, uppercase group labels */
    --border-color: #e9ecef;          /* dividing lines between surfaces */
    --border-strong-color: #dde1e6;   /* the edge of an interactive control */
    --primary-brand-color: #1c556b;   /* original teal */
    --primary-brand-hover-color: #164658;
    --secondary-brand-color: #2c7da0;
    --accent-positive-color: #15803d;
    --accent-negative-color: #c0392b;
    --warning-color: #c2740a;
    --info-color: #2c7da0;
    --card-shadow: 0 1px 2px rgba(16, 40, 60, 0.04);
    --overlay-shadow: 0 12px 32px rgba(16, 40, 60, 0.14);   /* dropdowns, modals, popovers */
    --radius-card: 16px;
    --radius-control: 10px;
    --radius-pill: 999px;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 80px;
    --header-height: 56px;
    --footer-height: 40px;

    /* Brand extras: the navy anchor, per-domain colours, and typefaces. */
    --navy-color: #16233F;
    --money-color: #1c556b;   --money-hover: #164658;   --money-tint: #E3EDF0;   --money-tint-text: #234B5C;
    --health-color: #1E9E74;  --health-hover: #18815F;  --health-tint: #E4F3ED;  --health-tint-text: #265446;
    --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Dark Mode.
   Navy-tinted rather than neutral black, so the brand still belongs to the surfaces it sits on.
   Every token above has a counterpart here; anything hard-coded in a page will not adapt. */
html.dark-mode {
    /* Navy-based dark theme, per the brand's deep-navy dark surfaces. */
    --background-color: #0f1720;
    --surface-color: #17212b;
    --surface-muted-color: #1c2732;
    --hover-surface-color: #22303d;
    --text-primary-color: #e3e8ec;
    --text-secondary-color: #93a1ad;
    --text-faint-color: #71818f;
    --border-color: #24303c;
    --border-strong-color: #2f3d4a;
    --primary-brand-color: #4d93ad;   /* original teal */
    --primary-brand-hover-color: #5ea5c0;
    --secondary-brand-color: #6fb3cc;
    --accent-positive-color: #46b06e;
    --accent-negative-color: #E0685A;
    --warning-color: #d99a3c;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --overlay-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

    --navy-color: #16233F;
    --money-color: #4d93ad;   --money-hover: #5ea5c0;   --money-tint: rgba(77,147,173,.14);  --money-tint-text: #a9d4e0;
    --health-color: #33C08B;  --health-hover: #4FD3A0;  --health-tint: rgba(51,192,139,.14);  --health-tint-text: #A7E8CF;
}

/* --- BASE & TYPOGRAPHY --- */
body {
    font-family: var(--font-body);
    background-color: var(--background-color);
    color: var(--text-primary-color);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings tighten as they grow: at display sizes the default tracking reads as loose.
   Space Grotesk carries display/heading duty per the brand guide. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .sidebar-brand-text {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary-color);
}
h1, .h1 { letter-spacing: -0.02em; }

/* Bootstrap only gained .fw-semibold and .fw-medium in 5.3, and this app is pinned to 5.1.3 —
   but the templates use them 130-odd times (category names, card titles, table emphasis). Without
   these they silently render at normal weight, which is why emphasised text looked lighter than
   the bold figures beside it. Defining them here fixes every usage at once. */
.fw-semibold { font-weight: 600 !important; }
.fw-medium   { font-weight: 500 !important; }

a {
    color: var(--primary-brand-color);
    text-decoration: none;
}
a:hover {
    color: var(--primary-brand-hover-color);
}

/* --- LAYOUT --- */
.main-wrapper {
    transition: margin-left 0.3s ease;
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    min-height: 100vh;
}

body.sidebar-collapsed .main-wrapper {
    margin-left: var(--sidebar-collapsed-width);
}

/* --- HEADER --- */
#header {
    height: var(--header-height);
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    transition: left 0.3s ease, width 0.3s ease;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

body.sidebar-collapsed #header {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

#header .btn-link {
    color: var(--text-secondary-color);
}
#header .btn-link:hover {
    color: var(--text-primary-color);
}
#header .btn-link:focus,
#header .btn-link:active {
    outline: none !important;
    box-shadow: none !important;
}

#header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --- SIDEBAR --- */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1030;
    background-color: var(--surface-color);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.3s ease;
}

body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 0 0 1rem; /* Add horizontal padding */
    border-bottom: 1px solid var(--border-color); /* Separator */
    margin-bottom: 1rem; /* Space below header */
}

body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary-color);   /* navy wordmark, per the brand guide */
    padding: 0; /* Remove previous padding */
}
.sidebar-brand i, .sidebar-brand svg {
    font-size: 2rem;
    margin-right: 0.5rem;
    flex: none;
    transition: margin 0.3s ease;
}
body.sidebar-collapsed .sidebar-brand i, body.sidebar-collapsed .sidebar-brand svg {
    margin-right: 0;
}
body.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

/* Hide sidebar-brand when collapsed sidebar is hovered */
body.sidebar-collapsed #sidebar:hover .sidebar-brand {
    display: none;
}

body.sidebar-collapsed #sidebar:hover {
    cursor: ew-resize;
}

/* Sidebar Toggle Button */
#sidebar-toggle {
    color: var(--text-secondary-color);
    transition: opacity 0.3s ease;
}
#sidebar-toggle:hover {
    color: var(--text-primary-color);
}

#sidebar-toggle:focus,
#sidebar-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

body.sidebar-collapsed #sidebar-toggle {
    opacity: 0; /* Hide when collapsed */
    position: absolute; /* Allow centering */
    top: calc(var(--header-height) / 2 - 1rem); /* Center vertically */
    left: 50%;
    transform: translateX(-50%);
}

body.sidebar-collapsed #sidebar:hover #sidebar-toggle {
    opacity: 1; /* Show on hover when collapsed */
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 550;
    line-height: 1.35;
    color: var(--text-secondary-color);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-control);
    white-space: nowrap;
    margin-bottom: 2px;
}
/* Sub-items sit under a parent that already names the group, so they can be quieter and tighter. */
.sidebar-nav .nav .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}
.sidebar-nav .nav-link:hover {
    color: var(--text-primary-color);
    background-color: var(--hover-surface-color);
}
.sidebar-nav .nav-link i {
    font-size: 1.1rem;
    margin-right: 0.8rem;
    width: 22px; /* Align icons */
    text-align: center;
    transition: margin 0.3s ease;
}
/* The submenu chevron is an affordance, not an icon, but the rule above outranks the .small
   class it is marked up with and was rendering it at the full 20px icon size. */
.sidebar-nav .nav-link .bi-chevron-down {
    font-size: 0.7rem;
    width: auto;
    margin-right: 0;
    color: var(--text-faint-color);
}
body.sidebar-collapsed .sidebar-nav .nav-link span,
body.sidebar-collapsed .sidebar-nav .nav-link .bi-chevron-down {
    display: none;
}

@media (min-width: 992px) { /* Apply only on large screens and up */
    body.sidebar-collapsed #sidebar .sidebar-nav .nav-link {
        justify-content: center !important; /* Center content horizontally */
        padding: 0.75rem 0 !important; /* Adjust padding for collapsed state */
    }

    body.sidebar-collapsed #sidebar .sidebar-nav .nav-link i {
        margin-right: 0 !important; /* Remove margin when collapsed */
    }
}

/* Mobile Offcanvas */
.offcanvas {
    background-color: var(--surface-color);
    color: var(--text-primary-color);
}
.offcanvas .nav-link {
    color: var(--text-secondary-color);
}
.offcanvas .nav-link:hover {
    color: var(--text-primary-color);
}
.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--surface-color); /* Ensure contrasting background */
}

.offcanvas-header .offcanvas-title {
    color: var(--primary-brand-color) !important; /* Ensure primary text color */
}

.offcanvas-title {
    /* color: var(--text-primary-color) !important; */ /* This rule is now redundant */
    margin-left: auto;
    margin-right: auto;
}

html.dark-mode .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important; /* Force white color for the close button in dark mode */
}

.offcanvas-header .btn-close {
    /* The btn-close-white class handles the color */
}


/* --- MAIN CONTENT --- */
#main {
    background-color: var(--background-color);
}

/* --- FOOTER --- */
#footer {
    height: var(--footer-height);
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: left 0.3s ease, width 0.3s ease;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

body.sidebar-collapsed #footer {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* --- BOOTSTRAP OVERRIDES & THEME-AWARE COMPONENTS --- */
.card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
}
.card-header, .card-footer {
    background-color: transparent;
    border-color: var(--border-color);
}
.card-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
}
/* Bootstrap rounds these to its own --bs-border-radius, which leaves a visible corner notch
   inside the card once the card itself is rounded further. */
.card-header:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.card-footer:last-child  { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* --- BUTTONS --- */
.btn {
    border-radius: var(--radius-control);
    font-weight: 550;
}
.btn-primary {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
    font-weight: 600;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-brand-hover-color);
    border-color: var(--primary-brand-hover-color);
    color: #fff;
}
/* Bootstrap's solid grey reads as heavily as the primary action next to it. A secondary button
   here is a quiet neutral — this is the Cancel sitting beside Save in every modal. */
.btn-secondary {
    background-color: var(--surface-muted-color);
    border-color: var(--border-strong-color);
    color: var(--text-primary-color);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--hover-surface-color);
    border-color: var(--border-strong-color);
    color: var(--text-primary-color);
}
/* The workhorse button in this design is a neutral outline on white, not a grey-tinted one. */
.btn-outline-secondary {
    color: var(--text-primary-color);
    border-color: var(--border-strong-color);
    background-color: var(--surface-color);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary {
    color: var(--text-primary-color);
    background-color: var(--hover-surface-color);
    border-color: var(--border-strong-color);
}
.btn-outline-primary {
    color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
    color: #fff;
}
.btn:focus-visible, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(28, 85, 107, 0.2);
}
.btn-link { text-decoration: none; }

/* --- FORMS --- */
.form-control, .form-select {
    background-color: var(--surface-color);
    border-color: var(--border-strong-color);
    border-radius: var(--radius-control);
    color: var(--text-primary-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 0.2rem rgba(28, 85, 107, 0.18);
}
.form-label { font-weight: 550; font-size: 0.9rem; }
.input-group-text {
    background-color: var(--surface-muted-color);
    border-color: var(--border-strong-color);
    color: var(--text-secondary-color);
}
.form-check-input:checked {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
}

/* --- DROPDOWNS / MODALS / POPOVERS --- */
.dropdown-menu {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--overlay-shadow);
    padding: 6px;
    color: var(--text-primary-color);
}
.dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.625rem;
    color: var(--text-primary-color);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--hover-surface-color);
    color: var(--text-primary-color);
}
.dropdown-header {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint-color);
    padding: 0.5rem 0.625rem 0.375rem;
}
.dropdown-divider { border-color: var(--border-color); }

.modal-content {
    background-color: var(--surface-color);
    color: var(--text-primary-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--overlay-shadow);
}
.modal-header, .modal-footer { border-color: var(--border-color); }

/* --- CONTEXTUAL COLOURS ---
   Pages across the app label things with Bootstrap's stock background and text utilities. Left
   alone those keep Bootstrap's default blues and cyans, which fight the brand everywhere they
   appear (asset badges being the worst of it), so they are remapped onto the palette here rather
   than edited out of ~69 templates. */
.bg-primary   { background-color: var(--primary-brand-color) !important; }
.bg-secondary { background-color: var(--text-secondary-color) !important; }
.bg-info      { background-color: var(--secondary-brand-color) !important; }
.bg-success   { background-color: var(--accent-positive-color) !important; }
.bg-danger    { background-color: var(--accent-negative-color) !important; }
.bg-warning   { background-color: var(--warning-color) !important; color: #fff !important; }
.bg-light     { background-color: var(--surface-muted-color) !important; }
.bg-dark      { background-color: var(--text-primary-color) !important; }
.text-primary { color: var(--primary-brand-color) !important; }
.text-success { color: var(--accent-positive-color) !important; }
.text-danger  { color: var(--accent-negative-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info    { color: var(--secondary-brand-color) !important; }
.text-secondary { color: var(--text-secondary-color) !important; }
.border-primary { border-color: var(--primary-brand-color) !important; }

.btn-success { background-color: var(--accent-positive-color); border-color: var(--accent-positive-color); }
.btn-danger  { background-color: var(--accent-negative-color); border-color: var(--accent-negative-color); }
.btn-info    { background-color: var(--secondary-brand-color); border-color: var(--secondary-brand-color); color: #fff; }
.btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: #fff; }
.btn-outline-danger  { color: var(--accent-negative-color); border-color: var(--accent-negative-color); }
.btn-outline-success { color: var(--accent-positive-color); border-color: var(--accent-positive-color); }
.btn-outline-warning { color: var(--warning-color); border-color: var(--warning-color); }
.btn-outline-info    { color: var(--secondary-brand-color); border-color: var(--secondary-brand-color); }

/* --- BADGES / ALERTS / PROGRESS --- */
.badge { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.01em; }
.alert { border-radius: var(--radius-card); border-width: 1px; }
.progress { background-color: var(--border-color); border-radius: var(--radius-pill); }
.progress-bar { background-color: var(--primary-brand-color); }
.list-group-item { background-color: var(--surface-color); color: var(--text-primary-color); border-color: var(--border-color); }
html.dark-mode .form-control::placeholder { color: var(--text-secondary-color); opacity: 0.7; }
html.dark-mode .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

.table {
    color: var(--text-primary-color);
    border-color: var(--border-color);
    --bs-table-bg: transparent;
    /* Bootstrap re-asserts a hardcoded #212529 on striped/hover/active *cells* through these
       variables, and a cell-level rule outranks the colour set on .table above. Left alone, every
       odd row in a .table-striped keeps near-black text and vanishes against a dark background —
       the striping rule below only ever restyled the accent background, never the text. */
    --bs-table-striped-color: var(--text-primary-color);
    --bs-table-hover-color: var(--text-primary-color);
    --bs-table-active-color: var(--text-primary-color);
}
/* Bootstrap separates table sections with a 2px currentColor rule, which lands as a near-black
   bar under every header once the palette lightens around it. */
.table > :not(:first-child) {
    border-top: 1px solid var(--border-color);
}
/* Column headers read as labels, not as data: small, uppercase, muted. */
.table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint-color);
    background-color: var(--surface-muted-color);
    border-bottom: 1px solid var(--border-color);
}
.table > tbody > tr > td { border-color: var(--border-color); }
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--hover-surface-color);
    color: var(--text-primary-color);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(0,0,0,0.02);
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,0.04);
}

.text-muted { color: var(--text-secondary-color) !important; }
.amount-positive { color: var(--accent-positive-color) !important; }
.amount-negative { color: var(--accent-negative-color) !important; }

/* Cards, list groups, modals and progress bars all resolve through the tokens above, so they
   need no dark-mode rules of their own. What follows is only what tokens cannot reach. */
html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
    background-color: var(--hover-surface-color);
    color: var(--text-primary-color);
}

html.dark-mode .list-group-item.active {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
    color: #fff;
}

/* Bootstrap draws the close glyph as a dark SVG background, which vanishes on a dark surface. */
html.dark-mode .modal-header .btn-close,
html.dark-mode .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Bootstrap's contextual backgrounds are tuned for a white page and glow on a dark one. */
html.dark-mode .alert-success { background-color: rgba(70, 176, 110, 0.12); border-color: rgba(70, 176, 110, 0.3); color: #8fd8a9; }
html.dark-mode .alert-danger  { background-color: rgba(224, 104, 90, 0.12); border-color: rgba(224, 104, 90, 0.3); color: #f0a79c; }
html.dark-mode .alert-warning { background-color: rgba(217, 154, 60, 0.12); border-color: rgba(217, 154, 60, 0.3); color: #e8c48a; }
html.dark-mode .alert-info    { background-color: rgba(111, 179, 204, 0.12); border-color: rgba(111, 179, 204, 0.3); color: #a5d3e4; }

@media (max-width: 991.98px) {
    .offcanvas.show .sidebar-nav .nav-link span,
    .offcanvas.show .sidebar-nav .nav-link .bi-chevron-down {
        display: inline-block !important;
    }
    .main-wrapper {
        margin-left: 0 !important;
    }
    #header {
        left: 0 !important;
        width: 100% !important;
    }
    /* Existing rules */
    .main-wrapper,
    #header,
    #footer {
        margin-left: 0;
        left: 0;
        width: 100%;
    }

    body.sidebar-collapsed #footer {
        left: 0;
        width: 100%;
    }
}