/* ════════════════════════════════════════════
   GLOBAL DARK MODE OVERRIDES
   Loaded AFTER output.css to ensure these
   rules override Tailwind utility classes.
   ════════════════════════════════════════════ */

/* --- Body + unstyled HTML-Elemente: default text auf hell setzen, damit
   Standard-Tags wie <dd>, <dt>, <caption>, <figcaption> nicht schwarz bleiben. --- */
html.dark body { color: rgb(229, 231, 235); }
html.dark dd, html.dark dt, html.dark caption, html.dark figcaption,
html.dark fieldset, html.dark legend {
  color: inherit;
}

/* --- Text: gray scale inversion --- */
html.dark .text-gray-900 { color: rgb(243, 244, 246) !important; }
html.dark .text-gray-800 { color: rgb(229, 231, 235) !important; }
html.dark .text-gray-700 { color: rgb(209, 213, 219) !important; }
html.dark .text-gray-600 { color: rgb(156, 163, 175) !important; }
html.dark .text-gray-500 { color: rgb(156, 163, 175) !important; }
html.dark .text-gray-400 { color: rgb(107, 114, 128) !important; }
html.dark .text-gray-300 { color: rgb(75, 85, 99) !important; }

/* --- Borders --- */
html.dark .border-gray-200 { border-color: rgb(55, 65, 81) !important; }
html.dark .border-gray-100 { border-color: rgb(55, 65, 81) !important; }
html.dark .border-gray-300 { border-color: rgb(75, 85, 99) !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(55, 65, 81) !important; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(55, 65, 81) !important; }
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: rgb(55, 65, 81) !important; }
html.dark .border-b { border-color: rgb(55, 65, 81) !important; }
html.dark .border-t { border-color: rgb(55, 65, 81) !important; }

/* --- Backgrounds --- */
html.dark .bg-gray-50 { background-color: rgb(17, 24, 39) !important; }
html.dark .bg-gray-100 { background-color: rgb(31, 41, 55) !important; }
html.dark .bg-gray-200 { background-color: rgb(55, 65, 81) !important; }
html.dark .bg-white {
  background-color: rgb(31, 41, 55) !important;
}

/* --- Hovers --- */
html.dark .hover\:bg-gray-50:hover { background-color: rgb(55, 65, 81) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: rgb(55, 65, 81) !important; }
html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important; }

/* --- Breadcrumbs --- */
html.dark nav.text-sm a { color: rgb(156, 163, 175) !important; }
html.dark nav.text-sm a:hover { color: rgb(209, 213, 219) !important; }
html.dark nav.text-sm span { color: rgb(107, 114, 128) !important; }
html.dark nav.text-sm .text-gray-900,
html.dark nav.text-sm .font-medium { color: rgb(209, 213, 219) !important; }

/* --- Selects / Inputs (native) --- */
html.dark select {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(229, 231, 235) !important;
}
html.dark input[type="search"],
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark textarea {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(229, 231, 235) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgb(107, 114, 128) !important;
}

/* --- Dropdown menus --- */
html.dark [x-show][class*="absolute"][class*="bg-white"],
html.dark [x-show][class*="absolute"][class*="shadow"] {
  background-color: rgb(31, 41, 55) !important;
}

/* --- Filter pills / chip buttons --- */
html.dark a.bg-white,
html.dark button.bg-white,
html.dark a[class*="bg-white"][class*="border"],
html.dark button[class*="bg-white"][class*="border"] {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(209, 213, 219) !important;
}
html.dark a.bg-white:hover,
html.dark button.bg-white:hover {
  background-color: rgb(75, 85, 99) !important;
}

/* --- Colored badges (preserve hue, darken bg) --- */
html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; }

html.dark .text-yellow-800, html.dark .text-yellow-700, html.dark .text-yellow-900 { color: rgb(253, 224, 71) !important; }
html.dark .text-blue-800, html.dark .text-blue-700, html.dark .text-blue-900 { color: rgb(147, 197, 253) !important; }
html.dark .text-green-800, html.dark .text-green-700, html.dark .text-green-900 { color: rgb(134, 239, 172) !important; }
html.dark .text-red-800, html.dark .text-red-700, html.dark .text-red-900 { color: rgb(252, 165, 165) !important; }
html.dark .text-green-600 { color: rgb(74, 222, 128) !important; }
html.dark .text-red-600 { color: rgb(248, 113, 113) !important; }
html.dark .text-emerald-900, html.dark .text-emerald-800, html.dark .text-emerald-700 { color: rgb(110, 231, 183) !important; }
html.dark .text-amber-900 { color: rgb(252, 211, 77) !important; }
html.dark .text-orange-900 { color: rgb(253, 186, 116) !important; }
html.dark .text-indigo-900, html.dark .text-indigo-800 { color: rgb(165, 180, 252) !important; }
html.dark .text-purple-900, html.dark .text-purple-800, html.dark .text-purple-700 { color: rgb(216, 180, 254) !important; }
html.dark .text-pink-900, html.dark .text-pink-800, html.dark .text-pink-700 { color: rgb(249, 168, 212) !important; }

