/**
 * KommApps Accessibility CSS - Fokus-Indikatoren
 * WCAG 2.1 AA, SC 2.4.7 (Focus Visible) und 1.4.11 (Non-Text Contrast)
 *
 * DIESE DATEI MUSS ALS LETZTES STYLESHEET GELADEN WERDEN.
 *
 * Herausgeloest aus accessibility.css am 29.08.2026. Grund: Die Fokusregeln
 * setzten sich bis dahin allein ueber !important durch, weil accessibility.css
 * VOR der Modul-CSS geladen wird - entgegen der eigenen Vorgabe im Dateikopf.
 * Das haelt, solange kein Modul-Stylesheet selbst ein outline-!important
 * mitbringt. Ein einziges genuegt, um den Fokusring still zu uebersteuern.
 *
 * accessibility.css konnte nicht einfach ans Ende wandern: 37 ihrer Regeln
 * tragen kein !important und wuerden dann neu ueber Modul-CSS gewinnen -
 * .btn-sm kollidiert mit 11 Modul-Stylesheets, .dropdown-item mit 10,
 * .quick-link-item mit 7, dazu alle Checkboxen und die Touch-Mindestgroessen.
 * Deshalb nur die Fokusregeln hier heraus; der Rest bleibt an seinem Platz.
 *
 * Die Farbe #0d6efd ist bewusst fest verdrahtet und NICHT --pp-accent: Ein
 * Fokusindikator braucht zugesicherten Kontrast (hier 4.5:1 auf Weiss), die
 * Akzentfarbe waehlt der Mandant frei und wird nur auf ein Hex-Muster geprueft.
 *
 * Pfad: /public/assets/css/accessibility-focus.css
 */

/* ==========================================================================
   1. FOCUS INDICATORS - Sichtbare Fokus-Indikatoren für alle interaktiven Elemente
   ========================================================================== */

/* Basis-Focus-Style für alle fokussierbaren Elemente */
*:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
}

/* Spezifische Focus-Styles für verschiedene Elemente */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25) !important;
}

/* Focus für Buttons - noch deutlicher */
.btn:focus,
button:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.35) !important;
}

/* Focus für Form-Elemente */
.form-control:focus,
.form-select:focus {
    border-color: #0d6efd !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

/* Focus für Checkboxen und Radio-Buttons */
.form-check-input:focus {
    border-color: #0d6efd !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

/* Focus für Links in Navigation */
.nav-link:focus,
.navbar-nav .nav-link:focus {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Focus für Dropdown-Items */
.dropdown-item:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: -2px !important;
    background-color: #e9ecef !important;
}

/* Focus für Cards (wenn klickbar) */
.card:focus,
.card[tabindex]:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
}

/* Focus für Modal-Elemente */
.modal-content:focus {
    outline: none !important; /* Modal selbst braucht keinen Fokus-Ring */
}

.modal .btn-close:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ==========================================================================
   2. FOCUS-VISIBLE - Moderne Browser-Unterstützung
   ========================================================================== */

/* Focus-visible für Keyboard-Only Focus (moderne Browser) */
*:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
}

/* Verstecke Focus-Ring bei Maus-Klick (nur wenn focus-visible unterstützt wird) */
@supports selector(:focus-visible) {
    *:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Aber behalte Focus für Form-Elemente auch bei Maus */
    input:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible) {
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
    }
}