/* ============================================================================
   Telerik UI for Blazor 2.24.0 — Kendo "Default" theme (April 2021 build)
   Widerpay brand + dark-mode override layer.

   The bundled theme has a fixed #ff6358 accent and is light-only. This file is
   loaded in App.razor AFTER kendo-theme-default/all.css, so it repaints the
   components this app actually uses (Grid, Button, TabStrip, Loader, inputs,
   Card, Pager) with the Widerpay accent — var(--brand-pink), which is also
   custom-color aware — and adds a cohesive dark surface set under
   [data-theme="dark"]. Tints use color-mix so they track the custom accent too.
   !important is used to beat the theme's compound selector specificity.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BRAND ACCENT  (applies in every theme)
   ---------------------------------------------------------------------------- */

/* Primary buttons */
.k-button-primary,
.k-button.k-primary,
.k-button-solid-primary {
    border-color: var(--brand-pink) !important;
    background-color: var(--brand-pink) !important;
    color: #fff !important;
}

    .k-button-primary:hover,
    .k-button.k-primary:hover,
    .k-button-primary.k-state-hover,
    .k-button.k-primary.k-state-hover,
    .k-button-primary:focus,
    .k-button.k-primary:focus {
        border-color: var(--brand-pink-dark) !important;
        background-color: var(--brand-pink-dark) !important;
    }

/* Loader / LoaderContainer spinner segments */
.k-loader-primary {
    color: var(--brand-pink) !important;
}

/* Grid: selected & hovered rows */
.k-grid td.k-state-selected,
.k-grid tr.k-state-selected > td {
    background-color: color-mix(in srgb, var(--brand-pink) 16%, transparent) !important;
}

.k-grid tbody tr:hover,
.k-grid tbody tr.k-state-hover {
    background-color: color-mix(in srgb, var(--brand-pink) 7%, transparent) !important;
}

/* Grid: sort indicator on the active column */
.k-grid .k-sort-icon,
.k-grid th.k-sorted,
.k-grid th.k-sorted .k-link {
    color: var(--brand-pink) !important;
}

/* Pager: current page */
.k-pager-wrap .k-state-selected,
.k-pager-numbers .k-link.k-state-selected {
    border-color: var(--brand-pink) !important;
    background-color: var(--brand-pink) !important;
    color: #fff !important;
}

/* Inputs: focus accent */
.k-textbox:focus,
.k-textbox.k-state-focused,
.k-textarea.k-state-focused,
.k-input.k-state-focused,
.k-dropdown-wrap.k-state-focused,
.k-picker-wrap.k-state-focused {
    border-color: var(--brand-pink) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-pink) 22%, transparent) !important;
}

/* Checkbox / radio: checked */
.k-checkbox:checked,
.k-radio:checked {
    border-color: var(--brand-pink) !important;
    background-color: var(--brand-pink) !important;
}

/* TabStrip: active item accent underline (non-workspace tab strips) */
.k-tabstrip-items .k-item.k-state-active,
.k-tabstrip-items .k-item.k-active {
    color: var(--brand-pink) !important;
}

/* ----------------------------------------------------------------------------
   2. DARK MODE SURFACES  ([data-theme="dark"] only)
   Reuses the design-system surface tokens, which already flip in dark mode.
   ---------------------------------------------------------------------------- */

[data-theme="dark"] .k-grid,
[data-theme="dark"] .k-card,
[data-theme="dark"] .k-listview,
[data-theme="dark"] .k-tabstrip {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .k-grid-header,
[data-theme="dark"] .k-grid-header-wrap,
[data-theme="dark"] .k-grid-header .k-header {
    background-color: var(--surface-page-bg) !important;
    color: var(--surface-text-muted) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .k-grid td,
[data-theme="dark"] .k-grid .k-master-row > td {
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .k-grid .k-alt {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

[data-theme="dark"] .k-grid tbody tr:hover,
[data-theme="dark"] .k-grid tbody tr.k-state-hover {
    background-color: color-mix(in srgb, var(--brand-pink) 13%, transparent) !important;
}

[data-theme="dark"] .k-grid-pager,
[data-theme="dark"] .k-pager-wrap,
[data-theme="dark"] .k-grid-toolbar,
[data-theme="dark"] .k-grid-footer,
[data-theme="dark"] .k-grid-footer td {
    background-color: var(--surface-page-bg) !important;
    color: var(--surface-text-muted) !important;
    border-color: var(--surface-border) !important;
}

/* Inputs in dark */
[data-theme="dark"] .k-textbox,
[data-theme="dark"] .k-textarea,
[data-theme="dark"] .k-input,
[data-theme="dark"] .k-dropdown-wrap,
[data-theme="dark"] .k-picker-wrap {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
}

    [data-theme="dark"] .k-textbox::placeholder,
    [data-theme="dark"] .k-textarea::placeholder,
    [data-theme="dark"] .k-input::placeholder {
        color: var(--surface-text-muted) !important;
    }

/* Card header / body in dark */
[data-theme="dark"] .k-card-header,
[data-theme="dark"] .k-card-body,
[data-theme="dark"] .k-card-footer {
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
}

/* LoaderContainer dimming panel in dark */
[data-theme="dark"] .k-loader-container-panel {
    background-color: rgba(18, 18, 20, 0.6) !important;
    color: var(--surface-text) !important;
}

/* Popups / dropdown lists (filter menus, dropdowns) in dark */
[data-theme="dark"] .k-animation-container .k-popup,
[data-theme="dark"] .k-list,
[data-theme="dark"] .k-list-container {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
}

    [data-theme="dark"] .k-list .k-item.k-state-selected,
    [data-theme="dark"] .k-list .k-item.k-selected {
        background-color: color-mix(in srgb, var(--brand-pink) 22%, transparent) !important;
        color: var(--surface-text) !important;
    }