/*
 * kendo-fleetgo-overrides.css
 * FleetGO Design System — Kendo UI Widget Color Overrides
 *
 * Pure CSS overrides — no LESS build required.
 * Targets visible Kendo widgets: grid header, toolbar, buttons,
 * pager, selected rows, and window title bar.
 *
 * Depends on: fleetgo-base.css (must load first, supplies --fg-* tokens)
 * Loaded via: _head.cshtml and _headnew.cshtml (after fleetgo-base.css)
 *
 * Source: FleetGO Design System — Phase 1, Kendo track (Option A)
 * Created: 2026-05-14
 */


/* =============================================================================
   1. KENDO GRID — Header
   ============================================================================= */


/* k-window-titlebar k-header

.k-grid-header,
.k-grid-header-wrap,
.k-grid th.k-header,
.k-grid-header th.k-header {
    background-color: var(--fg-secondary) !important;
    color: var(--fg-white) !important;
    border-color: var(--fg-shade-800) !important;
}

/* Sort icon inside header
.k-grid-header th.k-header .k-icon,
.k-grid-header th.k-header .k-link {
    color: var(--fg-white) !important;
}

/* Column menu button in header
.k-grid-header th.k-header .k-header-column-menu {
    color: var(--fg-white) !important;
} */


/* =============================================================================
   2. KENDO GRID — Toolbar
   ============================================================================= */

/* .k-grid .k-toolbar,
.k-grid-toolbar {
    background-color: var(--fg-shade-000) !important;
    border-color: var(--fg-gray-300) !important;
    color: var(--fg-text-default) !important;
} */


/* =============================================================================
   3. KENDO GRID — Selected rows
   ============================================================================= */

/* .k-grid td.k-state-selected,
.k-grid tr.k-state-selected>td {
    background-color: var(--fg-shade-000) !important;
    color: var(--fg-text-default) !important;
}

/* Hover 
.k-grid tbody tr:hover>td {
    background-color: var(--fg-gray-100) !important;
} */


/* =============================================================================
   4. KENDO BUTTONS
   ============================================================================= */

/* Primary Kendo button */
/* .k-button.k-primary,
.k-button[data-role="button"].k-primary {
    background-color: var(--fg-primary) !important;
    border-color: var(--fg-shade-600) !important;
    color: var(--fg-white) !important;
} */

/* .k-button.k-primary:hover,
.k-button.k-primary:focus,
.k-button.k-primary:active {
    background-color: var(--fg-shade-600) !important;
    border-color: var(--fg-shade-800) !important;
    color: var(--fg-white) !important;
} */

/* Generic Kendo button active/selected state */
/* .k-button:active,
.k-button.k-state-active {
    background-color: var(--fg-shade-300) !important;
    border-color: var(--fg-shade-600) !important;
    color: var(--fg-white) !important;
} */

/* Kendo toolbar buttons */
/* .k-toolbar .k-button {
    font-family: var(--fg-font-family) !important;
} */


/* =============================================================================
   5. KENDO PAGER
   ============================================================================= */

/* .k-pager-wrap {
    background-color: var(--fg-gray-100) !important;
    border-color: var(--fg-gray-300) !important;
    color: var(--fg-text-default) !important;
}

.k-pager-wrap .k-link:hover,
.k-pager-wrap .k-link:focus {
    color: var(--fg-primary) !important;
}

.k-pager-wrap .k-state-selected {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
    border-color: var(--fg-shade-600) !important;
} */


/* =============================================================================
   6. KENDO WINDOW — Title bar
   ============================================================================= */

.k-window-titlebar {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
    /* border-color: var(--fg-shade-800) !important; */
}

.k-window-titlebar .k-window-action .k-icon {
    color: var(--fg-white) !important;
}

/* .k-window-titlebar .k-window-action:hover .k-icon {
    color: var(--fg-solar-flare) !important;
} */


