:root {
    --b-50:  95.13% 0.023 256.10;
    --b-100: 90.17% 0.048 259.10;
    --b-200: 80.72% 0.097 258.14;
    --b-300: 71.49% 0.149 258.39;
    --b-400: 63.31% 0.198 258.73;
    --b-500: 56.35% 0.241 260.82;
    --b-600: 48.02% 0.201 260.48;
    --b-700: 39.11% 0.161 260.13;
    --b-800: 29.89% 0.116 259.04;
    --b-900: 19.67% 0.068 256.39;
    --b-950: 12.00% 0.042 257.00;
}

/* ── Global font ── */
body { font-family: 'Inter', sans-serif; }

/* ── DaisyUI theme: Digital Blue brand palette ── */
[data-theme="light"] {
    --p: var(--b-500);                   /* primary — Digital Blue 500 */
    --pc: 100% 0 0;                     /* primary-content — white */
    --pf: var(--b-600);                  /* primary-focus — Digital Blue 600 */
    --s: var(--b-100);                   /* secondary — Digital Blue 100 */
    --sc: var(--b-900);                  /* secondary-content — Digital Blue 900 */
    --sf: var(--b-200);                  /* secondary-focus — Digital Blue 200 */
    --a: var(--b-400);                   /* accent — Digital Blue 400 */
    --ac: 100% 0 0;                     /* accent-content — white */
    --af: var(--b-500);                  /* accent-focus — Digital Blue 500 */
    --su: 72% 0.14 152;                 /* success */
    --suc: 100% 0 0;
    --er: 68% 0.16 25;                  /* error */
    --erc: 100% 0 0;
    --wa: 78% 0.14 75;                  /* warning */
    --wac: 25% 0.04 75;
    --in: 72% 0.12 230;                 /* info */
    --inc: 100% 0 0;
    --rounded-btn: 1.9rem;              /* pill-shaped buttons */
    --b1: 100% 0 0;                    /* card/element bg — white */
    --b2: 100% 0 0;                    /* page bg — white */
    --b3: 97.5% 0.006 260;             /* inset panels — very subtle blue tint */
}
[data-theme="dark"] {
    --p: var(--b-400);                   /* primary — brand-400 (lighter in dark) */
    --pc: 0% 0 0;                        /* primary-content — black */
    --pf: var(--b-300);                  /* primary-focus — brand-300 */
    --s: var(--b-900);                   /* secondary — brand-900 */
    --sc: var(--b-100);                  /* secondary-content — brand-100 */
    --sf: var(--b-800);                  /* secondary-focus — brand-800 */
    --a: var(--b-400);                   /* accent */
    --ac: 100% 0 0;
    --af: var(--b-500);
    --su: 72% 0.14 152;
    --suc: 100% 0 0;
    --er: 68% 0.16 25;
    --erc: 100% 0 0;
    --wa: 78% 0.14 75;
    --wac: 25% 0.04 75;
    --in: 72% 0.12 230;
    --inc: 100% 0 0;
    --rounded-btn: 1.9rem;
    --b1: 16% 0.03 260;                 /* card bg — near-black navy */
    --b2: 13% 0.025 260;                /* page bg — darker navy */
    --b3: 20% 0.04 260;                 /* inset panels — slightly lighter navy */
    --bc: 90% 0.02 260;                 /* base content — near-white with blue tint */
}

/* ── Button base: Inter 500, 14px, padding from Coolors spec ── */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.9375rem 1.25rem;
    height: auto;
    min-height: auto;
    min-width: 6rem;
}
.btn-xs {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    min-width: 4.5rem;
}
@media (max-width: 639px) {
    .btn-xs {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
        min-width: auto;
    }
}
.btn-sm {
    font-size: 0.8125rem;
    padding: 0.625rem 1rem;
    min-width: 5.25rem;
}
.btn-lg {
    font-size: 1rem;
    padding: 1.125rem 1.75rem;
    min-width: 7.5rem;
}

