/* ==========================================================================
   DOCG · v2 SKIN — sovrappone il design system v2 alla v1 funzionale.
   Richiede tokens.css caricato prima.
   Strategia: nasconde header/nav-tabs originali, inietta sidebar+topbar v2
   via static/js/v2-shell.js, rimodella i componenti esistenti coi nuovi token.
   Lascia INTATTO il bottom-nav mobile e tutto il JS dell'app.
   ========================================================================== */

/* ─── Layout: nascondi vecchio header/nav su desktop, mostra sidebar+topbar v2 ─── */
@media (min-width: 901px) {
  body { margin: 0; padding: 0; }
  .app-header { display: none !important; }
  .nav-tabs   { display: none !important; }
  .nav-tabs-more { display: none !important; }
  .bottom-nav { display: none !important; }
  .bottom-nav-more { display: none !important; }

  /* Spazio per sidebar + topbar */
  body.v2-shell-ready { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; overflow: hidden; }

  .v2-sidebar { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 50; }
  .v2-topbar  { grid-column: 2; grid-row: 1; position: relative; z-index: 40; }
  .main-content {
    grid-column: 2; grid-row: 2;
    max-width: none !important;
    padding: var(--space-5) var(--space-6) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    height: auto !important;
    background: transparent;
  }

  /* Particles canvas dietro tutto, sotto sidebar */
  #particles-canvas { z-index: 0 !important; }

  /* Body background con sfumature v2 */
  body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse at 15% 0%, rgba(var(--garnet-rgb),0.30) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 100%, rgba(var(--burgundy-rgb),0.18) 0%, transparent 55%),
      var(--surface-base);
  }
}

/* Su mobile mantieni esperienza v1 originale */
@media (max-width: 900px) {
  .v2-sidebar, .v2-topbar { display: none !important; }
}

/* ─── SIDEBAR v2 ─── */
.v2-sidebar {
  background: linear-gradient(180deg, rgba(26,10,13,0.95), rgba(26,10,13,0.85));
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.v2-sidebar::-webkit-scrollbar { width: 6px; }
.v2-sidebar::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }

.v2-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.v2-brand-mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--garnet), var(--ruby));
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1); flex-shrink: 0;
}
.v2-brand-mark svg { width: 18px; height: 18px; fill: var(--gold); }
.v2-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.v2-brand-text .b1 { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.20em; color: var(--gold); }
.v2-brand-text .b2 { font-family: var(--font-prose); font-style: italic; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v2-cantina-switcher {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}
.v2-cantina-avatar {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--burgundy), var(--garnet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 11px;
  flex-shrink: 0;
}
.v2-cantina-info { flex: 1; min-width: 0; }
.v2-cantina-info .cn {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.06em; color: var(--cream);
  /* No troncamento: il nome cantina può andare a capo su 2 righe */
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.25;
}
.v2-cantina-info .cs { font-family: var(--font-prose); font-style: italic; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.v2-nav-section { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.v2-nav-section-title {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.20em; color: var(--text-dim); text-transform: uppercase;
  padding: var(--space-2) var(--space-3) var(--space-1);
  display: flex; align-items: center; justify-content: space-between;
}

.v2-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 7px var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  transition: var(--transition);
  position: relative; cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  text-align: left; width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
}
.v2-nav-item:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.25); }
.v2-nav-item:hover { color: var(--cream); background: var(--surface-raised); }
.v2-nav-item.active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.10), rgba(var(--gold-rgb),0.04));
  border-color: var(--border-default);
}
.v2-nav-item .v2-ico { width: 18px; flex-shrink: 0; opacity: 0.85; font-size: 14px; line-height: 1; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.v2-nav-item.active .v2-ico { opacity: 1; }
.v2-nav-item .v2-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-nav-item .v2-badge {
  background: var(--ruby); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--radius-pill);
  min-width: 18px; text-align: center;
}
.v2-nav-item .v2-badge.warn { background: var(--state-warning); color: var(--dark); }

