/**
 * kendo-theme-override.css
 *
 * Maps project variables (variables.css) → Kendo UI CSS custom properties.
 * Load this file AFTER kendo-default-main.css and AFTER variables.css.
 *
 * Source Kendo version: v2022.3.1109 (kendo.common.min.css + kendo-default-main.css)
 * Project variables:    variables.css
 */

:root {
    /* ─────────────────────────────────────────────
       SURFACES & BACKGROUNDS
       ───────────────────────────────────────────── */
    --kendo-color-app-surface: var(--clr-surface); /* #ffffff */
    --kendo-color-on-app-surface: var(--clr-text); /* #111111 */
    --kendo-color-surface: var(--clr-bg); /* #f5f5f5 */
    --kendo-color-surface-alt: var(--clr-surface); /* #ffffff */
    /* ─────────────────────────────────────────────
       PRIMARY  →  Cyan brand colour
       ───────────────────────────────────────────── */
    --kendo-color-primary-subtle: var(--clr-cyan-pale); /* #E6F7FF */
    --kendo-color-primary-subtle-hover: var(--clr-cyan-a20); /* rgba(0,174,239,.20) */
    --kendo-color-primary-subtle-active: var(--clr-cyan-a30); /* rgba(0,174,239,.30) */
    --kendo-color-primary: var(--clr-cyan); /* #00AEEF */
    --kendo-color-primary-hover: var(--clr-cyan-dark); /* #0090C8 */
    --kendo-color-primary-active: var(--clr-cyan-dark); /* #0090C8 */
    --kendo-color-primary-emphasis: var(--clr-cyan-light); /* #33BFFF */
    --kendo-color-primary-on-subtle: var(--clr-cyan-text); /* #005f80 */
    --kendo-color-on-primary: var(--clr-white); /* #ffffff */
    --kendo-color-primary-on-surface: var(--clr-cyan); /* #00AEEF */
    /* ─────────────────────────────────────────────
       SECONDARY  →  Green brand colour
       ───────────────────────────────────────────── */
    --kendo-color-secondary-subtle: var(--clr-green-pale); /* #F0F8E6 */
    --kendo-color-secondary-subtle-hover: var(--clr-green-a15); /* rgba(141,198,63,.15) */
    --kendo-color-secondary-subtle-active: var(--clr-green-a35); /* rgba(141,198,63,.35) */
    --kendo-color-secondary: var(--clr-green); /* #8DC63F */
    --kendo-color-secondary-hover: var(--clr-green-dark); /* #6FA832 */
    --kendo-color-secondary-active: var(--clr-green-dark); /* #6FA832 */
    --kendo-color-secondary-emphasis: var(--clr-green-light); /* #A8D96A */
    --kendo-color-secondary-on-subtle: var(--clr-green-text); /* #4a6e1a */
    --kendo-color-on-secondary: var(--clr-white); /* #ffffff */
    --kendo-color-secondary-on-surface: var(--clr-green); /* #8DC63F */
    /* ─────────────────────────────────────────────
       TERTIARY  →  Cyan (same family, lighter variant)
       ───────────────────────────────────────────── */
    --kendo-color-tertiary-subtle: var(--clr-cyan-pale); /* #E6F7FF */
    --kendo-color-tertiary-subtle-hover: var(--clr-cyan-a20); /* rgba(0,174,239,.20) */
    --kendo-color-tertiary-subtle-active: var(--clr-cyan-a30); /* rgba(0,174,239,.30) */
    --kendo-color-tertiary: var(--clr-cyan-light); /* #33BFFF */
    --kendo-color-tertiary-hover: var(--clr-cyan); /* #00AEEF */
    --kendo-color-tertiary-active: var(--clr-cyan-dark); /* #0090C8 */
    --kendo-color-tertiary-emphasis: var(--clr-cyan-a35); /* rgba(0,174,239,.35) */
    --kendo-color-tertiary-on-subtle: var(--clr-cyan-text); /* #005f80 */
    --kendo-color-on-tertiary: var(--clr-white); /* #ffffff */
    --kendo-color-tertiary-on-surface: var(--clr-cyan-dark); /* #0090C8 */
    /* ─────────────────────────────────────────────
       INFO  →  Cyan
       ───────────────────────────────────────────── */
    --kendo-color-info-subtle: var(--clr-cyan-pale); /* #E6F7FF */
    --kendo-color-info-subtle-hover: var(--clr-cyan-a20); /* rgba(0,174,239,.20) */
    --kendo-color-info-subtle-active: var(--clr-cyan-a30); /* rgba(0,174,239,.30) */
    --kendo-color-info: var(--clr-info); /* #00AEEF */
    --kendo-color-info-hover: var(--clr-cyan-dark); /* #0090C8 */
    --kendo-color-info-active: var(--clr-cyan-dark); /* #0090C8 */
    --kendo-color-info-emphasis: var(--clr-cyan-a35); /* rgba(0,174,239,.35) */
    --kendo-color-info-on-subtle: var(--clr-cyan-text); /* #005f80 */
    --kendo-color-on-info: var(--clr-white); /* #ffffff */
    --kendo-color-info-on-surface: var(--clr-cyan-dark); /* #0090C8 */
    /* ─────────────────────────────────────────────
       SUCCESS  →  Green
       ───────────────────────────────────────────── */
    --kendo-color-success-subtle: var(--clr-green-pale); /* #F0F8E6 */
    --kendo-color-success-subtle-hover: var(--clr-green-a15); /* rgba(141,198,63,.15) */
    --kendo-color-success-subtle-active: var(--clr-green-a35); /* rgba(141,198,63,.35) */
    --kendo-color-success: var(--clr-success); /* #8DC63F */
    --kendo-color-success-hover: var(--clr-green-dark); /* #6FA832 */
    --kendo-color-success-active: var(--clr-green-dark); /* #6FA832 */
    --kendo-color-success-emphasis: var(--clr-green-light); /* #A8D96A */
    --kendo-color-success-on-subtle: var(--clr-green-text); /* #4a6e1a */
    --kendo-color-on-success: var(--clr-white); /* #ffffff */
    --kendo-color-success-on-surface: var(--clr-green-dark); /* #6FA832 */
    /* ─────────────────────────────────────────────
       WARNING  →  project warning orange
       ───────────────────────────────────────────── */
    --kendo-color-warning-subtle: var(--clr-warning-a07); /* rgba(224,140,0,.07) */
    --kendo-color-warning-subtle-hover: var(--clr-warning-a08); /* rgba(224,140,0,.08) */
    --kendo-color-warning-subtle-active: var(--clr-warning-a10); /* rgba(224,140,0,.10) */
    --kendo-color-warning: var(--clr-warning); /* #e08c00 */
    --kendo-color-warning-hover: #c97c00;
    --kendo-color-warning-active: #b36d00;
    --kendo-color-warning-emphasis: #f5a623;
    --kendo-color-warning-on-subtle: var(--clr-warning-text); /* #7a4e00 */
    --kendo-color-on-warning: var(--clr-white); /* #ffffff */
    --kendo-color-warning-on-surface: var(--clr-warning); /* #e08c00 */
    /* ─────────────────────────────────────────────
       ERROR / DANGER  →  project danger red
       ───────────────────────────────────────────── */
    --kendo-color-error-subtle: var(--clr-danger-a04); /* rgba(224,60,60,.04) */
    --kendo-color-error-subtle-hover: var(--clr-danger-a07); /* rgba(224,60,60,.07) */
    --kendo-color-error-subtle-active: var(--clr-danger-a12); /* rgba(224,60,60,.12) */
    --kendo-color-error: var(--clr-danger); /* #e03c3c */
    --kendo-color-error-hover: #c73434;
    --kendo-color-error-active: #b02c2c;
    --kendo-color-error-emphasis: var(--clr-danger-a35);
    --kendo-color-error-on-subtle: var(--clr-danger-text); /* #a82020 */
    --kendo-color-on-error: var(--clr-white); /* #ffffff */
    --kendo-color-error-on-surface: var(--clr-danger); /* #e03c3c */
    /* ─────────────────────────────────────────────
       BASE / NEUTRAL TONES
       ───────────────────────────────────────────── */
    --kendo-color-base-subtle: var(--clr-border); /* #d9d9d9 */
    --kendo-color-base-subtle-hover: var(--clr-subtle); /* #bbbbbb */
    --kendo-color-base-subtle-active: var(--clr-muted); /* #777777 */
    --kendo-color-base: var(--clr-bg); /* #f5f5f5 */
    --kendo-color-base-hover: #ebebeb;
    --kendo-color-base-active: var(--clr-border); /* #d9d9d9 */
    --kendo-color-base-emphasis: var(--clr-subtle); /* #bbbbbb */
    --kendo-color-base-on-subtle: var(--clr-text); /* #111111 */
    --kendo-color-on-base: var(--clr-text); /* #111111 */
    --kendo-color-base-on-surface: var(--clr-text); /* #111111 */
    /* ─────────────────────────────────────────────
       BORDERS
       ───────────────────────────────────────────── */
    --kendo-color-border: var(--clr-border); /* #d9d9d9 */
    --kendo-color-border-alt: var(--clr-subtle); /* #bbbbbb */
    /* ─────────────────────────────────────────────
       TEXT HELPERS
       ───────────────────────────────────────────── */
    --kendo-color-subtle: var(--clr-muted); /* #777777 */
    --kendo-color-on-app-surface: var(--clr-text); /* #111111 */
    /* ─────────────────────────────────────────────
       LIGHT / DARK VARIANTS  (neutral scales)
       ───────────────────────────────────────────── */
    --kendo-color-light: var(--clr-bg); /* #f5f5f5 */
    --kendo-color-light-hover: #ebebeb;
    --kendo-color-light-active: var(--clr-border); /* #d9d9d9 */
    --kendo-color-light-emphasis: var(--clr-border); /* #d9d9d9 */
    --kendo-color-light-on-subtle: var(--clr-text); /* #111111 */
    --kendo-color-on-light: var(--clr-black); /* #000000 */
    --kendo-color-light-on-surface: var(--clr-border); /* #d9d9d9 */

    --kendo-color-dark: var(--clr-text); /* #111111 */
    --kendo-color-dark-hover: #2a2a2a;
    --kendo-color-dark-active: var(--clr-black); /* #000000 */
    --kendo-color-dark-emphasis: var(--clr-muted); /* #777777 */
    --kendo-color-dark-on-subtle: var(--clr-text); /* #111111 */
    --kendo-color-on-dark: var(--clr-white); /* #ffffff */
    --kendo-color-dark-on-surface: var(--clr-black); /* #000000 */

    --kendo-color-inverse: var(--clr-text); /* #111111 */
    --kendo-color-inverse-hover: #2a2a2a;
    --kendo-color-inverse-active: var(--clr-black); /* #000000 */
    --kendo-color-inverse-emphasis: var(--clr-muted); /* #777777 */
    --kendo-color-inverse-on-subtle: var(--clr-text); /* #111111 */
    --kendo-color-on-inverse: var(--clr-white); /* #ffffff */
    --kendo-color-inverse-on-surface: var(--clr-black); /* #000000 */
    /* ─────────────────────────────────────────────
       MARQUEE / SELECTION (uses primary)
       ───────────────────────────────────────────── */
    --kendo-marquee-bg: var(--clr-cyan-a20);
    --kendo-marquee-border: var(--clr-border);
    --kendo-marquee-text: var(--clr-white);
    --kendo-text-selection-bg: var(--clr-cyan-a20);
    /* ─────────────────────────────────────────────
       TYPOGRAPHY  →  project fonts
       ───────────────────────────────────────────── */
    --kendo-font-family: var(--font-sans); /* 'DM Sans', 'Segoe UI', system-ui, sans-serif */
    --kendo-font-family-monospace: var(--font-mono); /* 'Courier New', Courier, monospace */
    /* ─────────────────────────────────────────────
       BORDER RADIUS  →  project radius tokens
       ───────────────────────────────────────────── */
    --kendo-border-radius-sm: var(--radius-sm); /* 4px  */
    --kendo-border-radius-md: var(--radius-md); /* 8px  */
    --kendo-border-radius-lg: var(--radius-lg); /* 12px */
    /* ─────────────────────────────────────────────
       TRANSITIONS  →  project timing tokens
       ───────────────────────────────────────────── */
    --kendo-transition: var(--t-med) var(--ease); /* 240ms cubic-bezier(.4,0,.2,1) */
}


