/*
   Design tokens ("Night garage").
   Everything visual in the project's own CSS reads these custom properties.
   The second half of the file maps them onto Bootstrap 5.3's variables for the dark colour mode,
   so stock Bootstrap components pick up the theme without a build step.

   Contrast: every text token below is at least 4.5:1 on --bj-bg, --bj-surface and --bj-surface-raised.
   The measured pairs are listed in docs/ai/biltjuv-ui-review.md (section 5.3 and the phase 0-1 note).

   Breakpoints (cannot be custom properties in media queries; use these numbers):
     576px   small phones end
     768px   tablets
     992px   Bootstrap "lg"; page content only
     1200px  the shell switches from the phone and tablet layout (top bar, status strip, bottom bar)
             to the desktop layout (menu left, content, status right)
     1440px  wide: more room around the three columns
*/

:root {
    /* Surfaces */
    --bj-bg: #0f1317;
    --bj-surface: #171c22;
    --bj-surface-raised: #1f262e;
    --bj-surface-sunken: #0b0e11;
    --bj-border: #313a45;
    --bj-border-control: #6b7785;

    /* Text */
    --bj-text: #e7ebef;
    --bj-text-muted: #a7b0bb;
    --bj-text-subtle: #8f99a6;

    /* Brand accent (links, active item, primary button, health) */
    --bj-accent: #4ade80;
    --bj-accent-hover: #86efac;
    --bj-accent-strong: #22c55e;
    --bj-on-accent: #052e16;
    --bj-accent-soft: rgb(74 222 128 / 0.14);

    /* Meaning colours */
    --bj-money: #fbbf24;
    --bj-respect: #c4b5fd;
    --bj-danger: #f87171;
    --bj-danger-fill: #dc2626;
    --bj-on-danger: #ffffff;
    --bj-warning: #fbbf24;
    --bj-on-warning: #422006;
    --bj-info: #7dd3fc;
    --bj-success: #4ade80;

    /* Soft fills behind coloured text (pills, alerts, flash messages) */
    --bj-warning-soft: rgb(251 191 36 / 0.14);
    --bj-danger-soft: rgb(248 113 113 / 0.14);
    --bj-info-soft: rgb(125 211 252 / 0.14);
    --bj-respect-soft: rgb(196 181 253 / 0.14);

    /* Typography: system font stack, tabular figures for numbers */
    --bj-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --bj-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bj-text-xs: 0.75rem;
    --bj-text-sm: 0.875rem;
    --bj-text-md: 1rem;
    --bj-text-lg: 1.125rem;
    --bj-text-xl: 1.375rem;
    --bj-text-2xl: 1.75rem;
    --bj-leading-tight: 1.25;
    --bj-leading: 1.5;

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

    /* Shape */
    --bj-radius-sm: 6px;
    --bj-radius: 10px;
    --bj-radius-pill: 999px;
    --bj-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);

    /* Interaction */
    --bj-target: 44px;
    --bj-focus-ring: 0 0 0 2px var(--bj-bg), 0 0 0 4px var(--bj-info);
    --bj-motion: 150ms ease;

    /* Shell geometry */
    --bj-topbar-height: 56px;
    --bj-bottombar-height: 60px;
    --bj-sidebar-width: 264px;
    --bj-content-max: 960px;
}

/* Area accents: the shell sets data-area on <html>. Same system, different accent. */
:root[data-area="moonshine"] {
    --bj-accent: #2dd4bf;
    --bj-accent-hover: #5eead4;
    --bj-accent-strong: #14b8a6;
    --bj-on-accent: #042f2e;
    --bj-accent-soft: rgb(45 212 191 / 0.14);
}

:root[data-area="pizza"] {
    --bj-accent: #fb923c;
    --bj-accent-hover: #fdba74;
    --bj-accent-strong: #f97316;
    --bj-on-accent: #431407;
    --bj-accent-soft: rgb(251 146 60 / 0.14);
}

