/* ============================================================================
   rtt-telerik-dark.css: REYSTI skin for Telerik UI for Blazor (v14 class names / kendo variables).

   2026-11-13 (Marc: "no old design of the legacy app anywhere, everything as modern as the new website"):
   rewritten on the website design system. Every value is a token of rtt-theme.css (--rtt-*); no literal colors.
   was: a recreation of the legacy monolith dark look (near-black Roboto UPPERCASE buttons, white 54 % borders,
   indigo #9fa8da checked state and loader). The legacy compiled material-main-dark.css stays on disk unused.

   LOAD ORDER: right AFTER _content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css, and rtt-theme.css
   (the tokens) anywhere in the same document (custom properties resolve at use time).
   ============================================================================ */

:root {
    --kendo-color-base: rgba(255, 255, 255, 0.04);
    --kendo-color-base-subtle: var(--rtt-bg-tertiary);
    --kendo-color-base-hover: var(--rtt-surface-card-hover);
    --kendo-color-base-active: var(--rtt-surface-highlight);
    --kendo-color-on-base: var(--rtt-text);
    --kendo-color-border: var(--rtt-border);
    --kendo-color-surface: var(--rtt-bg-elevated);
    --kendo-color-surface-alt: var(--rtt-surface-input);
    --kendo-color-app-surface: var(--rtt-bg);
    --kendo-color-on-app-surface: var(--rtt-text);
    --kendo-color-subtle: var(--rtt-text-secondary);
    --kendo-color-primary: var(--rtt-primary);
    --kendo-color-primary-hover: var(--rtt-primary-light);
    --kendo-color-primary-on-surface: var(--rtt-primary);
    --kendo-color-on-primary: var(--rtt-text-on-primary);
    --kendo-font-family: var(--rtt-font-family);
}

