/*
  TabStrip: aria-selected lives on the tab control with role="tab" (often the <a.k-link>),
  not on <li.k-item>. Rules like .k-item:not([aria-selected="true"]) matched every row
  and overwrote active styles. Load after IgniteUI (MainLayout).
*/

/* ---- Selected tab (ARIA — matches Telerik Blazor markup) ---- */
.k-tabstrip [role="tab"][aria-selected="true"],
.k-tabstrip a.k-link[role="tab"][aria-selected="true"],
.k-tabstrip [role="tab"][aria-selected="true"]:hover,
.k-tabstrip a.k-link[role="tab"][aria-selected="true"]:hover {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #CCC !important;
}

/* When role="tab" is on <li>, paint header + link */
.k-tabstrip li[role="tab"][aria-selected="true"] > .k-link {
    background-color: #fff !important;
    color: #212529 !important;
}

/* When the selected state is only on the inner link, color the whole tab row */
.k-tabstrip .k-item:has([role="tab"][aria-selected="true"]),
.k-tabstrip .k-tabstrip-item:has([role="tab"][aria-selected="true"]) {
    background-color: #fff !important;
    border-color: #CCC !important;
}

.k-tabstrip .k-item:has([role="tab"][aria-selected="true"]) > .k-link,
.k-tabstrip .k-tabstrip-item:has([role="tab"][aria-selected="true"]) > .k-link {
    background-color: #fff !important;
    color: #212529 !important;
}

/* ---- Class-based fallbacks (Kendo / theme) ---- */
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-tabstrip .k-tabstrip-items .k-item.k-active,
.k-tabstrip .k-tabstrip-items .k-item.k-selected,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item.k-active,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item.k-selected {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #CCC !important;
}

.k-tabstrip-items-wrapper .k-item.k-active > .k-link,
.k-tabstrip-items-wrapper .k-item.k-selected > .k-link,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active > .k-link,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected > .k-link,
.k-tabstrip .k-tabstrip-items .k-item.k-active > .k-link,
.k-tabstrip .k-tabstrip-items .k-item.k-selected > .k-link {
    background-color: #fff !important;
    color: #212529 !important;
}

/* ---- Unselected tabs (false or missing aria-selected on inactive tabs) ---- */
.k-tabstrip [role="tab"][aria-selected="false"],
.k-tabstrip [role="tab"]:not([aria-selected="true"]),
.k-tabstrip a.k-link[role="tab"][aria-selected="false"],
.k-tabstrip a.k-link[role="tab"]:not([aria-selected="true"]) {
    background-color: var(--first-color) !important;
    color: #fff !important;
    border-color: #CCC !important;
}

/* Hover — unselected only */
.k-tabstrip [role="tab"][aria-selected="false"]:hover,
.k-tabstrip [role="tab"]:not([aria-selected="true"]):hover,
.k-tabstrip a.k-link[role="tab"][aria-selected="false"]:hover,
.k-tabstrip a.k-link[role="tab"]:not([aria-selected="true"]):hover {
    background-color: var(--first-color) !important;
    filter: brightness(0.92);
}