/* -----------------------------------------------------------------------
   Typography & page background — Sunflower Twilight palette
----------------------------------------------------------------------- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #A3D0D4;
}

/* Override Bootstrap success/danger text to match PBI positive/negative */
.text-success { color: #46ABB0 !important; }
.text-danger  { color: #E0564D !important; }

/* -----------------------------------------------------------------------
   Wide screen: cap content at 1400px and center
----------------------------------------------------------------------- */
.container-fluid {
    max-width: 1400px;
}

/* Net Worth: opt-in container that expands at 2300px+ */
@media (min-width: 2300px) {
    .container-fluid.wide-container {
        max-width: none;
    }
    .col-wide-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* -----------------------------------------------------------------------
   Cashflow / Savings wide section — charts left, table right at 2300px+
   Below 2300px behaves identically to the capped container above.
----------------------------------------------------------------------- */
.wide-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0.75rem;
    margin-bottom: 2rem;
}

@media (min-width: 2300px) {
    .wide-section {
        max-width: none;
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    .wide-section .charts-pane {
        flex: 0 0 55%;
        min-width: 0;
    }
    .wide-section .table-pane {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
    }
}

/* -----------------------------------------------------------------------
   Navbar — sticky top, active page highlighted in gold
----------------------------------------------------------------------- */
.navbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: white !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem !important;
    transition: color 0.15s;
}

.navbar-nav .nav-link:hover {
    color: white !important;
}

/* Active page — targets Bootstrap's .active class set by dbc.NavLink active='exact' */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.nav-active {
    color: #CCAA14 !important;
    font-weight: 700;
}

/* User dropdown in navbar */
.navbar-nav .dropdown-toggle {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.9rem;
    font-weight: 500;
}

.navbar-nav .dropdown-toggle:hover {
    color: white !important;
}

/* -----------------------------------------------------------------------
   Cards — more breathing room and stronger depth
----------------------------------------------------------------------- */
.card-body {
    padding: 1.25rem 1.5rem;
}

/* -----------------------------------------------------------------------
   Chart card wrapper — white surface with subtle lift
----------------------------------------------------------------------- */
.chart-card {
    background: white;
    border: none;
}

/* -----------------------------------------------------------------------
   Date preset buttons — tight single row
----------------------------------------------------------------------- */
/* Control gap from the flex container so Bootstrap item margins can't override */
.preset-scroll > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    column-gap: 3px !important;
    row-gap: 4px !important;
}

@media (min-width: 992px) {
    .preset-scroll > div {
        justify-content: flex-end;
        column-gap: 6px !important;
        row-gap: 6px !important;
    }
}

/* Zero out Bootstrap's margin-right: 1rem on form-check-inline — multiple selectors
   for robustness across DBC versions */
.preset-scroll .form-check,
.preset-scroll .form-check-inline,
.preset-scroll > div > div {
    margin: 0 !important;
    padding-left: 0 !important;
}

.preset-btn {
    white-space: nowrap;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    background-color: white !important;
    border-color: #004753 !important;
    color: #004753 !important;
    border-radius: 4px !important;
    transition: background-color 0.15s, color 0.15s;
    padding: 0.2rem 0.5rem;
}

.preset-btn:hover {
    background-color: #003340 !important;
    color: white !important;
}

.btn-check:checked + .preset-btn,
.preset-btn.active {
    background-color: #004753 !important;
    color: white !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------
   Mobile: visual separation between stacked charts
----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .chart-col {
        margin-bottom: 1.25rem;
    }
}