/* kit-theme.css — the Keylink IT UI kit look for the console.

   Source: Keylink IT UI Kit v1.0.0 (git.keylinkit.net/kitadmin/branding, ui-kit/,
   commit 4dd7608). The kit's own keylink-ui.css is NOT linked: its generic class
   names (.btn, .card, .nav-link, .row, .modal-*, utilities) collide with Bootstrap 5,
   which every console page is built on. This file carries the kit's tokens, type,
   shell and component look over to the console's Bootstrap markup instead.

   Rules for this file:
   - Everything is scoped under html.kit-ui. base.html only links this file and adds
     that class when the kit look is on (see current_ui_mode() in web/app.py), so the
     classic look is untouched. Roll back: CONSOLE_UI=classic, or /ui/classic per browser.
   - Kit values live in --kit-* tokens. The console's own tokens (--primary-color,
     --bg-card, --text-muted …) and Bootstrap's --bs-* are pointed at them, so pages
     that already use tokens follow automatically.
   - Light theme only for now. The kit also has a dark theme, but ~4,700 hard-coded
     colours in page templates must become tokens before dark mode can ship.
   - Console layout rule kept over the kit: content fills the width (no max-width cap),
     one gutter on <main>.
*/

/* =============================================================================
   1. FONTS (self-hosted Lato, same files as the kit)
   ============================================================================= */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../kit/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../kit/fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../kit/fonts/lato-900.woff2') format('woff2'); }

/* =============================================================================
   2. TOKENS
   ============================================================================= */
html.kit-ui {
    color-scheme: light;

    /* ---- Kit values (ui-kit/src/css/01-tokens-base.css, light theme) ---- */
    --kit-brand: #0541AD;
    --kit-brand-600: #04399A;
    --kit-brand-700: #032F80;
    --kit-brand-400: #2F66D0;
    --kit-brand-100: #D6E2F8;
    --kit-brand-50: #EEF3FC;
    --kit-sky: #8DB8FF;
    --kit-navy: #06173A;
    --kit-navy-800: #0A2253;
    --kit-navy-700: #10306E;

    --kit-bg: #F3F6FB;
    --kit-surface: #FFFFFF;
    --kit-surface-2: #F7F9FC;
    --kit-surface-3: #EEF2F8;
    --kit-surface-hover: #F4F7FC;
    --kit-overlay: rgba(6, 23, 58, .45);
    --kit-border: #E3E8F0;
    --kit-border-strong: #C9D3E1;

    --kit-text: #16202E;
    --kit-text-2: #3A4658;
    --kit-text-muted: #647186;
    --kit-text-faint: #8C98AB;

    --kit-good: #12A150;    --kit-good-fg: #0B7A45;    --kit-good-bg: #E5F6ED;    --kit-good-border: #BFE6CF;
    --kit-warn: #E8A200;    --kit-warn-fg: #8A5A00;    --kit-warn-bg: #FFF4D6;    --kit-warn-border: #F6DC9A;
    --kit-serious: #E8733F; --kit-serious-fg: #A8420F; --kit-serious-bg: #FDEEE6; --kit-serious-border: #F7CBB3;
    --kit-crit: #D92D20;    --kit-crit-fg: #B42318;    --kit-crit-bg: #FDECEB;    --kit-crit-border: #F6C2BE;
    --kit-neutral: #8C98AB; --kit-neutral-fg: #4F5B6E; --kit-neutral-bg: #EEF1F6; --kit-neutral-border: #D9DFE8;
    --kit-violet: #6D4AE0;  --kit-violet-fg: #5534C4;  --kit-violet-bg: #F0ECFD;

    --kit-shadow-xs: 0 1px 2px rgba(6, 23, 58, .05);
    --kit-shadow-sm: 0 1px 2px rgba(6, 23, 58, .06), 0 1px 3px rgba(6, 23, 58, .08);
    --kit-shadow: 0 10px 30px -12px rgba(6, 23, 58, .22);
    --kit-shadow-lg: 0 24px 60px -20px rgba(6, 23, 58, .35);
    --kit-ring: 0 0 0 3px rgba(5, 65, 173, .22);

    --kit-font: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --kit-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    --kit-ease: cubic-bezier(.2, .7, .2, 1);

    /* Shell geometry (console values) */
    --kit-sidebar-w: 256px;
    --kit-topbar-h: 60px;
    --kit-primary-gradient: linear-gradient(180deg, #1756C8 0%, #0541AD 100%);

    /* ---- Console tokens → kit (base.html :root, console.css) ---- */
    --primary-color: var(--kit-brand);
    --success-color: var(--kit-good);
    --warning-color: var(--kit-warn);
    --danger-color: var(--kit-crit);
    --dark-color: var(--kit-navy);
    --bg-body: var(--kit-bg);
    --bg-card: var(--kit-surface);
    --bg-card-header: var(--kit-surface-2);
    --bg-table-header: var(--kit-surface-2);
    --bg-hover: var(--kit-surface-hover);
    --bg-input: var(--kit-surface);
    --text-primary: var(--kit-text);
    --text-secondary: var(--kit-text-muted);
    --text-muted: var(--kit-text-muted);
    --text-heading: var(--kit-text);
    --border-color: var(--kit-border);
    --shadow-color: rgba(6, 23, 58, .06);
    --shadow-hover: rgba(6, 23, 58, .12);
    --badge-info-bg: var(--kit-brand-50);       --badge-info-text: var(--kit-brand);
    --badge-warning-bg: var(--kit-warn-bg);     --badge-warning-text: var(--kit-warn-fg);
    --badge-danger-bg: var(--kit-crit-bg);      --badge-danger-text: var(--kit-crit-fg);
    --badge-success-bg: var(--kit-good-bg);     --badge-success-text: var(--kit-good-fg);
    --badge-secondary-bg: var(--kit-neutral-bg); --badge-secondary-text: var(--kit-neutral-fg);
    --status-success-bg: var(--kit-good-bg);    --status-success-text: var(--kit-good-fg);
    --status-danger-bg: var(--kit-crit-bg);     --status-danger-text: var(--kit-crit-fg);
    --status-warning-bg: var(--kit-warn-bg);    --status-warning-text: var(--kit-warn-fg);
    --status-muted: var(--kit-text-muted);
    --stat-purple: var(--kit-violet);
    --stat-purple-bg: var(--kit-violet-bg);
    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--kit-border-strong);
    --scrollbar-thumb-hover: var(--kit-text-faint);
    --logs-text-muted: var(--kit-text-muted);
    --loading-overlay-bg: rgba(243, 246, 251, .72);
    --form-section-bg: var(--kit-surface-2);
    --form-section-border: var(--kit-border);
    --form-section-title: var(--kit-text);
    --form-section-subtitle: var(--kit-text-muted);
    --form-label: var(--kit-text-2);
    --modal-footer-bg: var(--kit-surface-2);
    --modal-footer-border: var(--kit-border);

    /* Radius scale (console.css names) → kit shapes */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* One content gutter (console screen-usage rule), kit spacing */
    --content-gutter-x: 28px;
    --content-gutter-y: 26px;

    /* Module accents: the kit has one brand colour; status colours never decorate.
       Every module accent becomes Keylink cobalt. */
    --section-alerts-primary: var(--kit-brand);      --section-alerts-secondary: var(--kit-brand-600);      --section-alerts-bg: var(--kit-brand-50);      --section-alerts-border: var(--kit-brand-100);
    --section-email-primary: var(--kit-brand);       --section-email-secondary: var(--kit-brand-600);       --section-email-bg: var(--kit-brand-50);       --section-email-border: var(--kit-brand-100);
    --section-monitoring-primary: var(--kit-brand);  --section-monitoring-secondary: var(--kit-brand-600);  --section-monitoring-bg: var(--kit-brand-50);  --section-monitoring-border: var(--kit-brand-100);
    --section-knowledge-primary: var(--kit-brand);   --section-knowledge-secondary: var(--kit-brand-600);   --section-knowledge-bg: var(--kit-brand-50);   --section-knowledge-border: var(--kit-brand-100);
    --section-voice-primary: var(--kit-brand);       --section-voice-secondary: var(--kit-brand-600);       --section-voice-bg: var(--kit-brand-50);       --section-voice-border: var(--kit-brand-100);
    --section-cameras-primary: var(--kit-brand);     --section-cameras-secondary: var(--kit-brand-600);     --section-cameras-bg: var(--kit-brand-50);     --section-cameras-border: var(--kit-brand-100);
    --section-tickets-primary: var(--kit-brand);     --section-tickets-secondary: var(--kit-brand-600);     --section-tickets-bg: var(--kit-brand-50);     --section-tickets-border: var(--kit-brand-100);
    --section-crm-primary: var(--kit-brand);         --section-crm-secondary: var(--kit-brand-600);         --section-crm-bg: var(--kit-brand-50);         --section-crm-border: var(--kit-brand-100);
    --section-contracts-primary: var(--kit-brand);   --section-contracts-secondary: var(--kit-brand-600);   --section-contracts-bg: var(--kit-brand-50);   --section-contracts-border: var(--kit-brand-100);
    --section-inventory-primary: var(--kit-brand);   --section-inventory-secondary: var(--kit-brand-600);   --section-inventory-bg: var(--kit-brand-50);   --section-inventory-border: var(--kit-brand-100);
    --section-training-primary: var(--kit-brand);    --section-training-secondary: var(--kit-brand-600);    --section-training-bg: var(--kit-brand-50);    --section-training-border: var(--kit-brand-100);
    --section-projects-primary: var(--kit-brand);
    --section-accent: var(--kit-brand);
    --asst-accent: var(--kit-brand);

    /* ---- Bootstrap 5.3 → kit ---- */
    --bs-body-font-family: var(--kit-font);
    --bs-body-font-size: .9375rem;
    --bs-body-color: var(--kit-text);
    --bs-body-color-rgb: 22, 32, 46;
    --bs-body-bg: var(--kit-bg);
    --bs-body-bg-rgb: 243, 246, 251;
    --bs-emphasis-color: var(--kit-text);
    --bs-emphasis-color-rgb: 22, 32, 46;
    --bs-secondary-color: var(--kit-text-muted);
    --bs-secondary-color-rgb: 100, 113, 134;
    --bs-secondary-bg: var(--kit-surface-3);
    --bs-tertiary-color: var(--kit-text-faint);
    --bs-tertiary-color-rgb: 140, 152, 171;
    --bs-tertiary-bg: var(--kit-surface-2);
    --bs-tertiary-bg-rgb: 247, 249, 252;
    --bs-border-color: var(--kit-border);
    --bs-border-color-translucent: rgba(6, 23, 58, .12);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
    --bs-border-radius-xxl: 22px;
    --bs-box-shadow: var(--kit-shadow);
    --bs-box-shadow-sm: var(--kit-shadow-sm);
    --bs-box-shadow-lg: var(--kit-shadow-lg);
    --bs-link-color: var(--kit-brand);
    --bs-link-color-rgb: 5, 65, 173;
    --bs-link-hover-color: var(--kit-brand-600);
    --bs-link-hover-color-rgb: 4, 57, 154;
    --bs-focus-ring-color: rgba(5, 65, 173, .22);
    --bs-code-color: var(--kit-violet-fg);
    --bs-highlight-bg: var(--kit-warn-bg);

    --bs-blue: var(--kit-brand);
    --bs-primary: #0541AD;           --bs-primary-rgb: 5, 65, 173;
    --bs-secondary: #647186;         --bs-secondary-rgb: 100, 113, 134;
    --bs-success: #12A150;           --bs-success-rgb: 18, 161, 80;
    --bs-info: #2F66D0;              --bs-info-rgb: 47, 102, 208;
    --bs-warning: #E8A200;           --bs-warning-rgb: 232, 162, 0;
    --bs-danger: #D92D20;            --bs-danger-rgb: 217, 45, 32;
    --bs-light: #F7F9FC;             --bs-light-rgb: 247, 249, 252;
    --bs-dark: #06173A;              --bs-dark-rgb: 6, 23, 58;

    --bs-primary-text-emphasis: var(--kit-brand-700);   --bs-primary-bg-subtle: var(--kit-brand-50);    --bs-primary-border-subtle: var(--kit-brand-100);
    --bs-secondary-text-emphasis: var(--kit-neutral-fg); --bs-secondary-bg-subtle: var(--kit-neutral-bg); --bs-secondary-border-subtle: var(--kit-neutral-border);
    --bs-success-text-emphasis: var(--kit-good-fg);     --bs-success-bg-subtle: var(--kit-good-bg);     --bs-success-border-subtle: var(--kit-good-border);
    --bs-info-text-emphasis: var(--kit-brand);          --bs-info-bg-subtle: var(--kit-brand-50);       --bs-info-border-subtle: var(--kit-brand-100);
    --bs-warning-text-emphasis: var(--kit-warn-fg);     --bs-warning-bg-subtle: var(--kit-warn-bg);     --bs-warning-border-subtle: var(--kit-warn-border);
    --bs-danger-text-emphasis: var(--kit-crit-fg);      --bs-danger-bg-subtle: var(--kit-crit-bg);      --bs-danger-border-subtle: var(--kit-crit-border);
    --bs-light-text-emphasis: var(--kit-text-2);        --bs-light-bg-subtle: var(--kit-surface-2);     --bs-light-border-subtle: var(--kit-border);
    --bs-dark-text-emphasis: var(--kit-navy);           --bs-dark-bg-subtle: var(--kit-neutral-bg);     --bs-dark-border-subtle: var(--kit-neutral-border);
}

