/* =============================================================================
   THEME.CSS — single source of truth for COLOR + type feel in the quoting portal.

   2026-07 REVAMP → "Toyota console": VSSWeb's restrained enterprise/MSP design
   language, recoloured to the Toyota signature (ink-black + red on a cool canvas).
   Loaded LAST in App.razor so these values are authoritative.

   Structure
   ---------
   1. :root            — LIGHT theme (default): cool canvas, white surfaces, dark-ink sidebar
   2. .theme-dark      — DARK theme remaps
   3. Sidebar scope    — .nav-root / .mobile-topbar always render light-on-dark ink
                         (VSSWeb keeps the sidebar dark in BOTH themes) — this is how the
                         existing NavMenu markup goes dark-ink without editing its 1,600-line CSS.
   4. Type feel        — Inter (body) + Space Grotesk (display) + JetBrains Mono (numbers)

   Rules of the road
   -----------------
   • NEVER hardcode a hex in a page/component — add or reuse a token here.
   • Non-color design tokens (spacing, radii, motion, z, layout dims) live in
     toyota-redesign.css — do not duplicate them here.
   ============================================================================= */

/* =============================================================================
   1. LIGHT THEME (default) — cool console canvas
   ============================================================================= */
:root {
    color-scheme: light;

    /* ---------------------------------------------------------------
       Brand — Toyota signature palette (theme-invariant anchors)
       --------------------------------------------------------------- */
    --toyota-red: #eb0a1e;
    --toyota-red-dark: #c10818;
    --toyota-red-light: #ff2233;
    --toyota-red-rgb: 235, 10, 30;
    --toyota-grey-dark: #2d2d2d;
    --toyota-grey: #58595b;
    --toyota-grey-light: #a6a8ab;
    --toyota-silver: #e8e8e8;
    --toyota-charcoal: #1a1a1a;

    /* Ink — the dark sidebar surface (VSSWeb's signature dark rail), neutral warm-black */
    --ink:    #17181c;
    --ink-2:  #202127;
    --ink-3:  #2a2c33;

    /* ---------------------------------------------------------------
       Type feel — VSSWeb stack (loaded in App.razor)
       --------------------------------------------------------------- */
    --font-sans:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    var(--font-sans);
    --font-primary: var(--font-sans);
    --font-display: 'Space Grotesk', var(--font-sans);
    --font-heading: var(--font-display);
    --font-mono:    'JetBrains Mono', ui-monospace, "SFMono-Regular", monospace;

    /* Console type scale (used by the new component layer) */
    --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 14px;
    --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;

    /* ---------------------------------------------------------------
       Status RGB helpers
       --------------------------------------------------------------- */
    --success-rgb: 22, 163, 74;
    --danger-rgb: 224, 71, 61;
    --warning-rgb: 217, 145, 0;
    --primary-rgb: 235, 10, 30;

    /* ---------------------------------------------------------------
       Primary / accent — Toyota red is the console accent (VSSWeb model:
       primary == brand accent, used for actions + active states)
       --------------------------------------------------------------- */
    --primary: var(--toyota-red);
    --primary-hover: var(--toyota-red-dark);
    --primary-active: #a10714;
    --primary-tint: #fdecee;
    --on-primary: #ffffff;
    --primary-light: rgba(235, 10, 30, 0.08);
    --primary-border: rgba(235, 10, 30, 0.18);
    --primary-color: var(--toyota-red);
    --primary-color-detail: var(--toyota-red);

    /* ---------------------------------------------------------------
       Status colors (console semantics — danger kept warm-distinct from brand red)
       --------------------------------------------------------------- */
    --success: #16a34a;
    --success-hover: #15803d;
    --success-light: rgba(22, 163, 74, 0.1);
    --success-border: rgba(22, 163, 74, 0.16);
    --success-color: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.1);
    --success-border-light: rgba(22, 163, 74, 0.22);
    --success-fg: #15803d;

    --warning: #d99100;
    --warning-hover: #9a6700;
    --warning-light: rgba(217, 145, 0, 0.12);
    --warning-border: rgba(217, 145, 0, 0.2);
    --warning-fg: #9a6700;

    --danger: #e0473d;
    --danger-hover: #b42318;
    --danger-light: rgba(224, 71, 61, 0.1);
    --danger-border: rgba(224, 71, 61, 0.16);
    --danger-color: #e0473d;
    --danger-bg: rgba(224, 71, 61, 0.1);
    --danger-border-light: rgba(224, 71, 61, 0.22);
    --danger-fg: #b42318;

    /* Info — calm steel (NOT red, so info banners read as informational) */
    --info: #3f6d99;
    --info-hover: #2f5479;
    --info-light: rgba(63, 109, 153, 0.1);
    --info-border: rgba(63, 109, 153, 0.18);
    --info-fg: #2f5479;

    --accent-color: var(--toyota-red);
    --accent-hover: var(--toyota-red-dark);
    --accent-light: rgba(235, 10, 30, 0.1);

    /* ---------------------------------------------------------------
       Backgrounds — cool light canvas, crisp white surfaces
       --------------------------------------------------------------- */
    --body-bg: #eef1f4;
    --sidebar-bg: var(--ink);          /* dark ink even in light mode (VSSWeb) */
    --content-bg: #ffffff;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ffffff;
    --tooltip-bg: #17181c;

    /* ---------------------------------------------------------------
       Text — near-black neutral ink on the canvas
       --------------------------------------------------------------- */
    --text: #1a1c20;
    --text-primary: #1a1c20;
    --text-secondary: #5c626b;
    --text-muted: #8b919a;
    --text-subtle: #9aa1aa;
    --text-light: #b9bfc6;
    --tooltip-text: #ffffff;

    /* ---------------------------------------------------------------
       Icons
       --------------------------------------------------------------- */
    --icon-color: #8b919a;
    --icon-hover: #5c626b;
    --icon-active: var(--toyota-red);
    --icon-light: #b9bfc6;
    --icon-dark: #5c626b;

    /* ---------------------------------------------------------------
       Borders / dividers — hairline, cool
       --------------------------------------------------------------- */
    --border-color: #dbe0e6;
    --border-strong: #c7cdd5;
    --border-light: #e6eaef;
    --divider-color: #e6eaef;
    --border: #dbe0e6;
    --border-soft: #e9edf1;

    /* ---------------------------------------------------------------
       Navigation (canvas-side; sidebar overrides live in the scope block)
       --------------------------------------------------------------- */
    --nav-hover: rgba(235, 10, 30, 0.05);
    --nav-active: rgba(235, 10, 30, 0.1);

    /* ---------------------------------------------------------------
       Shadows — tight, low, console-flat
       --------------------------------------------------------------- */
    --shadow-color: rgba(20, 24, 30, 0.06);
    --shadow-color-dark: rgba(20, 24, 30, 0.12);
    --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.05);
    --shadow-md: 0 1px 2px rgba(20, 24, 30, 0.06), 0 8px 24px rgba(20, 24, 30, 0.06);
    --shadow-lg: 0 16px 48px rgba(20, 24, 30, 0.16);
    --shadow: var(--shadow-md);

    /* ---------------------------------------------------------------
       Scrollbars
       --------------------------------------------------------------- */
    --scroll-thumb: #c7cdd5;
    --scroll-thumb-hover: #a9b1bb;

    /* ---------------------------------------------------------------
       Misc UI
       --------------------------------------------------------------- */
    --focus-ring: rgba(235, 10, 30, 0.22);
    --overlay-bg: rgba(20, 24, 30, 0.5);
    --placeholder-color: #9aa1aa;
    --input-text: #1a1c20;
    --input-border: #c7cdd5;
    --input-focus-border: var(--toyota-red);

    /* ---------------------------------------------------------------
       Bootstrap table bridge
       --------------------------------------------------------------- */
    --bs-table-color-type: #1a1c20;
    --bs-table-bg-type: #ffffff;
    --bs-table-color-state: #1a1c20;
    --bs-table-bg-state: #ffffff;
    --bs-table-color: #1a1c20;
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #e6eaef;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #1a1c20;
    --bs-table-striped-bg: rgba(20, 24, 30, 0.02);
    --bs-table-active-color: #1a1c20;
    --bs-table-active-bg: rgba(235, 10, 30, 0.06);
    --bs-table-hover-color: #1a1c20;
    --bs-table-hover-bg: rgba(20, 24, 30, 0.035);
    --bs-emphasis-color: #1a1c20;
    --bs-emphasis-color-rgb: 26, 28, 32;
    --bs-body-bg: #ffffff;
    --bs-border-color: #e6eaef;

    /* ===============================================================
       SEMANTIC LAYER — consume these in components
       =============================================================== */

    /* Surfaces: 0 = page, 1 = panel/card, 2 = raised/hover, 3 = highest */
    --surface-0: var(--body-bg);
    --surface-1: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #eef1f4;
    --surface: #ffffff;

    /* Tables */
    --table-head-bg: #f4f6f9;
    --table-head-text: #5c626b;
    --table-row-border: #eceff3;
    --table-row-hover: rgba(20, 24, 30, 0.03);

    /* Chips / pills */
    --chip-bg: #eef2f6;
    --chip-border: #d9e0e8;
    --chip-text: #46525f;

    /* Status SURFACES (banner/badge backgrounds with readable text) */
    --success-surface: #e6f6ec;
    --success-surface-border: #bfe4c9;
    --success-surface-text: #15803d;

    --warning-surface: #fbf3d9;
    --warning-surface-border: #ecdca0;
    --warning-surface-text: #8a6300;

    --danger-surface: #fdecea;
    --danger-surface-border: #f4c4c0;
    --danger-surface-text: #b42318;

    --info-surface: #eaf1f8;
    --info-surface-border: #cfdeed;
    --info-surface-text: #2f5479;

    /* Sidebar-side gradients (used by NavMenu; the dark-ink values are in the scope block) */
    --sidebar-bg-grad: #1c1d23;   /* flat ink (mockup) — the old gradient darkened the base toward near-black */
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: linear-gradient(90deg, rgba(235, 10, 30, 0.26) 0%, rgba(235, 10, 30, 0.10) 55%, transparent 100%);
    --sidebar-active-text: #ffffff;
    --sidebar-active-glow: 0 0 0 1px rgba(235, 10, 30, 0.22), 0 4px 14px rgba(235, 10, 30, 0.12);
    --sidebar-section-rule: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
    --sidebar-brand-sheen: radial-gradient(120% 90% at 0% 0%, rgba(235, 10, 30, 0.14) 0%, transparent 55%);
    --sidebar-edge: linear-gradient(180deg, transparent 0%, rgba(235, 10, 30, 0.42) 18%, rgba(235, 10, 30, 0.42) 82%, transparent 100%);
    --user-card-bg: rgba(255, 255, 255, 0.04);
}

