/* Custom CSS for FLVS */

/* Two-column layout for settings and profile pages */
@media (min-width: 1024px) {
    .settings-layout,
    .profile-layout {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
    }

    .settings-layout .sidebar-nav {
        width: 280px;
        flex-shrink: 0;
    }

    .settings-layout .content-area {
        flex: 1;
        min-width: 0;
    }

    .profile-layout .sidebar-profile {
        width: 320px;
        flex-shrink: 0;
    }

    .profile-layout .content-main {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .settings-layout,
    .profile-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .settings-layout .sidebar-nav,
    .settings-layout .content-area,
    .profile-layout .sidebar-profile,
    .profile-layout .content-main {
        width: 100%;
    }
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode - Body & Backgrounds */
.dark {
    background-color: #111827;
    color: #F9FAFB;
}

.dark .bg-white {
    background-color: #1F2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1F2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

.dark .bg-gray-300 {
    background-color: #4B5563 !important;
}

/* Dark mode - Text colors */
.dark .text-gray-900 {
    color: #F9FAFB !important;
}

.dark .text-gray-800 {
    color: #F3F4F6 !important;
}

.dark .text-gray-700 {
    color: #E5E7EB !important;
}

.dark .text-gray-600 {
    color: #D1D5DB !important;
}

.dark .text-gray-500 {
    color: #9CA3AF !important;
}

.dark .text-gray-400 {
    color: #6B7280 !important;
}

/* Dark mode - Borders */
.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-300 {
    border-color: #4B5563 !important;
}

/* Dark mode - Hover states */
.dark .hover\:bg-gray-50:hover {
    background-color: #1F2937 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #4B5563 !important;
}

.dark .hover\:text-gray-700:hover {
    color: #E5E7EB !important;
}

.dark .hover\:text-gray-900:hover {
    color: #F9FAFB !important;
}

/* Dark mode - Forms */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark select,
.dark textarea {
    background-color: #1F2937;
    border-color: #4B5563;
    color: #F9FAFB;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="time"]:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #DC2626;
    background-color: #111827;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6B7280;
}

/* Dark mode - Buttons
   Weiße Buttons (.bg-white) werden hier bewusst ausgenommen: ihre Textfarbe
   wird weiter unten je nach Kontext gesetzt. */
.dark button:not(.bg-primary-600):not(.bg-red-600):not(.bg-green-600):not(.bg-white) {
    color: #F9FAFB;
}

/* Dark mode - Weiße Buttons mit farbiger Schrift
   Problem: ".dark .bg-white" färbt den Hintergrund dunkel, die dunkle
   Schriftfarbe (z.B. text-indigo-700) bleibt -> dunkel auf dunkel.
   Außerhalb farbiger Header bekommt die Schrift deshalb eine helle Variante. */
.dark .bg-white.text-indigo-600, .dark .bg-white.text-indigo-700, .dark .bg-white.text-indigo-800 {
    color: #A5B4FC !important;
}

.dark .bg-white.text-blue-600, .dark .bg-white.text-blue-700, .dark .bg-white.text-blue-800 {
    color: #93C5FD !important;
}

.dark .bg-white.text-red-600, .dark .bg-white.text-red-700, .dark .bg-white.text-red-800 {
    color: #FCA5A5 !important;
}

.dark .bg-white.text-green-600, .dark .bg-white.text-green-700, .dark .bg-white.text-green-800 {
    color: #86EFAC !important;
}

.dark .bg-white.text-purple-600, .dark .bg-white.text-purple-700, .dark .bg-white.text-purple-800 {
    color: #D8B4FE !important;
}

.dark .bg-white.text-teal-600, .dark .bg-white.text-teal-700, .dark .bg-white.text-teal-800 {
    color: #5EEAD4 !important;
}

.dark .bg-white.text-amber-600, .dark .bg-white.text-amber-700, .dark .bg-white.text-amber-800 {
    color: #FCD34D !important;
}

.dark .bg-white.text-orange-600, .dark .bg-white.text-orange-700, .dark .bg-white.text-orange-800 {
    color: #FDBA74 !important;
}

.dark .bg-white.text-yellow-600, .dark .bg-white.text-yellow-700, .dark .bg-white.text-yellow-800 {
    color: #FDE047 !important;
}

/* Dark mode - Buttons mit hellem Farbton-Hintergrund (bg-<farbe>-50/100)
   Problem: Die generische Button-Regel oben macht die Schrift fast weiß,
   für orange/amber/indigo/purple/pink/cyan gibt es aber keine dunkle
   Hintergrund-Variante -> helle Schrift auf hellem Button. Deshalb bekommen
   diese Buttons einen dunklen Hintergrund und (auch für Überschriften darin)
   eine helle Farbvariante. Badges/Karten mit denselben Klassen bleiben unberührt. */
.dark button.bg-orange-50, .dark button.bg-orange-100 { background-color: #431407 !important; }
.dark button.bg-orange-50:hover, .dark button.bg-orange-100:hover { background-color: #7C2D12 !important; }
.dark button.bg-orange-50 [class*="text-orange-"], .dark button.bg-orange-100 [class*="text-orange-"],
.dark button.bg-orange-50[class*="text-orange-"], .dark button.bg-orange-100[class*="text-orange-"] { color: #FDBA74 !important; }

.dark button.bg-amber-50, .dark button.bg-amber-100 { background-color: #451A03 !important; }
.dark button.bg-amber-50:hover, .dark button.bg-amber-100:hover { background-color: #78350F !important; }
.dark button.bg-amber-50 [class*="text-amber-"], .dark button.bg-amber-100 [class*="text-amber-"],
.dark button.bg-amber-50[class*="text-amber-"], .dark button.bg-amber-100[class*="text-amber-"] { color: #FCD34D !important; }

.dark button.bg-indigo-50, .dark button.bg-indigo-100 { background-color: #1E1B4B !important; }
.dark button.bg-indigo-50:hover, .dark button.bg-indigo-100:hover { background-color: #312E81 !important; }
.dark button.bg-indigo-50 [class*="text-indigo-"], .dark button.bg-indigo-100 [class*="text-indigo-"],
.dark button.bg-indigo-50[class*="text-indigo-"], .dark button.bg-indigo-100[class*="text-indigo-"] { color: #A5B4FC !important; }

.dark button.bg-purple-50, .dark button.bg-purple-100 { background-color: #3B0764 !important; }
.dark button.bg-purple-50:hover, .dark button.bg-purple-100:hover { background-color: #581C87 !important; }
.dark button.bg-purple-50 [class*="text-purple-"], .dark button.bg-purple-100 [class*="text-purple-"],
.dark button.bg-purple-50[class*="text-purple-"], .dark button.bg-purple-100[class*="text-purple-"] { color: #D8B4FE !important; }

.dark button.bg-pink-50, .dark button.bg-pink-100 { background-color: #500724 !important; }
.dark button.bg-pink-50:hover, .dark button.bg-pink-100:hover { background-color: #831843 !important; }
.dark button.bg-pink-50 [class*="text-pink-"], .dark button.bg-pink-100 [class*="text-pink-"],
.dark button.bg-pink-50[class*="text-pink-"], .dark button.bg-pink-100[class*="text-pink-"] { color: #F9A8D4 !important; }

.dark button.bg-cyan-50, .dark button.bg-cyan-100 { background-color: #083344 !important; }
.dark button.bg-cyan-50:hover, .dark button.bg-cyan-100:hover { background-color: #164E63 !important; }
.dark button.bg-cyan-50 [class*="text-cyan-"], .dark button.bg-cyan-100 [class*="text-cyan-"],
.dark button.bg-cyan-50[class*="text-cyan-"], .dark button.bg-cyan-100[class*="text-cyan-"] { color: #67E8F9 !important; }

/* Dark mode - Helle Verlaufs-Header (from-<farbe>-50/100 to-<farbe>-50/100/200)
   z.B. Dashboard-Schnellzugriff: Der Verlauf blieb hell, die Schrift wurde per
   .dark .text-gray-900 weiß -> weiß auf hell. Nur die hellen Tints werden
   abgedunkelt; kräftige Header (from-red-600 usw.) bleiben unverändert. */
.dark .from-gray-50 { --tw-gradient-from: #1F2937 !important; }
.dark .from-gray-100 { --tw-gradient-from: #1F2937 !important; }
.dark .via-gray-50 { --tw-gradient-via: #1F2937 !important; }
.dark .to-gray-50 { --tw-gradient-to: #1F2937 !important; }
.dark .to-gray-100 { --tw-gradient-to: #1F2937 !important; }
.dark .to-gray-200 { --tw-gradient-to: #374151 !important; }
.dark .from-blue-50 { --tw-gradient-from: #1E3A5F !important; }
.dark .from-blue-100 { --tw-gradient-from: #1E3A8A !important; }
.dark .via-blue-50 { --tw-gradient-via: #1E3A5F !important; }
.dark .to-blue-50 { --tw-gradient-to: #1E3A5F !important; }
.dark .to-blue-100 { --tw-gradient-to: #1E3A8A !important; }
.dark .to-blue-200 { --tw-gradient-to: #1E40AF !important; }
.dark .from-indigo-50 { --tw-gradient-from: #1E1B4B !important; }
.dark .from-indigo-100 { --tw-gradient-from: #312E81 !important; }
.dark .via-indigo-50 { --tw-gradient-via: #1E1B4B !important; }
.dark .to-indigo-50 { --tw-gradient-to: #1E1B4B !important; }
.dark .to-indigo-100 { --tw-gradient-to: #312E81 !important; }
.dark .to-indigo-200 { --tw-gradient-to: #3730A3 !important; }
.dark .from-purple-50 { --tw-gradient-from: #3B0764 !important; }
.dark .from-purple-100 { --tw-gradient-from: #581C87 !important; }
.dark .via-purple-50 { --tw-gradient-via: #3B0764 !important; }
.dark .to-purple-50 { --tw-gradient-to: #3B0764 !important; }
.dark .to-purple-100 { --tw-gradient-to: #581C87 !important; }
.dark .to-purple-200 { --tw-gradient-to: #6B21A8 !important; }
.dark .from-green-50 { --tw-gradient-from: #052E16 !important; }
.dark .from-green-100 { --tw-gradient-from: #14532D !important; }
.dark .via-green-50 { --tw-gradient-via: #052E16 !important; }
.dark .to-green-50 { --tw-gradient-to: #052E16 !important; }
.dark .to-green-100 { --tw-gradient-to: #14532D !important; }
.dark .to-green-200 { --tw-gradient-to: #166534 !important; }
.dark .from-emerald-50 { --tw-gradient-from: #022C22 !important; }
.dark .from-emerald-100 { --tw-gradient-from: #064E3B !important; }
.dark .via-emerald-50 { --tw-gradient-via: #022C22 !important; }
.dark .to-emerald-50 { --tw-gradient-to: #022C22 !important; }
.dark .to-emerald-100 { --tw-gradient-to: #064E3B !important; }
.dark .to-emerald-200 { --tw-gradient-to: #065F46 !important; }
.dark .from-teal-50 { --tw-gradient-from: #042F2E !important; }
.dark .from-teal-100 { --tw-gradient-from: #134E4A !important; }
.dark .via-teal-50 { --tw-gradient-via: #042F2E !important; }
.dark .to-teal-50 { --tw-gradient-to: #042F2E !important; }
.dark .to-teal-100 { --tw-gradient-to: #134E4A !important; }
.dark .to-teal-200 { --tw-gradient-to: #115E59 !important; }
.dark .from-cyan-50 { --tw-gradient-from: #083344 !important; }
.dark .from-cyan-100 { --tw-gradient-from: #164E63 !important; }
.dark .via-cyan-50 { --tw-gradient-via: #083344 !important; }
.dark .to-cyan-50 { --tw-gradient-to: #083344 !important; }
.dark .to-cyan-100 { --tw-gradient-to: #164E63 !important; }
.dark .to-cyan-200 { --tw-gradient-to: #155E75 !important; }
.dark .from-red-50 { --tw-gradient-from: #450A0A !important; }
.dark .from-red-100 { --tw-gradient-from: #7F1D1D !important; }
.dark .via-red-50 { --tw-gradient-via: #450A0A !important; }
.dark .to-red-50 { --tw-gradient-to: #450A0A !important; }
.dark .to-red-100 { --tw-gradient-to: #7F1D1D !important; }
.dark .to-red-200 { --tw-gradient-to: #991B1B !important; }
.dark .from-orange-50 { --tw-gradient-from: #431407 !important; }
.dark .from-orange-100 { --tw-gradient-from: #7C2D12 !important; }
.dark .via-orange-50 { --tw-gradient-via: #431407 !important; }
.dark .to-orange-50 { --tw-gradient-to: #431407 !important; }
.dark .to-orange-100 { --tw-gradient-to: #7C2D12 !important; }
.dark .to-orange-200 { --tw-gradient-to: #9A3412 !important; }
.dark .from-amber-50 { --tw-gradient-from: #451A03 !important; }
.dark .from-amber-100 { --tw-gradient-from: #78350F !important; }
.dark .via-amber-50 { --tw-gradient-via: #451A03 !important; }
.dark .to-amber-50 { --tw-gradient-to: #451A03 !important; }
.dark .to-amber-100 { --tw-gradient-to: #78350F !important; }
.dark .to-amber-200 { --tw-gradient-to: #92400E !important; }
.dark .from-yellow-50 { --tw-gradient-from: #422006 !important; }
.dark .from-yellow-100 { --tw-gradient-from: #713F12 !important; }
.dark .via-yellow-50 { --tw-gradient-via: #422006 !important; }
.dark .to-yellow-50 { --tw-gradient-to: #422006 !important; }
.dark .to-yellow-100 { --tw-gradient-to: #713F12 !important; }
.dark .to-yellow-200 { --tw-gradient-to: #854D0E !important; }
.dark .from-pink-50 { --tw-gradient-from: #500724 !important; }
.dark .from-pink-100 { --tw-gradient-from: #831843 !important; }
.dark .via-pink-50 { --tw-gradient-via: #500724 !important; }
.dark .to-pink-50 { --tw-gradient-to: #500724 !important; }
.dark .to-pink-100 { --tw-gradient-to: #831843 !important; }
.dark .to-pink-200 { --tw-gradient-to: #9D174D !important; }

/* Dark mode - Weiße Buttons auf farbigen Verlaufs-Headern
   (z.B. Leitstelle, Info-Monitor, Digitale Mappe): Der Header bleibt auch im
   Darkmode farbig, deshalb bleiben die Buttons darauf weiß mit dunkler Schrift. */
.dark [class*="bg-gradient-to"] a.bg-white,
.dark [class*="bg-gradient-to"] button.bg-white {
    background-color: #FFFFFF !important;
}

.dark [class*="bg-gradient-to"] a.bg-white:hover,
.dark [class*="bg-gradient-to"] button.bg-white:hover {
    background-color: #F3F4F6 !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-indigo-600, .dark [class*="bg-gradient-to"] button.bg-white.text-indigo-600, .dark [class*="bg-gradient-to"] a.bg-white.text-indigo-700, .dark [class*="bg-gradient-to"] button.bg-white.text-indigo-700, .dark [class*="bg-gradient-to"] a.bg-white.text-indigo-800, .dark [class*="bg-gradient-to"] button.bg-white.text-indigo-800 {
    color: #4338CA !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-blue-600, .dark [class*="bg-gradient-to"] button.bg-white.text-blue-600, .dark [class*="bg-gradient-to"] a.bg-white.text-blue-700, .dark [class*="bg-gradient-to"] button.bg-white.text-blue-700, .dark [class*="bg-gradient-to"] a.bg-white.text-blue-800, .dark [class*="bg-gradient-to"] button.bg-white.text-blue-800 {
    color: #1D4ED8 !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-red-600, .dark [class*="bg-gradient-to"] button.bg-white.text-red-600, .dark [class*="bg-gradient-to"] a.bg-white.text-red-700, .dark [class*="bg-gradient-to"] button.bg-white.text-red-700, .dark [class*="bg-gradient-to"] a.bg-white.text-red-800, .dark [class*="bg-gradient-to"] button.bg-white.text-red-800 {
    color: #B91C1C !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-green-600, .dark [class*="bg-gradient-to"] button.bg-white.text-green-600, .dark [class*="bg-gradient-to"] a.bg-white.text-green-700, .dark [class*="bg-gradient-to"] button.bg-white.text-green-700, .dark [class*="bg-gradient-to"] a.bg-white.text-green-800, .dark [class*="bg-gradient-to"] button.bg-white.text-green-800 {
    color: #15803D !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-purple-600, .dark [class*="bg-gradient-to"] button.bg-white.text-purple-600, .dark [class*="bg-gradient-to"] a.bg-white.text-purple-700, .dark [class*="bg-gradient-to"] button.bg-white.text-purple-700, .dark [class*="bg-gradient-to"] a.bg-white.text-purple-800, .dark [class*="bg-gradient-to"] button.bg-white.text-purple-800 {
    color: #7E22CE !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-teal-600, .dark [class*="bg-gradient-to"] button.bg-white.text-teal-600, .dark [class*="bg-gradient-to"] a.bg-white.text-teal-700, .dark [class*="bg-gradient-to"] button.bg-white.text-teal-700, .dark [class*="bg-gradient-to"] a.bg-white.text-teal-800, .dark [class*="bg-gradient-to"] button.bg-white.text-teal-800 {
    color: #0F766E !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-amber-600, .dark [class*="bg-gradient-to"] button.bg-white.text-amber-600, .dark [class*="bg-gradient-to"] a.bg-white.text-amber-700, .dark [class*="bg-gradient-to"] button.bg-white.text-amber-700, .dark [class*="bg-gradient-to"] a.bg-white.text-amber-800, .dark [class*="bg-gradient-to"] button.bg-white.text-amber-800 {
    color: #B45309 !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-orange-600, .dark [class*="bg-gradient-to"] button.bg-white.text-orange-600, .dark [class*="bg-gradient-to"] a.bg-white.text-orange-700, .dark [class*="bg-gradient-to"] button.bg-white.text-orange-700, .dark [class*="bg-gradient-to"] a.bg-white.text-orange-800, .dark [class*="bg-gradient-to"] button.bg-white.text-orange-800 {
    color: #C2410C !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-yellow-600, .dark [class*="bg-gradient-to"] button.bg-white.text-yellow-600, .dark [class*="bg-gradient-to"] a.bg-white.text-yellow-700, .dark [class*="bg-gradient-to"] button.bg-white.text-yellow-700, .dark [class*="bg-gradient-to"] a.bg-white.text-yellow-800, .dark [class*="bg-gradient-to"] button.bg-white.text-yellow-800 {
    color: #A16207 !important;
}

.dark [class*="bg-gradient-to"] a.bg-white.text-gray-600, .dark [class*="bg-gradient-to"] button.bg-white.text-gray-600, .dark [class*="bg-gradient-to"] a.bg-white.text-gray-700, .dark [class*="bg-gradient-to"] button.bg-white.text-gray-700, .dark [class*="bg-gradient-to"] a.bg-white.text-gray-800, .dark [class*="bg-gradient-to"] button.bg-white.text-gray-800 {
    color: #374151 !important;
}

/* Dark mode - Cards & Panels */
.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Dark mode - Alert boxes */
.dark .bg-blue-50 {
    background-color: #1E3A5F !important;
}

/* Hinweisboxen: dunkelblauer Text auf dunkelblauem Grund wäre unlesbar */
.dark .bg-blue-50.text-blue-900, .dark .bg-blue-50 .text-blue-900,
.dark .bg-blue-50.text-blue-800, .dark .bg-blue-50 .text-blue-800,
.dark .bg-blue-50.text-blue-700, .dark .bg-blue-50 .text-blue-700 {
    color: #DBEAFE !important;
}

.dark .bg-blue-50.border-blue-200, .dark .bg-blue-50.border-blue-100 {
    border-color: #3B82F6 !important;
}

.dark .border-blue-400 {
    border-color: #3B82F6 !important;
}

.dark .text-blue-700 {
    color: #93C5FD !important;
}

.dark .text-blue-600 {
    color: #BFDBFE !important;
}

.dark .bg-red-50 {
    background-color: #450A0A !important;
}

.dark .border-red-400 {
    border-color: #EF4444 !important;
}

.dark .text-red-700 {
    color: #FCA5A5 !important;
}

.dark .text-red-600 {
    color: #FECACA !important;
}

.dark .bg-green-50 {
    background-color: #052E16 !important;
}

.dark .border-green-400 {
    border-color: #22C55E !important;
}

.dark .text-green-700 {
    color: #86EFAC !important;
}

.dark .text-green-600 {
    color: #BBF7D0 !important;
}

.dark .text-green-800, .dark .text-green-900 {
    color: #86EFAC !important;
}

.dark .bg-emerald-50 {
    background-color: #022C22 !important;
}

.dark .border-emerald-200 {
    border-color: #059669 !important;
}

.dark .text-emerald-700, .dark .text-emerald-800, .dark .text-emerald-900 {
    color: #6EE7B7 !important;
}

.dark .bg-yellow-50 {
    background-color: #451A03 !important;
}

.dark .border-yellow-400 {
    border-color: #FACC15 !important;
}

.dark .text-yellow-700 {
    color: #FDE047 !important;
}

.dark .text-yellow-600 {
    color: #FEF08A !important;
}

/* Dark mode - Tables */
.dark table {
    color: #F9FAFB;
}

.dark table thead {
    background-color: #1F2937;
    border-color: #374151;
}

.dark table tbody tr {
    border-color: #374151;
}

.dark table tbody tr:hover {
    background-color: #1F2937;
}

/* Dark mode - Navigation */
.dark nav a {
    color: #D1D5DB;
}

.dark nav a:hover {
    color: #F9FAFB;
}

/* Dark mode - Header */
.dark header {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

.dark header svg {
    color: #D1D5DB;
}

.dark header button:hover {
    background-color: #374151 !important;
}

/* Dark mode - Sidebar */
.dark aside,
.dark .sidebar {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

.dark aside a,
.dark .sidebar a {
    color: #D1D5DB !important;
}

.dark aside a:hover,
.dark .sidebar a:hover {
    background-color: #374151 !important;
    color: #F9FAFB !important;
}

.dark aside a.active,
.dark .sidebar a.active {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Dark mode - Sidebar category headers */
.dark aside button,
.dark .sidebar button {
    color: #9CA3AF !important;
}

.dark aside button:hover,
.dark .sidebar button:hover {
    background-color: #374151 !important;
    color: #D1D5DB !important;
}

/* Dark mode - Sidebar specific classes */
.dark .text-gray-700 {
    color: #D1D5DB !important;
}

.dark .text-gray-600 {
    color: #9CA3AF !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

/* Dark mode - Sidebar active states */
.dark .bg-primary-50 {
    background-color: #7F1D1D !important;
}

.dark .text-primary-700 {
    color: #FCA5A5 !important;
}

/* Dark mode - Dropdown menus */
.dark [x-show] > div[class*="bg-white"] {
    background-color: #1F2937 !important;
}

/* Dark mode - Search results */
.dark #search-results {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

/* ============================================
   BUTTON STYLES (Light & Dark Mode)
   Fix for Tailwind reset overriding bg-red-600
   ============================================ */

/* Primary action buttons - Feuerwehr-Rot */
html body button.bg-red-600,
html body button[type="submit"].bg-red-600,
html body a.bg-red-600,
.settings-layout button.bg-red-600,
.content-area button.bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html body button.bg-red-600:hover,
html body button[type="submit"].bg-red-600:hover,
html body a.bg-red-600:hover,
.settings-layout button.bg-red-600:hover,
.content-area button.bg-red-600:hover {
    background-color: #b91c1c !important;
}

/* Blue buttons (for modules.html) */
html body button.bg-blue-600,
html body button[type="submit"].bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html body button.bg-blue-600:hover,
html body button[type="submit"].bg-blue-600:hover {
    background-color: #1d4ed8 !important;
}

/* ============================================
   BREITE DES INHALTSBEREICHS AUF GROSSEN BILDSCHIRMEN
   Listen (max-w-7xl) und Detailseiten (max-w-6xl) nutzen ab 1536px
   die verfügbare Breite neben der Sidebar, statt bei 1280px zu enden.
   Formulare (max-w-2xl … max-w-5xl) bleiben bewusst schmal.
   ============================================ */
@media (min-width: 1536px) {
    main .max-w-7xl,
    main .max-w-6xl {
        max-width: none;
    }
}

/* ============================================
   ERFOLGS-ANIMATION (grüner Haken + Konfetti, reines CSS)
   Eingeblendet über includes/success_burst.html, wenn eine
   Django-Message das Extra-Tag „celebrate“ trägt.
   ============================================ */
.flvs-burst {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.flvs-burst-badge {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 9999px;
    background: #16a34a;
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: flvs-burst-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) both,
               flvs-burst-fade 0.4s ease-in 1.7s forwards;
}
.flvs-burst-badge svg {
    width: 4rem;
    height: 4rem;
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: flvs-burst-draw 0.4s ease-out 0.3s forwards;
}
.flvs-burst-ring {
    position: absolute;
    inset: -0.5rem;
    border-radius: 9999px;
    border: 3px solid #4ade80;
    opacity: 0;
    animation: flvs-burst-ring 0.9s ease-out 0.15s;
}
.flvs-burst-piece {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6rem;
    height: 0.9rem;
    border-radius: 2px;
    opacity: 0;
    transform-origin: center;
    animation: flvs-burst-confetti 1.4s cubic-bezier(0.15, 0.7, 0.4, 1) 0.2s forwards;
}
.flvs-burst-piece:nth-child(3n) { background: #f59e0b; }
.flvs-burst-piece:nth-child(3n+1) { background: #ef4444; border-radius: 9999px; }
.flvs-burst-piece:nth-child(3n+2) { background: #3b82f6; }
.flvs-burst-piece:nth-child(4n) { background: #22c55e; }
.flvs-burst-piece:nth-child(1)  { --dx: -140px; --dy: -160px; --rot: 320deg; }
.flvs-burst-piece:nth-child(2)  { --dx: -60px;  --dy: -200px; --rot: -260deg; animation-delay: 0.25s; }
.flvs-burst-piece:nth-child(3)  { --dx: 50px;   --dy: -190px; --rot: 200deg; }
.flvs-burst-piece:nth-child(4)  { --dx: 150px;  --dy: -150px; --rot: -340deg; animation-delay: 0.28s; }
.flvs-burst-piece:nth-child(5)  { --dx: -190px; --dy: -60px;  --rot: 180deg; animation-delay: 0.22s; }
.flvs-burst-piece:nth-child(6)  { --dx: 200px;  --dy: -40px;  --rot: -150deg; }
.flvs-burst-piece:nth-child(7)  { --dx: -170px; --dy: 90px;   --rot: 280deg; animation-delay: 0.3s; }
.flvs-burst-piece:nth-child(8)  { --dx: 180px;  --dy: 110px;  --rot: -220deg; animation-delay: 0.24s; }
.flvs-burst-piece:nth-child(9)  { --dx: -90px;  --dy: 170px;  --rot: 160deg; }
.flvs-burst-piece:nth-child(10) { --dx: 100px;  --dy: 180px;  --rot: -300deg; animation-delay: 0.26s; }
.flvs-burst-piece:nth-child(11) { --dx: -20px;  --dy: -230px; --rot: 90deg;  animation-delay: 0.32s; }
.flvs-burst-piece:nth-child(12) { --dx: 20px;   --dy: 210px;  --rot: -120deg; animation-delay: 0.2s; }
@keyframes flvs-burst-pop {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@keyframes flvs-burst-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes flvs-burst-ring {
    0%   { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}
@keyframes flvs-burst-confetti {
    0%   { transform: translate(-50%, -50%) rotate(0) scale(0.6); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 80px)) rotate(var(--rot)) scale(1); opacity: 0; }
}
@keyframes flvs-burst-fade {
    to { transform: scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .flvs-burst-piece, .flvs-burst-ring { display: none; }
    .flvs-burst-badge { animation: flvs-burst-fade 0.3s ease-in 1.2s forwards; }
    .flvs-burst-badge svg { stroke-dashoffset: 0; animation: none; }
}