/* ──────────────────────────────────────────────────────────────
   Dark mode overrides — corrige les backgrounds hardcodés (#FAFAFA,
   #F0F7FF, etc.) qui ne passent pas automatiquement via tokens.
   Chargé APRÈS tous les autres CSS pour que ces règles gagnent.
   ────────────────────────────────────────────────────────────── */

html.dark body,
html.dark {
  color-scheme: dark;
}

/* ── Inputs clairs (#FAFAFA) → surface sombre ───────────────── */
html.dark .field input,
html.dark .scan-form input,
html.dark .client-search-input,
html.dark .client-sort-select,
html.dark .notif-form textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--separator);
}

html.dark .field input:focus,
html.dark .scan-form input:focus,
html.dark .client-search-input:focus,
html.dark .client-sort-select:focus,
html.dark .notif-form textarea:focus {
  background: var(--card);
  border-color: var(--blue);
}

/* Form Récompenses : inputs avec background:#FAFAFA en style inline dans le HTML.
   Nécessite !important pour battre l'inline style. */
html.dark #reward-title,
html.dark #reward-pts {
  background: var(--surface) !important;
  color: var(--text);
}
html.dark #reward-title:focus,
html.dark #reward-pts:focus {
  background: var(--card) !important;
  border-color: var(--blue);
}

/* ── Hover backgrounds clairs ─────────────────────────────── */
html.dark .upload-zone:hover,
html.dark .notif-phrase-btn:hover {
  background: rgba(74, 143, 255, 0.08); /* blue tint subtil */
  border-color: var(--blue);
}

/* ── Boutons secondaires (btn-copy, btn-reset, btn-show-more, btn-camera) ── */
html.dark .btn-copy,
html.dark .btn-reset,
html.dark .btn-show-more,
html.dark .btn-camera,
html.dark .btn-add-reward {
  background: var(--surface);
  color: var(--text);
  border-color: var(--separator);
}
html.dark .btn-copy:active,
html.dark .btn-reset:hover,
html.dark .btn-show-more:hover,
html.dark .btn-camera:hover,
html.dark .btn-add-reward:hover {
  background: var(--separator);
}

/* ── Notif template button (background: var(--bg)) ───────────── */
html.dark .notif-tpl {
  background: var(--surface);
  color: var(--text);
}

/* ── Preview body du theme editor → reste clair (c'est un aperçu
       fidèle de la carte client, qui elle n'a pas de dark mode) ── */
/* Pas d'override : on garde la preview telle quelle */

/* ── Historique client + reward badge (fonds clairs) ──────── */
html.dark .client-history {
  background: rgba(255,255,255,0.03);
}
html.dark .btn-history:hover {
  background: rgba(255,255,255,0.08);
}

/* ── Offer thumb + upload zones ─────────────────────────── */
html.dark .offer-thumb {
  background: var(--surface);
}

/* ── Focus states : les bordures bleues restent OK ──────── */

/* ── Avatar client (background var(--bg)) ──────────────── */
html.dark .client-avatar {
  background: var(--surface);
}
/* Avatar avec surnom : contraste fort (fond noir profond + initiales blanches)
   même en dark mode. Sans cette règle, la règle html.dark .client-avatar
   ci-dessus écrase .filled (même spécificité, chargée après). */
html.dark .client-avatar.filled {
  background: #0B0B10;
  color: #fff;
}

/* Bouton +1 point : en dark mode, --primary devient clair (#F5F5F7),
   donc le "+" blanc disparaît sur fond blanc. On force fond noir + "+" blanc. */
html.dark .btn-point {
  background: #0B0B10;
  color: #fff;
}
html.dark .btn-point:disabled {
  background: var(--separator);
  color: var(--secondary);
}

/* ── Skeleton : adapter la luminosité ────────────────── */
html.dark .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
}

/* ── Login card shadow plus forte en dark ────────────── */
html.dark .login-card { box-shadow: var(--shadow-lg); }

/* ── Special banner accent color override pour lisibilité ── */
html.dark #special-banner {
  filter: brightness(0.85);
}