/* =============================================================================
   2. DARK THEME — deep ink canvas
   ============================================================================= */
.theme-dark {
    color-scheme: dark;

    /* Primary / accent (brighter red so it lifts off dark surfaces) */
    --primary: #ff2233;
    --primary-hover: #ff4453;
    --primary-active: #ff6673;
    --primary-tint: rgba(255, 34, 51, 0.16);
    --on-primary: #12060a;
    --primary-light: rgba(255, 34, 51, 0.16);
    --primary-border: rgba(255, 34, 51, 0.28);
    --primary-color: #ff2233;
    --primary-color-detail: #ffffff;
    --primary-rgb: 255, 34, 51;

    /* Status */
    --success: #4ade80; --success-hover: #22c55e;
    --success-light: rgba(74, 222, 128, 0.16); --success-border: rgba(74, 222, 128, 0.26);
    --success-color: #4ade80; --success-bg: rgba(74, 222, 128, 0.14); --success-fg: #4ade80;
    --success-border-light: rgba(74, 222, 128, 0.28);

    --warning: #fbbf24; --warning-hover: #f59e0b;
    --warning-light: rgba(251, 191, 36, 0.16); --warning-border: rgba(251, 191, 36, 0.28); --warning-fg: #fbbf24;

    --danger: #f87171; --danger-hover: #ef4444;
    --danger-light: rgba(248, 113, 113, 0.16); --danger-border: rgba(248, 113, 113, 0.28);
    --danger-color: #f87171; --danger-bg: rgba(248, 113, 113, 0.14); --danger-fg: #f87171;
    --danger-border-light: rgba(248, 113, 113, 0.28);
    --danger-rgb: 248, 113, 113;

    --info: #6ea8dc; --info-hover: #8fbfe8;
    --info-light: rgba(110, 168, 220, 0.16); --info-border: rgba(110, 168, 220, 0.28); --info-fg: #8fbfe8;

    --accent-color: var(--toyota-red-light);
    --accent-hover: var(--toyota-red);
    --accent-light: rgba(255, 34, 51, 0.2);

    /* Backgrounds — deep ink */
    --body-bg: #0d0e11;
    --sidebar-bg: #0b0c0f;
    --content-bg: #16171b;
    --modal-bg: #191a1f;
    --dropdown-bg: #202127;
    --input-bg: #1b1c21;
    --tooltip-bg: #eceef2;

    /* Text */
    --text: #e7ebf0;
    --text-primary: #e7ebf0;
    --text-secondary: #99a1ac;
    --text-muted: #6e7681;
    --text-subtle: #5b636e;
    --text-light: #4c535d;
    --tooltip-text: #16171b;

    /* Icons */
    --icon-color: #8b929c;
    --icon-hover: #e7ebf0;
    --icon-active: var(--toyota-red-light);
    --icon-light: #e7ebf0;
    --icon-dark: #99a1ac;

    /* Borders */
    --border-color: #262a31;
    --border-strong: #333842;
    --border-light: #21252b;
    --divider-color: #262a31;
    --border: #262a31;
    --border-soft: #1e2228;

    /* Navigation */
    --nav-hover: rgba(255, 255, 255, 0.06);
    --nav-active: rgba(255, 34, 51, 0.16);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-dark: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow: var(--shadow-md);

    /* Scrollbars */
    --scroll-thumb: #333842;
    --scroll-thumb-hover: #444b56;

    /* Misc UI */
    --focus-ring: rgba(255, 34, 51, 0.4);
    --overlay-bg: rgba(0, 0, 0, 0.66);
    --placeholder-color: #6e7681;
    --input-text: #e7ebf0;
    --input-border: #333842;
    --input-focus-border: var(--toyota-red-light);

    /* Bootstrap table bridge */
    --bs-table-color-type: #e7ebf0;
    --bs-table-bg-type: #16171b;
    --bs-table-color-state: #e7ebf0;
    --bs-table-bg-state: #16171b;
    --bs-table-color: #e7ebf0;
    --bs-table-bg: #16171b;
    --bs-table-border-color: #262a31;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #e7ebf0;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-color: #e7ebf0;
    --bs-table-active-bg: rgba(255, 34, 51, 0.16);
    --bs-table-hover-color: #e7ebf0;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-emphasis-color: #e7ebf0;
    --bs-emphasis-color-rgb: 231, 235, 240;
    --bs-body-bg: #16171b;
    --bs-border-color: #262a31;

    --is-dark-theme: 1;

    /* ===============================================================
       SEMANTIC LAYER — dark values
       =============================================================== */
    --surface-0: var(--body-bg);
    --surface-1: #16171b;
    --surface-2: #1c1e23;
    --surface-3: #24262c;
    --surface: #16171b;

    --table-head-bg: #1c1e23;
    --table-head-text: #99a1ac;
    --table-row-border: #21252b;
    --table-row-hover: rgba(255, 255, 255, 0.04);

    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.12);
    --chip-text: #c3cad3;

    --success-surface: rgba(74, 222, 128, 0.12);
    --success-surface-border: rgba(74, 222, 128, 0.3);
    --success-surface-text: #86efac;

    --warning-surface: rgba(251, 191, 36, 0.1);
    --warning-surface-border: rgba(251, 191, 36, 0.3);
    --warning-surface-text: #fcd34d;

    --danger-surface: rgba(248, 113, 113, 0.12);
    --danger-surface-border: rgba(248, 113, 113, 0.32);
    --danger-surface-text: #fca5a5;

    --info-surface: rgba(110, 168, 220, 0.12);
    --info-surface-border: rgba(110, 168, 220, 0.3);
    --info-surface-text: #a9cbe8;

    /* Sidebar */
    --sidebar-bg-grad: #0d0e12;   /* flat ink (mockup) */
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: linear-gradient(90deg, rgba(255, 34, 51, 0.3) 0%, rgba(255, 34, 51, 0.1) 55%, transparent 100%);
    --sidebar-active-text: #ffffff;
    --sidebar-active-glow: 0 0 0 1px rgba(255, 34, 51, 0.32), 0 4px 16px rgba(255, 34, 51, 0.18);
    --sidebar-section-rule: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
    --sidebar-brand-sheen: radial-gradient(120% 90% at 0% 0%, rgba(255, 34, 51, 0.14) 0%, transparent 55%);
    --sidebar-edge: linear-gradient(180deg, transparent 0%, rgba(255, 34, 51, 0.5) 18%, rgba(255, 34, 51, 0.5) 82%, transparent 100%);
    --user-card-bg: rgba(255, 255, 255, 0.04);
}