/* ── Tertiary alias: .btn-tertiary = .btn-outline ── */
.btn-tertiary {
    --tw-border-opacity: 1;
    border-color: oklch(var(--p) / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: oklch(var(--p) / var(--tw-text-opacity));
    background-color: transparent;
    outline-color: oklch(var(--p) / 1);
}

/* ── Button disabled: Light mode (from Coolors spec) ── */
[data-theme="light"] .btn-primary[disabled],
[data-theme="light"] .btn-primary:disabled {
    background-color: oklch(var(--b-500));
    border-color: oklch(var(--b-500));
    color: oklch(100% 0 0);
    opacity: 0.4;
}
[data-theme="light"] .btn-secondary[disabled],
[data-theme="light"] .btn-secondary:disabled {
    background-color: oklch(var(--b-500));
    border-color: oklch(var(--b-500));
    color: oklch(100% 0 0);
    opacity: 0.4;
}
[data-theme="light"] .btn-outline[disabled],
[data-theme="light"] .btn-outline:disabled,
[data-theme="light"] .btn-tertiary[disabled],
[data-theme="light"] .btn-tertiary:disabled {
    background-color: transparent;
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
    opacity: 0.4;
}
/* ── Button disabled: Dark mode (from Coolors spec) ── */
[data-theme="dark"] .btn-primary[disabled],
[data-theme="dark"] .btn-primary:disabled {
    background-color: oklch(var(--b-400));
    border-color: oklch(var(--b-400));
    color: oklch(0% 0 0);
    opacity: 0.4;
}
[data-theme="dark"] .btn-secondary[disabled],
[data-theme="dark"] .btn-secondary:disabled {
    background-color: oklch(var(--b-400));
    border-color: oklch(var(--b-400));
    color: oklch(0% 0 0);
    opacity: 0.4;
}
[data-theme="dark"] .btn-outline[disabled],
[data-theme="dark"] .btn-outline:disabled,
[data-theme="dark"] .btn-tertiary[disabled],
[data-theme="dark"] .btn-tertiary:disabled {
    background-color: transparent;
    border-color: oklch(var(--b-400));
    color: oklch(var(--b-400));
    opacity: 0.4;
}

/* ── Button state overrides: Light mode ── */
/* Primary: brand-500 → brand-700 hover → brand-800 active */
[data-theme="light"] .btn-primary:hover {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
}
[data-theme="light"] .btn-primary:active,
[data-theme="light"] .btn-primary.btn-active {
    background-color: oklch(var(--b-800));
    border-color: oklch(var(--b-800));
}
/* Secondary: brand-100 bg / brand-900 text → brand-200 hover → brand-300 active */
[data-theme="light"] .btn-secondary:hover {
    background-color: oklch(var(--b-200));
    border-color: oklch(var(--b-200));
    color: oklch(var(--b-900));
}
[data-theme="light"] .btn-secondary:active,
[data-theme="light"] .btn-secondary.btn-active {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
    color: oklch(var(--b-900));
}
/* Tertiary: brand-500 border+text → brand-50 bg hover → brand-100 bg + brand-700 active */
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-tertiary {
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .btn-tertiary:hover {
    background-color: oklch(var(--b-50));
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
[data-theme="light"] .btn-outline:active,
[data-theme="light"] .btn-outline.btn-active,
[data-theme="light"] .btn-tertiary:active,
[data-theme="light"] .btn-tertiary.btn-active {
    background-color: oklch(var(--b-100));
    border-color: oklch(var(--b-700));
    color: oklch(var(--b-700));
}

/* ── Button state overrides: Dark mode (from Coolors spec) ── */
/* Doubled attribute selector for specificity over DaisyUI — no !important needed */
/* Primary: brand-400 bg / black text → brand-300 hover → brand-200 active */
[data-theme="dark"][data-theme="dark"] .btn-primary:hover {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
    color: oklch(0% 0 0);
}
[data-theme="dark"][data-theme="dark"] .btn-primary:active,
[data-theme="dark"][data-theme="dark"] .btn-primary.btn-active {
    background-color: oklch(var(--b-200));
    border-color: oklch(var(--b-200));
    color: oklch(0% 0 0);
}
/* Secondary: brand-900 bg / brand-100 text → brand-800 hover / brand-100 → brand-700 active / brand-900 text */
[data-theme="dark"][data-theme="dark"] .btn-secondary:hover {
    background-color: oklch(var(--b-800));
    border-color: oklch(var(--b-800));
    color: oklch(var(--b-100));
}
[data-theme="dark"][data-theme="dark"] .btn-secondary:active,
[data-theme="dark"][data-theme="dark"] .btn-secondary.btn-active {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
    color: oklch(var(--b-900));
}
/* Tertiary: brand-400 border+text → brand-900 bg hover → brand-900 bg + brand-300 active */
[data-theme="dark"][data-theme="dark"] .btn-outline,
[data-theme="dark"][data-theme="dark"] .btn-tertiary {
    border-color: oklch(var(--b-400));
    color: oklch(var(--b-400));
    background-color: transparent;
}
[data-theme="dark"][data-theme="dark"] .btn-outline:hover,
[data-theme="dark"][data-theme="dark"] .btn-tertiary:hover {
    background-color: oklch(var(--b-900));
    border-color: oklch(var(--b-400));
    color: oklch(var(--b-400));
}
[data-theme="dark"][data-theme="dark"] .btn-outline:active,
[data-theme="dark"][data-theme="dark"] .btn-outline.btn-active,
[data-theme="dark"][data-theme="dark"] .btn-tertiary:active,
[data-theme="dark"][data-theme="dark"] .btn-tertiary.btn-active {
    background-color: oklch(var(--b-900));
    border-color: oklch(var(--b-300));
    color: oklch(var(--b-300));
}
/* Branded horizontal scroll indicator for scrollable widgets.
   Uses a custom track+thumb element below the content because
   native scrollbars auto-hide on macOS/iOS and can't be forced visible. */
.scroll-branded {
    position: relative;
    /* Hide the native scrollbar but keep scrolling */
    scrollbar-width: none;           /* Firefox */
}
.scroll-branded::-webkit-scrollbar {
    display: none;                   /* WebKit */
}
/* Track: thin rounded line */
.scroll-branded-track {
    height: 2px;
    border-radius: 1px;
    margin: 0.75rem 1.5rem;
    background: oklch(var(--b-200));
    position: relative;
}
[data-theme="dark"] .scroll-branded-track {
    background: oklch(var(--b-700));
}
/* Thumb: rounded pill centered on the line */
.scroll-branded-thumb {
    height: 6px;
    border-radius: 3px;
    background: oklch(var(--b-400));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    min-width: 2rem;
    transition: background-color 150ms ease;
    cursor: grab;
}
.scroll-branded-thumb:active {
    cursor: grabbing;
}
.scroll-branded-thumb:hover {
    background: oklch(var(--b-500));
}
[data-theme="dark"] .scroll-branded-thumb {
    background: oklch(var(--b-500));
}
[data-theme="dark"] .scroll-branded-thumb:hover {
    background: oklch(var(--b-400));
}

/* Stats bar: scrollable below lg, full-width on lg+ */
.stats-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 0;
}
.stats-scroll::-webkit-scrollbar { display: none; }
.stats-bar {
    min-width: max-content;
    grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 1024px) {
    .stats-scroll { overflow: visible; margin-bottom: 1.5rem; }
    .stats-bar { min-width: 0; width: 100%; }
}

/* Table: scrollable below lg, full-width on lg+ */
.table-scroll {
    overflow-x: auto;
}
.table-scroll > table,
.table-scroll > div {
    min-width: max-content;
}
@media (min-width: 1024px) {
    .table-scroll { overflow-x: visible !important; }
    .table-scroll > table,
    .table-scroll > div { min-width: 0; width: 100%; }
}

/* Chart container: scrollable on mobile, full-width on sm+ */
.chart-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem;
}
.chart-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
    .chart-scroll {
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}

/* Pagination */
.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fallback-bc, oklch(var(--bc) / 0.6));
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.pagination-link:hover:not(.pagination-active):not(.pagination-disabled) {
    background: oklch(var(--b-100));
    color: oklch(var(--b-600));
}
[data-theme="dark"] .pagination-link:hover:not(.pagination-active):not(.pagination-disabled) {
    background: oklch(var(--b-900));
    color: oklch(var(--b-300));
}
.pagination-active {
    background: oklch(var(--b-500));
    color: #fff;
    font-weight: 600;
}
.pagination-disabled {
    opacity: 0.3;
    cursor: default;
}
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 2rem;
    font-size: 0.8125rem;
    color: var(--fallback-bc, oklch(var(--bc) / 0.3));
    letter-spacing: 0.1em;
}

/* Mobile-responsive tables: hide extra columns on small screens, expandable via toggle */
@media (max-width: 767px) {
    .mobile-extra { display: none !important; }
    .mobile-expanded .mobile-extra { display: table-cell !important; }
}
/* Top progress bar — auto-triggered by HTMX and form submissions */
#page-loader {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 50;
    background: linear-gradient(90deg, oklch(var(--b-500)), oklch(var(--b-300)), oklch(var(--b-500)));
    background-size: 200% 100%;
    width: 0; opacity: 0;
    transition: width 400ms ease, opacity 200ms ease;
    pointer-events: none;
}
#page-loader.active {
    opacity: 1;
    animation: loader-shimmer 1.5s linear infinite;
}
@keyframes loader-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* HTMX loading indicator: dim content during requests */
.htmx-request { opacity: 0.5; transition: opacity 200ms ease-in; }
.htmx-request.htmx-request { pointer-events: none; }
/* ── Icon circle system ── */
/* Shared SVG icon sizing */
.ic { width: 1.4em; height: 1.4em; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Circle container — sizes (bumped for better visibility) */
.icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; flex-shrink: 0; padding: 0; line-height: 1;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.icon-circle > span { display: inline-flex; align-items: center; justify-content: center; }
.icon-circle-xs { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }   /* 28px */
.icon-circle-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; }     /* 36px */
.icon-circle-md { width: 3rem; height: 3rem; font-size: 1.25rem; }        /* 48px */
.icon-circle-lg { width: 3.75rem; height: 3.75rem; font-size: 1.5rem; }   /* 60px */

