/* ============================================================
 * STOUX — THEME COULEURS
 * ============================================================
 * Pour changer les couleurs du site, modifier UNIQUEMENT les
 * 6 variables HSL ci-dessous (primary + secondary).
 * Toutes les variantes dark/light/hover sont auto-calculées
 * par décalage relatif autour de la teinte de BASE.
 *
 * FORMAT HSL :
 *   H = Teinte    (0–360)  ex: 243 = indigo, 25 = orange, 152 = vert
 *   S = Saturation (0–100%)
 *   L = Luminosité de la teinte BASE (niveau 600)
 *
 * CONSEIL : garder L entre 30% et 65% pour un contraste correct.
 * ============================================================ */

:root {

  /* ---- COULEUR PRIMAIRE : Bleu #2a4797 -------------------------
   * 🎨 CHANGER CES 3 VALEURS pour modifier toute la palette primaire
   * ------------------------------------------------------------ */
  --primary-h: 224;
  --primary-s: 56%;
  --primary-l: 38%;

  /* Palette primaire — décalages relatifs autour de la base (ne pas modifier) */
  --color-primary-50:  hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 36%));
  --color-primary-100: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 28%));
  --color-primary-200: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%));
  --color-primary-300: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 13%));
  --color-primary-400: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 7%));
  --color-primary-500: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 3%));
  --color-primary-600: hsl(var(--primary-h), var(--primary-s), var(--primary-l));  /* BASE */
  --color-primary-700: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
  --color-primary-800: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 14%));
  --color-primary-900: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 19%));

  /* Alias sémantiques primaire */
  --color-primary-light: var(--color-primary-400);
  --color-primary:       var(--color-primary-600);
  --color-primary-dark:  var(--color-primary-800);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-text:  #ffffff;


  /* ---- COULEUR SECONDAIRE : Orange --------------------------------
   * 🎨 CHANGER CES 3 VALEURS pour modifier toute la palette secondaire
   * ------------------------------------------------------------ */
  --secondary-h: 25;
  --secondary-s: 94%;
  --secondary-l: 53%;

  /* Palette secondaire — décalages relatifs (ne pas modifier) */
  --color-secondary-50:  hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 36%));
  --color-secondary-100: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 28%));
  --color-secondary-200: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%));
  --color-secondary-300: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 13%));
  --color-secondary-400: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 7%));
  --color-secondary-500: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 3%));
  --color-secondary-600: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));  /* BASE */
  --color-secondary-700: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 8%));
  --color-secondary-800: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 14%));
  --color-secondary-900: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 19%));

  /* Alias sémantiques secondaire */
  --color-secondary-light: var(--color-secondary-400);
  --color-secondary:       var(--color-secondary-600);
  --color-secondary-dark:  var(--color-secondary-800);
  --color-secondary-hover: var(--color-secondary-700);
  --color-secondary-text:  #ffffff;


  /* ---- COULEURS NEUTRES (fond, surfaces, textes) -------------- */
  --color-bg:         #f4f7f9;
  --color-surface:    #ffffff;
  --color-border:     #e5e7eb;
  --color-text:       #111827;
  --color-text-muted: #6b7280;
  --color-sidebar-bg: #ffffff;


  /* ---- COULEUR DANGER (boutons annuler, erreurs) -------------- */
  --color-danger:       #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-ring:  #ef4444;
  --color-danger-text:  #ffffff;


  /* ---- ECHELLE DE GRIS (classes Tailwind gray-*, voir common/minimal.php) */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

}


