/**
 * FocusManagement.css - Focus-Ring Styling
 * =========================================
 * WCAG 2.4.7: Focus Visible
 *
 * Sichtbare Focus-Ringe fuer alle interaktiven Elemente.
 * Unterstuetzt :focus-visible fuer bessere UX.
 *
 * Features:
 * - Konfigurierbare Focus-Ringe via CSS Custom Properties
 * - :focus-visible Support (nur bei Tastatur-Navigation)
 * - Focus-Trap Styling
 * - Focus-Restore Markierung
 *
 * @version 1.0.0
 * @since TYPO3 13 LTS
 * @author made in nature Projektagentur
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Focus Ring Farben */
    --min-focus-color: #005fcc;
    --min-focus-color-light: #3b82f6;
    --min-focus-color-dark: #1d4ed8;
    --min-focus-color-invert: #ffffff;

    /* Focus Ring Dimensionen */
    --min-focus-width: 3px;
    --min-focus-offset: 2px;
    --min-focus-radius: 2px;

    /* Focus Ring Styles */
    --min-focus-style: solid;

    /* Alternative Focus Styles */
    --min-focus-shadow: 0 0 0 var(--min-focus-width) var(--min-focus-color);
    --min-focus-shadow-inset: inset 0 0 0 var(--min-focus-width) var(--min-focus-color);

    /* Focus Ring Transition */
    --min-focus-transition: outline-offset 100ms ease-out, outline-color 100ms ease-out;

    /* Erhoehte Sichtbarkeit */
    --min-focus-width-enhanced: 4px;
    --min-focus-offset-enhanced: 4px;
}

/* ==========================================================================
   Globale Focus-Visible Styles
   ========================================================================== */

/* Standard Focus-Visible fuer alle interaktiven Elemente */
:focus-visible {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
    border-radius: var(--min-focus-radius);
    transition: var(--min-focus-transition);
}

/* Focus ohne :focus-visible entfernen (Maus-Klick) */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Element-spezifische Focus Styles
   ========================================================================== */

/* Links */
a:focus-visible {
    outline-color: var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
    text-decoration-thickness: 2px;
}

/* Buttons */
button:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline-color: var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
}

/* Form Inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-color: var(--min-focus-color);
    outline-offset: 0;
    border-color: var(--min-focus-color);
}

/* Checkboxes & Radio Buttons */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline-offset: var(--min-focus-offset);
    box-shadow: var(--min-focus-shadow);
}

/* Range Slider */
input[type="range"]:focus-visible {
    outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--min-focus-shadow);
}

input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: var(--min-focus-shadow);
}

/* ==========================================================================
   Custom Focus Classes
   ========================================================================== */

/* Standard Focus Ring */
.min-focus:focus-visible,
.min-focus-ring:focus-visible {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
}

/* Erhoehte Sichtbarkeit (fuer wichtige Elemente) */
.min-focus--enhanced:focus-visible {
    outline-width: var(--min-focus-width-enhanced);
    outline-offset: var(--min-focus-offset-enhanced);
}

/* Innerer Focus Ring */
.min-focus--inset:focus-visible {
    outline: none;
    box-shadow: var(--min-focus-shadow-inset);
}

/* Kein Focus Ring (fuer spezielle Faelle, z.B. Thumbnails in Galerie) */
.min-focus--none:focus-visible {
    outline: none;
}