/* PRIMARY: filled brand circle, white icon, subtle darker border */
[data-theme="light"] .icon-circle-primary {
    background-color: var(--ic-color, oklch(var(--b-500)));
    border: 1.5px solid oklch(from var(--ic-color, oklch(var(--b-500))) calc(l - 0.12) c h);
    color: white;
}
[data-theme="dark"] .icon-circle-primary {
    background-color: var(--ic-color, oklch(var(--b-500)));
    border: 1.5px solid oklch(from var(--ic-color, oklch(var(--b-500))) calc(l + 0.12) c h);
    color: white;
}

/* SECONDARY: soft fill, icon-colored, visible border */
[data-theme="light"] .icon-circle-secondary {
    background-color: oklch(from var(--ic-color, oklch(var(--b-500))) 93% 0.035 h);
    border: 1.5px solid oklch(from var(--ic-color, oklch(var(--b-500))) 78% 0.08 h);
    color: var(--ic-color, oklch(var(--b-500)));
}
[data-theme="dark"] .icon-circle-secondary {
    background-color: oklch(from var(--ic-color, oklch(var(--b-500))) 20% 0.06 h);
    border: 1.5px solid oklch(from var(--ic-color, oklch(var(--b-500))) 35% 0.10 h);
    color: oklch(from var(--ic-color, oklch(var(--b-500))) 72% 0.12 h);
}

/* DATA: solid color bg for data-visualization icons (paragraphs, categories).
   Uses --ic-color as background. Auto-contrasts text: white on dark shades,
   dark brand on light shades. Threshold at ~70% lightness. */
.icon-circle-data {
    background-color: var(--ic-color, oklch(var(--b-500)));
    border: 1.5px solid oklch(from var(--ic-color, oklch(var(--b-500))) calc(l - 0.08) c h);
    color: white;
}
/* Light shades (brand-100, brand-200) need dark text */
.icon-circle-data.ic-light {
    color: oklch(var(--b-800));
    border-color: oklch(from var(--ic-color, oklch(var(--b-500))) calc(l - 0.12) c h);
}

/* GHOST: transparent bg, border + icon colored */
[data-theme="light"] .icon-circle-ghost {
    background-color: transparent;
    border: 1.5px solid oklch(var(--b-200));
    color: oklch(var(--b-500));
}
[data-theme="light"] .icon-circle-ghost:hover {
    background-color: oklch(var(--b-50));
}
[data-theme="dark"] .icon-circle-ghost {
    background-color: transparent;
    border: 1.5px solid oklch(var(--b-700));
    color: oklch(var(--b-300));
}
[data-theme="dark"] .icon-circle-ghost:hover {
    background-color: oklch(var(--b-900));
}

/* Interactive icon circles (action buttons) */
.icon-circle-action { cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.icon-circle-action:disabled,
.icon-circle-action[disabled] { opacity: 0.35; pointer-events: none; }
[data-theme="light"] .icon-circle-action.icon-circle-ghost:hover {
    background-color: oklch(var(--b-50));
    border-color: oklch(var(--b-500));
}
[data-theme="light"] .icon-circle-action.icon-circle-ghost:active {
    background-color: oklch(var(--b-100));
}
[data-theme="dark"] .icon-circle-action.icon-circle-ghost:hover {
    background-color: oklch(var(--b-900));
    border-color: oklch(var(--b-500));
}
[data-theme="dark"] .icon-circle-action.icon-circle-ghost:active {
    background-color: oklch(var(--b-800));
}
/* Primary action — darken on hover, darker on active (matches btn-primary states) */
[data-theme="light"] .icon-circle-action.icon-circle-primary:hover {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
}
[data-theme="light"] .icon-circle-action.icon-circle-primary:active {
    background-color: oklch(var(--b-800));
    border-color: oklch(var(--b-800));
}
[data-theme="dark"] .icon-circle-action.icon-circle-primary:hover {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
}
[data-theme="dark"] .icon-circle-action.icon-circle-primary:active {
    background-color: oklch(var(--b-200));
    border-color: oklch(var(--b-200));
}
/* Secondary action — stronger fill on hover, deeper on active */
[data-theme="light"] .icon-circle-action.icon-circle-secondary:hover {
    background-color: oklch(var(--b-100));
    border-color: oklch(var(--b-500));
}
[data-theme="light"] .icon-circle-action.icon-circle-secondary:active {
    background-color: oklch(var(--b-200));
    border-color: oklch(var(--b-500));
}
[data-theme="dark"] .icon-circle-action.icon-circle-secondary:hover {
    background-color: oklch(var(--b-800));
    border-color: oklch(var(--b-500));
}
[data-theme="dark"] .icon-circle-action.icon-circle-secondary:active {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-500));
}
/* Delete action — red accent */
.icon-circle-action.icon-circle-danger {
    border-color: oklch(68% 0.08 25);
    color: oklch(68% 0.16 25);
}
[data-theme="light"] .icon-circle-action.icon-circle-danger:hover {
    background-color: oklch(95% 0.02 25);
    border-color: oklch(68% 0.16 25);
}
[data-theme="dark"] .icon-circle-action.icon-circle-danger:hover {
    background-color: oklch(22% 0.04 25);
    border-color: oklch(68% 0.16 25);
}

/* ── Move dropdown (subgroup move menu) ── */
[data-theme="light"] .move-dropdown {
    background-color: white;
    border: 1px solid oklch(var(--b-100));
}
[data-theme="dark"] .move-dropdown {
    background-color: oklch(var(--b-950));
    border: 1px solid oklch(var(--b-700));
}
[data-theme="dark"] .move-dropdown li button:hover,
[data-theme="dark"] .move-dropdown li a:hover {
    background-color: oklch(var(--b-900));
}

/* ── Bank account fill dropdown items ── */
.bank-fill-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    cursor: pointer;
    border-radius: 0.5rem;
}
.bank-fill-item:hover { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .bank-fill-item:hover { background-color: oklch(var(--b-900)); }
.bank-fill-name { font-weight: 500; font-size: 0.875rem; }
.bank-fill-detail { font-size: 0.75rem; font-family: ui-monospace, monospace; color: oklch(var(--b-400)); }
[data-theme="dark"] .bank-fill-detail { color: oklch(var(--b-500)); }

/* ── Brand notice banners (react to data-theme) ── */
.notice-brand {
    display: flex; align-items: center; gap: 0.75rem;
    border-radius: 0.75rem; padding: 0.75rem 1.25rem;
    border: 1px solid oklch(var(--b-200));
    background-color: oklch(var(--b-50));
}
[data-theme="dark"] .notice-brand {
    border-color: oklch(var(--b-700));
    background-color: oklch(var(--b-900));
}

/* ── Filter summary strip (animated appear/disappear) ── */
.filter-summary-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 300ms ease-out, opacity 250ms ease-out;
}
.filter-summary-wrapper > * {
    overflow: hidden;
}
.filter-summary-wrapper--hidden {
    grid-template-rows: 0fr;
    opacity: 0;
}
.filter-summary-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid oklch(var(--b-500));
    background-color: oklch(var(--b-50) / 0.5);
}
[data-theme="dark"] .filter-summary-strip {
    background-color: oklch(var(--b-900) / 0.4);
    border-left-color: oklch(var(--b-400));
}

