/* ==========================================================================
   Kendo UI Theme Overrides for AIRDEX Dashboard
   Telerik UI for ASP.NET Core
   
   Note: Load this AFTER the base Kendo theme (e.g., kendo.default-main.min.css)
   and AFTER airdex.css to inherit CSS custom properties.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Kendo CSS Variable Overrides
   -------------------------------------------------------------------------- */

:root {
    /* Primary colors */
    --kendo-color-primary: var(--value-color);
    --kendo-color-primary-hover: var(--label-color);
    --kendo-color-primary-active: var(--label-color);
    --kendo-color-primary-focus: var(--value-color);
    --kendo-color-primary-emphasis: var(--icon-bg);
    --kendo-color-primary-subtle: var(--icon-bg);
    --kendo-color-primary-subtle-hover: var(--icon-bg-active);
    --kendo-color-primary-subtle-active: var(--icon-bg-active);
    --kendo-color-on-primary: var(--bg-page);
    --kendo-color-primary-contrast: var(--bg-page);
    /* Base/surface colors */
    --kendo-color-base: var(--bg-card);
    --kendo-color-base-hover: var(--hover-bg);
    --kendo-color-base-active: var(--icon-bg-active);
    --kendo-color-base-emphasis: var(--icon-bg);
    --kendo-color-base-subtle: var(--bg-header);
    --kendo-color-on-base: var(--subtext-color);
    /* Surface colors */
    --kendo-color-surface: var(--bg-card);
    --kendo-color-surface-alt: var(--bg-header);
    --kendo-color-on-surface: var(--subtext-color);
    /* App colors */
    --kendo-color-app-surface: var(--bg-card);
    --kendo-color-on-app-surface: var(--subtext-color);
    /* Border colors */
    --kendo-color-border: var(--border-color);
    --kendo-color-border-alt: var(--border-color);
    /* Text colors */
    --kendo-color-subtle: var(--subtext-color);
    --kendo-color-body: var(--subtext-color);
    /* Component-specific */
    --kendo-component-bg: var(--bg-card);
    --kendo-component-text: var(--subtext-color);
    --kendo-component-border: var(--border-color);
    /* Button colors */
    --kendo-button-bg: var(--icon-bg);
    --kendo-button-text: var(--icon-color);
    --kendo-button-border: var(--border-color);
    --kendo-button-hover-bg: var(--icon-bg-active);
    --kendo-button-hover-text: var(--value-color);
    --kendo-button-active-bg: var(--icon-bg-active);
    /* Input colors */
    --kendo-input-bg: var(--bg-card);
    --kendo-input-text: var(--subtext-color);
    --kendo-input-border: var(--border-color);
    --kendo-input-hover-border: var(--icon-color);
    --kendo-input-focus-border: var(--value-color);
    --kendo-input-focus-shadow: 0 0 0 3px var(--icon-bg);
    /* Hover/focus states */
    --kendo-hover-bg: var(--hover-bg);
    --kendo-hover-text: var(--value-color);
    --kendo-hover-border: var(--icon-color);
    --kendo-selected-bg: var(--icon-bg-active);
    --kendo-selected-text: var(--value-color);
    --kendo-selected-border: var(--value-color);
    --kendo-focus-shadow: 0 0 0 3px var(--icon-bg);
    /* Disabled state */
    --kendo-disabled-bg: var(--bg-header);
    --kendo-disabled-text: var(--subtext-color);
    --kendo-disabled-border: var(--border-color);
}

    :root.light {
        --kendo-color-on-primary: #ffffff;
        --kendo-color-primary-contrast: #ffffff;
    }
/* --------------------------------------------------------------------------
   Kendo Grid - Base Container
   -------------------------------------------------------------------------- */

.k-grid {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--subtext-color);
    font-family: inherit;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Grid Header
   -------------------------------------------------------------------------- */

.k-grid-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.k-grid-header-wrap {
    border: none;
}

.k-grid .k-table-thead {
    background: transparent;
}

.k-grid .k-table-th {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--label-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 16px 12px;
}

    .k-grid .k-table-th:first-child {
        border-left: 3px solid var(--accent-bar);
    }

    .k-grid .k-table-th .k-cell-inner {
        margin: 0;
        padding: 0;
    }

    .k-grid .k-table-th .k-link {
        color: var(--label-color);
        padding: 0;
    }

        .k-grid .k-table-th .k-link:hover {
            color: var(--value-color);
        }

    /* Sort indicators */
    .k-grid .k-table-th .k-sort-icon,
    .k-grid .k-table-th .k-i-sort-asc-small,
    .k-grid .k-table-th .k-i-sort-desc-small {
        color: var(--icon-color);
    }

/* Column menu */
.k-grid .k-grid-header-menu {
    color: var(--icon-color);
}

    .k-grid .k-grid-header-menu:hover {
        background: var(--hover-bg);
        color: var(--value-color);
    }

/* --------------------------------------------------------------------------
   Grid Content / Body
   -------------------------------------------------------------------------- */

.k-grid-content {
    background: transparent;
}

.k-grid .k-table-tbody {
    background: transparent;
}

