/**
 * ViWOO property — Dark Mode (class strategy: html.dark)
 * Ergänzt Tailwind-CDN-Klassen projektweit, ohne jedes Template einzeln anzupassen.
 */

html.dark {
  color-scheme: dark;
}

.dark body {
  background-color: rgb(2 6 23) !important; /* slate-950 */
  color: rgb(226 232 240);
}

/* —— Surfaces —— */
.dark .bg-white { background-color: rgb(15 23 42) !important; }
.dark .bg-slate-50,
.dark .bg-gray-50 { background-color: rgb(2 6 23) !important; }
.dark .bg-slate-100 { background-color: rgb(30 41 59) !important; }
.dark .bg-gray-100 { background-color: rgb(30 41 59) !important; }
.dark .bg-slate-200 { background-color: rgb(51 65 85) !important; }

.dark [data-viwoo-logo-shell] { background-color: rgb(255 255 255) !important; }

/* Tinted panels */
.dark .bg-indigo-50 { background-color: rgb(30 27 75 / 0.45) !important; }
.dark .bg-indigo-50\/50 { background-color: rgb(30 27 75 / 0.35) !important; }
.dark .bg-indigo-50\/40 { background-color: rgb(30 27 75 / 0.3) !important; }
.dark .bg-indigo-100 { background-color: rgb(49 46 129 / 0.55) !important; }
.dark .bg-red-50 { background-color: rgb(69 10 10 / 0.45) !important; }
.dark .bg-red-100 { background-color: rgb(127 29 29 / 0.5) !important; }
.dark .bg-emerald-50 { background-color: rgb(6 47 35 / 0.45) !important; }
.dark .bg-emerald-100 { background-color: rgb(6 78 59 / 0.5) !important; }
.dark .bg-amber-50 { background-color: rgb(69 26 3 / 0.45) !important; }
.dark .bg-amber-100 { background-color: rgb(120 53 15 / 0.5) !important; }
.dark .bg-sky-50 { background-color: rgb(12 37 56 / 0.45) !important; }
.dark .bg-green-50 { background-color: rgb(6 47 35 / 0.45) !important; }
.dark .bg-green-100 { background-color: rgb(6 78 59 / 0.5) !important; }
.dark .bg-orange-50 { background-color: rgb(67 20 7 / 0.4) !important; }

.dark .from-slate-50 { --tw-gradient-from: rgb(15 23 42) var(--tw-gradient-from-position) !important; }
.dark .to-indigo-50\/40 { --tw-gradient-to: rgb(30 27 75 / 0.35) var(--tw-gradient-to-position) !important; }
.dark .from-indigo-50 { --tw-gradient-from: rgb(30 27 75 / 0.5) var(--tw-gradient-from-position) !important; }
.dark .to-white { --tw-gradient-to: rgb(15 23 42) var(--tw-gradient-to-position) !important; }
.dark [class*="from-indigo-100"] {
  --tw-gradient-from: rgb(49 46 129 / 0.25) var(--tw-gradient-from-position) !important;
}

/* —— Text (hellere Stufen für besseren Kontrast auf dunklen Flächen) —— */
.dark .text-gray-900,
.dark .text-slate-900 { color: rgb(248 250 252) !important; }
.dark .text-gray-800,
.dark .text-slate-800 { color: rgb(241 245 249) !important; }
.dark .text-gray-700,
.dark .text-slate-700 { color: rgb(226 232 240) !important; }
.dark .text-gray-600,
.dark .text-slate-600 { color: rgb(203 213 225) !important; }
.dark .text-gray-500,
.dark .text-slate-500 { color: rgb(186 196 210) !important; }
.dark .text-gray-400,
.dark .text-slate-400 { color: rgb(163 179 199) !important; }
.dark .text-gray-300,
.dark .text-slate-300 { color: rgb(148 163 184) !important; }

