/* OceanSphere Bridge — Dark Mode overrides
   Strategie: html.dark setzt alle genutzten Tailwind-Farb-Utilities auf dunkle Werte.
   Kein dark:-Klassen-Flickenteppich nötig — diese Datei greift auf ALLEN Seiten
   weil base.html sie nach Tailwind lädt. Bilder/Avatare/SVG werden NICHT invertiert.
   Primary-/Accent-Farben (teal) bleiben weitgehend erhalten — sehen auf Dunkel gut aus.
   Alle Regeln mit !important um Tailwind-Utilities zu überschreiben.
*/

/* ============================================================
   CSS-VARIABLEN im Dark Mode
   ============================================================ */
html.dark {
    color-scheme: dark;
    --sl-primary-50:  #0d3330;
    --sl-primary-100: #134e4a;
}

/* ============================================================
   BODY / HINTERGRUNDFARBEN
   ============================================================ */
html.dark body                    { background-color: #111827 !important; color: #f3f4f6 !important; }
html.dark .bg-gray-50             { background-color: #111827 !important; }
html.dark .bg-gray-100            { background-color: #1f2937 !important; }
html.dark .bg-gray-200            { background-color: #374151 !important; }
html.dark .bg-gray-300            { background-color: #4b5563 !important; }
/* bg-gray-700/800/900 bewusst NICHT überschreiben: das sind bereits dunkle Flächen
   (Admin-Bereich, Landing-Mockup, dunkle Badges/Dropdowns/Footer) mit hellem Text.
   Eine Invertierung zu Hell machte den hellen Text unsichtbar ("Klartext fehlt").
   Native Tailwind-Werte (gray-700 #374151 / 800 #1f2937 / 900 #111827) bleiben dunkel. */
html.dark .bg-white               { background-color: #1f2937 !important; }

/* ============================================================
   TEXTFARBEN
   ============================================================ */
html.dark .text-gray-900          { color: #f9fafb !important; }
html.dark .text-gray-800          { color: #f3f4f6 !important; }
html.dark .text-gray-700          { color: #e5e7eb !important; }
html.dark .text-gray-600          { color: #d1d5db !important; }
html.dark .text-gray-500          { color: #9ca3af !important; }
html.dark .text-gray-400          { color: #6b7280 !important; }
html.dark .text-gray-300          { color: #4b5563 !important; }

/* ============================================================
   RAHMEN / TRENNLINIEN
   ============================================================ */
html.dark .border-gray-100        { border-color: #1f2937 !important; }
html.dark .border-gray-200        { border-color: #374151 !important; }
html.dark .border-gray-300        { border-color: #4b5563 !important; }
html.dark .border-gray-400        { border-color: #6b7280 !important; }

/* divide-* gilt für Pseudo-Elemente der Kinder */
html.dark .divide-gray-100 > * + * { border-color: #1f2937 !important; }
html.dark .divide-gray-200 > * + * { border-color: #374151 !important; }
html.dark .divide-gray-300 > * + * { border-color: #4b5563 !important; }

/* ============================================================
   EINGABEFELDER (input/select/textarea)
   ============================================================ */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder    { color: #6b7280 !important; }
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus             { border-color: #14b8a6 !important; }

/* Tailwind-Klasse bg-white auf Inputs (Suchfeld Sidebar, Neue-Liste-Formular etc.) */
html.dark input.bg-white,
html.dark textarea.bg-white,
html.dark select.bg-white         { background-color: #374151 !important; }

/* ============================================================
   PLACEHOLDER-KLASSEN
   ============================================================ */
html.dark .placeholder-gray-400::placeholder { color: #6b7280 !important; }

/* ============================================================
   HOVER-ZUSTÄNDE (Tailwind-Hover-Utilities)
   ============================================================ */
html.dark .hover\:bg-white:hover         { background-color: #374151 !important; }
html.dark .hover\:bg-gray-50:hover       { background-color: #1f2937 !important; }
html.dark .hover\:bg-gray-100:hover      { background-color: #374151 !important; }
html.dark .hover\:bg-gray-200:hover      { background-color: #4b5563 !important; }
html.dark .hover\:text-gray-600:hover    { color: #d1d5db !important; }
html.dark .hover\:text-gray-700:hover    { color: #e5e7eb !important; }
html.dark .hover\:text-gray-900:hover    { color: #f9fafb !important; }

/* ============================================================
   FOCUS RING / RING-KLASSEN
   ============================================================ */
html.dark .ring-gray-200          { --tw-ring-color: #374151; }
html.dark .ring-gray-300          { --tw-ring-color: #4b5563; }

/* ============================================================
   SCHATTEN DEZENTER MACHEN
   ============================================================ */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg              {
    --tw-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4) !important;
    box-shadow: var(--tw-shadow) !important;
}

/* ============================================================
   KARTEN / PANELS / MODALS
   ============================================================ */

/* Slide-in Detail-Panel (custom CSS, nicht Tailwind-Utility) */
html.dark .sl-detail-host {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Befehlspalette */
html.dark .sl-cmdk-panel          { background: #1f2937 !important; }
html.dark .sl-cmdk-input-row      { border-color: #374151 !important; }
html.dark .sl-cmdk-input          { color: #f3f4f6 !important; }
html.dark .sl-cmdk-kbd,
html.dark .sl-cmdk-footer kbd     { background: #374151 !important; color: #9ca3af !important; border-color: #4b5563 !important; }
html.dark .sl-cmdk-row            { color: #e5e7eb !important; }
html.dark .sl-cmdk-footer         { background: #111827 !important; border-color: #374151 !important; }
html.dark .sl-cmdk-empty          { color: #6b7280 !important; }

/* Slash-Menü / Popover */
html.dark .sl-slash-menu,
html.dark .sl-popover {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .sl-slash-menu .sl-slash-item { color: #e5e7eb !important; }
html.dark .sl-slash-menu .sl-slash-item:hover,
html.dark .sl-slash-menu .sl-slash-item.is-active {
    background: #0d3330 !important;
    color: #14b8a6 !important;
}

/* ============================================================
   CHAT
   ============================================================ */
html.dark .sl-bubble-other {
    background: #374151 !important;
    color: #f3f4f6 !important;
}
/* Mine (teal) braucht keine Anpassung */
html.dark .sl-reaction {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}
html.dark .sl-reaction:hover      { background: #4b5563 !important; }
html.dark .sl-date-divider        { color: #6b7280 !important; }
html.dark .sl-date-divider::before,
html.dark .sl-date-divider::after { background: #374151 !important; }
html.dark .sl-quick-react         { background: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; }

/* ============================================================
   SIDEBAR SPEZIFISCH
   ============================================================ */
html.dark aside.w-64              { background: #111827 !important; border-color: #374151 !important; }

/* Mobile-Topbar */
html.dark .bg-white.border-b      { background-color: #1f2937!important; }

/* Neue-Liste Formular */
html.dark form.bg-white.border    {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* Badges (Eingang/Heute) */
html.dark .bg-gray-300.text-gray-700 {
    background-color: #374151 !important;
    color: #d1d5db !important;
}

/* Aktive Nav-Zeile (bg-gray-200 text-gray-900) */
html.dark .bg-gray-200.text-gray-900 {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* ============================================================
   CHECKBOX / INTERAKTIVE ELEMENTE
   ============================================================ */
html.dark .sl-checkbox {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* ============================================================
   ITEM-ZEILEN
   ============================================================ */
html.dark .sl-item-row:hover      { background: #1f2937 !important; }
html.dark .sl-add-row:hover       { background: #1f2937 !important; }
html.dark .sl-add-input           { color: #f3f4f6 !important; }
html.dark .sl-add-input::placeholder { color: #6b7280 !important; }
html.dark .sl-meta-chip:hover     { background: #374151 !important; }
html.dark .sl-update-item:hover   { background: #1f2937 !important; }
html.dark .sl-collapse-toggle:hover { background: #374151 !important; color: #e5e7eb !important; }

/* Zeile: aktiv + Tastatur-Fokus */
html.dark .sl-item-row.sl-row-focus {
    background: #1f2937 !important;
}

/* ============================================================
   MARKDOWN-BODY
   ============================================================ */
html.dark .sl-body-md             { color: #d1d5db !important; }
html.dark .sl-body-md code        { background: #374151 !important; }
html.dark .sl-body-md blockquote  { color: #9ca3af !important; }

/* ============================================================
   PRIORITY-CHIPS (neutral)
   ============================================================ */
html.dark .sl-prio-chip.sl-prio-low  { background: #374151 !important; color: #9ca3af !important; border-color: #4b5563 !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
html.dark .sl-scroll::-webkit-scrollbar-thumb,
html.dark .sl-pane-sidebar::-webkit-scrollbar-thumb,
html.dark .sl-pane-main-scroll::-webkit-scrollbar-thumb,
html.dark .sl-pane-detail-scroll::-webkit-scrollbar-thumb,
html.dark .sl-slash-menu::-webkit-scrollbar-thumb,
html.dark .sl-chat-thread::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

/* ============================================================
   FOCUS-VISIBLE RING (global)
   ============================================================ */
html.dark .sl-focusable:focus-visible { outline-color: #14b8a6; }

/* ============================================================
   DARK-MODE-UMSCHALTER (der Button selbst)
   ============================================================ */
#dark-toggle {
    cursor: pointer;
    color: #9ca3af;
    transition: color .15s ease;
}
#dark-toggle:hover { color: #14b8a6; }