/* ==========================================================================
   themes.css — overrides de thème partagés (v5 + wizard + app)
   --------------------------------------------------------------------------
   Sélecteurs html[data-theme="…"] (spécificité 0,1,1 > :root) → override
   garanti quel que soit l'ordre de chargement.
   - Landing/wizard : override la famille --green (leur :root vert = "verde",
     donc PAS de bloc verde côté landing).
   - App (/app, UI sombre) : son :root est rouge/slate legacy → les 3 thèmes
     (verde/terracotta/indaco) ont un bloc app explicite (reskin complet).
   Un même bloc porte les tokens landing ET app : ceux non utilisés par une
   surface sont inertes (la landing n'a pas --accent marque, l'app n'a pas
   --green). Couleurs métier (zones, détection) ne sont jamais ici.
   Couleurs PDF : voir landing/theme.js.
   ========================================================================== */

/* ---------- VERDE (= actuel) : seul l'app a besoin d'un override (green-dark) ---------- */
html[data-theme="verde"] {
  /* App — palette sombre verte (WCAG AA) */
  --sidebar-bg: #0e1a14;
  --sidebar-bg-alt: #16261d;
  --sidebar-bg-rgb: 14, 26, 20;
  --accent: #1fb866;
  --accent-hover: #36d07e;
  --accent-rgb: 31, 184, 102;
  --accent-secondary: #f6c34a;
  --text-primary: #e6f0ea;
  --text-secondary: #a8c0b4;
  --text-muted: #7e988b;
  --input-bg: #0e1a14;
  --input-focus: #1fb866;
  --glass-bg: rgba(14, 26, 20, 0.78);
}

/* ---------- TERRACOTTA SENESE ---------- */
html[data-theme="terracotta-senese"] {
  /* Landing / wizard — famille marque */
  --green: #c44e26;
  --green-dark: #a8431f;
  --green-soft: #f9e9e1;
  --green-glow: #f6a980;
  --green-mid: #d9632f;
  --green-rgb: 196, 78, 38;
  --registro: #87432b;
  --registro-rgb: 135, 67, 43;
  /* App — palette sombre terracotta (WCAG AA) */
  --sidebar-bg: #1a1310;
  --sidebar-bg-alt: #271a14;
  --sidebar-bg-rgb: 26, 19, 16;
  --accent: #e0673c;
  --accent-hover: #f08a5d;
  --accent-rgb: 224, 103, 60;
  --accent-secondary: #9bb35e;
  --text-primary: #f2e8e2;
  --text-secondary: #c8b6aa;
  --text-muted: #9c8a7e;
  --input-bg: #1a1310;
  --input-focus: #e0673c;
  --glass-bg: rgba(26, 19, 16, 0.78);
}

/* ---------- INDACO FIORENTINO ---------- */
html[data-theme="indaco-fiorentino"] {
  /* Landing / wizard — famille marque */
  --green: #5b4bd6;
  --green-dark: #4a3d96;
  --green-soft: #ebe9fb;
  --green-glow: #a99cf5;
  --green-mid: #6d5ee0;
  --green-rgb: 91, 75, 214;
  --registro: #1a134e;
  --registro-rgb: 26, 19, 78;
  /* App — palette sombre indaco (WCAG AA) */
  --sidebar-bg: #131127;
  --sidebar-bg-alt: #1e1a3a;
  --sidebar-bg-rgb: 19, 17, 39;
  --accent: #8170ee;
  --accent-hover: #9a8bf5;
  --accent-rgb: 129, 112, 238;
  --accent-secondary: #e07a4f;
  --text-primary: #eae8f8;
  --text-secondary: #b4afd4;
  --text-muted: #8782a4;
  --input-bg: #131127;
  --input-focus: #8170ee;
  --glass-bg: rgba(19, 17, 39, 0.78);
}

/* ==========================================================================
   Sélecteur de thème (monté par theme.js, UNIQUEMENT sur /v5)
   Stylé pour la landing claire ; l'état actif suit la marque (--green).
   ========================================================================== */
.theme-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--green, #12924b), var(--green-dark, #087338));
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(var(--green-rgb, 18, 146, 75), 0.42);
  transition: transform 0.2s ease;
}
.theme-fab:hover { transform: scale(1.06) rotate(8deg); }

.theme-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 1200;
  width: 312px;
  max-width: calc(100vw - 32px);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dfe8e4);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(7, 27, 47, 0.26);
  padding: 16px;
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--font-body, "Inter", sans-serif);
}
.theme-panel.hidden {
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  pointer-events: none;
}
.theme-panel-head {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #071b2f);
}
.theme-panel-sub {
  color: var(--muted, #637386);
  font-size: 12px;
  margin: 2px 0 12px;
  line-height: 1.45;
}
.theme-panel-list { display: flex; flex-direction: column; gap: 8px; }
.theme-sw {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-soft, #f5faf7);
  border: 1.5px solid var(--line, #dfe8e4);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.theme-sw:hover { transform: translateX(2px); }
.theme-sw.active {
  border-color: var(--green, #12924b);
  background: var(--green-soft, #e7f7ed);
}
.theme-sw-dots { display: flex; flex-shrink: 0; }
.theme-sw-dots i {
  width: 16px;
  height: 26px;
  border-radius: 5px;
  margin-left: -5px;
  border: 2px solid var(--surface, #fff);
  display: block;
}
.theme-sw-dots i:first-child { margin-left: 0; }
.theme-sw-name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #071b2f);
}
.theme-sw-check { color: var(--green, #12924b); font-weight: 900; opacity: 0; }
.theme-sw.active .theme-sw-check { opacity: 1; }