/* ===========================================================================
   Dyonis · DESIGN SYSTEM CANONICO v6 — 2026-05-19
   Disciplina rigorosa: 1 famiglia Inter (UI/body), 1 famiglia Cormorant (display).
   Caricato per ULTIMO. Vince via !important + specificity contro 600+ inline
   styles e 6 blocchi <style> inline presenti in index.html.
   ===========================================================================
   REGOLA D'ORO:
   - INTER: tutto ciò che è UI funzionale (body, form, button, table, nav, chat)
   - CORMORANT: SOLO display (h1-h6, brand, panel-title, stat-num, hero, badge wine-house)
   =========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   1) FONT RESET — Inter ovunque, salvo display elements
   Selettori a specificità 0,0,3 (html body X) per vincere su tutte le rule
   normali del block <style> inline + inline styles ereditati.
   ─────────────────────────────────────────────────────────────────────────── */

/* Catch-all aggressivo: tutto il contenuto del body in Inter */
html body,
html body input,
html body select,
html body textarea,
html body option,
html body button,
html body label,
html body fieldset,
html body legend,
html body table,
html body thead,
html body tbody,
html body tr,
html body th,
html body td,
html body caption,
html body ul,
html body ol,
html body li,
html body dl,
html body dt,
html body dd,
html body p,
html body blockquote,
html body address,
html body a,
html body abbr,
html body b,
html body cite,
html body data,
html body dfn,
html body em,
html body i,
html body q,
html body s,
html body small,
html body strong,
html body time,
html body u,
html body mark,
html body div,
html body span,
html body nav,
html body main,
html body aside,
html body header,
html body footer,
html body section,
html body article,
html body figure,
html body figcaption,
html body details,
html body summary,
html body dialog,
html body form,
html body output,
html body progress,
html body meter
{
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   2) FONT DISPLAY — Cormorant SOLO su elementi semantici display
   Specificità (0,1,3) o superiore via "html body .class" per battere sezione 1.
   ─────────────────────────────────────────────────────────────────────────── */

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h-display, html body .h1, html body .h2, html body .h3, html body .h4,
html body .text-display, html body .text-display-loose,
html body .panel-title,
html body .page-title h1, html body .page-title h2, html body .page-title h3,
html body .stat-num, html body .stat-label,
html body .brand-text .b1, html body .v2-brand-text .b1, html body .v2-brand .b1,
html body .brand-title, html body .brand,
html body .cantina-info .cn, html body .v2-cantina-info .cn,
html body .cantina-name,
html body .vincenzo-id .nm,
html body .wine-name, html body .wine-title, html body .wine-card-title,
html body .wine-meta, html body .wine-price, html body .wine-stock,
html body .drink-badge, html body .stock-warning, html body .margin-indicator,
html body .allergen-badge,
html body .order-wine, html body .order-detail, html body .order-table-badge, html body .order-badge,
html body .conto-title, html body .conto-num,
html body .wizard-title, html body .wizard-logo, html body .wizard-step-title,
html body .modal-title, html body .modal-header h1, html body .modal-header h2, html body .modal-header h3,
html body .kpi-num, html body .kpi-value,
html body .hero h1, html body .hero h2, html body .hero-title,
html body .form-section-title,
html body .nav-section-title, html body .v2-nav-section-title,
html body .dropdown-section-title,
html body .tab-label, html body .tab-title,
html body .nav-tab,
html body .empty-state-title, html body .v2-empty-title,
html body .pl, /* prompt label vincenzo */
html body .brand-mark, html body .v2-brand-mark,
html body .logo-text,
html body .user-info,
html body .role-badge,
html body .btn-profile,
html body .btn-logout
{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   3) FONT MONO — codici/numeri tecnici/kbd
   ─────────────────────────────────────────────────────────────────────────── */

code, kbd, pre, samp, .mono, .num-mono, .ean, .barcode, .qr-text,
.v2-kbd kbd, .kbd kbd
{
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
}

/* Override esplicito Helvetica per stampa (mantiene legacy) */
.print-carta, .print-carta * {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4) SCALA TIPOGRAFICA CANONICA — 6 misure invece di 11
   ─────────────────────────────────────────────────────────────────────────── */

body { font-size: 14px; line-height: 1.55; }

h1, .h1 { font-size: 28px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; }
h2, .h2 { font-size: 22px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; }
h3, .h3 { font-size: 18px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; }
h4, .h4 { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.35; }

.panel-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  line-height: 1.4;
}

.stat-num {
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────────────────────
   5) BUTTONS — riallineamento totale, look moderno
   ─────────────────────────────────────────────────────────────────────────── */

.btn, button.btn,
.btn-gold, button.btn-gold,
.btn-outline, button.btn-outline,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-ghost,
.btn-danger-outline
{
  min-height: 40px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  transition: transform 140ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms, background 220ms, border-color 220ms, color 220ms !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn-gold, button.btn-gold {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: var(--gold-light) !important;
  border-color: rgba(var(--gold-rgb),0.40) !important;
  box-shadow: 0 4px 12px rgba(var(--garnet-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(var(--garnet-rgb),0.42), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: var(--gold-soft) !important;
}

.btn-outline, button.btn-outline {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gold-light) !important;
  border-color: rgba(var(--gold-rgb),0.30) !important;
}
.btn-outline:hover {
  background: rgba(var(--gold-rgb),0.10) !important;
  border-color: rgba(var(--gold-rgb),0.55) !important;
  color: var(--gold) !important;
  transform: translateY(-1px);
}

.btn-success {
  background: rgba(82,183,136,0.16) !important;
  color: #6FD0A0 !important;
  border-color: rgba(82,183,136,0.40) !important;
}
.btn-success:hover {
  background: rgba(82,183,136,0.28) !important;
  transform: translateY(-1px);
}

.btn-danger, .btn-danger-outline {
  background: transparent !important;
  color: var(--state-danger) !important;
  border-color: rgba(220,38,38,0.40) !important;
}
.btn-danger:hover, .btn-danger-outline:hover {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.60) !important;
}

.btn-sm, button.btn-sm {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   6) FORM INPUTS — coerenti, focus ring, padding accessibile
   ─────────────────────────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select, textarea {
  min-height: 40px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.18) !important;
  color: var(--cream) !important;
  outline: none !important;
  transition: border-color 140ms, box-shadow 140ms, background 140ms !important;
  width: 100%;
  box-sizing: border-box;
}
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover, textarea:hover {
  border-color: rgba(var(--gold-rgb),0.40) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.20) !important;
  background: rgba(255,255,255,0.06) !important;
}
textarea {
  min-height: 96px !important;
  resize: vertical;
  line-height: 1.55 !important;
}

