/* =====================================================
   INPUT FOCUS THEME FIX
   Passt Focus-Highlighting an alle Themes an
   ===================================================== */

/* === LIGHT MODE (DEFAULT) === */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgb(79, 70, 229) !important; /* --brand indigo */
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
    background-color: var(--bg-card) !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid rgb(79, 70, 229) !important;
    outline-offset: 2px !important;
}

/* Ring bei Brand-Backgrounds */
.bg-brand:focus,
.bg-brand:focus-visible {
    outline-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

/* === DARK MODE === */
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    outline: none !important;
    border-color: rgb(129, 140, 248) !important; /* --brand indigo light */
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
    background-color: var(--bg-card) !important;
}

.dark input:focus-visible,
.dark textarea:focus-visible,
.dark select:focus-visible,
.dark button:focus-visible {
    outline: 2px solid rgb(129, 140, 248) !important;
    outline-offset: 2px !important;
}

.dark .bg-brand:focus,
.dark .bg-brand:focus-visible {
    outline-color: rgb(129, 140, 248) !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3) !important;
}

/* === JAPANDI THEME === */
[data-theme="japandi"] input:focus,
[data-theme="japandi"] textarea:focus,
[data-theme="japandi"] select:focus {
    outline: none !important;
    border-color: rgb(138, 154, 91) !important; /* --brand olive */
    box-shadow: 0 0 0 3px rgba(138, 154, 91, 0.15) !important;
    background-color: var(--bg-card) !important;
}

[data-theme="japandi"] input:focus-visible,
[data-theme="japandi"] textarea:focus-visible,
[data-theme="japandi"] select:focus-visible,
[data-theme="japandi"] button:focus-visible {
    outline: 2px solid rgb(138, 154, 91) !important;
    outline-offset: 2px !important;
}

[data-theme="japandi"] .bg-brand:focus,
[data-theme="japandi"] .bg-brand:focus-visible {
    outline-color: rgb(138, 154, 91) !important;
    box-shadow: 0 0 0 3px rgba(138, 154, 91, 0.25) !important;
}

/* === SPEZIELLE ELEMENTE === */

/* AI Quick Input */
#aiQuickInputField:focus {
    border-color: rgb(var(--brand-rgb)) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.1) !important;
}

/* Filter Inputs */
#filterSearch:focus,
#filterContainer input:focus,
#filterContainer select:focus {
    border-color: rgb(var(--brand-rgb)) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.1) !important;
}

/* Form Inputs */
#bookForm input:focus,
#bookForm select:focus,
#bookForm textarea:focus {
    border-color: rgb(var(--brand-rgb)) !important;
    background-color: var(--bg-card) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.08) !important;
}

/* Buttons mit Focus (keine blauen Outlines) */
button:focus:not(:focus-visible) {
    outline: none !important;
}

/* Tab-Navigation sichtbar machen */
button:focus-visible {
    outline: 2px solid rgb(var(--brand-rgb)) !important;
    outline-offset: 2px !important;
}

/* === ACCESSIBILITY === */
/* Für User die Tab-Navigation bevorzugen */
*:focus-visible {
    outline: 2px solid rgb(var(--brand-rgb)) !important;
    outline-offset: 2px !important;
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    input:focus,
    textarea:focus,
    select:focus {
        outline-width: 3px !important;
        box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.2) !important;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    input:focus,
    textarea:focus,
    select:focus {
        transition: none !important;
    }
}

/* === REMOVE DEFAULT BROWSER BLUE === */
input,
textarea,
select,
button {
    outline-color: transparent !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
}

/* Override any existing focus styles */
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset, 0 0 0 3px rgba(var(--brand-rgb), 0.1) !important;
}