/* ==================================================================
 * REFRESH 2026-10 — interfaccia più moderna (titolare 18/10: «rendila
 * più moderna: grafiche, colori, bottoni, testi, tutto»).
 *
 * Strato caricato DOPO app.css e mobile.css: ridefinisce i token e i
 * componenti base senza toccare la logica delle pagine. Per tornare al
 * vecchio aspetto basta togliere il <link> in templates/base.html.
 *
 * Direzione: strumento di lavoro calmo e preciso (stile Linear/Stripe).
 *  - Inter come unico carattere, scala compatta, niente MAIUSCOLETTO
 *    sulle etichette (era il segno più datato del pannello).
 *  - Neutri freddi quasi senza colore + un solo accento: il verde gofor360.
 *  - Sidebar su un secondo livello di neutro; voce attiva «in rilievo».
 *  - Bottoni e campi di altezza fissa, angoli 8px, nessun salto in hover.
 * ================================================================== */

:root {
  /* superfici */
  --bg: #f3f4f6;
  --bg-elev: #ffffff;
  --bg-elev-2: #f3f4f6;
  --bg-elev-3: #e6e8ec;
  --bg-side: #eceef1;           /* sidebar: secondo livello di neutro */
  --glass-bg: var(--bg-side);

  /* linee */
  --border: #e3e6ea;
  --border-strong: #cfd4db;

  /* testo (contrasto AA verificato su bianco e su --bg) */
  --fg: #0e1217;
  --fg-muted: #4f5966;          /* 7.0:1 su bianco */
  --fg-dim: #7d8794;            /* 3.6:1: solo testo secondario grande o icone */

  /* accento: verde gofor360 */
  --accent: #00805f;
  --accent-2: #00966f;
  --accent-hover: #006b50;
  --accent-fg: #ffffff;
  --accent-bg: #e4f3ee;
  --accent-border: #b6dfd0;
  --accent-grad: var(--accent);
  --ring: 0 0 0 3px rgba(0, 128, 95, 0.22);

  /* stati: più sobri, stessi nomi */
  --success: #13803d;  --success-bg: #e6f5ec; --success-border: #bfe6cd;
  --warning: #a45a06;  --warning-bg: #fdf3e1; --warning-border: #f3d7a6; --warning-tint: #fffaf0;
  --danger:  #c8203f;  --danger-bg:  #fdecef; --danger-border:  #f5c4ce; --danger-tint:  #fff5f6;
  --info:    #2457c5;  --info-bg:    #e9effc; --info-border:    #c7d6f6;

  --radius-xs: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-xs: 0 1px 1px rgba(14, 18, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 18, 23, 0.06), 0 0 0 1px rgba(14, 18, 23, 0.02);
  --shadow-md: 0 6px 16px -4px rgba(14, 18, 23, 0.10), 0 2px 4px -2px rgba(14, 18, 23, 0.06);
  --shadow-lg: 0 20px 44px -12px rgba(14, 18, 23, 0.22), 0 6px 14px -6px rgba(14, 18, 23, 0.10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --h-control: 36px;
  --h-control-sm: 30px;
}

:root[data-theme="dark"] {
  --bg: #0c0e11;
  --bg-elev: #14171c;
  --bg-elev-2: #1a1e24;
  --bg-elev-3: #252a32;
  --bg-side: #101317;
  --glass-bg: var(--bg-side);

  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.14);

  --fg: #e9ecf1;
  --fg-muted: #a1aab7;
  --fg-dim: #6c7583;

  --accent: #2fcf9f;
  --accent-2: #4fdcb2;
  --accent-hover: #55dfb6;
  --accent-fg: #04241a;
  --accent-bg: rgba(47, 207, 159, 0.13);
  --accent-border: rgba(47, 207, 159, 0.34);
  --accent-grad: var(--accent);
  --ring: 0 0 0 3px rgba(47, 207, 159, 0.30);

  --success: #4ade80;  --success-bg: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.30);
  --warning: #f5b94a;  --warning-bg: rgba(245, 185, 74, 0.13); --warning-border: rgba(245, 185, 74, 0.30); --warning-tint: rgba(245, 185, 74, 0.08);
  --danger:  #fb7185;  --danger-bg:  rgba(251, 113, 133, 0.13); --danger-border:  rgba(251, 113, 133, 0.32); --danger-tint: rgba(251, 113, 133, 0.08);
  --info:    #7aa7ff;  --info-bg:    rgba(122, 167, 255, 0.13); --info-border:    rgba(122, 167, 255, 0.30);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.75), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
}

