/* v2-theme-colors.css — Sistema multi-tema colore brand */

/* Default = Blu Inter */
:root {
  --brand:        #1e40af;
  --brand-light:  #3b82f6;
  --brand-soft:   #93c5fd;
  --brand-pale:   #dbeafe;
  --brand-dark:   #1e3a8a;
  --brand-glow:   rgba(30, 64, 175, 0.40);
  --brand-bg:     rgba(30, 64, 175, 0.10);
}

html[data-theme="viola"] {
  --brand:       #7c3aed;
  --brand-light: #8b5cf6;
  --brand-soft:  #c4b5fd;
  --brand-pale:  #ede9fe;
  --brand-dark:  #5b21b6;
  --brand-glow:  rgba(124, 58, 237, 0.40);
  --brand-bg:    rgba(124, 58, 237, 0.10);
}

html[data-theme="rosso"] {
  --brand:       #dc2626;
  --brand-light: #ef4444;
  --brand-soft:  #fca5a5;
  --brand-pale:  #fee2e2;
  --brand-dark:  #991b1b;
  --brand-glow:  rgba(220, 38, 38, 0.40);
  --brand-bg:    rgba(220, 38, 38, 0.10);
}

html[data-theme="emerald"] {
  --brand:       #059669;
  --brand-light: #10b981;
  --brand-soft:  #6ee7b7;
  --brand-pale:  #d1fae5;
  --brand-dark:  #047857;
  --brand-glow:  rgba(5, 150, 105, 0.40);
  --brand-bg:    rgba(5, 150, 105, 0.10);
}

html[data-theme="ambra"] {
  --brand:       #d97706;
  --brand-light: #f59e0b;
  --brand-soft:  #fcd34d;
  --brand-pale:  #fef3c7;
  --brand-dark:  #b45309;
  --brand-glow:  rgba(217, 119, 6, 0.40);
  --brand-bg:    rgba(217, 119, 6, 0.10);
}

html[data-theme="rosa"] {
  --brand:       #db2777;
  --brand-light: #ec4899;
  --brand-soft:  #f9a8d4;
  --brand-pale:  #fce7f3;
  --brand-dark:  #9d174d;
  --brand-glow:  rgba(219, 39, 119, 0.40);
  --brand-bg:    rgba(219, 39, 119, 0.10);
}

html[data-theme="navy"] {
  --brand:       #0f172a;
  --brand-light: #1e293b;
  --brand-soft:  #94a3b8;
  --brand-pale:  #e2e8f0;
  --brand-dark:  #020617;
  --brand-glow:  rgba(15, 23, 42, 0.40);
  --brand-bg:    rgba(15, 23, 42, 0.10);
}

html[data-theme="indaco"] {
  --brand:       #4f46e5;
  --brand-light: #6366f1;
  --brand-soft:  #a5b4fc;
  --brand-pale:  #e0e7ff;
  --brand-dark:  #3730a3;
  --brand-glow:  rgba(79, 70, 229, 0.40);
  --brand-bg:    rgba(79, 70, 229, 0.10);
}

/* ─── OVERRIDE CLASSI TAILWIND blue-* e violet-* ──────────────────────
   Mappa entrambe le palette al brand corrente, così il refactor non
   richiede toccare i file HTML (che possono usare blue-* o violet-*). */
.text-blue-300, .text-violet-300 { color: var(--brand-soft) !important; }
.text-blue-400, .text-violet-400 { color: var(--brand-light) !important; }
.text-blue-500, .text-violet-500 { color: var(--brand) !important; }
.text-blue-600, .text-violet-600 { color: var(--brand) !important; }
.text-blue-700, .text-violet-700 { color: var(--brand-dark) !important; }

.bg-blue-300, .bg-violet-300 { background-color: var(--brand-soft) !important; }
.bg-blue-400, .bg-violet-400 { background-color: var(--brand-light) !important; }
.bg-blue-500, .bg-violet-500 { background-color: var(--brand) !important; }
.bg-blue-600, .bg-violet-600 { background-color: var(--brand-dark) !important; }
.bg-blue-700, .bg-violet-700 { background-color: var(--brand-dark) !important; }

.border-blue-300, .border-violet-300 { border-color: var(--brand-soft) !important; }
.border-blue-400, .border-violet-400 { border-color: var(--brand-light) !important; }
.border-blue-500, .border-violet-500 { border-color: var(--brand) !important; }

