/**
 * TaleTamer Accessibility Styles
 * WCAG 2.1 AA Compliance
 */

/* Screen Reader Only Content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    z-index: 9999 !important;
}

/* Skip to Main Content Link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    font-weight: 600;
    transition: top 0.3s ease;
}

.skip-to-main:focus {
    top: 0;
    color: #fff;
}

/* Enhanced Focus Styles.
   Die Schreibflaeche des Editors ist ausgenommen: Ein 2px-Rahmen um ein
   contenteditable, das die halbe Seite einnimmt, rahmt den gesamten Text ein,
   sobald man hineinklickt. Dort uebernimmt der blinkende Cursor die Anzeige
   des Fokus, und das Blatt hebt sich zusaetzlich durch einen Schatten ab
   (siehe .editor-paper:focus-within in editor.html.twig). */
*:focus:not(.editor-content) {
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 2px !important;
}

/* High contrast focus for buttons */
.btn:focus,
button:focus {
    outline: 3px solid var(--tt-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px var(--tt-focus) !important;
}

/* Form focus enhancements */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tt-focus) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--tt-focus-rgb), 0.25) !important;
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 1px !important;
}

/* Link focus */
a:focus {
    background-color: var(--tt-focus-flaeche) !important;
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 1px !important;
}

/* Navigation focus */
.nav-link:focus {
    background-color: rgba(var(--tt-focus-rgb), 0.1) !important;
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 1px !important;
}

/* Modal focus management */
.modal {
    outline: none;
}

.modal-dialog {
    outline: none;
}

/* Gedämpfter Text.
   Der frühere Festwert #6c757d war im Hellmodus vertretbar (4,7:1), im
   Dunkelmodus aber nur noch 3,76:1 – und er machte den Themenwechsel an
   458 Fundstellen unmöglich. Der Token liegt in beiden Modi höher:
   6,77:1 hell, 7,61:1 dunkel. */
.text-muted {
    color: var(--tt-text-muted) !important;
}

/* Knopf-Kontraste: bewusst entfernt.
   Hier standen rund 115 Zeilen !important-Regeln, die für jede Knopfvariante
   eigene Hover- und Focus-Farben festschrieben. Nötig war das, weil custom.css
   mit `.btn { background: ... !important }` alle Knöpfe auf dieselbe beige
   Fläche zog – die Signalfarbe erschien erst unter der Maus.
   Seit die Knopffarben über die --bs-btn-*-Variablen kommen, tragen die Knöpfe
   ihre Farbe dauerhaft, und Bootstrap 5.3 leitet die Zustände selbst ab. Alle
   zwölf Standardvarianten wurden nachgerechnet und liegen im Hover-Zustand
   zwischen 4,53:1 und 19,92:1, erfüllen WCAG AA also ohne Zutun.
   Die Regeln hier hätten die Variablen wieder überstimmt. */

/* Error states with better contrast */
.is-invalid {
    border-color: #dc3545 !important;
}

.invalid-feedback {
    color: #dc3545 !important;
    font-weight: 600 !important;
}

/* Success states */
.is-valid {
    border-color: #28a745 !important;
}

.valid-feedback {
    color: #28a745 !important;
    font-weight: 600 !important;
}

