/* Manual compatibility layer only. */
/* Authoritative theme tokens are generated into _content/AppPlatform.DesignTokens/css/tokens.generated.css. */

:root {
  /* Explicit allowlisted manual token (large data URI not yet moved into JSON source). */
  --ap-mask-warning-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIE0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3LjM4NyA4Ny4zMDA1IDI2Ni4xMTYgODYuMDU0NyAyNjMuNTc2IDg2LjA1NDdaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+");
}

/* === RadzenButton — spacing === */
/* Moved from app.css: .rz-* overrides belong in this file per CSS architecture */
.rz-button { margin-block: var(--ap-space-1); }
.ap-form-actions .rz-button { margin-block: 0; }

/* === RadzenButton — transitions, focus ring, disabled state (AC-03, AC-04) === */
.rz-button {
    transition:
        background-color var(--ap-motion-duration-base) var(--ap-motion-ease-standard),
        opacity var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

.rz-button:focus-visible {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.rz-button.rz-state-disabled {
    opacity: var(--ap-state-disabled-opacity);
    cursor: not-allowed;
}

/* === RadzenFormField — container layout (AC-01) === */
.rz-form-field {
    width: 100%;
    margin-bottom: var(--ap-space-4);
}

/* === RadzenFormField — floating label (AC-01) === */
.rz-form-field-label {
    font-size: var(--ap-text-sm);
    font-weight: 600;
    color: var(--ap-text-primary);
}

/* === RadzenTextBox / RadzenPassword — input appearance (AC-01) === */
/* .rz-textbox is the <input> for RadzenTextBox; also the <input> inside
   .rz-password-icon-wrapper for RadzenPassword — confirmed from Radzen 10.0.5 CSS patterns. */
.rz-textbox {
    background-color: var(--ap-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    padding: var(--ap-space-2) var(--ap-space-3);
    font-size: var(--ap-text-base);
    color: var(--ap-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--ap-motion-duration-base) var(--ap-motion-ease-standard);
}

/* Focus: override Radzen's inset box-shadow with design-system outline ring (AC-02) */
.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    border-color: var(--ap-primary);
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
    box-shadow: none;
}

/* RadzenPassword outer wrapper — fills its form field column */
.rz-password-icon-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* === RadzenDataGrid — table appearance (AC-05) === */
.rz-datatable {
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    overflow: hidden;
}

/* Radzen 10 renders the grid as `table.rz-grid-table` with an UNCLASSED <thead>;
   the legacy `.rz-datatable-thead` selector matches nothing, so these header rules
   silently never applied. Target the real DOM (`.rz-grid-table thead`). */
.rz-grid-table thead {
    background-color: var(--ap-bg-surface);
    border-bottom: 1px solid var(--ap-border-default);
}

.rz-data-row {
    border-bottom: 1px solid var(--ap-surface-border);
    transition: background-color var(--ap-motion-duration-base) var(--ap-motion-ease-standard);
}

.rz-data-row:hover {
    background-color: var(--ap-primary-subtle);
}

.rz-cell-data {
    padding: var(--ap-space-2) var(--ap-space-3);
    font-size: var(--ap-text-sm);
    color: var(--ap-text-primary);
}

/* Finding P-5 (re-fixed): data-grid column headers were near-illegible — the
   `.rz-column-title` span carries a hard-coded light-theme colour (#212121) while
   body cells correctly resolve --ap-text-primary. The original fix used the
   `.rz-datatable-thead` selector, which does NOT exist in Radzen 10's DOM
   (confirmed via live computed-style inspection: header colour stuck at #212121 on
   the dark surface). Re-target the actual `.rz-grid-table thead` structure and pin
   the title span to the primary token — theme-agnostic, since the token flips
   per light/dark. */
.rz-grid-table thead th,
.rz-grid-table thead .rz-column-title,
.rz-grid-table thead .rz-column-title-content {
    color: var(--ap-text-primary);
}

.rz-grid-table thead .rz-column-title {
    font-weight: 600;
}

/* Finding P-5b: Radzen's "Light" secondary button (ButtonStyle.Light — e.g. the
   admin grid's "Bearbeiten"/Edit button) styles itself with a fixed light fill
   (--rz-base-200 ≈ #eeeeee) plus --rz-text-color, which the token sheet maps to
   the dark-theme light text — light-grey text on a light-grey fill (~1.16:1,
   fails WCAG AA). --rz-base-200 is never remapped, so pin the Light button onto
   the design-system surface tokens so foreground/background always pair
   correctly (~10.9:1 dark / ~16:1 light). Mirrors the tour app's T-1 fix. */
.rz-button.rz-light {
    background-color: var(--ap-surface-elevated);
    color: var(--ap-text-primary);
    border: 1px solid var(--ap-border-default);
}

.rz-button.rz-light:hover {
    background-color: var(--ap-surface);
    color: var(--ap-text-primary);
}

/* === RadzenAlert — container and message (AC-06) === */
.rz-alert {
    border-radius: var(--ap-radius-md);
    padding: var(--ap-space-3) var(--ap-space-4);
    background-color: var(--ap-bg-elevated, var(--ap-surface-elevated));
    color: var(--ap-text-primary);
    border: 1px solid var(--ap-border-default);
    box-shadow: var(--ap-shadow-sm);
}

.rz-alert-message {
    font-size: var(--ap-text-base);
}

.rz-alert .rz-alert-message,
.rz-alert .rz-alert-content,
.rz-alert .rz-alert-title,
.rz-alert .rz-alert-icon {
    color: inherit;
}

.rz-alert.rz-alert-danger {
    border-left: 4px solid var(--ap-semantic-error);
}

.rz-alert.rz-alert-warning {
    border-left: 4px solid var(--ap-semantic-warning);
}

.rz-alert.rz-alert-info {
    border-left: 4px solid var(--ap-semantic-info);
}

.rz-alert.rz-alert-success {
    border-left: 4px solid var(--ap-semantic-success);
}

/* === RadzenDialog — overlay, container, titlebar, and content (AC-07) === */
.rz-dialog {
    background-color: var(--ap-surface);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-lg);
}

.rz-dialog-titlebar {
    padding: var(--ap-space-4);
    border-bottom: 1px solid var(--ap-border-default);
}

.rz-dialog-title {
    font-size: var(--ap-text-base);
    font-weight: 600;
    color: var(--ap-text-primary);
}

.rz-dialog-content {
    padding: var(--ap-space-4);
}

/* === RadzenSkeleton — loading placeholder (AC-08) === */
.rz-skeleton {
    background-color: var(--ap-surface-border);
    border-radius: var(--ap-radius-md);
}

.rz-skeleton-text {
    border-radius: var(--ap-radius-md);
}

/* === RadzenBadge — secondary maps to the design-system secondary accent === */
/* The Radzen bridge maps --rz-primary/danger/warning/success/info but never
   --rz-secondary, so BadgeStyle.Secondary (e.g. the "Reserved"/packaged status
   badge) fell back to Radzen's default magenta (#e31c65 — off-palette, ~no
   relation to any --ap token). Pin the filled secondary badge onto the
   design-system secondary token (teal) so the status reads as an on-brand accent
   in both themes. White-on-teal stays ≥ AA. */
.rz-badge.rz-badge-secondary {
    background-color: var(--ap-secondary);
    color: var(--ap-text-on-accent);
}