/* ---------- base ---------- */
html, body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01", "ss03";
  background-image: none;
}
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
code, .mono, .col-mono { font-family: var(--font-mono); font-size: 12px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
a:hover { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
:where(.num, td, .big, .kpi-value) { font-variant-numeric: tabular-nums; }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  gap: 14px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sidebar .brand { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; padding: 2px 8px 6px; }
.sidebar .brand .dot { width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.nav a, .nav-group > summary, .nav-children a {
  min-height: 32px;
  border-radius: 8px;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.nav a { padding: 6px 10px; font-size: 13.5px; font-weight: 500; color: var(--fg-muted); }
.nav a:hover, .nav-children a:hover, .nav-group > summary:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); }
.nav a.active, .nav-children a.active {
  background: var(--bg-elev);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.nav a.active svg { color: var(--accent); }

/* intestazioni dei gruppi: niente più maiuscolo */
.nav-group > summary {
  padding: 6px 10px;
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.011em;
  color: var(--fg-muted);
}
.nav-group[open] > summary { color: var(--fg); }
.nav-group > summary svg:first-child { opacity: .75; }
.nav-children { margin-left: 18px; padding: 2px 0 6px 8px; border-left: 1px solid var(--border-strong); gap: 1px; }
.nav-children a { padding: 5px 10px; font-size: 13px; color: var(--fg-muted); }
.sidebar-nav-badge { font-variant-numeric: tabular-nums; }

.theme-toggle {
  border-radius: 8px; box-shadow: none; background: transparent; border-color: var(--border-strong);
  min-height: 34px;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.sidebar-footer { border-top-color: var(--border); }

/* ---------- area principale ---------- */
.main { padding: 28px 36px 48px; }
.page-header { margin-bottom: 20px; align-items: flex-start; }
.page-header h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.25; }
.page-header .sub { font-size: 13.5px; margin-top: 4px; max-width: 75ch; line-height: 1.5; }

/* ---------- etichette: frase normale, non MAIUSCOLO ---------- */
label {
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--fg-muted);
  margin: 14px 0 6px;
}
.card h3, .row-menu-head, .proposal-table thead tr, .role-badge, .action-badge,
.cat-strip .sub, .cap-row > span {
  text-transform: none;
  letter-spacing: 0;
}
.card h3 { font-size: 12.5px; font-weight: 550; }
.row-menu-head { font-size: 12px; font-weight: 600; }

/* ---------- campi ---------- */
input[type="email"], input[type="text"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"],
input[type="datetime-local"], input[type="url"], input[type="tel"], select {
  min-height: var(--h-control);
  padding: 7px 11px;
  border-radius: 8px;
  border-color: var(--border-strong);
  background: var(--bg-elev);
  box-shadow: var(--shadow-xs);
}
textarea { padding: 9px 11px; border-radius: 8px; border-color: var(--border-strong); box-shadow: var(--shadow-xs); line-height: 1.5; }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--fg) 28%, var(--border-strong));
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--fg-dim); opacity: 1; }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8794' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- bottoni ---------- */
button, .btn {
  min-height: var(--h-control);
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 550;
  font-size: 13.5px;
  letter-spacing: -0.011em;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
button:hover, .btn:hover {
  transform: none;
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--fg) 22%, var(--border-strong));
  box-shadow: var(--shadow-xs);
}
button:active, .btn:active { transform: none; background: var(--bg-elev-3); }
button:focus-visible, .btn:focus-visible { box-shadow: var(--ring); }