.v2-sidebar-footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
/* Winecenzo launcher — sempre in basso a sinistra (P12) */
.v2-winecenzo-launch {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-md);
  background: radial-gradient(circle at 18% 25%, rgba(212,184,106,0.22), rgba(var(--garnet-rgb),0.30) 80%);
  border: 1px solid rgba(var(--gold-rgb),0.35);
  color: var(--text-on-surface, #F0E4CC);
  font-family: var(--font-prose); font-size: 12px; letter-spacing: 0.01em;
  cursor: pointer; transition: var(--transition); text-align: left;
}
.v2-winecenzo-launch:hover { border-color: var(--gold); background: radial-gradient(circle at 18% 25%, rgba(212,184,106,0.34), rgba(var(--garnet-rgb),0.42) 80%); transform: translateY(-1px); }
.v2-winecenzo-launch .v2-wc-ico { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-light, #D4B86A), var(--garnet) 78%); color: var(--cream, #F5EDD8); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.v2-winecenzo-launch .v2-wc-ico svg { width: 17px; height: 17px; }
.v2-winecenzo-launch .v2-wc-lbl { line-height: 1.15; }
.v2-winecenzo-launch .v2-wc-lbl b { font-family: var(--font-display); font-weight: 600; color: var(--gold); }
:root[data-theme="light"] .v2-winecenzo-launch { color: #2A1216; background: radial-gradient(circle at 18% 25%, rgba(var(--gold-rgb),0.18), rgba(140,30,45,0.10) 80%); border-color: rgba(140,30,45,0.30); }
:root[data-theme="light"] .v2-winecenzo-launch .v2-wc-lbl b { color: var(--garnet); }
/* Su desktop il launcher in sidebar sostituisce il FAB flottante */
@media (min-width: 901px) { #fabWinecenzo { display: none !important; } }
.v2-sidebar-footer .v2-logout {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.10em;
  cursor: pointer; transition: var(--transition);
}
.v2-sidebar-footer .v2-logout:hover { color: var(--state-danger); border-color: var(--state-danger-bd); }

/* ─── TOPBAR v2 ─── */
.v2-topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(26,10,13,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  height: var(--topbar-h);
}
.v2-search-global { flex: 1; max-width: 560px; position: relative; display: flex; align-items: center; }
.v2-search-global input {
  width: 100%; height: 36px;
  padding: 0 var(--space-4) 0 42px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--cream); font-size: 13px;
  outline: none; transition: var(--transition);
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
.v2-search-global input::placeholder { color: var(--text-dim); font-style: italic; font-family: var(--font-prose); font-size: 14px; }
.v2-search-global input:focus { border-color: var(--border-strong); background: var(--surface-overlay); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.08); }
.v2-search-global .v2-search-ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.v2-search-global .v2-kbd { position: absolute; right: 10px; display: flex; gap: 4px; }
.v2-search-global .v2-kbd kbd { font-family: var(--font-body); font-size: 10px; color: var(--text-dim); padding: 2px 6px; border: 1px solid var(--border-subtle); border-radius: 4px; background: var(--surface-raised); line-height: 1; }

.v2-topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.v2-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: transparent; border: none;
  transition: var(--transition); position: relative; cursor: pointer;
  font-size: 16px;
}
.v2-icon-btn:hover { color: var(--gold-light); background: var(--surface-raised); }
.v2-icon-btn .v2-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); border: 1.5px solid var(--dark); }

.v2-user-menu {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  cursor: pointer; transition: var(--transition);
}
.v2-user-menu:hover { border-color: var(--border-default); }
.v2-user-menu .v2-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--garnet), var(--ruby));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 11px;
}
.v2-user-menu .v2-un { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; color: var(--cream); }

/* ─── COMPONENTI v1 modernizzati con token v2 ─── */

/* Panel — bordo più morbido, hover sottile */
.panel {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}
.panel-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  background: rgba(0,0,0,0.10) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel-title {
  font-family: var(--font-display) !important;
  letter-spacing: 0.16em !important;
  color: var(--gold) !important;
}