/* Label sempre Inter, semibold uppercase */
.form-group > label, .form-row > label, label.form-label {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   7) PANEL / CARD — radius coerenti, padding canonico
   ─────────────────────────────────────────────────────────────────────────── */

.panel {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15) !important;
  overflow: hidden;
  transition: border-color 220ms, box-shadow 220ms !important;
  margin-bottom: 16px;
}
.panel:hover {
  border-color: rgba(var(--gold-rgb),0.20) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18) !important;
}
.panel-header {
  background: rgba(0,0,0,0.10) !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.10) !important;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title {
  color: var(--gold) !important;
}
.panel-body {
  padding: 18px !important;
}

/* Stat card */
.stat-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.10) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  transition: all 220ms cubic-bezier(0.16,1,0.3,1) !important;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--gold-rgb),0.25) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.20) !important;
}
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 220ms;
  border-radius: 14px 14px 0 0;
}
.stat-card:hover::after { opacity: 0.7; }
.stat-num {
  color: var(--gold-light) !important;
}

/* Wine / Conto card */
.wine-card, .conto-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  transition: all 220ms cubic-bezier(0.16,1,0.3,1) !important;
  overflow: hidden;
}
.wine-card:hover, .conto-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--gold-rgb),0.25) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.20) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   8) FILTER CHIPS — pillole moderne uniformi
   ─────────────────────────────────────────────────────────────────────────── */

.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.18) !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: all 140ms !important;
}
.filter-chip:hover {
  border-color: rgba(var(--gold-rgb),0.40) !important;
  color: var(--cream) !important;
  background: rgba(255,255,255,0.07) !important;
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  border-color: rgba(var(--gold-rgb),0.40) !important;
  color: var(--gold-light) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(var(--garnet-rgb),0.30);
}

/* ───────────────────────────────────────────────────────────────────────────
   9) MODAL — backdrop blur, scale-in, radius coerente
   ─────────────────────────────────────────────────────────────────────────── */

.modal-bd {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(0,0,0,0.55) !important;
}
.modal-content, .modal-bd .modal {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.50), 0 8px 24px rgba(0,0,0,0.28) !important;
  animation: dyonisModalIn 260ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes dyonisModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ───────────────────────────────────────────────────────────────────────────
   10) TABLE — moderne, sticky header, hover row
   ─────────────────────────────────────────────────────────────────────────── */

table:not(.no-canonical) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  overflow: hidden;
}
table:not(.no-canonical) thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(255,255,255,0.05);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 12px 14px !important;
  text-align: left;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.18);
}
table:not(.no-canonical) tbody td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--cream) !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.06);
  transition: background 140ms;
}
table:not(.no-canonical) tbody tr:last-child td { border-bottom: none; }
table:not(.no-canonical) tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}

/* ───────────────────────────────────────────────────────────────────────────
   11) SIDEBAR / TOPBAR / NAV
   ─────────────────────────────────────────────────────────────────────────── */

.v2-nav-item, .nav-item {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 140ms !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  position: relative;
}
.v2-nav-item:hover, .nav-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--cream) !important;
  transform: translateX(2px);
}
.v2-nav-item.active, .nav-item.active {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0.14), rgba(var(--gold-rgb),0.04)) !important;
  color: var(--gold-light) !important;
  border-color: rgba(var(--gold-rgb),0.20) !important;
  font-weight: 600 !important;
}

.v2-topbar, .topbar {
  height: 60px !important;
  padding: 0 24px !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 rgba(var(--gold-rgb),0.10) !important;
}

.v2-search-global, .search-global {
  max-width: 600px !important;
}
.v2-search-global input, .search-global input {
  height: 38px !important;
  border-radius: 10px !important;
  padding: 0 14px 0 40px !important;
  font-size: 14px !important;
}
.v2-search-global input::placeholder, .search-global input::placeholder {
  color: var(--text-dim) !important;
  font-style: normal !important;
}

.v2-icon-btn, .icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 140ms !important;
}
.v2-icon-btn:hover, .icon-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(var(--gold-rgb),0.20) !important;
  color: var(--gold) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12) PAGE HEAD — titolo Cormorant + crumbs Inter
   ─────────────────────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.10);
  flex-wrap: wrap;
}
.page-title h1 {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
  margin: 0;
}
.page-title .crumbs {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted) !important;
  font-style: normal !important;
  margin-top: 4px;
}

/* ───────────────────────────────────────────────────────────────────────────
   13) SCROLLBAR CUSTOM
   ─────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb),0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb),0.40);
  background-clip: content-box;
}

/* ───────────────────────────────────────────────────────────────────────────
   14) BADGES / TAG / CHIP
   ─────────────────────────────────────────────────────────────────────────── */