/* =============================================================================
   3. BASE TYPE
   ============================================================================= */
html.kit-ui body {
    font-family: var(--kit-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html.kit-ui h1, html.kit-ui h2, html.kit-ui h3,
html.kit-ui h4, html.kit-ui h5, html.kit-ui h6,
html.kit-ui .h1, html.kit-ui .h2, html.kit-ui .h3,
html.kit-ui .h4, html.kit-ui .h5, html.kit-ui .h6 {
    font-family: var(--kit-font);
    font-weight: 700;
    letter-spacing: -.01em;
}
html.kit-ui h1, html.kit-ui .h1 { font-weight: 900; letter-spacing: -.02em; }
html.kit-ui ::selection { background: var(--kit-brand-100); color: var(--kit-text); }
html.kit-ui :focus-visible { outline-color: var(--kit-brand); }
html.kit-ui * { scrollbar-color: var(--kit-border-strong) transparent; }
/* Kit rule 2: status colours carry text-safe "fg" shades when used as text */
html.kit-ui .text-success { color: var(--kit-good-fg) !important; }
html.kit-ui .text-danger { color: var(--kit-crit-fg) !important; }
html.kit-ui .text-warning { color: var(--kit-warn-fg) !important; }
html.kit-ui .text-muted { color: var(--kit-text-muted) !important; }

/* =============================================================================
   4. APP SHELL — navy sidebar, glass top bar, content column
   ============================================================================= */
html.kit-ui body.kit-body { background: var(--kit-bg); }

/* ---- Top bar ---- */
html.kit-ui .top-bar {
    height: var(--kit-topbar-h);
    padding: 0 var(--content-gutter-x);
    gap: .5rem;
    background: color-mix(in srgb, var(--kit-bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--kit-border) 80%, transparent);
    box-shadow: none;
}
html.kit-ui .top-bar-brand { padding-left: 0; min-width: 0; margin-right: .25rem; }
html.kit-ui .top-bar-brand img { width: 110px; height: auto; display: block; }
html.kit-ui .top-bar-brand { flex: none; }
html.kit-ui .top-bar-brand img.top-bar-brand__mark { display: none; width: 32px; height: 32px; border-radius: 9px; }
/* Narrow phones: the K mark (brand guide: the mark for small spaces) instead of the wordmark */
@media (max-width: 479.98px) {
    html.kit-ui .top-bar-brand img.top-bar-brand__full { display: none; }
    html.kit-ui .top-bar-brand img.top-bar-brand__mark { display: block; }
    html.kit-ui .top-bar, html.kit-ui .top-bar-right { gap: .375rem; }
    html.kit-ui .top-bar-brand, html.kit-ui .top-bar-mobile-toggle { margin-right: 0; }
    html.kit-ui .company-selector { padding-left: .375rem; margin-right: 0; }
    html.kit-ui .company-selector-btn { padding: 0 .6rem; }
    html.kit-ui .company-selector-btn .company-name { max-width: 84px; }
    /* account button icon-only, like the settings button beside it */
    html.kit-ui .top-bar-user:not(.top-bar-admin) .top-bar-user-btn { width: 40px; padding: 0; justify-content: center; }
    html.kit-ui .top-bar-user:not(.top-bar-admin) .top-bar-user-btn::after { display: none; }
}

html.kit-ui .top-bar-mobile-toggle {
    width: 40px; height: 40px; flex: none;
    align-items: center; justify-content: center;
    margin-right: .25rem; padding: 0;
    color: var(--kit-text-2);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: 11px;
    box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .top-bar-mobile-toggle:hover { color: var(--kit-brand); border-color: var(--kit-brand-100); background: var(--kit-brand-50); }

/* Search */
html.kit-ui .top-bar-search { max-width: 520px; min-width: 0; }
@media (max-width: 1439.98px) { html.kit-ui body.kit-has-sidebar .search-kbd { display: none; } }
html.kit-ui .top-bar-search-wrap i { left: .9rem; color: var(--kit-text-faint); font-size: .9rem; }
html.kit-ui .top-bar-search input {
    height: 40px;
    padding: 0 3.6rem 0 2.5rem;
    font-size: .9rem;
    color: var(--kit-text);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: 12px;
    box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .top-bar-search input::placeholder { color: var(--kit-text-faint); }
html.kit-ui .top-bar-search input:focus { border-color: var(--kit-brand); background: var(--kit-surface); box-shadow: var(--kit-ring); }
html.kit-ui .search-kbd {
    right: .6rem;
    padding: 2px 7px;
    font-family: var(--kit-font); font-weight: 700; font-size: .68rem;
    color: var(--kit-text-muted);
    background: var(--kit-surface-3);
    border: 1px solid var(--kit-border);
    border-radius: 6px;
}
html.kit-ui .search-results { border-color: var(--kit-border); border-radius: 14px; box-shadow: var(--kit-shadow-lg); }
html.kit-ui .search-item:hover, html.kit-ui .search-item.focused { background: var(--kit-brand-50); }

/* Company context selector */
html.kit-ui .company-selector { margin-left: .25rem; padding-left: .75rem; border-left: 1px solid var(--kit-border); }
html.kit-ui .company-selector-btn {
    height: 36px; padding: 0 .8rem;
    font-size: .8rem; font-weight: 700;
    color: var(--kit-text-2);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: 10px;
    box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .company-selector-btn:hover { color: var(--kit-brand); background: var(--kit-brand-50); border-color: var(--kit-brand-100); }
html.kit-ui .company-selector-btn::after { border-top-color: var(--kit-text-faint); }
html.kit-ui .company-selector-btn .company-dot { background: var(--kit-good); box-shadow: 0 0 0 3px var(--kit-good-bg); }
html.kit-ui .company-selector-btn .company-dot.global { background: var(--kit-brand); box-shadow: 0 0 0 3px var(--kit-brand-50); }
html.kit-ui .company-selector-menu { border-radius: 14px; box-shadow: var(--kit-shadow-lg); }
html.kit-ui .company-selector-item.active { background: var(--kit-brand-50); color: var(--kit-brand); }
html.kit-ui .company-selector-badge { background: var(--kit-brand-100); color: var(--kit-brand); font-weight: 700; }

/* Module switcher (top-level domains) */
html.kit-ui .module-switcher { margin-left: .25rem; }
html.kit-ui .module-switcher__item {
    height: 36px; padding: 0 .75rem;
    font-size: .875rem; font-weight: 700;
    color: var(--kit-text-2);
    border-radius: 10px;
    border-bottom: 0;
}
html.kit-ui .module-switcher__item:hover { color: var(--kit-brand); background: var(--kit-surface-3); }
html.kit-ui .module-switcher__item.active { color: var(--kit-brand); background: var(--kit-brand-50); box-shadow: inset 0 0 0 1px var(--kit-brand-100); }
html.kit-ui .module-switcher .dropdown-menu { border-color: var(--kit-border); border-radius: 14px; box-shadow: var(--kit-shadow-lg); }
html.kit-ui .module-switcher .dropdown-item { font-weight: 700; color: var(--kit-text-2); }
html.kit-ui .module-switcher .dropdown-item i { color: var(--kit-brand); background: var(--kit-brand-50); }
html.kit-ui .module-switcher .dropdown-item:hover,
html.kit-ui .module-switcher .dropdown-item:focus { background: var(--kit-surface-hover); color: var(--kit-text); }
html.kit-ui .module-switcher .dropdown-item.active { background: var(--kit-brand-50); color: var(--kit-brand); }
html.kit-ui .module-switcher .dropdown-item.active i { color: #fff; background: var(--kit-brand); }

/* Right cluster: clock, admin gear, user */
html.kit-ui .top-bar-right { gap: .5rem; }
html.kit-ui .top-bar-time { color: var(--kit-text-muted); font-weight: 700; font-size: .75rem; }
@media (max-width: 1599.98px) { html.kit-ui .top-bar-time { display: none; } }
html.kit-ui .top-bar-user-btn {
    height: 40px; padding: 0 .85rem;
    font-size: .84rem; font-weight: 700;
    color: var(--kit-text-2);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: 11px;
    box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .top-bar-user-btn:hover { color: var(--kit-brand); background: var(--kit-brand-50); border-color: var(--kit-brand-100); }
html.kit-ui .top-bar-user-btn::after { border-top-color: var(--kit-text-faint); }
html.kit-ui .top-bar-admin .top-bar-user-btn { width: 40px; padding: 0; justify-content: center; }
html.kit-ui .top-bar-admin .top-bar-user-btn::after { display: none; }
html.kit-ui .top-bar-user .dropdown-menu { border-radius: 14px; box-shadow: var(--kit-shadow-lg); }

/* ---- Navy sidebar (partials/kit_sidebar.html) ---- */
html.kit-ui .kit-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1035;
    width: var(--kit-sidebar-w);
    display: flex; flex-direction: column;
    color: #C9D4E6;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(63, 126, 242, .28) 0%, rgba(63, 126, 242, 0) 55%),
        radial-gradient(90% 50% at 100% 100%, rgba(141, 184, 255, .10) 0%, rgba(141, 184, 255, 0) 60%),
        linear-gradient(180deg, #081D48 0%, #06173A 45%, #051230 100%);
    border-right: 1px solid rgba(141, 184, 255, .08);
}
html.kit-ui .kit-sidebar::after { /* faint circuit-grid texture, as in the kit */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(141, 184, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141, 184, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 38%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 38%);
}
html.kit-ui .kit-sidebar > * { position: relative; z-index: 1; }

html.kit-ui .kit-sidebar__brand { padding: 22px 22px 10px; }
html.kit-ui .kit-sidebar__brand a { display: block; line-height: 0; width: 150px; }
html.kit-ui .kit-sidebar__brand img { width: 150px; height: auto; }
html.kit-ui .kit-sidebar__product {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--kit-sky);
}
html.kit-ui .kit-sidebar__product::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--kit-sky), transparent); }

html.kit-ui .kit-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 16px; scrollbar-color: rgba(141, 184, 255, .25) transparent; }
html.kit-ui .kit-sidebar__nav::-webkit-scrollbar { width: 8px; }
html.kit-ui .kit-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(141, 184, 255, .22); border-radius: 8px; }

html.kit-ui .kit-sidebar__module {
    display: flex; align-items: center; gap: 11px;
    margin: 10px 2px 4px; padding: 11px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(63, 126, 242, .20), rgba(141, 184, 255, .05));
    border: 1px solid rgba(141, 184, 255, .14);
}
html.kit-ui .kit-sidebar__module-icon {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: 10px; color: #fff; font-size: 1rem;
    background: var(--kit-brand); box-shadow: 0 6px 16px -6px rgba(5, 65, 173, .9);
}
html.kit-ui .kit-sidebar__module-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html.kit-ui .kit-sidebar__module-text small { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(201, 212, 230, .55); }
html.kit-ui .kit-sidebar__module-text strong { font-size: .95rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.kit-ui .kit-nav-section {
    margin: 18px 12px 6px;
    font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(201, 212, 230, .45);
}
html.kit-ui .kit-nav-section--rule { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(141, 184, 255, .10); }
html.kit-ui .kit-nav-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    margin: 2px 0; padding: 9px 12px; border-radius: 10px;
    font-size: .9rem; font-weight: 700; line-height: 1.3; color: #B9C6DC; text-decoration: none;
    transition: background 200ms var(--kit-ease), color 200ms var(--kit-ease);
}
html.kit-ui .kit-nav-link i { width: 20px; flex: none; text-align: center; font-size: 1.02rem; opacity: .8; }
html.kit-ui .kit-nav-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.kit-ui .kit-nav-link:hover { color: #fff; background: rgba(141, 184, 255, .08); }
html.kit-ui .kit-nav-link:hover i { opacity: 1; }
html.kit-ui .kit-nav-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(63, 126, 242, .38), rgba(63, 126, 242, .12));
    box-shadow: inset 0 0 0 1px rgba(141, 184, 255, .16), 0 8px 24px -12px rgba(63, 126, 242, .8);
}
html.kit-ui .kit-nav-link.active i { opacity: 1; }
html.kit-ui .kit-nav-link.active::before {
    content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #8DB8FF, #3F7EF2); box-shadow: 0 0 14px rgba(141, 184, 255, .8);
}
html.kit-ui .kit-nav-link:focus-visible { outline: 2px solid var(--kit-sky); outline-offset: 1px; }
html.kit-ui .kit-nav-link .kit-nav-link__ext { width: auto; margin-left: auto; font-size: .72rem; opacity: .55; }
html.kit-ui.kit-sidebar-collapsed .kit-nav-link .kit-nav-link__ext { display: none; }