.k-grid .k-table-tr {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

    .k-grid .k-table-tr:hover {
        background: var(--hover-bg);
    }

.k-grid .k-table-alt-row {
    background: rgba(0, 0, 0, 0.15);
}

    .k-grid .k-table-alt-row:hover {
        background: var(--hover-bg);
    }

.k-grid .k-table-td {
    border: none;
    color: var(--subtext-color);
    padding: 14px 12px;
    vertical-align: middle;
}

/* Selected rows */
.k-grid .k-table-tr.k-selected,
.k-grid .k-table-tr.k-selected > .k-table-td {
    background: var(--icon-bg-active);
    color: var(--value-color);
}

    .k-grid .k-table-tr.k-selected:hover {
        background: var(--icon-bg-active);
    }

/* --------------------------------------------------------------------------
   Hierarchy / Expand-Collapse
   -------------------------------------------------------------------------- */

.k-grid .k-hierarchy-cell {
    padding: 14px 8px 14px 16px;
}

    .k-grid .k-hierarchy-cell .k-icon,
    .k-grid .k-hierarchy-cell .k-svg-icon {
        color: var(--icon-color);
        transition: color 0.15s ease, transform 0.15s ease;
    }

        .k-grid .k-hierarchy-cell .k-icon:hover,
        .k-grid .k-hierarchy-cell .k-svg-icon:hover {
            color: var(--value-color);
        }

.k-grid .k-i-expand::before,
.k-grid .k-svg-i-caret-alt-right {
    color: var(--icon-color);
}

.k-grid .k-i-collapse::before,
.k-grid .k-svg-i-caret-alt-down {
    color: var(--value-color);
}

/* Detail row */
.k-grid .k-detail-row {
    background: rgba(0, 0, 0, 0.2);
}

    .k-grid .k-detail-row:hover {
        background: rgba(0, 0, 0, 0.2);
    }

.k-grid .k-detail-cell {
    border: none;
    padding: 16px 16px 16px 48px;
}

/* --------------------------------------------------------------------------
   Special Cell Content Styling
   -------------------------------------------------------------------------- */

/* Client/Primary name column */
.k-grid .cell-client,
.k-grid .cell-primary {
    color: #ffffff;
    font-weight: 500;
}

/* Email links */
.k-grid .cell-email,
.k-grid .cell-email a,
.k-grid a[href^="mailto:"] {
    color: var(--value-color);
    text-decoration: none;
}

    .k-grid .cell-email:hover,
    .k-grid .cell-email a:hover,
    .k-grid a[href^="mailto:"]:hover {
        color: var(--label-color);
        text-decoration: underline;
    }

/* Muted/secondary text within cells */
.k-grid .cell-muted,
.k-grid .text-muted {
    color: var(--subtext-color);
}

/* --------------------------------------------------------------------------
   Service Tags / Badges
   -------------------------------------------------------------------------- */

.k-grid .service-tag,
.k-grid .badge-outline,
.service-tag,
.badge-outline {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--value-color);
    background: transparent;
    border: 1px solid var(--value-color);
    border-radius: 4px;
    transition: all 0.15s ease;
}

    .k-grid .service-tag:hover,
    .k-grid .badge-outline:hover,
    .service-tag:hover,
    .badge-outline:hover {
        background: var(--icon-bg);
        color: var(--label-color);
        border-color: var(--label-color);
    }

/* --------------------------------------------------------------------------
   Pager / Pagination
   -------------------------------------------------------------------------- */

.k-grid .k-pager {
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color);
    color: var(--subtext-color);
    padding: 12px 16px;
}

.k-grid .k-pager-nav,
.k-pager .k-button {
    background: var(--icon-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--icon-color);
    transition: all 0.15s ease;
}

    .k-grid .k-pager-nav:hover,
    .k-pager .k-button:hover {
        background: var(--icon-bg-active);
        border-color: var(--value-color);
        color: var(--value-color);
    }

    .k-grid .k-pager-nav.k-disabled,
    .k-pager .k-button.k-disabled {
        background: transparent;
        border-color: var(--border-color);
        color: var(--subtext-color);
        opacity: 0.5;
    }

.k-pager .k-pager-numbers .k-button {
    background: transparent;
    border: none;
}

    .k-pager .k-pager-numbers .k-button.k-selected {
        background: var(--icon-bg-active);
        border: 1px solid var(--value-color);
        color: var(--value-color);
    }

.k-pager .k-pager-info {
    color: var(--subtext-color);
}

.k-pager .k-pager-sizes .k-dropdownlist {
    background: var(--icon-bg);
    border: 1px solid var(--border-color);
    color: var(--icon-color);
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.k-grid .k-toolbar,
.k-grid-toolbar {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

/* --------------------------------------------------------------------------
   Grouping
   -------------------------------------------------------------------------- */

.k-grid .k-grouping-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--subtext-color);
    padding: 12px 16px;
}

    .k-grid .k-grouping-header .k-chip {
        background: var(--icon-bg);
        border: 1px solid var(--border-color);
        color: var(--label-color);
    }

.k-grid .k-group-indicator {
    background: var(--icon-bg);
    border: 1px solid var(--border-color);
    color: var(--label-color);
}

