/* V2 Bootstrap CSS Variable Overrides
   ============================================================================
   Loaded after v2-bootstrap.css to override Bootstrap CSS variables at runtime.
   Use this file for CSS custom property overrides.
   For Sass variable changes, edit lib/bootstrap5/v2-bootstrap.scss instead.

   Strategy: Dark and light modes are scoped via [data-bs-theme] attribute.
   The HTML element always has data-bs-theme="light" or "dark" — never bare.
   See docs/shared/user_interface_v2/DESIGN_SYSTEM.md for tier details.
*/

/* Typography — Font Stack Overrides
   --------------------------------------------------------------------------
   Override Bootstrap's default system font stack with our design fonts.
   Bootstrap 5 does not have a native --bs-heading-font-family, so we define
   it here and apply it to heading elements below.
*/
:root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-heading-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-heading-font-family);
}

/* Containers */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Dark Mode Tokens
   --------------------------------------------------------------------------
   Tier 1: CSS custom property overrides for dark theme.
   Applied only when [data-bs-theme="dark"] is set on the HTML element.
*/
[data-bs-theme="dark"] {
    /* ── FG Design Tokens ──────────────────────────────────────────────────
       Single source of truth for the V2 dark palette.
       Derived from the Obsidian/Ivory/Slate design language.
       All --bs-* and --kendo-* assignments below reference these tokens.
       Page-specific CSS files use var(--fg-*) instead of hardcoded hex.
    */

    /* Backgrounds — darkest to lightest (blue-tinted blacks) */
    --fg-bg-deepest: #0D0D12;      /* Obsidian — body, app surface */
    --fg-bg-surface: #1A1A24;      /* Hover state — forms, table headers, accordion buttons */
    --fg-bg-elevated: #13131A;     /* Card surface — cards, panels, modals */
    --fg-bg-dropdown: #16161E;     /* dropdown menus */
    --fg-bg-disabled: #0F0F16;     /* disabled inputs */

    /* Borders (Muted Slate family) */
    --fg-border: #2D3442;          /* primary border (slate 50% on card) */
    --fg-border-subtle: #353E4E;   /* lighter border variant */
    --fg-border-alt: #3A4556;      /* grid header separators */
    --fg-border-disabled: #1E2130; /* disabled input borders */

    /* Text */
    --fg-text: #FAF8F5;            /* Ivory — primary text */
    --fg-text-muted: #94A3B8;      /* mid-slate — secondary text */
    --fg-text-subdued: #7889A0;    /* Slate 450 — placeholder, tertiary text */

    /* Links */
    --fg-link: #5b8fd4;            /* link color */
    --fg-link-hover: #7ea8e0;      /* link hover */

    /* Accent */
    --fg-accent: #E5C158;          /* Luminous Champagne — active states, highlights */

    /* Filter rail (Evaluation Search) — elevated sidebar surface.
       Dark theme: one step elevated from the body, reusing surface tokens. */
    --fg-rail-bg: var(--fg-bg-elevated);
    --fg-rail-bg-elevated: var(--fg-bg-surface);   /* hover / active rows */
    --fg-rail-border: var(--fg-border);
    --fg-rail-text: var(--fg-text);
    --fg-rail-text-muted: var(--fg-text-muted);

    /* Avatar palette (personnel initials) — deterministic index 1..6 */
    --fg-avatar-1: #d98c5f;
    --fg-avatar-2: #5fa777;
    --fg-avatar-3: #5b8fd4;
    --fg-avatar-4: #9b7fd4;
    --fg-avatar-5: #4ba0a8;
    --fg-avatar-6: #c96f8b;

    /* ── Bootstrap Token Overrides ─────────────────────────────────────── */

    /* Body & Background */
    --bs-body-color: var(--fg-text);
    --bs-body-color-rgb: 250, 248, 245;
    --bs-body-bg: var(--fg-bg-deepest);
    --bs-body-bg-rgb: 13, 13, 18;

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: rgba(250, 248, 245, 0.75);
    --bs-secondary-color-rgb: 250, 248, 245;
    --bs-secondary-bg: var(--fg-bg-elevated);
    --bs-secondary-bg-rgb: 19, 19, 26;

    --bs-tertiary-color: rgba(250, 248, 245, 0.5);
    --bs-tertiary-color-rgb: 250, 248, 245;
    --bs-tertiary-bg: var(--fg-bg-surface);
    --bs-tertiary-bg-rgb: 26, 26, 36;

    /* Theme Color Tokens
       FG brand colors tuned for dark mode backgrounds.
       Each color includes base, RGB, text-emphasis (lighter for readability),
       bg-subtle (very dark tint), and border-subtle (medium dark tint).
    */

    /* Primary — FG brand blue */
    --bs-primary: #366ab5;
    --bs-primary-rgb: 54, 106, 181;
    --bs-primary-text-emphasis: #7599cc;
    --bs-primary-bg-subtle: #0D1524;
    --bs-primary-border-subtle: #20406d;

    /* Secondary — Slate for subdued elements */
    --bs-secondary: #64748B;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-secondary-text-emphasis: #94A3B8;
    --bs-secondary-bg-subtle: #101018;
    --bs-secondary-border-subtle: #3A4556;

    /* Success — FG green */
    --bs-success: #2DAD00;
    --bs-success-rgb: 45, 173, 0;
    --bs-success-text-emphasis: #6dc84c;
    --bs-success-bg-subtle: #092200;
    --bs-success-border-subtle: #1a6800;

    /* Danger — FG red */
    --bs-danger: #E63E42;
    --bs-danger-rgb: 230, 62, 66;
    --bs-danger-text-emphasis: #ee7f82;
    --bs-danger-bg-subtle: #2e0c0d;
    --bs-danger-border-subtle: #8a2527;

    /* Warning — FG orange */
    --bs-warning: #fd7e14;
    --bs-warning-rgb: 253, 126, 20;
    --bs-warning-text-emphasis: #fda85c;
    --bs-warning-bg-subtle: #321904;
    --bs-warning-border-subtle: #984c0c;

    /* Info — FG cyan */
    --bs-info: #239BB3;
    --bs-info-rgb: 35, 155, 179;
    --bs-info-text-emphasis: #68bccf;
    --bs-info-bg-subtle: #071f24;
    --bs-info-border-subtle: #155d6b;

    /* Light — adapted for dark theme context */
    --bs-light: var(--fg-text);
    --bs-light-rgb: 250, 248, 245;
    --bs-light-text-emphasis: var(--fg-text);
    --bs-light-bg-subtle: var(--fg-bg-elevated);
    --bs-light-border-subtle: #3A4556;

    /* Dark — deep black for dark theme context */
    --bs-dark: var(--fg-bg-elevated);
    --bs-dark-rgb: 19, 19, 26;
    --bs-dark-text-emphasis: var(--fg-text);
    --bs-dark-bg-subtle: var(--fg-bg-deepest);
    --bs-dark-border-subtle: var(--fg-border-subtle);

    /* Border & Shadow Tokens
       Subtle borders for dark backgrounds. Shadows are minimal —
       the dark background provides natural depth separation.
    */
    --bs-border-color: var(--fg-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);

    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.4);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);

    /* Link & Focus Tokens
       Links use primary blue for visibility on dark backgrounds.
       Focus ring uses a translucent primary blue — visible but not garish.
    */
    --bs-link-color: var(--fg-link);
    --bs-link-hover-color: var(--fg-link-hover);
    --bs-link-color-rgb: 91, 143, 212;
    --bs-link-hover-color-rgb: 126, 168, 224;

    --bs-focus-ring-color: rgba(54, 106, 181, 0.35);
    --bs-focus-ring-opacity: 0.35;
}