html.kit-ui .kit-sidebar__footer { padding: 12px 14px 14px; border-top: 1px solid rgba(141, 184, 255, .08); }
html.kit-ui .kit-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 2px; }
html.kit-ui .kit-sidebar__avatar {
    display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border-radius: 50%; font-size: .78rem; font-weight: 900; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #3F7EF2, #0541AD); box-shadow: 0 0 0 2px rgba(141, 184, 255, .25);
}
html.kit-ui .kit-sidebar__avatar:hover { color: #fff; }
html.kit-ui .kit-sidebar__user-meta { min-width: 0; flex: 1; line-height: 1.3; text-decoration: none; }
html.kit-ui .kit-sidebar__user-meta strong { display: block; font-size: .84rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.kit-ui .kit-sidebar__user-meta small { display: block; font-size: .74rem; color: #8FA0BE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.kit-ui .kit-sidebar__user-meta:hover strong { color: var(--kit-sky); }
html.kit-ui .kit-sidebar__logout { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; color: #9FB0CC; font-size: 1.05rem; }
html.kit-ui .kit-sidebar__logout:hover { color: #fff; background: rgba(141, 184, 255, .1); }
html.kit-ui .kit-sidebar__switch {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 4px 0;
    font-size: .74rem; font-weight: 700; color: #7F93B6; text-decoration: none;
}
html.kit-ui .kit-sidebar__switch:hover { color: var(--kit-sky); }

/* AI Assistant chat list, rendered inside the navy sidebar */
html.kit-ui .kit-sidebar .asst-newchat {
    width: calc(100% - 4px); margin: 12px 2px 0;
    border: 0; border-radius: 11px;
    background: var(--kit-primary-gradient);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .9);
    font-weight: 700;
}
html.kit-ui .kit-sidebar .asst-convlist { padding: 0 0 12px; }
html.kit-ui .kit-sidebar .asst-conv { color: #B9C6DC; font-weight: 700; border-radius: 10px; }
html.kit-ui .kit-sidebar .asst-conv:hover { color: #fff; background: rgba(141, 184, 255, .08); }
html.kit-ui .kit-sidebar .asst-conv.active { color: #fff; background: rgba(63, 126, 242, .30); }
html.kit-ui .kit-sidebar .asst-conv .del { color: #FF8A80; }

/* ---- Collapsible sidebar (desktop): full menu <-> 76px icon rail ---- */
html.kit-ui .kit-sidebar__brand img.kit-sidebar__logo-mark { display: none; width: 30px; height: 30px; }
html.kit-ui .kit-sidebar__toggle {
    position: absolute; z-index: 3; top: 34px; right: -14px;
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    color: var(--kit-navy); background: #fff;
    border: 1px solid var(--kit-border-strong); border-radius: 50%;
    box-shadow: var(--kit-shadow-sm); cursor: pointer;
    transition: color 200ms var(--kit-ease), background 200ms var(--kit-ease), transform 200ms var(--kit-ease);
}
html.kit-ui .kit-sidebar__toggle:hover { color: #fff; background: var(--kit-brand); border-color: var(--kit-brand); }
html.kit-ui .kit-sidebar__toggle:focus-visible { outline: 2px solid var(--kit-sky); outline-offset: 2px; }
html.kit-ui .kit-sidebar__toggle i { font-size: .8rem; line-height: 1; -webkit-text-stroke: .6px; }
html.kit-ui .kit-sidebar,
html.kit-ui body.kit-has-sidebar .app-layout-v2,
html.kit-ui body.kit-has-sidebar .app-footer-v2,
html.kit-ui body.kit-has-sidebar .top-bar { transition: width 220ms var(--kit-ease), margin-left 220ms var(--kit-ease); }

@media (min-width: 1200px) {
    html.kit-ui.kit-sidebar-collapsed { --kit-sidebar-w: 76px; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__toggle i { transform: rotate(180deg); }
    /* brand: K mark only */
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__brand { padding: 22px 0 8px; display: flex; flex-direction: column; align-items: center; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__brand a { width: auto; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__logo-full,
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__product { display: none; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__brand img.kit-sidebar__logo-mark { display: block; }
    /* nav: icons only, section labels become thin rules */
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__nav { padding: 6px 12px 16px; overflow-x: hidden; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__module { justify-content: center; margin: 10px 0 4px; padding: 8px 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__module-text { display: none; }
    html.kit-ui.kit-sidebar-collapsed .kit-nav-section { height: 1px; margin: 12px 6px; overflow: hidden; color: transparent; background: rgba(141, 184, 255, .12); }
    html.kit-ui.kit-sidebar-collapsed .kit-nav-section--rule { padding-top: 0; border-top: 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-nav-link { justify-content: center; gap: 0; padding: 10px 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-nav-link span { display: none; }
    html.kit-ui.kit-sidebar-collapsed .kit-nav-link i { width: auto; font-size: 1.1rem; }
    /* AI Assistant: icon-only New Chat; the chat list needs the full width */
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar .asst-newchat { justify-content: center; width: 100%; margin: 12px 0 0; padding: 9px 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar .asst-newchat span,
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar .asst-convlist { display: none; }
    /* footer: avatar, sign out and the classic-look switch stacked as icons */
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__footer { padding: 12px 0 14px; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__user { flex-direction: column; gap: 8px; padding: 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__user-meta { display: none; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__switch { justify-content: center; margin-top: 6px; padding: 6px 0 0; }
    html.kit-ui.kit-sidebar-collapsed .kit-sidebar__switch span { display: none; }
}
@media (max-width: 1199.98px) {
    html.kit-ui .kit-sidebar__toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.kit-ui .kit-sidebar, html.kit-ui .app-layout-v2, html.kit-ui .app-footer-v2, html.kit-ui .top-bar { transition: none !important; }
}

/* Content column beside the sidebar */
html.kit-ui body.kit-has-sidebar .app-layout-v2,
html.kit-ui body.kit-has-sidebar .app-footer-v2 { margin-left: var(--kit-sidebar-w) !important; }
html.kit-ui body.kit-has-sidebar .top-bar { margin-left: var(--kit-sidebar-w); }
html.kit-ui body.kit-has-sidebar .top-bar-brand { display: none; }
/* On desktop the sidebar footer carries profile / sign out, so the top-bar copy goes */
html.kit-ui body.kit-has-sidebar .top-bar-user:not(.top-bar-admin) { display: none; }
html.kit-ui .kit-sidebar__directory--mobile { display: none; }
html.kit-ui .app-layout-v2 { min-height: calc(100vh - var(--kit-topbar-h)); }

/* Footer */
html.kit-ui .app-footer-v2 {
    background: transparent !important;
    border-top: 0 !important;
    color: var(--kit-text-faint) !important;
    padding: 6px var(--content-gutter-x) 22px !important;
}
html.kit-ui .app-footer-v2 a { color: var(--kit-text-muted) !important; }
html.kit-ui .app-footer-v2 a:hover { color: var(--kit-brand) !important; }

/* Mobile scrim behind the open sidebar */
html.kit-ui .sidebar-mobile-overlay { top: 0; z-index: 1032; background: var(--kit-overlay); }

/* Below 1200px the fixed sidebar plus the five module menus no longer fit beside the
   top bar's search and account controls, so (as the UI kit does) the sidebar becomes a
   drawer opened by the top-bar menu button. The drawer lists every module, so the
   top-bar module menus are hidden there. */
@media (max-width: 1199.98px) {
    html.kit-ui .kit-sidebar {
        transform: translateX(-100%);
        transition: transform 420ms var(--kit-ease);
        box-shadow: var(--kit-shadow-lg);
    }
    html.kit-ui .kit-sidebar.mobile-open { transform: none; }
    html.kit-ui body.kit-has-sidebar .app-layout-v2,
    html.kit-ui body.kit-has-sidebar .app-footer-v2 { margin-left: 0 !important; }
    html.kit-ui body.kit-has-sidebar .top-bar { margin-left: 0; }
    html.kit-ui body.kit-has-sidebar .top-bar-brand { display: flex; }
    html.kit-ui body.kit-has-sidebar .top-bar-user:not(.top-bar-admin) { display: block; }
    html.kit-ui .top-bar-mobile-toggle { display: inline-flex; }
    html.kit-ui .kit-sidebar__directory--mobile { display: block; }
    html.kit-ui body.kit-has-sidebar .module-switcher { display: none !important; }
}
@media (max-width: 767.98px) {
    html.kit-ui { --content-gutter-x: 16px; --content-gutter-y: 18px; }
    html.kit-ui .top-bar-brand img { width: 92px; }
    html.kit-ui .company-selector { padding-left: .5rem; margin-left: 0; }
    html.kit-ui .company-selector-btn .company-name { max-width: 90px; }
}

/* Sign-in and other full-screen kit pages draw their own layout */
html.kit-ui body.kit-bare .top-bar,
html.kit-ui body.kit-bare .app-footer-v2 { display: none !important; }
html.kit-ui body.kit-bare .app-layout-v2 { min-height: 100vh; }
html.kit-ui body.kit-bare .utility-content { padding: 0; }

/* =============================================================================
   5. PAGE HEADERS (partials/page_header.html, detail_header.html, entity_hero.html)
   ============================================================================= */
html.kit-ui .page-header { align-items: flex-end; margin-bottom: 1.6rem; }
html.kit-ui .page-header__icon,
html.kit-ui .detail-hdr__icon,
html.kit-ui .entity-hero__icon {
    color: var(--kit-brand);
    background: var(--kit-brand-50);
    border: 1px solid var(--kit-brand-100);
    border-radius: 14px;
}
html.kit-ui .page-header__title,
html.kit-ui .detail-hdr__title,
html.kit-ui .entity-hero__title {
    font-size: 1.7rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.15;
    color: var(--kit-text);
}
html.kit-ui .page-header__subtitle,
html.kit-ui .detail-hdr__subtitle { margin-top: 4px; font-size: .95rem; color: var(--kit-text-muted); }
html.kit-ui .detail-hdr__back,
html.kit-ui .page-breadcrumb { font-weight: 700; color: var(--kit-text-muted); }
html.kit-ui .detail-hdr__back:hover,
html.kit-ui .page-breadcrumb a:hover { color: var(--kit-brand); }
html.kit-ui .entity-hero {
    border: 1px solid var(--kit-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--kit-shadow-sm);
    padding: 1.25rem 1.4rem;
    position: relative; overflow: hidden;
}
html.kit-ui .entity-hero::before { /* kit accent bar in place of the coloured left border */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #3F7EF2, var(--kit-brand));
}

/* Shared stat card (console.css) */
html.kit-ui .stat-card {
    border: 1px solid var(--kit-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--kit-shadow-sm);
}
html.kit-ui .stat-card__value { font-weight: 900; letter-spacing: -.02em; color: var(--kit-text); }
html.kit-ui .stat-card__label { font-weight: 700; color: var(--kit-text-muted); }

/* =============================================================================
   6. COMPONENTS — Bootstrap markup in the kit's look
   ============================================================================= */

/* ---- Cards ---- */
html.kit-ui .card {
    --bs-card-border-color: var(--kit-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-cap-bg: var(--kit-surface);
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.15rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-bg: var(--kit-surface);
    border-color: var(--kit-border);
    box-shadow: var(--kit-shadow-sm);
}
html.kit-ui .card:hover { box-shadow: var(--kit-shadow-sm); }
html.kit-ui .card-header { background-color: var(--kit-surface); border-bottom-color: var(--kit-border); }
html.kit-ui .card-header h5, html.kit-ui .card-header h6,
html.kit-ui .card-header .h5, html.kit-ui .card-header .h6,
html.kit-ui .card-title { font-weight: 900; letter-spacing: -.01em; }
html.kit-ui .card-footer { background-color: var(--kit-surface-2); border-top-color: var(--kit-border); }
html.kit-ui .card.border-danger { border-color: var(--kit-crit-border) !important; }

/* ---- Buttons ---- */
html.kit-ui .btn {
    --bs-btn-font-family: var(--kit-font);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 10px;
    --bs-btn-padding-y: .44rem;
    --bs-btn-padding-x: .95rem;
    --bs-btn-focus-box-shadow: var(--kit-ring);
    letter-spacing: .005em;
    transition: background-color 200ms var(--kit-ease), color 200ms var(--kit-ease), border-color 200ms var(--kit-ease),
                box-shadow 200ms var(--kit-ease), filter 200ms var(--kit-ease);
}
html.kit-ui .btn-sm, html.kit-ui .btn-group-sm > .btn {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .7rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: 8px;
}
html.kit-ui .btn-lg, html.kit-ui .btn-group-lg > .btn {
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 13px;
}
html.kit-ui .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kit-brand);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kit-brand-600);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kit-brand-700);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--kit-brand);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--kit-primary-gradient);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .7);
}
html.kit-ui .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 24px -10px rgba(5, 65, 173, .85); }
html.kit-ui .btn-primary:focus-visible { box-shadow: var(--kit-ring); }
html.kit-ui .btn-secondary {
    --bs-btn-color: var(--kit-brand);
    --bs-btn-bg: var(--kit-brand-50);
    --bs-btn-border-color: var(--kit-brand-100);
    --bs-btn-hover-color: var(--kit-brand-600);
    --bs-btn-hover-bg: var(--kit-brand-50);
    --bs-btn-hover-border-color: var(--kit-brand);
    --bs-btn-active-color: var(--kit-brand-700);
    --bs-btn-active-bg: var(--kit-brand-100);
    --bs-btn-active-border-color: var(--kit-brand);
    --bs-btn-disabled-color: var(--kit-brand);
    --bs-btn-disabled-bg: var(--kit-brand-50);
    --bs-btn-disabled-border-color: var(--kit-brand-100);
}
html.kit-ui .btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--kit-good-fg); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0A6B3D; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #095E36; --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--kit-good-fg); --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(180deg, #1DB364, #0B7A45);
}
html.kit-ui .btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: #C62828; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B71F1F; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #A51C1C; --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #C62828; --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(180deg, #E5484D, #C62828);
    box-shadow: 0 8px 18px -8px rgba(198, 40, 40, .6);
}
html.kit-ui .btn-warning {
    --bs-btn-color: #3A2600; --bs-btn-bg: #F0A500; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #3A2600; --bs-btn-hover-bg: #E09A00; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #3A2600; --bs-btn-active-bg: #D18F00; --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #3A2600; --bs-btn-disabled-bg: #F0A500; --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(180deg, #FFC53D, #F0A500);
}
html.kit-ui .btn-success:hover, html.kit-ui .btn-danger:hover, html.kit-ui .btn-warning:hover { filter: brightness(1.05); }
html.kit-ui .btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--kit-brand-400); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-brand); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kit-brand-600); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--kit-brand-400); --bs-btn-disabled-border-color: transparent;
}
html.kit-ui .btn-light {
    --bs-btn-color: var(--kit-text-2); --bs-btn-bg: var(--kit-surface); --bs-btn-border-color: var(--kit-border-strong);
    --bs-btn-hover-color: var(--kit-text); --bs-btn-hover-bg: var(--kit-surface-hover); --bs-btn-hover-border-color: var(--kit-text-faint);
    --bs-btn-active-color: var(--kit-text); --bs-btn-active-bg: var(--kit-surface-3); --bs-btn-active-border-color: var(--kit-text-faint);
}
html.kit-ui .btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--kit-navy); --bs-btn-border-color: var(--kit-navy);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-navy-800); --bs-btn-hover-border-color: var(--kit-navy-800);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kit-navy-700); --bs-btn-active-border-color: var(--kit-navy-700);
}
/* Outline buttons: the kit's white "Outline" button, tinted by intent */
html.kit-ui .btn-outline-primary {
    --bs-btn-color: var(--kit-brand); --bs-btn-border-color: var(--kit-brand-100);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-brand); --bs-btn-hover-border-color: var(--kit-brand);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kit-brand-600); --bs-btn-active-border-color: var(--kit-brand-600);
    --bs-btn-disabled-color: var(--kit-brand); --bs-btn-disabled-border-color: var(--kit-brand-100);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-secondary,
html.kit-ui .btn-outline-dark {
    --bs-btn-color: var(--kit-text-2); --bs-btn-border-color: var(--kit-border-strong);
    --bs-btn-hover-color: var(--kit-text); --bs-btn-hover-bg: var(--kit-surface-hover); --bs-btn-hover-border-color: var(--kit-text-faint);
    --bs-btn-active-color: var(--kit-brand); --bs-btn-active-bg: var(--kit-brand-50); --bs-btn-active-border-color: var(--kit-brand);
    --bs-btn-disabled-color: var(--kit-text-muted); --bs-btn-disabled-border-color: var(--kit-border);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-success {
    --bs-btn-color: var(--kit-good-fg); --bs-btn-border-color: var(--kit-good-border);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-good-fg); --bs-btn-hover-border-color: var(--kit-good-fg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0A6B3D; --bs-btn-active-border-color: #0A6B3D;
    --bs-btn-disabled-color: var(--kit-good-fg); --bs-btn-disabled-border-color: var(--kit-good-border);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-danger {
    --bs-btn-color: var(--kit-crit-fg); --bs-btn-border-color: var(--kit-crit-border);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-crit); --bs-btn-hover-border-color: var(--kit-crit);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kit-crit-fg); --bs-btn-active-border-color: var(--kit-crit-fg);
    --bs-btn-disabled-color: var(--kit-crit-fg); --bs-btn-disabled-border-color: var(--kit-crit-border);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-warning {
    --bs-btn-color: var(--kit-warn-fg); --bs-btn-border-color: var(--kit-warn-border);
    --bs-btn-hover-color: #3A2600; --bs-btn-hover-bg: #F0A500; --bs-btn-hover-border-color: #F0A500;
    --bs-btn-active-color: #3A2600; --bs-btn-active-bg: #E09A00; --bs-btn-active-border-color: #E09A00;
    --bs-btn-disabled-color: var(--kit-warn-fg); --bs-btn-disabled-border-color: var(--kit-warn-border);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-info {
    --bs-btn-color: var(--kit-brand-400); --bs-btn-border-color: var(--kit-brand-100);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kit-brand-400); --bs-btn-hover-border-color: var(--kit-brand-400);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kit-brand); --bs-btn-active-border-color: var(--kit-brand);
    --bs-btn-disabled-color: var(--kit-brand-400); --bs-btn-disabled-border-color: var(--kit-brand-100);
    --bs-btn-bg: var(--kit-surface);
}
html.kit-ui .btn-outline-light { --bs-btn-hover-color: var(--kit-navy); }
html.kit-ui .btn-link { --bs-btn-color: var(--kit-brand); --bs-btn-hover-color: var(--kit-brand-600); --bs-btn-font-weight: 700; }
html.kit-ui .btn-close:focus { box-shadow: var(--kit-ring); }

/* ---- Badges: the kit's tinted status pills ---- */
html.kit-ui .badge { --bs-badge-font-weight: 700; --bs-badge-border-radius: 9999px; letter-spacing: .01em; }
html.kit-ui .badge.bg-success { color: var(--kit-good-fg) !important; background-color: var(--kit-good-bg) !important; box-shadow: inset 0 0 0 1px var(--kit-good-border); }
html.kit-ui .badge.bg-warning { color: var(--kit-warn-fg) !important; background-color: var(--kit-warn-bg) !important; box-shadow: inset 0 0 0 1px var(--kit-warn-border); }
html.kit-ui .badge.bg-danger { color: var(--kit-crit-fg) !important; background-color: var(--kit-crit-bg) !important; box-shadow: inset 0 0 0 1px var(--kit-crit-border); }
html.kit-ui .badge.bg-info,
html.kit-ui .badge.bg-primary { color: var(--kit-brand) !important; background-color: var(--kit-brand-50) !important; box-shadow: inset 0 0 0 1px var(--kit-brand-100); }
html.kit-ui .badge.bg-secondary,
html.kit-ui .badge.bg-light { color: var(--kit-neutral-fg) !important; background-color: var(--kit-neutral-bg) !important; box-shadow: inset 0 0 0 1px var(--kit-neutral-border); }
/* Count bubbles pinned on icons stay solid so they read at a glance */
html.kit-ui .badge.position-absolute.bg-danger { color: #fff !important; background-color: #E5484D !important; box-shadow: 0 0 0 2px var(--kit-surface); }
html.kit-ui .badge.position-absolute.bg-primary { color: #fff !important; background-color: var(--kit-brand) !important; box-shadow: 0 0 0 2px var(--kit-surface); }

/* ---- Alerts ---- */
html.kit-ui .alert {
    --bs-alert-border-radius: 12px;
    --bs-alert-padding-y: .85rem;
    --bs-alert-padding-x: 1rem;
    font-size: .9rem;
}
html.kit-ui .alert-primary { --bs-alert-color: var(--kit-brand); }
html.kit-ui .alert-info { --bs-alert-color: var(--kit-brand); }
html.kit-ui .alert-secondary,
html.kit-ui .alert-light { --bs-alert-color: var(--kit-neutral-fg); }
html.kit-ui .alert .alert-link { font-weight: 900; }

/* ---- Forms ---- */
html.kit-ui .form-label { font-weight: 700; color: var(--kit-text-2); }
html.kit-ui .form-control,
html.kit-ui .form-select {
    color: var(--kit-text);
    background-color: var(--kit-surface);
    border-color: var(--kit-border-strong);
    border-radius: 10px;
    box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .form-control-sm, html.kit-ui .form-select-sm { border-radius: 8px; }
html.kit-ui .form-control-lg, html.kit-ui .form-select-lg { border-radius: 12px; }
html.kit-ui .form-control::placeholder { color: var(--kit-text-faint); }
html.kit-ui .form-control:hover:not(:disabled):not(:focus),
html.kit-ui .form-select:hover:not(:disabled):not(:focus) { border-color: var(--kit-text-faint); }
html.kit-ui .form-control:focus,
html.kit-ui .form-select:focus {
    border-color: var(--kit-brand);
    box-shadow: var(--kit-ring);
}
html.kit-ui .form-control:disabled,
html.kit-ui .form-select:disabled,
html.kit-ui .form-control[readonly] { background-color: var(--kit-surface-2); color: var(--kit-text-muted); }
html.kit-ui .form-control-plaintext { color: var(--kit-text); }
html.kit-ui .form-text { color: var(--kit-text-muted); }
html.kit-ui .input-group-text {
    color: var(--kit-text-muted);
    background-color: var(--kit-surface-2);
    border-color: var(--kit-border-strong);
}
html.kit-ui .input-group > .form-control,
html.kit-ui .input-group > .form-select { box-shadow: none; }
html.kit-ui .form-check-input { border-color: var(--kit-border-strong); }
html.kit-ui .form-check-input:checked { background-color: var(--kit-brand); border-color: var(--kit-brand); }
html.kit-ui .form-check-input[type="checkbox"]:indeterminate { background-color: var(--kit-brand); border-color: var(--kit-brand); }
html.kit-ui .form-check-input:focus { border-color: var(--kit-brand); box-shadow: var(--kit-ring); }
html.kit-ui .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238DB8FF'/%3e%3c/svg%3e");
}
html.kit-ui .form-range::-webkit-slider-thumb { background-color: var(--kit-brand); }
html.kit-ui .form-range::-moz-range-thumb { background-color: var(--kit-brand); }
html.kit-ui .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, var(--kit-ring); }
html.kit-ui .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, var(--kit-ring); }
html.kit-ui .is-invalid { border-color: var(--kit-crit) !important; }
html.kit-ui .invalid-feedback { color: var(--kit-crit-fg); font-weight: 700; }
/* base.html "modern-form" switches */
html.kit-ui .modern-form .form-switch { border-color: var(--kit-border); border-radius: 12px; background: var(--kit-surface); }
html.kit-ui .modern-form .form-switch:hover { border-color: var(--kit-brand-100); background: var(--kit-surface-hover); }
html.kit-ui .modern-form .form-switch .form-check-input:checked { background-color: var(--kit-brand); border-color: var(--kit-brand); }
html.kit-ui .modern-form .form-select:hover { border-color: var(--kit-text-faint); }
html.kit-ui .modern-form .form-select:focus { border-color: var(--kit-brand); box-shadow: var(--kit-ring); }
html.kit-ui .form-section { border-radius: 14px; }

/* ---- Tables ---- */
html.kit-ui .table {
    --bs-table-color: var(--kit-text-2);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--kit-border);
    --bs-table-striped-bg: var(--kit-surface-2);
    --bs-table-striped-color: var(--kit-text-2);
    --bs-table-hover-bg: var(--kit-surface-hover);
    --bs-table-hover-color: var(--kit-text);
    --bs-table-active-bg: var(--kit-brand-50);
    --bs-table-active-color: var(--kit-text);
    color: var(--kit-text-2);
}
html.kit-ui .table > thead:not([class*="table-"]) > tr > th,
html.kit-ui .table > thead:not([class*="table-"]) > tr > td,
html.kit-ui .table > thead.table-light > tr > th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kit-text-muted);
    background-color: var(--kit-surface-2);
    border-bottom: 1px solid var(--kit-border);
    vertical-align: middle;
}
html.kit-ui .table-light {
    --bs-table-color: var(--kit-text-muted);
    --bs-table-bg: var(--kit-surface-2);
    --bs-table-border-color: var(--kit-border);
}
html.kit-ui .table td strong, html.kit-ui .table td a.fw-semibold, html.kit-ui .table td a.fw-bold { color: var(--kit-text); }
/* ktable (console.css) — same header treatment */
html.kit-ui .ktable-wrap { border-color: var(--kit-border); border-radius: var(--radius-lg); box-shadow: var(--kit-shadow-sm); }
html.kit-ui .ktable-toolbar { background: var(--kit-surface); border-bottom-color: var(--kit-border); padding: .7rem .9rem; }
html.kit-ui table.ktable > thead > tr > th { font-weight: 700; letter-spacing: .07em; font-size: .72rem; color: var(--kit-text-muted); }
html.kit-ui table.ktable > tbody > tr > td { color: var(--kit-text-2); }
html.kit-ui .ktable-col-toggle input { accent-color: var(--kit-brand); }
html.kit-ui .data-table-card { border-color: var(--kit-border); box-shadow: var(--kit-shadow-sm); }