/* Stat card — più aria, hover lift, indicator gold */
.stat-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) !important;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.stat-card:hover {
  border-color: var(--border-default) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: var(--transition);
}
.stat-card:hover::after { opacity: 0.5; }
.stat-num { color: var(--gold-light) !important; font-weight: 300 !important; }

/* Wine card — più moderna ma compatibile col markup esistente */
.wine-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  border-left: 1px solid var(--border-subtle) !important;
  overflow: hidden;
  transition: var(--transition);
}
.wine-card:hover {
  border-color: var(--border-default) !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-3) !important;
}

/* Conto card */
.conto-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}

/* Bottoni — applica look pillola per i btn primari */
.btn-gold {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.10em !important;
}
.btn-outline {
  border-radius: var(--radius-pill) !important;
}
.btn-success, .btn-danger {
  border-radius: var(--radius-pill) !important;
}

/* Filter chips */
.filter-chip {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-light) !important;
}

/* Modal — radius più grande */
.modal-content, .modal-bd .modal {
  border-radius: var(--radius-lg) !important;
}

/* Page transition più gradevole */
.page.active { animation: fadeUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ─── Cmd+K palette overlay (riusa stili da v2-app.css se caricato) ─── */
.v2-cmdk-bd {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); z-index: 1000;
  display: none; align-items: flex-start; justify-content: center; padding-top: 120px;
}
.v2-cmdk-bd.open { display: flex; }
.v2-cmdk {
  width: 560px; max-width: 90vw;
  background: var(--dark-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.v2-cmdk-input { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.v2-cmdk-input svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.v2-cmdk-input input { flex: 1; background: none; border: none; outline: none; font-family: var(--font-prose); font-style: italic; font-size: 18px; color: var(--cream); }
.v2-cmdk-input input::placeholder { color: var(--text-dim); }
.v2-cmdk-list { max-height: 60vh; overflow-y: auto; padding: var(--space-2); }
.v2-cmdk-section { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.18em; color: var(--text-dim); padding: var(--space-3) var(--space-3) var(--space-2); text-transform: uppercase; }
.v2-cmdk-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--cream); cursor: pointer; transition: var(--transition); font-size: 13px; }
.v2-cmdk-item:hover, .v2-cmdk-item.sel { background: var(--surface-overlay); color: var(--gold-light); }
.v2-cmdk-item .v2-tipo { margin-left: auto; font-family: var(--font-display); font-size: 9px; letter-spacing: 0.10em; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); text-transform: uppercase; }
.v2-cmdk-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted); }
.v2-cmdk-foot kbd { font-family: var(--font-body); font-size: 10px; padding: 1px 6px; border: 1px solid var(--border-subtle); border-radius: 4px; background: var(--surface-raised); color: var(--cream); }

/* ─── Drink-window badge (riutilizzabile sia in card che in lista) ─── */
.dw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid; }
.dw-badge .dt { width: 6px; height: 6px; border-radius: 50%; }
.dw-ready { background: var(--state-success-bg); color: var(--state-success); border-color: var(--state-success-bd); }
.dw-ready .dt { background: var(--state-success); }
.dw-soon  { background: var(--state-warning-bg); color: var(--state-warning); border-color: var(--state-warning-bd); }
.dw-soon  .dt { background: var(--state-warning); }
.dw-hold  { background: var(--state-info-bg);    color: var(--state-info);    border-color: var(--state-info-bd); }
.dw-hold  .dt { background: var(--state-info); }
.dw-past  { background: var(--state-danger-bg);  color: var(--state-danger);  border-color: var(--state-danger-bd); }
.dw-past  .dt { background: var(--state-danger); }

/* Critic score badge */
.critic-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--gold-light); border: 1px solid var(--border-default);
}
.critic-badge .src { font-family: var(--font-prose); font-style: italic; font-weight: 400; font-size: 9px; color: var(--text-muted); margin-left: 2px; }