/* ── Badge overhaul ── */
.badge, .badge-sm {
    font-size: 0.75rem; padding: 0.2em 0.6em; font-weight: 600;
    border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
}
/* Typed badges: colored background with readable text */
.badge-typed {
    color: white;
    font-weight: 600;
}
[data-theme="dark"] .badge-typed {
    background-color: oklch(from var(--badge-bg, oklch(var(--b-500))) 30% 0.08 h) !important;
    border-color: oklch(from var(--badge-bg, oklch(var(--b-500))) 40% 0.10 h) !important;
    color: oklch(from var(--badge-bg, oklch(var(--b-500))) 80% 0.12 h) !important;
}
/* Truncatable badges: ellipsis when space is tight */
.badge-truncate {
    max-width: min(7.5rem, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 1024px) {
    .badge-truncate { max-width: none; }
}

/* ── Delta badges (stats percentage change) — brand blue palette ── */
.badge-delta {
    display: inline-flex; align-items: center; gap: 0.15em;
    font-size: 0.75rem; font-weight: 700; line-height: 1;
    padding: 0.25em 0.6em; border-radius: 9999px;
    vertical-align: middle;
}
[data-theme="light"] .badge-delta-neutral {
    background-color: oklch(var(--b-100));           /* brand-100 tint */
    color: oklch(var(--b-700));                      /* brand-700 */
    border: 1px solid oklch(var(--b-700));
}
[data-theme="dark"] .badge-delta-neutral {
    background-color: oklch(var(--b-900));           /* brand-900 */
    color: oklch(var(--b-300));                      /* brand-300 */
    border: 1px solid oklch(var(--b-300));
}
[data-theme="light"] .badge-delta-up {
    background-color: oklch(var(--b-100));           /* brand-100 */
    color: oklch(var(--b-500));                      /* brand-500 */
    border: 1px solid oklch(var(--b-500));
}
[data-theme="dark"] .badge-delta-up {
    background-color: oklch(var(--b-900));           /* brand-900 */
    color: oklch(var(--b-400));                      /* brand-400 */
    border: 1px solid oklch(var(--b-400));
}
[data-theme="light"] .badge-delta-down {
    background-color: oklch(var(--b-800) / 0.1);    /* brand-800 faint */
    color: oklch(var(--b-700));                      /* brand-700 */
    border: 1px solid oklch(var(--b-700));
}
[data-theme="dark"] .badge-delta-down {
    background-color: oklch(var(--b-950));           /* brand-950 */
    color: oklch(var(--b-300));                      /* brand-300 */
    border: 1px solid oklch(var(--b-600));
}

/* ── White page background: cards need borders ── */
[data-theme="light"] .card,
[data-theme="light"] .stat:not(.stats > .stat),
[data-theme="light"] .stats,
[data-theme="light"] .collapse {
    border: 1px solid oklch(92% 0.01 260);
}
[data-theme="light"] .shadow {
    box-shadow: 0 1px 4px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
}
[data-theme="light"] .shadow-md,
[data-theme="light"] .hover\:shadow-md:hover {
    box-shadow: 0 4px 12px -2px oklch(0% 0 0 / 0.12), 0 2px 4px -2px oklch(0% 0 0 / 0.06);
}
[data-theme="light"] .stat-clickable:not(.stats > .stat):hover,
[data-theme="light"] .stat-clickable:not(.stats > .stat):focus-visible {
    border-color: oklch(71.49% 0.149 258.39);
    transform: translateY(-1px);
}
.stat-clickable { transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease; }
[data-theme="dark"] .stat-clickable:not(.stats > .stat):hover {
    border-color: oklch(40% 0.10 260);
    box-shadow: 0 4px 16px oklch(var(--b-500) / 0.15);
    transform: translateY(-1px);
}
[data-theme="light"] .navbar {
    border-bottom: 1px solid oklch(92% 0.01 260);
}

/* ── Dark mode: card borders + shadows ── */
[data-theme="dark"] .card,
[data-theme="dark"] .stat:not(.stats > .stat),
[data-theme="dark"] .stats,
[data-theme="dark"] .collapse {
    border: 1px solid oklch(24% 0.04 260);
}
[data-theme="dark"] .shadow {
    box-shadow: 0 1px 4px 0 oklch(0% 0 0 / 0.3), 0 1px 2px -1px oklch(0% 0 0 / 0.2);
}
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .hover\:shadow-md:hover {
    box-shadow: 0 4px 12px -2px oklch(0% 0 0 / 0.4), 0 2px 4px -2px oklch(0% 0 0 / 0.2);
}
[data-theme="dark"] .navbar {
    border-bottom: 1px solid oklch(24% 0.04 260);
    background-color: oklch(16% 0.03 260);
}

/* ── Stat values: brand blue ── */
.stat-value { color: oklch(var(--b-500)); }
[data-theme="dark"] .stat-value { color: oklch(var(--b-400)); }

/* ── Navbar navigation items ── */
.nav-item {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 600; font-size: 0.8125rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 9999px;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    text-decoration: none;
}
.nav-item .nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 9999px; flex-shrink: 0;
    font-size: 0.875rem;
}

/* Icon-only mode: lg to xl (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .navbar .nav-item {
        padding: 0.3rem;
        gap: 0;
    }
    .navbar .nav-item .nav-label {
        display: none;
    }
    /* CSS tooltip on hover */
    .navbar .nav-item[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 150ms ease;
        z-index: 50;
        background-color: oklch(20% 0.03 260);
        color: oklch(95% 0.01 260);
    }
    [data-theme="light"] .navbar .nav-item[data-tip]::after {
        background-color: oklch(25% 0.04 260);
        color: #fff;
    }
    .navbar .nav-item[data-tip]:hover::after {
        opacity: 1;
    }
}

/* Full labels mode: xl and above (1280px+) */
@media (min-width: 1280px) {
    .navbar .nav-item .nav-label {
        display: inline;
    }
}
.nav-item .ic.ic-chevron { width: 0.7em; height: 0.7em; opacity: 0.6; margin-left: -0.1rem; }
[data-theme="light"] .nav-item {
    color: oklch(var(--b-700));
    border: 1.5px solid oklch(85% 0.06 258);
}
[data-theme="light"] .nav-item .nav-icon {
    background-color: oklch(93% 0.035 258);
    color: oklch(var(--b-500));
}
[data-theme="light"] .nav-item:hover {
    background-color: oklch(var(--b-50));
    border-color: oklch(var(--b-300));
    color: oklch(var(--b-500));
}
[data-theme="light"] .nav-item:active {
    background-color: oklch(var(--b-100));
}
[data-theme="dark"] .nav-item {
    color: oklch(var(--b-300));
    border: 1.5px solid oklch(32% 0.10 259);
}
[data-theme="dark"] .nav-item .nav-icon {
    background-color: oklch(22% 0.06 258);
    color: oklch(var(--b-300));
}
[data-theme="dark"] .nav-item:hover {
    background-color: oklch(var(--b-900));
    border-color: oklch(45% 0.14 259);
    color: oklch(var(--b-200));
}
[data-theme="dark"] .nav-item:active {
    background-color: oklch(var(--b-800));
}

