/* 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,
.rz-button:hover,
.rz-button:active {
    transition:
        background-color var(--ap-motion-duration-base) var(--ap-motion-ease-standard),
        opacity var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
    background-image: none !important;
}

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

.rz-button:focus,
.rz-button.rz-state-focused {
    background-image: none !important;
}

.rz-button .rz-button-box,
.rz-button .rz-button-text,
.rz-button .rz-button-icon-left,
.rz-button .rz-button-icon-right,
.rz-button .rzi,
.rz-button i {
    background-image: none !important;
}

.rz-button.rz-variant-filled.rz-primary,
.rz-button.rz-variant-filled.rz-primary.rz-shade-default,
.rz-button.rz-variant-filled.rz-primary:hover,
.rz-button.rz-variant-filled.rz-primary:active,
.rz-button.rz-variant-filled.rz-primary:focus,
.rz-button.rz-variant-filled.rz-primary.rz-state-focused {
    color: var(--ap-text-on-accent) !important;
}

.rz-button.rz-variant-filled.rz-primary .rz-button-box,
.rz-button.rz-variant-filled.rz-primary .rz-button-text,
.rz-button.rz-variant-filled.rz-primary .rz-button-icon-left,
.rz-button.rz-variant-filled.rz-primary .rz-button-icon-right,
.rz-button.rz-variant-filled.rz-primary .rzi,
.rz-button.rz-variant-filled.rz-primary i {
    color: var(--ap-text-on-accent) !important;
}

.rz-button.rz-variant-filled.rz-danger,
.rz-button.rz-variant-filled.rz-danger.rz-shade-default,
.rz-button.rz-variant-filled.rz-danger:hover,
.rz-button.rz-variant-filled.rz-danger:active,
.rz-button.rz-variant-filled.rz-danger:focus,
.rz-button.rz-variant-filled.rz-danger.rz-state-focused {
    background-color: var(--ap-action-danger-filled-bg) !important;
    color: var(--ap-text-on-accent) !important;
    border-color: var(--ap-action-danger-filled-border) !important;
}

.rz-button.rz-variant-filled.rz-danger .rz-button-box,
.rz-button.rz-variant-filled.rz-danger .rz-button-text,
.rz-button.rz-variant-filled.rz-danger .rz-button-icon-left,
.rz-button.rz-variant-filled.rz-danger .rz-button-icon-right,
.rz-button.rz-variant-filled.rz-danger .rzi,
.rz-button.rz-variant-filled.rz-danger i {
    color: var(--ap-text-on-accent) !important;
}

.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,
.rz-form-field .rz-form-field-label,
.rz-form-field .rz-form-field-label.rz-text-truncate {
    font-size: var(--ap-text-sm);
    font-weight: 600;
    color: var(--ap-text-primary);
}

.rz-form-field.rz-variant-filled > .rz-form-field-content > :not(.rz-state-empty):not(.rz-form-field-start):not(.rz-form-field-end) ~ .rz-form-field-label,
.rz-form-field.rz-variant-flat > .rz-form-field-content > :not(.rz-state-empty):not(.rz-form-field-start):not(.rz-form-field-end) ~ .rz-form-field-label,
.rz-form-field.rz-state-focused .rz-form-field-label,
.rz-form-field:not(.rz-floating-label) .rz-form-field-label,
.rz-form-field .rz-form-field-content > :not(.rz-state-empty):not(.rz-form-field-start):not(.rz-form-field-end) ~ .rz-form-field-label {
    color: var(--ap-text-primary) !important;
}

/* === 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);
    /* Control boundary — WCAG 1.4.11 requires >= 3:1, so this takes the STRONG
       tier. The recessive --ap-border-default is for decorative rules only. */
    border: 1px solid var(--ap-border-strong);
    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-datatable .rz-grid-table thead th {
    background-color: var(--ap-bg-surface);
    color: var(--ap-text-primary);
    border-color: 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,
.rz-datatable .rz-grid-table tbody tr:hover > td {
    background-color: var(--ap-primary-subtle);
}

.rz-datatable .rz-grid-table tbody tr > td,
.rz-datatable .rz-datatable-data > tr > td {
    background-color: var(--ap-bg-surface);
    color: var(--ap-text-primary);
    border-color: var(--ap-border-default);
}

.rz-datatable .rz-grid-table tbody tr:nth-child(even) > td,
.rz-datatable .rz-datatable-data > tr:nth-child(even) > td {
    background-color: var(--ap-bg-page);
}

.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,
.rz-datatable .rz-grid-table thead th .rz-column-title,
.rz-datatable .rz-grid-table thead th .rz-column-title-content {
    color: var(--ap-text-primary);
}

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

.rz-datatable .rz-grid-table thead th .rz-grid-filter-icon,
.rz-datatable .rz-grid-table thead th button.rz-grid-filter-icon,
.rz-datatable .rz-grid-table thead th .rzi {
    color: var(--ap-text-secondary);
}

.rz-pager .rz-pager-page.rz-state-active,
.rz-pager .rz-pager-element.rz-state-active {
    background-color: var(--ap-primary-subtle);
    color: var(--ap-primary-on-subtle);
    border-color: var(--ap-primary-on-subtle);
}

.rz-datatable-loading,
.rz-datatable-loading-content,
.rz-data-grid-loading,
.rz-grid-loading {
    pointer-events: none;
}

/* 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);
    /* Control boundary — WCAG 1.4.11 requires >= 3:1, so this takes the STRONG
       tier. The recessive --ap-border-default is for decorative rules only. */
    border: 1px solid var(--ap-border-strong);
}

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

/* Finding P-5c (SystemOK theme-selector sweep, SHA 892a67c1): the P-5b fix above
   covers the FILLED Light button (.rz-button.rz-light), but Radzen colours the
   TEXT variant with a separate, higher-specificity rule —
   `.rz-button.rz-variant-text.rz-light { color: var(--rz-base-200) }` (#eeeeee).
   The ThemeToggle icon button ships exactly this class set
   (`rz-button rz-button-md rz-variant-text rz-light`, see
   AppPlatform.Shared.UI/Components/Layout/ThemeToggle.razor), so its icon glyph
   rendered #eeeeee — 1.16:1 on the light `--ap-bg-surface` the ThemeToggle sits
   on (the header user-dropdown panel AND the Showroom theme-selector exhibit
   preview frame both paint --ap-bg-surface). --rz-base-200 is a fixed Radzen base
   primitive that never flips per theme, so the glyph was near-invisible in light
   theme. Pin the text-variant Light foreground to the theme-aware primary text
   token (keeping the variant's transparent fill) so the icon pairs correctly in
   BOTH bases (#212121 on #ffffff ≈ 16:1 light / #E0E0E0 on #2d2d2d ≈ 11.9:1 dark).
   Specificity 0,3,0 matches Radzen's own rule and this sheet loads after
   material-base.css, so the later, equal-specificity rule wins the cascade. */
.rz-button.rz-variant-text.rz-light {
    color: var(--ap-text-primary);
}

.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover,
.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active {
    color: var(--ap-text-primary);
}

.rz-alert .rz-button.rz-variant-text,
.rz-alert .rz-button.rz-variant-text .rzi,
.rz-alert .rz-button.rz-variant-text i {
    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);
}