/* ═══════════════════════════════════════════════════════════════════════
   FOODHUB — Redesign Pass (Salim 2026-06-10)
   « reprends le design de toutes les vues » → socle CSS d'abord.

   Objectif : uplift moderne & cohérent de TOUTES les vues admin/app
   (data-theme="harvey") d'un coup, sans toucher chaque ERB. On raffine
   les éléments génériques (form controls, tables, cartes, boutons, titres)
   + les classes partagées, en réutilisant les tokens harvey existants.

   Chargé EN DERNIER → gagne les égalités de spécificité. Les styles inline
   restent prioritaires (cleanup vue par vue ensuite), mais l'essentiel de
   la structure passe par éléments + classes ci-dessous.
   Scope strict : [data-theme="harvey"] (n'affecte ni landing ni atelier).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Base typographique & rendu ─────────────────────────────────────── */
[data-theme="harvey"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--fg);
}
[data-theme="harvey"] ::selection { background: rgba(10,10,10,.12); }

/* ── 1. FORM CONTROLS — rondeur, bordure, focus ring cohérents ─────────── */
/* Cible les controls "nus" du contenu (hors sidebar). Les controls avec
   border-radius inline gardent leur style ; les autres sont uniformisés. */
[data-theme="harvey"] .content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
[data-theme="harvey"] .content select,
[data-theme="harvey"] .content textarea,
[data-theme="harvey"] .fh-input,
[data-theme="harvey"] .fh-select,
[data-theme="harvey"] input.form-control,
[data-theme="harvey"] select.form-control,
[data-theme="harvey"] textarea.form-control {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="harvey"] .content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
[data-theme="harvey"] .content select:focus,
[data-theme="harvey"] .content textarea:focus,
[data-theme="harvey"] .fh-input:focus,
[data-theme="harvey"] .fh-select:focus {
  border-color: var(--fg);
  box-shadow: var(--shadow-focus);
  outline: none;
}
[data-theme="harvey"] .content input::placeholder,
[data-theme="harvey"] .content textarea::placeholder { color: var(--fg-subtle); }

/* Selects natifs → chevron custom propre */
[data-theme="harvey"] .content select,
[data-theme="harvey"] .fh-select,
[data-theme="harvey"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px !important;
}

/* ── 2. BOUTONS — micro-interactions + cohérence ───────────────────────── */
[data-theme="harvey"] .fh-btn,
[data-theme="harvey"] .fh-btn-v1,
[data-theme="harvey"] .btn-fh,
[data-theme="harvey"] .fh-btn-sm-v1,
[data-theme="harvey"] .fh-btn-ghost-v1 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.01em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
[data-theme="harvey"] .fh-btn:hover,
[data-theme="harvey"] .fh-btn-v1:hover,
[data-theme="harvey"] .btn-fh:hover { box-shadow: var(--shadow); }
[data-theme="harvey"] .fh-btn:active,
[data-theme="harvey"] .fh-btn-v1:active,
[data-theme="harvey"] .btn-fh:active { transform: translateY(1px); }
[data-theme="harvey"] .fh-btn-ghost-v1 {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg);
}
[data-theme="harvey"] .fh-btn-ghost-v1:hover { background: var(--bg-sunken); }
[data-theme="harvey"] button:disabled,
[data-theme="harvey"] .fh-btn:disabled,
[data-theme="harvey"] .fh-btn-v1:disabled { opacity: .45; cursor: not-allowed; }

/* ── 3. CARTES / CONTENEURS — ombre douce, rondeur ─────────────────────── */
[data-theme="harvey"] .fh-card,
[data-theme="harvey"] .fh-fieldset,
[data-theme="harvey"] .fh-section,
[data-theme="harvey"] .fh-card-tight,
[data-theme="harvey"] .form-card,
[data-theme="harvey"] .form-section,
[data-theme="harvey"] .data-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
[data-theme="harvey"] .fh-card:hover,
[data-theme="harvey"] .fh-card-tight:hover { box-shadow: var(--shadow); }