/* Tailwind opacity variants - es. bg-blue-500/15 */
.bg-blue-500\/10,  .bg-violet-500\/10  { background-color: var(--brand-bg) !important; }
.bg-blue-500\/15,  .bg-violet-500\/15  { background-color: rgba(0,0,0,0.001); background-color: color-mix(in srgb, var(--brand) 15%, transparent) !important; }
.bg-blue-500\/20,  .bg-violet-500\/20  { background-color: color-mix(in srgb, var(--brand) 20%, transparent) !important; }
.bg-blue-500\/30,  .bg-violet-500\/30  { background-color: color-mix(in srgb, var(--brand) 30%, transparent) !important; }
.bg-blue-500\/40,  .bg-violet-500\/40  { background-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; }
.bg-blue-500\/50,  .bg-violet-500\/50  { background-color: color-mix(in srgb, var(--brand) 50%, transparent) !important; }

.text-blue-300\/80, .text-violet-300\/80 { color: color-mix(in srgb, var(--brand-soft) 80%, transparent) !important; }
.text-blue-400\/80, .text-violet-400\/80 { color: color-mix(in srgb, var(--brand-light) 80%, transparent) !important; }
.border-blue-500\/30, .border-violet-500\/30 { border-color: color-mix(in srgb, var(--brand) 30%, transparent) !important; }
.border-blue-500\/40, .border-violet-500\/40 { border-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; }
.ring-blue-500\/40, .ring-violet-500\/40 { --tw-ring-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; }

/* Hover variants */
.hover\:text-blue-300:hover, .hover\:text-violet-300:hover { color: var(--brand-soft) !important; }
.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover { background-color: var(--brand) !important; }
.hover\:border-blue-500:hover, .hover\:border-violet-500:hover { border-color: var(--brand) !important; }
.hover\:bg-blue-500\/10:hover, .hover\:bg-violet-500\/10:hover { background-color: var(--brand-bg) !important; }
.hover\:bg-blue-500\/20:hover, .hover\:bg-violet-500\/20:hover { background-color: color-mix(in srgb, var(--brand) 20%, transparent) !important; }

/* Group hover */
.group:hover .group-hover\:text-blue-200, .group:hover .group-hover\:text-violet-200 { color: var(--brand-pale) !important; }
.group:hover .group-hover\:text-blue-300, .group:hover .group-hover\:text-violet-300 { color: var(--brand-soft) !important; }

/* From/Via/To gradients (Tailwind) */
.from-blue-500, .from-violet-500 { --tw-gradient-from: var(--brand) var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-blue-500, .to-violet-500 { --tw-gradient-to: var(--brand) var(--tw-gradient-to-position); }
.to-blue-600, .to-violet-600 { --tw-gradient-to: var(--brand-dark) var(--tw-gradient-to-position); }

/* ─── OVERRIDE MESH-BG, GRADIENT, GLOW ──────────────────────────
   I file HTML hardcoded usano rgba(167,139,250,X) per mesh-bg.
   Sostituiamo con var(--brand) tramite color-mix per adattarsi al tema. */

.mesh-bg {
  background:
    radial-gradient(ellipse 85% 65% at 50% 58%,
      color-mix(in srgb, var(--brand) 38%, transparent) 0%,
      color-mix(in srgb, var(--brand) 12%, transparent) 50%,
      transparent 72%),
    #000
    !important;
}

/* glow / box-shadow viola → brand */
[style*="rgba(167, 139, 250"],
[style*="rgba(167,139,250"] {
  /* impossibile sostituire inline style via CSS, ma manteniamo cssVar fallback */
}

/* Override .glass hover che usava rgba(139, 92, 246, X) o rgba(167, 139, 250, X) */
.glass:hover, .glass-static:hover {
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.3),
              0 0 30px -10px var(--brand-glow) !important;
}

/* Sidebar nav-icon active glow */
.nav-icon.active {
  background: color-mix(in srgb, var(--brand) 20%, transparent) !important;
  color: var(--brand-light) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}
.nav-icon:hover {
  background: color-mix(in srgb, var(--brand) 15%, transparent) !important;
  color: var(--brand-soft) !important;
}