/* Wine tag (palette colorata) */
.wtag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; line-height: 1.4; color: var(--cream);
  background: var(--surface-overlay); border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.wtag.t-gold     { background: rgba(168,131,48,0.18); border-color: rgba(168,131,48,0.45); color: #E0C580; }
.wtag.t-bordeaux { background: rgba(123,29,38,0.25); border-color: rgba(123,29,38,0.55); color: #E8A0A0; }
.wtag.t-forest   { background: rgba(46,90,62,0.20);  border-color: rgba(46,90,62,0.50);  color: #86C58F; }
.wtag.t-mauve    { background: rgba(122,72,96,0.22); border-color: rgba(122,72,96,0.50); color: #D5A6BD; }
.wtag.t-amber    { background: rgba(183,118,45,0.18); border-color: rgba(183,118,45,0.45); color: #E0B070; }
.wtag.t-teal     { background: rgba(42,102,112,0.20); border-color: rgba(42,102,112,0.45); color: #86C5DA; }
.wtag.t-olive    { background: rgba(107,122,47,0.20); border-color: rgba(107,122,47,0.45); color: #C0D060; }
.wtag.t-stone    { background: rgba(74,69,64,0.30);   border-color: rgba(74,69,64,0.60);  color: #B0A89C; }
.wtag.t-cream    { background: rgba(168,144,128,0.18); border-color: rgba(168,144,128,0.40); color: #DCC9B0; }

/* ─── Vincenzo (AI Sommelier) chat ─── */
.vincenzo-shell { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); height: calc(100vh - var(--topbar-h) - var(--space-5) * 2); }
@media (max-width: 1100px) { .vincenzo-shell { grid-template-columns: 1fr; } .vincenzo-side { display: none; } }
.vincenzo-main { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.vincenzo-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.vincenzo-avatar { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(212,184,106,0.18), rgba(var(--garnet-rgb),0.45) 65%, rgba(26,10,13,0.6)); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); position: relative; overflow: hidden; flex-shrink: 0; }
.vincenzo-avatar img, .vincenzo-avatar svg { width: 44px; height: 44px; display: block; object-fit: contain; }
.vincenzo-avatar::after { content: ''; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--state-success); border: 2px solid var(--dark); }
.vincenzo-id .nm { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.10em; color: var(--gold-light); }
.vincenzo-id .ds { font-family: var(--font-prose); font-style: italic; font-size: 12px; color: var(--text-muted); }
.vincenzo-msgs { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.vincenzo-msg { display: flex; gap: var(--space-3); max-width: 85%; }
.vincenzo-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.vincenzo-msg .av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-overlay); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gold); flex-shrink: 0; border: 1px solid var(--border-subtle); }
.vincenzo-msg.user .av { background: linear-gradient(135deg, var(--garnet), var(--ruby)); color: var(--gold); }
.vincenzo-bubble { background: var(--surface-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-family: var(--font-prose); font-size: 15px; line-height: 1.5; color: var(--cream); white-space: pre-wrap; word-wrap: break-word; }
.vincenzo-msg.user .vincenzo-bubble { background: linear-gradient(135deg, rgba(var(--garnet-rgb),0.4), rgba(var(--ruby-rgb),0.3)); border-color: var(--border-default); }
.vincenzo-input { padding: var(--space-3); border-top: 1px solid var(--border-subtle); background: rgba(0,0,0,0.20); display: flex; gap: var(--space-2); align-items: flex-end; }
.vincenzo-input textarea { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 14px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--cream); font-size: 14px; outline: none; resize: none; font-family: var(--font-body); }
.vincenzo-input textarea:focus { border-color: var(--border-strong); background: var(--surface-overlay); }
.vincenzo-send { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--garnet), var(--ruby)); border: 1px solid var(--border-strong); color: var(--gold); display: flex; align-items: center; justify-content: center; transition: var(--transition); cursor: pointer; flex-shrink: 0; }
.vincenzo-send:hover { transform: scale(1.05); box-shadow: var(--shadow-glow); }
.vincenzo-side { padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow-y: auto; }
.vincenzo-side h4 { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; margin-bottom: var(--space-3); }
.vincenzo-prompt { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-overlay); border: 1px solid var(--border-subtle); cursor: pointer; transition: var(--transition); margin-bottom: var(--space-2); font-family: var(--font-prose); font-style: italic; font-size: 13px; color: var(--cream); line-height: 1.4; }
.vincenzo-prompt:hover { border-color: var(--border-default); background: rgba(var(--gold-rgb),0.06); }
.vincenzo-prompt .pl { font-family: var(--font-display); font-style: normal; font-size: 9px; letter-spacing: 0.10em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 4px; }
/* #30: in light il testo cream dei suggerimenti era illeggibile */
:root[data-theme="light"] .vincenzo-prompt { color: #2A1216; background: rgba(168,131,48,0.05); border-color: rgba(var(--garnet-rgb),0.10); }
:root[data-theme="light"] .vincenzo-prompt:hover { background: rgba(168,131,48,0.10); }
:root[data-theme="light"] .vincenzo-prompt .pl { color: var(--garnet); }
.vincenzo-empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--text-muted); }
.vincenzo-empty h3 { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.10em; color: var(--gold); margin-bottom: var(--space-2); }
.vincenzo-empty p { font-family: var(--font-prose); font-style: italic; font-size: 14px; max-width: 360px; margin: 0 auto; }
.vincenzo-typing { display: inline-flex; gap: 3px; }
.vincenzo-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.6; animation: dotpulse 1.4s infinite ease-in-out; }
.vincenzo-typing span:nth-child(2) { animation-delay: 0.2s; }
.vincenzo-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotpulse { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1.1); } }