/* Focus Ring mit Schatten (erhoeht Sichtbarkeit auf komplexen Hintergruenden) */
.min-focus--shadow:focus-visible {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
    box-shadow: 0 0 0 calc(var(--min-focus-width) + var(--min-focus-offset) + 2px) rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Farbvarianten
   ========================================================================== */

/* Hell (fuer dunkle Hintergruende) */
.min-focus--light:focus-visible {
    --min-focus-color: #ffffff;
}

/* Dunkel (fuer helle Hintergruende) */
.min-focus--dark:focus-visible {
    --min-focus-color: #000000;
}

/* Primaerfarbe */
.min-focus--primary:focus-visible {
    --min-focus-color: var(--min-color-primary, #2563eb);
}

/* Sekundaerfarbe */
.min-focus--secondary:focus-visible {
    --min-focus-color: var(--min-color-secondary, #64748b);
}

/* Erfolg */
.min-focus--success:focus-visible {
    --min-focus-color: var(--min-success-500, #22c55e);
}

/* Warnung */
.min-focus--warning:focus-visible {
    --min-focus-color: var(--min-warning-500, #f59e0b);
}

/* Fehler */
.min-focus--error:focus-visible {
    --min-focus-color: var(--min-error-500, #ef4444);
}

/* ==========================================================================
   Focus Trap Container
   ========================================================================== */

/* Container der den Focus einschraenkt */
.min-focus-trap {
    position: relative;
}

/* Aktiver Focus Trap */
.min-focus-trap[data-focus-trapped="true"],
.min-focus-trap[aria-modal="true"] {
    /* Visueller Indikator dass Focus eingesperrt ist */
}

/* Fokussierbare Sentinel-Elemente am Anfang/Ende */
.min-focus-trap__sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Focus Restore Markierung
   ========================================================================== */

/* Element das den Focus nach Schliessen eines Modals erhaelt */
.min-focus-restore[data-focus-restore="true"] {
    position: relative;
}

/* Visueller Indikator */
.min-focus-restore[data-focus-restore="true"]::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--min-focus-offset));
    border: var(--min-focus-width) dashed var(--min-focus-color);
    border-radius: calc(var(--min-focus-radius) + var(--min-focus-offset));
    opacity: 0;
    pointer-events: none;
    animation: min-focus-restore-pulse 0.6s ease-out;
}

@keyframes min-focus-restore-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* ==========================================================================
   Keyboard Navigation Indicator
   ========================================================================== */

/* Body-Klasse wenn Tastatur-Navigation aktiv */
.min-keyboard-nav :focus {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
}

/* Entfernt Focus fuer Maus-Nutzer */
.min-mouse-nav :focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Roving Tabindex (fuer Widgets wie Tabs, Menus)
   ========================================================================== */

/* Aktives Element in einer Gruppe */
[role="tablist"] [role="tab"][tabindex="0"]:focus-visible,
[role="menu"] [role="menuitem"][tabindex="0"]:focus-visible,
[role="menubar"] [role="menuitem"][tabindex="0"]:focus-visible,
[role="listbox"] [role="option"][tabindex="0"]:focus-visible,
[role="radiogroup"] [role="radio"][tabindex="0"]:focus-visible {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
}

/* Nicht-aktive Elemente */
[role="tablist"] [role="tab"][tabindex="-1"]:focus-visible,
[role="menu"] [role="menuitem"][tabindex="-1"]:focus-visible {
    outline-style: dashed;
}

/* ==========================================================================
   Focus Within (Eltern-Element Styling)
   ========================================================================== */

/* Container der ein fokussiertes Kind enthaelt */
.min-focus-within:focus-within {
    outline: 1px dashed var(--min-focus-color);
    outline-offset: var(--min-focus-offset);
}

/* Beispiel: Card mit fokussierbarem Link */
.min-card:focus-within {
    box-shadow: var(--min-focus-shadow);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --min-focus-color: #60a5fa;
        --min-focus-color-light: #93c5fd;
        --min-focus-color-dark: #3b82f6;
    }
}

/* Expliziter Dark Mode */
[data-theme="dark"],
.dark {
    --min-focus-color: #60a5fa;
    --min-focus-color-light: #93c5fd;
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

/* Expliziter High Contrast */
[data-contrast="high-contrast-light"],
[data-contrast="high-contrast-dark"] {
    --min-focus-width: 4px;
    --min-focus-offset: 3px;
}

[data-contrast="high-contrast-light"] {
    --min-focus-color: #0000ff;
}

[data-contrast="high-contrast-dark"] {
    --min-focus-color: #00ffff;
}

/* ==========================================================================
   Windows High Contrast Mode (Forced Colors)
   ========================================================================== */

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
        forced-color-adjust: none;
    }

    /* Wichtige Elemente */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid Highlight !important;
    }

    .min-focus-trap__sentinel {
        display: none;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :focus-visible {
        transition: none;
    }

    .min-focus-restore[data-focus-restore="true"]::after {
        animation: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    :focus-visible {
        outline: 2px solid #000 !important;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Focus-Ring temporaer verstecken */
.min-focus-hidden {
    outline: none !important;
}

/* Focus-Ring immer zeigen (auch bei Maus) */
.min-focus-always:focus {
    outline: var(--min-focus-width) var(--min-focus-style) var(--min-focus-color) !important;
    outline-offset: var(--min-focus-offset) !important;
}

/* Skip Focus (fuer dekorative Elemente) */
.min-focus-skip {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Custom Property Overrides (In HTML nutzbar)
   ========================================================================== */

/*
 * Verwendung:
 * <button style="--min-focus-color: #ff0000;">Roter Focus</button>
 * <button style="--min-focus-width: 5px;">Dicker Focus</button>
 */

[style*="--min-focus-color"]:focus-visible {
    outline-color: var(--min-focus-color);
}

[style*="--min-focus-width"]:focus-visible {
    outline-width: var(--min-focus-width);
}

[style*="--min-focus-offset"]:focus-visible {
    outline-offset: var(--min-focus-offset);
}