.k-grid .k-grouping-row td,
.k-grid .k-grouping-row .k-table-td {
    background: rgba(0, 180, 180, 0.08);
    color: var(--label-color);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Filtering
   -------------------------------------------------------------------------- */

.k-grid .k-filtercell {
    padding: 8px 12px;
}

    .k-grid .k-filtercell .k-input,
    .k-grid .k-filtercell .k-picker {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--subtext-color);
    }

        .k-grid .k-filtercell .k-input:focus,
        .k-grid .k-filtercell .k-picker:focus {
            border-color: var(--value-color);
            box-shadow: 0 0 0 2px var(--icon-bg);
        }

/* Filter menu popup */
.k-filter-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

    .k-filter-menu .k-input,
    .k-filter-menu .k-picker {
        background: var(--bg-header);
        border: 1px solid var(--border-color);
        color: var(--subtext-color);
    }

/* --------------------------------------------------------------------------
   Loading Indicator
   -------------------------------------------------------------------------- */

.k-grid .k-loading-mask {
    background: rgba(5, 10, 15, 0.7);
}

.k-grid .k-loading-image,
.k-loading-image {
    border-color: var(--value-color) transparent transparent transparent;
}

/* --------------------------------------------------------------------------
   Empty Grid / No Records
   -------------------------------------------------------------------------- */

