/* ============================================================================
   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). */

/* ============================================================================
   SHARED RTT DIALOGS (2026-11-14, Marc: "no more dialogs or screens from my legacy UI").
   One frame for every shared popup of RTT.UI: UcMsgBox, UcMsgBox2BigBtns, UcInputBox (inside UcCtrlPopup),
   UcCtrlPopup / UcCtrlPopup2, UcContextMenu, UcProcessing, ConfirmWindow.
   was: black boxes, 4px border in the venue color, 15-20px radius, outlined bold buttons, PNG close icon.
   Now: the website card (elevated surface, hairline border, large radius, deep shadow) with the brand gradient
   strip on top, Sora text, pill buttons (primary = blue gradient, secondary = glass).
   The kiosk v2 design keeps its own frame: every rule skips .kd-win.
   ============================================================================ */

.k-window.rtt-dlg:not(.kd-win) {
    /* no "position" here: Telerik positions the window itself (.k-centered = fixed + translate); a position
       override sent the message box to the bottom right corner (seen 2026-11-14). The ::before strip still
       anchors to the window because Telerik's own position is never static. */
    overflow: hidden;
    outline: none;
    border: 1px solid var(--rtt-border-strong);
    border-radius: var(--rtt-radius-2xl);
    color: var(--rtt-text);
    background-color: var(--rtt-bg-elevated);
    box-shadow: var(--rtt-shadow-xl);
    font-family: var(--rtt-font-family);
}

    /* the brand strip: the one decorative mark of the frame */
    .k-window.rtt-dlg:not(.kd-win)::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: var(--rtt-gradient-brand);
        z-index: 1;
        pointer-events: none;
    }

    .k-window.rtt-dlg.rtt-dlg-bare:not(.kd-win)::before {
        display: none; /* full-screen hosts, the processing pill */
    }

    /* UcCtrlPopup(2) with <FullScreen>1</FullScreen>: edge to edge, no frame */
    .k-window.rtt-dlg.rtt-dlg-full:not(.kd-win) {
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--rtt-bg);
    }

    .k-window.rtt-dlg:not(.kd-win) > .k-window-titlebar {
        display: none; /* the shared dialogs carry no title bar; a close button sits in the content */
    }

    .k-window.rtt-dlg:not(.kd-win) > .k-window-content {
        padding: 1.75rem 1.5rem 1.5rem;
        background: transparent;
    }

.rtt-dlg-msg {
    color: var(--rtt-text);
    font-family: var(--rtt-font-family);
    font-size: var(--rtt-font-size-lg);
    font-weight: var(--rtt-font-weight-medium);
    line-height: var(--rtt-line-height-relaxed);
    text-align: center;
    white-space: pre-wrap;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.rtt-dlg-title {
    margin: 0 2.25rem 1rem;
    color: var(--rtt-text);
    font-family: var(--rtt-font-display);
    font-size: var(--rtt-font-size-xl);
    font-weight: var(--rtt-font-weight-bold);
    line-height: var(--rtt-line-height-tight);
    text-align: center;
    text-wrap: balance;
}

.rtt-dlg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

    .rtt-dlg-actions .k-button.rtt-dlg-btn {
        flex: 1 1 8rem;
        max-width: 14rem;
        min-height: var(--rtt-touch-target);
        border-radius: var(--rtt-radius-full);
        font-size: var(--rtt-font-size-base);
        white-space: normal;
    }

/* close (x) in the top right corner of a dialog */
.k-button.rtt-dlg-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--rtt-radius-full);
    color: var(--rtt-text-secondary);
    background: transparent;
    box-shadow: none;
}

    .k-button.rtt-dlg-close:hover {
        border-color: var(--rtt-border);
        color: var(--rtt-text);
        background-color: var(--rtt-surface-card-hover);
    }

    .k-button.rtt-dlg-close svg {
        width: 1.1rem;
        height: 1.1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

/* auto-close countdown of a timed message */
.rtt-dlg-timer {
    height: 3px;
    margin: 1.25rem -1.5rem -1.5rem;
    background: var(--rtt-border);
}

    .rtt-dlg-timer > span {
        display: block;
        height: 100%;
        background: var(--rtt-gradient-brand);
        transition: width 0.9s linear;
    }

/* single-line / multi-line answer of UcInputBox */
.rtt-dlg-field {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

    .rtt-dlg-field .k-input {
        width: 100%;
        max-width: 22rem;
        font-size: var(--rtt-font-size-lg);
    }

    .rtt-dlg-field.rtt-dlg-field-code .k-input-inner {
        font-family: var(--rtt-font-mono);
        font-size: var(--rtt-font-size-2xl);
        letter-spacing: 0.3em;
        text-align: center;
    }

    .rtt-dlg-field.rtt-dlg-field-center .k-input-inner {
        text-align: center;
    }

/* list of choices (UcContextMenu) */
.rtt-dlg-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

    .rtt-dlg-list .k-button.rtt-dlg-choice {
        justify-content: flex-start;
        width: 100%;
        min-height: var(--rtt-touch-target);
        padding: 0.75rem 1rem;
        border: 1px solid var(--rtt-border);
        border-radius: var(--rtt-radius-lg);
        color: var(--rtt-text);
        background-color: var(--rtt-surface-card);
        font-size: var(--rtt-font-size-base);
        font-weight: var(--rtt-font-weight-medium);
        text-align: left;
        white-space: normal;
    }

        .rtt-dlg-list .k-button.rtt-dlg-choice:hover {
            border-color: var(--rtt-border-accent);
            color: var(--rtt-text);
            background-color: var(--rtt-surface-card-hover);
        }

        .rtt-dlg-list .k-button.rtt-dlg-choice.rtt-on {
            border-color: var(--rtt-primary);
            color: var(--rtt-primary);
            background-color: var(--rtt-surface-highlight);
        }

/* busy indicator (UcProcessing): a small floating pill, no frame */
.k-window.rtt-dlg.rtt-dlg-busy:not(.kd-win) {
    border-radius: var(--rtt-radius-full);
}

    .k-window.rtt-dlg.rtt-dlg-busy:not(.kd-win) > .k-window-content {
        display: grid;
        place-items: center;
        padding: 1.1rem 1.4rem;
    }

.k-loader-custom-color .k-loader-segment {
    background-color: var(--rtt-primary);
}

@media (max-width: 480px) {
    .k-window.rtt-dlg:not(.kd-win) > .k-window-content {
        padding: 1.5rem 1.1rem 1.1rem;
    }

    .rtt-dlg-timer {
        margin: 1.1rem -1.1rem -1.1rem;
    }
}