/* ---------------------------------------------------------------------------
   Bootstrap 5.3 mapping (dark colour mode)
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-font-sans-serif: var(--bj-font);
    --bs-font-monospace: var(--bj-font-mono);
    --bs-body-font-size: var(--bj-text-md);
    --bs-body-line-height: var(--bj-leading);

    --bs-body-bg: #0f1317;
    --bs-body-bg-rgb: 15, 19, 23;
    --bs-body-color: #e7ebef;
    --bs-body-color-rgb: 231, 235, 239;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #e7ebef;

    --bs-secondary-color: #a7b0bb;
    --bs-secondary-color-rgb: 167, 176, 187;
    --bs-secondary-bg: #1f262e;
    --bs-secondary-bg-rgb: 31, 38, 46;
    --bs-tertiary-color: #8f99a6;
    --bs-tertiary-color-rgb: 143, 153, 166;
    --bs-tertiary-bg: #171c22;
    --bs-tertiary-bg-rgb: 23, 28, 34;

    --bs-border-color: #313a45;
    --bs-border-color-translucent: rgb(255 255 255 / 0.12);
    --bs-border-radius: var(--bj-radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--bj-radius);
    --bs-border-radius-xl: 14px;
    --bs-border-radius-pill: var(--bj-radius-pill);
    --bs-box-shadow: var(--bj-shadow-overlay);
    --bs-focus-ring-color: rgb(125 211 252 / 0.5);

    --bs-link-color: var(--bj-accent);
    --bs-link-color-rgb: 74, 222, 128;
    --bs-link-hover-color: var(--bj-accent-hover);
    --bs-link-hover-color-rgb: 134, 239, 172;
    --bs-link-decoration: none;
    --bs-code-color: #f0abfc;
    --bs-highlight-bg: #713f12;
    --bs-highlight-color: #fef3c7;

    /* Theme colours. The -rgb forms feed .text-*, .bg-* and .border-* utilities. */
    --bs-primary: #4ade80;
    --bs-primary-rgb: 74, 222, 128;
    --bs-secondary: #a7b0bb;
    --bs-secondary-rgb: 167, 176, 187;
    --bs-success: #4ade80;
    --bs-success-rgb: 74, 222, 128;
    --bs-info: #7dd3fc;
    --bs-info-rgb: 125, 211, 252;
    --bs-warning: #fbbf24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger: #f87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-light: #e7ebef;
    --bs-light-rgb: 231, 235, 239;
    --bs-dark: #171c22;
    --bs-dark-rgb: 23, 28, 34;

    --bs-primary-text-emphasis: #86efac;
    --bs-secondary-text-emphasis: #cbd2da;
    --bs-success-text-emphasis: #86efac;
    --bs-info-text-emphasis: #bae6fd;
    --bs-warning-text-emphasis: #fde68a;
    --bs-danger-text-emphasis: #fecaca;
    --bs-light-text-emphasis: #e7ebef;
    --bs-dark-text-emphasis: #cbd2da;

    --bs-primary-bg-subtle: #10281b;
    --bs-secondary-bg-subtle: #1f262e;
    --bs-success-bg-subtle: #10281b;
    --bs-info-bg-subtle: #0f2533;
    --bs-warning-bg-subtle: #2c2208;
    --bs-danger-bg-subtle: #301416;
    --bs-light-bg-subtle: #1f262e;
    --bs-dark-bg-subtle: #0b0e11;

    --bs-primary-border-subtle: #1f6b3d;
    --bs-secondary-border-subtle: #313a45;
    --bs-success-border-subtle: #1f6b3d;
    --bs-info-border-subtle: #1c5a7a;
    --bs-warning-border-subtle: #7a5a0d;
    --bs-danger-border-subtle: #7f2a2a;
    --bs-light-border-subtle: #313a45;
    --bs-dark-border-subtle: #313a45;

    --bs-form-valid-color: #86efac;
    --bs-form-valid-border-color: #4ade80;
    --bs-form-invalid-color: #fca5a5;
    --bs-form-invalid-border-color: #f87171;
}

