/* ============================================================================
   Dyonis · MODERN UI v5.1 — Refresh visivo totale (2026-05-19)
   File aggiuntivo che NON sovrascrive HTML; usa selettori esistenti per
   modernizzare sidebar, topbar, dashboard, wine list, modal, stat cards.
   Tutti gli effetti hover/focus/transition usano i token v5.
   Light mode ereditato via :root[data-theme="light"] dai tokens.
   ============================================================================ */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 1. SHELL — sidebar + topbar con respiro moderno                       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Sidebar: leggermente più larga, brand più prominente */
.v2-sidebar, .sidebar {
  padding: 20px 14px !important;
  gap: 6px !important;
  background:
    linear-gradient(180deg, rgba(26,10,13,0.96), rgba(26,10,13,0.88)) !important;
  border-right: 1px solid var(--border-subtle) !important;
}
:root[data-theme="light"] .v2-sidebar,
:root[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,250,240,0.96), rgba(250,246,237,0.88)) !important;
}

/* Brand sidebar — leggermente più grande, micro-shadow */
.v2-brand-mark, .brand-mark {
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(var(--garnet-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Nav items — più ariosa, hover crisp, active prominente */
.v2-nav-item, .nav-item {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) !important;
}
.v2-nav-item:hover, .nav-item:hover {
  background: var(--surface-overlay) !important;
  color: var(--text-primary) !important;
  transform: translateX(2px);
}
.v2-nav-item.active, .nav-item.active {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0.14) 0%, rgba(var(--gold-rgb),0.04) 100%) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--border-default) !important;
  font-weight: 500 !important;
}
.v2-nav-item.active::before {
  content: '';
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb),0.5);
}

/* Nav section titles — più cleane */
.v2-nav-section-title, .nav-section-title {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--text-dim) !important;
  padding: 16px 14px 6px !important;
  font-weight: 600 !important;
}

/* Cantina switcher: più curato */
.v2-cantina-switcher, .cantina-switcher {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px;
}
.v2-cantina-switcher:hover, .cantina-switcher:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

/* Topbar moderna: più alta (60px da tokens), backdrop più marcato */
.v2-topbar, .topbar {
  height: var(--topbar-h) !important;
  background: rgba(26,10,13,0.78) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 0 24px !important;
  gap: 12px !important;
}
:root[data-theme="light"] .v2-topbar,
:root[data-theme="light"] .topbar {
  background: rgba(255,250,240,0.78) !important;
  border-bottom-color: var(--border-default) !important;
}

