/* =============================================================================
kendo2022-compat.css
Purpose: bridge the Kendo UI 2018 -> 2022 "unified rendering" state-class
rename for pages that are served the Kendo 2022 bundle by the page-split
layout logic (see _RootLayout.cshtml / _StartupRootLayout.cshtml).
Kendo 2022 renamed the state classes:
k-state-active -> k-active
k-state-hover -> k-hover
k-state-selected -> k-selected
k-state-disabled -> k-disabled
k-state-hidden -> k-hidden
and the 2022 theme (kendo.default-ocean-blue.min.css) no longer defines any
.k-state-* rules at all.
Some views still hand-roll a kendoTabStrip and emit the OLD 2018 state class
on the server (via the RenderSelectedTabIndex / LocalizedEditor helpers).
When such a tabstrip renders inside a page that also has a grid, that page is
served the Kendo 2022 bundle, so the server-emitted 2018 classes would carry
no styling until the widget's JS re-renders. This file maps ONLY the state
classes those hand-rolled tabstrips (and the localized-editor tabstrip)
actually emit, onto their 2022 twins, so the initial server render is styled
correctly.
Scope is intentionally minimal (no speculative styling). Loaded ONLY on
Kendo 2022 pages.
John - 06/07/2026
============================================================================= */
/* Active tab item: server render emits k-state-active; 2022 theme styles
.k-item.k-active. Treat the old class as the new one within a tabstrip. */
.k-tabstrip .k-item.k-state-active {
/* mirror k-active: the selected tab sits "on top" of the content panel */
border-bottom-color: transparent;
}
.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-state-active {
border-top-color: transparent;
}
.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-state-active {
border-right-color: transparent;
}
.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-state-active {
border-left-color: transparent;
}
/* Tab content panel: 2018 marked the visible pane with k-state-active,
2022 uses k-active. Keep the old class showing its pane. */
.k-tabstrip > .k-content.k-state-active,
.k-tabstrip-content.k-state-active {
display: block;
}
/* Localized-editor "Standard" tab is emitted hidden with k-state-hidden. */
.k-tabstrip .k-item.k-state-hidden {
display: none !important;
}
/* Hover / selected / disabled twins for tab items (runtime states). */
.k-tabstrip .k-item.k-state-hover {
/* map to k-hover hover treatment */
color: inherit;
}
.k-tabstrip .k-item.k-state-selected {
/* map to k-selected */
border-bottom-color: transparent;
}
.k-tabstrip .k-item.k-state-disabled {
/* map to k-disabled */
opacity: 0.6;
pointer-events: none;
}
/* =============================================================================
RTL grid text alignment (added in v=1.1)
The Kendo 2022 theme (kendo.default-ocean-blue.min.css) HARDCODES
text-align:left on `.k-table` and on `.k-grid thead/tbody/tfoot`.
The 2018 theme did not, so under cells used to inherit the
RTL direction and align right naturally. On 2022 pages that hardcoded left
won over the inherited direction, so Arabic grid content (e.g.
/hr/job/list, /hr/religion/list, /hr/nationality/list) rendered
left-aligned.
Force right alignment for grids/tables under RTL. Per-column inline styles
(centered / numeric columns) still win over these rules.
John - 06/07/2026
============================================================================= */
[dir="rtl"] .k-grid thead,
[dir="rtl"] .k-grid tbody,
[dir="rtl"] .k-grid tfoot,
[dir="rtl"] .k-table,
.k-rtl .k-grid thead,
.k-rtl .k-grid tbody,
.k-rtl .k-grid tfoot,
.k-rtl .k-table {
text-align: right;
}
/* =============================================================================
R1 — Grid template link cells look like plain text (added in v=1.2)
Grid cell templates emit plain anchors, e.g. in Areas/HR/Views/Job/List.cshtml
and Employee/List.cshtml: Template = "#=Name#".
Under the Kendo 2018 stack these inherited Bootstrap's link colour and looked
like classic blue clickable links. The 2022 theme
(kendo.default-ocean-blue.min.css) introduced:
.k-grid a{color:inherit;text-decoration:none}
.k-grid a:hover{text-decoration:none}
so those anchors now inherit the dark cell text colour and read as plain text.
Restore the 2018/Bootstrap link appearance for anchors inside grid DATA cells
only. Colours copied verbatim from
Administration/bootstrap/css/bootstrap.min.css:
a{color:#337ab7;text-decoration:none}
a:focus,a:hover{color:#23527c;text-decoration:underline}
The edit/delete command buttons that grids also emit
(KendoGridExtensions.cs: and