.dark .text-indigo-900 { color: rgb(199 210 254) !important; }
.dark .text-indigo-800 { color: rgb(165 180 252) !important; }
.dark .text-indigo-700 { color: rgb(165 180 252) !important; }
.dark .text-indigo-600 { color: rgb(129 140 248) !important; }
.dark .text-indigo-500 { color: rgb(129 140 248) !important; }
.dark .text-indigo-400 { color: rgb(129 140 248) !important; }
.dark .text-indigo-300 { color: rgb(165 180 252) !important; }
.dark .text-indigo-200 { color: rgb(199 210 254) !important; }
.dark .text-indigo-100 { color: rgb(224 231 255) !important; }

.dark .text-red-900 { color: rgb(254 202 202) !important; }
.dark .text-red-800,
.dark [class*="text-red-800"] { color: rgb(254 202 202) !important; }
.dark .text-red-700,
.dark [class*="text-red-700"] { color: rgb(252 165 165) !important; }
.dark .text-red-600 { color: rgb(248 113 113) !important; }
.dark .text-red-500 { color: rgb(248 113 113) !important; }

.dark .text-emerald-900 { color: rgb(110 231 183) !important; }
.dark .text-emerald-800 { color: rgb(110 231 183) !important; }
.dark .text-emerald-700 { color: rgb(110 231 183) !important; }
.dark .text-emerald-600 { color: rgb(52 211 153) !important; }

.dark .text-amber-950,
.dark .text-amber-900,
.dark .text-amber-800,
.dark .text-amber-700,
.dark .text-amber-600 { color: rgb(252 211 77) !important; }
.dark .text-amber-200 { color: rgb(253 230 138) !important; }

.dark .text-green-600 { color: rgb(74 222 128) !important; }
.dark .text-green-700 { color: rgb(74 222 128) !important; }
.dark .text-blue-600 { color: rgb(96 165 250) !important; }
.dark .text-sky-900 { color: rgb(125 211 252) !important; }
.dark .text-sky-800 { color: rgb(125 211 252) !important; }
.dark .text-orange-700 { color: rgb(253 186 116) !important; }

.dark main strong,
.dark article strong {
  color: rgb(248 250 252);
}

.dark .hover\:text-indigo-800:hover,
.dark .hover\:text-indigo-700:hover {
  color: rgb(199 210 254) !important;
}
.dark .hover\:text-gray-500:hover,
.dark .hover\:text-slate-500:hover {
  color: rgb(203 213 225) !important;
}

.dark .placeholder\:text-slate-400::placeholder,
.dark .placeholder\:text-gray-400::placeholder {
  color: rgb(148 163 184) !important;
}

/* Logo-Kasten bleibt weiß — dort dunkle Schrift behalten */
.dark [data-viwoo-logo-shell] .text-indigo-900 { color: rgb(49 46 129) !important; }
.dark [data-viwoo-logo-shell] .text-slate-500 { color: rgb(100 116 139) !important; }

/* —— Borders & dividers —— */
.dark .border-gray-100,
.dark .border-slate-100 { border-color: rgb(51 65 85) !important; }
.dark .border-gray-200,
.dark .border-slate-200 { border-color: rgb(71 85 105) !important; }
.dark .border-indigo-100 { border-color: rgb(67 56 202 / 0.45) !important; }
.dark .border-indigo-200 { border-color: rgb(79 70 229 / 0.5) !important; }
.dark .border-red-100 { border-color: rgb(127 29 29 / 0.5) !important; }
.dark .border-emerald-100 { border-color: rgb(6 78 59 / 0.5) !important; }
.dark .border-amber-200 { border-color: rgb(120 53 15 / 0.5) !important; }
.dark .border-amber-200\/90 { border-color: rgb(120 53 15 / 0.55) !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85) !important;
}

.dark .bg-gray-50\/50 { background-color: rgb(30 41 59 / 0.65) !important; }
.dark .bg-slate-100\/90 { background-color: rgb(30 41 59 / 0.9) !important; }
.dark .bg-white\/70 { background-color: rgb(51 65 85 / 0.7) !important; }
.dark .bg-slate-200\/90 { background-color: rgb(51 65 85 / 0.9) !important; }

