/*
 * Kendo's own state colours, repainted in the product's state tokens (ruling R3).
 *
 * Colour roles: blue = action; green = state (selection, active navigation, current row,
 * active tab, sort indicator); red = alerts only, never a row fill.
 *
 * Kendo 14.5.0 paints selection from its primary blue: the selected grid row and cell are
 * color-mix(primary 25%), the selected PanelBar, Drawer and listview items are primary (with
 * white text), the calendar's selected date is primary, the active tab's label and the sort
 * indicator are primary. Lists and the treeview
 * use a grey. Primary must stay the action blue for buttons and links, so the state is repainted
 * here instead, with Kendo's exact selectors: equal specificity, and this sheet loads after the
 * theme, so it wins. Every colour property the Kendo rule sets is set here too; repainting only
 * a background would leave Kendo's white text on the pale green.
 *
 * DesignTokenContrastTests reads the selection rules from the restored day and night theme
 * sheets and fails if any of them is not repainted here, so a Kendo upgrade that adds one shows.
 * Nothing here targets a button or a link, or redefines --kendo-color-primary.
 */

/* Grid rows and cells, the listview, and table-based lists: the state fill. The text stays
   --aoc-text-primary (Kendo sets none), which is how board G draws the current row (L217). */
.k-table-tbody .k-table-row.k-selected>.k-table-td:not(.k-group-cell),
.k-table-list .k-table-row.k-selected:not(.k-group-cell),
.k-grid .k-table-td.k-selected:not(.k-group-cell),
.k-grid .k-table-row.k-selected>.k-table-td:not(.k-group-cell),
.k-grid-stack-cell.k-selected,
.k-listview-content>.k-selected {
    background-color: var(--aoc-state-selected-bg);
}

/* The selected row's 2 px state-accent bar at its left edge (board G L217, as the rail's active item, L35), drawn as
   an inset shadow on the first cell so the row keeps its size; the fill above is the row's. A focused first cell keeps
   Kendo's focus ring (.k-table-tbody .k-table-td.k-focus) as well, since this rule outranks it. */
.k-grid .k-table-row.k-selected>.k-table-td:first-child {
    box-shadow: inset 2px 0 0 var(--aoc-state-accent);
}

.k-grid .k-table-row.k-selected>.k-table-td:first-child:focus,
.k-grid .k-table-row.k-selected>.k-table-td:first-child.k-focus {
    box-shadow: inset 2px 0 0 var(--aoc-state-accent), inset 0 0 0 2px var(--kendo-color-border-alt);
}

/* Sticky columns and rows draw their tint on a ::before behind the content (z-index -1). */
.k-grid .k-master-row.k-table-row.k-selected.k-grid-row-sticky>.k-table-td::before,
.k-grid .k-master-row.k-table-row.k-selected .k-table-td.k-grid-row-sticky::before,
.k-grid .k-master-row.k-table-row.k-selected .k-grid-content-sticky::before,
.k-grid .k-master-row.k-table-row .k-selected.k-table-td.k-grid-content-sticky::before {
    background-color: var(--aoc-state-selected-bg);
}

/* Selected and search-highlighted at once: Kendo mixes primary with warning; this mixes the
   state fill with the warn fill, so the highlight still shows on a selected row. */
.k-grid .k-table-td.k-highlighted.k-selected:not(.k-group-cell,.k-grid-content-sticky),
.k-grid .k-table-row.k-highlighted.k-selected>.k-table-td:not(.k-group-cell,.k-grid-content-sticky),
.k-grid .k-table-row.k-highlighted>.k-table-td.k-selected:not(.k-group-cell,.k-grid-content-sticky),
.k-grid .k-table-row.k-selected>.k-table-td.k-highlighted:not(.k-group-cell,.k-grid-content-sticky),
.k-grid .k-master-row.k-table-row.k-selected.k-highlighted.k-grid-row-sticky>.k-table-td::before,
.k-grid .k-master-row.k-table-row.k-selected.k-highlighted .k-table-td.k-grid-row-sticky::before,
.k-grid .k-master-row.k-table-row.k-selected.k-highlighted .k-grid-content-sticky::before,
.k-grid .k-master-row.k-table-row.k-selected .k-table-td.k-grid-content-sticky.k-highlighted::before,
.k-grid .k-master-row.k-table-row.k-highlighted .k-table-td.k-grid-content-sticky.k-selected::before,
.k-grid .k-master-row.k-table-row .k-table-td.k-grid-content-sticky.k-selected.k-highlighted::before {
    background-color: color-mix(in srgb, var(--aoc-state-selected-bg), var(--aoc-warn-bg));
}