/* =============================================================================
   7. KENDO DROPDOWN / COMBOBOX — Focus state
   ============================================================================= */

/* .k-dropdown-wrap.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused {
    border-color: var(--fg-primary) !important;
    box-shadow: 0 0 0 2px var(--fg-shade-000) !important;
} */


/* =============================================================================
   8. KENDO FILTER ROW — Active filter icon
   ============================================================================= */
/* 
.k-grid-header .k-filtercell .k-icon.k-i-filter-clear {
    color: var(--fg-primary) !important;
} */



/* =============================================================================
   9. Calendar
   ============================================================================= 
*/

.k-calendar td.k-state-selected .k-link {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
    border-color: var(--fg-primary) !important;
}

.k-calendar .k-today .k-link {
    color: var(--fg-primary);
    box-shadow: inset 0 0 0 1px var(--fg-primary);
}

.k-calendar .k-footer .k-nav-today {
    color: var(--fg-primary);
}

.k-calendar .k-footer .k-nav-today:hover {
    color: var(--fg-primary);
}

/* =============================================================================
   10. OTHER KENDO WIDGETS — Selected/active states (e.g. treeview, checkbox)
   Note: only overrides for selected/active states, not full theming.
   ============================================================================= 
*/

.k-checkbox:checked+.k-checkbox-label:before {
    background-color: var(--fg-white) !important;
    border-color: var(--fg-gray-300) !important;
    color: var(--fg-primary) !important;
}

.k-treeview span.k-in {
    cursor: default;
    /*color: var(--fg-primary) !important;*/
}

.k-i-expand:before {
    content: "\e005";
    color: var(--fg-primary) !important;
}

.k-checkbox:indeterminate+.k-checkbox-label:after {
    background-color: var(--fg-primary) !important;
    background-image: none;
    border-color: var(--fg-shade-600) !important;
    border-radius: var(--fg-border-radius-xs) !important;
}



.k-state-active,
.k-tabstrip .k-state-active,
.k-tabstrip>.k-content {
    /* background-color: var(--fg-primary) !important; */
    border-color: var(--fg-primary);
}

.k-state-focused.k-state-selected,
.k-state-focused.k-state-selected {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
    box-shadow: inset 0 0 10px 3px var(--fg-primary);
}

.k-draghandle.k-state-selected:hover,
.k-ghost-splitbar-horizontal,
.k-ghost-splitbar-vertical,
.k-list>.k-state-highlight,
.k-list>.k-state-selected,
.k-marquee-color,
.k-panel>.k-state-selected,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-tool.k-state-selected {
    color: var(--fg-white) !important;
    background-color: var(--fg-primary);
    border-color: var(--fg-primary);
}

/* =============================================================================
   10. OTHER KENDO WIDGETS — Unselected/default states (e.g. calendar hover)
   Note: only overrides for hover/unselected states, not full theming.
   ============================================================================= 
*/

/* --- Kendo top navigation tabstrip (menuTabStrip — rendered by MenuController) --- */
#menuTabStrip .k-tabstrip-items,
#menuTabStrip>ul {
    background-color: var(--fg-primary) !important;
}

/* --- Kendo tabstrip active tab link --- */
.k-tabstrip .k-tabstrip-items .k-state-active .k-link {
    background-color: var(--fg-primary) !important;
}

/* --- Kendo slider selection --- */
.k-slider-selection {
    background-color: var(--fg-primary) !important;
}

/* --- Kendo grid selected row --- */
.k-grid td.k-state-selected,
.k-grid tr.k-state-selected>td {
    background-color: var(--fg-shade-000) !important;
    color: var(--fg-text-default) !important;
}

/* --- Kendo grid header (overrides Kendo bootstrap compiled #428bca) --- */
.k-grid-header th.k-header,
.k-grid th.k-header {
    /* background-color: var(--fg-secondary) !important;
    color: var(--fg-white) !important;
    border-color: var(--fg-shade-800) !important; */
}