button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}
button.primary:hover, .btn.primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg);
  filter: none; transform: none;
}
button.primary:active, .btn.primary:active { filter: brightness(.96); }
button.danger, .btn.danger { background: var(--bg-elev); color: var(--danger); border-color: var(--danger-border); box-shadow: var(--shadow-xs); }
button.danger:hover, .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
button.small, .btn.small, .btn.tiny, button.tiny {
  min-height: var(--h-control-sm);
  padding: 4px 11px;
  font-size: 12.5px;
  border-radius: 7px;
}
button.wa, .btn.wa { box-shadow: var(--shadow-xs); }

/* ---------- pill e badge ---------- */
.pill {
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.55;
  border-radius: 999px;
}
.role-badge, .action-badge { border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; }
.amazon-badge { border-radius: 4px; letter-spacing: .02em; }

/* ---------- card e sezioni ---------- */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}
.card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
a.card:hover, .card.clickable:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .big { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }
.section { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.section-header { padding: 13px 18px; }
.section-header h2 { font-size: 14.5px; font-weight: 650; letter-spacing: -0.015em; }
.section-empty { color: var(--fg-muted); font-size: 13.5px; line-height: 1.55; }

/* ---------- tabelle ---------- */
table th {
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 12px;
  font-weight: 550;
  color: var(--fg-muted);
  background: var(--bg-elev-2);
  padding: 9px 16px;
}
table td { padding: 11px 16px; }
table tbody tr { transition: background-color .12s var(--ease); }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--fg) 2.5%, transparent); }

/* ---------- interruttori (toggle) ---------- */
.ai-toggle input {
  width: 36px; height: 20px;
  background: var(--bg-elev-3);
  border-color: var(--border-strong);
}
.ai-toggle input::after { width: 14px; height: 14px; top: 2px; left: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s var(--ease); }
.ai-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.ai-toggle input:checked::after { left: 18px; }

/* segmented / toggle-group */
.toggle-group { border-radius: 9px; background: var(--bg-elev-2); border-color: var(--border); padding: 3px; }
.toggle-group label {
  text-transform: none; letter-spacing: -0.005em; font-size: 13px; font-weight: 550;
  margin: 0; border-radius: 7px; color: var(--fg-muted);
}

/* ---------- inbox ---------- */
.inbox-tabs { background: var(--bg-elev-2); border-radius: 9px; padding: 3px; gap: 2px; }
.inbox-tabs a { border-radius: 7px; font-weight: 550; font-size: 13px; }
.inbox-tabs a:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
/* Niente barra colorata a sinistra (righe non lette / selezionate): il
   «non letto» si vede dal grassetto e da un punto, la selezione dal fondo. */
.inbox-row { border-left: 0 !important; position: relative; transition: background-color .12s var(--ease); }
.inbox-row.unread .from { font-weight: 650; }
.inbox-row.unread .from > :first-child::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 7px; vertical-align: 1px; flex: none;
}
.inbox-row.selected { background: var(--accent-bg); }
.inbox-row .when { font-variant-numeric: tabular-nums; }