.k-grid .k-grid-norecords {
    background: transparent;
    color: var(--subtext-color);
    padding: 48px 16px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Scrollbar Styling (Grid-specific)
   -------------------------------------------------------------------------- */

.k-grid ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.k-grid ::-webkit-scrollbar-track {
    background: transparent;
}

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

    .k-grid ::-webkit-scrollbar-thumb:hover {
        background: var(--icon-bg-active);
    }

/* --------------------------------------------------------------------------
   Column Resizing
   -------------------------------------------------------------------------- */

.k-grid .k-resize-handle,
.k-grid .k-resize-handle:hover {
    background: var(--value-color);
}

/* --------------------------------------------------------------------------
   Buttons within Grid
   -------------------------------------------------------------------------- */

.k-grid .k-button {
    background: var(--icon-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--icon-color);
    transition: all 0.15s ease;
}

    .k-grid .k-button:hover {
        background: var(--icon-bg-active);
        border-color: var(--value-color);
        color: var(--value-color);
    }

    .k-grid .k-button.k-primary {
        background: var(--value-color);
        border-color: var(--value-color);
        color: var(--bg-page);
    }

        .k-grid .k-button.k-primary:hover {
            background: var(--label-color);
            border-color: var(--label-color);
        }

/* --------------------------------------------------------------------------
   Editing Mode
   -------------------------------------------------------------------------- */

.k-grid .k-edit-cell,
.k-grid .k-table-tr.k-grid-edit-row {
    background: var(--hover-bg);
}

    .k-grid .k-edit-cell .k-input,
    .k-grid .k-edit-cell .k-picker,
    .k-grid .k-grid-edit-row .k-input,
    .k-grid .k-grid-edit-row .k-picker {
        background: var(--bg-card);
        border: 1px solid var(--value-color);
        color: var(--subtext-color);
    }

/* --------------------------------------------------------------------------
   Light Mode Overrides
   -------------------------------------------------------------------------- */

:root.light .k-grid .k-table-alt-row {
    background: rgba(0, 0, 0, 0.02);
}

:root.light .k-grid .k-detail-row {
    background: rgba(0, 0, 0, 0.03);
}

:root.light .k-grid .cell-client,
:root.light .k-grid .cell-primary {
    color: #1a202c;
}

:root.light .k-grid .k-loading-mask {
    background: rgba(200, 220, 232, 0.7);
}

/* ==========================================================================
   Additional Kendo UI Theme Overrides for AIRDEX Dashboard
   
   Add these rules to your airdex-kendo.css file
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kendo Buttons
   -------------------------------------------------------------------------- */

.k-button {
    background: var(--icon-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--icon-color);
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

    .k-button:hover,
    .k-button:focus {
        background: var(--icon-bg-active);
        border-color: var(--value-color);
        color: var(--value-color);
    }

    .k-button:active,
    .k-button.k-selected {
        background: var(--icon-bg-active);
        border-color: var(--value-color);
        color: var(--value-color);
    }

    /* Primary Button */
    .k-button-solid-primary,
    .k-button.k-primary {
        background: var(--value-color);
        border-color: var(--value-color);
        color: var(--bg-page);
    }

        .k-button-solid-primary:hover,
        .k-button-solid-primary:focus,
        .k-button.k-primary:hover,
        .k-button.k-primary:focus {
            background: var(--label-color);
            border-color: var(--label-color);
            color: var(--bg-page);
        }

/* Secondary Button */
.k-button-solid-secondary {
    background: var(--icon-bg);
    border-color: var(--border-color);
    color: var(--subtext-color);
}

    .k-button-solid-secondary:hover,
    .k-button-solid-secondary:focus {
        background: var(--hover-bg);
        border-color: var(--icon-color);
        color: var(--icon-color);
    }

/* Base/Tertiary Button */
.k-button-solid-base,
.k-button-solid-tertiary {
    background: var(--icon-bg);
    border-color: var(--border-color);
    color: var(--subtext-color);
}

    .k-button-solid-base:hover,
    .k-button-solid-base:focus,
    .k-button-solid-tertiary:hover,
    .k-button-solid-tertiary:focus {
        background: var(--hover-bg);
        border-color: var(--icon-color);
        color: var(--icon-color);
    }

/* Outline Buttons */
.k-button-outline,
.k-button-outline-primary {
    background: transparent;
    border-color: var(--value-color);
    color: var(--value-color);
}

    .k-button-outline:hover,
    .k-button-outline-primary:hover {
        background: var(--value-color);
        border-color: var(--value-color);
        color: var(--bg-page);
    }

.k-button-outline-secondary {
    background: transparent;
    border-color: var(--border-color);
    color: var(--subtext-color);
}

    .k-button-outline-secondary:hover {
        background: var(--icon-bg);
        border-color: var(--icon-color);
        color: var(--icon-color);
    }

/* Flat Buttons */
.k-button-flat,
.k-button-flat-primary {
    background: transparent;
    border-color: transparent;
    color: var(--value-color);
}

    .k-button-flat:hover,
    .k-button-flat-primary:hover {
        background: var(--hover-bg);
        color: var(--label-color);
    }

.k-button-flat-secondary {
    color: var(--subtext-color);
}

    .k-button-flat-secondary:hover {
        background: var(--hover-bg);
        color: var(--icon-color);
    }

/* Button Icons */
.k-button .k-icon,
.k-button .k-svg-icon,
.k-button .k-button-icon {
    color: inherit;
}

/* Disabled Buttons */
.k-button:disabled,
.k-button.k-disabled {
    background: var(--icon-bg);
    border-color: var(--border-color);
    color: var(--subtext-color);
    opacity: 0.5;
    pointer-events: none;
}

/* Button Group */
.k-button-group .k-button {
    border-radius: 0;
}

    .k-button-group .k-button:first-child {
        border-radius: 6px 0 0 6px;
    }

    .k-button-group .k-button:last-child {
        border-radius: 0 6px 6px 0;
    }

    .k-button-group .k-button + .k-button {
        margin-left: -1px;
    }

/* --------------------------------------------------------------------------
   Kendo DropDownList / ComboBox / AutoComplete
   -------------------------------------------------------------------------- */

.k-dropdownlist,
.k-combobox,
.k-autocomplete,
.k-dropdown,
.k-picker {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--subtext-color);
    transition: all 0.2s ease;
}

    .k-dropdownlist:hover,
    .k-combobox:hover,
    .k-autocomplete:hover,
    .k-dropdown:hover,
    .k-picker:hover {
        border-color: var(--icon-color);
    }

    .k-dropdownlist:focus,
    .k-dropdownlist.k-focus,
    .k-combobox:focus,
    .k-combobox.k-focus,
    .k-autocomplete:focus,
    .k-autocomplete.k-focus,
    .k-dropdown.k-focus,
    .k-picker.k-focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
        outline: none;
    }

    .k-dropdownlist .k-input-inner,
    .k-combobox .k-input-inner,
    .k-autocomplete .k-input-inner,
    .k-picker .k-input-inner {
        background: transparent;
        color: var(--subtext-color);
    }

    .k-dropdownlist .k-input-value-text,
    .k-picker .k-input-value-text {
        color: var(--subtext-color);
    }

    /* Dropdown Arrow Button */
    .k-dropdownlist .k-input-button,
    .k-combobox .k-input-button,
    .k-picker .k-input-button,
    .k-select {
        background: transparent;
        border: none;
        color: var(--icon-color);
    }

        .k-dropdownlist .k-input-button:hover,
        .k-combobox .k-input-button:hover,
        .k-picker .k-input-button:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

/* Dropdown Popup / List */
.k-popup,
.k-animation-container .k-popup,
.k-list-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.k-list {
    background: transparent;
}

    .k-list-item,
    .k-list .k-item {
        background: transparent;
        color: var(--subtext-color);
        padding: 10px 14px;
        transition: all 0.15s ease;
    }

        .k-list-item:hover,
        .k-list .k-item:hover,
        .k-list-item.k-hover,
        .k-list .k-item.k-hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

        .k-list-item.k-selected,
        .k-list .k-item.k-selected,
        .k-list-item.k-focus.k-selected,
        .k-list .k-item.k-focus.k-selected {
            background: var(--icon-bg-active);
            color: var(--value-color);
        }

        .k-list-item.k-focus,
        .k-list .k-item.k-focus {
            background: var(--hover-bg);
            box-shadow: none;
        }

    /* List Group Header */
    .k-list-group-item,
    .k-list .k-group-header {
        background: var(--bg-header);
        color: var(--label-color);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding: 8px 14px;
    }

    /* No Data Template */
    .k-list .k-nodata,
    .k-nodata {
        color: var(--subtext-color);
        padding: 16px;
    }

