/* DMS-Pilot — Ergänzende Styles (unabhängig vom Tailwind-Build) */

/* Einheitliche Flash-Meldungen — Farben an Tailwind v3 Standardpalette angelehnt */
.flash-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dark .flash-success {
  background-color: rgba(20, 83, 45, 0.3);
  border-color: #166534;
  color: #86efac;
}

.flash-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dark .flash-error {
  background-color: rgba(127, 29, 29, 0.3);
  border-color: #991b1b;
  color: #fca5a5;
}

.flash-warning {
  background-color: #fefce8;
  border: 1px solid #fef08a;
  color: #854d0e;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dark .flash-warning {
  background-color: rgba(113, 63, 18, 0.3);
  border-color: #854d0e;
  color: #fde047;
}

.flash-info {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.dark .flash-info {
  background-color: rgba(30, 58, 138, 0.3);
  border-color: #1e40af;
  color: #93c5fd;
}

/* Zeilen-Banner mit Icon */
.flash-row-success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #bbf7d0;
  background-color: #f0fdf4;
}
.dark .flash-row-success {
  border-color: #166534;
  background-color: rgba(20, 83, 45, 0.3);
}

.flash-row-purple {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e9d5ff;
  background-color: #faf5ff;
}
.dark .flash-row-purple {
  border-color: #6b21a8;
  background-color: rgba(88, 28, 135, 0.3);
}

.flash-row-yellow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #fef08a;
  background-color: #fefce8;
}
.dark .flash-row-yellow {
  border-color: #854d0e;
  background-color: rgba(113, 63, 18, 0.3);
}

.flash-row-blue {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #bfdbfe;
  background-color: #eff6ff;
}
.dark .flash-row-blue {
  border-color: #1e40af;
  background-color: rgba(30, 58, 138, 0.3);
}

.flash-row-orange {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #fdba74;
  background-color: #fff7ed;
}
.dark .flash-row-orange {
  border-color: #9a3412;
  background-color: rgba(124, 45, 18, 0.3);
}