/* ---- Dropdowns ---- */
html.kit-ui .dropdown-menu {
    --bs-dropdown-border-color: var(--kit-border);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-box-shadow: var(--kit-shadow-lg);
    --bs-dropdown-link-color: var(--kit-text-2);
    --bs-dropdown-link-hover-color: var(--kit-text);
    --bs-dropdown-link-hover-bg: var(--kit-surface-hover);
    --bs-dropdown-link-active-color: var(--kit-brand);
    --bs-dropdown-link-active-bg: var(--kit-brand-50);
    --bs-dropdown-header-color: var(--kit-text-faint);
    --bs-dropdown-divider-bg: var(--kit-border);
    --bs-dropdown-padding-x: .35rem;
    --bs-dropdown-padding-y: .35rem;
    --bs-dropdown-item-border-radius: 8px;
    box-shadow: var(--kit-shadow-lg);
}
html.kit-ui .dropdown-item { border-radius: 8px; font-weight: 700; font-size: .875rem; }
html.kit-ui .dropdown-header { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---- Nav tabs / pills ---- */
html.kit-ui .nav-tabs {
    --bs-nav-tabs-border-color: var(--kit-border);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--kit-border-strong);
    --bs-nav-tabs-link-active-color: var(--kit-brand);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--kit-brand);
}
html.kit-ui .nav-tabs .nav-link { font-weight: 700; color: var(--kit-text-muted); border-width: 0 0 2px; margin-bottom: -1px; }
html.kit-ui .nav-tabs .nav-link:hover { color: var(--kit-text); }
html.kit-ui .nav-tabs .nav-link.active,
html.kit-ui .nav-tabs .nav-item.show .nav-link { color: var(--kit-brand); }
html.kit-ui .nav-pills {
    --bs-nav-pills-border-radius: 10px;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--kit-brand);
}
html.kit-ui .nav-pills .nav-link { font-weight: 700; }
html.kit-ui .nav-link { --bs-nav-link-color: var(--kit-text-muted); --bs-nav-link-hover-color: var(--kit-brand); }