/* Logo container glow (radial gradient) */
aside > a:first-child[title*="Dashboard"] {
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--brand) 30%, transparent),
    rgba(16,185,129,0.10) 60%,
    rgba(30,15,55,0.55) 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset,
              0 0 24px color-mix(in srgb, var(--brand) 45%, transparent) !important;
}

/* CTA "Cerca tutto" pill in topbar (gradient hardcoded) */
[style*="linear-gradient(135deg,#a78bfa"],
[style*="linear-gradient(135deg, #a78bfa"],
[style*="linear-gradient(135deg,#8b5cf6"],
[style*="linear-gradient(135deg, #8b5cf6"] {
  background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
}

/* Header gradient generici */
.gradient-brand,
.bg-gradient-violet {
  background: linear-gradient(135deg, var(--brand-light), var(--brand-dark)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX FORZATO — Mesh-bg solo brand, override gradient inline,
   sidebar active stato, avatar utente
   ═══════════════════════════════════════════════════════════════ */

/* Mesh-bg: Gemini-style — sfondo nero + singolo glow radiale brand centrato */
html .mesh-bg {
  background:
    radial-gradient(ellipse 85% 65% at 50% 58%,
      color-mix(in srgb, var(--brand) 38%, transparent) 0%,
      color-mix(in srgb, var(--brand) 12%, transparent) 50%,
      transparent 72%),
    #000
    !important;
}

/* Gradient inline su BOTTONI */
button[style*="linear-gradient"][style*="#a78bfa"],
button[style*="linear-gradient"][style*="#8b5cf6"],
button[style*="linear-gradient"][style*="#7c3aed"],
a[style*="linear-gradient"][style*="#a78bfa"],
a[style*="linear-gradient"][style*="#8b5cf6"],
a[style*="linear-gradient"][style*="#7c3aed"],
div[style*="linear-gradient"][style*="#a78bfa"],
div[style*="linear-gradient"][style*="#8b5cf6"] {
  background-image: linear-gradient(135deg, var(--brand-light), var(--brand-dark)) !important;
  background-color: transparent !important;
}

/* Avatar utente RR e simili */
[class*="avatar"][style*="#a78bfa"],
[class*="avatar"][style*="#8b5cf6"] {
  background-image: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
}

/* Card "CITAZIONE DEL GIORNO" e simili con bordo viola */
[style*="border-left:4px solid #a78bfa"],
[style*="border-left: 4px solid #a78bfa"],
[style*="border-left:4px solid #8b5cf6"],
[style*="border-left: 4px solid #8b5cf6"] {
  border-left-color: var(--brand) !important;
}

/* box-shadow viola → brand */
[style*="box-shadow"][style*="rgba(167"],
[style*="box-shadow"][style*="rgba(139, 92, 246"],
[style*="box-shadow"][style*="rgba(139,92,246"] {
  box-shadow: 0 0 14px var(--brand-glow) !important;
}

/* Sidebar logo container */
aside > a[title*="Dashboard"]:first-child,
aside > a[title*="Torna"]:first-child {
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--brand-light) 40%, transparent) 0%,
    color-mix(in srgb, var(--brand) 25%, transparent) 50%,
    rgba(30,15,55,0.6) 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset,
              0 0 26px color-mix(in srgb, var(--brand) 55%, transparent) !important;
}

/* Banner PROSSIMI COMPLEANNI con bg viola hardcoded */
.glass[style*="rgba(139, 92, 246"],
.glass[style*="rgba(167, 139, 250"],
.glass-static[style*="rgba(139, 92, 246"],
.glass-static[style*="rgba(167, 139, 250"] {
  background-color: color-mix(in srgb, var(--brand-dark) 12%, transparent) !important;
}

/* Pillole con bg violet-800/900 hex */
[style*="background:#5b21b6"],
[style*="background: #5b21b6"],
[style*="background:#4c1d95"],
[style*="background: #4c1d95"] {
  background: var(--brand-dark) !important;
}

/* ─── BRONZO (richiamo alla vecchia versione del gestionale) */
html[data-theme="bronzo"] {
  --brand:       #b8763e;
  --brand-light: #d4924a;
  --brand-soft:  #e8b88c;
  --brand-pale:  #f4e3d1;
  --brand-dark:  #8b5a2b;
  --brand-glow:  rgba(184, 118, 62, 0.40);
  --brand-bg:    rgba(184, 118, 62, 0.10);
}