.dark .ring-gray-100,
.dark .ring-slate-100,
.dark .ring-slate-50 { --tw-ring-color: rgb(51 65 85) !important; }

.dark .border-slate-200\/90,
.dark .border-slate-300 { border-color: rgb(71 85 105) !important; }

/* —— Hover / focus surfaces —— */
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-slate-50:hover { background-color: rgb(30 41 59) !important; }
.dark .hover\:bg-indigo-50:hover { background-color: rgb(49 46 129 / 0.35) !important; }
.dark .hover\:bg-slate-100:hover { background-color: rgb(51 65 85) !important; }

/* —— Forms —— */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.dark select,
.dark textarea {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(71 85 105) !important;
  color: rgb(241 245 249) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: rgb(148 163 184) !important;
  opacity: 1;
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  background-color: rgb(30 41 59) !important;
}

/* Tom Select (Mieter-Upload Liegenschaft) */
.dark .ts-control {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(71 85 105) !important;
  color: rgb(241 245 249) !important;
}
.dark .ts-dropdown {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(71 85 105) !important;
}
.dark .ts-dropdown .option { color: rgb(226 232 240) !important; }
.dark .ts-dropdown .active {
  background-color: rgb(49 46 129 / 0.45) !important;
  color: rgb(199 210 254) !important;
}

/* —— Tables —— */
.dark thead.bg-gray-50,
.dark thead.bg-slate-50 { background-color: rgb(30 41 59) !important; }
.dark tr.hover\:bg-indigo-50\/30:hover { background-color: rgb(49 46 129 / 0.2) !important; }

/* —— Shadows (softer in dark) —— */
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-xl,
.dark .shadow-2xl {
  --tw-shadow-color: rgb(0 0 0 / 0.35);
}

/* —— Modals & toasts —— */
.dark #modal-box { background-color: rgb(15 23 42) !important; }
.dark #modal-title { color: rgb(241 245 249) !important; }
.dark #modal-text { color: rgb(186 196 210) !important; }
.dark #modal-cancel { color: rgb(186 196 210) !important; }
.dark #modal-cancel:hover { background-color: rgb(30 41 59) !important; }
.dark .toast-item {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(51 65 85) !important;
}
.dark .toast-item p { color: rgb(226 232 240) !important; }

/* —— Footer —— */
.dark footer .bg-white { background-color: rgb(15 23 42) !important; }
.dark footer .border-slate-200 { border-color: rgb(51 65 85) !important; }

/* —— Inactive / locked cards —— */
.dark .viwoo-locked-card {
  background-color: rgb(30 41 59) !important;
  border-color: rgb(71 85 105) !important;
}
.dark .viwoo-locked-card .text-slate-600,
.dark .viwoo-locked-card .text-slate-700 {
  color: rgb(203 213 225) !important;
}
.dark .viwoo-locked-card button.bg-white {
  background-color: rgb(51 65 85) !important;
  border-color: rgb(100 116 139) !important;
  color: rgb(226 232 240) !important;
}

.dark .viwoo-locked-panel {
  opacity: 0.88 !important;
  filter: none !important;
}

.dark .saturate-\[0\.45\] {
  filter: none !important;
  opacity: 1 !important;
  background-color: rgb(30 41 59) !important;
  border-color: rgb(71 85 105) !important;
}
.dark .saturate-\[0\.45\] .font-black.text-slate-500 {
  color: rgb(226 232 240) !important;
}
.dark .saturate-\[0\.45\] .text-slate-500 {
  color: rgb(186 196 210) !important;
}
.dark .saturate-\[0\.45\] .text-slate-400 {
  color: rgb(163 179 199) !important;
}
.dark .saturate-\[0\.45\] .text-slate-600 {
  color: rgb(203 213 225) !important;
}
.dark .saturate-\[0\.45\] .text-slate-700 {
  color: rgb(226 232 240) !important;
}
.dark .saturate-\[0\.45\] button.bg-white {
  background-color: rgb(51 65 85) !important;
  border-color: rgb(100 116 139) !important;
  color: rgb(226 232 240) !important;
}