.flash-ic-green { font-size: 1.125rem; line-height: 1.75rem; color: #16a34a; }
.dark .flash-ic-green { color: #4ade80; }
.flash-txt-green { font-size: 0.875rem; font-weight: 500; color: #15803d; }
.dark .flash-txt-green { color: #86efac; }

.flash-ic-purple { font-size: 1.125rem; line-height: 1.75rem; color: #9333ea; }
.dark .flash-ic-purple { color: #c084fc; }
.flash-txt-purple { font-size: 0.875rem; font-weight: 500; color: #7e22ce; }
.dark .flash-txt-purple { color: #e9d5ff; }

.flash-ic-yellow { font-size: 1.125rem; line-height: 1.75rem; color: #ca8a04; }
.dark .flash-ic-yellow { color: #facc15; }
.flash-txt-yellow { font-size: 0.875rem; font-weight: 500; color: #854d0e; }
.dark .flash-txt-yellow { color: #fde047; }

.flash-ic-blue { font-size: 1.125rem; line-height: 1.75rem; color: #2563eb; }
.dark .flash-ic-blue { color: #60a5fa; }
.flash-txt-blue { font-size: 0.875rem; font-weight: 500; color: #1d4ed8; }
.dark .flash-txt-blue { color: #93c5fd; }

.flash-ic-orange { font-size: 1.125rem; line-height: 1.75rem; color: #f97316; }
.dark .flash-ic-orange { color: #fb923c; }
.flash-txt-orange { font-size: 0.875rem; font-weight: 500; color: #c2410c; }
.dark .flash-txt-orange { color: #fdba74; }

/* Admin » Tab Fahrzeuge: Kennzeichen-Spalte — im Dark Mode hoher Kontrast (entspricht gray-100) */
.dark #tab-vehicles table tbody tr > td:first-child {
  color: #f3f4f6;
}

/* Admin » Telegram: Unterpanels reagieren auf html.dark (unabhängig vom Tailwind-dark-Build) */
.admin-telegram-panel {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}
html.dark .admin-telegram-panel {
  background-color: #111827;
  border-color: #4b5563;
}
html.dark .admin-telegram-panel label {
  color: #d1d5db;
}
html.dark .admin-telegram-panel p,
html.dark .admin-telegram-panel > form > div > p,
html.dark .admin-telegram-panel ol,
html.dark .admin-telegram-panel li {
  color: #9ca3af;
}
html.dark .admin-telegram-panel summary {
  color: #d1d5db;
}
html.dark .admin-telegram-panel summary:hover {
  color: #60a5fa;
}
html.dark .admin-telegram-panel span {
  color: #9ca3af;
}
html.dark .admin-telegram-panel code {
  color: #e5e7eb;
  background-color: rgba(0, 0, 0, 0.28);
  padding: 0.1em 0.3em;
  border-radius: 0.25rem;
}
html.dark .admin-telegram-panel input[type="password"],
html.dark .admin-telegram-panel select {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}
html.dark .admin-telegram-panel input::placeholder {
  color: #9ca3af;
}
html.dark .admin-telegram-panel select option {
  background-color: #374151;
  color: #f3f4f6;
}

.admin-telegram-reload-block {
  border-top-color: #e5e7eb;
}
html.dark .admin-telegram-reload-block {
  border-top-color: #4b5563;
}
html.dark .admin-telegram-reload-block > h3 {
  color: #f3f4f6;
}
html.dark .admin-telegram-reload-block > p {
  color: #9ca3af;
}

html.dark .admin-telegram-heading {
  color: #f3f4f6;
}
html.dark .admin-telegram-lead {
  color: #9ca3af;
}

/* Admin » WebDAV: Kontrast im Dark Mode auch ohne vollständigen Tailwind-dark-Build */
html.dark .admin-webdav-card h2 {
  color: #f3f4f6;
}
html.dark .admin-webdav-card h3 {
  color: #e5e7eb;
}
html.dark .admin-webdav-card label {
  color: #d1d5db;
}
html.dark .admin-webdav-card p,
html.dark .admin-webdav-card details .grid span {
  color: #9ca3af;
}
html.dark .admin-webdav-card hr {
  border-color: #4b5563;
}
html.dark .admin-webdav-card .border-t {
  border-color: #4b5563;
}
html.dark .admin-webdav-card details {
  background-color: rgba(17, 24, 39, 0.5);
  border-color: #4b5563;
}
html.dark .admin-webdav-card details summary {
  color: #e5e7eb;
}
html.dark .admin-webdav-card details code {
  color: #e5e7eb;
  background-color: #374151;
}
html.dark .admin-webdav-card #webdav-test-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}
html.dark .admin-webdav-card #webdav-test-btn:hover {
  background-color: #4b5563;
}
html.dark .admin-webdav-card strong {
  color: #f3f4f6;
}

/* Mobile Bottom Navigation — Teal-Aktivzustand, Pill-Indikator, höherer Kontrast (ohne Tailwind-Rebuild nutzbar) */
.ui-bottom-nav {
  border-top: 1px solid #d1d5db;
  background-color: #fff;
  box-shadow: 0 -4px 14px -2px rgba(0, 0, 0, 0.08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dark .ui-bottom-nav {
  border-color: #4b5563;
  background-color: #1f2937;
  box-shadow: 0 -4px 14px -2px rgba(0, 0, 0, 0.35);
}

.ui-bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  height: 100%;
  min-height: 3.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  color: #4b5563;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}
.dark .ui-bottom-nav-item {
  color: #d1d5db;
}
.ui-bottom-nav-item:hover {
  color: #111827;
}
.dark .ui-bottom-nav-item:hover {
  color: #f3f4f6;
}
.ui-bottom-nav-item:active {
  background-color: rgba(243, 244, 246, 0.8);
}
.dark .ui-bottom-nav-item:active {
  background-color: rgba(55, 65, 81, 0.6);
}
.ui-bottom-nav-item:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ui-bottom-nav-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary, #0d9488);
}

.ui-bottom-nav-item--active {
  color: var(--color-primary, #0d9488);
  font-weight: 600;
  background-color: var(--color-primary-soft, #ccfbf1);
}
.dark .ui-bottom-nav-item--active {
  background-color: var(--color-primary-soft-dark, rgba(15, 118, 110, 0.35));
}
.ui-bottom-nav-item--active::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.75rem;
  height: 0.125rem;
  border-radius: 9999px;
  background-color: var(--color-primary, #0d9488);
  transition: transform 0.2s ease-out;
}

.ui-bottom-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}
.ui-bottom-nav-item--active .ui-bottom-nav-icon {
  transform: scale(1.1);
}

.ui-bottom-nav-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}