/* ── Mobile navbar ── */
.navbar-brand {
    min-width: auto;
    padding: 0.4rem 0.6rem;
}
@media (max-width: 639px) {
    .navbar-brand span { display: none; }
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background-color: oklch(var(--b-950) / 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease 300ms, visibility 250ms ease 300ms;
}
[data-theme="light"] .mobile-nav-overlay {
    background-color: oklch(98% 0.005 260 / 0.97);
}
.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease, visibility 300ms ease;
}
.mobile-nav-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
}
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    padding: 0 1.5rem 1rem;
}
.mobile-nav-links .nav-item {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.9375rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease,
                background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
/* Opening: top-down stagger (--i set inline on each nav-item, 0-based) */
.mobile-nav-overlay.open .mobile-nav-links .nav-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 250ms ease, transform 250ms ease,
                background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    transition-delay: calc(var(--i) * 30ms);
}
/* Closing: bottom-up stagger (reverse of opening) */
.mobile-nav-links .nav-item {
    --total: 8;
    transition-delay: calc((var(--total) - var(--i)) * 30ms);
}
.mobile-nav-utils {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0 2.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.mobile-nav-overlay.open .mobile-nav-utils {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 250ms ease 300ms, transform 250ms ease 300ms;
}
/* Center dropdowns in mobile nav */
.mobile-nav-utils .dropdown {
    position: static;
}
.mobile-nav-utils .dropdown-content.navbar-dropdown,
.mobile-nav-utils .dropdown-content.menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

/* ── Button overhaul: brand palette for all button variants ── */

/* Tertiary: brand-500 border + text */
.btn-outline,
.btn-tertiary {
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
.btn-outline:hover,
.btn-tertiary:hover {
    background-color: oklch(var(--b-50));
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-tertiary {
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-tertiary:hover {
    background-color: oklch(var(--b-900));
    border-color: oklch(var(--b-500));
    color: oklch(var(--b-500));
}
/* ── Custom select/dropdown: brand themed ── */
/* Hide the native select when enhanced (keep it for form submission) */
.select.select-enhanced { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Trigger button */
.csd { position: relative; display: inline-flex; }
.csd-trigger {
    display: inline-flex; align-items: center; gap: 0.35rem;
    cursor: pointer; font-weight: 500; white-space: nowrap;
    border: 1px solid; border-radius: 9999px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    user-select: none;
}
.csd-trigger-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; min-height: 2rem; }
.csd-trigger-xs { padding: 0.2rem 0.6rem; font-size: 0.8125rem; min-height: 1.625rem; }
.csd-trigger-md { padding: 0.625rem 1rem; font-size: 0.9375rem; min-height: 3rem; }
.csd-chevron {
    width: 0.875em; height: 0.875em; flex-shrink: 0; opacity: 0.6;
    transition: transform 200ms ease;
}
.csd.open .csd-chevron { transform: rotate(180deg); }

/* Light mode trigger */
[data-theme="light"] .csd-trigger {
    background-color: oklch(98% 0.005 260);
    border-color: oklch(var(--b-200));
    color: oklch(var(--b-800));
}
[data-theme="light"] .csd-trigger:hover { border-color: oklch(var(--b-500)); }
[data-theme="light"] .csd.open .csd-trigger {
    border-color: oklch(var(--b-500));
    box-shadow: 0 0 0 2px oklch(var(--b-100));
}
/* Dark mode trigger */
[data-theme="dark"] .csd-trigger {
    background-color: oklch(18% 0.04 260);
    border-color: oklch(var(--b-700));
    color: oklch(var(--b-200));
}
[data-theme="dark"] .csd-trigger:hover { border-color: oklch(var(--b-500)); }
[data-theme="dark"] .csd.open .csd-trigger {
    border-color: oklch(var(--b-500));
    box-shadow: 0 0 0 2px oklch(var(--b-800));
}

/* Filled-primary trigger variant */
[data-theme="light"] .csd-trigger.csd-filled-primary {
    background-color: oklch(var(--b-500));
    border-color: oklch(var(--b-500));
    color: white;
}
[data-theme="light"] .csd-trigger.csd-filled-primary:hover {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
}
[data-theme="light"] .csd.open .csd-trigger.csd-filled-primary {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
    box-shadow: 0 0 0 2px oklch(var(--b-100));
}
[data-theme="light"] .csd-trigger.csd-filled-primary .csd-chevron { opacity: 0.8; }
[data-theme="dark"] .csd-trigger.csd-filled-primary {
    background-color: oklch(var(--b-400));
    border-color: oklch(var(--b-400));
    color: oklch(0% 0 0);
}
[data-theme="dark"] .csd-trigger.csd-filled-primary:hover {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
}
[data-theme="dark"] .csd.open .csd-trigger.csd-filled-primary {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
    box-shadow: 0 0 0 2px oklch(var(--b-800));
}
[data-theme="dark"] .csd-trigger.csd-filled-primary .csd-chevron { opacity: 0.8; }

/* Dropdown panel */
.csd-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    min-width: 100%; max-height: 16rem; overflow-y: auto;
    border: 1px solid; border-radius: 1rem;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.12);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}
.csd.open .csd-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.csd-panel.csd-panel-up { top: auto; bottom: calc(100% + 4px); }
[data-theme="light"] .csd-panel {
    background-color: oklch(98% 0.005 260);
    border-color: oklch(var(--b-200));
}
[data-theme="dark"] .csd-panel {
    background-color: oklch(18% 0.04 260);
    border-color: oklch(var(--b-700));
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

/* Dropdown items */
.csd-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.875rem;
    transition: background-color 100ms ease;
    white-space: nowrap;
}
[data-theme="light"] .csd-item { color: oklch(var(--b-800)); }
[data-theme="light"] .csd-item:hover { background-color: oklch(93% 0.035 258); }
[data-theme="light"] .csd-item.selected {
    background-color: oklch(var(--b-100));
    color: oklch(var(--b-700));
    font-weight: 600;
}
[data-theme="dark"] .csd-item { color: oklch(var(--b-200)); }
[data-theme="dark"] .csd-item:hover { background-color: oklch(25% 0.06 258); }
[data-theme="dark"] .csd-item.selected {
    background-color: oklch(var(--b-800));
    color: oklch(var(--b-200));
    font-weight: 600;
}
.csd-item:first-child { border-radius: 1rem 1rem 0 0; }
.csd-item:last-child { border-radius: 0 0 1rem 1rem; }
.csd-check { width: 1em; height: 1em; opacity: 0; }
.csd-item.selected .csd-check { opacity: 1; }
.csd-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; opacity: 0.7; }
.csd-label-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; opacity: 0.7; display: inline-block; vertical-align: -0.15em; margin-right: 0.25em; }