.badge, .chip, .pill, .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px;
  line-height: 1.4;
  text-transform: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   15) LIGHT MODE OVERRIDES — leggibilità accurata
   ─────────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] body {
  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%),
    #FAF6ED !important;
  color: #2A1216 !important;
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .wine-card,
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .conto-card,
:root[data-theme="light"] .table-tile,
:root[data-theme="light"] .order-table-group {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.10) !important;
  box-shadow: 0 1px 3px rgba(var(--garnet-rgb),0.06) !important;
  color: #2A1216 !important;
}
:root[data-theme="light"] .panel-header { background: rgba(168,131,48,0.06) !important; border-bottom-color: rgba(var(--garnet-rgb),0.08) !important; }
:root[data-theme="light"] .panel-body { color: #2A1216 !important; }
/* 2026-06-19: classi-testo che usano color:var(--cream) esplicito (vince
   sull'ereditato) → invisibili sulle card che flippano a bianco. Override. */
:root[data-theme="light"] .wine-name,
:root[data-theme="light"] .order-wine,
:root[data-theme="light"] .conto-item,
:root[data-theme="light"] .entity-name,
:root[data-theme="light"] .account-name,
:root[data-theme="light"] .plan-module-row,
:root[data-theme="light"] .allergen-grid label,
:root[data-theme="light"] .nav-tabs-more-item,
:root[data-theme="light"] .bottom-nav-more-item { color: #2A1216 !important; }
:root[data-theme="light"] .wine-name { color: var(--garnet) !important; }
/* Hero Vincenzo: le righe insight usano color:var(--cream) inline → override */
:root[data-theme="light"] #dashVincenzo .vinc-insight { color: #2A1216 !important; }
:root[data-theme="light"] .stat-num { color: var(--garnet) !important; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.16) !important;
  color: #2A1216 !important;
}
/* #10/#30: la regola base input:not(...):not(...)... ha specificità (0,11,1)+!important
   e batteva l'override light qui sopra (0,2,1) → i date-picker "nudi" (period-bar Ordini/Conti)
   restavano scuri/illeggibili in light. Qui ripetiamo la stessa catena :not() col tema → vince. */
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.16) !important;
  color: #2A1216 !important;
}
:root[data-theme="light"] input::-webkit-datetime-edit { color: #2A1216 !important; }
/* #10/#14: la period-bar (toolbar filtri Ordini/Conti) aveva fondo garnet fisso rgba(46,16,24,0.4)
   → banda "mauve fangosa" in light. La rendiamo una banda chiara coerente. */
:root[data-theme="light"] .period-bar,
html body:root[data-theme="light"] .period-bar {
  background: rgba(168,131,48,0.07) !important;
  border-color: rgba(var(--garnet-rgb),0.10) !important;
}
:root[data-theme="light"] .filter-chip {
  background: #FFFFFF !important;
  color: #2A1216 !important;
  border-color: rgba(var(--garnet-rgb),0.12) !important;
}
/* 2026-06-19 FIX "selezionati non leggibili": il chip ATTIVO in light prendeva
   sfondo bianco (regola .filter-chip più specifica) + testo cream → invisibile.
   Forziamo lo sfondo garnet come in dark, così il testo chiaro si legge. */
:root[data-theme="light"] .filter-chip.active {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: #FAF6ED !important;
  border-color: rgba(168,131,48,0.45) !important;
}
/* Tom Select (dropdown ricchi nei form/modali): nessun override light esisteva,
   il testo cream restava su fondo chiaro → illeggibile. */
:root[data-theme="light"] .ts-control,
:root[data-theme="light"] .ts-dropdown {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.16) !important;
}
:root[data-theme="light"] .ts-control,
:root[data-theme="light"] .ts-control > input,
:root[data-theme="light"] .ts-control > .item,
:root[data-theme="light"] .ts-dropdown .option,
:root[data-theme="light"] .ts-dropdown [data-selectable] { color: #2A1216 !important; }
:root[data-theme="light"] .ts-dropdown .option.active,
:root[data-theme="light"] .ts-dropdown .active {
  background: rgba(168,131,48,0.14) !important;
  color: var(--garnet) !important;
}
:root[data-theme="light"] .ts-control > .item {
  background: rgba(168,131,48,0.12) !important;
  border-color: rgba(168,131,48,0.30) !important;
}
:root[data-theme="light"] .btn-outline {
  background: #FFFFFF !important;
  color: var(--garnet) !important;
  border-color: rgba(168,131,48,0.45) !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"] .v2-topbar,
:root[data-theme="light"] .topbar {
  background: rgba(255,250,240,0.82) !important;
  border-bottom-color: rgba(var(--garnet-rgb),0.08) !important;
}
:root[data-theme="light"] .v2-search-global input,
:root[data-theme="light"] .search-global input {
  background: #FFFFFF !important;
  color: #2A1216 !important;
  border-color: rgba(var(--garnet-rgb),0.12) !important;
}
:root[data-theme="light"] table { background: #FFFFFF !important; }
:root[data-theme="light"] table thead th { background: rgba(168,131,48,0.06) !important; }
:root[data-theme="light"] table tbody td { color: #2A1216 !important; border-bottom-color: rgba(var(--garnet-rgb),0.06) !important; }
:root[data-theme="light"] table tbody tr:hover td { background: rgba(168,131,48,0.04) !important; }
/* 2026-06-19 FIX ROOT (#4/#15/#17/#22): il modale reale ha classe .modal (id
   modalContent), non .modal-content → l'override light non si applicava mai e
   TUTTI i modali restavano scuri in light. Ora .modal flippa correttamente. */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-bd .modal,
:root[data-theme="light"] #modalContent.modal,
:root[data-theme="light"] .modal {
  background: #FFFFFF !important;
  border-color: rgba(var(--garnet-rgb),0.14) !important;
  color: #2A1216 !important;
}
:root[data-theme="light"] .modal-overlay { background: rgba(40,18,22,0.42) !important; }
:root[data-theme="light"] .modal .modal-header,
:root[data-theme="light"] .modal-header { background: rgba(168,131,48,0.06) !important; border-bottom-color: rgba(var(--garnet-rgb),0.08) !important; }
:root[data-theme="light"] .modal .modal-title,
:root[data-theme="light"] .modal-title { color: var(--garnet) !important; }
:root[data-theme="light"] .modal label,
:root[data-theme="light"] .modal .form-group label { color: #4A2A30 !important; }
:root[data-theme="light"] .modal .modal-body,
:root[data-theme="light"] .modal-body { color: #2A1216 !important; }
:root[data-theme="light"] .modal .modal-close { color: #6B4A50 !important; }
/* testo chiaro inline (var(--cream)/var(--text)) dentro i modali → leggibile */
:root[data-theme="light"] .modal [style*="var(--cream)"],
:root[data-theme="light"] .modal [style*="var(--text)"] { color: #2A1216 !important; }
/* #1 hover voci menu SX in light: prima color:var(--cream) su sfondo chiaro = invisibile */
:root[data-theme="light"] .v2-nav-item:hover,
:root[data-theme="light"] .nav-item:hover {
  color: var(--garnet) !important;
  background: rgba(168,131,48,0.10) !important;
}
/* #3 nome utente header in light */
:root[data-theme="light"] .v2-user-menu .v2-un,
:root[data-theme="light"] .v2-un,
:root[data-theme="light"] .user-info,
:root[data-theme="light"] .account-name { color: #2A1216 !important; }
:root[data-theme="light"] .v2-user-menu .v2-ue { color: #6B4A50 !important; }
/* #13 Tavoli: in light lo sfondo bianco rende poco i numeri oro → tinta più scura */
:root[data-theme="light"] .table-tile {
  background: linear-gradient(145deg, #4A2A30, #38202A) !important;
  border-color: rgba(168,131,48,0.30) !important;
  color: #F5EDD8 !important;
}
:root[data-theme="light"] .table-tile .t-num { color: var(--gold-light) !important; }
:root[data-theme="light"] .table-tile .t-status { color: rgba(245,237,216,0.7) !important; }
:root[data-theme="light"] .vincenzo-header {
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.14), rgba(var(--garnet-rgb),0.04)) !important;
}
:root[data-theme="light"] .vincenzo-bubble {
  background: #FFFFFF !important;
  color: #2A1216 !important;
  border-color: rgba(var(--garnet-rgb),0.08) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   16) FIX MICRO — bug visivi specifici osservati
   ─────────────────────────────────────────────────────────────────────────── */

/* Tom-select dropdown: usa Inter + radius coerenti */
.ts-control { min-height: 40px !important; padding: 6px 12px !important; border-radius: 10px !important; }
.ts-dropdown { border-radius: 10px !important; }

/* Option (select native) — Inter */
option { font-family: 'Manrope', sans-serif !important; }

/* Chart canvas: garantire che eredità font non venga forzata da parent */
canvas { font-family: 'Manrope', sans-serif !important; }

/* Fix Cormorant residuo su contenuti generici dentro .wiz-detail */
.wiz-detail, .wiz-detail * { font-family: 'Manrope', sans-serif !important; }

/* ───────────────────────────────────────────────────────────────────────────
   17) NORMALIZZAZIONE RADII — tutto a scala 8/12/16/pill
   Ridurre 10 valori diversi a 4 standard.
   ─────────────────────────────────────────────────────────────────────────── */

/* Radii piccoli (badge, chip, input piccolo, tag) → 8px */
.badge, .chip, .pill, .tag, .filter-chip,
.drink-badge, .stock-warning, .margin-indicator, .allergen-badge,
.role-badge, .order-table-badge, .order-badge,
.search-bar input, .search-bar select,
.toast, .alert,
.dropdown-item,
.ts-control, .ts-dropdown {
  border-radius: 10px !important;
}

/* Pillole (chip filtri, user menu, btn pill) */
.filter-chip, .btn.pill, .pill,
.v2-user-menu, .user-menu,
.brand-pill {
  border-radius: 999px !important;
}

/* Card / Panel / Modal → 14-16 */
.panel, .stat-card, .wine-card, .conto-card, .card,
.modal-content, .modal-bd .modal,
.empty-state, .v2-empty {
  border-radius: 14px !important;
}

/* Avatar circolare */
.avatar, .v2-avatar, .v2-cantina-avatar, .cantina-avatar {
  border-radius: 50% !important;
}

/* Input/Select/Textarea: 10px (coerente) */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
html body select,
html body textarea {
  border-radius: 10px !important;
}

/* Button: 10px (con eccezione pill via class) */
html body button.btn:not(.pill),
html body .btn:not(.pill) {
  border-radius: 10px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   18) NORMALIZZAZIONE FONT-SIZE — scala 11/12/14/16/18/22/28
   Elimina 9px (illeggibile), 13.3333px, 22px (raro), 24px → mappa a scala.
   ─────────────────────────────────────────────────────────────────────────── */

/* font-size 9px minimum → 11px (accessibilità). Forza tutti i piccoli inline */
html body .role-badge,
html body .badge-count,
html body .allergen-badge,
html body .drink-badge,
html body .stock-warning,
html body .margin-indicator,
html body .filter-chip,
html body .order-badge,
html body .nav-tab,
html body .badge,
html body .chip {
  font-size: 11px !important;
}

/* Catch-all per ogni elemento sotto 11px che NON è SVG text */
html body *:not(svg):not(text):not(canvas):not(g):not(path) {
  /* Imposta minimo 11px tramite override locale dove serve.
     Non possiamo davvero "min-clamp" via CSS, lo facciamo nelle classi badge sopra. */
}

/* Radii sotto 6px → 8px */
html body *:not(svg):not(text):not(canvas):not(g):not(path):not(circle):not(rect):not(ellipse) {
  /* Già gestito via .badge {border-radius:10px}, qui no-op */
}

/* Comune 12px per label/meta secondari */
.crumbs, .stat-label, .nav-section-title, .v2-nav-section-title,
.empty-state-desc, .v2-empty-desc,
.cantina-info .cs, .v2-cantina-info .cs,
.vincenzo-id .ds,
.brand-text .b2,
.account-email, .account-oauth,
.plan-progress-label, .wizard-feat-desc {
  font-size: 12px !important;
}

/* Base UI 14px (default body) */
.btn, button.btn,
.search-bar input, .form-group input, .form-group select, .form-group textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
.vincenzo-bubble {
  font-size: 14px !important;
}

/* h3, panel-title secondario, hero piccolo 18-20px */
h3, .h3, .wizard-step-title, .form-section-title {
  font-size: 18px !important;
}

/* h2 22px, h1 28px (gestiti in sezione 4 sopra) */

/* ───────────────────────────────────────────────────────────────────────────
   19) NORMALIZZAZIONE PADDING/GAP — scala 4/8/12/16/20/24
   ─────────────────────────────────────────────────────────────────────────── */

/* Gap esotici 7px → 8px, 11px → 12px (forzati su flex/grid container) */
.v2-topbar, .topbar { gap: 12px !important; }
.v2-topbar-actions, .topbar-actions { gap: 8px !important; }
.v2-search-global, .search-global { gap: 8px !important; }
.page-head { gap: 16px !important; }
.stats-grid { gap: 16px !important; }
.form-grid { gap: 16px !important; }

/* Panel-body padding canonico 18-20 */
.panel-body { padding: 18px !important; }
.panel-header { padding: 14px 18px !important; }

/* Stat card padding 20 */
.stat-card { padding: 20px 22px !important; }

/* Wine card body padding 14 */
.wine-card .body, .conto-card .body { padding: 14px !important; }

/* ───────────────────────────────────────────────────────────────────────────
   20) CONTRAST / COLORI — testo muted leggibile, no contrasto basso
   ─────────────────────────────────────────────────────────────────────────── */

/* Text muted: garantire min contrast WCAG */
:root { --text-muted: #B59E8C !important; }
:root[data-theme="light"] { --text-muted: #6B4A50 !important; }

/* Placeholder visibile ma non invadente */
::placeholder { opacity: 0.6 !important; }

/* ───────────────────────────────────────────────────────────────────────────
   21) MODAL: header con bottoni icona, close button standard
   ─────────────────────────────────────────────────────────────────────────── */

.modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header .modal-title, .modal-header h2, .modal-header h3 {
  font-size: 18px !important;
  color: var(--cream) !important;
  margin: 0;
}
.modal-body { padding: 20px !important; }
.modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid rgba(var(--gold-rgb),0.10);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Close button moderno */
.modal-close, .btn-close, .close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 140ms;
}
.modal-close:hover, .btn-close:hover, .close:hover {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.20) !important;
  color: var(--state-danger) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   22) TABLE — riallineato a tokens v6
   ─────────────────────────────────────────────────────────────────────────── */

table thead th {
  font-size: 11px !important;
  padding: 12px 14px !important;
}
table tbody td {
  font-size: 13px !important;
  padding: 12px 14px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   23) FOCUS STATE — visibile, accessibile
   ─────────────────────────────────────────────────────────────────────────── */

button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.v2-nav-item:focus-visible, .nav-item:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.45) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   24) FAB WINECENZO — fix overlap su sidebar desktop
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 901px) {
  /* FAB Vincenzo desktop: bottom-right, sopra i FAB scan/+ esistenti, stessa size (44x44) */
  #fabWinecenzo {
    left: auto !important;
    right: 16px !important;
    bottom: calc(141px + 44px + 12px) !important;  /* sopra fabScanWine (141) + 44 + gap */
    width: 44px !important;
    height: 44px !important;
  }
}
@media (max-width: 900px) {
  #fabWinecenzo {
    left: 14px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   25) BUTTONS — UNIFORMITÀ TOTALE: stessa altezza, padding, transition
   Sovrascrive ogni bottone via :where() + html body specificity
   ─────────────────────────────────────────────────────────────────────────── */

html body button.btn,
html body .btn,
html body button.btn-primary,
html body .btn-primary,
html body button.btn-secondary,
html body .btn-secondary,
html body button.btn-gold,
html body .btn-gold,
html body button.btn-outline,
html body .btn-outline,
html body button.btn-success,
html body .btn-success,
html body button.btn-danger,
html body .btn-danger,
html body button.btn-danger-outline,
html body .btn-danger-outline,
html body button.btn-ghost,
html body .btn-ghost {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: transform 140ms cubic-bezier(0.16,1,0.3,1),
              background 220ms,
              border-color 220ms,
              color 220ms,
              box-shadow 220ms !important;
}

/* Stati hover/active uniformi */
html body button.btn:hover,
html body .btn:hover,
html body button.btn-primary:hover,
html body button.btn-gold:hover,
html body button.btn-outline:hover,
html body button.btn-secondary:hover {
  transform: translateY(-1px);
}
html body button.btn:active,
html body .btn:active {
  transform: translateY(0);
}

/* Btn-sm: variante più stretta */
html body button.btn-sm,
html body .btn-sm {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* Btn icon-only (per chiudere, copy, ecc.) */
html body button.btn-icon,
html body .btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

/* Variants di colore — palette canonica */
html body button.btn-gold,
html body .btn-gold {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: var(--gold-light) !important;
  border-color: rgba(var(--gold-rgb),0.40) !important;
  box-shadow: 0 4px 12px rgba(var(--garnet-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html body button.btn-gold:hover,
html body .btn-gold:hover {
  color: var(--gold-soft) !important;
  box-shadow: 0 8px 22px rgba(var(--garnet-rgb),0.45), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

html body button.btn-outline,
html body .btn-outline {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gold-light) !important;
  border-color: rgba(var(--gold-rgb),0.30) !important;
}
html body button.btn-outline:hover,
html body .btn-outline:hover {
  background: rgba(var(--gold-rgb),0.10) !important;
  border-color: rgba(var(--gold-rgb),0.55) !important;
  color: var(--gold) !important;
}

html body button.btn-success,
html body .btn-success {
  background: rgba(82,183,136,0.16) !important;
  color: #6FD0A0 !important;
  border-color: rgba(82,183,136,0.40) !important;
}

html body button.btn-danger,
html body .btn-danger,
html body button.btn-danger-outline,
html body .btn-danger-outline {
  background: transparent !important;
  color: var(--state-danger) !important;
  border-color: rgba(220,38,38,0.40) !important;
}
html body button.btn-danger:hover,
html body button.btn-danger-outline:hover {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.60) !important;
}

html body button.btn-ghost,
html body .btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
}
html body button.btn-ghost:hover {
  color: var(--gold-light) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Bottoni senza classe specifica → default outline */
html body .panel-header button:not(.btn-gold):not(.btn-outline):not(.btn-success):not(.btn-danger):not(.btn-ghost):not(.btn-icon),
html body .panel-body button:not(.btn-gold):not(.btn-outline):not(.btn-success):not(.btn-danger):not(.btn-ghost):not(.btn-icon):not(.btn-primary) {
  background: rgba(255,255,255,0.04);
  color: var(--gold-light);
  border-color: rgba(var(--gold-rgb),0.30);
}

/* ───────────────────────────────────────────────────────────────────────────
   26) CATCH-ALL FONT — ultima difesa contro font esotici residui
   Forza Inter su qualsiasi font non riconosciuto, EXCLUDED display elements
   ─────────────────────────────────────────────────────────────────────────── */

html body p, html body li, html body td, html body span:not(.b1):not(.cn):not(.nm):not(.pl):not(.tab-label),
html body a, html body button:not(.btn-gold):not(.btn-outline) span:not(.b1):not(.cn):not(.nm),
html body label, html body input, html body select, html body textarea, html body option {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* SVG/icons: forzo currentColor per coerenza monocromatica */
html body .panel-header svg,
html body .nav-item svg, html body .v2-nav-item svg,
html body .btn svg, html body button.btn svg,
html body .icon, html body .ico {
  fill: currentColor;
  stroke: currentColor;
}

/* ───────────────────────────────────────────────────────────────────────────
   27) PANEL-TITLE: SVG icon prefix (sostituisce emoji nei title con simbolo standard)
   Aggiunge un piccolo "•" elegante prima del titolo per coerenza visuale
   ─────────────────────────────────────────────────────────────────────────── */

html body .panel-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   28) MODERNIZZAZIONE PALETTE — accent secondario sottile + warm dark
   Aggiunge un touch teal/cyan per stati neutri/info, mantenendo brand
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --accent-soft: #8FA9B8;       /* teal grigio per link/info */
  --accent-warm: var(--gold);       /* gold (alias semantico) */
  --surface-glass-dark: rgba(255,255,255,0.03);
  --surface-glass-light: rgba(255,255,255,0.06);
}
:root[data-theme="light"] {
  --accent-soft: #4A6878;
  --surface-glass-dark: rgba(var(--garnet-rgb),0.03);
  --surface-glass-light: rgba(var(--garnet-rgb),0.06);
}

/* Link discreti */
html body a:not(.btn):not(.nav-item):not(.v2-nav-item) {
  color: var(--accent-soft);
  text-decoration: none;
  transition: color 140ms;
}
html body a:not(.btn):not(.nav-item):not(.v2-nav-item):hover {
  color: var(--gold-light);
}

/* ───────────────────────────────────────────────────────────────────────────
   29) ORDER MODAL — search vino/prodotto prominente, dropdown moderno
   ─────────────────────────────────────────────────────────────────────────── */

/* Search input dell'ordine: più alto, prefix icona, prominente */
#of_item_search,
#wineSearch,
#prodSearch,
#clienteSearchInput {
  height: 48px !important;
  min-height: 48px !important;
  font-size: 15px !important;
  padding: 12px 16px 12px 44px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(var(--gold-rgb),0.25) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A89080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  transition: all 140ms !important;
}
#of_item_search:focus,
#wineSearch:focus,
#prodSearch:focus,
#clienteSearchInput:focus {
  border-color: var(--gold) !important;
  background-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.25) !important;
}

/* Dropdown risultati ordine — moderno con padding e flex item layout */
#of_item_dropdown {
  max-height: 380px !important;
  border-radius: 12px !important;
  background: rgba(46,16,24,0.96) !important;
  border: 1px solid rgba(var(--gold-rgb),0.30) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.25) !important;
  padding: 4px !important;
  margin-top: 6px !important;
  backdrop-filter: blur(12px);
}
#of_item_dropdown > div {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  transition: background 100ms !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#of_item_dropdown > div:hover {
  background: rgba(var(--gold-rgb),0.10) !important;
}
#of_item_dropdown > div > span {
  flex-shrink: 0 !important;
}