/* ── Empty state icon plus visible ────────────────────── */
html.dark .empty-icon { opacity: 0.6; }

/* ── Special theme ::after check ─────────────────────── */
html.dark .btn-preset-special {
  background: linear-gradient(180deg, var(--surface), rgba(212,175,55,0.08));
}

/* ── Historique table : forcer le texte clair sur fond dark-overrides ── */
html.dark .history-table td,
html.dark .history-table th {
  color: var(--text-muted);
}
html.dark .history-table td:last-child {
  color: var(--text) !important;
}

/* ── Client card result (résultat scan) — ccr-* hardcodés ── */
html.dark .client-card-result {
  background: var(--surface);
}

/* ── Reward row (pas de bg spécifique mais bordure à ajuster) ── */
html.dark .reward-row {
  border-bottom-color: var(--separator);
}

/* ── Hover btn-delete-reward : #FFF0EF (rose clair) → transparent rouge ── */
html.dark .btn-delete-reward:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* ── Notif phrases panel : bg #var(--bg) sombre OK, text explicite ── */
html.dark .notif-phrases {
  background: var(--surface);
  border-color: var(--separator);
}
html.dark .notif-phrase-btn {
  background: var(--card);
  color: var(--text);
  border-color: var(--separator);
}

/* ── Sheet headers inside modal (rewards list, offers grid etc) ── */
html.dark .offer-thumb { background: var(--surface); }
html.dark .offer-thumb-del { background: rgba(0,0,0,0.7); }

/* ── Card preview (theme editor) reste en light — isolation explicite ──
   Le preview est un aperçu fidèle de la carte client qui elle n'a pas
   de dark mode. On le force en "light-only" pour garantir la cohérence. */
html.dark .theme-preview,
html.dark .theme-preview * {
  /* Pas d'override : le preview utilise ses propres CSS vars (--pv-*)
     injectées dynamiquement en JS. Le seul risque = le fond du body
     preview (#F2F2F7) et le texte noir, qui restent corrects. */
}

/* ── Analytics : tuiles et listes ────────────────────── */
html.dark .analytics-tile {
  background: var(--surface);
  border-color: var(--separator);
}
html.dark .analytics-list {
  background: var(--surface);
  border-color: var(--separator);
}
html.dark .analytics-last-notif {
  background: rgba(74, 143, 255, 0.12);
}
html.dark .analytics-rank {
  background: var(--text);
  color: var(--text-inverse);
}
html.dark .analytics-list-name { color: var(--text); }
html.dark .analytics-tile-value { color: var(--text); }
html.dark .analytics-bonus-reward,
html.dark .analytics-skeleton { background: transparent; }

/* ── SMS modal : cohérence dark ─────────────────────── */
html.dark .sms-modal-card {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
html.dark .sms-pack-card {
  background: var(--surface);
  border-color: var(--separator);
}
html.dark .sms-pack-price { color: var(--text); }
html.dark .sms-modal-contact {
  background: var(--surface);
  color: var(--text);
}
html.dark .sms-modal-btn-primary {
  background: var(--text);
  color: var(--text-inverse);
}
html.dark .sms-modal-btn-secondary {
  color: var(--text);
  border-color: var(--separator);
}

/* ── Teaser "Demander un site" : cohérence dark ────── */
html.dark .website-teaser {
  background: linear-gradient(135deg, rgba(10, 132, 255, .12), rgba(10, 132, 255, .04));
  border-color: rgba(10, 132, 255, .3);
}
html.dark .website-teaser-icon { background: rgba(255, 255, 255, .08); }
html.dark .website-teaser-title { color: var(--text); }
html.dark .website-teaser-sub { color: var(--text-secondary, var(--secondary)); }

/* ── CTA bannière SMS dans form notif : lisibilité en dark ── */
html.dark .sms-cta-banner {
  background: linear-gradient(135deg, #2B2B3A, #1F1F2A);
}

/* ── Preview notification (bloc gris foncé dans form notif) ──
   L'élément #notif-preview est toujours fond foncé avec texte clair
   intentionnellement (il mime une notif push), pas d'override */