/* ============================================================
   Dark Mode Skin
   Activated by `html.dark` (set by ThemeService).
   Overrides the most common Tailwind utility classes used across
   the app so existing markup picks up dark colors without
   modification. Print is excluded — relevés/factures stay light.
   ============================================================ */

@media not print {
    html.dark {
        color-scheme: dark;
    }

    /* Body / app shell */
    html.dark body {
        background-color: #0f172a !important;
        color: #e5e7eb;
    }

    /* ----- Backgrounds ----- */
    html.dark .bg-white { background-color: #1e293b !important; }
    html.dark .bg-gray-50 { background-color: #0f172a !important; }
    html.dark .bg-gray-100 { background-color: #1e293b !important; }
    html.dark .bg-gray-200 { background-color: #334155 !important; }
    html.dark .bg-slate-50 { background-color: #0f172a !important; }
    html.dark .bg-slate-100 { background-color: #1e293b !important; }
    html.dark .bg-slate-200 { background-color: #334155 !important; }
    html.dark .bg-zinc-50  { background-color: #0f172a !important; }
    html.dark .bg-zinc-100 { background-color: #1e293b !important; }
    html.dark .bg-neutral-50  { background-color: #0f172a !important; }
    html.dark .bg-neutral-100 { background-color: #1e293b !important; }

    /* Subtle tinted backgrounds (50/100 of accent colors) → dim them */
    html.dark .bg-blue-50    { background-color: rgba(59,130,246,0.12) !important; }
    html.dark .bg-blue-100   { background-color: rgba(59,130,246,0.20) !important; }
    html.dark .bg-indigo-50  { background-color: rgba(99,102,241,0.12) !important; }
    html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.20) !important; }
    html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
    html.dark .bg-emerald-100{ background-color: rgba(16,185,129,0.20) !important; }
    html.dark .bg-green-50   { background-color: rgba(34,197,94,0.12) !important; }
    html.dark .bg-green-100  { background-color: rgba(34,197,94,0.20) !important; }
    html.dark .bg-red-50     { background-color: rgba(239,68,68,0.12) !important; }
    html.dark .bg-red-100    { background-color: rgba(239,68,68,0.20) !important; }
    html.dark .bg-amber-50   { background-color: rgba(245,158,11,0.12) !important; }
    html.dark .bg-amber-100  { background-color: rgba(245,158,11,0.20) !important; }
    html.dark .bg-yellow-50  { background-color: rgba(234,179,8,0.12) !important; }
    html.dark .bg-yellow-100 { background-color: rgba(234,179,8,0.20) !important; }
    html.dark .bg-orange-50  { background-color: rgba(249,115,22,0.12) !important; }
    html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.20) !important; }
    html.dark .bg-purple-50  { background-color: rgba(168,85,247,0.12) !important; }
    html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.20) !important; }
    html.dark .bg-pink-50    { background-color: rgba(236,72,153,0.12) !important; }
    html.dark .bg-pink-100   { background-color: rgba(236,72,153,0.20) !important; }
    html.dark .bg-cyan-50    { background-color: rgba(6,182,212,0.12) !important; }
    html.dark .bg-cyan-100   { background-color: rgba(6,182,212,0.20) !important; }
    html.dark .bg-teal-50    { background-color: rgba(20,184,166,0.12) !important; }
    html.dark .bg-teal-100   { background-color: rgba(20,184,166,0.20) !important; }

    /* Hover backgrounds */
    html.dark .hover\:bg-gray-50:hover  { background-color: #1e293b !important; }
    html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
    html.dark .hover\:bg-gray-200:hover { background-color: #475569 !important; }
    html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; }
    html.dark .hover\:bg-slate-100:hover{ background-color: #334155 !important; }

    /* Table striping / odd rows */
    html.dark .odd\:bg-gray-50:nth-child(odd) { background-color: #182234 !important; }

    /* ----- Text colors ----- */
    html.dark .text-black,
    html.dark .text-gray-900,
    html.dark .text-slate-900,
    html.dark .text-zinc-900,
    html.dark .text-neutral-900 { color: #f1f5f9 !important; }

    html.dark .text-gray-800,
    html.dark .text-slate-800 { color: #e2e8f0 !important; }

    html.dark .text-gray-700,
    html.dark .text-slate-700 { color: #cbd5e1 !important; }

    html.dark .text-gray-600,
    html.dark .text-slate-600 { color: #94a3b8 !important; }

    html.dark .text-gray-500,
    html.dark .text-slate-500 { color: #64748b !important; }

    html.dark .text-gray-400 { color: #94a3b8 !important; }

    /* ----- Borders ----- */
    html.dark .border-gray-100,
    html.dark .border-slate-100 { border-color: #1e293b !important; }
    html.dark .border-gray-200,
    html.dark .border-slate-200 { border-color: #334155 !important; }
    html.dark .border-gray-300,
    html.dark .border-slate-300 { border-color: #475569 !important; }
    html.dark .border-white { border-color: #1e293b !important; }
    html.dark .divide-gray-100 > * + * { border-color: #1e293b !important; }
    html.dark .divide-gray-200 > * + * { border-color: #334155 !important; }

    /* ----- Form inputs / textareas / selects ----- */
    html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    html.dark textarea,
    html.dark select {
        background-color: #1e293b !important;
        color: #e2e8f0 !important;
        border-color: #334155 !important;
    }
    html.dark input::placeholder,
    html.dark textarea::placeholder { color: #64748b !important; }

    html.dark input:focus,
    html.dark textarea:focus,
    html.dark select:focus {
        border-color: #3b82f6 !important;
    }

    /* Disabled inputs */
    html.dark input:disabled,
    html.dark textarea:disabled,
    html.dark select:disabled {
        background-color: #0f172a !important;
        color: #64748b !important;
    }

    /* ----- Shadows: soften so they read on dark background ----- */
    html.dark .shadow,
    html.dark .shadow-sm,
    html.dark .shadow-md { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px 0 rgba(0,0,0,0.4) !important; }
    html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -2px rgba(0,0,0,0.4) !important; }
    html.dark .shadow-xl,
    html.dark .shadow-2xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.7), 0 10px 10px -5px rgba(0,0,0,0.4) !important; }

    /* Scrollbar */
    html.dark ::-webkit-scrollbar-track { background: #0f172a !important; }
    html.dark ::-webkit-scrollbar-thumb { background: #334155 !important; }
    html.dark ::-webkit-scrollbar-thumb:hover { background: #475569 !important; }

    /* Glass panels in style.css use rgba(255,255,255,...). Re-tint them. */
    html.dark .glass-panel {
        background: rgba(30, 41, 59, 0.85) !important;
        border-color: rgba(51, 65, 85, 0.5) !important;
    }
    html.dark .glass-morphism {
        background: rgba(30, 41, 59, 0.7) !important;
        border-color: rgba(51, 65, 85, 0.6) !important;
    }
}

/* Theme toggle button */
.theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    transition: all 200ms ease;
    cursor: pointer;
}
.theme-toggle:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}
html.dark .theme-toggle {
    background-color: #334155;
    color: #fde68a;
    border-color: #475569;
}
html.dark .theme-toggle:hover {
    background-color: #475569;
    color: #fef3c7;
}