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

/* Base Dark Mode */
.dark {
    color-scheme: dark;
}

.dark body {
    background: #0f172a !important;
    background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important;
    color: #f1f5f9 !important;
}

/* ================================
   BACKGROUND COLORS
   ================================ */

/* White backgrounds */
.dark .bg-white {
    background-color: #1e293b !important;
}

/* Gray backgrounds */
.dark .bg-gray-50 {
    background-color: #1e293b !important;
}

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

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

.dark .bg-gray-300 {
    background-color: #64748b !important;
}

.dark .bg-gray-400 {
    background-color: #64748b !important;
}

/* Blue backgrounds */
.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
}

.dark .bg-blue-100 {
    background-color: #1e40af !important;
    color: #dbeafe !important;
}

.dark .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.dark .bg-blue-700 {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Teal/Cyan backgrounds */
.dark .bg-teal-50 {
    background-color: #134e4a !important;
    color: #ccfbf1 !important;
}

.dark .bg-teal-100 {
    background-color: #115e59 !important;
    color: #ccfbf1 !important;
}

.dark .bg-cyan-50 {
    background-color: #164e63 !important;
    color: #cffafe !important;
}

.dark .bg-cyan-100 {
    background-color: #155e75 !important;
    color: #cffafe !important;
}

/* Green backgrounds */
.dark .bg-green-50 {
    background-color: #14532d !important;
    color: #dcfce7 !important;
}

.dark .bg-green-100 {
    background-color: #166534 !important;
    color: #dcfce7 !important;
}

.dark .bg-emerald-50 {
    background-color: #064e3b !important;
    color: #d1fae5 !important;
}

.dark .bg-emerald-100 {
    background-color: #065f46 !important;
    color: #d1fae5 !important;
}

.dark .bg-emerald-200 {
    background-color: #047857 !important;
    color: #d1fae5 !important;
}

.dark .bg-green-500 {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

.dark .bg-green-600 {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.dark .bg-emerald-600 {
    background-color: #059669 !important;
    color: #ffffff !important;
}

.dark .bg-emerald-700 {
    background-color: #047857 !important;
    color: #ffffff !important;
}

/* Red backgrounds - keep original colors for logout buttons */
.dark .bg-red-50 {
    /* Keep original red-50 for logout button visibility */
}

.dark .bg-red-100 {
    /* Keep original red-100 for logout button hover */
}

.dark .bg-red-500 {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.dark .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.dark .bg-rose-600 {
    background-color: #e11d48 !important;
    color: #ffffff !important;
}

/* Yellow/Amber backgrounds */
.dark .bg-yellow-50 {
    background-color: rgba(113, 63, 18, 0.3) !important;
    color: #fef3c7 !important;
}

.dark .bg-yellow-100 {
    background-color: #854d0e !important;
    color: #fef3c7 !important;
}

.dark .bg-yellow-200 {
    background-color: #a16207 !important;
    color: #fef3c7 !important;
}

.dark .bg-yellow-300 {
    background-color: #ca8a04 !important;
    color: #fef9c3 !important;
}

.dark .bg-yellow-400 {
    background-color: #facc15 !important;
    color: #000000 !important;
}

.dark .bg-amber-50 {
    background-color: #78350f !important;
    color: #fef3c7 !important;
}

.dark .bg-amber-100 {
    background-color: #92400e !important;
    color: #fef3c7 !important;
}

.dark .bg-amber-500 {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.dark .bg-amber-600 {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

/* Purple backgrounds */
.dark .bg-purple-50 {
    background-color: #581c87 !important;
}

.dark .bg-purple-50 .text-gray-900,
.dark .bg-purple-50 .text-gray-600 {
    color: #f1f5f9 !important;
}

.dark .bg-purple-100 {
    background-color: #6b21a8 !important;
    color: #f3e8ff !important;
}

.dark .bg-purple-500 {
    background-color: #a855f7 !important;
    color: #ffffff !important;
}

.dark .bg-purple-600 {
    background-color: #9333ea !important;
    color: #ffffff !important;
}

.dark .bg-indigo-50 {
    background-color: #3730a3 !important;
    color: #e0e7ff !important;
}

.dark .bg-indigo-100 {
    background-color: #4338ca !important;
    color: #e0e7ff !important;
}

.dark .bg-indigo-200 {
    background-color: #4f46e5 !important;
    color: #e0e7ff !important;
}

/* Pink/Orange backgrounds */
.dark .bg-pink-50 {
    background-color: #831843 !important;
}

.dark .bg-pink-50 .text-gray-900,
.dark .bg-pink-50 .text-gray-600 {
    color: #f1f5f9 !important;
}

.dark .bg-orange-50 {
    background-color: #7c2d12 !important;
}

.dark .bg-orange-50 .text-gray-900,
.dark .bg-orange-50 .text-gray-600 {
    color: #f1f5f9 !important;
}

.dark .bg-orange-100 {
    background-color: #9a3412 !important;
    color: #fed7aa !important;
}

.dark .bg-orange-600 {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

/* Sky backgrounds */
.dark .bg-sky-50 {
    background-color: #0c4a6e !important;
    color: #e0f2fe !important;
}

.dark .bg-sky-100 {
    background-color: #075985 !important;
    color: #e0f2fe !important;
}

/* Rose backgrounds */
.dark .bg-rose-50 {
    background-color: #881337 !important;
    color: #ffe4e6 !important;
}

/* Slate backgrounds */
.dark .bg-slate-50 {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .bg-slate-100 {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .bg-slate-200 {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ================================
   GRADIENT BACKGROUNDS
   ================================ */

/* Main page gradient */
.dark .bg-gradient-to-br.from-blue-50.via-white.to-teal-50,
.dark body.bg-gradient-to-br.from-blue-50.via-white.to-teal-50 {
    background: #0f172a !important;
    background-image: linear-gradient(to bottom right, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

/* Generic gradients - only apply if no specific color gradient is defined */
.dark .bg-gradient-to-br:not([class*="from-blue-"]):not([class*="from-green-"]):not([class*="from-orange-"]):not([class*="from-red-"]):not([class*="from-purple-"]):not([class*="from-slate-"]) {
    background-image: linear-gradient(to bottom right, #1e293b, #334155) !important;
}

.dark .bg-gradient-to-r:not([class*="from-blue-"]):not([class*="from-green-"]):not([class*="from-teal-"]):not([class*="from-orange-"]):not([class*="from-red-"]):not([class*="from-purple-"]) {
    background-image: linear-gradient(to right, #334155, #475569) !important;
}

/* Specific gradient combinations - keep these colorful but dark */
.dark .bg-gradient-to-br.from-blue-600.via-blue-700.to-teal-600,
.dark .bg-gradient-to-br.from-blue-600.to-teal-600 {
    background-image: linear-gradient(to bottom right, #1e40af, #0d9488) !important;
    color: #ffffff !important;
}

.dark .bg-gradient-to-br.from-green-600.via-emerald-700.to-teal-600,
.dark .bg-gradient-to-br.from-green-600.to-emerald-600 {
    background-image: linear-gradient(to bottom right, #059669, #0d9488) !important;
    color: #ffffff !important;
}

.dark .bg-gradient-to-br.from-orange-600.to-amber-600 {
    background: linear-gradient(to bottom right, #ea580c, #d97706) !important;
    color: #ffffff !important;
}

.dark .bg-gradient-to-br.from-red-500.to-rose-600 {
    background: linear-gradient(to bottom right, #ef4444, #e11d48) !important;
    color: #ffffff !important;
}

.dark .bg-gradient-to-br.from-purple-500.to-purple-600 {
    background: linear-gradient(to bottom right, #a855f7, #9333ea) !important;
    color: #ffffff !important;
}

/* Button gradients - keep original colors, just ensure readability */
.dark .bg-gradient-to-r.from-blue-600.to-teal-600,
.dark .bg-gradient-to-r.from-blue-600.to-cyan-600,
.dark .bg-gradient-to-r.from-teal-500.to-green-500,
.dark .bg-gradient-to-r.from-teal-600.to-green-600,
.dark .bg-gradient-to-r.from-orange-500.to-red-500,
.dark .bg-gradient-to-r.from-green-600.to-teal-600 {
    /* Keep original gradient colors - they work fine in dark mode */
}

/* Gradient from/to light colors */
.dark .bg-gradient-to-br.from-blue-50.to-cyan-50,
.dark .bg-gradient-to-br.from-blue-50.to-indigo-50 {
    background-image: linear-gradient(to bottom right, #1e3a8a, #164e63) !important;
}

.dark .bg-gradient-to-br.from-green-50.to-green-100 {
    background-image: linear-gradient(to bottom right, #14532d, #166534) !important;
}

.dark .bg-gradient-to-br.from-green-50.to-emerald-50 {
    background-image: linear-gradient(to bottom right, #14532d, #064e3b) !important;
}

.dark .bg-gradient-to-br.from-purple-50.to-pink-50 {
    background-image: linear-gradient(to bottom right, #581c87, #831843) !important;
}

.dark .bg-gradient-to-br.from-purple-50.to-pink-50 .text-gray-900,
.dark .bg-gradient-to-br.from-purple-50.to-pink-50 .text-gray-600 {
    color: #f1f5f9 !important;
}

.dark .bg-gradient-to-br.from-blue-50.to-blue-100 {
    background-image: linear-gradient(to bottom right, #1e3a8a, #1e40af) !important;
}

.dark .bg-gradient-to-br.from-cyan-50.to-cyan-100 {
    background-image: linear-gradient(to bottom right, #164e63, #155e75) !important;
}

.dark .bg-gradient-to-br.from-cyan-50.to-sky-50 {
    background-image: linear-gradient(to bottom right, #164e63, #0c4a6e) !important;
}

.dark .bg-gradient-to-br.from-slate-50.to-slate-100 {
    background-image: linear-gradient(to bottom right, #1e293b, #334155) !important;
}

.dark .bg-gradient-to-br.from-amber-50.to-orange-100 {
    background-image: linear-gradient(to bottom right, #78350f, #9a3412) !important;
}

.dark .bg-gradient-to-br.from-teal-50.to-cyan-50 {
    background-image: linear-gradient(to bottom right, #134e4a, #164e63) !important;
}

.dark .bg-gradient-to-br.from-gray-50.to-white {
    background-image: linear-gradient(to bottom right, #1e293b, #334155) !important;
}

.dark .bg-gradient-to-br.from-orange-50.to-amber-50 {
    background-image: linear-gradient(to bottom right, #7c2d12, #78350f) !important;
}

.dark .bg-gradient-to-br.from-emerald-50.to-green-50 {
    background-image: linear-gradient(to bottom right, #064e3b, #14532d) !important;
}

.dark .bg-gradient-to-br.from-blue-500.via-teal-400.to-green-400 {
    background-image: linear-gradient(to bottom right, #2563eb, #2dd4bf, #4ade80) !important;
}

.dark .bg-gradient-to-br.from-slate-50.to-gray-50 {
    background-image: linear-gradient(to bottom right, #1e293b, #334155) !important;
}

.dark .bg-gradient-to-br.from-teal-50\/50.to-cyan-50\/50 {
    background-image: linear-gradient(to bottom right, rgba(19, 78, 74, 0.5), rgba(22, 78, 99, 0.5)) !important;
}

.dark .bg-gradient-to-r.from-blue-50.to-cyan-50,
.dark .bg-gradient-to-r.from-green-50.to-emerald-50 {
    background-image: linear-gradient(to right, #1e3a8a, #164e63) !important;
}

/* White/transparent backgrounds in gradients */
.dark .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark .bg-white\/70 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Section backgrounds */
.dark section.bg-gradient-to-br.from-blue-50.to-teal-50 {
    background-image: linear-gradient(to bottom right, #0f172a, #0f172a) !important;
}

/* ================================
   TEXT COLORS
   ================================ */

/* Gray text */
.dark .text-gray-900:not(#calendarGrid *):not(#calendarGrid button *) {
    color: #f1f5f9 !important;
}

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

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

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

.dark .text-gray-500 {
    color: #64748b !important;
}

.dark .text-gray-400 {
    color: #64748b !important;
}

.dark .text-gray-300 {
    color: #cbd5e1 !important;
}

/* Colored text */
.dark .text-blue-600:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-blue-700:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-blue-800:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-blue-900:not(#calendarGrid *):not(#calendarGrid button *) {
    color: #60a5fa !important;
}

.dark .text-blue-100 {
    color: #dbeafe !important;
}

.dark .text-indigo-600,
.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

.dark .text-slate-600,
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900 {
    color: #cbd5e1 !important;
}

.dark .text-teal-600,
.dark .text-teal-700 {
    color: #5eead4 !important;
}

.dark .text-teal-200 {
    color: #99f6e4 !important;
}

.dark .text-green-600:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-green-700:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-green-900:not(#calendarGrid *):not(#calendarGrid button *) {
    color: #4ade80 !important;
}

.dark .text-green-100 {
    color: #dcfce7 !important;
}

.dark .text-emerald-600,
.dark .text-emerald-700 {
    color: #6ee7b7 !important;
}

.dark .text-red-600,
.dark .text-red-700 {
    /* Keep original red-600 for logout buttons and error states */
}

.dark .text-yellow-600:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-yellow-700:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-yellow-800:not(#calendarGrid *):not(#calendarGrid button *),
.dark .text-yellow-900:not(#calendarGrid *):not(#calendarGrid button *) {
    color: #facc15 !important;
}

.dark .text-amber-800 {
    color: #fbbf24 !important;
}

.dark .text-amber-100 {
    color: #fef3c7 !important;
}

.dark .text-purple-600,
.dark .text-purple-700 {
    color: #c084fc !important;
}

.dark .text-purple-100 {
    color: #f3e8ff !important;
}

.dark .text-orange-600,
.dark .text-orange-700 {
    color: #fb923c !important;
}

.dark .text-orange-900 {
    color: #fdba74 !important;
}

.dark .text-pink-700 {
    color: #f472b6 !important;
}

.dark .text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ================================
   BORDERS
   ================================ */

.dark .border-gray-100 {
    border-color: #334155 !important;
}

.dark .border-gray-200 {
    border-color: #475569 !important;
}

.dark .border-gray-300 {
    border-color: #64748b !important;
}

.dark .border-blue-200 {
    border-color: #3b82f6 !important;
}

.dark .border-blue-300 {
    border-color: #3b82f6 !important;
}

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

.dark .border-blue-500 {
    border-color: #2563eb !important;
}

.dark .border-blue-600 {
    border-color: #2563eb !important;
}

.dark .border-green-200 {
    border-color: #22c55e !important;
}

.dark .border-green-300 {
    border-color: #22c55e !important;
}

.dark .border-green-500 {
    border-color: #22c55e !important;
}

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

.dark .border-emerald-400 {
    border-color: #10b981 !important;
}

.dark .border-yellow-200 {
    border-color: #eab308 !important;
}

.dark .border-yellow-300 {
    border-color: #eab308 !important;
}

.dark .border-yellow-500 {
    border-color: #eab308 !important;
}

.dark .border-red-200 {
    border-color: #dc2626 !important;
}

.dark .border-red-300 {
    border-color: #dc2626 !important;
}

.dark .border-red-600 {
    border-color: #dc2626 !important;
}

.dark .border-teal-200 {
    border-color: #14b8a6 !important;
}

.dark .border-cyan-200 {
    border-color: #06b6d4 !important;
}

.dark .border-cyan-400 {
    border-color: #06b6d4 !important;
}

.dark .border-cyan-500 {
    border-color: #06b6d4 !important;
}

.dark .border-amber-200 {
    border-color: #fbbf24 !important;
}

.dark .border-amber-500 {
    border-color: #f59e0b !important;
}

.dark .border-orange-200 {
    border-color: #fb923c !important;
}

.dark .border-orange-400 {
    border-color: #fb923c !important;
}

.dark .border-purple-200 {
    border-color: #a855f7 !important;
}

.dark .border-teal-300 {
    border-color: #14b8a6 !important;
}

.dark .border-teal-500 {
    border-color: #14b8a6 !important;
}

.dark .border-slate-500 {
    border-color: #64748b !important;
}

.dark .border-slate-200 {
    border-color: #475569 !important;
}

.dark .border-slate-300 {
    border-color: #64748b !important;
}

.dark .border-slate-400 {
    border-color: #64748b !important;
}

.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r {
    border-color: #475569 !important;
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #475569 !important;
}

/* ================================
   HOVER STATES
   ================================ */

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

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

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

.dark .hover\:bg-gray-300:hover {
    background-color: #64748b !important;
}

.dark .hover\:bg-blue-50:hover {
    background-color: #1e3a8a !important;
}

.dark .hover\:bg-blue-100:hover {
    background-color: #1e40af !important;
}

.dark .hover\:bg-blue-200:hover {
    background-color: #1e40af !important;
}

.dark .hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}

.dark .hover\:bg-red-50:hover {
    /* Keep original red-50 for logout button hover */
}

.dark .hover\:bg-red-100:hover {
    /* Keep original red-100 for logout button hover */
}

.dark .hover\:bg-green-50:hover {
    background-color: #14532d !important;
}

.dark .hover\:bg-green-700:hover {
    background-color: #15803d !important;
}

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

.dark .hover\:text-blue-600:hover,
.dark .hover\:text-blue-700:hover {
    color: #60a5fa !important;
}

.dark .hover\:text-red-700:hover {
    color: #fca5a5 !important;
}

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

.dark .hover\:border-blue-600:hover {
    border-color: #2563eb !important;
}

.dark .hover\:border-blue-400:hover,
.dark .hover\:border-blue-500:hover {
    border-color: #3b82f6 !important;
}

.dark .hover\:border-blue-300:hover {
    border-color: #60a5fa !important;
}

.dark .hover\:border-gray-300:hover {
    border-color: #64748b !important;
}

.dark .hover\:border-slate-400:hover {
    border-color: #64748b !important;
}

.dark .hover\:border-cyan-500:hover {
    border-color: #06b6d4 !important;
}

.dark .hover\:border-teal-500:hover {
    border-color: #14b8a6 !important;
}

.dark .hover\:border-amber-500:hover {
    border-color: #f59e0b !important;
}

.dark .hover\:border-slate-500:hover {
    border-color: #64748b !important;
}

.dark .hover\:border-blue-400:hover {
    border-color: #3b82f6 !important;
}

.dark .hover\:border-orange-400:hover {
    border-color: #fb923c !important;
}

.dark .hover\:border-emerald-400:hover {
    border-color: #10b981 !important;
}

.dark .hover\:border-cyan-400:hover {
    border-color: #06b6d4 !important;
}

.dark .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
}

.dark .hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

.dark .hover\:from-blue-700:hover {
    --tw-gradient-from: #1d4ed8 !important;
}

.dark .hover\:to-teal-700:hover {
    --tw-gradient-to: #0f766e !important;
}

.dark .hover\:to-cyan-700:hover {
    --tw-gradient-to: #0e7490 !important;
}

.dark .hover\:from-green-700:hover {
    --tw-gradient-from: #15803d !important;
}

.dark .hover\:to-green-600:hover {
    --tw-gradient-to: #16a34a !important;
}

.dark .hover\:from-orange-600:hover {
    --tw-gradient-from: #ea580c !important;
}

.dark .hover\:to-red-600:hover {
    --tw-gradient-to: #dc2626 !important;
}

.dark .hover\:from-teal-600:hover {
    --tw-gradient-from: #0d9488 !important;
}

.dark .hover\:bg-gray-800:hover {
    background-color: #1e293b !important;
}

.dark .hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark .hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Hover gradients for buttons */
.dark .hover\:from-blue-100:hover {
    --tw-gradient-from: #1e40af !important;
}

.dark .hover\:to-blue-200:hover {
    --tw-gradient-to: #1d4ed8 !important;
}

.dark .hover\:from-cyan-100:hover {
    --tw-gradient-from: #155e75 !important;
}

.dark .hover\:to-cyan-200:hover {
    --tw-gradient-to: #0e7490 !important;
}

.dark .hover\:from-slate-100:hover {
    --tw-gradient-from: #334155 !important;
}

.dark .hover\:to-slate-200:hover {
    --tw-gradient-to: #475569 !important;
}

.dark .hover\:from-amber-100:hover {
    --tw-gradient-from: #92400e !important;
}

.dark .hover\:to-orange-200:hover {
    --tw-gradient-to: #c2410c !important;
}

/* ================================
   NAVIGATION
   ================================ */

.dark .nav-gradient-border {
    background-color: rgba(15, 23, 42, 0.95) !important;
    background-image: linear-gradient(
        to bottom,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.95) 50%,
        rgba(15, 23, 42, 0.98) 100%
    ) !important;
    border: 1px solid rgba(71, 85, 105, 0.6) !important;
    backdrop-filter: blur(30px) saturate(180%) brightness(0.8) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(0.8) !important;
}

.dark .nav-gradient-border::before {
    background: linear-gradient(90deg,
        #1e40af 0%,
        #0d9488 25%,
        #1e40af 50%,
        #0d9488 75%,
        #1e40af 100%
    ) !important;
}

.dark .nav-scrolled {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid #475569 !important;
}

.dark .nav-link {
    color: #cbd5e1 !important;
}

.dark .nav-link:hover {
    color: #60a5fa !important;
}

.dark #mobile-menu {
    background-color: rgba(15, 23, 42, 0.98) !important;
}

/* ================================
   BUTTONS
   ================================ */

/* Standard buttons - minimal styling */
.dark button:not([class*="bg-gradient"]):not([class*="bg-blue-"]):not(.bg-green-100):not(.bg-yellow-100):not(.bg-red-100):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-teal-"]):not([class*="bg-orange-"]):not([class*="bg-amber-"]):not([class*="bg-yellow-"]):not([class*="bg-black"]):not(.dark-mode-toggle) {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark button:not([class*="bg-gradient"]):not([class*="bg-blue-"]):not(.bg-green-100):not(.bg-yellow-100):not(.bg-red-100):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-teal-"]):not([class*="bg-orange-"]):not([class*="bg-amber-"]):not([class*="bg-yellow-"]):not([class*="bg-black"]):not(.dark-mode-toggle):hover {
    background-color: #475569 !important;
}

/* White buttons */
.dark button.bg-white {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark button.bg-white:hover {
    background-color: #475569 !important;
}

/* Bordered buttons */
.dark button[class*="border-2"][class*="border-blue"],
.dark button[class*="border-2"][class*="border-white"] {
    background-color: transparent !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

.dark button[class*="border-2"][class*="border-blue"]:hover,
.dark button[class*="border-2"][class*="border-white"]:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Colored buttons - keep their original colors */
.dark button.bg-blue-600,
.dark button.bg-blue-700,
.dark button.bg-green-600,
.dark button.bg-green-700,
.dark button.bg-red-600,
.dark button.bg-red-700,
.dark button.bg-teal-600,
.dark button.bg-teal-700,
.dark button.bg-orange-600,
.dark button.bg-orange-700,
.dark button.bg-amber-600,
.dark button.bg-amber-700,
.dark button.bg-yellow-600,
.dark button.bg-yellow-700 {
    /* Keep original colors - they work well in dark mode */
}

/* Black button */
.dark .bg-black {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.dark .bg-black:hover {
    background-color: #334155 !important;
}

/* Disabled buttons */
.dark button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ================================
   FORMS
   ================================ */

.dark input,
.dark textarea,
.dark select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #3b82f6 !important;
    background-color: #334155 !important;
    outline: none !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    --tw-ring-color: #3b82f6 !important;
}

.dark .focus\:ring-2:focus {
    --tw-ring-offset-shadow: 0 0 0 0px transparent !important;
    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, #3b82f6) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent !important;
}

.dark .focus\:ring-blue-500:focus {
    --tw-ring-color: #3b82f6 !important;
}

.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled,
.dark input[readonly],
.dark textarea[readonly] {
    background-color: #0f172a !important;
    color: #64748b !important;
    opacity: 0.6 !important;
}

.dark input[type="radio"],
.dark input[type="checkbox"] {
    background-color: #334155 !important;
    border-color: #64748b !important;
}

.dark select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ================================
   CARDS & CONTAINERS
   ================================ */

/* Only style specific card containers that need dark backgrounds */
.dark .bg-white.rounded-2xl,
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-lg {
    background-color: #1e293b !important;
}

/* Pricing cards - fix gray backgrounds */
.dark [data-package][data-hours] {
    background-color: #1e293b !important;
    background-image: none !important;
}

/* Text in pricing cards */
.dark [data-package] .text-gray-700,
.dark [data-package] .text-gray-600 {
    color: #f1f5f9 !important;
}

.dark [data-package] .text-gray-900 {
    color: #f1f5f9 !important;
}

/* Gray disabled items in pricing cards */
.dark [data-package] .text-gray-400 {
    color: #64748b !important;
}

.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) !important;
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

.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) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-3xl {
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.8) !important;
}

.dark .hover\:shadow-3xl:hover {
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.9) !important;
}

/* ================================
   MODALS
   ================================ */

.dark .modal {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.dark .modal-content {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #475569 !important;
}

.dark .fixed.inset-0[style*="background-color"] {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ================================
   TABS
   ================================ */

.dark .tab-active,
.dark button.tab-active {
    color: #60a5fa !important;
    border-bottom-color: #2563eb !important;
}

/* Admin panel tab buttons */
.dark button[onclick*="switchTab"] {
    color: #94a3b8 !important;
}

.dark button[onclick*="switchTab"]:hover {
    color: #60a5fa !important;
}

.dark button.tab-active[onclick*="switchTab"] {
    color: #60a5fa !important;
    border-bottom: 2px solid #2563eb !important;
}

/* ================================
   BADGES & TAGS
   ================================ */

.dark .bg-blue-100.text-blue-600,
.dark .bg-blue-100.text-blue-700,
.dark .bg-blue-100.text-blue-800 {
    background-color: #1e3a8a !important;
    color: #93c5fd !important;
}

.dark .bg-green-100.text-green-600,
.dark .bg-green-100.text-green-700 {
    background-color: #14532d !important;
    color: #86efac !important;
}

.dark .bg-teal-100.text-teal-700 {
    background-color: #134e4a !important;
    color: #5eead4 !important;
}

.dark .bg-yellow-100.text-yellow-600 {
    background-color: #713f12 !important;
    color: #fde047 !important;
}

.dark .bg-purple-100.text-purple-600 {
    background-color: #581c87 !important;
    color: #e9d5ff !important;
}

.dark .bg-orange-100.text-orange-600,
.dark .bg-orange-100.text-orange-700 {
    background-color: #7c2d12 !important;
    color: #fdba74 !important;
}

.dark .bg-red-100.text-red-600 {
    background-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

.dark .bg-slate-100.text-slate-800 {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .bg-indigo-100.text-indigo-700 {
    background-color: #3730a3 !important;
    color: #c7d2fe !important;
}

.dark .bg-amber-100.text-amber-800 {
    background-color: #78350f !important;
    color: #fcd34d !important;
}

/* ================================
   STATUS BADGES
   ================================ */

.dark .status-pending {
    background: linear-gradient(135deg, #713f12, #854d0e) !important;
    color: #fef3c7 !important;
}

.dark .status-planning {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    color: #dbeafe !important;
}

.dark .status-development {
    background: linear-gradient(135deg, #581c87, #6b21a8) !important;
    color: #f3e8ff !important;
}

.dark .status-testing {
    background: linear-gradient(135deg, #831843, #9f1239) !important;
    color: #fce7f3 !important;
}

.dark .status-completed {
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #dcfce7 !important;
}

.dark .status-rejected {
    background: linear-gradient(135deg, #7f1d1d, #991b1b) !important;
    color: #fecaca !important;
}

/* ================================
   TABLES
   ================================ */

.dark table {
    background-color: #1e293b !important;
}

.dark thead {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .bg-gray-50.thead,
.dark thead.bg-gray-50 {
    background-color: #334155 !important;
}

.dark tbody tr {
    border-bottom-color: #475569 !important;
}

.dark tbody tr:hover {
    background-color: #334155 !important;
}

.dark td,
.dark th {
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* ================================
   LINKS
   ================================ */

.dark a:not([class*="bg-"]):not(.nav-link) {
    color: #60a5fa !important;
}

.dark a:not([class*="bg-"]):not(.nav-link):hover {
    color: #93c5fd !important;
}

/* ================================
   CALENDAR & TIME SLOTS
   ================================ */

/* Calendar day cells - keep bright colors, use dark text */
.dark #calendarGrid button.bg-green-100 {
    /* Keep original bright green background */
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
}

.dark #calendarGrid button.bg-green-100:hover {
    background-color: #bbf7d0 !important;
}

.dark #calendarGrid button.bg-yellow-100 {
    /* Keep original bright yellow background */
    background-color: #fef3c7 !important;
    border-color: #fde047 !important;
}

.dark #calendarGrid button.bg-yellow-100:hover {
    background-color: #fde68a !important;
}

.dark #calendarGrid button.bg-red-100 {
    /* Keep original bright red/pink background */
    background-color: #fecaca !important;
    border-color: #fca5a5 !important;
}

.dark #calendarGrid button.bg-red-100:hover {
    background-color: #fca5a5 !important;
}

/* Calendar day numbers and text - use dark text on colored backgrounds */
/* Apply dark text to ALL elements inside colored calendar buttons */
.dark #calendarGrid button.bg-green-100,
.dark #calendarGrid button.bg-green-100 div,
.dark #calendarGrid button.bg-green-100 span,
.dark #calendarGrid button.bg-green-100 *,
.dark #calendarGrid button.bg-yellow-100,
.dark #calendarGrid button.bg-yellow-100 div,
.dark #calendarGrid button.bg-yellow-100 span,
.dark #calendarGrid button.bg-yellow-100 *,
.dark #calendarGrid button.bg-red-100,
.dark #calendarGrid button.bg-red-100 div,
.dark #calendarGrid button.bg-red-100 span,
.dark #calendarGrid button.bg-red-100 * {
    color: #111827 !important;
}

/* Doppelte Sicherheit - überschreibe alle Textklassen innerhalb der Kalenderbuttons */
.dark #calendarGrid button.bg-green-100 .text-gray-900,
.dark #calendarGrid button.bg-green-100 .text-green-700,
.dark #calendarGrid button.bg-green-100 .text-blue-700,
.dark #calendarGrid button.bg-yellow-100 .text-gray-900,
.dark #calendarGrid button.bg-yellow-100 .text-yellow-700,
.dark #calendarGrid button.bg-yellow-100 .text-blue-700,
.dark #calendarGrid button.bg-red-100 .text-gray-900,
.dark #calendarGrid button.bg-red-100 .text-blue-700 {
    color: #111827 !important;
}

.dark .time-slot {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark .time-slot:not(.disabled):hover {
    background-color: #334155 !important;
}

.dark .time-slot.disabled {
    background-color: #0f172a !important;
    color: #64748b !important;
}

/* Calendar header and month labels */
.dark #calendarHeader h2,
.dark #monthYearDisplay {
    color: #f1f5f9 !important;
}

/* Calendar weekday headers */
.dark #calendarGrid ~ div .text-gray-700,
.dark .text-center.font-semibold.text-gray-700 {
    color: #cbd5e1 !important;
}

/* ================================
   DARK MODE TOGGLE BUTTON
   ================================ */

.dark-mode-toggle {
    position: relative;
    width: 52px;
    height: 26px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border: 2px solid #d97706 !important;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3) !important;
    margin-left: 12px;
    overflow: hidden;
}

.dark .dark-mode-toggle {
    background: linear-gradient(135deg, #1e3a8a, #3730a3) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
}

.dark-mode-toggle:hover {
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
    transform: translateY(-1px);
}

.dark .dark-mode-toggle:hover {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.5) !important;
}

.dark-mode-toggle::before {
    content: '☀️';
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 1;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 1;
}

.dark .dark-mode-toggle::before {
    opacity: 0;
    left: -10px;
}

.dark-mode-toggle::after {
    content: '🌙';
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 1;
}

.dark .dark-mode-toggle::after {
    opacity: 1;
}

/* ================================
   SPECIAL ELEMENTS
   ================================ */

/* Line-through text */
.dark .line-through {
    color: #64748b !important;
}

/* Loading spinner */
.dark .animate-spin {
    border-color: #475569 !important;
    border-top-color: #60a5fa !important;
}

/* Scrollbar */
.dark::-webkit-scrollbar {
    width: 12px;
}

.dark::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
}

.dark::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* SVG icons */
.dark svg {
    color: inherit !important;
    fill: currentColor;
}

/* Images */
.dark img {
    opacity: 1 !important;
}

/* OAuth buttons */
.dark .apple-signin-button {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark .apple-signin-button:hover {
    background-color: #334155 !important;
    border-color: #64748b !important;
}

/* Chat messages */
.dark .message-bubble {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Placeholder text */
.dark ::placeholder {
    color: #64748b !important;
    opacity: 1;
}

/* ================================
   TEXT SIZES
   ================================ */

.dark .text-6xl,
.dark .text-5xl,
.dark .text-4xl,
.dark .text-3xl,
.dark .text-2xl,
.dark .text-xl,
.dark .text-lg {
    color: #f1f5f9 !important;
}

.dark .text-sm:not(#calendarGrid *):not(#calendarGrid .text-sm),
.dark .text-xs:not(#calendarGrid *):not(#calendarGrid .text-xs) {
    color: inherit;
}

/* ================================
   UTILITY CLASSES
   ================================ */

/* Gradient text */
.dark .bg-clip-text {
    -webkit-text-fill-color: transparent !important;
}

/* Backdrop blur */
.dark .backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
}

/* Inherit colors */
.dark div:not(#calendarGrid *):not(#calendarGrid div):not(#calendarGrid span),
.dark span:not(#calendarGrid *):not(#calendarGrid div):not(#calendarGrid span),
.dark p:not([class*="text-"]),
.dark label,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: inherit;
}

/* Li elements */
.dark li {
    color: #f1f5f9 !important;
}

/* ================================
   INLINE STYLES OVERRIDES
   ================================ */

.dark [style*="background-color: white"],
.dark [style*="background-color: #fff"],
.dark [style*="background-color: #ffffff"],
.dark [style*="background-color:white"],
.dark [style*="background-color:#fff"],
.dark [style*="background-color:#ffffff"] {
    background-color: #1e293b !important;
}

.dark [style*="color: black"],
.dark [style*="color: #000"],
.dark [style*="color: #000000"],
.dark [style*="color:black"],
.dark [style*="color:#000"],
.dark [style*="color:#000000"] {
    color: #f1f5f9 !important;
}

/* ================================
   ICONS & BADGES - KEEP ORIGINAL COLORS
   ================================ */

/* Icon containers with gradients - KEEP THEIR COLORS */
.dark .w-10.h-10.bg-gradient-to-br.from-orange-600.to-amber-600,
.dark .w-11.h-11.bg-gradient-to-br.from-orange-600.to-amber-600,
.dark .w-12.h-12.bg-gradient-to-br.from-orange-600.to-amber-600 {
    background: linear-gradient(to bottom right, #ea580c, #d97706) !important;
    color: #ffffff !important;
}

.dark .w-10.h-10.bg-gradient-to-br.from-green-600.to-emerald-600,
.dark .w-11.h-11.bg-gradient-to-br.from-green-600.to-emerald-600,
.dark .w-12.h-12.bg-gradient-to-br.from-green-600.to-emerald-600 {
    background: linear-gradient(to bottom right, #16a34a, #059669) !important;
    color: #ffffff !important;
}

.dark .w-10.h-10.bg-gradient-to-br.from-blue-600.to-teal-600,
.dark .w-11.h-11.bg-gradient-to-br.from-blue-600.to-teal-600,
.dark .w-12.h-12.bg-gradient-to-br.from-blue-600.to-teal-600 {
    background: linear-gradient(to bottom right, #2563eb, #0d9488) !important;
    color: #ffffff !important;
}

/* ================================
   SPECIAL BUTTON CLASSES
   ================================ */

/* Category and Package buttons */
.dark .category-btn,
.dark .package-btn {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

.dark .category-btn:hover,
.dark .package-btn:hover {
    background-color: #475569 !important;
}

/* Border-3 and border-2 classes */
.dark .border-3 {
    border-width: 3px;
}

.dark .border-2 {
    border-color: #475569 !important;
}

/* Stronger borders for specific colors */
.dark .border-2.border-blue-200,
.dark .border-2.border-blue-300,
.dark .border-2.border-blue-400,
.dark .border-2.border-blue-500 {
    border-color: #3b82f6 !important;
}

.dark .border-2.border-green-200,
.dark .border-2.border-green-300 {
    border-color: #22c55e !important;
}

.dark .border-2.border-teal-300 {
    border-color: #14b8a6 !important;
}

.dark .border-2.border-cyan-200 {
    border-color: #06b6d4 !important;
}

.dark .border-2.border-orange-200 {
    border-color: #fb923c !important;
}

.dark .border-2.border-emerald-200 {
    border-color: #10b981 !important;
}

/* Group hover effects */
.dark .group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.dark .group:hover .group-hover\:translate-x-2 {
    transform: translateX(0.5rem);
}

/* ================================
   MISC
   ================================ */

/* Removed aggressive overrides that were forcing dark backgrounds on colorful elements */

/* Description text */
.dark .description,
.dark [class*="description"] {
    color: #cbd5e1 !important;
}

/* Recaptcha */
.dark #recaptcha-container,
.dark #recaptcha-container-onboarding {
    background-color: #1e293b !important;
}

/* Empty state text */
.dark .text-center.text-gray-500 {
    color: #94a3b8 !important;
}

/* Opacity variations */
.dark .opacity-90 {
    opacity: 0.9 !important;
}

/* Transform utilities */
.dark .transform {
    transform: translateZ(0);
}

/* Removed aggressive overrides - let colorful elements keep their colors */

/* ================================
   CALENDAR TEXT COLOR FIX - FINAL OVERRIDE
   Diese Regeln müssen am Ende stehen!
   ================================ */
/* Überschreibe ALLE Textfarben im Kalender - egal welche Klasse */
.dark #calendarGrid .text-gray-900,
.dark #calendarGrid .text-green-700,
.dark #calendarGrid .text-yellow-700,
.dark #calendarGrid .text-blue-700,
.dark #calendarGrid .text-red-700,
.dark #calendarGrid div,
.dark #calendarGrid span,
.dark #calendarGrid button {
    color: #000000 !important;
}

/* Spezifisch für die farbigen Kalenderboxen */
.dark #calendarGrid button.bg-green-100,
.dark #calendarGrid button.bg-green-100 *,
.dark #calendarGrid button.bg-yellow-100,
.dark #calendarGrid button.bg-yellow-100 *,
.dark #calendarGrid button.bg-red-100,
.dark #calendarGrid button.bg-red-100 * {
    color: #000000 !important;
}