/* ─── Tag CRUD UI ─── */
.tag-mgmt-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-5); align-items: flex-start; }
@media (max-width: 900px) { .tag-mgmt-grid { grid-template-columns: 1fr; } }
.tag-form { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.tag-form h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; margin-bottom: var(--space-3); }
.tag-form label { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.tag-form input { width: 100%; padding: 9px 12px; background: var(--surface-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--cream); font-size: 14px; outline: none; font-family: var(--font-body); margin-bottom: var(--space-3); }
.tag-form input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.08); }
.tag-palette-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.tag-palette-picker .swatch {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 9px; letter-spacing: 0.08em;
  font-weight: 600;
}
.tag-palette-picker .swatch.active { border-color: var(--gold); }

.tag-list { display: flex; flex-direction: column; gap: var(--space-2); }
.tag-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: var(--transition); }
.tag-row:hover { border-color: var(--border-default); }
.tag-row .tn { flex: 1; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em; color: var(--cream); }
.tag-row .tc { font-family: var(--font-prose); font-style: italic; font-size: 12px; color: var(--text-muted); }
.tag-row .ta { display: flex; gap: 6px; }
.tag-row .ta button { padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.10em; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.tag-row .ta button:hover { color: var(--gold-light); border-color: var(--border-strong); }
.tag-row .ta button.del:hover { color: var(--state-danger); border-color: var(--state-danger-bd); }

/* ─── v6 (Dyonis 2026-05-19): RIMOSSA forzatura Cormorant ───
   La precedente unificazione Cormorant è stata sostituita dal design system
   v6 che usa Inter per UI/body e Cormorant solo per display. Tutto è ora
   gestito da v6-canonical.css. Nessuna forzatura font qui per evitare
   conflitti di specificity. */
@media (min-width: 901px) {
  /* Solo italic OFF su input per leggibilità ottimale di numeri/codici */
  input, textarea, select { font-style: normal !important; }
  /* I display elements (stat-num, wine-name, panel-title) usano Cormorant via v6-canonical.css */
}

/* ─── PAGINA VINI: caroselli orizzontali per tipo (desktop) ───
   Solo desktop. Su mobile mantieni grid verticale originale per usabilità.
   Quando l'utente collassa un gruppo, lo style inline `display:none` ha
   priorità grazie a :not([style*="display:none"]) — il toggle continua a
   funzionare con la logica v1 esistente. */
@media (min-width: 901px) {
  /* Container principale: i panels-gruppo (ROSSO, BIANCO, ecc.) vanno
     impilati verticalmente, NON in griglia auto-fill (default v1). */
  #winesGrid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  #winesGrid > .panel { margin-bottom: 18px !important; }

  /* Gruppo per tipo: griglia che va a capo (wrap), card a larghezza fissa */
  [id^="wineGroup_"]:not([style*="display:none"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 8px 16px 18px !important;
    overflow: visible !important;
  }
  [id^="wineGroup_"] .wine-card {
    width: 220px !important;
    flex: 0 0 220px !important;
  }

  /* Header del gruppo (panel-header con onclick) — più moderno */
  .page#page-vini .panel { border-radius: var(--radius-lg) !important; overflow: hidden; }
  .page#page-vini .panel > div[onclick^="toggleWineGroup"] {
    padding: 14px 18px !important;
    transition: var(--transition-fast);
  }
  .page#page-vini .panel > div[onclick^="toggleWineGroup"]:hover {
    background: rgba(var(--gold-rgb),0.04);
  }
}