/* =============================================================================
   3. SIDEBAR SCOPE — the rail is dark ink in BOTH themes (VSSWeb signature).
   Re-map the text/border/hover tokens *inside* the sidebar so the existing
   NavMenu markup renders light-on-dark without touching its own CSS.
   ============================================================================= */
.nav-root,
.mobile-topbar,
.drawer-scrim + .nav-root {
    --text-primary: #f2f4f7;
    --text-secondary: #99a1ac;
    --text-muted: #7b828c;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.10);
    --divider-color: rgba(255, 255, 255, 0.08);
    --nav-hover: rgba(255, 255, 255, 0.06);
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-text: #ffffff;
    --user-card-bg: rgba(255, 255, 255, 0.04);
    --scroll-thumb: rgba(255, 255, 255, 0.16);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.28);
    --icon-color: #8b929c;
    --icon-hover: #ffffff;
    --danger-light: rgba(255, 60, 74, 0.18);
    --danger-color: #ff6673;
}

/* ── "Vehicle not found on the catalogue" alert (TIMNET Bryte-valued quotes) ─── */
.qp-vehicle-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 20px 0;
    padding: 13px 18px;
    background: var(--danger-surface);
    border: 1px solid var(--danger-surface-border);
    border-left: 4px solid var(--toyota-red);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.qp-vehicle-alert-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--toyota-red); }
.qp-vehicle-alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-vehicle-alert-title { font-weight: 700; font-size: 14px; color: var(--danger-surface-text); letter-spacing: 0.2px; }
.qp-vehicle-alert-text { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.qp-vehicle-alert-tag {
    flex: 0 0 auto; margin-left: auto; align-self: flex-start;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: #ffffff;
    background: var(--toyota-red); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 640px) {
    .qp-vehicle-alert { margin: 12px 12px 0; flex-wrap: wrap; }
    .qp-vehicle-alert-tag { margin-left: 34px; }
}