/* Scrollbar styling */
.csd-panel::-webkit-scrollbar { width: 6px; }
.csd-panel::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] .csd-panel::-webkit-scrollbar-thumb { background: oklch(var(--b-200)); border-radius: 3px; }
[data-theme="dark"] .csd-panel::-webkit-scrollbar-thumb { background: oklch(var(--b-700)); border-radius: 3px; }

/* ── Custom Datepicker (CDP): brand themed ── */
/* Hide the native date input when enhanced (keep it for form submission) */
input.dp-enhanced {
    position: absolute !important; opacity: 0 !important; pointer-events: none !important;
    width: 0 !important; height: 0 !important; overflow: hidden !important;
}

/* Wrapper */
.dp { position: relative; display: inline-flex; }

/* Trigger button */
.dp-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; font-weight: 500; white-space: nowrap;
    border: 1px solid; border-radius: 9999px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    user-select: none; text-align: left;
}
.dp-trigger-md { padding: 0.625rem 1rem; font-size: 0.9375rem; min-height: 3rem; }
.dp-trigger-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; min-height: 2rem; }

/* Trigger icons */
.dp-calendar-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; opacity: 0.5; }
.dp-chevron {
    width: 0.875em; height: 0.875em; flex-shrink: 0; opacity: 0.6; margin-left: auto;
    transition: transform 200ms ease;
}
.dp.open .dp-chevron { transform: rotate(180deg); }
.dp-label { flex: 1; }
.dp-label-placeholder { opacity: 0.5; }

/* Light mode trigger */
[data-theme="light"] .dp-trigger {
    background-color: oklch(98% 0.005 260);
    border-color: oklch(var(--b-200));
    color: oklch(var(--b-800));
}
[data-theme="light"] .dp-trigger:hover { border-color: oklch(var(--b-500)); }
[data-theme="light"] .dp.open .dp-trigger {
    border-color: oklch(var(--b-500));
    box-shadow: 0 0 0 2px oklch(var(--b-100));
}
/* Dark mode trigger */
[data-theme="dark"] .dp-trigger {
    background-color: oklch(18% 0.04 260);
    border-color: oklch(var(--b-700));
    color: oklch(var(--b-200));
}
[data-theme="dark"] .dp-trigger:hover { border-color: oklch(var(--b-500)); }
[data-theme="dark"] .dp.open .dp-trigger {
    border-color: oklch(var(--b-500));
    box-shadow: 0 0 0 2px oklch(var(--b-800));
}

/* Error state (required field not filled) */
.dp-trigger.dp-error { border-color: oklch(0.68 0.16 25) !important; }

/* Disabled state */
.dp-disabled .dp-trigger { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Calendar panel */
.dp-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    width: 280px; padding: 0.75rem;
    border: 1px solid; border-radius: 1rem;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.12);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}