/* Area accents also drive Bootstrap's link and primary colours. */
[data-bs-theme="dark"][data-area="moonshine"] {
    --bs-link-color-rgb: 45, 212, 191;
    --bs-link-hover-color-rgb: 94, 234, 212;
    --bs-primary: #2dd4bf;
    --bs-primary-rgb: 45, 212, 191;
    --bs-primary-text-emphasis: #5eead4;
    --bs-primary-bg-subtle: #0c2a27;
    --bs-primary-border-subtle: #14665d;
}

[data-bs-theme="dark"][data-area="pizza"] {
    --bs-link-color-rgb: 251, 146, 60;
    --bs-link-hover-color-rgb: 253, 186, 116;
    --bs-primary: #fb923c;
    --bs-primary-rgb: 251, 146, 60;
    --bs-primary-text-emphasis: #fdba74;
    --bs-primary-bg-subtle: #2e1a0b;
    --bs-primary-border-subtle: #7c3f12;
}

/* ---------------------------------------------------------------------------
   Component variables that Bootstrap compiles per class
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--bj-surface);
    --bs-card-cap-bg: var(--bj-surface-raised);
    --bs-card-border-color: var(--bj-border);
    --bs-card-border-radius: var(--bj-radius);
    --bs-card-inner-border-radius: calc(var(--bj-radius) - 1px);
    --bs-card-color: var(--bj-text);
    --bs-card-cap-color: var(--bj-text);
}

[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--bj-surface);
    --bs-list-group-color: var(--bj-text);
    --bs-list-group-border-color: var(--bj-border);
    --bs-list-group-border-radius: var(--bj-radius);
    --bs-list-group-action-hover-bg: var(--bj-surface-raised);
    --bs-list-group-active-bg: var(--bj-accent-soft);
    --bs-list-group-active-color: var(--bj-accent);
    --bs-list-group-active-border-color: var(--bj-border);
}

[data-bs-theme="dark"] .table {
    --bs-table-color: var(--bj-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bj-border);
    --bs-table-striped-color: var(--bj-text);
    --bs-table-striped-bg: rgb(255 255 255 / 0.03);
    --bs-table-hover-color: var(--bj-text);
    --bs-table-hover-bg: rgb(255 255 255 / 0.06);
    --bs-table-active-bg: rgb(255 255 255 / 0.08);
}

[data-bs-theme="dark"] .table-dark {
    --bs-table-color: var(--bj-text);
    --bs-table-bg: var(--bj-surface-raised);
    --bs-table-border-color: var(--bj-border);
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--bj-surface-raised);
    --bs-dropdown-color: var(--bj-text);
    --bs-dropdown-border-color: var(--bj-border);
    --bs-dropdown-link-color: var(--bj-text);
    --bs-dropdown-link-hover-color: var(--bj-text);
    --bs-dropdown-link-hover-bg: rgb(255 255 255 / 0.08);
    --bs-dropdown-link-active-bg: var(--bj-accent-soft);
    --bs-dropdown-link-active-color: var(--bj-accent);
    --bs-dropdown-box-shadow: var(--bj-shadow-overlay);
}

[data-bs-theme="dark"] .modal {
    --bs-modal-bg: var(--bj-surface-raised);
    --bs-modal-color: var(--bj-text);
    --bs-modal-border-color: var(--bj-border);
    --bs-modal-header-border-color: var(--bj-border);
    --bs-modal-footer-border-color: var(--bj-border);
    --bs-modal-border-radius: var(--bj-radius);
    --bs-modal-box-shadow: var(--bj-shadow-overlay);
}

[data-bs-theme="dark"] .offcanvas {
    --bs-offcanvas-bg: var(--bj-surface);
    --bs-offcanvas-color: var(--bj-text);
    --bs-offcanvas-border-color: var(--bj-border);
    --bs-offcanvas-box-shadow: var(--bj-shadow-overlay);
}

[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--bj-border);
    --bs-nav-tabs-link-hover-border-color: var(--bj-border);
    --bs-nav-tabs-link-active-color: var(--bj-text);
    --bs-nav-tabs-link-active-bg: var(--bj-surface);
    --bs-nav-tabs-link-active-border-color: var(--bj-border) var(--bj-border) var(--bj-surface);
}

[data-bs-theme="dark"] .nav {
    --bs-nav-link-color: var(--bj-accent);
    --bs-nav-link-hover-color: var(--bj-accent-hover);
    --bs-nav-link-disabled-color: var(--bj-text-subtle);
}

[data-bs-theme="dark"] .progress {
    --bs-progress-bg: var(--bj-surface-sunken);
    --bs-progress-bar-bg: var(--bj-accent);
    --bs-progress-bar-color: var(--bj-on-accent);
}

[data-bs-theme="dark"] .pagination {
    --bs-pagination-bg: var(--bj-surface);
    --bs-pagination-color: var(--bj-accent);
    --bs-pagination-border-color: var(--bj-border);
    --bs-pagination-hover-bg: var(--bj-surface-raised);
    --bs-pagination-hover-color: var(--bj-accent-hover);
    --bs-pagination-hover-border-color: var(--bj-border);
    --bs-pagination-active-bg: var(--bj-accent);
    --bs-pagination-active-color: var(--bj-on-accent);
    --bs-pagination-active-border-color: var(--bj-accent);
    --bs-pagination-disabled-bg: var(--bj-surface);
    --bs-pagination-disabled-color: var(--bj-text-subtle);
    --bs-pagination-disabled-border-color: var(--bj-border);
}

/* Buttons: Bootstrap bakes colours into each .btn-* class, so each gets its variables here. */
[data-bs-theme="dark"] .btn {
    --bs-btn-border-radius: var(--bj-radius-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-disabled-opacity: 1;
}

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success {
    --bs-btn-color: var(--bj-on-accent);
    --bs-btn-bg: var(--bj-accent);
    --bs-btn-border-color: var(--bj-accent);
    --bs-btn-hover-color: var(--bj-on-accent);
    --bs-btn-hover-bg: var(--bj-accent-hover);
    --bs-btn-hover-border-color: var(--bj-accent-hover);
    --bs-btn-active-color: var(--bj-on-accent);
    --bs-btn-active-bg: var(--bj-accent-strong);
    --bs-btn-active-border-color: var(--bj-accent-strong);
    --bs-btn-disabled-color: var(--bj-on-accent);
    --bs-btn-disabled-bg: var(--bj-accent);
    --bs-btn-disabled-border-color: var(--bj-accent);
}

[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bj-text);
    --bs-btn-bg: var(--bj-surface-raised);
    --bs-btn-border-color: var(--bj-border-control);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #2a323c;
    --bs-btn-hover-border-color: var(--bj-text-muted);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #313a45;
    --bs-btn-active-border-color: var(--bj-text-muted);
    --bs-btn-disabled-color: var(--bj-text-muted);
    --bs-btn-disabled-bg: var(--bj-surface-raised);
    --bs-btn-disabled-border-color: var(--bj-border);
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: var(--bj-on-danger);
    --bs-btn-bg: var(--bj-danger-fill);
    --bs-btn-border-color: var(--bj-danger-fill);
    --bs-btn-hover-color: var(--bj-on-danger);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-color: var(--bj-on-danger);
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-disabled-color: var(--bj-on-danger);
    --bs-btn-disabled-bg: var(--bj-danger-fill);
    --bs-btn-disabled-border-color: var(--bj-danger-fill);
}