/* Search bar moderna */
.v2-search-global, .search-global {
  max-width: 640px !important;
}
.v2-search-global input, .search-global input {
  height: 40px !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding-left: 42px !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: all var(--transition-fast) !important;
}
.v2-search-global input::placeholder,
.search-global input::placeholder {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 14px !important;
  color: var(--text-dim) !important;
}
.v2-search-global input:focus, .search-global input:focus {
  border-color: var(--gold) !important;
  background: var(--surface-overlay) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Topbar action buttons: usa SVG monocromatici puliti, non emoji */
.v2-icon-btn, .icon-btn {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 18px !important;
  transition: all var(--transition-fast) !important;
}
.v2-icon-btn:hover, .icon-btn:hover {
  background: var(--surface-raised) !important;
  border-color: var(--border-subtle) !important;
  color: var(--gold) !important;
}

/* Theme toggle: forma quadrata coerente con altre icon-btn */
.v2-theme-toggle {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
}

/* User menu pillola raffinata */
.v2-user-menu, .user-menu {
  border-radius: 999px !important;
  padding: 5px 12px 5px 5px !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: all var(--transition-fast) !important;
}
.v2-user-menu:hover, .user-menu:hover {
  border-color: var(--border-default) !important;
  background: var(--surface-overlay) !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 2. MAIN AREA — più whitespace, max-width contenuto, page transitions  ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.v2-main, .main {
  padding: 28px 32px !important;
}
@media (min-width: 1400px) {
  .v2-main, .main { padding: 32px 48px !important; }
}

/* Page transition: smooth fade+slide */
.page.active {
  animation: dyonisFadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes dyonisFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page head modernizzata */
.page-head {
  margin-bottom: 28px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.page-title h1 {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-strong) !important;
}
.page-title .crumbs {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.02em;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 3. PANEL — base card moderna                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.panel {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-1) !important;
  transition: box-shadow var(--transition), border-color var(--transition) !important;
}
.panel:hover {
  box-shadow: var(--shadow-2) !important;
  border-color: var(--border-default) !important;
}
.panel-header {
  background: rgba(0,0,0,0.06) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 16px 20px !important;
}
:root[data-theme="light"] .panel-header {
  background: rgba(168,131,48,0.05) !important;
}
.panel-title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
}
.panel-body {
  padding: 20px !important;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 4. STAT CARDS — KPI tile moderne con numeri Cormorant grandi          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.stat-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  position: relative; overflow: hidden;
  transition: all var(--transition) !important;
  box-shadow: var(--shadow-1) !important;
}
.stat-card:hover {
  border-color: var(--border-default) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-3) !important;
}
.stat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft));
  opacity: 0; transition: opacity var(--transition);
  border-radius: 16px 16px 0 0;
}
.stat-card:hover::after { opacity: 0.6; }
.stat-card .stat-label,
.stat-card > div:first-child:not(.stat-num) {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 10px;
}
.stat-num {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--gold-light) !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 5. WINE / CONTO / GENERIC CARD — hover lift + radius coerente         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.wine-card, .conto-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all var(--transition) !important;
  box-shadow: var(--shadow-1) !important;
}
.wine-card:hover, .conto-card:hover {
  border-color: var(--border-default) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-3) !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 6. FILTER CHIPS — pillole moderne con stato visivo chiaro             ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer;
}
.filter-chip:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  background: var(--surface-overlay) !important;
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-light) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(var(--garnet-rgb),0.30);
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 7. MODAL — backdrop blur più marcato, scale-in animation              ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.modal-bd {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(0,0,0,0.55) !important;
}
:root[data-theme="light"] .modal-bd {
  background: rgba(46,16,24,0.40) !important;
}
.modal-content, .modal-bd .modal {
  border-radius: 18px !important;
  box-shadow: var(--shadow-4) !important;
  animation: dyonisModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes dyonisModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 8. EMPTY / LOADING STATES — skeleton loader + empty card modern       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-overlay) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton.skeleton-title { height: 24px; width: 60%; }
.skeleton.skeleton-card { height: 160px; border-radius: 14px; }

/* Empty state modernizzato */
.empty-state, .v2-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 32px !important;
  text-align: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: 16px;
}
.empty-state-icon, .v2-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}
.empty-state-title, .v2-empty-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--gold-light) !important;
  margin-bottom: 8px;
}
.empty-state-desc, .v2-empty-desc {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  line-height: 1.6;
  max-width: 420px;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 9. BUTTON FAB — più premium                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

#fabWinecenzo {
  box-shadow: 0 10px 28px rgba(var(--garnet-rgb),0.50), 0 0 0 2px rgba(var(--gold-rgb),0.30),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
#fabWinecenzo:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(var(--garnet-rgb),0.60), 0 0 0 2px var(--gold),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

#fabScanWine, #fabAddWine, #fabAddOrdine {
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--gold-rgb),0.20),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition) !important;
}
#fabScanWine:hover, #fabAddWine:hover, #fabAddOrdine:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.55), 0 0 0 1px var(--gold-light),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 10. MOBILE BOTTOM NAV — iOS-style safe-area, tap target 56px         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  .bottom-nav, #bottomNav, .v2-bottom-nav {
    background: rgba(26,10,13,0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 6px 4px calc(env(safe-area-inset-bottom, 0) + 6px) 4px !important;
  }
  :root[data-theme="light"] .bottom-nav,
  :root[data-theme="light"] #bottomNav,
  :root[data-theme="light"] .v2-bottom-nav {
    background: rgba(255,250,240,0.92) !important;
  }
  .bottom-nav a, .bottom-nav button,
  #bottomNav a, #bottomNav button {
    min-height: 56px !important;
    border-radius: 12px !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
  }
  .bottom-nav a.active, #bottomNav a.active {
    color: var(--gold) !important;
    background: rgba(var(--gold-rgb),0.10) !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 11. TABLE — moderne, hover row, header sticky                         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-raised);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-overlay);
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 14px 16px !important;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}
table tbody td {
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-on-surface) !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover td {
  background: var(--surface-overlay) !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 12. SCROLLBAR custom moderna                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
  background-clip: content-box;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 13. TYPOGRAPHY UTILITIES                                              ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.text-display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; }