.dp.open .dp-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dp-panel.dp-panel-up { top: auto; bottom: calc(100% + 4px); }
[data-theme="light"] .dp-panel {
    background-color: oklch(98% 0.005 260);
    border-color: oklch(var(--b-200));
}
[data-theme="dark"] .dp-panel {
    background-color: oklch(18% 0.04 260);
    border-color: oklch(var(--b-700));
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

/* Header: prev arrow | month/year label | next arrow */
.dp-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
}
.dp-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9999px; border: none;
    cursor: pointer; background: transparent;
    transition: background-color 150ms ease;
}
.dp-nav svg { width: 1rem; height: 1rem; }
[data-theme="light"] .dp-nav { color: oklch(var(--b-600)); }
[data-theme="light"] .dp-nav:hover { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .dp-nav { color: oklch(var(--b-300)); }
[data-theme="dark"] .dp-nav:hover { background-color: oklch(var(--b-900)); }

.dp-header-label {
    font-weight: 600; font-size: 0.9375rem; cursor: pointer;
    border: none; background: transparent; padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 150ms ease;
}
[data-theme="light"] .dp-header-label { color: oklch(var(--b-800)); }
[data-theme="light"] .dp-header-label:hover { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .dp-header-label { color: oklch(var(--b-200)); }
[data-theme="dark"] .dp-header-label:hover { background-color: oklch(var(--b-900)); }

/* Weekday header row */
.dp-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-size: 0.75rem; font-weight: 600;
    margin-bottom: 0.25rem;
}
[data-theme="light"] .dp-weekdays { color: oklch(var(--b-400)); }
[data-theme="dark"] .dp-weekdays { color: oklch(var(--b-500)); }
.dp-weekdays span { padding: 0.25rem 0; }

/* Day grid */
.dp-days {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; justify-items: center;
}
.dp-day {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    font-size: 0.875rem; cursor: pointer; border: 1.5px solid transparent;
    background: transparent;
    transition: background-color 100ms ease, border-color 100ms ease;
}
[data-theme="light"] .dp-day { color: oklch(var(--b-800)); }
[data-theme="light"] .dp-day:hover:not(.dp-day-selected):not(.dp-day-disabled) { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .dp-day { color: oklch(var(--b-200)); }
[data-theme="dark"] .dp-day:hover:not(.dp-day-selected):not(.dp-day-disabled) { background-color: oklch(var(--b-900)); }

.dp-day-other { opacity: 0.35; }
.dp-day-disabled { opacity: 0.2; pointer-events: none; cursor: default; }

/* Today ring */
[data-theme="light"] .dp-day-today:not(.dp-day-selected) { border-color: oklch(var(--b-400)); }
[data-theme="dark"] .dp-day-today:not(.dp-day-selected) { border-color: oklch(var(--b-500)); }

/* Selected day */
[data-theme="light"] .dp-day-selected {
    background-color: oklch(var(--b-500)); color: white; font-weight: 600;
}
[data-theme="dark"] .dp-day-selected {
    background-color: oklch(var(--b-400)); color: oklch(var(--b-950)); font-weight: 600;
}

/* Month/year grids (drill-down views) */
.dp-months, .dp-years {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem; padding: 0.25rem 0;
}
.dp-month, .dp-year {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.25rem; border-radius: 9999px;
    font-size: 0.875rem; cursor: pointer; border: none; background: transparent;
    transition: background-color 100ms ease;
}
[data-theme="light"] .dp-month, [data-theme="light"] .dp-year { color: oklch(var(--b-800)); }
[data-theme="light"] .dp-month:hover:not(.dp-month-selected), [data-theme="light"] .dp-year:hover:not(.dp-year-selected) { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .dp-month, [data-theme="dark"] .dp-year { color: oklch(var(--b-200)); }
[data-theme="dark"] .dp-month:hover:not(.dp-month-selected), [data-theme="dark"] .dp-year:hover:not(.dp-year-selected) { background-color: oklch(var(--b-900)); }

[data-theme="light"] .dp-month-selected, [data-theme="light"] .dp-year-selected {
    background-color: oklch(var(--b-500)); color: white; font-weight: 600;
}
[data-theme="dark"] .dp-month-selected, [data-theme="dark"] .dp-year-selected {
    background-color: oklch(var(--b-400)); color: oklch(var(--b-950)); font-weight: 600;
}
[data-theme="light"] .dp-month-current, [data-theme="light"] .dp-year-current {
    border: 1.5px solid oklch(var(--b-400));
}
[data-theme="dark"] .dp-month-current, [data-theme="dark"] .dp-year-current {
    border: 1.5px solid oklch(var(--b-500));
}

/* Footer: Clear / Today buttons */
.dp-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.5rem; padding-top: 0.5rem;
    border-top: 1px solid;
}
[data-theme="light"] .dp-footer { border-top-color: oklch(var(--b-100)); }
[data-theme="dark"] .dp-footer { border-top-color: oklch(var(--b-800)); }
.dp-clear-btn, .dp-today-btn {
    font-size: 0.8125rem; font-weight: 500; cursor: pointer;
    border: none; background: transparent; padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 150ms ease;
}
[data-theme="light"] .dp-clear-btn { color: oklch(var(--b-500)); }
[data-theme="light"] .dp-clear-btn:hover { background-color: oklch(var(--b-50)); }
[data-theme="light"] .dp-today-btn { color: oklch(var(--b-500)); font-weight: 600; }
[data-theme="light"] .dp-today-btn:hover { background-color: oklch(var(--b-50)); }
[data-theme="dark"] .dp-clear-btn { color: oklch(var(--b-400)); }
[data-theme="dark"] .dp-clear-btn:hover { background-color: oklch(var(--b-900)); }
[data-theme="dark"] .dp-today-btn { color: oklch(var(--b-400)); font-weight: 600; }
[data-theme="dark"] .dp-today-btn:hover { background-color: oklch(var(--b-900)); }

/* Fallback: non-enhanced selects still get brand styling */
.select:not(.select-enhanced) {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='oklch(56.35%25 0.241 260.82)' stroke-width='2.5'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem;
    padding-right: 2.25rem; cursor: pointer; font-weight: 500; border-radius: 9999px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
[data-theme="light"] .select:not(.select-enhanced) { border-color: oklch(var(--b-200)); color: oklch(var(--b-800)); }
[data-theme="light"] .select:not(.select-enhanced):hover { border-color: oklch(var(--b-500)); }
[data-theme="light"] .select:not(.select-enhanced):focus { border-color: oklch(var(--b-500)); outline: none; box-shadow: 0 0 0 2px oklch(var(--b-100)); }
[data-theme="dark"] .select:not(.select-enhanced) { border-color: oklch(var(--b-700)); color: oklch(var(--b-200)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='oklch(71.49%25 0.149 258.39)' stroke-width='2.5'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); }
[data-theme="dark"] .select:not(.select-enhanced):hover { border-color: oklch(var(--b-500)); }
[data-theme="dark"] .select:not(.select-enhanced):focus { border-color: oklch(var(--b-500)); outline: none; box-shadow: 0 0 0 2px oklch(var(--b-800)); }

/* Filled primary select — looks like btn-primary */
.select-filled-primary {
    background-color: oklch(var(--p));
    color: oklch(var(--pc));
    border-color: oklch(var(--p));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2.5'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
.select-filled-primary:hover {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
}
.select-filled-primary:focus {
    background-color: oklch(var(--b-700));
    border-color: oklch(var(--b-700));
    box-shadow: 0 0 0 2px oklch(var(--b-100));
}
[data-theme="dark"] .select-filled-primary {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.5'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
[data-theme="dark"][data-theme="dark"] .select-filled-primary:hover {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
}
[data-theme="dark"][data-theme="dark"] .select-filled-primary:focus {
    background-color: oklch(var(--b-300));
    border-color: oklch(var(--b-300));
    box-shadow: 0 0 0 2px oklch(var(--b-800));
}

/* ── Input fields: brand focus ring ── */
[data-theme="light"] .input:focus,
[data-theme="light"] .textarea:focus {
    border-color: oklch(var(--b-500));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--b-100));
}
[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus {
    border-color: oklch(var(--b-500));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--b-800));
}

/* ── Unified form field heights ── */
.select { min-height: 3rem; }

/* ── Clickable table rows ── */
.table tr.row-link:hover td { background-color: oklch(var(--b-50) / 0.6); }
[data-theme="dark"] .table tr.row-link:hover td { background-color: oklch(var(--b-900) / 0.4); }

/* ── Collapse-arrow right padding: 1rem on mobile (two-row layout), 3rem on desktop (single row) ── */
.collapse-arrow > .collapse-title { padding-inline-end: 1rem; }
@media (min-width: 640px) {
    .collapse-arrow > .collapse-title { padding-inline-end: 3rem; }
}

/* ── Lift interactive elements above DaisyUI collapse checkbox overlay (z-index:1) ── */
.collapse-title .btn,
.collapse-title .icon-circle { position: relative; z-index: 2; }

/* ── Branded row hover for non-table elements (divs in collapsible cards) ── */
.row-highlight { transition: background-color 150ms ease; }
[data-theme="light"] .row-highlight:hover { background-color: oklch(var(--b-50) / 0.6); }
[data-theme="dark"] .row-highlight:hover { background-color: oklch(var(--b-900) / 0.4); }

/* ── Size bump: global font/component scaling ── */
.table { font-size: 0.9375rem; }
.stat-title { font-size: 0.875rem; font-weight: 500; color: oklch(var(--b-800)); opacity: 1; }
[data-theme="dark"] .stat-title { color: oklch(var(--b-200)); }
.stat-value { font-size: 1.375rem; }
.stat-value-auto { font-size: clamp(1rem, 2.5vw, 1.375rem); }

/* ── Collapsible sections: slide + fade toggle ── */
.portfolio-section,
.sold-section {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 300ms ease-out, opacity 250ms ease-out;
}
.portfolio-section > *,
.sold-section > * {
    overflow: hidden;
}
.portfolio-section--collapsed,
.sold-section--collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}
.portfolio-section--collapsed {
    margin-bottom: 0 !important;
}

/* ── Portfolio cards: theme-aware gradient ── */
.portfolio-card {
    transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}
[data-theme="light"] .portfolio-card {
    background: linear-gradient(135deg, oklch(var(--b-50)) 0%, oklch(var(--b-100)) 100%);
    border: 1px solid oklch(92% 0.01 260);
}
[data-theme="light"] .portfolio-card:hover {
    border-color: oklch(var(--b-400));
    transform: translateY(-1px);
}
[data-theme="dark"] .portfolio-card {
    background: linear-gradient(135deg, oklch(20% 0.04 260) 0%, oklch(24% 0.06 260) 100%);
    border: 1px solid oklch(24% 0.04 260);
}
[data-theme="dark"] .portfolio-card:hover {
    border-color: oklch(var(--b-400));
    box-shadow: 0 4px 16px oklch(var(--b-500) / 0.15);
    transform: translateY(-1px);
}
.portfolio-card .portfolio-value { color: oklch(var(--b-600)); }
[data-theme="dark"] .portfolio-card .portfolio-value { color: oklch(var(--b-300)); }

/* ── Flash notifications ── */
.flash-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.08);
    animation: flash-slide-in 0.3s ease-out;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
