/*
  VA Planner — design token layer (ADR 0016)
  ---------------------------------------------------------------------------
  A single source of truth for color, spacing, radius, elevation and type.
  Bootstrap 5.3's CSS variables are remapped onto these tokens so every
  component inherits one cohesive, brand-anchored identity without touching
  markup. Light/dark parity is by construction: the semantic tokens are
  redefined under [data-bs-theme="dark"], and the accent is theme-adaptive
  (Skyline deep blue on light, Skyline cyan on dark).

  Load order (see _Layout.cshtml): bootstrap.min.css -> tokens.css -> site.css
  so these overrides win over Bootstrap and are available to site.css.
*/

:root {
    /* --- Brand (raw, theme-independent) --------------------------------- */
    --brand-blue: #00517D;   /* Skyline accent over light backgrounds       */
    --brand-blue-rgb: 0, 81, 125;
    --brand-cyan: #00A7E1;   /* Skyline accent over dark backgrounds        */
    --brand-cyan-rgb: 0, 167, 225;

    /* --- Radius --------------------------------------------------------- */
    --radius-sm: 0.375rem;   /* 6px  — chips, inputs                        */
    --radius: 0.5rem;        /* 8px  — cards, buttons                       */
    --radius-lg: 0.75rem;    /* 12px — panels                              */
    --radius-pill: 50rem;

    /* --- Controls ------------------------------------------------------ */
    --control-h-sm: 2rem;    /* 32px — shared height for small inputs,
                               selects, buttons and the segmented toggle so
                               toolbars line up (Improvement 7)            */

    /* --- Elevation ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(16, 30, 45, 0.06);
    --shadow: 0 2px 8px rgba(16, 30, 45, 0.08);
    --shadow-lg: 0 8px 24px rgba(16, 30, 45, 0.12);

    /* --- Type ----------------------------------------------------------- */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* --- Motion --------------------------------------------------------- */
    --transition: 0.15s ease;
}

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

    /* Accent (theme-adaptive) */
    --accent: var(--brand-blue);
    --accent-rgb: var(--brand-blue-rgb);
    --accent-strong: #003D5E;   /* hover / active / text-on-light          */
    --accent-contrast: #ffffff; /* text placed on the accent               */
    --accent-subtle: rgba(0, 81, 125, 0.08); /* active-nav / hover wash    */

    /* Neutral surfaces (cool, navy-tinted — not neutral gray) */
    --surface-app: #F3F6F9;     /* app background                          */
    --surface-card: #FFFFFF;    /* cards, panels, rows                     */
    --surface-raised: #FFFFFF;
    --surface-sunken: #EDF1F5;  /* wells, board columns, table stripes     */
    --border: #DCE3EA;
    --border-strong: #C4CFD9;

    /* Text */
    --text: #172533;
    --text-muted: #5A6B7B;
    --text-faint: #8A99A8;

    /* Semantic (desaturated, harmonized) */
    --success: #2E7D57;
    --success-rgb: 46, 125, 87;
    --success-subtle: #E4F2EA;
    --warning: #B07514;
    --warning-rgb: 176, 117, 20;
    --warning-subtle: #F8EFDD;
    --danger: #C0442E;
    --danger-rgb: 192, 68, 46;
    --danger-subtle: #F8E5E1;
    --neutral: #5A6B7B;
    --neutral-rgb: 90, 107, 123;
    --neutral-subtle: #EAEEF2;
}

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

    --accent: var(--brand-cyan);
    --accent-rgb: var(--brand-cyan-rgb);
    --accent-strong: #33B9E7;
    --accent-contrast: #06212E;
    --accent-subtle: rgba(0, 167, 225, 0.14);

    --surface-app: #0E1621;     /* deep navy-charcoal, not pure black      */
    --surface-card: #17222F;
    --surface-raised: #1D2A38;
    --surface-sunken: #121C27;
    --border: #2A3846;
    --border-strong: #3A4C5C;

    --text: #E6EDF3;
    --text-muted: #9FB0BF;
    --text-faint: #6E8092;

    --success: #4FB286;
    --success-rgb: 79, 178, 134;
    --success-subtle: #14312A;
    --warning: #E0A64B;
    --warning-rgb: 224, 166, 75;
    --warning-subtle: #33280F;
    --danger: #E27B67;
    --danger-rgb: 226, 123, 103;
    --danger-subtle: #341C18;
    --neutral: #9FB0BF;
    --neutral-rgb: 159, 176, 191;
    --neutral-subtle: #202D3A;
}

/* =========================================================================
   BOOTSTRAP VARIABLE REMAP
   Map Bootstrap's theme variables onto our tokens (both themes).
   ========================================================================= */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--font-sans);

    --bs-body-bg: var(--surface-app);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-secondary-bg: var(--surface-sunken);
    --bs-tertiary-bg: var(--surface-sunken);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-faint);

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);

    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);

    --bs-link-color: var(--accent);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent-strong);

    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);

    --bs-focus-ring-color: rgba(var(--accent-rgb), 0.25);
}

/* =========================================================================
   COMPONENT OVERRIDES
   Bootstrap components read local (--bs-btn-*, --bs-card-*, …) variables
   compiled from Sass, so remapping the theme vars above isn't enough —
   these route the components through our tokens.
   ========================================================================= */

body {
    background-color: var(--surface-app);
}

/* Buttons — primary carries the accent */
.btn-primary {
    --bs-btn-color: var(--accent-contrast);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-contrast);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-color: var(--accent-contrast);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-disabled-color: var(--accent-contrast);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

/* Neutral outline buttons — the workhorse secondary action */
.btn-outline-secondary {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-sunken);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--surface-sunken);
    --bs-btn-active-border-color: var(--border-strong);
}

.btn-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface-sunken);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--border);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--border);
    --bs-btn-active-border-color: var(--border-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
}

/* Cards — soft border, gentle elevation, token radius */
.card {
    --bs-card-bg: var(--surface-card);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--accent-subtle);
    --bs-table-hover-color: var(--text);
}

.table > thead {
    --bs-table-color: var(--text-muted);
}

.table > thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom-color: var(--border-strong);
}

/* Forms */
.form-control,
.form-select {
    --bs-border-color: var(--border-strong);
    background-color: var(--surface-card);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.2);
}

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface-card);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-link-hover-bg: var(--accent-subtle);
    --bs-dropdown-link-active-bg: var(--accent);
    box-shadow: var(--shadow);
}

/* List groups */
.list-group {
    --bs-list-group-bg: var(--surface-card);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-hover-bg: var(--accent-subtle);
}

/* Links: quiet by default, accent on hover */
a {
    color: var(--accent);
    text-underline-offset: 0.15em;
}
a:hover {
    color: var(--accent-strong);
}

/* Global focus-visible ring in the brand accent */
:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.5);
    outline-offset: 2px;
}

/* =========================================================================
   SCROLLBARS
   Slim, rounded, theme-adaptive bars that pick up the token palette (so they
   shift with light/dark automatically). Firefox reads scrollbar-width/color;
   WebKit/Chromium/Edge read the ::-webkit-scrollbar pseudo-elements. The
   transparent border + padding-box clip give the thumb breathing room so it
   reads as a slim floating pill rather than a full-width block.
   ========================================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-faint);
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--text-muted);
}
::-webkit-scrollbar-corner {
    background: transparent;
}