/* Optionlabel / Placeholder */
.k-list-optionlabel {
    color: var(--subtext-color);
    font-style: italic;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Kendo TabStrip
   -------------------------------------------------------------------------- */

.k-tabstrip {
    background: transparent;
    border: none;
}

.k-tabstrip-items-wrapper {
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.k-tabstrip-items {
    background: transparent;
    border: none;
    gap: 0;
}

    .k-tabstrip-items .k-item,
    .k-tabstrip-items .k-tabstrip-item {
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: var(--subtext-color);
        margin: 0;
        padding: 0;
        transition: all 0.15s ease;
    }

        .k-tabstrip-items .k-item .k-link,
        .k-tabstrip-items .k-tabstrip-item .k-link {
            color: inherit;
            padding: 12px 20px;
        }

        .k-tabstrip-items .k-item:hover,
        .k-tabstrip-items .k-tabstrip-item:hover {
            background: transparent;
            border-bottom-color: var(--icon-color);
            color: var(--icon-color);
        }

        .k-tabstrip-items .k-item.k-active,
        .k-tabstrip-items .k-item.k-selected,
        .k-tabstrip-items .k-tabstrip-item.k-active,
        .k-tabstrip-items .k-tabstrip-item.k-selected {
            background: transparent;
            border-bottom-color: var(--value-color);
            color: var(--value-color);
        }

            .k-tabstrip-items .k-item.k-active .k-link,
            .k-tabstrip-items .k-item.k-selected .k-link,
            .k-tabstrip-items .k-tabstrip-item.k-active .k-link,
            .k-tabstrip-items .k-tabstrip-item.k-selected .k-link {
                color: var(--value-color);
            }

/* Tab Content */
.k-tabstrip-content,
.k-tabstrip > .k-content {
    background: transparent;
    border: none;
    color: var(--subtext-color);
    padding: 24px 0;
}

/* Tab with Icons */
.k-tabstrip-items .k-item .k-icon,
.k-tabstrip-items .k-item .k-svg-icon {
    color: inherit;
    margin-right: 8px;
}

/* Scrollable Tabs */
.k-tabstrip-prev,
.k-tabstrip-next {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--icon-color);
}

    .k-tabstrip-prev:hover,
    .k-tabstrip-next:hover {
        background: var(--icon-bg-active);
        color: var(--value-color);
    }

/* Vertical TabStrip */
.k-tabstrip-left .k-tabstrip-items-wrapper,
.k-tabstrip-right .k-tabstrip-items-wrapper {
    border-bottom: none;
}

.k-tabstrip-left .k-tabstrip-items .k-item,
.k-tabstrip-left .k-tabstrip-items .k-tabstrip-item {
    border-bottom: none;
    border-left: 2px solid transparent;
}

    .k-tabstrip-left .k-tabstrip-items .k-item.k-active,
    .k-tabstrip-left .k-tabstrip-items .k-tabstrip-item.k-active {
        border-left-color: var(--value-color);
    }

.k-tabstrip-right .k-tabstrip-items .k-item,
.k-tabstrip-right .k-tabstrip-items .k-tabstrip-item {
    border-bottom: none;
    border-right: 2px solid transparent;
}

    .k-tabstrip-right .k-tabstrip-items .k-item.k-active,
    .k-tabstrip-right .k-tabstrip-items .k-tabstrip-item.k-active {
        border-right-color: var(--value-color);
    }

/* --------------------------------------------------------------------------
   Kendo TextBox / Input
   -------------------------------------------------------------------------- */

.k-input,
.k-textbox,
.k-textarea {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--subtext-color);
    transition: all 0.2s ease;
}

    .k-input:hover,
    .k-textbox:hover,
    .k-textarea:hover {
        border-color: var(--icon-color);
    }

    .k-input:focus,
    .k-input.k-focus,
    .k-textbox:focus,
    .k-textbox.k-focus,
    .k-textarea:focus,
    .k-textarea.k-focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
        outline: none;
    }

    .k-input .k-input-inner,
    .k-textbox .k-input-inner {
        background: transparent;
        color: var(--subtext-color);
    }

        .k-input::placeholder,
        .k-textbox::placeholder,
        .k-input .k-input-inner::placeholder {
            color: var(--subtext-color);
            opacity: 0.6;
        }

    /* Input with validation */
    .k-input.k-invalid,
    .k-textbox.k-invalid {
        border-color: #ef4444;
    }

    .k-input.k-valid,
    .k-textbox.k-valid {
        border-color: #10b981;
    }

/* --------------------------------------------------------------------------
   Kendo NumericTextBox
   -------------------------------------------------------------------------- */

.k-numerictextbox {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .k-numerictextbox:hover {
        border-color: var(--icon-color);
    }

    .k-numerictextbox.k-focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
    }

    .k-numerictextbox .k-input-inner {
        background: transparent;
        color: var(--subtext-color);
    }

    .k-numerictextbox .k-input-spinner .k-spinner-increase,
    .k-numerictextbox .k-input-spinner .k-spinner-decrease {
        background: transparent;
        border: none;
        color: var(--icon-color);
    }

        .k-numerictextbox .k-input-spinner .k-spinner-increase:hover,
        .k-numerictextbox .k-input-spinner .k-spinner-decrease:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