/* Modal nuovo ordine: form più ariosa */
.modal-bd .modal { max-width: 580px !important; }
.modal .form-grid { gap: 14px !important; }

/* Form-group label uppercase, inputs altezza coerente */
.form-group label {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   30) WINE/PROD/CLIENT SEARCH BAR — più visibile, hint icona ricerca
   ─────────────────────────────────────────────────────────────────────────── */

.search-bar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap;
}
.search-bar input[type="text"],
.search-bar input:not([type]),
.wine-search-input,
.global-search-input {
  height: 44px !important;
  font-size: 14px !important;
  padding: 10px 16px 10px 40px !important;
  border-radius: 12px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A89080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
}
.search-bar select {
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   31) NUMBER INPUT — modern con stepper coerente
   ─────────────────────────────────────────────────────────────────────────── */

html body input[type="number"] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   32) CHECKBOX/RADIO custom (look moderno gold)
   ─────────────────────────────────────────────────────────────────────────── */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gold) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────────
   33) TOM-SELECT (libreria esterna) — uniforme con design v6
   ─────────────────────────────────────────────────────────────────────────── */

.ts-control {
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--gold-rgb),0.18) !important;
}
.ts-control:focus-within,
.ts-control.focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.20) !important;
}
.ts-dropdown {
  background: rgba(46,16,24,0.96) !important;
  border: 1px solid rgba(var(--gold-rgb),0.30) !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
  padding: 4px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.50) !important;
}
.ts-dropdown .option,
.ts-dropdown [data-selectable] {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  cursor: pointer;
}
.ts-dropdown .option.active,
.ts-dropdown [data-selectable].active {
  background: rgba(var(--gold-rgb),0.14) !important;
  color: var(--gold-light) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   34) QTY STEPPER — input numerico con +/- buttons
   ─────────────────────────────────────────────────────────────────────────── */