/* ── 4. TITRES DE SECTION — mono label propre ──────────────────────────── */
[data-theme="harvey"] .fh-section-title,
[data-theme="harvey"] .fh-fieldset-title,
[data-theme="harvey"] .fh-field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
}
[data-theme="harvey"] h1, [data-theme="harvey"] h2, [data-theme="harvey"] h3 {
  letter-spacing: -.02em;
}
/* h4/h5/h6 : application.css les met en var(--ink) (sombre) sans override
   harvey → sombre sur sombre. On force la couleur de texte du thème.
   (exclut la facture papier .content .fh-fieldset[print] gérée à part). */
[data-theme="harvey"] .content h4,
[data-theme="harvey"] .content h5,
[data-theme="harvey"] .content h6 {
  color: var(--fg);
}

/* ── 5. TABLES GÉNÉRIQUES — propres, hover, thead subtil ───────────────── */
[data-theme="harvey"] .content table:not(.fh-grid-table):not(.no-skin) {
  border-collapse: collapse;
  width: 100%;
}
[data-theme="harvey"] .content table:not(.fh-grid-table):not(.no-skin) thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
[data-theme="harvey"] .content table:not(.fh-grid-table):not(.no-skin) tbody td {
  border-bottom: 1px solid var(--border);
}
[data-theme="harvey"] .content table:not(.fh-grid-table):not(.no-skin) tbody tr:last-child td {
  border-bottom: 0;
}
[data-theme="harvey"] .content table:not(.fh-grid-table):not(.no-skin) tbody tr:hover {
  background: var(--bg);
}

/* ── 6. PILLS / BADGES — rondeur pleine + densité ──────────────────────── */
[data-theme="harvey"] .fh-pill,
[data-theme="harvey"] .fh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 2px 9px;
  text-transform: uppercase;
}
[data-theme="harvey"] .fh-pill--neutral {
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* ── 7. ALERTS — bordure gauche moderne ────────────────────────────────── */
[data-theme="harvey"] .fh-alert {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  padding: 10px 14px;
  font-size: var(--fs-sm);
}
[data-theme="harvey"] .fh-alert-error,
[data-theme="harvey"] .fh-alert.is-error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
[data-theme="harvey"] .fh-alert.is-success {
  border-left-color: var(--success);
  background: var(--success-soft);
}

/* ── 8. LIENS de contenu ───────────────────────────────────────────────── */
/* Uniquement les liens de prose SANS classe : un lien avec classe est stylé
   par sa vue (boutons type .cg-row__open fond noir → ne pas forcer color). */
[data-theme="harvey"] .content a:not([class]) {
  color: var(--fg);
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}

/* ── 9. SCROLLBARS fines (desktop) ─────────────────────────────────────── */
@media (min-width: 769px) {
  [data-theme="harvey"] ::-webkit-scrollbar { width: 10px; height: 10px; }
  [data-theme="harvey"] ::-webkit-scrollbar-track { background: transparent; }
  [data-theme="harvey"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid var(--bg);
  }
  [data-theme="harvey"] ::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }
}

/* ── 10. BOTTOM NAV — pill flottante sombre (style apps modernes) ────────
   Salim 2026-06-11 : référence Instagram — barre détachée des bords,
   fond sombre arrondi, icônes seules, item actif en surbrillance pill. */