/* ============================================================
 * MODE SOMBRE
 * ============================================================
 * Active par l'attribut data-theme="dark" sur <html>, pose par
 * stoux/js/theme.js (reglage de l'appareil, ou choix force par
 * le bouton clair/sombre, memorise dans le cookie stoux_theme).
 * ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Primaire et secondaire un peu plus claires pour rester lisibles sur fond sombre */
  --primary-l:   52%;
  --secondary-l: 56%;

  /* Palettes inversees : les teintes claires (50-300, fonds de badges...)
   * deviennent des teintes sombres, les teintes foncees (700-900, textes)
   * deviennent claires */
  --color-primary-50:  hsl(var(--primary-h), var(--primary-s), 14%);
  --color-primary-100: hsl(var(--primary-h), var(--primary-s), 18%);
  --color-primary-200: hsl(var(--primary-h), var(--primary-s), 24%);
  --color-primary-300: hsl(var(--primary-h), var(--primary-s), 32%);
  --color-primary-400: hsl(var(--primary-h), var(--primary-s), 42%);
  --color-primary-500: hsl(var(--primary-h), var(--primary-s), 48%);
  --color-primary-700: hsl(var(--primary-h), var(--primary-s), 62%);
  --color-primary-800: hsl(var(--primary-h), var(--primary-s), 72%);
  --color-primary-900: hsl(var(--primary-h), var(--primary-s), 82%);

  --color-secondary-50:  hsl(var(--secondary-h), var(--secondary-s), 14%);
  --color-secondary-100: hsl(var(--secondary-h), var(--secondary-s), 18%);
  --color-secondary-200: hsl(var(--secondary-h), var(--secondary-s), 24%);
  --color-secondary-300: hsl(var(--secondary-h), var(--secondary-s), 32%);
  --color-secondary-400: hsl(var(--secondary-h), var(--secondary-s), 42%);
  --color-secondary-500: hsl(var(--secondary-h), var(--secondary-s), 50%);
  --color-secondary-700: hsl(var(--secondary-h), var(--secondary-s), 64%);
  --color-secondary-800: hsl(var(--secondary-h), var(--secondary-s), 72%);
  --color-secondary-900: hsl(var(--secondary-h), var(--secondary-s), 82%);

  /* Alias : gardent leur role (fond de bouton, survol...) malgre l'inversion */
  --color-primary-light:   hsl(var(--primary-h), var(--primary-s), 62%);
  --color-primary-dark:    hsl(var(--primary-h), var(--primary-s), 34%);
  --color-primary-hover:   hsl(var(--primary-h), var(--primary-s), 44%);
  --color-secondary-light: hsl(var(--secondary-h), var(--secondary-s), 64%);
  --color-secondary-dark:  hsl(var(--secondary-h), var(--secondary-s), 40%);
  --color-secondary-hover: hsl(var(--secondary-h), var(--secondary-s), 48%);

  /* Neutres */
  --color-bg:         #0f172a;
  --color-surface:    #1e293b;
  --color-border:     #334155;
  --color-text:       #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-sidebar-bg: #111c30;

  /* Danger */
  --color-danger:       #dc2626;
  --color-danger-hover: #ef4444;
  --color-danger-ring:  #f87171;

  /* Gris inverses : text-gray-700 devient clair, bg-gray-100 devient sombre */
  --gray-50:  #172033;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #a7b4c6;
  --gray-700: #cbd5e1;
  --gray-800: #e2e8f0;
  --gray-900: #f1f5f9;
  --gray-950: #f8fafc;
}

/* bg-white n'est pas remappe dans Tailwind (text-white doit rester blanc) */
:root[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
}
/* Cartes de prix par etat (fiche produit) : fond des cartes du theme, titre dans la couleur
 * de l'etat (--etat-accent, posee sur la carte), la bande du haut garde la couleur */
:root[data-theme="dark"] .etat-tarif { background: var(--color-surface) !important; }
:root[data-theme="dark"] .etat-tarif .etat-titre { color: var(--etat-accent) !important; }

/* Logos des sites (Fnac, eBay...) : fond blanc garde, sinon les logos sombres disparaissent */
:root[data-theme="dark"] .logo-site.bg-white {
  background-color: #fff !important;
}