@keyframes flash-slide-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}
.flash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.flash-icon svg { width: 1rem; height: 1rem; }
.flash-text { flex: 1; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.flash-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: none;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.flash-close:hover { opacity: 0.8; }
.flash-close svg { width: 0.875rem; height: 0.875rem; }

/* Light theme */
[data-theme="light"] .flash-success {
    background: linear-gradient(135deg, oklch(var(--b-50)) 0%, oklch(var(--b-100)) 100%);
    border-color: oklch(var(--b-400));
    color: oklch(var(--b-900));
}
[data-theme="light"] .flash-success .flash-icon { background: oklch(var(--b-500)); color: #fff; }
[data-theme="light"] .flash-success .flash-close { color: oklch(var(--b-700)); }

[data-theme="light"] .flash-error {
    background: linear-gradient(135deg, oklch(95% 0.02 25) 0%, oklch(92% 0.04 25) 100%);
    border-color: oklch(65% 0.15 25);
    color: oklch(30% 0.08 25);
}
[data-theme="light"] .flash-error .flash-icon { background: oklch(60% 0.18 25); color: #fff; }
[data-theme="light"] .flash-error .flash-close { color: oklch(50% 0.12 25); }

[data-theme="light"] .flash-warning {
    background: linear-gradient(135deg, oklch(96% 0.03 85) 0%, oklch(93% 0.06 85) 100%);
    border-color: oklch(70% 0.12 85);
    color: oklch(35% 0.08 85);
}
[data-theme="light"] .flash-warning .flash-icon { background: oklch(70% 0.14 85); color: #fff; }
[data-theme="light"] .flash-warning .flash-close { color: oklch(55% 0.1 85); }

[data-theme="light"] .flash-info {
    background: linear-gradient(135deg, oklch(var(--b-50)) 0%, oklch(var(--b-100)) 100%);
    border-color: oklch(var(--b-300));
    color: oklch(var(--b-900));
}
[data-theme="light"] .flash-info .flash-icon { background: oklch(var(--b-400)); color: #fff; }
[data-theme="light"] .flash-info .flash-close { color: oklch(var(--b-600)); }

/* Dark theme */
[data-theme="dark"] .flash-success {
    background: linear-gradient(135deg, oklch(20% 0.04 260) 0%, oklch(24% 0.06 260) 100%);
    border-color: oklch(var(--b-400));
    color: oklch(90% 0.02 260);
}
[data-theme="dark"] .flash-success .flash-icon { background: oklch(var(--b-500)); color: #fff; }
[data-theme="dark"] .flash-success .flash-close { color: oklch(var(--b-300)); }

[data-theme="dark"] .flash-error {
    background: linear-gradient(135deg, oklch(20% 0.04 25) 0%, oklch(24% 0.06 25) 100%);
    border-color: oklch(55% 0.15 25);
    color: oklch(85% 0.04 25);
}
[data-theme="dark"] .flash-error .flash-icon { background: oklch(55% 0.18 25); color: #fff; }
[data-theme="dark"] .flash-error .flash-close { color: oklch(70% 0.1 25); }

[data-theme="dark"] .flash-warning {
    background: linear-gradient(135deg, oklch(20% 0.04 85) 0%, oklch(24% 0.06 85) 100%);
    border-color: oklch(60% 0.12 85);
    color: oklch(85% 0.04 85);
}
[data-theme="dark"] .flash-warning .flash-icon { background: oklch(60% 0.14 85); color: #fff; }
[data-theme="dark"] .flash-warning .flash-close { color: oklch(70% 0.1 85); }

[data-theme="dark"] .flash-info {
    background: linear-gradient(135deg, oklch(20% 0.04 260) 0%, oklch(24% 0.06 260) 100%);
    border-color: oklch(var(--b-300));
    color: oklch(85% 0.02 260);
}
[data-theme="dark"] .flash-info .flash-icon { background: oklch(var(--b-400)); color: #fff; }
[data-theme="dark"] .flash-info .flash-close { color: oklch(var(--b-300)); }

/* Branded tooltips */
.tooltip {
    z-index: 10;
}
.tooltip::before {
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 18rem;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.12), 0 1px 3px oklch(0 0 0 / 0.08);
}
[data-theme="light"] .tooltip::before {
    background: linear-gradient(135deg, oklch(var(--b-800)), oklch(var(--b-900)));
    color: oklch(var(--b-50));
}
[data-theme="light"] .tooltip::after {
    border-color: oklch(var(--b-800)) transparent transparent transparent;
}
[data-theme="light"] .tooltip-bottom::after {
    border-color: transparent transparent oklch(var(--b-900)) transparent;
}
[data-theme="light"] .tooltip-left::after {
    border-color: transparent transparent transparent oklch(var(--b-800));
}
[data-theme="light"] .tooltip-right::after {
    border-color: transparent oklch(var(--b-800)) transparent transparent;
}
[data-theme="dark"] .tooltip::before {
    background: linear-gradient(135deg, oklch(var(--b-100)), oklch(var(--b-200)));
    color: oklch(var(--b-900));
}
[data-theme="dark"] .tooltip::after {
    border-color: oklch(var(--b-100)) transparent transparent transparent;
}
[data-theme="dark"] .tooltip-bottom::after {
    border-color: transparent transparent oklch(var(--b-200)) transparent;
}
[data-theme="dark"] .tooltip-left::after {
    border-color: transparent transparent transparent oklch(var(--b-100));
}
[data-theme="dark"] .tooltip-right::after {
    border-color: transparent oklch(var(--b-100)) transparent transparent;
}

/* Collapse containers must not clip tooltips in headers */
.collapse { overflow: visible; }

/* Icon-only button: circular, no DaisyUI min-width bloat */
.btn-icon {
    width: 2rem;
    height: 2rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 9999px;
}

/* Drop zone */
.drop-zone {
    border: 2px dashed oklch(var(--b-200));
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.drop-zone-compact {
    padding: 1.5rem 1rem;
}
.drop-zone:hover, .drop-zone.drop-zone-dragover {
    border-color: oklch(var(--b-400));
    background-color: oklch(var(--b-50) / 0.5);
}
.drop-zone.drop-zone-dragover {
    border-style: solid;
}
.drop-zone-has-file {
    border-color: oklch(var(--b-300));
    border-style: solid;
    background-color: oklch(var(--b-50) / 0.3);
    cursor: default;
}
[data-theme="dark"] .drop-zone {
    border-color: oklch(var(--b-700));
}
[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.drop-zone-dragover {
    border-color: oklch(var(--b-500));
    background-color: oklch(var(--b-900) / 0.5);
}
[data-theme="dark"] .drop-zone-has-file {
    border-color: oklch(var(--b-600));
    background-color: oklch(var(--b-900) / 0.3);
}