/* Light Mode Overrides
   --------------------------------------------------------------------------
   FG brand colors and custom styling for light theme.
   Only properties that differ from Bootstrap defaults are included.
*/
[data-bs-theme="light"] {
    /* ── FG Design Tokens ──────────────────────────────────────────────────
       Single source of truth for the V2 light palette.
       Mirrors the dark mode token set with light-appropriate values.
    */

    /* Backgrounds */
    --fg-bg-deepest: #ffffff;
    --fg-bg-surface: #f1f3f5;
    --fg-bg-elevated: #ffffff;
    --fg-bg-dropdown: #ffffff;
    --fg-bg-disabled: #e9ecef;

    /* Borders */
    --fg-border: #d1d6db;
    --fg-border-subtle: #c0c7ce;
    --fg-border-alt: #c8cfd6;
    --fg-border-disabled: #ced4da;

    /* Text */
    --fg-text: #212529;
    --fg-text-muted: #5a6a7a;
    --fg-text-subdued: #8a97a4;

    /* Links */
    --fg-link: #366ab5;
    --fg-link-hover: #2d5a9e;

    /* Filter rail (Evaluation Search) — elevated sidebar surface.
       Light theme: an intentional dark slate (the rail stays dark in light mode,
       matching the mockup), with light text. */
    --fg-rail-bg: #1f2733;
    --fg-rail-bg-elevated: #2a3340;                /* hover / active rows */
    --fg-rail-border: #33414f;
    --fg-rail-text: #f5f7fa;
    --fg-rail-text-muted: #aab6c4;

    /* Avatar palette (personnel initials) — deterministic index 1..6 */
    --fg-avatar-1: #c4703f;
    --fg-avatar-2: #3f8c5a;
    --fg-avatar-3: #366ab5;
    --fg-avatar-4: #7a5cc4;
    --fg-avatar-5: #2f8a92;
    --fg-avatar-6: #b05071;

    /* ── Bootstrap Token Overrides ─────────────────────────────────────── */

    /* Theme Color Tokens — FG brand colors for light mode
       Bootstrap defaults are close but we ensure FG brand colors are applied.
       bg-subtle and border-subtle variants adjusted for light backgrounds.
    */

    /* Primary — FG brand blue */
    --bs-primary: #366ab5;
    --bs-primary-rgb: 54, 106, 181;
    --bs-primary-text-emphasis: #1e3a64;
    --bs-primary-bg-subtle: #dce6f3;
    --bs-primary-border-subtle: #a3bede;

    /* Secondary — muted blue-gray */
    --bs-secondary: #5a6a7a;
    --bs-secondary-rgb: 90, 106, 122;
    --bs-secondary-text-emphasis: #2d3640;
    --bs-secondary-bg-subtle: #e8ebee;
    --bs-secondary-border-subtle: #b8c0c8;

    /* Success — FG green */
    --bs-success: #2DAD00;
    --bs-success-rgb: 45, 173, 0;
    --bs-success-text-emphasis: #174f00;
    --bs-success-bg-subtle: #d9f2cc;
    --bs-success-border-subtle: #8cd166;

    /* Danger — FG red */
    --bs-danger: #E63E42;
    --bs-danger-rgb: 230, 62, 66;
    --bs-danger-text-emphasis: #7a1f21;
    --bs-danger-bg-subtle: #fad8d9;
    --bs-danger-border-subtle: #ee9294;

    /* Warning — FG orange */
    --bs-warning: #fd7e14;
    --bs-warning-rgb: 253, 126, 20;
    --bs-warning-text-emphasis: #7e3f0a;
    --bs-warning-bg-subtle: #fee5d0;
    --bs-warning-border-subtle: #feb272;

    /* Info — FG cyan */
    --bs-info: #239BB3;
    --bs-info-rgb: 35, 155, 179;
    --bs-info-text-emphasis: #124e5a;
    --bs-info-bg-subtle: #d3ecf0;
    --bs-info-border-subtle: #7dc5d4;

    /* Link colors for light mode */
    --bs-link-color: var(--fg-link);
    --bs-link-hover-color: var(--fg-link-hover);
    --bs-link-color-rgb: 54, 106, 181;
    --bs-link-hover-color-rgb: 45, 90, 158;

    /* Focus ring */
    --bs-focus-ring-color: rgba(54, 106, 181, 0.25);

    /* Border — slightly softer than Bootstrap default */
    --bs-border-color: var(--fg-border);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.12);
}