/* ---- Pagination, progress, list groups, accordions ---- */
html.kit-ui .pagination {
    --bs-pagination-color: var(--kit-text-2);
    --bs-pagination-border-color: var(--kit-border);
    --bs-pagination-hover-color: var(--kit-brand);
    --bs-pagination-hover-bg: var(--kit-brand-50);
    --bs-pagination-hover-border-color: var(--kit-brand-100);
    --bs-pagination-focus-color: var(--kit-brand);
    --bs-pagination-focus-bg: var(--kit-brand-50);
    --bs-pagination-focus-box-shadow: var(--kit-ring);
    --bs-pagination-active-bg: var(--kit-brand);
    --bs-pagination-active-border-color: var(--kit-brand);
    --bs-pagination-disabled-color: var(--kit-text-faint);
    --bs-pagination-disabled-border-color: var(--kit-border);
    --bs-pagination-border-radius: 9px;
    font-weight: 700;
}
html.kit-ui .progress, html.kit-ui .progress-stacked {
    --bs-progress-bg: var(--kit-surface-3);
    --bs-progress-bar-bg: var(--kit-brand);
    --bs-progress-border-radius: 9999px;
}
html.kit-ui .list-group {
    --bs-list-group-border-color: var(--kit-border);
    --bs-list-group-border-radius: 12px;
    --bs-list-group-action-hover-bg: var(--kit-surface-hover);
    --bs-list-group-action-active-bg: var(--kit-brand-50);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--kit-brand);
    --bs-list-group-active-border-color: var(--kit-brand);
}
html.kit-ui .accordion {
    --bs-accordion-border-color: var(--kit-border);
    --bs-accordion-border-radius: 12px;
    --bs-accordion-inner-border-radius: 11px;
    --bs-accordion-btn-focus-border-color: var(--kit-brand);
    --bs-accordion-btn-focus-box-shadow: var(--kit-ring);
    --bs-accordion-active-color: var(--kit-brand);
    --bs-accordion-active-bg: var(--kit-brand-50);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230541AD'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
html.kit-ui .accordion-button { font-weight: 700; }
html.kit-ui .spinner-border.text-primary, html.kit-ui .spinner-grow.text-primary { color: var(--kit-brand) !important; }
html.kit-ui .tooltip { --bs-tooltip-bg: var(--kit-navy); --bs-tooltip-border-radius: 8px; font-family: var(--kit-font); }
html.kit-ui .popover { --bs-popover-border-color: var(--kit-border); --bs-popover-border-radius: 12px; --bs-popover-box-shadow: var(--kit-shadow-lg); font-family: var(--kit-font); }

/* ---- Modals (Bootstrap) — the kit's clean white dialog, no purple gradient ---- */
html.kit-ui .modal { --bs-modal-border-radius: var(--radius-lg); --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px); }
html.kit-ui .modal-backdrop { --bs-backdrop-bg: #06173A; --bs-backdrop-opacity: .45; }
html.kit-ui .modal-content { border: 1px solid var(--kit-border); box-shadow: var(--kit-shadow-lg); }
html.kit-ui .modal-header {
    background: var(--kit-surface);
    border-bottom: 1px solid var(--kit-border);
    padding: 1.1rem 1.4rem;
}
html.kit-ui .modal-header::after { content: none; }
html.kit-ui .modal-title { color: var(--kit-text); font-weight: 900; letter-spacing: -.01em; }
html.kit-ui .modal-title i { color: var(--kit-brand); opacity: 1; }
html.kit-ui .modal-header .btn-close { filter: none; opacity: .55; }
html.kit-ui .modal-header .btn-close:hover { opacity: .9; }
/* Headers that keep their own coloured fill (utility class or inline gradient) */
html.kit-ui .modal-header.text-white .modal-title,
html.kit-ui .modal-header[style*="background"] .modal-title,
html.kit-ui .modal-header.text-white .modal-title i,
html.kit-ui .modal-header[style*="background"] .modal-title i { color: #fff; }
html.kit-ui .modal-header.text-white .btn-close,
html.kit-ui .modal-header[style*="background"] .btn-close { filter: brightness(0) invert(1); opacity: .85; }
html.kit-ui .modal-footer { background: var(--kit-surface-2); border-top-color: var(--kit-border); }
html.kit-ui .modal-footer .btn { border-radius: 10px; font-weight: 700; }
html.kit-ui .modal-footer .btn-primary {
    color: #fff; border-color: transparent;
    background: var(--kit-primary-gradient);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .7);
}
html.kit-ui .modal-footer .btn-primary:hover { filter: brightness(1.08); }
html.kit-ui .modal-footer .btn-secondary { color: var(--kit-text-2); background: var(--kit-surface); border: 1px solid var(--kit-border-strong); }
html.kit-ui .modal-footer .btn-secondary:hover { color: var(--kit-text); background: var(--kit-surface-hover); border-color: var(--kit-text-faint); }
html.kit-ui .modal-footer .btn-danger { color: #fff; border-color: transparent; background: linear-gradient(180deg, #E5484D, #C62828); }
html.kit-ui .offcanvas { --bs-offcanvas-border-color: var(--kit-border); }

/* ---- Console confirm dialog (showConfirm in base.html) ---- */
html.kit-ui .confirm-overlay { background: var(--kit-overlay); }
html.kit-ui .confirm-dialog { border-color: var(--kit-border); border-radius: var(--radius-lg); box-shadow: var(--kit-shadow-lg); max-width: 420px; }
html.kit-ui .confirm-header { padding: 24px 24px 0; }
html.kit-ui .confirm-icon { width: 44px; height: 44px; border-radius: 12px; }
html.kit-ui .confirm-icon.info { background: var(--kit-brand-50); color: var(--kit-brand); }
html.kit-ui .confirm-title { font-weight: 900; font-size: 1.12rem; color: var(--kit-text); }
html.kit-ui .confirm-body { color: var(--kit-text-muted); font-size: .92rem; line-height: 1.55; }
html.kit-ui .confirm-btn { border-radius: 10px; font-weight: 700; font-family: var(--kit-font); }
html.kit-ui .confirm-btn-cancel { color: var(--kit-text-2); background: transparent; }
html.kit-ui .confirm-btn-cancel:hover { color: var(--kit-text); background: var(--kit-surface-3); }
html.kit-ui .confirm-btn-confirm {
    color: #fff; background: var(--kit-primary-gradient);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .7);
}
html.kit-ui .confirm-btn-confirm:hover { background: var(--kit-primary-gradient); filter: brightness(1.08); }
html.kit-ui .confirm-btn-danger { color: #fff; background: linear-gradient(180deg, #E5484D, #C62828); box-shadow: 0 8px 18px -8px rgba(198, 40, 40, .6); }
html.kit-ui .confirm-btn-danger:hover { background: linear-gradient(180deg, #E5484D, #C62828); filter: brightness(1.06); }

/* ---- Console toasts (toast.* in base.html): white card with a status accent bar ---- */
html.kit-ui .toast-container { top: calc(var(--kit-topbar-h) + 12px); }
html.kit-ui .toast-notification {
    position: relative; overflow: hidden;
    padding: 14px 16px 14px 20px;
    border-color: var(--kit-border);
    border-radius: 12px;
    box-shadow: var(--kit-shadow-lg);
}
html.kit-ui .toast-notification::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kit-toast-accent, var(--kit-brand)); }
html.kit-ui .toast-success { --kit-toast-accent: var(--kit-good); }
html.kit-ui .toast-error { --kit-toast-accent: var(--kit-crit); }
html.kit-ui .toast-warning { --kit-toast-accent: var(--kit-warn); }
html.kit-ui .toast-info { --kit-toast-accent: var(--kit-brand); }
html.kit-ui .toast-notification .toast-icon { background: var(--kit-toast-accent, var(--kit-brand)); }
html.kit-ui .toast-notification .toast-progress { background: var(--kit-toast-accent, var(--kit-brand)); opacity: .55; }
html.kit-ui .toast-title { font-weight: 900; color: var(--kit-text); }
html.kit-ui .toast-message { color: var(--kit-text-muted); }

/* ---- Slide-out detail panel ---- */
html.kit-ui .detail-panel { box-shadow: var(--kit-shadow-lg); border-left: 1px solid var(--kit-border); }
html.kit-ui .detail-panel:not(.show) { box-shadow: none; } /* closed panel sits off-screen; its shadow must not bleed in */
html.kit-ui .detail-panel-overlay { background: var(--kit-overlay); }
html.kit-ui .detail-panel-header { background: var(--kit-surface); }
html.kit-ui .detail-panel-header h5 { font-weight: 900; }
html.kit-ui .detail-panel-footer { background: var(--kit-surface-2); }
html.kit-ui .detail-section-title { color: var(--kit-text-faint); letter-spacing: .12em; }

/* ---- Incoming call slide-in ---- */
html.kit-ui .incoming-call-panel { border-color: var(--kit-brand-100); border-radius: var(--radius-lg); box-shadow: var(--kit-shadow-lg); }

/* ---- AI chat widget (base.html): brand gradient instead of violet ---- */
html.kit-ui .chat-widget-container { font-family: var(--kit-font); }
html.kit-ui .chat-toggle-btn { background: var(--kit-primary-gradient); box-shadow: 0 10px 24px -8px rgba(5, 65, 173, .65); }
html.kit-ui .chat-toggle-btn:hover { box-shadow: 0 14px 28px -8px rgba(5, 65, 173, .75); }
html.kit-ui .chat-window { border-radius: var(--radius-lg); box-shadow: var(--kit-shadow-lg); }
html.kit-ui .chat-header { background: linear-gradient(120deg, #06173A 0%, #0A2A6B 55%, #0541AD 100%); }
html.kit-ui .chat-message.user { background: var(--kit-primary-gradient); }
html.kit-ui .chat-message.assistant a.chat-link { color: var(--kit-brand); }
html.kit-ui .chat-send-btn { background: var(--kit-primary-gradient); }
html.kit-ui .chat-input:focus { border-color: var(--kit-brand); }
html.kit-ui .chat-welcome i { color: var(--kit-brand); }

/* ---- Global search results: one brand tile instead of a colour per section ---- */
html.kit-ui .search-item-icon { background: var(--kit-brand-50) !important; color: var(--kit-brand); }
html.kit-ui .search-item-icon i { color: var(--kit-brand); }

/* ---- base.html form-section icon tiles and modal loader ---- */
html.kit-ui .form-section-icon { background: var(--kit-brand-50) !important; color: var(--kit-brand) !important; }
html.kit-ui .modal-loading .spinner-border { color: var(--kit-brand); }

/* ---- Misc shared bits in base.html ---- */
html.kit-ui .status-indicator.unknown { background-color: var(--kit-neutral); }
html.kit-ui .clickable-row:hover { background-color: var(--kit-surface-hover); }
html.kit-ui .log-output { border-radius: 12px; }
html.kit-ui .bg-light { background-color: var(--kit-surface-2) !important; }
html.kit-ui .bg-body-tertiary { background-color: var(--kit-surface-2) !important; }

@media (prefers-reduced-motion: reduce) {
    html.kit-ui .kit-sidebar, html.kit-ui .kit-nav-link, html.kit-ui .btn { transition: none; }
}

/* =============================================================================
   7. SIGN-IN PAGES (auth/*.html kit branch) — ui-kit 05-auth-errors.css
   ============================================================================= */
html.kit-ui .kit-auth { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; min-height: 100vh; }
html.kit-ui .kit-auth__brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 48px 56px; color: #C9D4E6;
    background:
        radial-gradient(70% 60% at 0% 0%, rgba(63, 126, 242, .40) 0%, rgba(63, 126, 242, 0) 60%),
        radial-gradient(60% 50% at 100% 100%, rgba(141, 184, 255, .22) 0%, rgba(141, 184, 255, 0) 60%),
        linear-gradient(160deg, #081D48 0%, #06173A 50%, #041029 100%);
}
html.kit-ui .kit-auth__brand::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .8;
    background-image: linear-gradient(rgba(141, 184, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 184, 255, .06) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(90% 70% at 30% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(90% 70% at 30% 40%, #000 0%, transparent 80%);
}
html.kit-ui .kit-auth__brand::after {
    content: ''; position: absolute; z-index: -1; right: -120px; bottom: -80px; width: 520px; height: 480px; opacity: .07;
    background: url('../kit/logos/k-mark-white.svg') no-repeat center / contain;
}
html.kit-ui .kit-auth__glow {
    position: absolute; z-index: -1; width: 480px; height: 480px; left: 30%; top: 22%; border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 126, 242, .45), transparent 65%); filter: blur(20px);
    animation: kit-glow-drift 14s ease-in-out infinite alternate;
}
@keyframes kit-glow-drift { from { transform: translate(-30px, -20px); } to { transform: translate(40px, 30px); } }
html.kit-ui .kit-auth__brand-top { display: flex; align-items: center; gap: 16px; }
html.kit-ui .kit-auth__brand-logo { width: 170px; height: auto; }
html.kit-ui .kit-auth__brand-product {
    padding: 5px 12px; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
    color: var(--kit-sky); border: 1px solid rgba(141, 184, 255, .3); border-radius: 9999px;
}
html.kit-ui .kit-auth__brand-copy h2 {
    margin: 0 0 16px; font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem); font-weight: 900;
    letter-spacing: -.035em; line-height: 1.08; color: #fff;
}
html.kit-ui .kit-auth__brand-copy h2 span { background: linear-gradient(90deg, #8DB8FF, #C9DCFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.kit-ui .kit-auth__brand-copy > p { max-width: 460px; margin: 0 0 32px; font-size: 1.05rem; line-height: 1.6; color: #AFC1DE; }
html.kit-ui .kit-auth__features { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
html.kit-ui .kit-auth__features li {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px;
    background: rgba(141, 184, 255, .06); border: 1px solid rgba(141, 184, 255, .12);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html.kit-ui .kit-auth__features i { font-size: 1.3rem; line-height: 1; margin-top: 2px; color: var(--kit-sky); }
html.kit-ui .kit-auth__features span { display: flex; flex-direction: column; font-size: .88rem; color: #9FB0CC; }
html.kit-ui .kit-auth__features strong { font-size: .95rem; color: #fff; }
html.kit-ui .kit-auth__brand-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #7F93B6; }
html.kit-ui .kit-auth__tagline { font-weight: 900; font-style: italic; color: #fff; }

html.kit-ui .kit-auth__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 24px; background: var(--kit-bg); }
html.kit-ui .kit-auth__card { width: 100%; max-width: 420px; }
html.kit-ui .kit-auth__mobile-logo { display: none; width: 150px; height: auto; margin-bottom: 28px; }
html.kit-ui .kit-auth__eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--kit-brand); }
html.kit-ui .kit-auth__title { margin: 0; font-size: 2.2rem; font-weight: 900; letter-spacing: -.035em; color: var(--kit-text); }
html.kit-ui .kit-auth__subtitle { margin: 8px 0 28px; font-size: 1rem; color: var(--kit-text-muted); }
html.kit-ui .kit-auth__subtitle strong { color: var(--kit-text); overflow-wrap: anywhere; }
html.kit-ui .kit-auth__card .kit-alert { margin-bottom: 20px; }
html.kit-ui .kit-auth__sso { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; }
html.kit-ui .kit-auth__sso + .kit-auth__sso { margin-top: 12px; }
html.kit-ui .kit-auth__sso-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .16); }
html.kit-ui .kit-auth__sso-mark img { width: 15px; height: 15px; }
html.kit-ui .kit-auth__sso--ms svg { width: 20px; height: 20px; }
html.kit-ui .kit-auth__divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; font-size: .8rem; font-weight: 700; color: var(--kit-text-faint); }
html.kit-ui .kit-auth__divider::before, html.kit-ui .kit-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--kit-border); }
html.kit-ui .kit-auth__input-icon { position: relative; }
html.kit-ui .kit-auth__input-icon > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--kit-text-faint); pointer-events: none; z-index: 1; }
html.kit-ui .kit-auth__input-icon > .form-control { padding-left: 42px; min-height: 50px; font-size: .98rem; }
html.kit-ui .kit-auth__help { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: .82rem; color: var(--kit-text-muted); }
html.kit-ui .kit-auth__help i { color: var(--kit-good); }
html.kit-ui .kit-auth__switch { margin: 14px 0 0; font-size: .88rem; color: var(--kit-text-muted); }
html.kit-ui .kit-auth__switch a { font-weight: 700; }
html.kit-ui .kit-auth__legal { margin: 0; font-size: .78rem; color: var(--kit-text-faint); }
html.kit-ui .kit-auth__mail-icon {
    display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 20px;
    font-size: 1.9rem; color: var(--kit-good-fg); background: var(--kit-good-bg);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--kit-good-bg) 50%, transparent);
    animation: kit-pop-in .5s var(--kit-ease) both;
}
@keyframes kit-pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
html.kit-ui .kit-auth__steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.kit-ui .kit-auth__steps li {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: .92rem; color: var(--kit-text-2);
    background: var(--kit-surface); border: 1px solid var(--kit-border); border-radius: 12px; box-shadow: var(--kit-shadow-xs);
}
html.kit-ui .kit-auth__steps li span {
    display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
    font-size: .8rem; font-weight: 900; color: #fff; background: var(--kit-brand); border-radius: 50%;
}
html.kit-ui .kit-auth__tips { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
html.kit-ui .kit-auth__tips li { position: relative; padding-left: 22px; font-size: .88rem; color: var(--kit-text-muted); }
html.kit-ui .kit-auth__tips li::before {
    content: ''; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--kit-brand-100); box-shadow: 0 0 0 2px var(--kit-brand-50);
}
/* Flashed messages as kit alerts (partials/kit_flashes.html) */
html.kit-ui .kit-alert { display: flex; align-items: flex-start; gap: 10px; }
html.kit-ui .kit-alert > i { font-size: 1.1rem; line-height: 1.3; }