[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: var(--bj-on-warning);
    --bs-btn-bg: var(--bj-warning);
    --bs-btn-border-color: var(--bj-warning);
    --bs-btn-hover-color: var(--bj-on-warning);
    --bs-btn-hover-bg: #fcd34d;
    --bs-btn-hover-border-color: #fcd34d;
    --bs-btn-active-color: var(--bj-on-warning);
    --bs-btn-active-bg: #f59e0b;
    --bs-btn-active-border-color: #f59e0b;
    --bs-btn-disabled-color: var(--bj-on-warning);
    --bs-btn-disabled-bg: var(--bj-warning);
    --bs-btn-disabled-border-color: var(--bj-warning);
}

[data-bs-theme="dark"] .btn-info {
    --bs-btn-color: #082f49;
    --bs-btn-bg: var(--bj-info);
    --bs-btn-border-color: var(--bj-info);
    --bs-btn-hover-color: #082f49;
    --bs-btn-hover-bg: #bae6fd;
    --bs-btn-hover-border-color: #bae6fd;
    --bs-btn-active-color: #082f49;
    --bs-btn-active-bg: #38bdf8;
    --bs-btn-active-border-color: #38bdf8;
    --bs-btn-disabled-color: #082f49;
    --bs-btn-disabled-bg: var(--bj-info);
    --bs-btn-disabled-border-color: var(--bj-info);
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--bj-accent);
    --bs-btn-border-color: var(--bj-accent);
    --bs-btn-hover-color: var(--bj-on-accent);
    --bs-btn-hover-bg: var(--bj-accent);
    --bs-btn-hover-border-color: var(--bj-accent);
    --bs-btn-active-color: var(--bj-on-accent);
    --bs-btn-active-bg: var(--bj-accent-strong);
    --bs-btn-active-border-color: var(--bj-accent-strong);
    --bs-btn-disabled-color: var(--bj-text-subtle);
    --bs-btn-disabled-border-color: var(--bj-border);
}