/* ---------- menu a comparsa delle righe ---------- */
.row-menu > summary { border-radius: 8px; box-shadow: var(--shadow-xs); height: var(--h-control-sm); }
.row-menu-pop { border-radius: 10px; box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

/* ---------- accesso ---------- */
.auth-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- dashboard: coda di lavoro ---------- */
.dash-block { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.dash-block-head { padding: 14px 18px 12px; }
.dash-block-head h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.dash-block-head .sub { font-size: 13px; }
.worklist { gap: 8px; padding: 12px 14px 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.work-tile {
  grid-template-columns: 34px 1fr 16px;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.work-tile:hover { transform: none; background: var(--bg-elev); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.work-tile .work-icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bg-elev-2); color: var(--fg-dim); font-size: 0;
}
.work-tile.has .work-icon { background: var(--accent-bg); color: var(--accent); }
.work-tile.alert.has .work-icon { background: var(--danger-bg); color: var(--danger); }
.work-tile .work-count { font-size: 21px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.work-tile.has .work-count { color: var(--fg); }
.work-tile .work-label { font-size: 13px; color: var(--fg-muted); margin-top: 1px; }
.work-tile:not(.has) .work-label { color: var(--fg-dim); }
.work-tile .work-foot { font-size: 12px; color: var(--fg-muted); }
.work-tile .work-arrow { color: var(--fg-dim); display: grid; place-items: center; }
.work-tile:hover .work-arrow { color: var(--accent); transform: translateX(2px); }
.work-tile.alert.has { background: var(--danger-tint); border-color: var(--danger-border); }
.cat-chip { border-radius: 999px; }
.dash-primary .wl-group { margin: 0; }
.dash-primary .wl-group-label { margin: 0; padding: 14px 18px 0; }
.dash-primary .wl-group-label .wl-group-n { color: var(--fg-dim); font-weight: 500; }

/* bottoni-icona senza cornice (chiudi sidebar ecc.): non devono prendere
   altezza e bordo dei bottoni normali */
.nav-collapse-btn, .theme-toggle .ic, .composer-attach-btn {
  min-height: 0;
}
.nav-collapse-btn { border: 0; box-shadow: none; background: transparent; width: 28px; height: 28px; padding: 0; border-radius: 7px; }
.nav-collapse-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: none; }

/* ---------- niente MAIUSCOLETTO nemmeno negli stili delle singole pagine ----------
   (elenco estratto dai <style> dei template il 18/10; restano maiuscole solo
   le iniziali degli avatar). Il prefisso :root batte le regole locali. */
:root .action-section h4,
:root .asg-subhead,
:root .assign-control .assign-lbl,
:root .assign-lbl,
:root .asst-role,
:root .av-form-row label,
:root .bl-f label,
:root .cb-field label,
:root .cmt-stat-l,
:root .cmt-status,
:root .cod-tbl td[data-label]::before,
:root .esc-ch,
:root .flow-who,
:root .giac-svi label,
:root .giac-svi-grid label,
:root .igo-form label,
:root .in-card h3,
:root .in-row label,
:root .meta-day-sep span,
:root .more-section-title,
:root .od-card h3,
:root .on-card h3,
:root .on-row label,
:root .ord-stat .lbl,
:root .ord-table th,
:root .proposal-banner .pill-muted,
:root .proposal-banner .pill-warn,
:root .q-section-title,
:root .q-stat .lbl,
:root .q-table th,
:root .qr-card h3,
:root .qr-channel-pill,
:root .recip-table th,
:root .settings-nav .sn-label,
:root .sq-field label,
:root .stat-label,
:root .wa-context h4,
:root .inbox-divider,
:root .wa-list-divider,
:root .dash-hero-eyebrow,
:root .wl-group-label {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"] {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------- telefono ---------- */
.inbox-tabs { scrollbar-width: none; }
.inbox-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 560px) {
  .worklist { grid-template-columns: 1fr !important; }
  .main { padding: 18px 14px 96px; }
  .page-header h1 { font-size: 20px; }
}

/* ---------- icone lineari (templates/_icons.html) ---------- */
svg.ico { flex: none; display: inline-block; vertical-align: -0.18em; }
button svg.ico, .btn svg.ico { vertical-align: 0; }

/* ---------- schede di stato semplici (.tabs: COD, indirizzi) ----------
   prima erano link nudi in fila; ora segmentate come le schede della inbox */
.tabs {
  display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  background: var(--bg-elev-2); border-radius: 9px; padding: 3px;
  margin: 0 0 14px; width: fit-content; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > a {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 12px; border-radius: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 550; color: var(--fg-muted); text-decoration: none;
}
.tabs > a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); text-decoration: none; }
.tabs > a.active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-sm); }
.tabs > a .pill { padding: 0 7px; font-size: 11.5px; }

/* voci dei menu a comparsa con icona SVG */
.row-menu-pop .menu-item .mi-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim); }
.row-menu-pop .menu-item.danger .mi-ico { color: inherit; }