/* Syncfusion Fluent 2 auf die Nexovis-Tokens abbilden (Bedienkonzept Abschnitt 8, NCNXDASH-67).
 *
 * Wird nach fluent2.css und nach brand/tokens/tokens.css geladen. Es werden nur CSS-Variablen des Themes
 * überschrieben, keine Selektoren einzelner Komponenten (eine begründete Ausnahme am Ende). Hell und dunkel folgen automatisch den Tokens
 * (prefers-color-scheme bzw. data-theme), deshalb gibt es keinen eigenen Dunkel-Block.
 *
 * Primärfarbe von Syncfusion ist Waldgrün, nicht Sonnengelb: Syncfusion nutzt sie auch für Häkchen,
 * aktive Seitenzahlen, Fokusränder und Links, und Gelb darf auf Weiß weder Text noch freistehende Linie
 * sein (Kit, Gelb-Regel). Sonnengelb bleibt der Auswahlfläche und unseren eigenen Primär-Buttons (NxButton).
 * Keine Hex-Werte: Zwischentöne entstehen mit color-mix aus Tokens.
 */

:root {
    --e-font-name: var(--nx-font-brand);
    --e-serif-font-name: var(--nx-font-brand);
    --e-mono-font-name: var(--nx-font-mono);

    /* Primär: Waldgrün mit weißer Schrift */
    --color-sf-primary: var(--nx-emphasis);
    --color-sf-primary-text-color: var(--nx-bg);
    --color-sf-primary-light: color-mix(in srgb, var(--nx-emphasis) 30%, var(--nx-surface));
    --color-sf-primary-lighter: var(--nx-yellow-100);
    --color-sf-primary-dark: var(--nx-link-hover);
    --color-sf-primary-darker: var(--nx-link-hover);
    --color-sf-primary-bg-color-hover: var(--nx-link-hover);
    --color-sf-primary-bg-color-pressed: var(--nx-link-hover);
    --color-sf-primary-bg-color-selected: var(--nx-link-hover);
    --color-sf-primary-bg-color-disabled: var(--nx-bg-subtle);
    --color-sf-primary-text-disabled: var(--nx-neutral-400);
    --color-sf-primary-cell-selection: var(--nx-yellow-100);

    /* Flächen und Schrift */
    --color-sf-content-bg-color: var(--nx-surface);
    --color-sf-content-bg-color-alt1: var(--nx-surface);
    --color-sf-content-bg-color-alt2: var(--nx-bg-subtle);
    --color-sf-content-bg-color-hover: color-mix(in srgb, var(--nx-text) 5%, var(--nx-surface));
    --color-sf-content-bg-color-pressed: color-mix(in srgb, var(--nx-text) 10%, var(--nx-surface));
    --color-sf-content-bg-color-focus: color-mix(in srgb, var(--nx-text) 5%, var(--nx-surface));
    --color-sf-content-bg-color-selected: var(--nx-yellow-100);
    --color-sf-content-bg-color-disabled: var(--nx-bg-subtle);
    --color-sf-flyout-bg-color: var(--nx-surface-raised);
    --color-sf-content-text-color: var(--nx-text);
    --color-sf-content-text-color-alt1: var(--nx-text-secondary);
    --color-sf-content-text-color-alt2: var(--nx-text-muted);
    --color-sf-content-text-color-disabled: var(--nx-neutral-400);
    --color-sf-flyout-text-color: var(--nx-text);
    --color-sf-icon-color: var(--nx-text-secondary);

    /* Zustände: Fluent 2 bringt dafür eigene helle Werte mit. Ohne Abbildung bleiben sie im Dunkelmodus hell,
     * während die Schrift den Tokens folgt und weiß wird (NCNXDASH-103). Auswahl immer Sonnengelb mit dunkler Schrift. */
    --color-sf-content-text-color-hover: var(--nx-text);
    --color-sf-content-text-color-pressed: var(--nx-text);
    --color-sf-content-text-color-selected: var(--nx-text-on-status-fill);
    --color-sf-flyout-bg-color-hover: color-mix(in srgb, var(--nx-text) 6%, var(--nx-surface-raised));
    --color-sf-flyout-bg-color-focus: color-mix(in srgb, var(--nx-text) 6%, var(--nx-surface-raised));
    --color-sf-flyout-bg-color-pressed: color-mix(in srgb, var(--nx-text) 12%, var(--nx-surface-raised));
    --color-sf-flyout-bg-color-selected: var(--nx-yellow-100);
    --color-sf-flyout-text-color-hover: var(--nx-text);
    --color-sf-flyout-text-color-focus: var(--nx-text);
    --color-sf-flyout-text-color-pressed: var(--nx-text);
    --color-sf-flyout-text-color-selected: var(--nx-text-on-status-fill);

    /* Tabellen: Überfahren leicht getönt; Auswahl Sonnengelb-Fläche mit dunkler Schrift (Kit: Zeilenauswahl --nx-yellow-100) */
    --color-sf-table-bg-color-hover: color-mix(in srgb, var(--nx-text) 5%, var(--nx-surface));
    --color-sf-table-bg-color-pressed: color-mix(in srgb, var(--nx-text) 10%, var(--nx-surface));
    --color-sf-table-text-color-hover: var(--nx-text);
    --color-sf-table-bg-color-selected: var(--nx-yellow-100);
    --color-sf-table-text-color-selected: var(--nx-text-on-status-fill);
    --color-sf-cell-selection-bg-color: var(--nx-yellow-100);

    /* Rahmen */
    --color-sf-border: var(--nx-border);
    --color-sf-border-light: var(--nx-border);
    --color-sf-border-hover: var(--nx-border-strong);
    --color-sf-border-focus: var(--nx-emphasis);
    --color-sf-border-pressed: var(--nx-emphasis);
    --color-sf-flyout-border: var(--nx-border);

    /* Sekundär-Buttons von Syncfusion: wie NxButton sekundär */
    --color-sf-secondary-bg-color: transparent;
    --color-sf-secondary-border-color: var(--nx-emphasis);
    --color-sf-secondary-text-color: var(--nx-emphasis);
    --color-sf-secondary-bg-color-hover: color-mix(in srgb, var(--nx-text) 5%, var(--nx-surface));

    /* Status */
    --color-sf-success: var(--nx-success);
    --color-sf-warning: var(--nx-warning);
    --color-sf-danger: var(--nx-error);
    --color-sf-info: var(--nx-info);

    /* Links in Syncfusion-Komponenten */
    --color-sf-link-button: var(--nx-link);
    --color-sf-link-button-hover: var(--nx-link-hover);

    --color-sf-skeleton-bg-color: var(--nx-neutral-100);
}

/* Ausnahme von der Regel „nur Variablen“: Das Grid färbt die Schrift ausgewählter Zellen über
 * --color-sf-icon-color-pressed. Die Variable global umzubiegen träfe gedrückte Symbole auf dunkler Fläche,
 * deshalb nur hier. Sonnengelb bleibt auch im Dunkelmodus hell, die Schrift muss dunkel sein (NCNXDASH-103). */
/* Gleiche Spezifität wie die Regel in fluent2.css; diese Datei wird später geladen und gewinnt. */
.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd).e-active,
.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd).e-selectionbackground {
    color: var(--nx-text-on-status-fill);
}