/* ==========================================================================
   KART theme — THE ONLY FILE THAT DEFINES COLOURS, FONTS, RADII AND SPACING.
   --------------------------------------------------------------------------
   To re-brand:
     1. Change the tokens in the LIGHT block, then their DARK equivalents.
     2. Brand colours appear twice: as hex (--kart-color-*) and as an
        "r, g, b" triple (--kart-color-*-rgb) which Bootstrap utilities need.
        Keep the two in sync.
     3. Chart colours (--kart-chart-*) are read by wwwroot/js/palette.js.
        Keep the slot ORDER: it is what keeps adjacent series distinguishable
        for colour-blind readers. Re-validate if you swap hues.
   Nothing else in the app hard-codes a colour.
   ========================================================================== */

/* ---------- LIGHT (default) ---------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Brand */
    --kart-color-primary: #2a5bd7;
    --kart-color-primary-rgb: 42, 91, 215;
    --kart-color-primary-hover: #234cb5;
    --kart-color-primary-active: #1d3f96;
    --kart-color-primary-subtle: #e6edfb;
    --kart-color-on-primary: #ffffff;

    --kart-color-secondary: #52514e;
    --kart-color-secondary-rgb: 82, 81, 78;

    /* Status (fixed meaning: never reuse as a chart series) */
    --kart-color-success: #0a7f0a;
    --kart-color-success-rgb: 10, 127, 10;
    --kart-color-warning: #b77900;
    --kart-color-warning-rgb: 183, 121, 0;
    --kart-color-serious: #c4500c;
    --kart-color-serious-rgb: 196, 80, 12;
    --kart-color-danger: #c62f2f;
    --kart-color-danger-rgb: 198, 47, 47;
    --kart-color-info: #1c6fb8;
    --kart-color-info-rgb: 28, 111, 184;

    /* Surfaces & ink */
    --kart-bg: #f4f4f1;
    --kart-bg-rgb: 244, 244, 241;
    --kart-surface: #fcfcfb;
    --kart-surface-rgb: 252, 252, 251;
    --kart-surface-2: #f0efec;
    --kart-surface-hover: #ebeae6;
    --kart-border: #dedcd5;
    --kart-border-strong: #c3c2b7;
    --kart-text: #0b0b0b;
    --kart-text-rgb: 11, 11, 11;
    --kart-text-secondary: #52514e;
    --kart-text-muted: #6f6e69;
    --kart-link: var(--kart-color-primary);
    --kart-link-hover: var(--kart-color-primary-hover);
    --kart-focus-ring: rgba(42, 91, 215, 0.35);

    /* Navigation bar */
    --kart-nav-bg: #ffffff;
    --kart-nav-text: #2b2b29;
    --kart-nav-text-active: var(--kart-color-primary);
    --kart-nav-border: var(--kart-border);

    /* Elevation */
    --kart-shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
    --kart-shadow-md: 0 4px 12px rgba(11, 11, 11, 0.08);
    --kart-shadow-lg: 0 12px 32px rgba(11, 11, 11, 0.12);

    /* Charts — categorical slots in fixed order (never cycled) */
    --kart-chart-1: #2a78d6; /* blue    */
    --kart-chart-2: #eb6834; /* orange  */
    --kart-chart-3: #1baf7a; /* aqua    */
    --kart-chart-4: #eda100; /* yellow  */
    --kart-chart-5: #e87ba4; /* magenta */
    --kart-chart-6: #008300; /* green   */
    --kart-chart-7: #6250d6; /* violet  */
    --kart-chart-8: #e34948; /* red     */
    --kart-chart-other: #898781; /* "Other" bucket for series past slot 8 */
    --kart-chart-surface: var(--kart-surface);
    --kart-chart-text: #52514e;
    --kart-chart-text-strong: #0b0b0b;
    --kart-chart-grid: #e1e0d9;
    --kart-chart-axis: #c3c2b7;
    --kart-chart-tooltip-bg: #0b0b0b;
    --kart-chart-tooltip-text: #f0efec;
}

