/* ============================================================
   LEO — Variante "MiniMax" (calque d'override)
   Chargée APRÈS css/styles.css — ne modifie aucun fichier source.
   Langage de design : canvas blanc clair, encre quasi-noire (fort
   contraste), DM Sans partout, CTA pilule NOIRE, cartes blanches à
   filet hairline + radius doux, couleurs vives (corail / bleu)
   réservées aux rares moments "produit". Whitespace généreux.
   Réf. : awesome-design-md / design-md/minimax/DESIGN.md
   ============================================================ */

/* ---------- 1. Jetons : palette claire (le mode sombre MiniMax
   est défini plus bas, section 17) ---------- */
:root,
[data-theme="light"] {
  --primary:      #0a0a0a;   /* ink/black : barres, pilule primaire */
  --primary-soft: #181e25;
  --accent:       #0a0a0a;   /* action générique = pilule NOIRE (MiniMax) */
  --accent-dark:  #222222;   /* charcoal : état pressé */
  --safety:       #ff5530;   /* corail : réservé aux moments produit */

  /* couleurs d'avatar : on garde des teintes douces et lisibles */
  --av-blue: #3b82f6;  --av-clay: #ea5ec1;  --av-sage: #1ba673;

  --bg:         #f7f8fa;     /* surface gris très clair */
  --surface:    #ffffff;     /* cartes blanches */
  --surface-2:  #f2f3f5;     /* surface-soft */
  --text:       #0a0a0a;     /* ink — contraste fort */
  --text-muted: #5f5f5f;     /* steel — secondaire bien lisible */
  --border:     #e5e7eb;     /* hairline */

  --ok:   #1ba673;  --ok-bg:   #e8ffea;   /* success MiniMax */
  --warn: #9a6700;  --warn-bg: #fdf3d1;
  --bad:  #d45656;  --bad-bg:  #fdecec;   /* rouge d'erreur MiniMax */
  --info: #1456f0;  --info-bg: #e7efff;   /* brand-blue */

  --shadow:    rgba(0,0,0,.04) 0px 1px 2px 0px;        /* niveau 1, discret */
  --shadow-lg: rgba(0,0,0,.08) 0px 4px 6px 0px;        /* niveau 2 */
  --radius:    16px;          /* rounded.xl : cartes douces */
}

/* ---------- 2. Typographie : DM Sans partout, titres serrés ---------- */
body {
  font-family: "DM Sans", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
}
.login .logo,
.page-title, .section-title, .detail-hero h2,
.app-header .ttl, .kpi .kpi-val,
.btn, .badge, .chip, .nav-item, .resp-nav .r, .subtab {
  font-family: "DM Sans", Inter, Helvetica, Arial, sans-serif;
}
.page-title { font-weight: 600; letter-spacing: -0.5px; font-size: 22px; }
.section-title { font-weight: 600; letter-spacing: -0.2px; }
.app-header .ttl { font-weight: 600; letter-spacing: -0.3px; }
.detail-hero h2 { font-weight: 600; letter-spacing: -0.5px; }

/* ---------- 3. Shell ---------- */
#app { background: var(--bg) !important; box-shadow: 0 0 60px rgba(10,10,10,.06); }

