/* ==========================================================================
   Orlando Radar — design system "studio"
   Carta avorio, inchiostro navy, un solo accento d'ottone per i dettagli.
   Serif (Newsreader) per titoli e cifre, Geist per l'interfaccia.
   Caricato DOPO gli stili delle pagine: qui stanno le regole comuni.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-latin-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-latin-ext-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-latin-ext-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* carta */
  --bg: #f4efe5;
  --field: #fffefb;
  --surface: #fffdf8;
  --surface-2: #f9f5ec;
  --surface-3: #efe8d9;
  --surface-hover: #e8dfcc;
  --line: #e6ddca;
  --line-strong: #d3c7ae;

  /* inchiostro */
  --text: #101a30;
  --text-2: #39435a;
  --text-3: #5f677b;
  --text-4: #747b8d;

  /* accento: navy (azioni, selezioni) */
  --accent: #172a50;
  --accent-hi: #2a4585;
  --accent-strong: #0f1d3a;
  --accent-ink: #f8f3e5;
  --accent-rgb: 23, 42, 80;
  --accent-soft: rgba(23, 42, 80, 0.06);
  --accent-line: rgba(23, 42, 80, 0.30);

  /* ottone: dettagli e filetti */
  --gold: #a98441;
  --gold-strong: #7b5e26;
  --gold-rgb: 169, 132, 65;
  --gold-soft: rgba(169, 132, 65, 0.14);
  --gold-line: rgba(169, 132, 65, 0.5);

  --danger: #a1352d;  --danger-rgb: 161, 53, 45;
  --warn: #8f6412;    --warn-rgb: 143, 100, 18;
  --info: #2b5797;    --info-rgb: 43, 87, 151;
  --ok: #2f6a4f;      --ok-rgb: 47, 106, 79;

  --radius: 14px;
  --radius-sm: 10px;
  --glass: linear-gradient(180deg, #fffefb, #fffcf5);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(16, 26, 48, 0.05), 0 22px 40px -30px rgba(16, 26, 48, 0.38);
  --shadow-pop: 0 28px 70px -24px rgba(16, 26, 48, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; background: var(--bg); }

body, button, input, select, textarea { font-family: var(--font); }
body {
  position: relative;
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 380px at 50% -140px, rgba(var(--gold-rgb), 0.16), transparent 72%),
    radial-gradient(700px 480px at 100% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  padding: 0 20px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.55;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
table, input[type=date], input[type=time], .num { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: rgba(var(--gold-rgb), 0.32); }

.app-container { position: relative; z-index: 1; width: 100%; max-width: 1040px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1; padding-bottom: 36px; }

/* ----- accessibilità ----- */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 1000;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 13px;
  padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top 0.15s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ----- barra superiore ----- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 18px 0 14px; margin-bottom: 30px;
  background: linear-gradient(to bottom, rgba(244, 239, 229, 0.96) 78%, rgba(244, 239, 229, 0));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: linear-gradient(90deg, var(--gold-line), var(--line) 30%, var(--line) 70%, transparent); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), 0.7); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.brand-text small { font-size: 9.5px; font-weight: 600; color: var(--gold-strong); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; white-space: nowrap; text-decoration: none; color: var(--text-3);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  padding: 10px 14px; border-radius: 8px;
  transition: color 0.15s, background-color 0.15s;
}
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); font-weight: 600; }
.nav a.active::after { transform: scaleX(1); }

.account { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--gold-line);
  font-family: var(--serif); font-size: 16px; font-weight: 500; text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold-line);
}
.account-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.account-role { display: block; font-size: 10px; font-weight: 600; color: var(--text-4); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1px; }
.btn-esci {
  font-size: 12.5px; font-weight: 500; color: var(--text-3); text-decoration: none;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.btn-esci:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.5); background: rgba(var(--danger-rgb), 0.05); }

.impersona {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-strong);
  border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 20px; font-size: 13px;
}
.impersona b { color: var(--text); font-weight: 600; }
.impersona a { color: var(--accent); font-weight: 600; text-decoration: none; }
.impersona a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  body { padding: 0 14px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding-top: 14px; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -6px; }
  .account { margin-left: auto; }
  .account-name, .account-role { display: none; }
}

/* ----- titoli di sezione e pannelli ----- */
.section-title {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-left: 30px; margin: 0 0 12px;
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-strong);
}
.section-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--gold); }
.section-title .hint { font-size: 11px; font-weight: 500; color: var(--text-4); letter-spacing: 0.08em; text-transform: none; }
.section-title .link { cursor: pointer; text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--text-3); }
.section-title .link:hover { color: var(--accent); }
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}

