/* ═══════════════════════════════════════════════════════════════════
   Alice 3D — theme.css · Liquid glass
   Tema visivo condiviso. Va caricato PER ULTIMO nell'<head> di ogni
   pagina (dopo lo <style> interno) così vince sulle regole locali.

   Regola d'oro: qui dentro SOLO aspetto (colori, vetro, ombre, raggi).
   Mai layout, dimensioni di griglia o posizionamenti: quelli restano
   nelle pagine, così non si rompe nulla.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fondale: nero profondo con pozza di luce e lavaggi di colore
      (blu alto-sx, arancio basso-dx — stile login) ── */
html, body {
  background:
    radial-gradient(circle at 0% 0%, rgba(10,132,255,.10), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(232,102,42,.08), transparent 45%),
    radial-gradient(120% 75% at 50% 20%, #16181f 0%, #0b0c10 44%, #060607 100%),
    #060607 !important;
  background-attachment: fixed !important;
}

/* ── Lastre di vetro: superfici principali ──
   Profondità + spigolo superiore che cattura la luce (l'effetto "vetro
   spesso"). Niente animazioni: i refresh dati le riattivavano causando
   flickering. */
.header, .card, .sc, .c, .cd, .about,
.done-card, .project-group, .print-card, .printer-card, .trash-card,
.product, .cat, .search-bar, .mc-wrap {
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important;
  border: none !important;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.7),
    0 12px 30px -12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 40px rgba(255,255,255,.05) !important;
  animation: none !important;
}

/* Tile statistiche: si sollevano al passaggio */
.sc, .c {
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}
.sc:hover, .c:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 44px 80px -26px rgba(0,0,0,.8),
    0 14px 34px -14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 40px rgba(255,255,255,.06) !important;
}

/* ── Tab / chip: lastrine di vetro ──
   Lo stato ATTIVO non viene toccato: ogni pagina mantiene il suo colore
   identificativo (verde Chiuse, rosso Cestino, blu Cassa...). */
.tab:not(.active), .chip:not(.active), .fchip:not(.active), .r:not(.a) {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
  transition: all .2s cubic-bezier(.2,.8,.2,1) !important;
}
.tab:not(.active):hover, .chip:not(.active):hover, .fchip:not(.active):hover, .r:not(.a):hover {
  background: rgba(255,255,255,.10) !important;
}
.tab.active, .chip.active, .fchip.active, .r.a {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -12px rgba(0,0,0,.6) !important;
}

/* ── MODALI ──
   Sfondo dietro: vetro scurito e sfocato. */
.modal-bg, .proj-modal, .sell-modal, .drawer-bg, .modal-overlay, #modalOverlay, .mo, .detail-modal {
  background: rgba(6,7,10,.66) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
/* Il pannello della modale: lastra di vetro spessa e sollevata */
.modal-box, .proj-modal-box, .sell-modal-box, .drawer, .modal-content, .m, .modal, .cart-drawer, .detail-box {
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(46px) saturate(210%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(46px) saturate(210%) brightness(1.06) !important;
  border: none !important;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.75),
    0 12px 30px -12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 0 40px rgba(255,255,255,.05) !important;
}
/* Titolo modale un filo più marcato */
.modal-title, .proj-modal-title, .drawer-title {
  letter-spacing: -.3px;
}
/* Righe selezionabili dentro le modali (bobine, progetti, articoli) */
.proj-col-item, .modal-spool-item, .proj-list-item {
  border-radius: 12px !important;
  transition: background .18s ease, transform .18s ease !important;
}
.proj-col-item:hover, .modal-spool-item:hover, .proj-list-item:hover {
  background: rgba(255,255,255,.08) !important;
}

/* ── Campi di input: vetro incassato (stessa ricetta della login) ── */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"],
select, textarea, .sell-input, .proj-input, .proj-search {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 2px 8px rgba(0,0,0,.15) !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(10,132,255,.75) !important;
  background: rgba(10,132,255,.07) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,.16), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* ── Micro-interazione sui pulsanti (senza toccarne i colori) ── */
button { transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .16s ease, box-shadow .16s ease; }
button:active { transform: scale(.97); }

/* ── Accessibilità: rispetta "riduci animazioni" ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
