/* Dark mode overrides for Kendo/Telerik CSS custom properties.
   This file MUST be loaded after Telerik's all.css (unlayered) to override
   the :root-level Kendo color variables that all.css sets. Our layered
   telerik-overrides.css cannot override unlayered styles due to CSS cascade rules.

   Applied to ALL dark-category themes: dark, midnight, ember, forest. */

[data-theme="dark"],
[data-theme="midnight"],
[data-theme="ember"],
[data-theme="forest"] {
    /* Surface & background colors */
    --kendo-color-surface: var(--color-bg-surface-raised);
    --kendo-color-surface-alt: var(--color-bg-surface);
    --kendo-color-on-surface: var(--color-text-primary);
    --kendo-color-on-app-surface: var(--color-text-primary);

    /* Border colors */
    --kendo-color-border: var(--color-border);
    --kendo-color-border-alt: var(--color-border-light);

    /* Base/secondary button colors */
    --kendo-color-base: var(--color-bg-surface-raised);
    --kendo-color-base-hover: var(--color-bg-elevated);
    --kendo-color-on-base: var(--color-text-primary);
    --kendo-color-base-subtle: var(--color-bg-subtle);
    --kendo-color-base-emphasis: var(--color-bg-elevated);
    --kendo-color-secondary: var(--color-bg-surface-raised);
    --kendo-color-secondary-hover: var(--color-bg-elevated);
    --kendo-color-secondary-active: var(--color-bg-elevated);
    --kendo-color-on-secondary: var(--color-text-primary);

    /* Primary colors */
    --kendo-color-primary: var(--color-primary);
    --kendo-color-primary-hover: var(--color-primary-hover);
    --kendo-color-on-primary: var(--color-text-on-primary);
    --kendo-color-primary-subtle: var(--color-primary-subtle);
    --kendo-color-primary-emphasis: var(--color-primary-muted);

    /* Disabled state */
    --kendo-disabled-bg: var(--color-bg-surface);

    /* Breadcrumb: mute the current-page text so it contrasts with navigable links */
    .k-breadcrumb .k-breadcrumb-item-text {
        color: var(--color-text-muted);
    }

    .k-breadcrumb .k-breadcrumb-link {
        color: var(--color-text-primary);
    }

    .k-breadcrumb .k-breadcrumb-link:hover {
        color: var(--color-primary-light);
    }

    .k-breadcrumb .k-breadcrumb-delimiter-icon {
        color: var(--color-text-secondary);
    }
}

/* Light-category themes with non-default primary colors need
   Kendo primary overrides so Telerik components pick up the
   correct accent. */

[data-theme="dusk"],
[data-theme="sandstone"] {
    --kendo-color-primary: var(--color-primary);
    --kendo-color-primary-hover: var(--color-primary-hover);
    --kendo-color-on-primary: var(--color-text-on-primary);
    --kendo-color-primary-subtle: var(--color-primary-subtle);
    --kendo-color-primary-emphasis: var(--color-primary-muted);
}