/* Pastille de statut dans les listes (stoux/css/theme.js : statutPastille) */
.statut-pastille {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .statut-pastille { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }

/* Consulter stock / ventes : commentaire / photos colles a leur ligne (pas de trait entre les deux) */
#ls-grid tr.avec-detail > td,  #lv-grid tr.avec-detail > td  { border-bottom-width: 0; }
#ls-grid tr.ligne-detail > td, #lv-grid tr.ligne-detail > td { border-top-width: 0; }
/* Liseré autour des popups : en sombre, elles se confondraient avec le fond.
 * Ajuster la couleur ici (et dans :root pour le mode clair). */
:root                    { --color-popup-border: transparent; }
:root[data-theme="dark"] { --color-popup-border: rgba(255, 255, 255, .7); }

#art-modal > div, #stock-modal > div, #cat-modal > div, #popup > div, #vc-modal > div,
.modal-box, .popup-content, .sheet, .releve-sheet, .releve-box,
.detail-panel, .client-panel {
  outline: 1px solid var(--color-popup-border);
}

/* Iframes du site (src relatif ou about:blank) : sans cette regle, Chrome peint
 * un fond blanc opaque pendant leur chargement (page en cours de chargement en
 * schema clair dans une page en schema sombre). Les iframes vers une URL http
 * externe gardent le comportement normal. */
:root[data-theme="dark"] iframe:not([src^="http"]) {
  color-scheme: normal;
}

/* Fonds Tailwind clairs colores (paiements de la vente, badges, lignes Divers...) :
 * teintes sombres en mode sombre, et textes colores fonces eclaircis pour rester lisibles */
:root[data-theme="dark"] :is(.bg-green-50, .bg-green-100, .bg-green-200)    { background-color: #163524 !important; }
:root[data-theme="dark"] :is(.bg-blue-50, .bg-blue-100, .bg-blue-200)       { background-color: #172a46 !important; }
:root[data-theme="dark"] :is(.bg-pink-50, .bg-pink-100, .bg-pink-200)       { background-color: #3d1830 !important; }
:root[data-theme="dark"] :is(.bg-red-50, .bg-red-100, .bg-red-200)          { background-color: #3f1a1d !important; }
:root[data-theme="dark"] :is(.bg-yellow-50, .bg-yellow-100, .bg-yellow-200) { background-color: #3a3212 !important; }
:root[data-theme="dark"] :is(.bg-orange-50, .bg-orange-100, .bg-orange-200) { background-color: #3d2612 !important; }
:root[data-theme="dark"] :is(.bg-purple-50, .bg-purple-100, .bg-purple-200) { background-color: #2e1f47 !important; }
:root[data-theme="dark"] :is(.text-green-700, .text-green-800)   { color: #86efac !important; }
:root[data-theme="dark"] :is(.text-blue-700, .text-blue-800)     { color: #93c5fd !important; }
:root[data-theme="dark"] :is(.text-pink-700, .text-pink-800)     { color: #f9a8d4 !important; }
:root[data-theme="dark"] :is(.text-red-700, .text-red-800)       { color: #fca5a5 !important; }
:root[data-theme="dark"] :is(.text-yellow-700, .text-yellow-800) { color: #fde68a !important; }
:root[data-theme="dark"] :is(.text-orange-700, .text-orange-800) { color: #fdba74 !important; }
:root[data-theme="dark"] :is(.text-purple-700, .text-purple-800) { color: #d8b4fe !important; }

/* Tableaux legacy de general.css (fichier a ne pas modifier) */
:root[data-theme="dark"] .style0,
:root[data-theme="dark"] .styleT,
:root[data-theme="dark"] .mainTable {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .style1 {
  background: #14532d !important;   /* vert de ligne selectionnee, assombri */
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Bouton clair / sombre (menu, topbars tablette et mobile) */
.btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; background: transparent; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.btn-theme svg { width: 20px; height: 20px; }
/* L'icone montre l'action du clic : lune en clair, soleil en sombre */
.btn-theme .ico-auto, .btn-theme .ico-dark, .btn-theme .ico-light { display: none; }
:root:not([data-theme="dark"]) .btn-theme .ico-dark,
:root[data-theme="dark"]       .btn-theme .ico-light { display: inline; }