.qty-stepper {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--gold-rgb),0.20) !important;
  background: rgba(255,255,255,0.04) !important;
  height: 44px !important;
  width: 100% !important;
  max-width: 180px !important;
}
.qty-stepper input[type="number"] {
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  flex: 1 1 60px !important;
  min-width: 50px !important;
  max-width: 100% !important;
  width: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 4px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}
.qty-stepper input[type="number"]:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb),0.30) !important;
}
.qty-stepper .qty-btn {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
  height: 100% !important;
  min-height: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--gold-light) !important;
  cursor: pointer;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 140ms;
  padding: 0 !important;
  border-radius: 0 !important;
}
.qty-stepper .qty-btn:hover {
  background: rgba(var(--gold-rgb),0.18) !important;
  color: var(--gold) !important;
}
.qty-stepper .qty-btn:active {
  background: rgba(var(--gold-rgb),0.30) !important;
}
.qty-stepper .qty-minus {
  border-right: 1px solid rgba(var(--gold-rgb),0.15) !important;
}
.qty-stepper .qty-plus {
  border-left: 1px solid rgba(var(--gold-rgb),0.15) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   35) PILLOLE TABS — sostituisce select con poche options
   ─────────────────────────────────────────────────────────────────────────── */

.pillole-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(var(--gold-rgb),0.10) !important;
  width: 100%;
}
.pillola-tab {
  flex: 1 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16,1,0.3,1) !important;
  border: none !important;
  text-align: center;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pillola-tab:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--cream) !important;
}
.pillola-tab.active {
  background: linear-gradient(135deg, var(--garnet), var(--ruby)) !important;
  color: var(--gold-light) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(var(--garnet-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   36) LOADING OVERLAY — spinner moderno per operazioni pesanti
   ─────────────────────────────────────────────────────────────────────────── */

.dy-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,16,20,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: dyOverlayIn 240ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes dyOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dy-loading-card {
  background: rgba(46,16,24,0.95);
  border: 1px solid rgba(var(--gold-rgb),0.30);
  border-radius: 16px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.50);
  min-width: 280px;
}
.dy-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(var(--gold-rgb),0.20);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: dySpin 0.8s linear infinite;
}
@keyframes dySpin {
  to { transform: rotate(360deg); }
}
.dy-loading-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  font-weight: 600;
  text-align: center;
}
.dy-loading-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────────────
   37) CANTINA INFO font Inter (richiesta cliente — non Cormorant)
   ─────────────────────────────────────────────────────────────────────────── */

