[data-theme="contrast"] {
    color-scheme: dark;
    --color-surface-primary: #000000;
    --color-surface-primary-variant: #000000;
    --color-surface-secondary: #000000;
    --color-shell-surface: var(--color-surface-primary);
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #FFFFFF;
    /* Kontextfarbe des Contrast-Themes: CTA- und Auswahlzustände nur hier anpassen */
    --color-context-background: #FFFFFF;
    --color-context-foreground: #000000;
    --color-interactive-cta: var(--color-context-background);
    --color-interactive-cta-hover: rgba(255, 255, 255, 0.5);
    --color-interactive-cta-text: var(--color-context-foreground);
    --color-interactive-active: var(--color-context-background);
    --color-interactive-hover: rgba(255, 255, 255, 0.5);
    --color-border: #FFFFFF;
    --color-border-shell: #FFFFFF;
    --color-border-rgb: 255, 255, 255;
    --color-input-surface: var(--color-surface-secondary);
    --shadow-level1: none;
    --shadow-level2: none;
    --focus-ring-color: var(--color-context-background);
    --form-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}

/* Contrast theme specific login card border */
[data-theme="contrast"] .login-card {
    border: 2px solid var(--color-border);
    box-shadow: none;
}

/*
 * Eingabefelder im Contrast Theme
 * Die Grundstile werden zentral in main.css definiert und nutzen Design Tokens.
 * Hier nur Contrast-spezifische Anpassungen.
 */

/* Contrast theme specific external elements */
[data-theme="contrast"] .error-message-external {
    background-color: #FF0000;
    color: var(--color-text-primary);
    border: 2px solid #FF0000;
    font-weight: 600;
}

/* Linkfarbe im Contrast Theme */
[data-theme="contrast"] a,
[data-theme="contrast"] .form-link,
[data-theme="contrast"] .switch-login-type-link {
    color: var(--color-text-primary);
}

[data-theme="contrast"] a:hover,
[data-theme="contrast"] .form-link:hover,
[data-theme="contrast"] .switch-login-type-link:hover {
    color: #DDDDDD;
}

/* ==========================================================================
   DataTable - Contrast Theme
   Maximum overlay values for high contrast accessibility.
   White context color on black surface provides clear visual feedback.
   Values: 15% hover, 25% selected, 30% selected+hover (highest tier)
   ========================================================================== */

[data-theme="contrast"] .datatable {
    --datatable-row-hover-bg: color-mix(in srgb, var(--color-context-background) 15%, var(--datatable-row-bg));
    --datatable-row-selected-bg: color-mix(in srgb, var(--color-context-background) 25%, var(--datatable-row-bg));
    --datatable-row-selected-hover-bg: color-mix(in srgb, var(--color-context-background) 30%, var(--datatable-row-bg));
    --datatable-row-hover-accent: color-mix(in srgb, var(--color-context-background) 70%, transparent);
}

/* Checkbox - black checkmark on white background for contrast theme */
[data-theme="contrast"] .datatable__checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

[data-theme="contrast"] .datatable__checkbox:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Crect x='3' y='7' width='10' height='2' rx='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Calendar - Contrast Theme
   Maximum overlay values for high contrast accessibility.
   Matches DataTable pattern for visual consistency.
   Values: 15% hover, 25% selected, 30% selected+hover (highest tier)
   ========================================================================== */

[data-theme="contrast"] .calendar {
    --calendar-cell-hover-bg: color-mix(in srgb, var(--color-context-background) 15%, var(--calendar-cell-bg));
    --calendar-cell-selected-bg: color-mix(in srgb, var(--color-context-background) 25%, var(--calendar-cell-bg));
    --calendar-cell-selected-hover-bg: color-mix(in srgb, var(--color-context-background) 30%, var(--calendar-cell-bg));
    --calendar-today-indicator-bg: var(--calendar-cell-hover-bg);
}