/* ============================================================
   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;
}

/* ============================================================
   Exception : panneaux forcés en CLAIR malgré le thème sombre (.cpa-light)
   ------------------------------------------------------------
   Utilisé par les quatre modals de l'Espace Client (« Catalogue visible »,
   « Nouveautés », « Créer un accès », « Modifier l'accès ») : les listes de
   résultats denses — vignette, code, statut, deux boutons par ligne — se
   lisaient mal en nuit. Demande utilisateur du 09/08/2026.

   Ces règles doivent BATTRE les surcharges ci-dessus, qui sont déjà en
   !important : à importance égale, c'est la spécificité qui tranche, d'où le
   `.cpa-light` intercalé qui ajoute une classe à chaque sélecteur. Le bloc
   `input` reproduit la même chaîne de :not() que l'original (spécificité 0,5,2)
   pour passer devant avec 0,6,2 — sans elle, la règle serait perdante.
   Ces règles neutralisent aussi les variantes Tailwind `dark:` du markup,
   qui ne sont pas en !important.
   ============================================================ */
@media not print {
    /* Couleur de texte de base : plusieurs éléments (bouton « Générer », <b>,
       <span> imbriqués) ne portent AUCUNE classe de couleur et héritaient donc
       du `html.dark body { color: #e5e7eb }` — texte clair sur fond clair,
       illisible. Les classes .text-* ci-dessous restent prioritaires. */
    html.dark .cpa-light {
        color-scheme: light;
        color: #374151;
    }

    /* Fonds */
    html.dark .cpa-light.bg-white,
    html.dark .cpa-light .bg-white { background-color: #ffffff !important; }
    html.dark .cpa-light .bg-gray-100 { background-color: #f3f4f6 !important; }
    html.dark .cpa-light .bg-gray-200 { background-color: #e5e7eb !important; }
    html.dark .cpa-light .bg-blue-50 { background-color: #eff6ff !important; }
    html.dark .cpa-light .bg-blue-100 { background-color: #dbeafe !important; }
    html.dark .cpa-light .bg-emerald-100 { background-color: #d1fae5 !important; }
    html.dark .cpa-light .bg-red-100 { background-color: #fee2e2 !important; }
    html.dark .cpa-light .bg-teal-100 { background-color: #ccfbf1 !important; }
    html.dark .cpa-light .bg-amber-100 { background-color: #fef3c7 !important; }
    html.dark .cpa-light .hover\:bg-gray-50:hover { background-color: #f9fafb !important; }

    /* Textes */
    html.dark .cpa-light .text-gray-800 { color: #1f2937 !important; }
    html.dark .cpa-light .text-gray-700 { color: #374151 !important; }
    html.dark .cpa-light .text-gray-600 { color: #4b5563 !important; }
    html.dark .cpa-light .text-gray-500 { color: #6b7280 !important; }
    html.dark .cpa-light .text-gray-400 { color: #9ca3af !important; }

    /* Bordures : `border-b`/`border` portent aussi des variantes dark: */
    html.dark .cpa-light .border-gray-300 { border-color: #d1d5db !important; }
    html.dark .cpa-light .border,
    html.dark .cpa-light .border-b,
    html.dark .cpa-light .border-t { border-color: #e5e7eb !important; }

    /* Champs de saisie — même chaîne de :not() que la règle sombre d'origine */
    html.dark .cpa-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    html.dark .cpa-light textarea,
    html.dark .cpa-light select {
        background-color: #ffffff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
    }
    html.dark .cpa-light input::placeholder,
    html.dark .cpa-light textarea::placeholder { color: #9ca3af !important; }

    /* Ascenseur de la liste de résultats */
    html.dark .cpa-light ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
    html.dark .cpa-light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
    html.dark .cpa-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
}

/* Barre d'onglets documents (TabManager) : dark-theme.css ne surcharge aucun
   text-indigo-* — sans ces règles ciblées, le libellé de l'onglet actif
   (text-indigo-700 sur bg-slate-50 assombri) tombe à ~2,3:1 de contraste. */
html.dark #tab-bar-host .text-indigo-700 {
    color: #a5b4fc !important;
}
html.dark #tab-bar-host .text-indigo-500 {
    color: #818cf8 !important;
}