/* ============================================================
   RTO Theme Override für Dawarich  —  v2 (Kontrast & Login-Fix)
   Angepasst an rto.de (Tailwind v4 + shadcn/ui, #1c2c74, Barlow)
   Dawarich verwendet DaisyUI mit data-theme="dawarich-dark".
   Wir überschreiben die DaisyUI-Custom-Properties in light-Werte
   und sichern jede sichtbarkeitskritische Komponente explizit ab.
   KARTE (MapLibre/Leaflet) BLEIBT UNBERÜHRT.
   ============================================================ */

/* Barlow von Google Fonts laden */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* -------- Design-Tokens -------- */
:root,
[data-theme="dawarich-dark"],
html[data-theme="dawarich-dark"] {
  /* rto.de Brand */
  --rto-blue:         #1c2c74;
  --rto-blue-hover:   #182766;
  --rto-text:         #252525;
  --rto-text-muted:   #525252;     /* dunkler als vorher → besserer Kontrast */
  --rto-bg:           #ffffff;
  --rto-panel:        #f4f4f5;     /* leicht dunkler als 0%-97 → vom Body unterscheidbar */
  --rto-panel-2:      #e7e7ea;     /* base-300-Ersatz */
  --rto-border:       #d4d4d8;     /* etwas kräftiger → Inputs/Cards sichtbar */
  --rto-destructive:  #e7193d;
  --rto-success:      #10b981;
  --rto-warning:      #f59e0b;
  --rto-info:         #2563eb;
  --rto-radius:       0.625rem;
  --rto-radius-lg:    1rem;

  /* DaisyUI-Overrides (HSL-Komponenten "H S% L%") */
  /* Primary = rto-blue #1c2c74 */
  --p:  231 61% 28%;
  --pf: 231 61% 24%;
  --pc: 0 0% 100%;

  /* Secondary & Accent */
  --s:  231 30% 40%;
  --sf: 231 30% 32%;
  --sc: 0 0% 100%;
  --a:  231 61% 28%;
  --af: 231 61% 24%;
  --ac: 0 0% 100%;

  /* Neutral (für bg-neutral / text-neutral-content auf z.B. Hero-CTA) */
  --n:  0 0% 14.5%;
  --nf: 0 0% 10%;
  --nc: 0 0% 100%;

  /* Base — durchgängig hell, unterscheidbar */
  --b1: 0 0% 100%;             /* #ffffff Body / Card-Hintergrund */
  --b2: 0 0% 95%;              /* #f2f2f2 Hero / Footer (war 97 → blendete) */
  --b3: 0 0% 89%;              /* #e3e3e3 */
  --bc: 0 0% 14.5%;            /* body text #252525 */

  /* Info/Success/Warning/Error — kräftige Farben, weiße Schrift */
  --in: 217 91% 60%;
  --inc: 0 0% 100%;
  --su: 152 76% 39%;
  --suc: 0 0% 100%;
  --wa: 38 92% 50%;
  --wac: 0 0% 100%;
  --er: 348 83% 50%;
  --erc: 0 0% 100%;

  /* Toggle-Thumb-Farbe (DaisyUI nutzt --tglbg per box-shadow) */
  --tglbg: #ffffff;

  /* Radii */
  --rounded-box:  1rem;
  --rounded-btn:  0.625rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --btn-text-case: none;
}