/* ---------- DARK ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --kart-color-primary: #5b8af0;
    --kart-color-primary-rgb: 91, 138, 240;
    --kart-color-primary-hover: #7aa1f3;
    --kart-color-primary-active: #95b5f6;
    --kart-color-primary-subtle: #1c2a4a;
    --kart-color-on-primary: #0b0b0b;

    --kart-color-secondary: #c3c2b7;
    --kart-color-secondary-rgb: 195, 194, 183;

    --kart-color-success: #2fbf2f;
    --kart-color-success-rgb: 47, 191, 47;
    --kart-color-warning: #fab219;
    --kart-color-warning-rgb: 250, 178, 25;
    --kart-color-serious: #f58a4b;
    --kart-color-serious-rgb: 245, 138, 75;
    --kart-color-danger: #ef6b6b;
    --kart-color-danger-rgb: 239, 107, 107;
    --kart-color-info: #5aa9ee;
    --kart-color-info-rgb: 90, 169, 238;

    --kart-bg: #0f0f0e;
    --kart-bg-rgb: 15, 15, 14;
    --kart-surface: #1a1a19;
    --kart-surface-rgb: 26, 26, 25;
    --kart-surface-2: #232321;
    --kart-surface-hover: #2c2c2a;
    --kart-border: #33332f;
    --kart-border-strong: #4a4a45;
    --kart-text: #f0efec;
    --kart-text-rgb: 240, 239, 236;
    --kart-text-secondary: #c3c2b7;
    --kart-text-muted: #9a9890;
    --kart-focus-ring: rgba(91, 138, 240, 0.45);

    --kart-nav-bg: #161615;
    --kart-nav-text: #dedcd5;
    --kart-nav-border: var(--kart-border);

    --kart-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --kart-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --kart-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    --kart-chart-1: #3987e5;
    --kart-chart-2: #d95926;
    --kart-chart-3: #199e70;
    --kart-chart-4: #c98500;
    --kart-chart-5: #d55181;
    --kart-chart-6: #008300;
    --kart-chart-7: #9085e9;
    --kart-chart-8: #e66767;
    --kart-chart-other: #898781;
    --kart-chart-surface: var(--kart-surface); /* re-declared so nested dark containers resolve the dark surface */
    --kart-chart-text: #c3c2b7;
    --kart-chart-text-strong: #f0efec;
    --kart-chart-grid: #2c2c2a;
    --kart-chart-axis: #383835;
    --kart-chart-tooltip-bg: #f0efec;
    --kart-chart-tooltip-text: #0b0b0b;
}

/* ---------- Mode-independent tokens ---------- */
:root {
    /* Typography */
    --kart-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kart-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --kart-font-serif: Georgia, Cambria, "Times New Roman", Times, serif; /* chart style option "Serif" */
    --kart-font-size-base: 0.9375rem;
    --kart-font-size-sm: 0.8125rem;
    --kart-font-size-lg: 1.125rem;
    --kart-font-weight-normal: 400;
    --kart-font-weight-medium: 500;
    --kart-font-weight-bold: 600;
    --kart-line-height: 1.5;

    /* Radii */
    --kart-radius-sm: 4px;
    --kart-radius-md: 8px;
    --kart-radius-lg: 12px;
    --kart-radius-pill: 999px;

    /* Spacing scale */
    --kart-space-1: 0.25rem;
    --kart-space-2: 0.5rem;
    --kart-space-3: 0.75rem;
    --kart-space-4: 1rem;
    --kart-space-5: 1.5rem;
    --kart-space-6: 2rem;
    --kart-space-7: 3rem;

    /* Layout */
    --kart-nav-height: 56px;
    --kart-content-max-width: 1400px;
    --kart-transition: 150ms ease;
}