html body .cantina-info .cn,
html body .v2-cantina-info .cn,
html body .cantina-switcher .cn,
html body .v2-cantina-switcher .cn,
html body .cantina-name,
html body span.cantina-name {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  font-style: normal !important;
  color: var(--cream) !important;
}
/* Dyonis 2026-06-26: nome cantina (sidebar) ILLEGGIBILE in light — era var(--cream) #F5EDD8 su
   sfondo chiaro. Override light → var(--text-strong) (garnet, leggibile). NB: usare :root[...]
   body (NON :root html: :root È già html → un html annidato non esiste e la regola non matcha). */
:root[data-theme="light"] body .cantina-info .cn,
:root[data-theme="light"] body .v2-cantina-info .cn,
:root[data-theme="light"] body .cantina-switcher .cn,
:root[data-theme="light"] body .v2-cantina-switcher .cn,
:root[data-theme="light"] body .cantina-name,
:root[data-theme="light"] body span.cantina-name {
  color: var(--text-strong) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   38) PALETTE — alleggerimento dark (richiesta cliente: meno scuro)
   ─────────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"], :root:not([data-theme]) {
  --dark: #221A1F;          /* da #1A0A0D — leggermente più chiaro/grigio caldo */
  --dark-soft: #2E2228;     /* da #2A1216 */
  --dark-deep: #1A1318;     /* da #120608 */
  --surface-base: #221A1F;
  --surface-raised: rgba(255,255,255,0.06);    /* più visibile */
  --surface-overlay: rgba(255,255,255,0.10);
  --border-subtle: rgba(var(--gold-rgb),0.14);
  --border-default: rgba(var(--gold-rgb),0.22);
}