/* --------------------------------------------------------------------------
   Kendo DatePicker / TimePicker / DateTimePicker
   -------------------------------------------------------------------------- */

.k-datepicker,
.k-timepicker,
.k-datetimepicker {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .k-datepicker:hover,
    .k-timepicker:hover,
    .k-datetimepicker:hover {
        border-color: var(--icon-color);
    }

    .k-datepicker.k-focus,
    .k-timepicker.k-focus,
    .k-datetimepicker.k-focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
    }

    .k-datepicker .k-input-inner,
    .k-timepicker .k-input-inner,
    .k-datetimepicker .k-input-inner {
        background: transparent;
        color: var(--subtext-color);
    }

    .k-datepicker .k-input-button,
    .k-timepicker .k-input-button,
    .k-datetimepicker .k-input-button {
        background: transparent;
        border: none;
        color: var(--icon-color);
    }

        .k-datepicker .k-input-button:hover,
        .k-timepicker .k-input-button:hover,
        .k-datetimepicker .k-input-button:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

/* Calendar Popup */
.k-calendar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

    .k-calendar .k-header,
    .k-calendar .k-calendar-header {
        background: transparent;
        border: none;
        color: var(--value-color);
    }

    .k-calendar .k-nav-prev,
    .k-calendar .k-nav-next,
    .k-calendar .k-calendar-nav-prev,
    .k-calendar .k-calendar-nav-next {
        background: transparent;
        color: var(--icon-color);
    }

        .k-calendar .k-nav-prev:hover,
        .k-calendar .k-nav-next:hover,
        .k-calendar .k-calendar-nav-prev:hover,
        .k-calendar .k-calendar-nav-next:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

    .k-calendar .k-calendar-title,
    .k-calendar .k-title {
        color: var(--value-color);
    }

        .k-calendar .k-calendar-title:hover,
        .k-calendar .k-title:hover {
            background: var(--hover-bg);
        }

    .k-calendar .k-calendar-th,
    .k-calendar th {
        color: var(--label-color);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .k-calendar .k-calendar-td,
    .k-calendar td {
        color: var(--subtext-color);
    }

        .k-calendar .k-calendar-td:hover,
        .k-calendar td:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

    .k-calendar .k-selected,
    .k-calendar .k-selected .k-link {
        background: var(--value-color);
        color: var(--bg-page);
    }

    .k-calendar .k-today {
        color: var(--value-color);
        font-weight: 600;
    }

    .k-calendar .k-other-month {
        color: var(--subtext-color);
        opacity: 0.4;
    }

    .k-calendar .k-weekend {
        background: rgba(0, 0, 0, 0.1);
    }

/* --------------------------------------------------------------------------
   Kendo Checkbox / RadioButton
   -------------------------------------------------------------------------- */

.k-checkbox {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 4px;
}

    .k-checkbox:hover {
        border-color: var(--icon-color);
    }

    .k-checkbox:checked,
    .k-checkbox.k-checked {
        background: var(--value-color);
        border-color: var(--value-color);
    }

    .k-checkbox:focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
    }

.k-checkbox-label {
    color: var(--subtext-color);
}

.k-radio {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
}

    .k-radio:hover {
        border-color: var(--icon-color);
    }

    .k-radio:checked,
    .k-radio.k-checked {
        border-color: var(--value-color);
    }

        .k-radio:checked::before {
            background: var(--value-color);
        }

    .k-radio:focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
    }

.k-radio-label {
    color: var(--subtext-color);
}

/* --------------------------------------------------------------------------
   Kendo Switch
   -------------------------------------------------------------------------- */

.k-switch {
    background: var(--border-color);
    border-radius: 12px;
}

    .k-switch:hover {
        background: var(--icon-bg);
    }

    .k-switch.k-checked,
    .k-switch-on {
        background: var(--value-color);
    }

    .k-switch .k-switch-thumb,
    .k-switch-handle {
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .k-switch:focus {
        box-shadow: 0 0 0 3px var(--icon-bg);
    }

/* --------------------------------------------------------------------------
   Kendo Window / Dialog
   -------------------------------------------------------------------------- */

.k-window {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.k-window-titlebar,
.k-dialog-titlebar {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--value-color);
    padding: 16px 20px;
}

.k-window-title,
.k-dialog-title {
    color: var(--value-color);
    font-weight: 600;
}

.k-window-titlebar-actions .k-button,
.k-dialog-titlebar-actions .k-button {
    background: transparent;
    color: var(--icon-color);
}

    .k-window-titlebar-actions .k-button:hover,
    .k-dialog-titlebar-actions .k-button:hover {
        background: var(--hover-bg);
        color: var(--value-color);
    }

.k-window-content,
.k-dialog-content {
    background: transparent;
    color: var(--subtext-color);
    padding: 20px;
}

.k-window-actions,
.k-dialog-actions,
.k-dialog-buttongroup {
    background: transparent;
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Kendo Notification / Toast
   -------------------------------------------------------------------------- */

.k-notification {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--subtext-color);
}

.k-notification-info {
    background: var(--icon-bg);
    border-color: var(--value-color);
    color: var(--value-color);
}

.k-notification-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

.k-notification-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #f59e0b;
}