@media (max-width: 960px) {
    html.kit-ui .kit-auth { grid-template-columns: 1fr; }
    html.kit-ui .kit-auth__brand { display: none; }
    html.kit-ui .kit-auth__mobile-logo { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    html.kit-ui .kit-auth__glow, html.kit-ui .kit-auth__mail-icon { animation: none; }
}

/* =============================================================================
   8. DASHBOARD HERO (dashboard.html kit branch) — ui-kit 04-patterns.css .hero-panel
   ============================================================================= */
html.kit-ui .kit-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px;
    padding: 32px 40px; margin-bottom: 1.5rem;
    color: #E6EEFB;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(141, 184, 255, .30) 0%, rgba(141, 184, 255, 0) 60%),
        radial-gradient(50% 90% at 0% 100%, rgba(63, 126, 242, .35) 0%, rgba(63, 126, 242, 0) 60%),
        linear-gradient(120deg, #06173A 0%, #0A2A6B 55%, #0541AD 100%);
    box-shadow: 0 30px 60px -30px rgba(5, 65, 173, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html.kit-ui .kit-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55;
    background-image: linear-gradient(rgba(141, 184, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 184, 255, .07) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(80% 100% at 80% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(80% 100% at 80% 20%, #000 0%, transparent 75%);
}
html.kit-ui .kit-hero::after {
    content: ''; position: absolute; z-index: -1; left: 46%; bottom: -120px; width: 300px; height: 280px; opacity: .05; transform: rotate(-8deg);
    background: url('../kit/logos/k-mark-white.svg') no-repeat center / contain;
}
html.kit-ui .kit-hero__glow {
    position: absolute; z-index: -1; width: 420px; height: 420px; right: 12%; top: -220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 184, 255, .35), transparent 65%); filter: blur(10px);
    animation: kit-glow-drift 12s ease-in-out infinite alternate;
}
html.kit-ui .kit-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FC1FF; }
html.kit-ui .kit-hero__date { letter-spacing: .06em; }
html.kit-ui .kit-pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #5FD897; color: #5FD897; }
html.kit-ui .kit-pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: kit-pulse-ring 2.4s var(--kit-ease) infinite; }
@keyframes kit-pulse-ring { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
html.kit-ui .kit-hero__title { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.45rem); font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
html.kit-ui .kit-hero__sub { margin: 10px 0 0; font-size: 1.02rem; color: #BFD0EC; }
html.kit-ui .kit-hero__sub strong { color: #FFD580; }
html.kit-ui .kit-hero__metrics { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 26px; }
html.kit-ui .kit-hero__metric {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px;
    margin: -6px -10px; padding: 6px 10px; border-radius: 12px; text-decoration: none;
    transition: background 200ms var(--kit-ease);
}
html.kit-ui .kit-hero__metric:hover { background: rgba(141, 184, 255, .10); }
html.kit-ui .kit-hero__metric:focus-visible { outline: 2px solid var(--kit-sky); outline-offset: 2px; }
html.kit-ui .kit-hero__metric-value { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
html.kit-ui .kit-hero__metric-of { font-size: 1.05rem; font-weight: 700; color: #8FB0E6; }
html.kit-ui .kit-hero__metric-label { flex-basis: 100%; margin-top: 6px; font-size: .78rem; font-weight: 700; color: #9FB4D6; letter-spacing: .02em; }
html.kit-ui .kit-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
html.kit-ui .kit-btn-hero,
html.kit-ui .kit-btn-hero-ghost { display: inline-flex; align-items: center; gap: 8px; --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; }
html.kit-ui .kit-btn-hero {
    --bs-btn-color: var(--kit-navy); --bs-btn-bg: #fff; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--kit-navy); --bs-btn-hover-bg: #EEF3FC; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--kit-navy); --bs-btn-active-bg: #DCE7FA; --bs-btn-active-border-color: transparent;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
html.kit-ui .kit-btn-hero-ghost {
    --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-border-color: rgba(255, 255, 255, .22);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-border-color: rgba(255, 255, 255, .4);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .2); --bs-btn-active-border-color: rgba(255, 255, 255, .4);
}
html.kit-ui .kit-hero__ring { position: relative; width: 196px; height: 196px; flex-shrink: 0; margin-right: 8px; }
html.kit-ui .kit-hero__ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(6, 23, 58, .55) 0%, rgba(6, 23, 58, .15) 70%, transparent 100%); box-shadow: inset 0 0 30px rgba(141, 184, 255, .12); }
html.kit-ui .kit-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
html.kit-ui .kit-ring__track { fill: none; stroke: rgba(141, 184, 255, .16); stroke-width: 12; }
html.kit-ui .kit-ring__value { fill: none; stroke: url(#kitRingGrad); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(141, 184, 255, .55)); animation: kit-ring-fill 1.4s var(--kit-ease) both .2s; }
@keyframes kit-ring-fill { from { stroke-dashoffset: var(--ring-c); } to { stroke-dashoffset: var(--ring-offset); } }
html.kit-ui .kit-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
html.kit-ui .kit-ring__text { font-size: 2.7rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
html.kit-ui .kit-ring__text small { font-size: 1.05rem; font-weight: 700; color: #9FC1FF; margin-left: 2px; }
html.kit-ui .kit-ring__label { margin-top: 6px; font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #BFD0EC; }
html.kit-ui .kit-ring__sub { margin-top: 4px; font-size: .72rem; color: #8FA7CC; }
@media (max-width: 860px) {
    html.kit-ui .kit-hero { grid-template-columns: 1fr; padding: 26px 22px; }
    html.kit-ui .kit-hero__ring { order: -1; width: 160px; height: 160px; }
    html.kit-ui .kit-ring__text { font-size: 2.2rem; }
}
@media (max-width: 560px) {
    html.kit-ui .kit-hero__metrics { gap: 16px 26px; }
    html.kit-ui .kit-hero__metric-value { font-size: 1.6rem; }
    html.kit-ui .kit-hero__date { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.kit-ui .kit-hero__glow, html.kit-ui .kit-ring__value, html.kit-ui .kit-pulse-dot::after { animation: none; }
}

/* =============================================================================
   9. ERROR PAGES (templates/errors/*.html, standalone) — ui-kit .error-page
   ============================================================================= */
html.kit-ui body.kit-error-page {
    margin: 0; min-height: 100vh; color: #C9D4E6; font-family: var(--kit-font);
    background:
        radial-gradient(60% 50% at 20% 10%, rgba(63, 126, 242, .35) 0%, transparent 60%),
        radial-gradient(50% 50% at 90% 90%, rgba(141, 184, 255, .18) 0%, transparent 60%),
        linear-gradient(160deg, #081D48 0%, #06173A 55%, #041029 100%);
}
html.kit-ui .kit-error { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px 20px; text-align: center; isolation: isolate; }
html.kit-ui .kit-error::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(rgba(141, 184, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 184, 255, .05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
    mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
}
html.kit-ui .kit-error__logo img { width: 150px; height: auto; }
html.kit-ui .kit-error__card { max-width: 520px; }
html.kit-ui .kit-error__code {
    font-size: clamp(6rem, 4rem + 10vw, 10rem); font-weight: 900; line-height: .9; letter-spacing: -.06em;
    background: linear-gradient(180deg, #FFFFFF 10%, #8DB8FF 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 20px 40px rgba(63, 126, 242, .35));
}
html.kit-ui .kit-error__title { margin: 16px 0 10px; font-size: 1.7rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
html.kit-ui .kit-error__message { margin: 0 auto 28px; max-width: 440px; font-size: 1rem; line-height: 1.6; color: #AFC1DE; }
html.kit-ui .kit-error__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
html.kit-ui .kit-error__btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
    font-family: var(--kit-font); font-size: .95rem; font-weight: 700; text-decoration: none;
    border: 1px solid transparent; border-radius: 12px; transition: background 200ms var(--kit-ease), border-color 200ms var(--kit-ease);
}
html.kit-ui .kit-error__btn--solid { color: var(--kit-navy); background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
html.kit-ui .kit-error__btn--solid:hover { color: var(--kit-navy); background: #EEF3FC; }
html.kit-ui .kit-error__btn--ghost { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
html.kit-ui .kit-error__btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
html.kit-ui .kit-error__foot { margin: 0; font-size: .8rem; color: #7F93B6; }

/* =============================================================================
   10. PAGE ACCENTS — the most visible per-page hard-coded purple/indigo accents,
   moved onto the kit brand. Page <style> blocks load after this file, so these
   selectors carry html.kit-ui for the extra specificity they need to win.
   ============================================================================= */
/* Primary actions drawn as indigo/violet gradients */
html.kit-ui .btn-create-ticket,
html.kit-ui .btn-add-user,
html.kit-ui #advancedFiltersPanel .btn-apply,
html.kit-ui #createTicketModal .btn-primary {
    color: #fff;
    background: var(--kit-primary-gradient);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .7);
}
html.kit-ui .btn-create-ticket:hover,
html.kit-ui .btn-add-user:hover,
html.kit-ui #advancedFiltersPanel .btn-apply:hover,
html.kit-ui #createTicketModal .btn-primary:hover {
    color: #fff;
    background: var(--kit-primary-gradient);
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 24px -10px rgba(5, 65, 173, .85);
}
html.kit-ui #createTicketModal .btn-primary:disabled { background: var(--kit-border-strong); box-shadow: none; filter: none; }
html.kit-ui #createTicketModal .modal-title i { color: var(--kit-brand); }
/* Violet hero / selection bars become the kit navy-to-cobalt panel */
html.kit-ui .contact-hero,
html.kit-ui .bulk-actions-bar { background: linear-gradient(120deg, #06173A 0%, #0A2A6B 55%, #0541AD 100%); }
html.kit-ui .nav-pills-custom .nav-link.active { background: var(--kit-brand); color: #fff; }
/* Primary actions and icons coloured with an inline orange (old Security Training /
   Broadcast accent). Inline styles need !important to be overridden. */
html.kit-ui .btn[style*="f97316"],
html.kit-ui .btn[style*="ea580c"],
html.kit-ui button[style*="background:#f97316"],
html.kit-ui button[style*="background: #f97316"],
html.kit-ui button[style*="background: rgb(249, 115, 22)"],
html.kit-ui .btn-primary-orange {
    color: #fff !important;
    background: var(--kit-primary-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -8px rgba(5, 65, 173, .7);
}
html.kit-ui .btn[style*="f97316"]:hover,
html.kit-ui .btn[style*="ea580c"]:hover,
html.kit-ui button[style*="f97316"]:hover,
html.kit-ui .btn-primary-orange:hover { filter: brightness(1.08); }
html.kit-ui i[style*="f97316"],
html.kit-ui i[style*="ea580c"] { color: var(--kit-brand) !important; }
html.kit-ui [style*="color:#f97316"],
html.kit-ui [style*="color: #f97316"] { color: var(--kit-brand) !important; }
/* Security Training module: orange accents in page <style> blocks */
html.kit-ui .filter-pill:hover,
html.kit-ui .filter-pill.active { background: var(--kit-brand); border-color: var(--kit-brand); color: #fff; }
html.kit-ui .wizard-card-title i,
html.kit-ui .editor-card-title i,
html.kit-ui .difficulty-stars .star.active { color: var(--kit-brand); }
/* AI chat settings (knowledge/chat): violet switches */
html.kit-ui .form-switch .form-check-input:checked { background-color: var(--kit-brand); border-color: var(--kit-brand); }
html.kit-ui .toggle-switch input:checked + .toggle-slider { background: var(--kit-brand); }
html.kit-ui .number-input:focus { border-color: var(--kit-brand); }
html.kit-ui .chat-preview-title i,
html.kit-ui .context-stat-value { color: var(--kit-brand); }
html.kit-ui .settings-section-icon.chat { background: var(--kit-brand-50); color: var(--kit-brand); }
/* Inline violet gradient fills (DocuSign save button, contract stat tiles) */
html.kit-ui [style*="linear-gradient(135deg, #8b5cf6"],
html.kit-ui [style*="linear-gradient(135deg, #7c3aed"],
html.kit-ui [style*="linear-gradient(135deg, #6366f1"] { background: var(--kit-primary-gradient) !important; }
/* Profile page */
html.kit-ui .profile-avatar { background: var(--kit-primary-gradient); }
html.kit-ui .profile-section-header i { color: var(--kit-brand); }
html.kit-ui .btn-save { background: var(--kit-primary-gradient); border-color: transparent; color: #fff; }
html.kit-ui .btn-save:hover { filter: brightness(1.08); color: #fff; }
html.kit-ui .quick-link:hover { border-color: var(--kit-brand); color: var(--kit-brand); }
/* Camera agent setup hero */
html.kit-ui .agent-hero { background: linear-gradient(120deg, #06173A 0%, #0A2A6B 55%, #0541AD 100%); }
/* Outbound Scan pages draw their page header as an amber banner: plain kit header instead */
html.kit-ui .page-header[class] { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
html.kit-ui .page-header .page-header-icon { color: var(--kit-brand); background: var(--kit-brand-50); border: 1px solid var(--kit-brand-100); box-shadow: none; }
html.kit-ui .page-header h2 { color: var(--kit-text); font-weight: 900; letter-spacing: -.02em; }
html.kit-ui .page-header .subtitle { color: var(--kit-text-muted); }