/* The selected item of a list (DropDownList, ComboBox, AutoComplete, MultiSelect popups) and of
   the treeview. Hovering a selected item keeps it selected. */
.k-list-sticky-header-item.k-selected,
.k-list-item.k-selected,
.k-selected.k-list-optionlabel,
.k-list-custom-value.k-selected,
.k-list-sticky-header-item.k-selected:hover,
.k-list-sticky-header-item.k-selected.k-hover,
.k-list-item.k-selected:hover,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-hover.k-list-optionlabel,
.k-list-custom-value.k-selected:hover,
.k-list-custom-value.k-selected.k-hover,
.k-treeview-item-content.k-selected,
.k-treeview-item-content.k-selected:hover,
.k-treeview-item-content.k-selected.k-hover {
    color: var(--aoc-state-selected-fg);
    background-color: var(--aoc-state-selected-bg);
}

/* The active PanelBar and Drawer item: the state fill with board G's inset active bar (L35). */
.k-drawer-item.k-selected,
.k-drawer-item.k-selected:hover,
.k-drawer-item.k-selected.k-hover,
.k-panelbar>.k-panelbar-header>.k-link.k-selected,
.k-panelbar>.k-panelbar-header>.k-link.k-selected:hover,
.k-panelbar>.k-panelbar-header>.k-link.k-selected.k-hover,
.k-panelbar .k-panelbar-group>.k-panelbar-item>.k-link.k-selected,
.k-panelbar .k-panelbar-group>.k-panelbar-item>.k-link.k-selected:hover,
.k-panelbar .k-panelbar-group>.k-panelbar-item>.k-link.k-selected.k-hover {
    color: var(--aoc-state-selected-fg);
    background-color: var(--aoc-state-selected-bg);
    box-shadow: inset 2px 0 0 var(--aoc-state-accent);
}

/* The calendar's selected date (DatePicker, DateTimePicker, Calendar): selection is state, so it
   takes the state fill and text as a selected list item does, not Kendo's primary (the brand).
   Hovering it keeps it selected. Kendo's border-color and focus ring are left as they are. */
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
    color: var(--aoc-state-selected-fg);
    background-color: var(--aoc-state-selected-bg);
}

/* The calendar's selected range (a range-selection Calendar or DateRangePicker): selection too, so the state green,
   not Kendo's primary. The band (start, end and middle cells) is the state fill at half strength, as Kendo's is its
   primary at a quarter, so the ends stand out from it; the ends are the full state fill and text, as a selected date is.
   The split edges' fade (a range that runs on into the next view) follows the band. */
.k-calendar .k-range-start,
.k-calendar .k-range-end,
.k-calendar .k-range-mid {
    background-color: color-mix(in srgb, var(--aoc-state-selected-bg) 50%, transparent);
}

.k-calendar .k-range-start .k-calendar-cell-inner,
.k-calendar .k-range-start .k-link,
.k-calendar .k-range-end .k-calendar-cell-inner,
.k-calendar .k-range-end .k-link {
    color: var(--aoc-state-selected-fg);
    background-color: var(--aoc-state-selected-bg);
}

.k-calendar .k-range-split-start::after {
    background-image: linear-gradient(to left, color-mix(in srgb, var(--aoc-state-selected-bg) 50%, transparent), transparent 100%);
}

.k-calendar .k-range-split-end::after {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--aoc-state-selected-bg) 50%, transparent), transparent 100%);
}

/* The grid header's active filter and column-menu icons (a filter is on) and an expanded hierarchy icon: state, so the
   state fill and text, not Kendo's primary with white. */
.k-grid-header .k-grid-filter.k-active,
.k-grid-header .k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-active {
    color: var(--aoc-state-selected-fg);
    background-color: var(--aoc-state-selected-bg);
}

.k-panelbar>.k-panelbar-header>.k-link.k-selected .k-icon,
.k-panelbar>.k-panelbar-header>.k-link.k-selected .k-panelbar-item-icon {
    color: var(--aoc-state-selected-fg);
}

/* The active tab (board G L107): a 2 px state-accent top edge, drawn as an inset shadow so the
   tab keeps Kendo's size, and the label in the primary text colour rather than Kendo's blue. */
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected {
    color: var(--aoc-text-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--aoc-state-accent);
}

/* The indicator's shadow would replace Kendo's focus ring on the active tab; keep both. */
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active:focus,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active.k-focus,
.k-tabstrip-items-wrapper .k-item.k-active:focus,
.k-tabstrip-items-wrapper .k-item.k-active.k-focus {
    box-shadow: inset 0 2px 0 var(--aoc-state-accent), inset 0 0 0 2px var(--kendo-color-border-alt);
}

/* The grid's sort indicator (board G L127). */
.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
    color: var(--aoc-state-accent);
}