/* ---------- 4. Login : canvas blanc, display noir, carte hairline ---------- */
.login {
  background: #ffffff !important;     /* pas de dégradé sombre */
  color: var(--text);
}
.login .logo { font-size: 58px; font-weight: 600; letter-spacing: -2px; color: var(--text); }
.login .logo .badge {
  background: #0a0a0a; color: #fff;    /* badge "L" pilule noire */
  border-radius: 16px;
}
.login .tagline { color: #45515e; font-weight: 500; }
.login .sub { color: #8e8e93; }
.role-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.role-card:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #0a0a0a;
  box-shadow: var(--shadow-lg);
}
.role-card h3 { color: var(--text); }
.role-card p { color: #5f5f5f; }
.role-card .ic { border-radius: 12px; }
.login .footnote { color: #8e8e93; }

/* ---------- 5. Header : barre blanche éditoriale, filet bas ---------- */
.app-header {
  background: #ffffff;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.app-header .ttl small { color: #5f5f5f; }
.app-header .logo-mini {
  background: #0a0a0a; color: #fff; border-radius: 10px;   /* marque noire */
}
.icon-btn {
  background: #ffffff; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;   /* bouton rond */
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- 6. Contenu / titres ---------- */
.page-sub { color: #5f5f5f; }
.section-title .link { color: #1456f0; font-weight: 500; }   /* lien bleu MiniMax */

/* ---------- 7. Cartes : blanches, filet, radius doux, ombre légère ---------- */
.card, .list-row, .vrow {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- 8. KPI : grille blanche + une tuile vive "produit" ---------- */
.kpi {
  background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.kpi .kpi-val { font-weight: 700; letter-spacing: -0.5px; }
.kpi .kpi-lbl { color: #5f5f5f; }
.kpi.accent {                          /* tuile signature : corail plein */
  background: #ff5530 !important; color: #fff !important;
  border: none; border-radius: 20px;
}
.kpi.accent .kpi-lbl { color: rgba(255,255,255,.85) !important; }
.kpi.dark {                            /* tuile sombre : noir produit */
  background: #0a0a0a; color: #fff; border: none; border-radius: 20px;
}
.kpi.dark .kpi-lbl { color: rgba(255,255,255,.7); }

/* ---------- 9. Badges : pilules pleines, fond pâle / texte saturé ---------- */
.badge { font-weight: 600; border-radius: 999px; }
/* (couleurs portées par les variables sémantiques --ok/--warn/--bad/--info) */
.b-grey { color: #5f5f5f; background: var(--surface-2); }

/* ---------- 10. Boutons : pilule (rounded-full), DM Sans 600 ---------- */
.btn {
  font-weight: 600; font-size: 14px;
  border-radius: 999px; padding: 12px 24px;
}
.btn-primary { background: #0a0a0a; color: #fff; }    /* CTA noir dominant */
.btn-primary:hover { filter: none; background: #222222; }
.btn-dark { background: #0a0a0a; color: #fff; }
.btn-ghost {                                          /* secondaire : contour */
  background: transparent; color: #0a0a0a;
  border: 1px solid #0a0a0a;
}
.btn-ghost:hover { background: rgba(10,10,10,.04); }

/* ---------- 11. Formulaires : champ blanc, focus bleu MiniMax ---------- */
.field label { color: #45515e; font-weight: 500; }
.field input, .field select, .field textarea {
  background: #ffffff; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #1d4ed8; border-width: 2px;
  box-shadow: 0 0 0 3px rgba(20,86,240,.12);
}
.calc-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.calc-box .v.sup { color: #ff5530; }   /* l'heure sup. ressort en corail */
.chip {
  border-radius: 999px; border: 1px solid var(--border);
  background: #ffffff; color: #5f5f5f; font-weight: 500;
}
.chip.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.upload-zone { border: 1.5px dashed var(--border); border-radius: 12px; }
.upload-zone:hover { border-color: #0a0a0a; color: #0a0a0a; }

/* ---------- 12. Onglets internes : segmenté clair ---------- */
.subtabs { background: var(--surface-2); border-radius: 999px; padding: 4px; }
.subtab { border-radius: 999px; font-weight: 500; color: #5f5f5f; }
.subtab.on { background: #ffffff; color: #0a0a0a; box-shadow: var(--shadow); }

/* ---------- 13. Bottom nav : blanche, filet haut ---------- */
.bottom-nav { background: #ffffff; border-top: 1px solid var(--border); }
.nav-item { color: #8e8e93; font-weight: 500; }
.nav-item.on { color: #0a0a0a; }
.nav-item.on svg { stroke: #0a0a0a; }

/* ---------- 14. Nav responsable : pilules ---------- */
.resp-nav .r {
  background: #ffffff; border: 1px solid var(--border); color: #5f5f5f; font-weight: 500;
}
.resp-nav .r.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.resp-nav .r .pill { background: #ff5530; color: #fff; }       /* compteur corail */
.resp-nav .r.on .pill { background: #fff; color: #0a0a0a; }

/* ---------- 15. Validation / bulk / toast ---------- */
.vrow .chk { accent-color: #0a0a0a; }
.act-ok  { background: #e8ffea; color: #1ba673; border-radius: 999px; }
.act-bad { background: #fdecec; color: #d45656; border-radius: 999px; }
.bulk-bar { background: #0a0a0a; color: #fff; border-radius: 14px; }
#toast { background: #0a0a0a; color: #fff; border-radius: 12px; }

/* ---------- 16. Detail hero : carte produit sombre, à plat ---------- */
.detail-hero {
  background: #0a0a0a !important;     /* pas de dégradé */
  color: #fff; border-radius: 20px;
}
.detail-hero .meta { color: rgba(255,255,255,.7); }
.back-link:hover { color: #0a0a0a; }
.divider { background: var(--border); }

/* ============================================================
   17. MODE SOMBRE MiniMax  (data-theme="dark")
   Canvas encre, texte clair, accents corail/bleu conservés.
   Les pilules "encre" deviennent claires pour rester lisibles.
   ============================================================ */
[data-theme="dark"] {
  --primary:   #f4f4f5;
  --bg:        #0d0d0f;     /* canvas encre */
  --surface:   #18181b;     /* cartes */
  --surface-2: #232327;     /* surface-soft */
  --text:      #f4f4f5;     /* encre claire */
  --text-muted:#a1a1aa;     /* secondaire lisible */
  --border:    #2c2c31;     /* hairline sombre */

  --ok-bg:   rgba(27,166,115,.16);
  --warn-bg: rgba(154,103,0,.22);
  --bad-bg:  rgba(212,86,86,.18);
  --info-bg: rgba(20,86,240,.18);
  --warn:    #d8a51e;       /* éclairci pour rester lisible sur fond sombre */

  --shadow:    rgba(0,0,0,.45) 0px 1px 2px 0px;
  --shadow-lg: rgba(0,0,0,.55) 0px 6px 16px 0px;
}

/* Surfaces qui étaient codées en blanc en dur → suivent le thème */
[data-theme="dark"] .app-header,
[data-theme="dark"] .card,
[data-theme="dark"] .list-row,
[data-theme="dark"] .vrow,
[data-theme="dark"] .kpi,
[data-theme="dark"] .bottom-nav,
[data-theme="dark"] .resp-nav .r {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .chip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Textes secondaires codés en gris en dur */
[data-theme="dark"] .page-sub,
[data-theme="dark"] .kpi .kpi-lbl,
[data-theme="dark"] .app-header .ttl small,
[data-theme="dark"] .field label,
[data-theme="dark"] .role-card p,
[data-theme="dark"] .subtab,
[data-theme="dark"] .b-grey,
[data-theme="dark"] .nav-item { color: var(--text-muted); }

/* Pilules "encre" → claires en sombre (sinon invisibles) */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-dark,
[data-theme="dark"] .chip.on,
[data-theme="dark"] .resp-nav .r.on {
  background: #f4f4f5; color: #0a0a0a; border-color: #f4f4f5;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-dark:hover { background: #d4d4d8; }
[data-theme="dark"] .resp-nav .r.on .pill { background: #0a0a0a; color: #fff; }

[data-theme="dark"] .btn-ghost { color: var(--text); border-color: var(--text); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.07); }

/* Onglet segmenté actif */
[data-theme="dark"] .subtabs { background: var(--surface-2); }
[data-theme="dark"] .subtab.on { background: var(--surface); color: var(--text); }

/* Nav du bas : item actif clair */
[data-theme="dark"] .nav-item.on,
[data-theme="dark"] .nav-item.on svg { color: var(--text); stroke: var(--text); }

/* Marque dans l'en-tête : pastille claire */
[data-theme="dark"] .app-header .logo-mini { background: #f4f4f5; color: #0a0a0a; }

/* Tuiles/zones encre : filet pour se détacher du canvas sombre */
[data-theme="dark"] .kpi.dark,
[data-theme="dark"] .detail-hero,
[data-theme="dark"] .bulk-bar { border: 1px solid var(--border); }

/* Boutons d'action validation : fonds teintés assombris */
[data-theme="dark"] .act-ok  { background: rgba(27,166,115,.18); }
[data-theme="dark"] .act-bad { background: rgba(212,86,86,.18); }

/* Liens de retour / zones d'upload au survol */
[data-theme="dark"] .back-link:hover,
[data-theme="dark"] .upload-zone:hover { color: var(--text); border-color: var(--text); }