.card-box {
  background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 30px; box-shadow: var(--shadow);
  overflow-x: auto;
}

/* ----- controlli ----- */
button, [role=button], .tab-card, .periodo-pill, select { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.2s; }
button:not(:disabled), .tab-card, .periodo-pill, select { cursor: pointer; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; }
input, select, textarea { border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; color: var(--text); }
input, select, textarea { background: var(--field); border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.2) !important; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
select { color: var(--text); }
input[type=date], input[type=time] { color-scheme: light; }

/* pulsanti principali: navy con filetto d'ottone */
.btn-accedi, #btn-cerca, .btn-verde, .btn-complete-next:not(:disabled), .btn-salva-modifica, .btn-primario {
  background: linear-gradient(180deg, #1f3566, #14254a) !important;
  color: var(--accent-ink) !important; border: 1px solid #0f1d3a !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 12px 24px -14px rgba(15, 29, 58, 0.85) !important;
}
.btn-accedi:hover:not(:disabled), #btn-cerca:hover, .btn-verde:hover, .btn-complete-next:hover:not(:disabled), .btn-salva-modifica:hover, .btn-primario:hover {
  background: linear-gradient(180deg, #26407a, #182d5a) !important;
}
.btn-secondario {
  background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong);
  padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 600;
}
.btn-secondario:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface-2); }

/* ----- riepiloghi, indicatori, schede ----- */
.tab-card, .ag-stat, .gauge-card, .vend-card, .lead-row-card, .ag-card, .section-card, .stat-tile {
  background: var(--glass) !important;
  box-shadow: var(--shadow);
}
.tab-card:hover, .gauge-card:hover, .vend-card:hover { border-color: var(--gold-line) !important; }
.tab-card.active { border-color: var(--accent-line) !important; background: linear-gradient(180deg, #fffdf8, #f6f0e2) !important; box-shadow: 0 0 0 1px var(--accent-line), var(--shadow); }
.tab-title { font-family: var(--font); font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.005em; }
.tab-badge { font-variant-numeric: lining-nums tabular-nums; }
.tab-card.active .tab-badge { background: var(--accent) !important; color: var(--accent-ink) !important; }

.gauge-label, .ag-stat-label, .vend-stat .lbl, .gauge-sub, .stat-label {
  font-size: 10.5px !important; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600 !important; color: var(--text-3) !important;
}
.gauge-label { color: var(--text) !important; }
.gauge-sub { color: var(--text-4) !important; letter-spacing: 0.08em; margin-top: 3px; }
.gauge-val, .ag-stat-num, .vend-stat .val, .ag-ora-t, .stat-num {
  font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em;
}
.gauge-val { font-size: 32px !important; }
.ag-stat-num { font-size: 30px !important; }
.ag-ora-t { font-size: 24px !important; }
.ag-ora-t.nessuna { font-family: var(--font); font-size: 11px !important; letter-spacing: 0.04em; }

.prom-table th, .coda-table th, .modal-label, .ag-sezione-titolo, details.ag-details > summary, .ag-followup label {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px !important; font-weight: 600 !important;
}
.prom-table th, .coda-table th { color: var(--text-3); border-bottom-color: var(--line-strong) !important; }
.prom-table td, .coda-table td { border-bottom-color: var(--line) !important; }
.modal-label { color: var(--gold-strong) !important; }
.ag-sezione-titolo { color: var(--text-2); }
.ag-sezione-titolo.rosso { color: var(--danger); } .ag-sezione-titolo.oggi { color: var(--accent); } .ag-sezione-titolo.ambra { color: var(--warn); } .ag-sezione-titolo.blu { color: var(--info); }
.ag-sezione-titolo .ag-sub { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text-3); }
.ag-card.oggi { box-shadow: var(--shadow), -8px 0 20px -16px rgba(var(--accent-rgb), 0.6); }

/* ----- intestazione della Home ----- */
.home-hero { position: relative; padding: 6px 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.home-hero .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-strong); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.home-hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.home-hero h1 { margin: 0; font-size: clamp(34px, 5.4vw, 52px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; }
.home-hero h1 em { font-style: italic; color: var(--accent-hi); }
.home-hero .hero-sub { margin: 12px 0 0; font-size: 14px; color: var(--text-3); }

/* ----- finestre modali ----- */
.modal-overlay { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: rgba(15, 26, 48, 0.46) !important; }
.modal-box { border-radius: 18px !important; border: 1px solid var(--line-strong) !important; background: var(--surface) !important; box-shadow: var(--shadow-pop) !important; }
.modal-titolo { font-family: var(--serif); font-weight: 500 !important; font-size: 24px !important; letter-spacing: -0.015em; }
.btn-chiudi-modal { background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line-strong) !important; }
.btn-chiudi-modal:hover { color: var(--text) !important; border-color: var(--text-3) !important; }
.modal-actions { border-top-color: var(--line) !important; }

/* ----- notifiche ----- */
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 36px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--info);
  color: var(--text); font-size: 13.5px; line-height: 1.45; padding: 13px 16px; border-radius: 12px;
  box-shadow: var(--shadow-pop);
  animation: toastIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.toast.errore { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--gold); }