/* ==========================================================================
   Bootstrap bridge — maps KART tokens onto Bootstrap 5.3 variables so stock
   components follow the theme. Edit tokens above, not this section.
   ========================================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--kart-color-primary);
    --bs-primary-rgb: var(--kart-color-primary-rgb);
    --bs-secondary: var(--kart-color-secondary);
    --bs-secondary-rgb: var(--kart-color-secondary-rgb);
    --bs-success: var(--kart-color-success);
    --bs-success-rgb: var(--kart-color-success-rgb);
    --bs-warning: var(--kart-color-warning);
    --bs-warning-rgb: var(--kart-color-warning-rgb);
    --bs-danger: var(--kart-color-danger);
    --bs-danger-rgb: var(--kart-color-danger-rgb);
    --bs-info: var(--kart-color-info);
    --bs-info-rgb: var(--kart-color-info-rgb);
    --bs-primary-bg-subtle: var(--kart-color-primary-subtle);
    --bs-primary-text-emphasis: var(--kart-color-primary-active);

    --bs-body-font-family: var(--kart-font-sans);
    --bs-body-font-size: var(--kart-font-size-base);
    --bs-body-line-height: var(--kart-line-height);
    --bs-font-monospace: var(--kart-font-mono);
    --bs-body-color: var(--kart-text);
    --bs-body-color-rgb: var(--kart-text-rgb);
    --bs-body-bg: var(--kart-bg);
    --bs-body-bg-rgb: var(--kart-bg-rgb);
    --bs-emphasis-color: var(--kart-text);
    --bs-secondary-color: var(--kart-text-secondary);
    --bs-tertiary-color: var(--kart-text-muted);
    --bs-secondary-bg: var(--kart-surface-2);
    --bs-tertiary-bg: var(--kart-surface-2);
    --bs-tertiary-bg-rgb: var(--kart-surface-rgb);
    --bs-border-color: var(--kart-border);
    --bs-border-color-translucent: var(--kart-border);
    --bs-link-color: var(--kart-link);
    --bs-link-color-rgb: var(--kart-color-primary-rgb);
    --bs-link-hover-color: var(--kart-link-hover);
    --bs-focus-ring-color: var(--kart-focus-ring);
    --bs-border-radius-sm: var(--kart-radius-sm);
    --bs-border-radius: var(--kart-radius-md);
    --bs-border-radius-lg: var(--kart-radius-lg);
    --bs-border-radius-pill: var(--kart-radius-pill);
    --bs-box-shadow-sm: var(--kart-shadow-sm);
    --bs-box-shadow: var(--kart-shadow-md);
    --bs-box-shadow-lg: var(--kart-shadow-lg);
}

.btn-primary {
    --bs-btn-color: var(--kart-color-on-primary);
    --bs-btn-bg: var(--kart-color-primary);
    --bs-btn-border-color: var(--kart-color-primary);
    --bs-btn-hover-color: var(--kart-color-on-primary);
    --bs-btn-hover-bg: var(--kart-color-primary-hover);
    --bs-btn-hover-border-color: var(--kart-color-primary-hover);
    --bs-btn-active-color: var(--kart-color-on-primary);
    --bs-btn-active-bg: var(--kart-color-primary-active);
    --bs-btn-active-border-color: var(--kart-color-primary-active);
    --bs-btn-disabled-color: var(--kart-color-on-primary);
    --bs-btn-disabled-bg: var(--kart-color-primary);
    --bs-btn-disabled-border-color: var(--kart-color-primary);
    --bs-btn-focus-shadow-rgb: var(--kart-color-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--kart-color-primary);
    --bs-btn-border-color: var(--kart-color-primary);
    --bs-btn-hover-color: var(--kart-color-on-primary);
    --bs-btn-hover-bg: var(--kart-color-primary);
    --bs-btn-hover-border-color: var(--kart-color-primary);
    --bs-btn-active-color: var(--kart-color-on-primary);
    --bs-btn-active-bg: var(--kart-color-primary-active);
    --bs-btn-active-border-color: var(--kart-color-primary-active);
    --bs-btn-focus-shadow-rgb: var(--kart-color-primary-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--kart-text);
    --bs-btn-border-color: var(--kart-border-strong);
    --bs-btn-hover-color: var(--kart-text);
    --bs-btn-hover-bg: var(--kart-surface-hover);
    --bs-btn-hover-border-color: var(--kart-border-strong);
    --bs-btn-active-color: var(--kart-text);
    --bs-btn-active-bg: var(--kart-surface-hover);
    --bs-btn-active-border-color: var(--kart-color-primary);
    --bs-btn-disabled-color: var(--kart-text-muted);
    --bs-btn-disabled-border-color: var(--kart-border);
    --bs-btn-focus-shadow-rgb: var(--kart-color-primary-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--kart-color-danger);
    --bs-btn-border-color: var(--kart-color-danger);
    --bs-btn-hover-bg: var(--kart-color-danger);
    --bs-btn-hover-border-color: var(--kart-color-danger);
    --bs-btn-active-bg: var(--kart-color-danger);
    --bs-btn-active-border-color: var(--kart-color-danger);
    --bs-btn-focus-shadow-rgb: var(--kart-color-danger-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--kart-color-danger);
    --bs-btn-border-color: var(--kart-color-danger);
    --bs-btn-hover-bg: var(--kart-color-danger);
    --bs-btn-hover-border-color: var(--kart-color-danger);
    --bs-btn-active-bg: var(--kart-color-danger);
    --bs-btn-active-border-color: var(--kart-color-danger);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--kart-color-primary);
    box-shadow: 0 0 0 0.2rem var(--kart-focus-ring);
}

.form-check-input:checked {
    background-color: var(--kart-color-primary);
    border-color: var(--kart-color-primary);
}

.card,
.dropdown-menu,
.modal-content,
.list-group {
    --bs-card-bg: var(--kart-surface);
    --bs-card-border-color: var(--kart-border);
    --bs-dropdown-bg: var(--kart-surface);
    --bs-dropdown-border-color: var(--kart-border);
    --bs-dropdown-link-hover-bg: var(--kart-surface-hover);
    --bs-dropdown-link-active-bg: var(--kart-color-primary);
    --bs-dropdown-link-active-color: var(--kart-color-on-primary);
    --bs-modal-bg: var(--kart-surface);
    --bs-list-group-bg: var(--kart-surface);
    --bs-list-group-border-color: var(--kart-border);
    --bs-list-group-action-hover-bg: var(--kart-surface-hover);
    --bs-list-group-active-bg: var(--kart-color-primary);
    --bs-list-group-active-border-color: var(--kart-color-primary);
}

.table {
    --bs-table-bg: var(--kart-surface);
    --bs-table-color: var(--kart-text);
    --bs-table-border-color: var(--kart-border);
    --bs-table-hover-bg: var(--kart-surface-hover);
    --bs-table-hover-color: var(--kart-text);
    --bs-table-striped-bg: var(--kart-surface-2);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--kart-color-primary);
    --bs-nav-pills-link-active-color: var(--kart-color-on-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--kart-color-primary);
    --bs-pagination-active-border-color: var(--kart-color-primary);
}