[data-theme="harvey"] .fh-bottom-nav {
  left: 50%;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(400px, calc(100% - 28px));
  background: rgba(24, 24, 26, .94) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18);
}
[data-theme="harvey"] .fh-bottom-nav__inner {
  display: flex;
  justify-content: space-between;
  gap: 0;
  max-width: none;
}
[data-theme="harvey"] .fh-bottom-nav__item {
  flex: 1;
  min-height: 46px;
  padding: 0 6px;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
[data-theme="harvey"] .fh-bottom-nav__item i,
[data-theme="harvey"] .fh-bottom-nav__item .ico {
  font-size: 21px;
}
/* Icônes seules (style Instagram) — les labels restent pour les lecteurs
   d'écran via aria-label, masqués visuellement. */
[data-theme="harvey"] .fh-bottom-nav__item span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[data-theme="harvey"] .fh-bottom-nav__item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
[data-theme="harvey"] .fh-bottom-nav__item.is-active {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
[data-theme="harvey"] .fh-bottom-nav__item:active { transform: scale(.94); }
/* Le contenu ne doit pas passer sous la pill flottante */
@media (max-width: 720px) {
  [data-theme="harvey"] body { padding-bottom: 84px !important; }
  /* La barre d'action des grilles (fg-bar) se place AU-DESSUS de la nav */
  [data-theme="harvey"] .fg-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── 11. Empty states / hr ─────────────────────────────────────────────── */
[data-theme="harvey"] .content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* ── 12. Mobile : font-size >= 16px sur les controls pour éviter le zoom
   automatique iOS au focus (les controls à font-size inline gardent le leur). */
@media (max-width: 768px) {
  [data-theme="harvey"] .content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  [data-theme="harvey"] .content select,
  [data-theme="harvey"] .content textarea {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. POLISH DES PATTERNS INLINE (sans réécrire les ERB)
   Les vues lourdes en styles inline gardent leur palette (cohérente harvey)
   mais paraissent « plates ». On ré-injecte des micro-interactions modernes
   sur les signatures inline les plus fréquentes : boutons noirs, pills,
   panneaux, details/summary.
   ═══════════════════════════════════════════════════════════════════════ */

/* Boutons / liens noirs codés en inline → transition + hover relevé.
   (harvey recolore déjà #0e0e0e/#000 → #0A0A0A ; on ajoute le mouvement.) */
[data-theme="harvey"] .content a[style*="background:#0e0e0e" i],
[data-theme="harvey"] .content a[style*="background: #0e0e0e" i],
[data-theme="harvey"] .content a[style*="background:#000" i],
[data-theme="harvey"] .content a[style*="background:#0A0A0A" i],
[data-theme="harvey"] .content a[style*="background:#0a0a0a" i],
[data-theme="harvey"] .content button[style*="background:#0e0e0e" i],
[data-theme="harvey"] .content button[style*="background: #0e0e0e" i],
[data-theme="harvey"] .content button[style*="background:#000" i] {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease) !important;
  cursor: pointer;
}
[data-theme="harvey"] .content a[style*="background:#0e0e0e" i]:hover,
[data-theme="harvey"] .content a[style*="background:#000" i]:hover,
[data-theme="harvey"] .content button[style*="background:#0e0e0e" i]:hover,
[data-theme="harvey"] .content button[style*="background:#000" i]:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
[data-theme="harvey"] .content a[style*="background:#0e0e0e" i]:active,
[data-theme="harvey"] .content button[style*="background:#0e0e0e" i]:active {
  transform: translateY(0);
}

/* Pills inline (border-radius:999px) → typo mono fine, plus actuelle. */
[data-theme="harvey"] .content span[style*="border-radius:999px" i],
[data-theme="harvey"] .content span[style*="border-radius: 999px" i] {
  font-family: var(--font-mono);
  letter-spacing: .03em;
}

/* details/summary (cards dépliables : grilles, listes) → curseur + hover. */
[data-theme="harvey"] .content details > summary {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  list-style: none;
}
[data-theme="harvey"] .content details > summary::-webkit-details-marker { display: none; }
[data-theme="harvey"] .content details > summary:hover { background: var(--bg-sunken); }

/* Panneaux gris clairs inline avec bordure → ombre douce discrète. */
[data-theme="harvey"] .content div[style*="background:#fafafa" i][style*="border" i],
[data-theme="harvey"] .content div[style*="background:#f5f5f5" i][style*="border" i],
[data-theme="harvey"] .content div[style*="background:#f8f8f8" i][style*="border" i] {
  box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════════════
   14. PRIMITIVES BOOTSTRAP RÉSIDUELLES (Salim 2026-06-14 — sweep design)
   Beaucoup de formulaires (orders/new, edit, invoices, devis, products,
   clients) utilisent encore le markup Bootstrap (.form-label, .form-select,
   .form-control-sm, .form-check, .btn-*). Sans toucher les ERB, on les
   aligne sur le langage moderne harvey → fini le look « avant-guerre ».
   ═══════════════════════════════════════════════════════════════════════ */

/* Labels de formulaire : mono fin façon eyebrow, lisible */
[data-theme="harvey"] .content .form-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-muted);
  margin-bottom: 5px;
}

/* Inputs petits Bootstrap → même hauteur/rondeur que les autres */
[data-theme="harvey"] .content .form-control-sm,
[data-theme="harvey"] .content .form-select-sm {
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: var(--fs-sm);
}
[data-theme="harvey"] .content .form-select {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--bg-elev);
  color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
[data-theme="harvey"] .content .form-select:focus,
[data-theme="harvey"] .content .form-control:focus,
[data-theme="harvey"] .content .form-control-sm:focus {
  border-color: var(--fg);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Checkboxes / radios Bootstrap → accent noir harvey, plus nets */
[data-theme="harvey"] .content .form-check-input {
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
[data-theme="harvey"] .content .form-check-input:checked {
  background-color: var(--fg);
  border-color: var(--fg);
}
[data-theme="harvey"] .content .form-check-input:focus {
  border-color: var(--fg);
  box-shadow: var(--shadow-focus);
}
[data-theme="harvey"] .content .form-check-label {
  font-size: var(--fs-sm);
  color: var(--fg);
}

/* Boutons Bootstrap → langage harvey (radius, poids, micro-lift) */
[data-theme="harvey"] .content .btn {
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
[data-theme="harvey"] .content .btn:hover { transform: translateY(-1px) }
[data-theme="harvey"] .content .btn-primary {
  background: var(--fg); border-color: var(--fg); color: var(--bg-elev);
}
[data-theme="harvey"] .content .btn-primary:hover {
  background: #000; border-color: #000; box-shadow: var(--shadow);
}
[data-theme="harvey"] .content .btn-outline-primary,
[data-theme="harvey"] .content .btn-outline-secondary,
[data-theme="harvey"] .content .btn-outline-dark {
  background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--fg);
}
[data-theme="harvey"] .content .btn-outline-primary:hover,
[data-theme="harvey"] .content .btn-outline-secondary:hover,
[data-theme="harvey"] .content .btn-outline-dark:hover {
  background: var(--bg-sunken); border-color: var(--fg); color: var(--fg);
}
[data-theme="harvey"] .content .btn-success {
  background: var(--success); border-color: var(--success);
}
[data-theme="harvey"] .content .btn-danger {
  background: var(--danger); border-color: var(--danger);
}
[data-theme="harvey"] .content .btn-light,
[data-theme="harvey"] .content .btn-secondary {
  background: var(--bg-sunken); border: 1px solid var(--border); color: var(--fg);
}

/* Cartes Bootstrap (.card) → cohérentes avec fh-card */
[data-theme="harvey"] .content .card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: var(--shadow-xs);
}
[data-theme="harvey"] .content .card-header {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

/* Badges Bootstrap → pleine rondeur */
[data-theme="harvey"] .content .badge { border-radius: 999px; font-weight: 650; letter-spacing: .02em }

/* Tables Bootstrap : --bs-table-bg = #fff par défaut (CDN) → cellules
   blanches en dark. On neutralise les variables Bootstrap. (Salim 2026-06-20) */
[data-theme="harvey"] .content table,
[data-theme="harvey"] .content .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg);
  --bs-table-border-color: rgba(255,255,255,.10);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--fg);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--fg);
  --bs-table-accent-bg: transparent;
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   16. DARK GROK — overrides des couleurs INLINE en dur (Salim 2026-06-14).
   Les vues ont ~490 fonds blancs + ~250 textes sombres codés en inline qui
   ne suivent pas les tokens. On les remappe globalement vers la palette dark.
   Première passe — affinée écran par écran ensuite.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonds blancs → surface élevée sombre ── */
[data-theme="harvey"] .content [style*="background:#fff" i]:not([style*="#fffbeb" i]):not([style*="#fffaf" i]),
[data-theme="harvey"] .content [style*="background: #fff" i]:not([style*="#fffbeb" i]),
[data-theme="harvey"] .content [style*="background:#ffffff" i],
[data-theme="harvey"] .content [style*="background:#FFFFFF" i],
[data-theme="harvey"] .content [style*="background-color:#fff" i] {
  background-color: var(--bg-elev) !important;
}
/* ── Gris très clairs → surface enfoncée ── */
[data-theme="harvey"] .content [style*="background:#fafafa" i],
[data-theme="harvey"] .content [style*="background:#f8f8f8" i],
[data-theme="harvey"] .content [style*="background:#f5f5f5" i],
[data-theme="harvey"] .content [style*="background: #f5f5f5" i],
[data-theme="harvey"] .content [style*="background:#fafaf8" i],
[data-theme="harvey"] .content [style*="background:#faf6ec" i],
[data-theme="harvey"] .content [style*="background:#faf9f6" i],
[data-theme="harvey"] .content [style*="background:#f9fafb" i],
[data-theme="harvey"] .content [style*="background:#fafafc" i],
[data-theme="harvey"] .content [style*="background:#f0f0f0" i],
[data-theme="harvey"] .content [style*="background:#f6f6f4" i] {
  background-color: var(--bg-sunken) !important;
}
/* ── Zones/boutons SOMBRES inline (#000/#0e0e0e/#111/#1a1611) : sur fond noir
   ils deviennent invisibles → tuile gris foncé visible (texte déjà blanc). ── */
[data-theme="harvey"] .content [style*="background:#0e0e0e" i]:not(#sidebar):not(.fh-bottom-nav),
[data-theme="harvey"] .content [style*="background: #0e0e0e" i],
[data-theme="harvey"] .content [style*="background:#000" i]:not([style*="#0000" i]),
[data-theme="harvey"] .content [style*="background: #000" i],
[data-theme="harvey"] .content [style*="background:#0A0A0A" i],
[data-theme="harvey"] .content [style*="background:#0a0a0a" i],
[data-theme="harvey"] .content [style*="background:#111" i],
[data-theme="harvey"] .content [style*="background:#1a1611" i],
[data-theme="harvey"] .content [style*="background:#1A1611" i] {
  background-color: #2C2C2E !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* ── Bordures claires inline → sombres ── */
[data-theme="harvey"] .content [style*="border:1px solid #e5e5e5" i],
[data-theme="harvey"] .content [style*="border: 1px solid #e5e5e5" i],
[data-theme="harvey"] .content [style*="border:1px solid #eee" i],
[data-theme="harvey"] .content [style*="border:1px solid #f0f0f0" i],
[data-theme="harvey"] .content [style*="border:1.5px solid #e5e5e5" i],
[data-theme="harvey"] .content [style*="border-color:#e5e5e5" i] {
  border-color: rgba(255,255,255,.12) !important;
}

/* ── Textes sombres inline → blancs ── */
[data-theme="harvey"] .content [style*="color:#000" i]:not([style*="#0000" i]),
[data-theme="harvey"] .content [style*="color: #000" i],
[data-theme="harvey"] .content [style*="color:#0e0e0e" i],
[data-theme="harvey"] .content [style*="color: #0e0e0e" i],
[data-theme="harvey"] .content [style*="color:#0A0A0A" i],
[data-theme="harvey"] .content [style*="color:#111" i],
[data-theme="harvey"] .content [style*="color:#141414" i],
[data-theme="harvey"] .content [style*="color:#1a1611" i],
[data-theme="harvey"] .content [style*="color:#1a1a1a" i],
[data-theme="harvey"] .content [style*="color:#222" i],
[data-theme="harvey"] .content [style*="color:#333" i] {
  color: #fff !important;
}
/* ── Gris moyens (texte secondaire) → clair translucide ── */
[data-theme="harvey"] .content [style*="color:#525252" i],
[data-theme="harvey"] .content [style*="color:#737373" i],
[data-theme="harvey"] .content [style*="color:#6b7280" i],
[data-theme="harvey"] .content [style*="color:#6B7280" i],
[data-theme="harvey"] .content [style*="color:#9ca3af" i],
[data-theme="harvey"] .content [style*="color:#9CA3AF" i],
[data-theme="harvey"] .content [style*="color:#a3a3a3" i],
[data-theme="harvey"] .content [style*="color:#d1d5db" i],
[data-theme="harvey"] .content [style*="color:#9a7830" i],
[data-theme="harvey"] .content [style*="color:#475569" i] {
  color: rgba(255,255,255,.6) !important;
}

/* ── Champs de formulaire → surface sombre (Bootstrap force #fff sinon).
   Pas de scope .content : les layouts auth/onboarding/supplier n'ont pas de
   .content wrapper (Salim 2026-06-23). Exclut sidebar. ── */
[data-theme="harvey"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]),
[data-theme="harvey"] select,
[data-theme="harvey"] textarea,
[data-theme="harvey"] .form-control,
[data-theme="harvey"] .form-select,
[data-theme="harvey"] .form-control-sm,
[data-theme="harvey"] .form-select-sm {
  background-color: #2C2C2E !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
}
[data-theme="harvey"] input::placeholder,
[data-theme="harvey"] textarea::placeholder { color: rgba(255,255,255,.4) !important; }
[data-theme="harvey"] select option { background: #1C1C1E; color: #fff; }
/* Chevron des selects → clair */
[data-theme="harvey"] .content select,
[data-theme="harvey"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* ── 17. RAFFINAGE GROK/INSTAGRAM — tons sémantiques pâles → translucides
   sombres élégants. Les chips/encarts vert/ambre/rouge/bleu clairs tranchent
   sur le noir → versions dark tint + texte couleur vive (Salim 2026-06-14). ── */
/* Fonds sémantiques pâles → tint sombre */
[data-theme="harvey"] .content [style*="background:#f0fdf4" i],
[data-theme="harvey"] .content [style*="background:#dcfce7" i],
[data-theme="harvey"] .content [style*="background: #f0fdf4" i],
[data-theme="harvey"] .content [style*="background:#ecfdf5" i],
[data-theme="harvey"] .content [style*="background:#f0fff4" i],
[data-theme="harvey"] .content [style*="background:#dff5e6" i] {
  background-color: rgba(47,210,122,.14) !important;
}
[data-theme="harvey"] .content [style*="background:#fef2f2" i],
[data-theme="harvey"] .content [style*="background:#fee2e2" i],
[data-theme="harvey"] .content [style*="background: #fef2f2" i],
[data-theme="harvey"] .content [style*="background:#fff7f7" i],
[data-theme="harvey"] .content [style*="background:#fff5f5" i] {
  background-color: rgba(255,92,92,.14) !important;
}
[data-theme="harvey"] .content [style*="background:#fffbeb" i],
[data-theme="harvey"] .content [style*="background:#fff7ed" i],
[data-theme="harvey"] .content [style*="background:#fef3c7" i],
[data-theme="harvey"] .content [style*="background:#fff8f0" i],
[data-theme="harvey"] .content [style*="background:#fff9e6" i],
[data-theme="harvey"] .content [style*="background:#fffbf0" i],
[data-theme="harvey"] .content [style*="background:#fef9c3" i],
[data-theme="harvey"] .content [style*="background:#fefce8" i] {
  background-color: rgba(240,169,59,.14) !important;
}
[data-theme="harvey"] .content [style*="background:#dbeafe" i],
[data-theme="harvey"] .content [style*="background:#eff6ff" i],
[data-theme="harvey"] .content [style*="background:#e0f2fe" i],
[data-theme="harvey"] .content [style*="background:#eef2ff" i] {
  background-color: rgba(96,165,250,.14) !important;
}
/* Textes sémantiques sombres → couleur vive claire */
[data-theme="harvey"] .content [style*="color:#15803d" i],
[data-theme="harvey"] .content [style*="color:#166534" i],
[data-theme="harvey"] .content [style*="color:#16a34a" i],
[data-theme="harvey"] .content [style*="color:#15a34a" i],
[data-theme="harvey"] .content [style*="color:#3F6E4A" i],
[data-theme="harvey"] .content [style*="color:#3f6e4a" i] {
  color: #2FD27A !important;
}
[data-theme="harvey"] .content [style*="color:#991b1b" i],
[data-theme="harvey"] .content [style*="color:#dc2626" i],
[data-theme="harvey"] .content [style*="color:#b02a37" i],
[data-theme="harvey"] .content [style*="color:#b91c1c" i] {
  color: #FF7A7A !important;
}
[data-theme="harvey"] .content [style*="color:#92400e" i],
[data-theme="harvey"] .content [style*="color:#b45309" i],
[data-theme="harvey"] .content [style*="color:#9a3412" i],
[data-theme="harvey"] .content [style*="color:#9a7830" i],
[data-theme="harvey"] .content [style*="color:#a16207" i] {
  color: #F0A93B !important;
}
[data-theme="harvey"] .content [style*="color:#1e40af" i],
[data-theme="harvey"] .content [style*="color:#1d4ed8" i],
[data-theme="harvey"] .content [style*="color:#1a6ba0" i] {
  color: #60A5FA !important;
}
/* fh-pill neutres → tint blanc translucide (Grok) */
[data-theme="harvey"] .fh-pill--neutral {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.7) !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Filet : fond var(--accent)/--fg (= blanc en dark) → texte sombre lisible
   (pill blanc Grok). Évite le blanc-sur-blanc des boutons primaires inline. */
[data-theme="harvey"] .content [style*="background:var(--accent)" i],
[data-theme="harvey"] .content [style*="background: var(--accent)" i],
[data-theme="harvey"] .content [style*="background:var(--fg)" i],
[data-theme="harvey"] .content [style*="background: var(--fg)" i],
[data-theme="harvey"] .content [style*="background:var(--obsidian)" i],
[data-theme="harvey"] .content [style*="background: var(--obsidian)" i] {
  color: var(--accent-fg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. HERO PREMIUM UNIFIÉ (Salim 2026-06-14 — « toutes les pages au niveau
   de /orders »). Toutes les bannières de page partagent le dégradé sombre
   premium (réf hub-hero/orders). On convertit les heros « plats clairs »
   bespoke (order/dash/users/clients/devis/dispatch/factures…) sans réécrire
   chaque ERB. Texte structurel forcé blanc, eyebrow doré.
   Les heros déjà sombres (hub/cmp/nc/dv/new-order/fh/gh/og) ne sont pas listés.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="harvey"] .order-hero,
[data-theme="harvey"] .camp-hero,
[data-theme="harvey"] .dash-hero,
[data-theme="harvey"] .us-hero,
[data-theme="harvey"] .cli-hero,
[data-theme="harvey"] .dvs-hero,
[data-theme="harvey"] .dvh-hero,
[data-theme="harvey"] .dsp-hero,
[data-theme="harvey"] .disp-hero,
[data-theme="harvey"] .di-hero,
[data-theme="harvey"] .inv-hero,
[data-theme="harvey"] .nl-hero,
[data-theme="harvey"] .wa-hero,
[data-theme="harvey"] .profile-hero,
[data-theme="harvey"] .inbox-hero,
[data-theme="harvey"] .client-quick-hero,
[data-theme="harvey"] .invf-hero {
  --gold: #c9a84c;
  background: linear-gradient(135deg, #1A1611 0%, #2D2418 100%) !important;
  border: 1px solid #3A2E20 !important;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* Halo doré décoratif (comme hub-hero) */
[data-theme="harvey"] .order-hero::after,
[data-theme="harvey"] .dash-hero::after,
[data-theme="harvey"] .us-hero::after,
[data-theme="harvey"] .cli-hero::after,
[data-theme="harvey"] .inv-hero::after,
[data-theme="harvey"] .disp-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(184,146,58,.12), transparent 60%);
}
/* Texte structurel → blanc lisible (bat [data-theme=harvey] h1 = var(--fg)).
   Couvre aussi les titres en <span> (.order-hero__title-ref/-clie etc.). */
[data-theme="harvey"] :is(.order-hero,.camp-hero,.dash-hero,.us-hero,.cli-hero,.dvs-hero,.dvh-hero,.dsp-hero,.disp-hero,.di-hero,.inv-hero,.nl-hero,.wa-hero,.profile-hero,.inbox-hero,.client-quick-hero,.invf-hero)
  :is(h1,h2,h3,h4,p,[class*="title"],[class*="__ref"],[class*="__name"],[class*="__clie"]) {
  color: #fff !important;
}
/* Labels / meta / sous-titres (patterns de classe) → blanc translucide */
[data-theme="harvey"] :is(.order-hero,.camp-hero,.dash-hero,.us-hero,.cli-hero,.dvs-hero,.dvh-hero,.dsp-hero,.disp-hero,.di-hero,.inv-hero,.nl-hero,.wa-hero,.profile-hero,.inbox-hero,.client-quick-hero,.invf-hero)
  :is([class*="__meta"],[class*="__sub"],[class*="-meta"],[class*="-sub"],.meta,.sub,small) {
  color: rgba(255,255,255,.72) !important;
}
[data-theme="harvey"] :is(.order-hero,.camp-hero,.dash-hero,.us-hero,.cli-hero,.dvs-hero,.dvh-hero,.dsp-hero,.disp-hero,.di-hero,.inv-hero,.nl-hero,.wa-hero,.profile-hero,.inbox-hero,.client-quick-hero,.invf-hero)
  :is([class*="eyebrow"],[class*="__label"]) {
  color: var(--gold) !important;
}
/* strong dans meta → blanc plein */
[data-theme="harvey"] :is(.order-hero,.camp-hero,.dash-hero,.us-hero,.cli-hero,.dvs-hero,.dvh-hero,.dsp-hero,.disp-hero,.di-hero,.inv-hero,.nl-hero) strong {
  color: #fff !important;
}
/* Filet de sécurité : tout élément de texte « nu » dans un hero converti →
   clair. Exclut pills/badges/tags/boutons (qui ont leur propre fond/couleur)
   et les liens. Attrape les spans de statut type .confirmed (Salim 2026-06-14). */
[data-theme="harvey"] :is(.order-hero,.camp-hero,.dash-hero,.us-hero,.cli-hero,.dvs-hero,.dvh-hero,.dsp-hero,.disp-hero,.di-hero,.inv-hero,.nl-hero,.wa-hero,.profile-hero,.inbox-hero,.client-quick-hero,.invf-hero)
  :is(span,strong,small,b,em,td,th,li,dt,dd,label,div):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]):not([class*="btn"]):not([class*="chip"]):not(.primary):not(.ghost):not([style*="background" i]) {
  color: rgba(255,255,255,.82) !important;
}