/* ============================================================
   LivraPlus — thème commun (clair / nuit)
   Le mode nuit est activé par la classe « dark » sur <html>
   (choix mémorisé sur l'appareil, voir base.html).
   On surcharge les utilitaires Tailwind déjà utilisés dans les pages,
   pour que toute l'application bascule sans réécrire chaque page.
   ============================================================ */

:root { --fond: #f4f6fb; --carte: #ffffff; --texte: #0f172a; --bordure: #e5e7eb; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--fond); color: var(--texte); }
* { -webkit-tap-highlight-color: transparent; }

/* ---- Finitions générales ---- */
.shadow-md, .shadow-lg { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06) !important; }
.shadow-xl { box-shadow: 0 10px 30px rgba(15, 23, 42, .12) !important; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { border-radius: .6rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18) !important; }
::placeholder { color: #9ca3af; }
table thead th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Largeur : le contenu occupe tout l'écran (ordinateur, tablette, téléphone) ----
   Toutes les pages de travail prennent la largeur disponible, avec une marge intérieure ;
   seuls les tout petits formulaires (max-w-md / lg : connexion, mot de passe) restent centrés. */
@media (min-width: 768px) {
    .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-\[1100px\] {
        max-width: 100% !important;
    }
    .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-\[1100px\] {
        padding-left: clamp(1rem, 2.5vw, 2.5rem) !important; padding-right: clamp(1rem, 2.5vw, 2.5rem) !important;
    }
}
@media (min-width: 1280px) {
    /* plus de colonnes sur grand écran */
    #listeArticles, #articles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1600px) {
    #listeArticles, #articles { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 2000px) {
    #listeArticles, #articles { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    #listeCommandes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Fiche commande : deux colonnes sur grand écran (infos à gauche, livraison et actions à droite) */
@media (min-width: 1280px) {
    .fiche-2col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
}
@media (min-width: 1280px) {
    /* liste des commandes en 2 colonnes sur grand écran */
    #listeCommandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    #listeCommandes > * + * { margin-top: 0 !important; }
}

/* Champ de recherche des listes */
.recherche { position: relative; }
.recherche i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.recherche input { width: 100%; padding: .65rem 5.5rem .65rem 2.5rem; border: 1.5px solid var(--bordure); background: var(--carte); text-overflow: ellipsis; }
.recherche .compte { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: #9ca3af; }

/* Menu utilisateur */
.menu-utilisateur > summary { list-style: none; cursor: pointer; }
.menu-utilisateur > summary::-webkit-details-marker { display: none; }
.menu-utilisateur[open] > summary { background: rgba(139, 92, 246, .08); }

/* ============================================================
   MODE NUIT
   ============================================================ */
html.dark { color-scheme: dark; --fond: #0b1220; --carte: #121a2b; --texte: #e2e8f0; --bordure: #263248; }
html.dark body { background: var(--fond); color: var(--texte); }

html.dark .bg-white { background-color: var(--carte) !important; }
html.dark .bg-white\/95, html.dark .bg-white\/90, html.dark .bg-white\/80 { background-color: rgba(18, 26, 43, .95) !important; }
html.dark .bg-gray-50 { background-color: #0f1726 !important; }
html.dark .bg-gray-100 { background-color: #1a2436 !important; }
html.dark .bg-gray-200 { background-color: #243046 !important; }
html.dark .bg-gray-300 { background-color: #2d3a52 !important; }
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover { background-color: #1a2436 !important; }
html.dark .hover\:bg-gray-200:hover, html.dark .hover\:bg-gray-300:hover { background-color: #2d3a52 !important; }

html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-dark { color: #e2e8f0 !important; }
html.dark .text-gray-600, html.dark .text-gray-500 { color: #9fb0c8 !important; }
html.dark .text-gray-400, html.dark .text-gray-300 { color: #6b7d97 !important; }

html.dark .border, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.dark .border-t, html.dark .border-b, html.dark .divide-y > * + * { border-color: var(--bordure) !important; }

html.dark input:not([type=checkbox]):not([type=radio]), html.dark select, html.dark textarea {
    background-color: #0f1726 !important; color: #e2e8f0 !important; border-color: #2d3a52 !important;
}
html.dark option { background: #0f1726; color: #e2e8f0; }

/* Fonds pastel → teintes sombres lisibles */
html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, .14) !important; }
html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(139, 92, 246, .16) !important; }
html.dark .bg-green-50, html.dark .bg-green-100, html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .14) !important; }
html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .14) !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, .14) !important; }
html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, .14) !important; }
html.dark .bg-teal-50 { background-color: rgba(45, 212, 191, .12) !important; }
html.dark .hover\:bg-purple-100:hover, html.dark .hover\:bg-blue-100:hover, html.dark .hover\:bg-green-100:hover,
html.dark .hover\:bg-teal-100:hover, html.dark .hover\:bg-amber-100:hover { filter: brightness(1.25); }
html.dark [class*="border-purple-2"], html.dark [class*="border-purple-3"], html.dark [class*="border-green-2"],
html.dark [class*="border-yellow-2"], html.dark [class*="border-orange-2"], html.dark [class*="border-blue-2"],
html.dark [class*="border-teal-3"], html.dark [class*="border-red-2"] { border-color: rgba(148, 163, 184, .25) !important; }

html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-600 { color: #93c5fd !important; }
html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-600 { color: #c4b5fd !important; }
html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-600 { color: #6ee7b7 !important; }
html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-orange-800, html.dark .text-orange-500 { color: #fdba74 !important; }
html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-600 { color: #fca5a5 !important; }
html.dark .text-teal-900, html.dark .text-teal-700 { color: #5eead4 !important; }
html.dark .text-primary { color: #93b4ff !important; }

html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow { box-shadow: 0 0 0 1px var(--bordure) !important; }
html.dark footer { background: #070c16 !important; }
html.dark img.bg-white { background-color: #fff !important; } /* logos : gardent leur fond clair */