.k-notification-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* --------------------------------------------------------------------------
   Kendo ProgressBar
   -------------------------------------------------------------------------- */

.k-progressbar {
    background: var(--icon-bg);
    border: none;
    border-radius: 6px;
}

    .k-progressbar .k-selected,
    .k-progressbar .k-progress-status-wrap {
        background: var(--value-color);
        border-radius: 6px;
    }

    .k-progressbar .k-progress-status {
        color: var(--bg-page);
    }

/* --------------------------------------------------------------------------
   Kendo Tooltip
   -------------------------------------------------------------------------- */

.k-tooltip {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow);
    color: var(--subtext-color);
}

    .k-tooltip .k-callout {
        color: var(--bg-header);
    }

/* --------------------------------------------------------------------------
   Kendo Menu
   -------------------------------------------------------------------------- */

.k-menu {
    background: transparent;
    border: none;
}

    .k-menu > .k-item {
        color: var(--subtext-color);
    }

        .k-menu > .k-item:hover,
        .k-menu > .k-item.k-hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

        .k-menu > .k-item.k-selected {
            background: var(--icon-bg-active);
            color: var(--value-color);
        }

.k-menu-popup,
.k-menu-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

    .k-menu-popup .k-item,
    .k-menu-group .k-item {
        color: var(--subtext-color);
        padding: 10px 14px;
    }

        .k-menu-popup .k-item:hover,
        .k-menu-group .k-item:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

/* --------------------------------------------------------------------------
   Kendo Loader / Loading
   -------------------------------------------------------------------------- */

.k-loader {
    color: var(--value-color);
}

.k-loader-segment {
    background: var(--value-color);
}

.k-loader-canvas {
    color: var(--value-color);
}

/* --------------------------------------------------------------------------
   Light Mode Overrides
   -------------------------------------------------------------------------- */

:root.light .k-calendar .k-weekend {
    background: rgba(0, 0, 0, 0.02);
}

:root.light .k-switch .k-switch-thumb,
:root.light .k-switch-handle {
    background: #ffffff;
}

/* --------------------------------------------------------------------------
   Kendo DropDownTree
   -------------------------------------------------------------------------- */

.k-dropdowntree {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--subtext-color);
    transition: all 0.2s ease;
}

    .k-dropdowntree:hover {
        border-color: var(--icon-color);
    }

    .k-dropdowntree:focus,
    .k-dropdowntree.k-focus {
        border-color: var(--value-color);
        box-shadow: 0 0 0 3px var(--icon-bg);
        outline: none;
    }

    .k-dropdowntree .k-input-inner {
        background: transparent;
        color: var(--subtext-color);
    }

    .k-dropdowntree .k-input-value-text {
        color: var(--subtext-color);
    }

    .k-dropdowntree .k-input-button {
        background: transparent;
        border: none;
        color: var(--icon-color);
    }

        .k-dropdowntree .k-input-button:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

    /* Selected tags/chips in multi-select mode */
    .k-dropdowntree .k-chip,
    .k-dropdowntree .k-selected-tag {
        background: var(--icon-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--value-color);
    }

        .k-dropdowntree .k-chip .k-chip-remove-action,
        .k-dropdowntree .k-selected-tag .k-select {
            color: var(--icon-color);
        }

            .k-dropdowntree .k-chip .k-chip-remove-action:hover,
            .k-dropdowntree .k-selected-tag .k-select:hover {
                background: var(--hover-bg);
                color: var(--value-color);
            }

/* --------------------------------------------------------------------------
   Kendo TreeView (used in DropDownTree popup)
   -------------------------------------------------------------------------- */

.k-treeview {
    background: transparent;
    color: var(--subtext-color);
}

    .k-treeview .k-treeview-item,
    .k-treeview .k-item {
        color: var(--subtext-color);
    }

    .k-treeview .k-treeview-leaf,
    .k-treeview .k-in {
        background: transparent;
        border-radius: 6px;
        color: var(--subtext-color);
        padding: 8px 12px;
        transition: all 0.15s ease;
    }

        .k-treeview .k-treeview-leaf:hover,
        .k-treeview .k-in:hover,
        .k-treeview .k-treeview-leaf.k-hover,
        .k-treeview .k-in.k-hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

        .k-treeview .k-treeview-leaf.k-selected,
        .k-treeview .k-in.k-selected,
        .k-treeview .k-selected > .k-treeview-leaf,
        .k-treeview .k-selected > .k-in {
            background: var(--icon-bg-active);
            color: var(--value-color);
        }

        .k-treeview .k-treeview-leaf.k-focus,
        .k-treeview .k-in.k-focus {
            box-shadow: none;
        }

    /* Expand/Collapse icons */
    .k-treeview .k-treeview-toggle,
    .k-treeview .k-icon,
    .k-treeview .k-svg-icon {
        color: var(--icon-color);
    }

        .k-treeview .k-treeview-toggle:hover {
            background: var(--hover-bg);
            color: var(--value-color);
        }

    /* Checkbox styling within treeview */
    .k-treeview .k-checkbox {
        background: var(--bg-card);
        border: 2px solid var(--border-color);
        border-radius: 4px;
    }

        .k-treeview .k-checkbox:hover {
            border-color: var(--icon-color);
        }

        .k-treeview .k-checkbox:checked,
        .k-treeview .k-checkbox.k-checked {
            background: var(--value-color);
            border-color: var(--value-color);
        }

        .k-treeview .k-checkbox:indeterminate,
        .k-treeview .k-checkbox.k-indeterminate {
            background: var(--icon-bg);
            border-color: var(--value-color);
            color: var(--value-color);
        }

    /* Treeview lines/guides */
    .k-treeview .k-treeview-lines .k-treeview-item::before,
    .k-treeview .k-treeview-lines .k-treeview-item::after {
        border-color: var(--border-color);
    }