/* -------- Globale Typografie & Body -------- */
html, body,
html[data-theme="dawarich-dark"] body {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background-color: var(--rto-bg) !important;
  color: var(--rto-text) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', sans-serif !important;
  color: var(--rto-text) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* -------- Navbar -------- */
.navbar {
  background-color: var(--rto-bg) !important;
  border-bottom: 1px solid var(--rto-border);
  color: var(--rto-text) !important;
}
.navbar a:not(.btn-primary):not(.btn-error):not(.btn-success),
.navbar .btn-ghost {
  color: var(--rto-text) !important;
}
.navbar a:hover, .navbar .btn-ghost:hover {
  color: var(--rto-blue) !important;
  background-color: var(--rto-panel) !important;
}
.navbar .menu > li > a.active,
.navbar .menu > li > a[aria-current="page"] {
  color: var(--rto-blue) !important;
  background-color: var(--rto-panel) !important;
}

/* -------- Primär-Button -------- */
.btn,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn,
input[type="submit"].btn-primary {
  border-radius: var(--rto-radius);
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:focus {
  background-color: var(--rto-blue-hover) !important;
  border-color: var(--rto-blue-hover) !important;
  color: #ffffff !important;
}

/* -------- Sekundär / Ghost / Outline -------- */
.btn-secondary {
  background-color: var(--rto-panel) !important;
  border-color: var(--rto-border) !important;
  color: var(--rto-text) !important;
}
.btn-secondary:hover {
  background-color: var(--rto-panel-2) !important;
  color: var(--rto-blue) !important;
}
.btn-ghost {
  color: var(--rto-text) !important;
  background-color: transparent;
}
.btn-ghost:hover {
  background-color: var(--rto-panel) !important;
  color: var(--rto-blue) !important;
}
.btn-outline {
  background-color: transparent !important;
  color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
}
.btn-outline:hover {
  background-color: var(--rto-blue) !important;
  color: #fff !important;
}

/* Danger / Error / Destructive */
.btn-error,
.btn-danger {
  background-color: var(--rto-destructive) !important;
  border-color: var(--rto-destructive) !important;
  color: #ffffff !important;
}

/* Hero-CTA "Anmelden" auf Startseite (bg-neutral text-neutral-content) */
.bg-neutral {
  background-color: var(--rto-blue) !important;
}
.text-neutral-content {
  color: #ffffff !important;
}

/* -------- Links -------- */
a:not(.btn):not(.tab):not(.menu):not(.breadcrumbs):not(.dropdown):not(.label) {
  color: var(--rto-blue);
  text-decoration: none;
}
a:not(.btn):not(.tab):not(.menu):not(.breadcrumbs):not(.dropdown):not(.label):hover {
  color: var(--rto-blue-hover);
  text-decoration: underline;
}
.link {
  color: var(--rto-blue) !important;
}
.link:hover {
  color: var(--rto-blue-hover) !important;
}
/* Devise-Footer-Links unter dem Login-Formular sind text-base-content/70
   → das ergibt dunkelgrauen Text mit 70% Opazität. Auf weißer Karte ok,
   aber wir wollen sie als klickbar erkennbar machen → blau, voll opak. */
.link.text-base-content\/70,
a.link.link-hover.text-base-content\/70 {
  color: var(--rto-blue) !important;
  opacity: 1 !important;
}
.text-base-content\/70 {
  color: var(--rto-text-muted) !important;
  opacity: 1 !important;
}
/* Allgemeine Tailwind-Klasse text-base-content explizit binden */
.text-base-content {
  color: var(--rto-text) !important;
}

/* -------- Tabs / aktive States -------- */
.tab-active,
.tabs-bordered .tab.tab-active {
  color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
}

/* -------- Toggle / Checkbox / Radio -------- */
/* Toggle-Track: inaktiv = klar erkennbares Grau, aktiv = rto-blau.
   Thumb (weißer Kreis) wird via box-shadow von --tglbg erzeugt. */
.toggle {
  --tglbg: #ffffff;
  background-color: #c7c7cc !important;
  border-color: #b4b4b8 !important;
  color: #ffffff;
}
.toggle:checked,
.toggle[aria-checked="true"] {
  background-color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
}
.checkbox {
  background-color: #ffffff !important;
  border: 1.5px solid var(--rto-border) !important;
}
.checkbox:checked,
.checkbox-primary:checked {
  background-color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
}
.radio {
  background-color: #ffffff !important;
  border: 1.5px solid var(--rto-border) !important;
}
.radio:checked,
.radio-primary:checked {
  background-color: var(--rto-blue) !important;
  border-color: var(--rto-blue) !important;
}

/* -------- Sidebar / Drawer -------- */
.drawer-side .menu,
aside.menu,
.drawer-content + .drawer-side {
  background-color: var(--rto-bg) !important;
  color: var(--rto-text) !important;
  border-right: 1px solid var(--rto-border);
}
.menu li > a,
.menu li > button {
  color: var(--rto-text);
}
.menu li > a:hover,
.menu li > button:hover {
  background-color: var(--rto-panel) !important;
  color: var(--rto-blue) !important;
}
.menu li > a.active,
.menu li > a[aria-current="page"] {
  background-color: var(--rto-blue) !important;
  color: #ffffff !important;
}

/* -------- Cards / Panels / Hero -------- */
.card,
.panel,
.stats {
  background-color: var(--rto-bg) !important;
  border: 1px solid var(--rto-border);
  border-radius: var(--rto-radius-lg);
  color: var(--rto-text) !important;
}
/* Hero auf Login-/Register-Seite: bg-base-200 → vom Body unterscheidbar */
.hero {
  background-color: var(--rto-panel) !important;
  border: 1px solid var(--rto-border);
  border-radius: var(--rto-radius-lg);
}
.hero .card {
  background-color: #ffffff !important;
  border: 1px solid var(--rto-border);
}

/* -------- Eingabefelder -------- */
.input,
.textarea,
.select,
.file-input,
input.input-bordered,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  background-color: #ffffff !important;
  color: var(--rto-text) !important;
  border: 1px solid var(--rto-border) !important;
  border-radius: var(--rto-radius) !important;
}
.input:focus,
.textarea:focus,
.select:focus,
.file-input:focus,
input:focus {
  border-color: var(--rto-blue) !important;
  outline: 2px solid rgba(28, 44, 116, 0.25);
  outline-offset: 0;
}
.input::placeholder,
.textarea::placeholder,
input::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Form-Labels (Login/Register) */
.label,
.label-text,
label {
  color: var(--rto-text) !important;
}
.label-text-alt {
  color: var(--rto-text-muted) !important;
}

/* -------- Badges & Tags -------- */
.badge {
  background-color: var(--rto-panel) !important;
  color: var(--rto-text) !important;
  border: 1px solid var(--rto-border) !important;
  border-radius: 999px;
}
.badge-primary {
  background-color: var(--rto-blue) !important;
  color: #ffffff !important;
  border-color: var(--rto-blue) !important;
}

/* -------- Dropdown / Modal — solider Hintergrund, lesbarer Text -------- */
.dropdown-content,
.menu.dropdown-content,
ul.dropdown-content {
  background-color: #ffffff !important;
  color: var(--rto-text) !important;
  border: 1px solid var(--rto-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dropdown-content li > a,
.dropdown-content li > button,
.dropdown-content li > label {
  color: var(--rto-text) !important;
  background-color: transparent;
}
.dropdown-content li > a:hover,
.dropdown-content li > a:focus,
.dropdown-content li > button:hover,
.dropdown-content li > button:focus {
  background-color: var(--rto-panel) !important;
  color: var(--rto-blue) !important;
}

/* Modal */
.modal {
  background-color: rgba(0, 0, 0, 0.45) !important;
}
.modal-box {
  background-color: #ffffff !important;
  color: var(--rto-text) !important;
  border: 1px solid var(--rto-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}

/* -------- Tabellen -------- */
table, .table {
  color: var(--rto-text) !important;
  background-color: var(--rto-bg) !important;
}
table thead th, .table thead th {
  background-color: var(--rto-panel) !important;
  color: var(--rto-text) !important;
  border-bottom: 1px solid var(--rto-border);
}
.table tr {
  border-color: var(--rto-border) !important;
}
.table tbody tr:hover {
  background-color: var(--rto-panel) !important;
}

/* -------- Flash / Alerts -------- */
.alert {
  border-radius: var(--rto-radius);
  border: 1px solid transparent;
  font-weight: 500;
}
.alert-success {
  background-color: var(--rto-success) !important;
  color: #ffffff !important;
  border-color: var(--rto-success) !important;
}
.alert-error,
.alert-danger {
  background-color: var(--rto-destructive) !important;
  color: #ffffff !important;
  border-color: var(--rto-destructive) !important;
}
.alert-warning {
  background-color: var(--rto-warning) !important;
  color: #ffffff !important;
  border-color: var(--rto-warning) !important;
}
.alert-info {
  background-color: var(--rto-info) !important;
  color: #ffffff !important;
  border-color: var(--rto-info) !important;
}

/* -------- Footer -------- */
.footer {
  background-color: var(--rto-panel) !important;
  color: var(--rto-text-muted) !important;
  border-top: 1px solid var(--rto-border);
}
.footer a, .footer .link {
  color: var(--rto-blue) !important;
}

/* -------- Devise-Fehlermeldungen (#error_explanation) -------- */
#error_explanation,
.error_explanation {
  background-color: #fef2f2 !important;
  border: 1px solid var(--rto-destructive) !important;
  color: var(--rto-destructive) !important;
  border-radius: var(--rto-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
#error_explanation h2,
.error_explanation h2 {
  color: var(--rto-destructive) !important;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--rto-destructive) !important;
  outline-color: var(--rto-destructive) !important;
}

/* -------- Scrollbar (dezent rto-grau) -------- */
* {
  scrollbar-color: var(--rto-border) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--rto-border);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--rto-text-muted);
}

/* ============================================================
   AUSSCHLÜSSE — explizit nicht überschreiben
   ============================================================ */

/* MapLibre/Leaflet-Canvas nicht anfassen */
.leaflet-container,
.leaflet-container *,
.maplibregl-canvas,
.maplibregl-canvas-container,
.maplibregl-map,
.leaflet-pane,
.leaflet-control,
.leaflet-control * {
  font-family: initial;
}

/* Leaflet-Draw-Toolbar und Layer-Control unbeeinflusst */
.leaflet-control-layers,
.leaflet-draw,
.leaflet-bar {
  background: initial;
  color: initial;
}

/* Datepicker / Calendar nicht brechen — nur Akzent */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ============================================================
   Ende rto-theme.css v2
   ============================================================ */