/* Minimaler Custom-CSS-Layer.
   Tailwind übernimmt 95 %, hier nur Dinge, die Tailwind nicht abdeckt. */

/* Inter-Font (optional, Fallback auf system-ui) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Tabellen-Hover dezenter machen, wenn Touch-Device */
@media (hover: none) {
    tr:hover { background-color: transparent !important; }
}

/* Focus-Ring konsistent in Slate-Farben */
*:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}

/* ─── Dark Mode ────────────────────────────────────────────────────────────
   Retrofit ueber Tailwind-Klassen-Overrides statt dark:-Varianten in jeder
   View -- deckt die durchgaengig verwendete Slate-Palette ab (Flaeche/Text/
   Rahmen), NICHT die farbigen Status-Badges (bg-red-100 etc., bleiben bewusst
   unveraendert) und NICHT bg-slate-900/text-white (das sind Buttons, keine
   Flaechen -- sollen in beiden Modi kraeftig dunkel bleiben). */
html.dark { color-scheme: dark; }

html.dark body,
html.dark .bg-slate-50 { background-color: #0f172a; }

html.dark .bg-white { background-color: #1e293b; }

html.dark .text-slate-900 { color: #f1f5f9; }
html.dark .text-slate-800 { color: #e2e8f0; }
html.dark .text-slate-700 { color: #cbd5e1; }
html.dark .text-slate-600 { color: #94a3b8; }
html.dark .text-slate-500 { color: #94a3b8; }
html.dark .text-slate-400 { color: #64748b; }

html.dark .border-slate-100 { border-color: #1e293b; }
html.dark .border-slate-200 { border-color: #334155; }
html.dark .border-slate-300 { border-color: #475569; }

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover { background-color: #273449; }

html.dark input,
html.dark select,
html.dark textarea { background-color: #1e293b; color: #f1f5f9; }

html.dark *:focus-visible { outline-color: #94a3b8; }

/* ─── Mandanten-Farbe als Akzent ───────────────────────────────────────────
   Wenn ein bestimmter Mandant aktiv gewaehlt ist (nicht "Alle Firmen"), setzt
   layouts/main.ejs --tenant-accent auf companies.color_hex. Faerbt den aktiven
   Sidebar-Eintrag und das Logo-Badge ein -- bewusst NICHT die Primaer-Buttons
   im Hauptbereich, die bleiben ueberall neutral schwarz. */
aside .bg-slate-900,
.tenant-accent-bg {
    background-color: var(--tenant-accent, #0f172a);
}