/* ─── SLIDER MODERNI (input type=range) — stile v2 ───
   Doppio knob non supportato nativamente dal browser, ma single range
   è bello pulito. Utile per filtri prezzo/quantità/score. */
input[type="range"].v2-range,
.v2-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 0;
}
input[type="range"].v2-range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--surface-overlay), var(--surface-overlay));
  border-radius: var(--radius-pill);
  border: none;
}
input[type="range"].v2-range::-moz-range-track {
  height: 4px;
  background: var(--surface-overlay);
  border-radius: var(--radius-pill);
  border: none;
}
input[type="range"].v2-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--dark);
  box-shadow: var(--shadow-2);
  cursor: grab;
  margin-top: -6px;
  transition: var(--transition-fast);
}
input[type="range"].v2-range::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: var(--shadow-2), 0 0 0 6px rgba(var(--gold-rgb),0.15); }
input[type="range"].v2-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--dark);
  box-shadow: var(--shadow-2);
  cursor: grab;
}

/* Sensory rows: per filtri profilo organolettico (corpo, tannino, ecc.) */
.sensory-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.sensory-rows .srow { display: flex; flex-direction: column; gap: 4px; }
.sensory-rows .srow .lab { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 11px; color: var(--text-muted); }
.sensory-rows .srow .lab .name { color: var(--cream); font-weight: 600; text-transform: capitalize; font-family: var(--font-display); letter-spacing: 0.06em; font-size: 10px; }
.sensory-rows .srow .lab .val { color: var(--gold); font-family: var(--font-display); font-size: 11px; }
.sensory-rows .srow .meta { display: flex; justify-content: space-between; font-family: var(--font-prose); font-style: italic; font-size: 11px; color: var(--text-dim); }

/* Visualizzazione barra orizzontale del valore sensoriale (read-only) */
.sbar { display: flex; gap: 3px; height: 6px; }
.sbar .seg { flex: 1; background: var(--surface-overlay); border-radius: 1px; }
.sbar .seg.on { background: var(--gold); }

/* ============================================================================
   MODERN UI v5 OVERRIDES — 2026-05-18
   Modernizzazione: tap target 44px, focus ring accessibile, hover sottile,
   tipografia Inter per body/UI, Cormorant per display.
   Sovrascrive con specificità superiore (selector + ! solo se necessario).
   ============================================================================ */