/* --- Badge-Farben v2: amber, emerald, orange --- */
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; }
html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600 { color: rgb(252, 211, 77) !important; }
html.dark .text-emerald-800, html.dark .text-emerald-700 { color: rgb(110, 231, 183) !important; }
html.dark .text-orange-800, html.dark .text-orange-700 { color: rgb(253, 186, 116) !important; }
html.dark .text-indigo-500, html.dark .text-indigo-700 { color: rgb(165, 180, 252) !important; }

/* --- Semi-transparente Highlight-Rows in Tabellen --- */
html.dark tr[class*="bg-amber-50\\/30"] { background-color: rgba(245, 158, 11, 0.08) !important; }
html.dark tr[class*="bg-red-50\\/30"] { background-color: rgba(239, 68, 68, 0.05) !important; }
html.dark tr[class*="bg-green-50\\/20"] { background-color: rgba(34, 197, 94, 0.05) !important; }
html.dark tr[class*="bg-blue-50\\/50"] { background-color: rgba(59, 130, 246, 0.08) !important; }

/* --- Gradient-Hintergrund Chart-Container --- */
html.dark .bg-gradient-to-b.from-white.to-gray-50 {
  background-image: linear-gradient(to bottom, rgb(31, 41, 55), rgb(17, 24, 39)) !important;
}

/* --- SVG-Kontostand-Linie IST (Schwarz) --- auf dunklem Grund kaum sichtbar --- */
html.dark svg polyline[stroke="#1f2937"] {
  stroke: rgb(229, 231, 235) !important;
}

/* --- Chart-Gridlines auf dunklem Grund abdunkeln --- */
html.dark [style*="bg-gray-100"],
html.dark .bg-gray-100\/50 { background-color: rgba(255, 255, 255, 0.04) !important; }

/* --- Dunkle Dots (past-Linie) auf dunklem Grund invertieren --- */
html.dark [title*="Kontostand IST"][class*="bg-gray-900"] {
  background-color: rgb(229, 231, 235) !important;
  border-color: rgb(31, 41, 55) !important;
}

/* --- Links --- */
html.dark .text-blue-500 { color: rgb(96, 165, 250) !important; }
html.dark .text-blue-600 { color: rgb(96, 165, 250) !important; }
html.dark a.text-blue-600:hover { color: rgb(147, 197, 253) !important; }

/* --- Scrollbar (Webkit) --- */
/* --- FullCalendar Dark Mode --- */
html.dark .fc {
  --fc-border-color: rgb(55, 65, 81);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgb(31, 41, 55);
  --fc-list-event-hover-bg-color: rgb(55, 65, 81);
  --fc-today-bg-color: transparent;
  --fc-now-indicator-color: rgb(239, 68, 68);
}
html.dark .fc .fc-col-header-cell { background: rgb(31, 41, 55) !important; }
html.dark .fc .fc-col-header-cell-cushion { color: rgb(156, 163, 175) !important; }
html.dark .fc .fc-daygrid-day-number { color: rgb(209, 213, 219) !important; }
html.dark .fc .fc-daygrid-day-top { color: rgb(209, 213, 219) !important; }
html.dark .fc .fc-daygrid-day:hover { background-color: rgba(255,255,255,0.03) !important; }
html.dark .fc .fc-day-other .fc-daygrid-day-number { color: rgb(107, 114, 128) !important; }
html.dark .fc .fc-button-primary {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(209, 213, 219) !important;
}
html.dark .fc .fc-button-primary:hover { background-color: rgb(75, 85, 99) !important; }
html.dark .fc .fc-button-primary.fc-button-active,
html.dark .fc .fc-button-primary:not(:disabled):active {
  background-color: rgb(75, 85, 99) !important;
  color: white !important;
}
html.dark .fc .fc-toolbar-title { color: rgb(243, 244, 246) !important; }
html.dark .fc .fc-list-event-title a { color: rgb(209, 213, 219) !important; }
html.dark .fc .fc-list-day-cushion { background: rgb(31, 41, 55) !important; }
html.dark .fc .fc-timegrid-slot-label { color: rgb(156, 163, 175) !important; }
html.dark .fc .fc-scrollgrid { border-color: rgb(55, 65, 81) !important; }
html.dark .fc .fc-popover {
  background: rgb(31, 41, 55) !important;
  border-color: rgb(55, 65, 81) !important;
}
html.dark .fc .fc-popover-header { background: rgb(55, 65, 81) !important; color: rgb(209, 213, 219) !important; }
html.dark .fc .fc-more-link { color: rgb(96, 165, 250) !important; }
html.dark .fc .fc-event:not(.fc-daygrid-dot-event) { color: rgb(229, 231, 235) !important; }
html.dark .fc .fc-event .fc-event-title { color: rgb(229, 231, 235) !important; }
html.dark .fc .fc-event .fc-event-time { color: rgb(209, 213, 219) !important; }

/* --- Modals / Alpine x-show panels (generic) --- */
html.dark [x-show][class*="fixed"][class*="bg-white"],
html.dark [x-show][class*="fixed"][class*="bg-gray-50"] {
  background-color: rgb(31, 41, 55) !important;
}

/* --- Scrollbar (Webkit) --- */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: rgb(17, 24, 39); }
html.dark ::-webkit-scrollbar-thumb { background: rgb(55, 65, 81); border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(75, 85, 99); }