/* Dark Mode Component Overrides (Tier 2)
   --------------------------------------------------------------------------
   For tokens not exposed as --bs-* CSS custom properties.
   Use component-scoped variables where available (e.g., --bs-btn-bg).
   Only applied in dark mode.
*/


/* Item 5: Card & Panel Overrides
   Rounded corners, colored top accent border, dark interior.
   The accent border-top color is set per-card via utility classes or
   page-specific CSS — this provides the base card styling.
*/
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--fg-bg-elevated);
    --bs-card-border-color: var(--fg-border);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
    --bs-card-color: var(--fg-text);
    border-radius: 0.5rem;
    border-top: 0.1875rem solid var(--bs-primary);
}

[data-bs-theme="dark"] .card .card-header {
    border-bottom-color: var(--fg-border);
}

[data-bs-theme="dark"] .card .card-footer {
    border-top-color: var(--fg-border);
}


/* Item 6: Button Overrides
   Buttons use FG brand colors. Primary and danger are the most prominent
   per mockup ("Generate Report" = danger, "This Shift" = outline).
*/
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #366ab5;
    --bs-btn-border-color: #366ab5;
    --bs-btn-hover-bg: #2d5a9e;
    --bs-btn-hover-border-color: #28508c;
    --bs-btn-active-bg: #28508c;
    --bs-btn-active-border-color: #234780;
    --bs-btn-color: #fff;
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-bg: #E63E42;
    --bs-btn-border-color: #E63E42;
    --bs-btn-hover-bg: #cc3538;
    --bs-btn-hover-border-color: #b82f32;
    --bs-btn-active-bg: #b82f32;
    --bs-btn-active-border-color: #a4292c;
    --bs-btn-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--fg-link);
    --bs-btn-border-color: #366ab5;
    --bs-btn-hover-bg: #366ab5;
    --bs-btn-hover-border-color: #366ab5;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2d5a9e;
    --bs-btn-active-border-color: #2d5a9e;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--fg-text-muted);
    --bs-btn-border-color: var(--fg-text-subdued);
    --bs-btn-hover-bg: var(--fg-text-subdued);
    --bs-btn-hover-border-color: var(--fg-text-subdued);
    --bs-btn-hover-color: #fff;
}