/* Ausgegraute Bereiche (Mieter ohne Add-on, Archiv) */
.dark .opacity-40 { opacity: 0.72 !important; }
.dark .opacity-50 { opacity: 0.78 !important; }
.dark section.opacity-50 .text-slate-400,
.dark section.opacity-50 .text-gray-400 {
  color: rgb(163 179 199) !important;
}

/* Fehler-Alerts (Upload) */
.dark .bg-red-50.border-l-4 {
  background-color: rgb(69 10 10 / 0.55) !important;
  border-left-color: rgb(248 113 113) !important;
}
.dark .bg-red-50.border-l-4 .font-bold {
  color: rgb(254 202 202) !important;
}

/* Tabellen: Kopfzeilen & Meta-Zeilen */
.dark thead .text-gray-400,
.dark thead .text-slate-400 {
  color: rgb(163 179 199) !important;
}
.dark tbody .text-\[10px\].text-gray-400,
.dark tbody .text-xs.text-gray-500,
.dark tbody .text-xs.text-gray-600 {
  color: rgb(186 196 210) !important;
}
.dark tbody .italic.text-gray-300,
.dark tbody .text-xs.text-gray-300 {
  color: rgb(163 179 199) !important;
}

/* Mieter-Gate Overlay */
.dark .bg-slate-50\/70 { background-color: rgb(2 6 23 / 0.88) !important; }

.dark .ring-white { --tw-ring-color: rgb(15 23 42) !important; }

/* —— Theme switch (segmented control) —— */
.viwoo-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background: rgb(241 245 249);
  border: 1px solid rgb(226 232 240);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
}
.dark .viwoo-theme-switch {
  background: rgb(30 41 59);
  border-color: rgb(51 65 85);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
}
.viwoo-theme-switch__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: rgb(100 116 139);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.viwoo-theme-switch__btn:hover {
  color: rgb(51 65 85);
}
.dark .viwoo-theme-switch__btn:hover {
  color: rgb(203 213 225);
}
.viwoo-theme-switch__btn[aria-checked="true"] {
  color: rgb(79 70 229);
}
.dark .viwoo-theme-switch__btn[aria-checked="true"] {
  color: rgb(165 180 252);
}
.viwoo-theme-switch__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.viwoo-theme-switch__indicator {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgb(255 255 255);
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.12), 0 1px 2px rgb(15 23 42 / 0.06);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  transform: translateX(2.375rem); /* Default: System */
}
.dark .viwoo-theme-switch__indicator {
  background: rgb(51 65 85);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}
.viwoo-theme-switch__wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.viwoo-theme-switch__label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(100 116 139);
  white-space: nowrap;
}
.dark .viwoo-theme-switch__label {
  color: rgb(163 179 199);
}

/* Upload-Seite: dezenter Seitenhintergrund */
.dark .min-h-screen.bg-gray-50 { background-color: rgb(2 6 23) !important; }

/* Checkboxen lesbar */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  background-color: rgb(30 41 59);
  border-color: rgb(100 116 139);
}

/* Disabled fieldsets (Mieter gesperrt) */
.dark fieldset[disabled] {
  opacity: 0.65;
}

/* Addon-Modal Backdrop */
.dark [data-addon-upsell-modal]:not(.hidden) > div > button.absolute.inset-0 {
  background-color: rgb(0 0 0 / 0.65) !important;
}

/* Badges auf dunklem Grund */
.dark .bg-slate-100.text-slate-600 {
  background-color: rgb(51 65 85) !important;
  color: rgb(203 213 225) !important;
}

.dark .saturate-50 { filter: none !important; }

.dark .toast-item button.text-gray-300 {
  color: rgb(163 179 199) !important;
}
.dark .toast-item button.text-gray-300:hover {
  color: rgb(203 213 225) !important;
}

/* Warn-Banner (Mieter-Upload gesperrt) */
.dark .text-amber-950 { color: rgb(253 230 138) !important; }
.dark .text-amber-900\/95 { color: rgb(253 230 138) !important; }