/**
 * MietPilot – 50+ Barrierefreiheits-Theme
 *
 * Ziele:
 *  - Größere Schriften (≥ 17 px Basis)
 *  - Touch-Targets ≥ 44 px (WCAG 2.5.5)
 *  - Starke Kontraste (WCAG AA: ≥ 4.5:1)
 *  - Deutliche Fokus-Indikatoren
 *  - Lesbarer Zeilenabstand (≥ 1.5)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Basis-Typografie
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-body {
    font-size: 1.0625rem; /* 17 px */
    line-height: 1.6;
}

/* Tabellen: mehr Luft und größere Schrift */
.fi-ta-cell {
    font-size: 1rem !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    line-height: 1.5 !important;
}

.fi-ta-header-cell {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Überschriften im Panel */
.fi-section-header-heading {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

.fi-page-header-heading {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Touch-Targets (min 44 px)
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-btn {
    min-height: 44px !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 1rem !important;
}

.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    min-height: 44px !important;
    font-size: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    line-height: 1.5 !important;
}

/* Checkboxen und Radios größer */
.fi-checkbox-input,
.fi-radio-input {
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem !important;
}

/* Toggle-Switch größer */
.fi-toggle-input {
    width: 3rem !important;
    height: 1.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar-Navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-sidebar-item-button {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.fi-sidebar-nav-groups-item .fi-sidebar-group-label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Formular-Labels und Hilfetext
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-fo-field-wrp-label label {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #111827 !important; /* sehr dunkel für hohen Kontrast */
}

.fi-fo-field-wrp-helper-text p {
    font-size: 0.9375rem !important;
    color: #374151 !important;
    line-height: 1.5 !important;
}

/* Pflichtfeld-Sternchen deutlicher */
.fi-fo-field-wrp-label sup {
    font-size: 0.875rem !important;
    color: #dc2626 !important;
}

/* Validierungsfehler größer */
.fi-fo-field-wrp-error-message p {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fokus-Indikatoren (WCAG 2.4.7)
   ═══════════════════════════════════════════════════════════════════════════ */

*:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Benachrichtigungen
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-no-notification {
    font-size: 1rem !important;
}

.fi-no-notification-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Badges und Status-Anzeigen
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-badge {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dropdown-Menüs
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-dropdown-list-item-label {
    font-size: 1rem !important;
}

.fi-dropdown-list-item {
    min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Paginierung
   ═══════════════════════════════════════════════════════════════════════════ */

.fi-pagination-item button,
.fi-pagination-item a {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Optimierungen
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .fi-body {
        font-size: 1.0625rem; /* kein iOS-Zoom bei ≥ 16 px */
    }

    .fi-btn {
        min-height: 52px !important;
        font-size: 1.0625rem !important;
    }

    .fi-input-wrp input,
    .fi-input-wrp select {
        font-size: 1rem !important; /* iOS-Auto-Zoom verhindert (≥ 16 px) */
        min-height: 52px !important;
    }

    .fi-sidebar-item-button {
        min-height: 56px !important;
        font-size: 1.0625rem !important;
    }

    /* Tabelle auf Mobil: Schrift nicht kleiner als 15px */
    .fi-ta-cell {
        font-size: 0.9375rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark-Mode Kontrast-Verbesserungen
   ═══════════════════════════════════════════════════════════════════════════ */

.dark .fi-fo-field-wrp-label label {
    color: #f9fafb !important;
}

.dark .fi-fo-field-wrp-helper-text p {
    color: #d1d5db !important;
}