html body {
  background: var(--surface-base) !important;
}
html body::before {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--garnet-rgb),0.34) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--burgundy-rgb),0.22) 0%, transparent 55%),
    var(--surface-base) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   39) WINE CARD MODERNIZZAZIONE — info hierarchy, font, layout grid
   ─────────────────────────────────────────────────────────────────────────── */

/* Layout grid moderno per la vista wine card */
html body #wineList,
html body .wines-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px;
}

/* Wine card moderna: bg lift, hover prominente, layout pulito */
html body .wine-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(var(--gold-rgb),0.12) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30) !important;
  cursor: pointer;
  position: relative;
}
html body .wine-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--gold-rgb),0.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25) !important;
}

/* Wine card image area — ratio 4:5 vino */
html body .wine-card .wine-photo,
html body .wine-card .wine-img,
html body .wine-card img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  background: rgba(0,0,0,0.30) !important;
}

/* Wine card body content */
html body .wine-card .wine-body,
html body .wine-card > div:not(.wine-photo):not(.wine-img):not(img) {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

/* Wine name — display Cormorant 16px */
html body .wine-card .wine-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  color: var(--cream) !important;
  margin-bottom: 2px !important;
}

/* Wine meta (produttore + annata) — Inter italic */
html body .wine-card .wine-meta {
  font-family: 'Manrope', sans-serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

/* Wine price — Inter bold con € sottile */
html body .wine-card .wine-price {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
  margin-top: 4px !important;
}

/* Wine stock — Inter sottile */
html body .wine-card .wine-stock {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0 !important;
}

/* Drink window badge — pillola elegante */
html body .wine-card .drink-badge,
html body .wine-card .stock-warning,
html body .wine-card .margin-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  width: fit-content !important;
}

/* Tipo badge (Rosso/Bianco/etc) sopra l'immagine */
html body .wine-card .wine-type-badge,
html body .wine-card [class*="type-"]:first-child {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ───────────────────────────────────────────────────────────────────────────
   40) BRAND-MARK SIDEBAR — usa icona PWA (coerenza app/mobile/web)
   ─────────────────────────────────────────────────────────────────────────── */

html body .v2-brand-mark,
html body .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 1px solid rgba(var(--gold-rgb),0.30) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .v2-brand-mark img,
html body .brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   41) FIX BUG AUDIT 2026-05-19 (utente)
   ─────────────────────────────────────────────────────────────────────────── */

/* Bug #1: Tom-Select wrapper duplica box "Vino/Bottiglia" sotto le pillole.
   Nasconde ts-wrapper quando .pillole-tabs è già presente nello stesso form-group. */
html body .form-group:has(> .pillole-tabs) .ts-wrapper,
html body .form-group:has(.pillole-tabs) > .ts-wrapper {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
}

/* Bug #2: Topbar search "Q" coperta da icona search inline.
   Aumento padding-left così la Q non viene tagliata. */
html body .v2-search-global input,
html body .search-global input,
html body #v2SearchTrigger input {
  padding-left: 44px !important;
}

/* Bug #3: Wine card nome troncato a 2+ righe con ellipsis (non tagliato hard) */
html body .wine-card .wine-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 2.4em;  /* riserva spazio per 2 righe */
}

/* Bug #4: Drink-window badge troppo largo, deve essere fit-content */
html body .wine-card .drink-badge,
html body .wine-card .stock-warning,
html body .wine-card .margin-indicator {
  white-space: nowrap !important;
  max-width: fit-content !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
}

/* Bug #5: Wine card body più ariosa, no clipping */
html body .wine-card {
  min-height: auto !important;
}
html body .wine-card .wine-body,
html body .wine-card > div:not(.wine-photo):not(.wine-img):not(img) {
  padding: 12px 14px !important;
  gap: 4px !important;
}

/* Bug #6: Wine meta truncate se troppo lungo */
html body .wine-card .wine-meta {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
}

/* Bug #7: Stelle rating Unicode → invisibili. Le forzo monocromatic gold */
html body [class*="stars"], html body .rating-stars,
html body .wine-card .stars {
  color: var(--gold) !important;
  font-size: 14px !important;
  letter-spacing: 2px;
}

/* Bug #8: Dashboard stat cards troppo strette → label spezzate in 2 righe.
   Aumento min-width grid item a 200px così la griglia fa 7 cards max per riga. */
html body .stats-grid,
html body #dashStats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}
html body .stat-card {
  padding: 18px 20px !important;
  min-width: 200px;
}
html body .stat-card .stat-label,
html body .stat-card > div:not(.stat-num) {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

/* Bug #9: Page-head margin spinto in alto + topbar search padding */
html body .v2-topbar #v2SearchTrigger,
html body .v2-search-global {
  max-width: 560px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   42) FIX AUDIT ROUND 2 (16 pagine)
   ─────────────────────────────────────────────────────────────────────────── */

/* Bug #11: Bottiglie Aperte empty state allineato sinistra invece di center */
html body #page-bottiglie .panel,
html body #page-bottiglie > div:not(.search-bar):not(.period-bar) {
  text-align: center;
}
html body #page-bottiglie .panel.empty,
html body #page-bottiglie .empty-state {
  margin: 0 auto !important;
  max-width: 100%;
}

/* Bug #13: Network search "Cerca: nome vino, produ..." placeholder troncato */
html body #page-network input[type="text"]::placeholder {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Bug #15: Vincenzo textarea placeholder emoji 🖼️ leggibile */
html body .vincenzo-input textarea::placeholder,
html body .vincenzo-input input::placeholder {
  font-size: 13px !important;
  opacity: 0.5 !important;
  line-height: 1.5 !important;
}