/* ═══════════════════════════════════════════════════════
   COMPONENT-LEVEL OVERRIDES
   Fine-grained tweaks where Kendo hardcodes colours that
   the variable map above cannot fully reach.
   ═══════════════════════════════════════════════════════ */

/* ── Buttons ── */
.k-button-solid-primary {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
    color: var(--clr-white);
}

    .k-button-solid-primary:hover,
    .k-button-solid-primary.k-hover {
        background-color: var(--clr-cyan-dark);
        border-color: var(--clr-cyan-dark);
    }

    .k-button-solid-primary:active,
    .k-button-solid-primary.k-active {
        background-color: var(--clr-cyan-dark);
        border-color: var(--clr-cyan-dark);
    }

    .k-button-solid-primary:focus,
    .k-button-solid-primary.k-focus {
        box-shadow: 0 0 0 3px var(--clr-cyan-a30);
    }

.k-button-outline-primary {
    color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

    .k-button-outline-primary:hover,
    .k-button-outline-primary.k-hover {
        background-color: var(--clr-cyan-pale);
        border-color: var(--clr-cyan-dark);
        color: var(--clr-cyan-dark);
    }

.k-button-flat-primary {
    color: var(--clr-cyan);
}

    .k-button-flat-primary:hover,
    .k-button-flat-primary.k-hover {
        background-color: var(--clr-cyan-a08);
    }

/* ── Links / anchor text ── */
.k-link,
a.k-link {
    color: var(--clr-cyan);
}

    .k-link:hover,
    a.k-link:hover {
        color: var(--clr-cyan-dark);
    }

/* ── Grid ── */
.k-grid th,
.k-grid .k-header {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    border-color: var(--clr-border);
    font-family: var(--font-sans);
}

.k-grid td {
    border-color: var(--clr-border);
    color: var(--clr-text);
    font-family: var(--font-sans);
}

.k-grid tr:hover td,
.k-grid tr.k-hover td {
    background-color: var(--clr-cyan-a08);
}

.k-grid tr.k-selected td,
.k-grid tr.k-state-selected td {
    background-color: var(--clr-cyan-a14);
    color: var(--clr-text);
}

.k-grid .k-alt {
    background-color: var(--clr-black-a04);
}

.k-grid-header,
.k-grid-footer {
    border-color: var(--clr-border);
}

/* ── Pager ── */
.k-pager-wrap .k-link,
.k-pager-wrap .k-pager-nav {
    color: var(--clr-text);
}

    .k-pager-wrap .k-link:hover,
    .k-pager-wrap .k-pager-nav:hover {
        background-color: var(--clr-cyan-a08);
        color: var(--clr-cyan);
    }

    .k-pager-wrap .k-link.k-state-selected,
    .k-pager-wrap .k-link.k-selected {
        background-color: var(--clr-cyan);
        color: var(--clr-white);
        border-color: var(--clr-cyan);
    }

/* ── Inputs (TextBox, NumericTextBox, DatePicker…) ── */
.k-input,
.k-textbox,
.k-numerictextbox .k-input,
.k-datepicker .k-input,
.k-timepicker .k-input,
.k-combobox .k-input,
.k-dropdownlist,
.k-multiselect .k-input-inner {
    border-color: var(--clr-border);
    color: var(--clr-text);
    background: var(--clr-surface);
    font-family: var(--font-sans);
    border-radius: var(--radius-sm);
}

    .k-input:focus,
    .k-input.k-focus,
    .k-textbox:focus,
    .k-state-focused .k-input {
        border-color: var(--clr-cyan);
        box-shadow: 0 0 0 2px var(--clr-cyan-a15);
    }

    .k-input.k-invalid,
    .k-input.k-state-invalid {
        border-color: var(--clr-danger);
        box-shadow: 0 0 0 2px var(--clr-danger-a08);
    }

/* ── Checkbox & Radio ── */
.k-checkbox:checked,
.k-checkbox.k-checked {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

.k-checkbox:focus,
.k-checkbox.k-focus {
    box-shadow: 0 0 0 2px var(--clr-cyan-a20);
}

.k-radio:checked,
.k-radio.k-checked {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

.k-radio:focus,
.k-radio.k-focus {
    box-shadow: 0 0 0 2px var(--clr-cyan-a20);
}

/* ── Switch ── */
.k-switch-on .k-switch-track {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

.k-switch-off .k-switch-track {
    background-color: var(--clr-subtle);
    border-color: var(--clr-subtle);
}

/* ── Slider ── */
.k-slider .k-slider-selection {
    background-color: var(--clr-cyan);
}

.k-slider .k-draghandle {
    border-color: var(--clr-cyan);
    background-color: var(--clr-surface);
}

    .k-slider .k-draghandle:hover {
        background-color: var(--clr-cyan);
    }

/* ── Progress bar ── */
.k-progressbar .k-selected {
    background-color: var(--clr-cyan);
    color: var(--clr-white);
}

/* ── Tabs (TabStrip) ── */
.k-tabstrip .k-item.k-active,
.k-tabstrip .k-item.k-state-active {
    border-bottom-color: var(--clr-cyan);
    color: var(--clr-cyan);
}

.k-tabstrip .k-link:hover {
    color: var(--clr-cyan);
}

/* ── Panel bar ── */
.k-panelbar > .k-item > .k-link.k-selected,
.k-panelbar > .k-item > .k-link.k-state-selected {
    background-color: var(--clr-cyan);
    color: var(--clr-white);
}

.k-panelbar > .k-item > .k-link:hover {
    background-color: var(--clr-cyan-a08);
    color: var(--clr-cyan);
}

/* ── TreeView ── */
.k-treeview .k-item.k-selected > .k-link,
.k-treeview .k-item.k-state-selected > .k-link {
    background-color: var(--clr-cyan-a12);
    color: var(--clr-cyan-dark);
}

.k-treeview .k-link:hover {
    background-color: var(--clr-cyan-a08);
    color: var(--clr-cyan);
}

/* ── Popup / Dropdowns ── */
.k-popup,
.k-list-container {
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
    box-shadow: 0 4px 16px var(--clr-black-a07);
}

.k-list .k-item:hover,
.k-list .k-item.k-hover {
    background-color: var(--clr-cyan-a08);
    color: var(--clr-cyan-dark);
}

.k-list .k-item.k-selected,
.k-list .k-item.k-state-selected {
    background-color: var(--clr-cyan);
    color: var(--clr-white);
}

/* ── Menu ── */
.k-menu .k-item.k-active > .k-link,
.k-menu .k-item.k-state-active > .k-link {
    background-color: var(--clr-cyan);
    color: var(--clr-white);
}

.k-menu .k-link:hover {
    background-color: var(--clr-cyan-a08);
    color: var(--clr-cyan);
}

/* ── Window / Dialog ── */
.k-window-titlebar,
.k-dialog-titlebar {
    background-color: var(--clr-cyan);
    color: var(--clr-white);
    border-color: var(--clr-cyan-dark);
}

.k-window,
.k-dialog {
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px var(--clr-black-a07);
}

/* ── Notification ── */
.k-notification-success {
    background-color: var(--clr-green-pale);
    border-color: var(--clr-green);
    color: var(--clr-green-text);
}

.k-notification-warning {
    background-color: var(--clr-warning-a07);
    border-color: var(--clr-warning);
    color: var(--clr-warning-text);
}

.k-notification-error {
    background-color: var(--clr-danger-a08);
    border-color: var(--clr-danger);
    color: var(--clr-danger-text);
}

.k-notification-info {
    background-color: var(--clr-cyan-pale);
    border-color: var(--clr-cyan);
    color: var(--clr-cyan-text);
}

/* ── Tooltip ── */
.k-tooltip {
    background-color: var(--clr-text);
    color: var(--clr-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
}

.k-tooltip-callout {
    border-color: transparent transparent var(--clr-text) transparent;
}

/* ── Loader / Spinner ── */
.k-loader-primary .k-loader-segment,
.k-loading-color {
    color: var(--clr-cyan);
}

/* ── Chip ── */
.k-chip-solid-primary {
    background-color: var(--clr-cyan-a12);
    color: var(--clr-cyan-dark);
    border-color: var(--clr-cyan-a30);
}

.k-chip-solid-success {
    background-color: var(--clr-green-pale);
    color: var(--clr-green-text);
    border-color: var(--clr-green-a35);
}

.k-chip-solid-error {
    background-color: var(--clr-danger-a08);
    color: var(--clr-danger-text);
    border-color: var(--clr-danger-a20);
}

.k-chip-solid-warning {
    background-color: var(--clr-warning-a08);
    color: var(--clr-warning-text);
    border-color: var(--clr-warning-a10);
}

/* ── Calendar ── */
.k-calendar .k-today .k-link,
.k-calendar .k-nav-today {
    color: var(--clr-cyan);
}

.k-calendar .k-selected .k-link {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
    color: var(--clr-white);
}

.k-calendar .k-link:hover {
    background-color: var(--clr-cyan-a08);
    border-color: var(--clr-cyan-a20);
    color: var(--clr-cyan-dark);
}

/* ── Scheduler ── */
.k-scheduler-toolbar,
.k-scheduler-footer {
    background-color: var(--clr-bg);
    border-color: var(--clr-border);
}

.k-scheduler .k-today {
    background-color: var(--clr-cyan-a08);
}

.k-event {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan-dark);
    color: var(--clr-white);
}

/* ── Upload ── */
.k-upload .k-upload-button {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
    color: var(--clr-white);
}

    .k-upload .k-upload-button:hover {
        background-color: var(--clr-cyan-dark);
        border-color: var(--clr-cyan-dark);
    }

/* ── Breadcrumb ── */
.k-breadcrumb-item .k-link:hover {
    color: var(--clr-cyan);
}

.k-breadcrumb-item.k-current .k-link {
    color: var(--clr-muted);
}

/* ── Stepper ── */
.k-step-done .k-step-indicator,
.k-step-current .k-step-indicator {
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
    color: var(--clr-white);
}

.k-step-error .k-step-indicator {
    background-color: var(--clr-danger);
    border-color: var(--clr-danger);
    color: var(--clr-white);
}
/* FIX: Keep header & body aligned */
.k-grid .k-grid-content {
    overflow-y: scroll; /* always show scrollbar space */
}

    /* Optional: smoother look */
    .k-grid .k-grid-content::-webkit-scrollbar {
        width: 6px;
    }

    .k-grid .k-grid-content::-webkit-scrollbar-thumb {
        background: var(--clr-border);
        border-radius: 4px;
    }