/* DropDownTree popup container */
.k-dropdowntree-popup {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

    /* Filter input in popup */
    .k-dropdowntree-popup .k-list-filter,
    .k-treeview-filter {
        background: transparent;
        border-bottom: 1px solid var(--border-color);
        padding: 12px;
    }

        .k-dropdowntree-popup .k-list-filter .k-input,
        .k-dropdowntree-popup .k-list-filter .k-textbox,
        .k-treeview-filter .k-input,
        .k-treeview-filter .k-textbox {
            background: var(--bg-header);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--subtext-color);
        }

            .k-dropdowntree-popup .k-list-filter .k-input:focus,
            .k-dropdowntree-popup .k-list-filter .k-textbox:focus,
            .k-treeview-filter .k-input:focus,
            .k-treeview-filter .k-textbox:focus {
                border-color: var(--value-color);
                box-shadow: 0 0 0 3px var(--icon-bg);
            }

    /* No data message */
    .k-dropdowntree-popup .k-nodata,
    .k-treeview .k-nodata {
        color: var(--subtext-color);
        padding: 16px;
        text-align: center;
    }

    /* Check All / Clear buttons in footer */
    .k-dropdowntree-popup .k-check-all,
    .k-dropdowntree-popup .k-footer {
        background: transparent;
        border-top: 1px solid var(--border-color);
        padding: 12px;
    }

        .k-dropdowntree-popup .k-check-all .k-checkbox-label {
            color: var(--subtext-color);
        }

/* --------------------------------------------------------------------------
   Kendo DropDown / ComboBox / DropDownTree - Minimum Width Fix
   -------------------------------------------------------------------------- */

.k-dropdownlist,
.k-combobox,
.k-dropdown,
.k-dropdowntree,
.k-picker {
    width: 100%;
    min-width: 200px;
}

/* When inside Bootstrap grid columns, ensure full width */
.col .k-dropdownlist,
.col .k-combobox,
.col .k-dropdown,
.col .k-dropdowntree,
.col .k-picker,
[class*="col-"] .k-dropdownlist,
[class*="col-"] .k-combobox,
[class*="col-"] .k-dropdown,
[class*="col-"] .k-dropdowntree,
[class*="col-"] .k-picker {
    width: 100%;
}

/* Form group wrapper should also enforce width */
.form-group .k-dropdownlist,
.form-group .k-combobox,
.form-group .k-dropdown,
.form-group .k-dropdowntree,
.form-group .k-picker {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Kendo Window / Dialog - Content Theming
   -------------------------------------------------------------------------- */

.k-window {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.k-window-titlebar,
.k-dialog-titlebar {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    color: var(--value-color);
    padding: 16px 20px;
}

.k-window-title,
.k-dialog-title {
    color: var(--value-color);
    font-weight: 600;
}

.k-window-titlebar-actions .k-button,
.k-dialog-titlebar-actions .k-button {
    background: transparent;
    border: none;
    color: var(--icon-color);
}

    .k-window-titlebar-actions .k-button:hover,
    .k-dialog-titlebar-actions .k-button:hover {
        background: var(--hover-bg);
        color: var(--value-color);
    }

.k-window-content,
.k-dialog-content {
    background: var(--bg-card);
    color: var(--subtext-color);
    padding: 20px;
}

.k-window-actions,
.k-dialog-actions,
.k-dialog-buttongroup {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Contract History Table (inside modal)
   -------------------------------------------------------------------------- */

.contract-history {
    background: var(--bg-card);
    color: var(--subtext-color);
    border-collapse: collapse;
    width: 100%;
}

    .contract-history thead th {
        color: var(--label-color);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding: 12px 8px;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
    }

.contract-history-row {
    border-bottom: 1px solid var(--border-color);
}

    .contract-history-row td {
        padding: 12px 8px;
        color: var(--subtext-color);
    }

    .contract-history-row:hover {
        background: var(--hover-bg);
    }

    .contract-history-row a {
        color: var(--value-color);
        text-decoration: none;
        transition: color 0.15s ease;
    }

        .contract-history-row a:hover {
            color: var(--label-color);
        }

/* Icon in title bar */
.k-window-title i,
.k-dialog-title i {
    color: var(--value-color);
}