/* Item 7: Modal Overrides
   Dark theme modals — inherit from body tokens with subtle border.
*/
[data-bs-theme="dark"] .modal-content {
    --bs-modal-bg: var(--fg-bg-elevated);
    --bs-modal-border-color: var(--fg-border);
    --bs-modal-color: var(--fg-text);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--fg-border);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--fg-border);
}

/* V2 Modal Header — branded header with logo and title */
.fg-modal-header {
    background-color: var(--bs-primary);
    border-bottom: none;
}

.fg-modal-header__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.fg-modal-header__logo {
    width: 40px;
    height: 40px;
}

.fg-modal-header__title {
    font-family: var(--fg-font-heading);
    font-size: 1.125rem;
    color: #ffffff;
}

[data-bs-theme="dark"] .fg-modal-header {
    background-color: var(--fg-bg-surface);
    border-bottom: 1px solid var(--fg-border);
}

[data-bs-theme="dark"] .fg-modal-header__title {
    color: var(--fg-text);
}


/* Item 8: Table & Grid Overrides
   Dark header, clean row borders matching Mockup_KPI_Grid.jpg "Live Tickets".
*/
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fg-text);
    --bs-table-border-color: var(--fg-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--fg-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--fg-text);
    --bs-table-active-bg: rgba(54, 106, 181, 0.1);
    --bs-table-active-color: var(--fg-text);
}

[data-bs-theme="dark"] .table > thead {
    background-color: var(--fg-bg-surface);
    color: var(--fg-text-muted);
}