/* Loading states */
[aria-busy="true"] {
    cursor: wait !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

[aria-busy="true"]::after {
    content: " (Lädt...)";
    font-size: 0.875rem;
    color: #6c757d;
}

/* Required field indicators */
.form-label .text-danger {
    font-weight: bold;
}

/* Mindestgröße für Berührflächen (WCAG 2.5.5).
   min-height allein reicht nicht: Ein <a class="btn"> ist ein Blockelement,
   der Inhalt ist rund 29px hoch, und die aufgezwungenen 44px hängen die
   Differenz unten an – der Text saß dadurch 6,5px über der Mitte (gemessen).
   Bei <button> fällt es nicht auf, weil Browser dort selbst zentrieren.
   inline-flex mit Zentrierung in beide Richtungen behebt das für beide
   Elementarten und lässt Symbol und Beschriftung sauber nebeneinander sitzen. */
.btn {
    min-height: 44px !important;
    min-width: 44px !important;
    /* display bewusst OHNE !important: Die Anzeige-Utilities (.d-none,
       .d-lg-inline-flex …) setzen selbst !important. Mit !important hier
       gewänne diese Regel – accessibility.css wird nach bootstrap.min.css
       geladen – und ausgeblendete Knöpfe würden sichtbar, etwa der Admin-Knopf
       und der Token-Stand in der Navigationsleiste. Ohne !important schlägt
       die Regel Bootstraps `.btn { display: inline-block }` über die
       Ladereihenfolge, verliert aber gegen jede .d-*-Utility. */
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    /* Abstand zwischen Symbol und Beschriftung.
       Durch inline-flex wird der Textknoten zu einem eigenen Flex-Element, und
       dessen fuehrendes Leerzeichen faellt weg. Bei 625 Knoepfen traegt das
       Symbol ohnehin me-1 und war nicht betroffen; bei 40 Knoepfen machte
       genau dieses Leerzeichen den Abstand – dort klebte die Beschriftung
       danach am Symbol.
       Der Wert kommt aus --tt-knopf-luecke. 0.25rem entspraeche exakt dem
       bisherigen me-1, war fuer einen 44px hohen Knopf aber sehr eng – 0.5rem
       gibt Symbol und Beschriftung Luft, ohne die Knoepfe breit zu machen. */
    gap: var(--tt-knopf-luecke, 0.5rem);
}

/* Die Randklassen am Symbol wuerden sich sonst mit gap addieren und die
   Knoepfe unterschiedlich breit machen – je nachdem, ob die Auszeichnung
   me-1 oder me-2 verwendet. Ein Abstand, eine Quelle. */
.btn > i[class*="me-"],
.btn > svg[class*="me-"] {
    margin-right: 0 !important;
}

.form-control,
.form-select {
    min-height: 44px !important;
}

/* Improve table accessibility */
.table th {
    font-weight: 600 !important;
    border-bottom: 2px solid var(--tt-border) !important;
}

/* Zebrastreifen ueber currentColor statt fest Schwarz – auf dunklem Grund
   waere eine schwarze Toenung schlicht unsichtbar. */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, currentColor 4%, transparent) !important;
}

/* Alert improvements */
.alert {
    border-left: 4px solid;
    padding-left: 1rem !important;
}

.alert-danger {
    border-left-color: #dc3545 !important;
}

.alert-success {
    border-left-color: #28a745 !important;
}

.alert-warning {
    border-left-color: #ffc107 !important;
}

.alert-info {
    border-left-color: #17a2b8 !important;
}

/* Dropdown improvements */
.dropdown-menu {
    border: 2px solid var(--tt-border) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--tt-accent) !important;
    color: var(--tt-accent-contrast) !important;
}

/* Card improvements */
.card {
    border: 1px solid var(--tt-border) !important;
}

.card-header {
    border-bottom: 2px solid var(--tt-border) !important;
    font-weight: 600 !important;
}

/* Progress bar accessibility */
.progress {
    background-color: var(--tt-bg-form) !important;
    border: 1px solid var(--tt-border) !important;
}

.progress-bar {
    transition: width 0.6s ease !important;
}

/* Tooltip improvements */
.tooltip {
    font-size: 0.875rem !important;
    z-index: 1070 !important;
}

.tooltip-inner {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    padding: 0.5rem 0.75rem !important;
}

/* Badge improvements */
.badge {
    font-weight: 600 !important;
    padding: 0.375em 0.75em !important;
}

/* Pagination improvements */
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--tt-focus-rgb), 0.25) !important;
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 1px !important;
}

/* Custom checkbox/radio improvements */
.form-check-input:focus {
    border-color: var(--tt-focus) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--tt-focus-rgb), 0.25) !important;
    outline: 2px solid var(--tt-focus) !important;
    outline-offset: 1px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: #000 !important;
    }
    
    .btn-primary {
        background-color: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }
    
    .btn-outline-primary {
        color: #000 !important;
        border-color: #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dunkelmodus.
   Achtung: --bs-body-bg/--bs-body-color hier NICHT setzen. Unter Bootstrap 5.0
   waren die Werte folgenlos, weil Komponenten ihre Farben fest einkompiliert
   hatten. Ab 5.3 lesen card, list-group, dropdown, table und form-check diese
   Variablen aus – ein halber Satz dunkler Werte färbte dann einzelne Bauteile
   schwarz, während der Rest hell blieb. Das vollständige Farbschema kommt über
   data-bs-theme (siehe custom.css); hier stehen nur Regeln, die kein Gegenstück
   im Theme haben. */
@media (prefers-color-scheme: dark) {
    .skip-to-main {
        background: #fff;
        color: #000;
    }

    .skip-to-main:focus {
        color: #000;
    }
}