/* ---------------------------------------------------------------------------- buttons */
.k-button {
    font-family: var(--rtt-font-family);
    font-weight: var(--rtt-font-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
    transition: background-color var(--rtt-transition-fast), border-color var(--rtt-transition-fast),
                color var(--rtt-transition-fast), box-shadow var(--rtt-transition-fast), transform var(--rtt-transition-fast);
}

.k-button.k-button-md {
    padding: 0.6rem 1.15rem;
    font-size: var(--rtt-font-size-sm);
    line-height: 1.35;
}

.k-button.k-icon-button.k-button-md {
    padding: 0.6rem; /* icon-only buttons keep a square hit area */
}

.k-button.k-rounded-md {
    border-radius: var(--rtt-radius-lg);
}

/* default button = the website's secondary button (glass, hairline border, blue on hover) */
.k-button.k-button-solid.k-button-base {
    border: 1.5px solid var(--rtt-border);
    color: var(--rtt-text);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

    .k-button.k-button-solid.k-button-base:hover,
    .k-button.k-button-solid.k-button-base.k-hover {
        border-color: var(--rtt-primary);
        color: var(--rtt-primary);
        background-color: var(--rtt-surface-highlight);
    }

    .k-button.k-button-solid.k-button-base:active,
    .k-button.k-button-solid.k-button-base.k-active {
        transform: translateY(1px);
    }

    .k-button.k-button-solid.k-button-base:disabled,
    .k-button.k-button-solid.k-button-base.k-disabled {
        border-color: var(--rtt-border-light);
        color: var(--rtt-text-muted);
        background-color: transparent;
    }

/* primary button = the website's primary (blue gradient, dark ink, glow) */
.k-button.k-button-solid.k-button-primary {
    border: none;
    color: var(--rtt-text-on-primary);
    background: var(--rtt-gradient-primary);
    box-shadow: var(--rtt-shadow-md), var(--rtt-shadow-glow);
}

    .k-button.k-button-solid.k-button-primary:hover,
    .k-button.k-button-solid.k-button-primary.k-hover {
        box-shadow: var(--rtt-shadow-lg), var(--rtt-shadow-glow-lg);
    }

.k-button:focus-visible,
.k-button.k-focus {
    outline: 2px solid var(--rtt-focus-ring);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------- checkbox / radio */
.k-checkbox,
.k-radio {
    border-width: 1.5px;
    border-color: var(--rtt-border);
    background-color: var(--rtt-surface-input);
}

    .k-checkbox:checked,
    .k-checkbox.k-checked,
    .k-checkbox:indeterminate,
    .k-checkbox.k-indeterminate,
    .k-radio:checked,
    .k-radio.k-checked {
        border-color: var(--rtt-primary);
        color: var(--rtt-text-on-primary);
        background-color: var(--rtt-primary);
    }

    .k-checkbox:focus-visible,
    .k-radio:focus-visible {
        box-shadow: 0 0 0 3px rgba(var(--rtt-primary-rgb), 0.2);
    }

    .k-checkbox:checked:disabled,
    .k-checkbox.k-checked.k-disabled,
    .k-checkbox:indeterminate:disabled,
    .k-checkbox.k-indeterminate.k-disabled {
        border-color: var(--rtt-border);
        background-color: var(--rtt-bg-tertiary);
    }

.k-switch-on .k-switch-track {
    border-color: var(--rtt-primary);
    background-color: var(--rtt-primary);
}

/* ---------------------------------------------------------------------------- inputs / pickers */
.k-input,
.k-picker {
    border: 1px solid var(--rtt-border);
    border-radius: var(--rtt-radius-lg);
    color: var(--rtt-text);
    background-color: var(--rtt-surface-input);
    font-family: var(--rtt-font-family);
    transition: border-color var(--rtt-transition-fast), box-shadow var(--rtt-transition-fast);
}

    .k-input:focus-within,
    .k-input.k-focus,
    .k-picker:focus-within,
    .k-picker.k-focus {
        border-color: var(--rtt-border-focus);
        box-shadow: 0 0 0 3px rgba(var(--rtt-primary-rgb), 0.15);
    }

    .k-input.k-invalid,
    .k-input[aria-invalid="true"],
    .k-input:has(input[aria-invalid="true"]) {
        border-color: var(--rtt-border-error);
        box-shadow: 0 0 0 3px var(--rtt-error-light);
    }

.k-input::placeholder,
.k-input-inner::placeholder,
.k-picker::placeholder {
    color: var(--rtt-text-muted);
}

.k-input.k-input-md,
.k-picker.k-picker-md {
    font-size: var(--rtt-font-size-base);
    line-height: 1.25;
}

    .k-input.k-input-md .k-input-inner,
    .k-picker.k-picker-md .k-input-inner {
        padding: 0.7rem 0.9rem;
    }

.k-input:disabled,
.k-input.k-disabled {
    border-color: var(--rtt-border-light);
    color: var(--rtt-text-muted);
    background-color: var(--rtt-bg-tertiary);
}

/* ---------------------------------------------------------------------------- popups / lists / windows */
.k-popup,
.k-animation-container .k-popup {
    border: 1px solid var(--rtt-border);
    border-radius: var(--rtt-radius-lg);
    color: var(--rtt-text);
    background-color: var(--rtt-bg-elevated);
    box-shadow: var(--rtt-shadow-xl);
}

.k-list,
.k-list-item {
    color: var(--rtt-text);
    background-color: transparent;
    font-family: var(--rtt-font-family);
}

    .k-list-item:hover,
    .k-list-item.k-hover {
        color: var(--rtt-text);
        background-color: var(--rtt-surface-card-hover);
    }

    .k-list-item.k-selected {
        color: var(--rtt-primary);
        background-color: var(--rtt-surface-highlight);
    }

.k-window,
.k-dialog {
    border: 1px solid var(--rtt-border);
    border-radius: var(--rtt-radius-xl);
    color: var(--rtt-text);
    background-color: var(--rtt-bg-elevated);
    box-shadow: var(--rtt-shadow-xl);
}

.k-window-titlebar,
.k-dialog-titlebar {
    border-bottom: 1px solid var(--rtt-border);
    color: var(--rtt-text);
    background: transparent;
}

.k-overlay {
    background-color: var(--rtt-bg-overlay);
    backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------------------------- grids / tabs */
.k-grid,
.k-grid-header,
.k-grid-content,
.k-grid td,
.k-grid th {
    border-color: var(--rtt-border);
    color: var(--rtt-text);
    background-color: transparent;
}

.k-grid-header th {
    color: var(--rtt-text-secondary);
    font-weight: var(--rtt-font-weight-semibold);
}

.k-grid tr:hover td,
.k-grid tr.k-hover td {
    background-color: var(--rtt-surface-card-hover);
}

.k-tabstrip-items .k-item.k-active,
.k-tabstrip-items .k-item.k-selected {
    color: var(--rtt-primary);
    border-color: var(--rtt-primary);
}

/* ---------------------------------------------------------------------------- loader */
.k-loader,
.k-loader.k-loader-primary {
    color: var(--rtt-primary);
}

/* NOTE: TelerikCarousel (.k-scrollview) shows full-bleed images, no chrome to restyle;
   TelerikQRCode renders SVG/canvas (theme-independent). */