.toast.esce { animation: toastOut 0.18s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }

/* ----- piè di pagina ----- */
.site-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
  border-top: 1px solid var(--line); padding: 18px 0 26px;
  font-size: 12px; color: var(--text-4);
}
.site-foot .gruppo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-foot .marchio { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--text-3); }
.stato { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 500; }
.stato i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.stato.ok i { animation: respiro 3s ease-in-out infinite; }
.stato.problema { color: var(--warn); }
.stato.problema i { background: var(--warn); }
.sicuro { display: inline-flex; align-items: center; gap: 6px; }
.sicuro[hidden] { display: none; }
.sicuro svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--gold-strong); }
@keyframes respiro { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.4); } 60% { box-shadow: 0 0 0 6px rgba(var(--ok-rgb), 0); } }

/* ----- componenti della consulenza paghe (Chiama + pannello modifica) ----- */
.f-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.f-grid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .f-grid { grid-template-columns: minmax(0, 1fr); } }
.f-field label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.f-field input, .f-field select {
  width: 100%; padding: 10px 12px; font-size: 13.5px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 9px; outline: none; color: var(--text);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2);
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: lining-nums;
}
.chip:hover { border-color: var(--gold); color: var(--text); background: var(--gold-soft); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stima-box {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-soft), rgba(var(--gold-rgb), 0.06)); border: 1px solid var(--gold-line);
}
.stima-box .st-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-strong); }
.stima-box .st-val { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--text); line-height: 1; font-variant-numeric: lining-nums; }
.stima-box .st-val small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--text-3); }
.stima-box .st-nota { flex-basis: 100%; font-size: 12px; color: var(--text-3); margin: 0; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.badge.gold { color: var(--gold-strong); background: var(--gold-soft); border-color: var(--gold-line); }
.badge.navy { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.badge.ok { color: var(--ok); background: rgba(var(--ok-rgb), 0.08); border-color: rgba(var(--ok-rgb), 0.35); }
.badge.warn { color: var(--warn); background: rgba(var(--warn-rgb), 0.08); border-color: rgba(var(--warn-rgb), 0.35); }
.badge.danger { color: var(--danger); background: rgba(var(--danger-rgb), 0.07); border-color: rgba(var(--danger-rgb), 0.35); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; position: relative; }
.stat-tile.hero { background: linear-gradient(160deg, #1b2f5e, #0f1d3a) !important; border-color: #0f1d3a; color: var(--accent-ink); }
.stat-tile.hero .stat-label { color: rgba(248, 243, 229, 0.72) !important; }
.stat-tile.hero .stat-num { color: #fff; }
.stat-tile.hero .stat-nota { color: rgba(248, 243, 229, 0.68); }
.stat-tile.hero::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.stat-num { font-size: 34px; line-height: 1.1; margin-top: 8px; color: var(--text); }
.stat-num small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.stat-tile.hero .stat-num small { color: rgba(248, 243, 229, 0.7); }
.stat-nota { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ----- tabelle larghe su telefono ----- */
@media (max-width: 760px) {
  .prom-table { min-width: 540px; }
  .card-box { padding: 16px; }
}

/* ----- movimento ridotto ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* canone: importo evidenziato nella scheda */
.canone-input { display: inline-flex; align-items: baseline; gap: 6px; background: var(--field); border: 1px solid var(--gold-line); border-radius: 10px; padding: 6px 12px; }
.canone-input span { font-family: var(--serif); font-size: 22px; color: var(--gold-strong); }
.canone-input input { width: 92px; border: none !important; background: transparent !important; box-shadow: none !important; font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--text); padding: 0; text-align: right; border-radius: 0; font-variant-numeric: lining-nums tabular-nums; }
.canone-input input:focus { box-shadow: none !important; }
.canone-input:focus-within { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.2); border-color: var(--gold); }
.canone-input small { font-size: 12px; color: var(--text-3); }

/* pannello di modifica: più largo, collegamenti in riga */
.modal-box { max-width: 680px !important; }
.modal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; align-items: center; }
.modal-links a { margin: 0 !important; display: inline-block !important; }
.modal-box select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); font-size: 13px; background: var(--field); outline: none; }
.modal-box .f-field input, .modal-box .f-field select { padding: 10px 12px; font-size: 13.5px; }
.modal-label { margin-top: 22px !important; }

/* ----- finestra modale (Home, Interazioni) ----- */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.aperto { display: flex; }
.modal-box { padding: 28px 28px 24px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.modal-close-x { background: none; border: none; color: var(--text-3); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 8px; flex-shrink: 0; }
.modal-close-x:hover { color: var(--text); }
.modal-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.modal-telefono { display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.modal-telefono:hover { text-decoration: underline; }
.modal-maps-link { color: var(--gold-strong); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.modal-maps-link:hover { text-decoration: underline; }
.modal-trascrizione-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.modal-label { margin: 22px 0 10px; }
.modal-esiti { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-esito-btn { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); padding: 9px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.modal-esito-btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.modal-esito-btn.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px -12px rgba(var(--accent-rgb), 0.8); }
.modal-row { display: flex; gap: 10px; }
.modal-row > * { flex: 1; min-width: 0; }
.modal-box input, .modal-box textarea { width: 100%; background: var(--field); border: 1px solid var(--line-strong); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; outline: none; }
.modal-box textarea { resize: vertical; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 18px; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.btn-elimina-testo { background: none; border: none; color: var(--danger); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.btn-elimina-testo:hover { opacity: 0.75; }
.btn-salva-modifica { padding: 11px 24px; border-radius: 9px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.btn-chiudi-modal { padding: 11px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
@media (max-width: 560px) { .modal-row { flex-direction: column; } .modal-box { padding: 22px 18px 20px; } }

/* ----- liste di Interazioni ----- */
a.stat-tile { color: inherit; display: block; transition: transform 0.25s ease, border-color 0.25s ease; }
a.stat-tile:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.lead-row-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.lead-row-card.cliente { border-left: 3px solid var(--gold); }
.lead-main { flex: 1 1 260px; min-width: 0; }
.lead-row-name { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.lead-dett { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.lead-riep { font-size: 12.5px; color: var(--gold-strong); font-weight: 500; margin-top: 4px; }
.note-text { font-size: 12.5px; color: var(--text-2); margin-top: 6px; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.lead-contatti { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.lead-row-phone { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.lead-row-phone:hover, .lead-mail:hover { text-decoration: underline; }
.lead-mail { font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.lead-badges, .lead-azioni { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.canone-grande { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
.canone-grande small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--text-3); }
.btn-riapri, .btn-modifica, .ag-btn { background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-riapri:hover, .btn-modifica:hover, .ag-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.btn-modifica { color: var(--accent); }
.ag-btn.ok { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ag-btn.ok:hover { background: var(--accent-hi); color: #fff; }
.periodo-pill { font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 15px !important; }
.periodo-pill.active { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.ag-vuoto { border: 1px dashed var(--line-strong) !important; background: var(--surface-2); border-radius: 14px; color: var(--text-3) !important; }
@media (max-width: 640px) { .lead-side, .lead-contatti, .lead-badges, .lead-azioni { align-items: flex-start; justify-content: flex-start; } }

.modal-box .canone-input input, .canone-input input { font-family: var(--serif); font-size: 28px; font-weight: 500; padding: 0; border: none; background: transparent; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.canone-input input::-webkit-outer-spin-button, .canone-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.modal-box .canone-input input { width: 140px; }

.stat-num small { white-space: nowrap; }
@media (max-width: 760px) {
  .stat-tile { padding: 16px 14px 14px; }
  .stat-num { font-size: 28px; }
  .stat-label { font-size: 10px !important; letter-spacing: 0.1em; }
  .home-hero { padding-bottom: 20px; margin-bottom: 20px; }
}