/* Bottoni — tap target ≥44px, padding generoso, focus ring */
.btn,
button.btn,
button.btn-gold,
button.btn-outline,
button.btn-success,
button.btn-danger {
  min-height: var(--tap-min);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-display-tight);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), box-shadow var(--transition), border-color var(--transition), background var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1;
}
.btn:hover,
button.btn:hover,
button.btn-gold:hover,
button.btn-outline:hover,
button.btn-success:hover,
button.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active,
button.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn:disabled, button.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Bottoni "compact" (toolbar, inline) — più stretti ma mantengono altezza */
.btn.btn-sm, button.btn-sm {
  min-height: 36px; padding: 6px 14px; font-size: var(--fs-sm);
}

/* Bottone gold (primario) — gradiente + shadow caldo */
.btn-gold, button.btn-gold {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: var(--gold) !important;
  border: 1px solid var(--border-strong) !important;
}
.btn-gold:hover { box-shadow: 0 8px 24px rgba(var(--ruby-rgb),0.40), 0 2px 6px rgba(0,0,0,0.20); }

.btn-outline, button.btn-outline {
  background: transparent !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--border-default) !important;
}
.btn-outline:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--surface-raised) !important; }

/* Bottoni icona quadrati (es. close modal, action) */
.btn-icon, button.btn-icon {
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Form input modernizzati — focus ring, padding accessibile */
.form-group label,
label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-on-surface);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  min-height: var(--tap-min);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--border-strong); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--focus-ring-tight);
  background: var(--surface-overlay);
}
textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }

/* Panel — radius coerente + transizione tema */
.panel {
  border-radius: var(--radius-lg) !important;
  transition: background var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-1);
}
.panel:hover { box-shadow: var(--shadow-2); }

/* Modal — radius generoso, ombra diffusa */
.modal-content, .modal-bd .modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-4) !important;
}
.modal-bd { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Tipografia: corpi e tabelle in Inter */
.panel-body, p, td, th, .form-group, input, select, textarea, button:not(.btn-gold):not(.btn-outline):not(.btn-success):not(.btn-danger):not(.btn) {
  font-family: var(--font-body);
}

/* Titoli (.panel-title, h-titles) mantengono Cormorant */
.panel-title, h1, h2, h3, .h-display {
  font-family: var(--font-display);
}

/* Stat cards — più ariosa */
.stat-card { padding: var(--space-5) !important; }
.stat-card .stat-num { font-size: var(--fs-2xl) !important; }

/* Tabelle moderne (se presenti) */
table { border-collapse: separate; border-spacing: 0; }
th {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
tr:hover td { background: var(--surface-overlay); }

/* Link */
a { color: var(--gold-light); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Scrollbar moderna */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-base);
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Theme toggle button (modernizzato, in topbar) */
.v2-theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--gold-light);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.v2-theme-toggle:hover {
  background: var(--surface-overlay);
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(15deg);
}
.v2-theme-toggle svg { width: 18px; height: 18px; }

/* Light mode: alcune regole specifiche per migliorare contrasto */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--gold-rgb),0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--garnet-rgb),0.06) 0%, transparent 55%),
    var(--surface-base) !important;
}
:root[data-theme="light"] .v2-sidebar {
  background: linear-gradient(180deg, rgba(255,250,240,0.94), rgba(250,246,237,0.88));
  border-right: 1px solid var(--border-default);
}
:root[data-theme="light"] .v2-topbar {
  background: rgba(255,250,240,0.85);
  border-bottom: 1px solid var(--border-default);
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .wine-card,
:root[data-theme="light"] .conto-card {
  background: #FFFFFF !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--shadow-1);
}
:root[data-theme="light"] .panel-header {
  background: rgba(168,131,48,0.04) !important;
  border-bottom-color: var(--border-default) !important;
}
:root[data-theme="light"] .btn-gold,
:root[data-theme="light"] button.btn-gold {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: #FAF6ED !important;
}
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #FFFFFF;
  border-color: var(--border-default);
  color: var(--text-on-surface);
}
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-bd .modal {
  background: #FFFFFF !important;
  color: var(--text-on-surface);
}