/* Item 9: Tab & Nav Overrides
   Card-tab style — active tab has left/top/right border matching the separator.
   Active tab background covers the separator line beneath it, creating the
   visual effect of the separator wrapping around the selected tab.
*/
[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.125rem;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--fg-text-subdued);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--fg-text-muted);
    border-color: transparent;
    background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bs-emphasis-color);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-bottom-color: var(--bs-body-bg);
    font-weight: 600;
}


/* Item 10: Dropdown & Accordion Overrides
   Inherit dark theme from body tokens.
*/
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--fg-bg-dropdown);
    --bs-dropdown-border-color: var(--fg-border);
    --bs-dropdown-link-color: var(--fg-text);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-active-bg: #366ab5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-divider-bg: var(--fg-border);
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: var(--fg-bg-elevated);
    --bs-accordion-border-color: var(--fg-border);
    --bs-accordion-color: var(--fg-text);
    --bs-accordion-btn-color: var(--fg-text);
    --bs-accordion-btn-bg: var(--fg-bg-surface);
    --bs-accordion-active-bg: rgba(54, 106, 181, 0.1);
    --bs-accordion-active-color: var(--fg-link);
}


/* Item 11: Form Control Overrides
   Inputs integrate with dark theme. Matches search input in Mockup_KPI_Grid.jpg.
*/
[data-bs-theme="dark"] .form-control {
    background-color: var(--fg-bg-surface);
    border-color: var(--fg-border);
    color: var(--fg-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--fg-text-subdued);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--fg-bg-surface);
    border-color: var(--bs-primary);
    color: var(--fg-text);
    box-shadow: 0 0 0 0.25rem rgba(54, 106, 181, 0.25);
}

[data-bs-theme="dark"] .form-select {
    background-color: var(--fg-bg-surface);
    border-color: var(--fg-border);
    color: var(--fg-text);
}

[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(54, 106, 181, 0.25);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--fg-bg-disabled);
    color: var(--fg-text-subdued);
    border-color: var(--fg-border-disabled);
    opacity: 1;
    cursor: not-allowed;
}

[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--fg-bg-disabled);
    color: var(--fg-text-subdued);
    border-color: var(--fg-border-disabled);
    opacity: 1;
    cursor: not-allowed;
}

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

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #366ab5;
    border-color: #366ab5;
}


/* Light Mode Component Overrides (Tier 2)
   --------------------------------------------------------------------------
   Only components that need explicit light mode styling beyond what
   Bootstrap defaults provide. Most inherit correctly from Tier 1 tokens.
*/

/* Cards — keep accent border pattern on light backgrounds */
[data-bs-theme="light"] .card {
    --bs-card-border-color: var(--fg-border);
    border-radius: 0.5rem;
    border-top: 0.1875rem solid var(--bs-primary);
}

/* Tabs — card-tab style in light mode */
[data-bs-theme="light"] .nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.125rem;
}

[data-bs-theme="light"] .nav-tabs .nav-link {
    color: var(--fg-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
}

[data-bs-theme="light"] .nav-tabs .nav-link:hover {
    color: #2d3640;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="light"] .nav-tabs .nav-link.active {
    color: var(--bs-emphasis-color);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-bottom-color: var(--bs-body-bg);
    font-weight: 600;
}

/* Buttons — ensure FG brand colors in light mode */
[data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: #366ab5;
    --bs-btn-border-color: #366ab5;
    --bs-btn-hover-bg: #2d5a9e;
    --bs-btn-hover-border-color: #28508c;
    --bs-btn-color: #fff;
}

[data-bs-theme="light"] .btn-danger {
    --bs-btn-bg: #E63E42;
    --bs-btn-border-color: #E63E42;
    --bs-btn-hover-bg: #cc3538;
    --bs-btn-hover-border-color: #b82f32;
    --bs-btn-color: #fff;
}

/* Table header — light mode uses subtle gray instead of dark navy */
[data-bs-theme="light"] .table > thead {
    background-color: var(--fg-bg-surface);
    color: var(--fg-text-muted);
}