/* Bug #16: Prodotti card foto emoji 🍺 — wrap with consistent square box */
html body #page-prodotti .product-card img,
html body #page-prodotti .product-card .product-img,
html body #page-prodotti .prodotto-card img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: rgba(255,255,255,0.06);
  padding: 4px;
}

/* Bug #17: Allergeni pillole — colore uniforme, no emoji prominent.
   2026-06-26 FIX: il selettore era `[class*="allerg"]` (TROPPO largo) e catturava
   ANCHE `.allergen-grid` (il contenitore-griglia dei checkbox nel modal Prodotto) e
   i checkbox `.pf_allergen`, forzandoli a inline-flex + pillola rossa → la griglia
   collassava in una riga orizzontale rosa che sbordava. Ristretto al SOLO badge. */
html body .allergen-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: rgba(220,38,38,0.10) !important;
  border: 1px solid rgba(220,38,38,0.25) !important;
  color: #E8A0A0 !important;
}

/* Allergeni — griglia checkbox nel modal Prodotto (2026-06-26).
   I checkbox ereditavano altezza/padding da `.form-group input` → diventavano box
   alti ~41px, disallineati di 18px dal numero/nome. Le label erano forzate a
   display:block + uppercase muted da `.form-group label`. Qui ripristino una
   griglia pulita: label flex centrata, nome leggibile (no uppercase), checkbox
   quadrato 16px allineato col badge numerato. */
html body .allergen-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
  padding: 4px 2px !important;
  line-height: 1.2 !important;
}
html body .allergen-grid input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  accent-color: var(--gold);
}

/* Bug extra: Strutture cantina scaffale cards — icone top-right (▲✏×) troppo piccole */
html body .scaffale-card .actions,
html body .scaffale-actions {
  display: flex;
  gap: 6px;
}
html body .scaffale-card .actions button,
html body .scaffale-actions button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 140ms;
}
html body .scaffale-card .actions button:hover,
html body .scaffale-actions button:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06) !important;
}

/* Page title generale: aggiungo style uniforme per le pagine che hanno header */
html body .page-head .page-title h1,
html body .page-content > h1:first-child,
html body .page > h1:first-child {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
  margin-bottom: 8px !important;
}

/* Subtitle sotto page title */
html body .page-subtitle,
html body .page-description,
html body .page > p:first-of-type {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
  font-style: italic;
}

/* Periodi pill bar (Oggi/Settimana/Mese) — uniforme */
html body .period-bar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
html body .period-bar button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
}

/* Cancella sovrapposizioni FAB ↔ sidebar (sotto desktop) */
@media (min-width: 901px) {
  /* I FAB +/scan/order si comportano correttamente — il Vincenzo è già spostato in 24)
     Aggiungo gap orizzontale tra fab gold (Add/Scan/Order) e bordo destro */
  #fabAddWine, #fabAddOrdine, #fabScanWine {
    right: 20px !important;
  }
}

/* Dyonis 2026-06-26: pagina TAG VINI illeggibile in light mode.
   I chip .wtag.t-* (sia le pill della palette-picker, sia i chip nelle righe tag)
   usano testo pastello CHIARO (#E0C580, #E8A0A0…) su tint translucido: ok su sfondo
   scuro, INVISIBILE su sfondo cream (chiaro su chiaro). In light forzo testo SCURO
   saturo + tint leggermente più marcato per garantire contrasto.
   Specificità (0,3,0) > v2-skin (0,2,0) e carica dopo → vince. */
:root[data-theme="light"] .wtag.t-gold     { background: rgba(168,131,48,0.16); border-color: rgba(168,131,48,0.50); color: #6E5210; }
:root[data-theme="light"] .wtag.t-bordeaux { background: rgba(123,29,38,0.12); border-color: rgba(123,29,38,0.45); color: #7B1D26; }
:root[data-theme="light"] .wtag.t-forest   { background: rgba(46,90,62,0.14);  border-color: rgba(46,90,62,0.48);  color: #214A30; }
:root[data-theme="light"] .wtag.t-mauve    { background: rgba(122,72,96,0.14); border-color: rgba(122,72,96,0.48); color: #6E2F4C; }
:root[data-theme="light"] .wtag.t-amber    { background: rgba(183,118,45,0.14); border-color: rgba(183,118,45,0.48); color: #834719; }
:root[data-theme="light"] .wtag.t-teal     { background: rgba(42,102,112,0.14); border-color: rgba(42,102,112,0.48); color: #1C5560; }
:root[data-theme="light"] .wtag.t-olive    { background: rgba(107,122,47,0.16); border-color: rgba(107,122,47,0.50); color: #46500F; }
:root[data-theme="light"] .wtag.t-stone    { background: rgba(74,69,64,0.14);   border-color: rgba(74,69,64,0.50);  color: #45413B; }
:root[data-theme="light"] .wtag.t-cream    { background: rgba(168,144,128,0.20); border-color: rgba(150,120,96,0.50); color: #6B4A2E; }
/* base .wtag senza palette + nome tag (.tn) + testo input form → cream è invisibile in light */
:root[data-theme="light"] body .wtag      { color: var(--text-primary); }
:root[data-theme="light"] body .tag-row .tn { color: var(--text-primary); }
:root[data-theme="light"] body .tag-form input { color: var(--text-primary); }

/* End of v6-canonical.css */

/* ═════════════════════════════════════════════════════════════
   Vini mobile — card orizzontale: foto sx a tutta altezza, info dx
   (Variante A scelta dal cliente, 2026-07-10). Solo layout: i colori
   light/dark restano alle regole sopra. I :not(.wine-img) alzano la
   specificità sopra il catch-all "html body .wine-card > div:not(...)".
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body .wines-grid { gap: 10px !important; }
  html body .wine-card {
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 14px !important;
  }
  html body .wine-card > div.wine-thumb:not(.wine-img) {
    width: 116px !important;
    min-width: 116px !important;
    flex: 0 0 116px !important;
    height: auto !important;
    min-height: 132px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .wine-card img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  html body .wine-card > div.wine-info:not(.wine-img) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  html body .wine-card .wine-name  { font-size: 17px !important; }
  html body .wine-card .wine-meta  { font-size: 12.5px !important; }
  html body .wine-card .wine-price { font-size: 14px !important; }
  html body .wine-card .wine-stock {
    font-size: 11.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  html body .wine-card .wine-stock.ok::before,
  html body .wine-card .wine-stock.low::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
  }
  html body .wine-card .wine-stock.low::before { background: #ef4444; }
  html body .wine-card .btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
    min-height: 34px !important;
  }
}