.text-display-loose { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.text-body { font-family: var(--font-body); font-weight: 400; }
.text-muted { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-gold { color: var(--gold); }

/* Numeri tabulari ovunque per allineare colonne numeriche */
.num, .tabular, .stat-num, td.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 14. CHAT VINCENZO header polish (avatar v3 già deployata)             ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.vincenzo-header {
  padding: 18px 20px !important;
  background: linear-gradient(135deg, rgba(var(--garnet-rgb),0.18), rgba(var(--ruby-rgb),0.08)) !important;
  border-bottom: 1px solid var(--border-default) !important;
}
.vincenzo-id .nm {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  letter-spacing: 0.12em !important;
  color: var(--gold-light) !important;
}
.vincenzo-id .ds {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
.vincenzo-msgs { padding: 24px !important; gap: 18px !important; }
.vincenzo-bubble {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
}
.vincenzo-input {
  padding: 14px 16px !important;
  border-top: 1px solid var(--border-default) !important;
  background: var(--surface-raised) !important;
}
.vincenzo-input input, .vincenzo-input textarea {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 15. LIGHT MODE — overrides specifici per leggibilità                  ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--gold-rgb),0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--garnet-rgb),0.04) 0%, transparent 55%),
    #FAF6ED !important;
}
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .wine-card,
:root[data-theme="light"] .conto-card,
:root[data-theme="light"] .panel {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.10) !important;
  box-shadow: 0 1px 3px rgba(var(--garnet-rgb),0.06), 0 1px 2px rgba(var(--garnet-rgb),0.04) !important;
}
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .wine-card:hover,
:root[data-theme="light"] .conto-card:hover,
:root[data-theme="light"] .panel:hover {
  box-shadow: 0 12px 32px rgba(var(--garnet-rgb),0.10), 0 4px 8px rgba(var(--garnet-rgb),0.06) !important;
  border-color: var(--border-default) !important;
}
:root[data-theme="light"] .stat-num {
  color: var(--garnet) !important;
}
:root[data-theme="light"] .v2-search-global input,
:root[data-theme="light"] .search-global input {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.15) !important;
  color: var(--text-on-surface) !important;
}
:root[data-theme="light"] .v2-search-global input::placeholder,
:root[data-theme="light"] .search-global input::placeholder {
  color: rgba(var(--garnet-rgb),0.45) !important;
}
:root[data-theme="light"] .filter-chip {
  background: #FFFFFF !important;
  color: var(--text-on-surface) !important;
}
:root[data-theme="light"] .filter-chip.active {
  color: #FAF6ED !important;
}
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-bd .modal {
  background: #FFFFFF !important;
  color: var(--text-on-surface) !important;
}
:root[data-theme="light"] table {
  background: #FFFFFF !important;
}
:root[data-theme="light"] table thead th {
  background: rgba(168,131,48,0.05) !important;
  color: var(--text-muted) !important;
}
:root[data-theme="light"] table tbody td {
  color: var(--text-on-surface) !important;
  border-bottom-color: rgba(var(--garnet-rgb),0.08) !important;
}
:root[data-theme="light"] .v2-nav-item.active,
:root[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg, rgba(168,131,48,0.14), rgba(168,131,48,0.04)) !important;
  color: var(--garnet) !important;
  border-color: rgba(168,131,48,0.30) !important;
}
:root[data-theme="light"] .vincenzo-header {
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.10), rgba(var(--garnet-rgb),0.04)) !important;
}

/* End of v5-modern.css */