[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-light,
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--bj-text);
    --bs-btn-border-color: var(--bj-border-control);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--bj-surface-raised);
    --bs-btn-hover-border-color: var(--bj-text-muted);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #2a323c;
    --bs-btn-active-border-color: var(--bj-text-muted);
    --bs-btn-disabled-color: var(--bj-text-subtle);
    --bs-btn-disabled-border-color: var(--bj-border);
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bj-danger);
    --bs-btn-border-color: var(--bj-danger);
    --bs-btn-hover-color: var(--bj-on-danger);
    --bs-btn-hover-bg: var(--bj-danger-fill);
    --bs-btn-hover-border-color: var(--bj-danger-fill);
    --bs-btn-active-color: var(--bj-on-danger);
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
}

[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: var(--bj-accent);
    --bs-btn-hover-color: var(--bj-accent-hover);
    --bs-btn-active-color: var(--bj-accent-hover);
    --bs-btn-disabled-color: var(--bj-text-subtle);
    text-decoration: none;
}

/* Badges and filled utilities: light text on a saturated fill fails AA, so fills carry dark text. */
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-success {
    color: var(--bj-on-accent) !important;
    background-color: var(--bj-accent) !important;
}

[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .badge.bg-warning {
    color: var(--bj-on-warning) !important;
    background-color: var(--bj-warning) !important;
}

[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .badge.bg-info {
    color: #082f49 !important;
    background-color: var(--bj-info) !important;
}

[data-bs-theme="dark"] .text-bg-danger,
[data-bs-theme="dark"] .badge.bg-danger {
    color: var(--bj-on-danger) !important;
    background-color: var(--bj-danger-fill) !important;
}

[data-bs-theme="dark"] .text-bg-secondary,
[data-bs-theme="dark"] .text-bg-dark,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-dark {
    color: var(--bj-text) !important;
    background-color: #3a4450 !important;
}

[data-bs-theme="dark"] .text-bg-light,
[data-bs-theme="dark"] .badge.bg-light {
    color: #14181d !important;
    background-color: var(--bj-text) !important;
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    color: var(--bj-text);
    background-color: var(--bj-surface-raised);
    border-color: var(--bj-border-control);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bj-text-subtle);
    opacity: 1;
}

/* A floating label is the placeholder: Bootstrap hides the real one, and the rule above must not show it again. */
[data-bs-theme="dark"] .form-floating > .form-control::placeholder {
    color: transparent;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--bj-info);
    box-shadow: var(--bj-focus-ring);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    color: var(--bj-text-muted);
    background-color: var(--bj-surface);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--bj-surface-raised);
    border-color: var(--bj-border-control);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--bj-accent-strong);
    border-color: var(--bj-accent-strong);
}

[data-bs-theme="dark"] .input-group-text {
    color: var(--bj-text-muted);
    background-color: var(--bj-surface);
    border-color: var(--bj-border-control);
}