/* ===================================================================
   theme-future.css — TEMA "LUXURY AURORA 2050" per ParfumERP
   Restyling puramente estetico via override CSS.
   Non modifica struttura, disposizione o funzioni.
   Il menu resta collassabile con popup hover (gestito da Layout.tsx).
   Applicato GLOBALMENTE a tutta l'app (light + dark mode).

   NB: tutte le regole sono dentro @media screen per NON toccare la
   stampa (gestita da index.css).
   =================================================================== */

@media screen {

  /* ─── 1. VARIABILI ─────────────────────────────────────────────── */
  :root {
    --pf-primary: #db2777;
    --pf-primary-soft: #f472b6;
    --pf-violet: #8b5cf6;
    --pf-cyan: #22d3ee;
    --pf-btn-grad: linear-gradient(135deg, #ec4899, #db2777 55%, #9333ea);
    --pf-btn-grad-size: 180% 180%;
    --pf-focus-ring: 0 0 0 3px rgba(219,39,119,0.18), 0 6px 20px -6px rgba(219,39,119,0.28);
  }

  /* ─── 2. SFONDO AURORA ANIMATO ─────────────────────────────────── */

  body {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 50%, #ecfeff 100%) !important;
    background-attachment: fixed !important;
  }

  /* Macchie luce: rosa, viola, ciano */
  body::before,
  body::after,
  #root::before {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
  }
  body::before {
    width: 60vw; height: 60vw;
    left: -20vw; top: -25vh;
    background: radial-gradient(circle, rgba(236,72,153,0.22), transparent 65%);
    animation: pf-drift-a 24s ease-in-out infinite alternate;
  }
  body::after {
    width: 55vw; height: 55vw;
    right: -18vw; top: 0;
    background: radial-gradient(circle, rgba(139,92,246,0.22), transparent 65%);
    animation: pf-drift-b 29s ease-in-out infinite alternate-reverse;
  }
  #root::before {
    width: 45vw; height: 45vw;
    left: 30vw; bottom: -30vh;
    background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 62%);
    animation: pf-drift-c 34s ease-in-out infinite alternate;
  }

  @keyframes pf-drift-a {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(4vw,-3vh) scale(1.08); }
    100% { transform: translate(-2vw,4vh) scale(0.94); }
  }
  @keyframes pf-drift-b {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-4vw,3vh) scale(1.1); }
    100% { transform: translate(3vw,-2vh) scale(0.96); }
  }
  @keyframes pf-drift-c {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(-5vw,-4vh) scale(1.12); }
  }

  /* Contenitore principale e l'area di lavoro: trasparenti per
     lasciar vivere l'aurora dietro */
  #root > div,
  #root main,
  main {
    background-color: transparent !important;
  }

  /* ═══ 3. SIDEBAR — gradiente scuro, glow, icone colorate ═════════ */

  aside {
    background-image: linear-gradient(165deg, #0b1120 0%, #171333 45%, #271743 100%) !important;
    box-shadow:
      inset 0 0 80px rgba(219, 39, 119, 0.12),
      inset -10px 0 40px -20px rgba(139, 92, 246, 0.45),
      10px 0 50px -18px rgba(15, 23, 42, 0.5) !important;
  }

  /* LOGO: bianco "Parfum" + "ERP" rosa acceso (niente clip che lo rende invisibile) */
  aside h1 {
    color: #ffffff !important;
    text-shadow: 0 0 24px rgba(219, 39, 119, 0.35);
    -webkit-text-fill-color: initial;
    background: none;
  }
  aside h1 span,
  aside h1 .text-primary {
    color: #f472b6 !important;
    -webkit-text-fill-color: #f472b6 !important;
  }

  /* Sottotitolo logo più leggibile */
  aside p {
    color: rgba(226, 232, 240, 0.55) !important;
  }

  /* ICONE MENU: colorate come nel mockup (viola/rosa pastello).
     lucide-react usa stroke="currentColor": applichiamo color+stroke
     direttamente su ogni svg dell'aside con !important per vincere
     su qualsiasi classe text-* ereditata. */
  aside svg {
    color: #c4b5fd !important;
    stroke: #c4b5fd !important;
    filter: drop-shadow(0 0 5px rgba(139,92,246,0.35)) !important;
  }
  aside button:hover svg {
    color: #f0abfc !important;
    stroke: #f0abfc !important;
    filter: drop-shadow(0 0 8px rgba(219,39,119,0.5)) !important;
  }
  aside button.bg-primary svg,
  aside button.bg-primary\/20 svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)) !important;
  }
  /* Anche il colore del bottone: evita che text-slate-* erediti
     currentColor grigio all'SVG */
  aside button:not(.bg-primary):not(.bg-primary\/20) {
    color: #cbd5e1 !important;
  }

  /* TESTI MENU: molto più visibili */
  aside nav button span {
    font-weight: 500;
  }
  aside nav button:not(.bg-primary):not(.bg-primary\/20) span {
    color: #e2e8f0 !important;
  }
  aside nav button .font-bold.text-xs {
    color: #94a3b8 !important;
    font-weight: 800 !important;
  }
  aside nav .text-slate-500,
  aside nav .text-slate-400 {
    color: #cbd5e1 !important;
  }

  /* Voce attiva primaria: gradiente caldo + glow */
  aside .bg-primary {
    background-image: var(--pf-btn-grad) !important;
    box-shadow:
      0 8px 24px -6px rgba(219, 39, 119, 0.6),
      inset 0 1px 0 rgba(255,255,255,0.3) !important;
  }

  /* Voci attive secondarie: STESSO gradiente intenso delle primarie */
  aside .bg-primary\/20 {
    background-image: linear-gradient(135deg, #ec4899, #db2777 55%, #9333ea) !important;
    background-size: 180% 180% !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px -6px rgba(219, 39, 119, 0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  }
  /* Hover sulle voci attive secondarie: gradiente che si muove */
  aside .bg-primary\/20:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 10px 26px -6px rgba(219, 39, 119, 0.7) !important;
  }

  /* Popup menu collassato: vetro scuro con bordo luminoso */
  aside .bg-slate-800.rounded-xl {
    background: linear-gradient(160deg, rgba(12,16,34,0.97), rgba(30,27,75,0.96)) !important;
    border-color: rgba(219,39,119,0.35) !important;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.7), 0 0 30px -10px rgba(219,39,119,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
  /* Icone anche nel popup (colore + stroke) — già coperto da aside svg */
  aside .bg-slate-800.rounded-xl {
    --pf-popup: 1;
  }

  /* Clock sidebar: testo bianco brillante + pallino pulsante */
  aside .font-mono {
    color: #ffffff !important;
  }
  aside .text-primary.animate-pulse {
    color: #f472b6 !important;
    animation: pf-pulse-glow 2.2s ease-in-out infinite;
  }

  @keyframes pf-pulse-glow {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(219,39,119,0.7)); }
    50%      { opacity: 0.6; filter: drop-shadow(0 0 12px rgba(219,39,119,1)); }
  }

  /* ═══ 4. TOPBAR E TABS — glass rosa ══════════════════════════════ */

  .backdrop-blur-md.border-b {
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-bottom-color: rgba(219, 39, 119, 0.15) !important;
  }

  /* Tutte le tab: pill con transizione */
  main .rounded-t-xl {
    font-weight: 700 !important;
  }

  /* Tab ATTIVA: gradiente rosa-viola + glow, colore testo più forte */
  main .rounded-t-xl.text-primary {
    background-image: linear-gradient(180deg, #fdf2f8, #ffffff) !important;
    box-shadow:
      0 -8px 20px -8px rgba(219,39,119,0.45),
      inset 0 3px 0 var(--pf-primary) !important;
    color: #be185d !important;
    border-color: rgba(219,39,119,0.25) !important;
  }

  /* Tab inattive: più visibili */
  main .rounded-t-xl.bg-slate-100\/50 {
    background: rgba(255,255,255,0.55) !important;
    color: #64748b !important;
  }

  /* Barra di ricerca: glass + focus luminoso */
  input[placeholder*="Cerca"] {
    background: rgba(255,255,255,0.80) !important;
    border: 1px solid rgba(219, 39, 119, 0.15) !important;
    box-shadow: inset 0 2px 8px rgba(15,23,42,0.05), 0 4px 14px -6px rgba(219,39,119,0.12) !important;
    transition: all 0.25s ease !important;
  }
  input[placeholder*="Cerca"]:focus {
    background: #ffffff !important;
    border-color: var(--pf-primary) !important;
    box-shadow: var(--pf-focus-ring) !important;
  }

  /* Avatar: gradiente rosa-viola */
  main .rounded-full.bg-slate-200,
  main .rounded-full.bg-slate-300 {
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px -4px rgba(219,39,119,0.55) !important;
  }

  /* Dropdown / menu utente: glass bianco raffinato */
  .bg-white.shadow-2xl.border-slate-200 {
    background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(255,250,253,0.95)) !important;
    border-color: rgba(219,39,119,0.15) !important;
    box-shadow: 0 20px 55px -16px rgba(15,23,42,0.25), 0 8px 30px -12px rgba(219,39,119,0.2) !important;
  }

  /* Barra mobile bottom */
  .lg\:hidden.fixed.bottom-0.bg-white {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top-color: rgba(219,39,119,0.15) !important;
  }

  /* ═══ 5. CARD — gradienti visibili + glow ════════════════════════ */

  /* Ogni contenitore bianco main: vetro con gradiente */
  main .bg-white {
    background-image: linear-gradient(145deg, rgba(255,255,255,0.97), rgba(255,249,252,0.90)) !important;
    background-color: rgba(255,255,255,0.92) !important;
  }

  /* Ombre colorate su card con shadow-sm / shadow */
  main .shadow-sm,
  main .shadow {
    box-shadow: 0 8px 26px -10px rgba(15,23,42,0.14), 0 4px 14px -6px rgba(219,39,119,0.10) !important;
  }
  main .shadow-sm:hover,
  main .shadow:hover {
    box-shadow: 0 18px 44px -14px rgba(219,39,119,0.38), 0 8px 32px -12px rgba(139,92,246,0.25) !important;
    transform: translateY(-2px);
  }

  /* Modali: glass marcato */
  main .shadow-2xl,
  main .shadow-xl {
    box-shadow: 0 28px 70px -20px rgba(15,23,42,0.35), 0 12px 50px -18px rgba(219,39,119,0.25) !important;
  }
  main .bg-white.shadow-2xl,
  main .bg-white.shadow-xl {
    background-image: linear-gradient(160deg, rgba(255,255,255,0.99), rgba(255,248,253,0.94)) !important;
    border-color: rgba(219,39,119,0.12) !important;
  }

  /* Header modali slate: sfumatura rosa/viola */
  main .bg-slate-50.border-b,
  main .bg-slate-100.border-b {
    background: linear-gradient(90deg, rgba(219,39,119,0.07), rgba(139,92,246,0.05)) !important;
    border-bottom-color: rgba(219,39,119,0.12) !important;
  }

  /* ═══ 5b. CARD DASHBOARD — shadow-soft + hover colorato ───────── */
  /* Le card del Dashboard usano `shadow-soft` e `hover:shadow-lg`
     (ombra grigia): le sostituiamo con ombre colorate. */

  main .shadow-soft {
    box-shadow: 0 8px 26px -10px rgba(15,23,42,0.13), 0 4px 16px -6px rgba(219,39,119,0.10) !important;
    transition: box-shadow 0.3s ease, transform 0.25s ease !important;
  }
  main .rounded-2xl.shadow-soft:hover,
  main .shadow-soft:hover {
    box-shadow: 0 18px 44px -14px rgba(219,39,119,0.35), 0 8px 32px -12px rgba(139,92,246,0.22) !important;
    transform: translateY(-3px) !important;
  }

  /* ═══ 6. TABELLE — header aurora, righe hover ════════════════════ */

  main table thead th,
  main table thead {
    background-image: linear-gradient(180deg, rgba(219,39,119,0.09), rgba(139,92,246,0.05)) !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(219, 39, 119, 0.18) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
  }

  main table tbody tr:hover,
  main table thead + tbody tr:hover {
    background-image: linear-gradient(90deg, rgba(219,39,119,0.06), rgba(139,92,246,0.04), transparent) !important;
  }

  main table tbody tr:nth-child(even):not(:hover) {
    background-color: rgba(219, 39, 119, 0.018);
  }

  /* ═══ 7. BOTTONI COLORATI — gradienti in tinta + hover sfumato ══ */

  /* Ogni button colorato riceve un gradiente del suo colore primario
     e al hover il gradiente si muove (animazione living).
     Specificità > Tailwind per vincere. */

  /* --- ROSA / PRIMARY (casa) --- */
  main .bg-primary,
  main .bg-pink-500,
  main .bg-pink-600,
  main .bg-pink-700 {
    background-image: linear-gradient(135deg, #ec4899, #db2777 55%, #be185d) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(219, 39, 119, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-primary:hover,
  main .bg-pink-500:hover,
  main .bg-pink-600:hover,
  main .bg-pink-700:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(219, 39, 119, 0.7), 0 0 26px rgba(219,39,119,0.25) !important;
    transform: translateY(-1px);
  }

  /* --- VERDE / EMERALD (Conferma, Salva, Incassa, Paga FIFO) --- */
  main .bg-green-500,
  main .bg-green-600,
  main .bg-green-700,
  main .bg-emerald-500,
  main .bg-emerald-600,
  main .bg-emerald-700,
  main .bg-teal-500,
  main .bg-teal-600 {
    background-image: linear-gradient(135deg, #34d399, #10b981 55%, #059669) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-green-500:hover,
  main .bg-green-600:hover,
  main .bg-green-700:hover,
  main .bg-emerald-500:hover,
  main .bg-emerald-600:hover,
  main .bg-emerald-700:hover,
  main .bg-teal-500:hover,
  main .bg-teal-600:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(16, 185, 129, 0.7), 0 0 26px rgba(16,185,129,0.25) !important;
    transform: translateY(-1px);
  }

  /* --- BLU / AZZURRO / SKY / CIANO (Pagamento, Salda, Riconcilia) --- */
  main .bg-blue-500,
  main .bg-blue-600,
  main .bg-blue-700,
  main .bg-sky-500,
  main .bg-sky-600,
  main .bg-sky-700,
  main .bg-cyan-500,
  main .bg-cyan-600,
  main .bg-cyan-700 {
    background-image: linear-gradient(135deg, #60a5fa, #3b82f6 55%, #2563eb) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-blue-500:hover,
  main .bg-blue-600:hover,
  main .bg-blue-700:hover,
  main .bg-sky-500:hover,
  main .bg-sky-600:hover,
  main .bg-sky-700:hover,
  main .bg-cyan-500:hover,
  main .bg-cyan-600:hover,
  main .bg-cyan-700:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(59, 130, 246, 0.7), 0 0 26px rgba(59,130,246,0.25) !important;
    transform: translateY(-1px);
  }

  /* --- VIOLA / INDIGO / PURPLE (Report, Import, Stats, AI) --- */
  main .bg-violet-500,
  main .bg-violet-600,
  main .bg-violet-700,
  main .bg-indigo-500,
  main .bg-indigo-600,
  main .bg-indigo-700,
  main .bg-purple-500,
  main .bg-purple-600,
  main .bg-purple-700 {
    background-image: linear-gradient(135deg, #a78bfa, #8b5cf6 55%, #7c3aed) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-violet-500:hover,
  main .bg-violet-600:hover,
  main .bg-violet-700:hover,
  main .bg-indigo-500:hover,
  main .bg-indigo-600:hover,
  main .bg-indigo-700:hover,
  main .bg-purple-500:hover,
  main .bg-purple-600:hover,
  main .bg-purple-700:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(139, 92, 246, 0.7), 0 0 26px rgba(139,92,246,0.25) !important;
    transform: translateY(-1px);
  }

  /* --- ARANCIO / AMBRA / GIALLO (Esporta XML, SDI, Warning) --- */
  main .bg-orange-500,
  main .bg-orange-600,
  main .bg-orange-700,
  main .bg-amber-500,
  main .bg-amber-600,
  main .bg-amber-700,
  main .bg-yellow-400,
  main .bg-yellow-500 {
    background-image: linear-gradient(135deg, #fbbf24, #f59e0b 55%, #d97706) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-orange-500:hover,
  main .bg-orange-600:hover,
  main .bg-orange-700:hover,
  main .bg-amber-500:hover,
  main .bg-amber-600:hover,
  main .bg-amber-700:hover,
  main .bg-yellow-400:hover,
  main .bg-yellow-500:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(245, 158, 11, 0.7), 0 0 26px rgba(245,158,11,0.25) !important;
    transform: translateY(-1px);
  }

  /* --- ROSSO (Elimina, Reso, Pericolo) --- */
  main .bg-red-500,
  main .bg-red-600,
  main .bg-red-700,
  main .bg-rose-500,
  main .bg-rose-600 {
    background-image: linear-gradient(135deg, #f87171, #ef4444 55%, #dc2626) !important;
    background-size: 180% 180% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(239, 68, 68, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background-position 0.35s ease, box-shadow 0.35s ease, transform 0.18s ease !important;
  }
  main .bg-red-500:hover,
  main .bg-red-600:hover,
  main .bg-red-700:hover,
  main .bg-rose-500:hover,
  main .bg-rose-600:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 14px 34px -8px rgba(239, 68, 68, 0.7), 0 0 26px rgba(239,68,68,0.25) !important;
    transform: translateY(-1px);
  }

  /* ═══ 7b. QUICK ACTION — tridimensionali, globalmente ═══════════ */

  /* Le quick action del Centro di Controllo / POS sono grandi card
     colorate con icona grande e testo: diamo profondità 3D vera. */
  main button.rounded-xl.border,
  main .p-6.rounded-xl,
  main input[type="button"].rounded-xl {
    position: relative;
    box-shadow: 0 10px 0 -2px rgba(0,0,0,0.20), 0 18px 30px -12px rgba(15,23,42,0.35) !important;
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    transform-origin: center bottom;
  }

  /* Hover: si solleva con bordo luminoso e gradiente più intenso */
  main button.rounded-xl.border:hover,
  main .p-6.rounded-xl:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 0 -3px rgba(0,0,0,0.18), 0 26px 46px -14px rgba(219,39,119,0.4), 0 0 30px -8px rgba(139,92,246,0.35) !important;
    filter: brightness(1.08) saturate(1.05);
  }

  /* Active: pressione fisica verso il basso (effetto tasto) */
  main button.rounded-xl.border:active,
  main .p-6.rounded-xl:active {
    transform: translateY(4px) scale(0.99);
    box-shadow: 0 3px 0 -1px rgba(0,0,0,0.25), 0 8px 16px -8px rgba(15,23,42,0.3) !important;
  }

  /* Pulsanti ghost/secondari: bordo rosa elegante */
  main .border-slate-300.text-slate-700,
  main .bg-white.border.border-slate-300 {
    border-color: rgba(219, 39, 119, 0.22) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.80)) !important;
  }
  main .border-slate-300.text-slate-700:hover,
  main .bg-white.border.border-slate-300:hover {
    border-color: rgba(219, 39, 119, 0.50) !important;
    box-shadow: 0 8px 18px -8px rgba(219,39,119,0.3);
  }

  /* ═══ 8. INPUT — focus luminoso ══════════════════════════════════ */

  main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  main select,
  main textarea {
    background-color: rgba(255,255,255,0.85) !important;
    border-color: rgba(148, 163, 184, 0.40) !important;
    transition: all 0.25s ease !important;
  }
  main input:not([type="checkbox"]):not([type="radio"]):focus,
  main select:focus,
  main textarea:focus {
    border-color: var(--pf-primary) !important;
    box-shadow: var(--pf-focus-ring) !important;
    background-color: #ffffff !important;
    outline: none;
  }

  /* ═══ 9. SCROLLBAR ═══════════════════════════════════════════════ */

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(219,39,119,0.35), rgba(139,92,246,0.35));
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(219,39,119,0.6), rgba(139,92,246,0.6));
  }

  /* ═══ 10. BOTTONE TEMA VISIBILE (iniettato da dark-mode.js) ══════ */

  #dark-mode-toggle {
    background: rgba(219, 39, 119, 0.08) !important;
    border: 1px solid rgba(219, 39, 119, 0.25) !important;
    border-radius: 10px !important;
    color: #be185d !important;
    min-width: 40px !important;
    min-height: 34px !important;
  }
  #dark-mode-toggle:hover {
    background: rgba(219, 39, 119, 0.18) !important;
    box-shadow: 0 0 0 3px rgba(219,39,119,0.15);
    transform: scale(1.05);
  }
  #dark-mode-toggle span {
    filter: drop-shadow(0 0 4px rgba(219,39,119,0.5));
  }

  /* ═══ 11. DARK MODE — aurora notturna ════════════════════════════ */

  html body.dark-mode {
    background: linear-gradient(135deg, #070b15 0%, #0f0a1e 50%, #081018 100%) !important;
    background-attachment: fixed !important;
  }
  html body.dark-mode::before {
    background: radial-gradient(circle, rgba(236,72,153,0.28), transparent 65%);
  }
  html body.dark-mode::after {
    background: radial-gradient(circle, rgba(139,92,246,0.30), transparent 65%);
  }
  html body.dark-mode #root::before {
    background: radial-gradient(circle, rgba(34,211,238,0.20), transparent 62%);
  }

  /* Main trasparente dark */
  html body.dark-mode #root > div,
  html body.dark-mode main {
    background-color: transparent !important;
  }

  /* Card dark: vetro viola scuro */
  html body.dark-mode main .bg-white {
    background-image: linear-gradient(160deg, rgba(30,41,59,0.94), rgba(47,35,84,0.92)) !important;
    background-color: rgba(30,41,59,0.90) !important;
    border-color: rgba(219, 39, 119, 0.20) !important;
  }

  html body.dark-mode main .shadow-sm,
  html body.dark-mode main .shadow {
    box-shadow: 0 12px 34px -12px rgba(0,0,0,0.6), 0 0 24px -12px rgba(219,39,119,0.30) !important;
  }

  html body.dark-mode main .bg-white.shadow-2xl,
  html body.dark-mode main .bg-white.shadow-xl {
    background-image: linear-gradient(160deg, rgba(30,41,59,0.99), rgba(47,35,84,0.97)) !important;
    border-color: rgba(219, 39, 119, 0.25) !important;
    box-shadow: 0 28px 70px -20px rgba(0,0,0,0.75), 0 12px 50px -18px rgba(219,39,119,0.35) !important;
  }

  /* Header modali dark */
  html body.dark-mode main .bg-slate-50.border-b,
  html body.dark-mode main .bg-slate-100.border-b {
    background: linear-gradient(90deg, rgba(219,39,119,0.14), rgba(139,92,246,0.10)) !important;
    border-bottom-color: rgba(219,39,119,0.20) !important;
  }

  /* Tabelle dark */
  html body.dark-mode main table thead th,
  html body.dark-mode main table thead {
    background-image: linear-gradient(180deg, rgba(219,39,119,0.16), rgba(139,92,246,0.11)) !important;
    color: #e2e8f0 !important;
    border-bottom-color: rgba(219, 39, 119, 0.35) !important;
  }
  html body.dark-mode main table tbody tr:hover {
    background-image: linear-gradient(90deg, rgba(219,39,119,0.14), rgba(139,92,246,0.10), transparent) !important;
  }

  /* Topbar dark */
  html body.dark-mode .backdrop-blur-md.border-b {
    background: rgba(15,23,42,0.65) !important;
    border-bottom-color: rgba(219, 39, 119, 0.20) !important;
  }

  /* Tab attiva dark */
  html body.dark-mode main .rounded-t-xl.text-primary {
    background-image: linear-gradient(180deg, rgba(40,30,70,0.95), rgba(30,41,59,0.92)) !important;
    color: #f472b6 !important;
    box-shadow: 0 -8px 20px -8px rgba(219,39,119,0.5), inset 0 3px 0 var(--pf-primary-soft) !important;
    border-color: rgba(219,39,119,0.30) !important;
  }
  html body.dark-mode main .rounded-t-xl.bg-slate-100\/50 {
    background: rgba(30,41,59,0.60) !important;
    color: #94a3b8 !important;
  }

  /* Ricerca dark */
  html body.dark-mode input[placeholder*="Cerca"] {
    background: rgba(15,23,42,0.60) !important;
    border-color: rgba(219, 39, 119, 0.25) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important;
  }
  html body.dark-mode input[placeholder*="Cerca"]:focus {
    background: rgba(15,23,42,0.95) !important;
    border-color: var(--pf-primary-soft) !important;
    box-shadow: 0 0 0 3px rgba(244,114,182,0.22), 0 8px 26px -8px rgba(219,39,119,0.3) !important;
  }

  /* Input dark */
  html body.dark-mode main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  html body.dark-mode main select,
  html body.dark-mode main textarea {
    background-color: rgba(15,23,42,0.60) !important;
    border-color: rgba(148,163,184,0.28) !important;
    color: #e2e8f0 !important;
  }
  html body.dark-mode main input:not([type="checkbox"]):not([type="radio"]):focus,
  html body.dark-mode main select:focus,
  html body.dark-mode main textarea:focus {
    background-color: rgba(15,23,42,0.95) !important;
    border-color: var(--pf-primary-soft) !important;
    box-shadow: 0 0 0 3px rgba(244,114,182,0.20), 0 8px 26px -10px rgba(219,39,119,0.3) !important;
  }

  /* Ghost buttons dark */
  html body.dark-mode main .border-slate-300.text-slate-700,
  html body.dark-mode main .bg-white.border.border-slate-300 {
    background-image: linear-gradient(145deg, rgba(30,41,59,0.90), rgba(30,27,75,0.85)) !important;
    border-color: rgba(219, 39, 119, 0.25) !important;
    color: #cbd5e1 !important;
  }

  /* Badge grigi dark */
  html body.dark-mode main .bg-slate-100,
  html body.dark-mode main .bg-slate-200 {
    background-color: rgba(30,41,59,0.80) !important;
  }

  /* Dropdown dark */
  html body.dark-mode .bg-white.shadow-2xl.border-slate-200 {
    background: linear-gradient(160deg, rgba(15,23,42,0.99), rgba(30,27,75,0.97)) !important;
    border-color: rgba(219, 39, 119, 0.25) !important;
    box-shadow: 0 22px 55px -16px rgba(0,0,0,0.75), 0 8px 34px -14px rgba(219,39,119,0.35) !important;
  }

  /* Mobile bottom dark */
  html body.dark-mode .lg\:hidden.fixed.bottom-0.bg-white {
    background: rgba(15,23,42,0.85) !important;
    border-top-color: rgba(219, 39, 119, 0.20) !important;
  }

  /* Toggle tema dark */
  html body.dark-mode #dark-mode-toggle {
    background: rgba(219, 39, 119, 0.15) !important;
    border-color: rgba(219, 39, 119, 0.35) !important;
    color: #f472b6 !important;
  }

  /* ═══ 12. DARK MODE — HOVER COERENTI COL LIGHT ══════════════════ */

  /* Card con hover luminoso rosa (stesso effetto del light) */
  html body.dark-mode main .shadow-sm:hover,
  html body.dark-mode main .shadow:hover {
    box-shadow: 0 16px 40px -12px rgba(219,39,119,0.38), 0 8px 30px -8px rgba(139,92,246,0.22) !important;
    transform: translateY(-2px);
  }
  html body.dark-mode main .shadow-soft {
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5), 0 0 20px -10px rgba(219,39,119,0.25) !important;
  }
  html body.dark-mode main .rounded-2xl.shadow-soft:hover,
  html body.dark-mode main .shadow-soft:hover {
    box-shadow: 0 20px 48px -14px rgba(219,39,119,0.45), 0 10px 34px -8px rgba(139,92,246,0.28) !important;
    transform: translateY(-3px) !important;
  }

  /* Quick action 3D anche in dark: stessi sollevamento e pressione */
  html body.dark-mode main button.rounded-xl.border,
  html body.dark-mode main .p-6.rounded-xl {
    box-shadow: 0 10px 0 -2px rgba(0,0,0,0.45), 0 18px 30px -12px rgba(0,0,0,0.6) !important;
  }
  html body.dark-mode main button.rounded-xl.border:hover,
  html body.dark-mode main .p-6.rounded-xl:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 0 -3px rgba(0,0,0,0.40), 0 26px 46px -14px rgba(219,39,119,0.45), 0 0 30px -8px rgba(139,92,246,0.42) !important;
    filter: brightness(1.15) saturate(1.05);
  }
  html body.dark-mode main button.rounded-xl.border:active,
  html body.dark-mode main .p-6.rounded-xl:active {
    transform: translateY(4px) scale(0.99);
    box-shadow: 0 3px 0 -1px rgba(0,0,0,0.5), 0 8px 16px -8px rgba(0,0,0,0.5) !important;
  }

  /* Bottoni colorati: hover più vivido anche in dark */
  html body.dark-mode main .bg-primary:hover,
  html body.dark-mode main .bg-pink-500:hover,
  html body.dark-mode main .bg-pink-600:hover,
  html body.dark-mode main .bg-pink-700:hover,
  html body.dark-mode main .bg-green-500:hover,
  html body.dark-mode main .bg-green-600:hover,
  html body.dark-mode main .bg-green-700:hover,
  html body.dark-mode main .bg-emerald-500:hover,
  html body.dark-mode main .bg-emerald-600:hover,
  html body.dark-mode main .bg-emerald-700:hover,
  html body.dark-mode main .bg-blue-500:hover,
  html body.dark-mode main .bg-blue-600:hover,
  html body.dark-mode main .bg-blue-700:hover,
  html body.dark-mode main .bg-sky-500:hover,
  html body.dark-mode main .bg-sky-600:hover,
  html body.dark-mode main .bg-indigo-500:hover,
  html body.dark-mode main .bg-indigo-600:hover,
  html body.dark-mode main .bg-indigo-700:hover,
  html body.dark-mode main .bg-violet-500:hover,
  html body.dark-mode main .bg-violet-600:hover,
  html body.dark-mode main .bg-purple-500:hover,
  html body.dark-mode main .bg-purple-600:hover,
  html body.dark-mode main .bg-purple-700:hover,
  html body.dark-mode main .bg-orange-500:hover,
  html body.dark-mode main .bg-orange-600:hover,
  html body.dark-mode main .bg-amber-500:hover,
  html body.dark-mode main .bg-amber-600:hover,
  html body.dark-mode main .bg-red-500:hover,
  html body.dark-mode main .bg-red-600:hover,
  html body.dark-mode main .bg-red-700:hover {
    background-position: 100% 50% !important;
    transform: translateY(-1px);
    filter: brightness(1.12);
  }

  /* Tabelle: hover righe più luminoso in dark */
  html body.dark-mode main table tbody tr:hover {
    background-image: linear-gradient(90deg, rgba(219,39,119,0.18), rgba(139,92,246,0.14), transparent) !important;
  }

  /* Tab hover in dark */
  html body.dark-mode main .rounded-t-xl:not(.text-primary):hover {
    background: rgba(30,41,59,0.8) !important;
    color: #f1f5f9 !important;
  }

  
  
  /* ═══ 13. SCADENZIARIO — card GIALLE (bg-yellow-100) in dark ══════ */
  /* dark-mode.css scurisce red/green/orange-100 ma NON yellow-100.
     Le card gialle restano chiare mentre i testi vengono schiariti
     -> illeggibili. Scuriamo SOLO le card gialle e forziamo i testi
     interni a essere CHIARI (come fa dark-mode.css per le altre). */

  html body.dark-mode .bg-yellow-100 {
    background-color: rgba(113, 63, 18, 0.45) !important;
    backdrop-filter: blur(6px);
  }

  /* Badge stato yellow: testo chiaro su sfondo scuro (come le altre) */
  html body.dark-mode .bg-yellow-100.text-yellow-700,
  html body.dark-mode .bg-yellow-100.text-yellow-800 {
    color: #fde047 !important;
  }

  /* Testi interni (nome partner, descrizione, importo, giorni) -> chiari */
  html body.dark-mode .bg-yellow-100 .text-slate-800,
  html body.dark-mode .bg-yellow-100 .text-slate-700,
  html body.dark-mode .bg-yellow-100 .text-slate-600 {
    color: #e2e8f0 !important;
  }

  /* Border gialli visibili */
  html body.dark-mode .border-yellow-300 {
    border-color: rgba(250, 204, 21, 0.5) !important;
  }
  html body.dark-mode .border-yellow-500 {
    border-color: #eab308 !important;
  }

  /* NOTA: NON tocchiamo bg-red-100/bg-green-100/bg-orange-100:
     dark-mode.css li gestisce già correttamente in dark. */

  /* Vista alternativa a RIGHE per Marketing (Promozioni/Voucher/GiftCard) */
  .pf-mkt-list {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .pf-mkt-list > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ═══ 14. TOAST FIX — posizione e animazione robusta ═══════════ */

  @keyframes pf-toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .pf-toast-card {
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25), 0 10px 30px -12px rgba(219, 39, 119, 0.15) !important;
  }

  html body.dark-mode .pf-toast-card {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.98), rgba(47, 35, 84, 0.97)) !important;
    border-color: rgba(219, 39, 119, 0.25) !important;
  }

  html body.dark-mode .pf-toast-card p {
    color: #e2e8f0 !important;
  }

  html body.dark-mode .pf-toast-card .text-slate-800 {
    color: #f1f5f9 !important;
  }

  html body.dark-mode .pf-toast-card .text-slate-600 {
    color: #94a3b8 !important;
  }

  html body.dark-mode .pf-toast-card button {
    color: #64748b !important;
  }

  html body.dark-mode .pf-toast-card button:hover {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* ═══ 15. POS — TAB SESSIONI leggibili ═════════════════════════ */

  /* Tab sessioni POS (Vendita 1, Vendita 2...): testo inattivo scuro leggibile */
  main .flex.bg-slate-50.border-b > button:not(.bg-red-50) {
    color: #334155 !important;
    font-weight: 700 !important;
  }

  main .flex.bg-slate-50.border-b > button:not(.bg-red-50):hover {
    color: #0f172a !important;
    background: rgba(244, 114, 182, 0.08) !important;
  }

  /* Tab sessione attiva POS */
  main .flex.bg-slate-50.border-b > button.bg-red-50 {
    background: linear-gradient(135deg, #fecdd3, #fda4af) !important;
    color: #9f1239 !important;
    border-bottom: 2px solid #e11d48 !important;
  }

  /* Dark mode POS session tabs */
  html body.dark-mode main .flex.bg-slate-50.border-b {
    background: rgba(15, 23, 42, 0.40) !important;
    border-bottom-color: rgba(219, 39, 119, 0.20) !important;
  }

  html body.dark-mode main .flex.bg-slate-50.border-b > button:not(.bg-red-50) {
    color: #cbd5e1 !important;
  }

  html body.dark-mode main .flex.bg-slate-50.border-b > button:not(.bg-red-50):hover {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  html body.dark-mode main .flex.bg-slate-50.border-b > button.bg-red-50 {
    background: rgba(219, 39, 119, 0.25) !important;
    color: #fda4af !important;
    border-bottom-color: #fb7185 !important;
  }
}