/* =====================================================================
   Thème sombre de CloudUtopia.

   L'interface est écrite en utilitaires Tailwind (CDN) codés en dur dans
   le balisage. Plutôt que de doubler chaque classe d'une variante
   « dark: », on remappe ici les utilitaires réellement utilisés lorsque
   <html data-theme="dark"> est posé par assets/js/theme.js.

   Le préfixe html[data-theme="dark"] donne une spécificité supérieure à
   celle des classes générées par Tailwind : l'ordre de chargement n'a
   donc aucune importance, y compris pour le CSS injecté à l'exécution.
   ===================================================================== */

:root { color-scheme: light; }

html[data-theme="dark"] {
    color-scheme: dark;
    background-color: #0f172a;
}

/* ---------------------------------------------------------------------
   Bouton de bascule du thème
   --------------------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: .5rem;
    border-radius: .5rem;
    color: #6b7280;
    transition: color .15s, background-color .15s;
}
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle:hover { color: #1d4ed8; background: #eff6ff; }

.theme-toggle-floating {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 70;
}
.theme-toggle-floating .theme-toggle {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* Ligne visée par le menu contextuel (clic droit ou bouton « … »). */
.row-active { background-color: #eff6ff; }

html[data-theme="dark"] .theme-toggle { color: #94a3b8; }
html[data-theme="dark"] .theme-toggle:hover { color: #bfdbfe; background: #24334a; }
html[data-theme="dark"] .theme-toggle-floating .theme-toggle {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* =====================================================================
   À partir d'ici : uniquement le mode sombre.
   ===================================================================== */

/* --- Surfaces ------------------------------------------------------- */
html[data-theme="dark"] body { background-color: #0f172a; }
html[data-theme="dark"] body.bg-gray-50 { background-color: #0f172a; }

html[data-theme="dark"] .bg-white { background-color: #1e293b; }
html[data-theme="dark"] .bg-gray-50 { background-color: #16202f; }
html[data-theme="dark"] .bg-gray-100 { background-color: #24334a; }
html[data-theme="dark"] .bg-gray-200 { background-color: #33455f; }
html[data-theme="dark"] .bg-gray-800 { background-color: #334155; }

html[data-theme="dark"] dialog {
    background-color: #1e293b;
    color: #e5eaf2;
    border-color: #334155;
}
html[data-theme="dark"] dialog::backdrop { background: rgba(2, 6, 23, .72); }

/* --- Texte ---------------------------------------------------------- */
html[data-theme="dark"] .text-gray-800 { color: #e5eaf2; }
html[data-theme="dark"] .text-gray-700 { color: #cbd5e1; }
html[data-theme="dark"] .text-gray-600 { color: #b3c0d1; }
html[data-theme="dark"] .text-gray-500 { color: #94a3b8; }
html[data-theme="dark"] .text-gray-400 { color: #8b9bb0; }
html[data-theme="dark"] .text-gray-300 { color: #6f7f95; }

html[data-theme="dark"] .text-blue-500   { color: #60a5fa; }
html[data-theme="dark"] .text-blue-600   { color: #60a5fa; }
html[data-theme="dark"] .text-blue-700   { color: #93c5fd; }
html[data-theme="dark"] .text-blue-800   { color: #bfdbfe; }
html[data-theme="dark"] .text-green-600  { color: #4ade80; }
html[data-theme="dark"] .text-green-700  { color: #86efac; }
html[data-theme="dark"] .text-green-800  { color: #86efac; }
html[data-theme="dark"] .text-red-600    { color: #f87171; }
html[data-theme="dark"] .text-red-700    { color: #fca5a5; }
html[data-theme="dark"] .text-red-800    { color: #fca5a5; }
html[data-theme="dark"] .text-amber-600  { color: #fbbf24; }
html[data-theme="dark"] .text-amber-700  { color: #fcd34d; }
html[data-theme="dark"] .text-amber-800  { color: #fcd34d; }
html[data-theme="dark"] .text-amber-900  { color: #fde68a; }
html[data-theme="dark"] .text-purple-600 { color: #c084fc; }
html[data-theme="dark"] .text-purple-800 { color: #d8b4fe; }
html[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; }
html[data-theme="dark"] .text-indigo-700 { color: #c7d2fe; }
html[data-theme="dark"] .text-indigo-800 { color: #c7d2fe; }
html[data-theme="dark"] .text-orange-600 { color: #fdba74; }
html[data-theme="dark"] .text-slate-700  { color: #cbd5e1; }
html[data-theme="dark"] .text-rose-800   { color: #fda4af; }

/* --- Pastilles et fonds teintés ------------------------------------- */
html[data-theme="dark"] .bg-blue-50    { background-color: rgba(59, 130, 246, .13); }
html[data-theme="dark"] .bg-blue-100   { background-color: rgba(59, 130, 246, .22); }
html[data-theme="dark"] .bg-green-50   { background-color: rgba(34, 197, 94, .13); }
html[data-theme="dark"] .bg-green-100  { background-color: rgba(34, 197, 94, .22); }
html[data-theme="dark"] .bg-red-50     { background-color: rgba(239, 68, 68, .13); }
html[data-theme="dark"] .bg-red-100    { background-color: rgba(239, 68, 68, .22); }
html[data-theme="dark"] .bg-amber-50   { background-color: rgba(245, 158, 11, .13); }
html[data-theme="dark"] .bg-amber-100  { background-color: rgba(245, 158, 11, .22); }
html[data-theme="dark"] .bg-purple-50  { background-color: rgba(168, 85, 247, .13); }
html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, .22); }
html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, .24); }
html[data-theme="dark"] .bg-slate-100  { background-color: rgba(148, 163, 184, .20); }
html[data-theme="dark"] .bg-rose-100   { background-color: rgba(244, 63, 94, .22); }

/* --- Bordures ------------------------------------------------------- */
html[data-theme="dark"] .border-gray-100 { border-color: #2a3547; }
html[data-theme="dark"] .border-gray-200 { border-color: #334155; }
html[data-theme="dark"] .border-gray-300 { border-color: #3f4f68; }

html[data-theme="dark"] .border-blue-200   { border-color: rgba(59, 130, 246, .35); }
html[data-theme="dark"] .border-blue-300   { border-color: rgba(59, 130, 246, .45); }
html[data-theme="dark"] .border-blue-500   { border-color: #3b82f6; }
html[data-theme="dark"] .border-green-100  { border-color: rgba(34, 197, 94, .28); }
html[data-theme="dark"] .border-green-200  { border-color: rgba(34, 197, 94, .35); }
html[data-theme="dark"] .border-green-300  { border-color: rgba(34, 197, 94, .45); }
html[data-theme="dark"] .border-red-200    { border-color: rgba(239, 68, 68, .35); }
html[data-theme="dark"] .border-amber-200  { border-color: rgba(245, 158, 11, .35); }
html[data-theme="dark"] .border-purple-200 { border-color: rgba(168, 85, 247, .35); }
html[data-theme="dark"] .border-purple-300 { border-color: rgba(168, 85, 247, .45); }

/* Le sélecteur de Tailwind pour divide-* est très spécifique : on le
   reproduit à l'identique pour rester au-dessus. */
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2a3547; }
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }

html[data-theme="dark"] .ring-black\/5 { --tw-ring-color: rgba(255, 255, 255, .10); }

/* --- Survols -------------------------------------------------------- */
html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: #1c2739; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #24334a; }
html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #33455f; }

html[data-theme="dark"] .hover\:bg-blue-50\/50:hover { background-color: rgba(59, 130, 246, .10); }
html[data-theme="dark"] .hover\:bg-blue-50:hover     { background-color: rgba(59, 130, 246, .16); }
html[data-theme="dark"] .hover\:bg-blue-200:hover    { background-color: rgba(59, 130, 246, .30); }
html[data-theme="dark"] .hover\:bg-green-50:hover    { background-color: rgba(34, 197, 94, .16); }
html[data-theme="dark"] .hover\:bg-green-200:hover   { background-color: rgba(34, 197, 94, .30); }
html[data-theme="dark"] .hover\:bg-red-50:hover      { background-color: rgba(239, 68, 68, .16); }
html[data-theme="dark"] .hover\:bg-amber-50:hover    { background-color: rgba(245, 158, 11, .16); }
html[data-theme="dark"] .hover\:bg-purple-50:hover   { background-color: rgba(168, 85, 247, .16); }
html[data-theme="dark"] .hover\:bg-purple-200:hover  { background-color: rgba(168, 85, 247, .30); }
html[data-theme="dark"] .hover\:bg-orange-50:hover   { background-color: rgba(249, 115, 22, .16); }
html[data-theme="dark"] .hover\:bg-indigo-50:hover   { background-color: rgba(99, 102, 241, .16); }

html[data-theme="dark"] .hover\:text-gray-600:hover  { color: #e5eaf2; }
html[data-theme="dark"] .hover\:text-gray-700:hover  { color: #e5eaf2; }
html[data-theme="dark"] .hover\:text-gray-800:hover  { color: #f1f5f9; }
html[data-theme="dark"] .hover\:text-gray-900:hover  { color: #f8fafc; }
html[data-theme="dark"] .hover\:text-blue-600:hover  { color: #93c5fd; }
html[data-theme="dark"] .hover\:text-blue-800:hover  { color: #bfdbfe; }
html[data-theme="dark"] .hover\:text-green-600:hover { color: #86efac; }
html[data-theme="dark"] .hover\:text-red-600:hover   { color: #fca5a5; }
html[data-theme="dark"] .hover\:text-red-800:hover   { color: #fecaca; }
html[data-theme="dark"] .hover\:text-amber-600:hover { color: #fcd34d; }
html[data-theme="dark"] .hover\:text-purple-600:hover{ color: #d8b4fe; }
html[data-theme="dark"] .hover\:text-indigo-600:hover{ color: #c7d2fe; }
html[data-theme="dark"] .hover\:text-orange-600:hover{ color: #fdba74; }
html[data-theme="dark"] .hover\:border-blue-400:hover { border-color: #60a5fa; }

/* --- Champs de saisie ------------------------------------------------
   :where() annule la spécificité de la liste : une classe utilitaire
   posée explicitement sur un champ (bg-gray-100, focus:bg-white…)
   continue donc de l'emporter. -------------------------------------- */
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
    background-color: #16202f;
    color: #e5eaf2;
    border-color: #334155;
}
html[data-theme="dark"] .focus\:bg-white:focus { background-color: #1e293b; }
html[data-theme="dark"] ::placeholder { color: #6f7f95; opacity: 1; }

/* --- Classes maison de index.php ------------------------------------ */
html[data-theme="dark"] .input { background-color: #16202f; color: #e5eaf2; border-color: #334155; }
html[data-theme="dark"] .btn-ghost { color: #cbd5e1; }
html[data-theme="dark"] .btn-ghost:hover { background: #24334a; }
html[data-theme="dark"] .icon-btn { color: #94a3b8; }
html[data-theme="dark"] .menu-item { color: #cbd5e1; }
html[data-theme="dark"] .menu-item:hover { background: #24334a; }
html[data-theme="dark"] .menu-item:disabled { color: #4a5a70; background: none; }
html[data-theme="dark"] .links-tab { color: #94a3b8; }
html[data-theme="dark"] .tab-idle { color: #94a3b8; }
html[data-theme="dark"] .tab-idle:hover { color: #e5eaf2; }
html[data-theme="dark"] .tab { color: #94a3b8; }
html[data-theme="dark"] .tab:hover { color: #e5eaf2; }
html[data-theme="dark"] .tab-active { border-color: #60a5fa; color: #93c5fd; }
html[data-theme="dark"] .drop-active { background: #132033; }
html[data-theme="dark"] .row-active { background-color: rgba(59, 130, 246, .16); }

/* --- Ombres : plus contrastées sur fond sombre ----------------------- */
html[data-theme="dark"] .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .45); }
html[data-theme="dark"] .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .55), 0 4px 6px -4px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .6), 0 8px 10px -6px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .75); }