/* ==========================================================================
   Contact Radar — design system "tech"
   Un solo accento (verde radar), una sola famiglia di grigi (blu notte),
   vetro scuro, griglia, dati in monospazio. Caricato DOPO gli stili delle pagine.
   ========================================================================== */

@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: "Geist Mono";
  src: url("/static/fonts/geist-mono-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;
}

:root {
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #070a10;
  --surface: #0d131c;
  --surface-2: #121926;
  --line: #1a2332;
  --line-strong: #2a3548;

  --text: #f1f4f9;
  --text-2: #a8b1be;
  --text-3: #8a94a3;
  --text-4: #6f7a8a;

  --accent: #1fe39a;
  --accent-hi: #6dffc4;
  --accent-strong: #00c978;
  --accent-ink: #03140c;
  --accent-soft: rgba(31, 227, 154, 0.10);
  --accent-line: rgba(31, 227, 154, 0.38);

  --danger: #f87171;
  --warn: #f59e0b;
  --info: #60a5fa;

  --radius: 14px;
  --radius-sm: 10px;
  --glass: linear-gradient(180deg, rgba(20, 29, 44, 0.72), rgba(11, 17, 27, 0.72));
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 44px -24px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }

body, button, input, select, textarea { font-family: var(--font); }
body {
  position: relative;
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 520px at 50% -160px, rgba(31, 227, 154, 0.13), transparent 70%),
    radial-gradient(640px 420px at 100% 6%, rgba(80, 140, 255, 0.08), transparent 70%),
    radial-gradient(520px 380px at 0% 40%, rgba(31, 227, 154, 0.05), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  padding: 0 16px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* griglia tecnica che sfuma verso il basso */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 200, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 78%);
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.mono, .gauge-val, .ag-stat-num, .tab-badge, .stato-num, .vend-stat .val, .ag-ora-t, .lead-row-phone, .phone-badge, .coda-table td:nth-child(3), .in-coda-text strong {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table, input[type=date], input[type=time] { font-variant-numeric: tabular-nums; }
::selection { background: rgba(31, 227, 154, 0.3); }

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

/* ----- accessibilità ----- */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 1000;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; 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(--accent); 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: 18px;
  padding: 14px 0 12px; margin-bottom: 22px;
  background: linear-gradient(to bottom, rgba(7, 10, 16, 0.92) 70%, rgba(7, 10, 16, 0));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand-mark { display: block; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 22px -2px rgba(31, 227, 154, 0.6); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.brand-text small { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }

.nav { display: flex; align-items: center; gap: 4px; 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-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav a.active {
  color: var(--accent-hi); background: var(--accent-soft); border-color: var(--accent-line);
  text-shadow: 0 0 10px rgba(31, 227, 154, 0.55);
  box-shadow: 0 0 20px -6px rgba(31, 227, 154, 0.5), inset 0 0 12px rgba(31, 227, 154, 0.06);
}

.account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--accent-line);
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-hi); text-transform: uppercase;
  box-shadow: 0 0 14px -4px rgba(31, 227, 154, 0.5);
}
.account-name { font-size: 13px; font-weight: 550; color: var(--text); line-height: 1.2; }
.account-role { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text-4); letter-spacing: 0.08em; text-transform: uppercase; }
.btn-esci {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); text-decoration: none; padding: 8px 12px; 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(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.06); }

.impersona {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); color: #fcd34d;
  border-radius: var(--radius-sm); padding: 9px 14px; margin-bottom: 18px; font-size: 13px;
}
.impersona b { color: var(--text); font-weight: 600; }
.impersona a { color: var(--accent-hi); font-weight: 600; text-decoration: none; }
.impersona a:hover { text-decoration: underline; }

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

/* ----- titoli di sezione e vetro ----- */
.section-title, .section-label {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding-left: 28px; margin-bottom: 12px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); text-shadow: 0 0 14px rgba(31, 227, 154, 0.4);
}
.section-title::before, .section-label::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent); box-shadow: 0 0 8px var(--accent);
}
.section-title .hint { font-size: 11px; font-weight: 500; color: var(--text-4); letter-spacing: 0.1em; text-shadow: none; }

.card-box {
  background:
    linear-gradient(90deg, transparent, rgba(31, 227, 154, 0.55), transparent) top / 100% 1px no-repeat,
    var(--glass);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 26px; box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
}

/* ----- interazioni di base su tutti i controlli ----- */
button, [role=button], .tab-card, .periodo-pill, .nav a, select { transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, transform 0.12s, box-shadow 0.2s; }
button:not(:disabled), .tab-card, .periodo-pill, select { cursor: pointer; }
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(1px) scale(0.99); }
button:disabled { cursor: not-allowed; }
input, select, textarea { border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(31, 227, 154, 0.16), 0 0 18px -4px rgba(31, 227, 154, 0.35) !important; outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-4); }

/* pulsanti principali: bagliore verde */
.btn-accedi, #btn-cerca, .btn-verde, .btn-complete-next:not(:disabled), .btn-salva-modifica {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 10px 30px -10px rgba(31, 227, 154, 0.7) !important;
}
.btn-accedi:hover:not(:disabled), #btn-cerca:hover, .btn-verde:hover, .btn-complete-next:hover:not(:disabled), .btn-salva-modifica:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 12px 38px -8px rgba(31, 227, 154, 0.9) !important;
}

/* ----- schede, riepiloghi, indicatori ----- */
.tab-card, .ag-stat, .gauge-card, .vend-card, .lead-row-card, .ag-card {
  background: var(--glass) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tab-card:hover, .gauge-card:hover, .vend-card:hover { border-color: var(--accent-line) !important; }
.tab-card.active { border-color: var(--accent-line) !important; box-shadow: 0 0 26px -8px rgba(31, 227, 154, 0.55), inset 0 0 18px rgba(31, 227, 154, 0.07) !important; }
.tab-title { font-family: var(--mono); font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; }
.tab-card.active .tab-title { color: var(--accent-hi); }
.tab-card.active .tab-badge { box-shadow: 0 0 14px rgba(31, 227, 154, 0.6); }

.gauge-label, .ag-stat-label, .vend-stat .lbl, .gauge-sub {
  font-family: var(--mono); font-size: 10.5px !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500 !important; color: var(--text-3) !important;
}
.gauge-label { color: var(--text) !important; }
.gauge-val { text-shadow: 0 0 22px rgba(255, 255, 255, 0.15); }
.gauge-card:nth-child(1) .gauge-arc, .gauge-card:nth-child(2) .gauge-arc { filter: drop-shadow(0 0 5px rgba(31, 227, 154, 0.75)); }
.gauge-card:nth-child(3) .gauge-arc { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.75)); }
.gauge-card:nth-child(4) .gauge-arc { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.75)); }
.ag-stat.verde .ag-stat-num { text-shadow: 0 0 18px rgba(31, 227, 154, 0.55); }
.ag-stat.rosso .ag-stat-num { text-shadow: 0 0 18px rgba(248, 113, 113, 0.5); }

.prom-table th, .coda-table th, .modal-label, .ag-sezione-titolo, details.ag-details > summary, .ag-followup label {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px !important; font-weight: 600 !important;
}
.prom-table th, .coda-table th { color: var(--text-4); }
.modal-label { color: var(--accent) !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 { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12px; }
.ag-card.oggi { box-shadow: -10px 0 24px -14px rgba(31, 227, 154, 0.6); }
.ag-card.ritardo { box-shadow: -10px 0 24px -14px rgba(248, 113, 113, 0.5); }

/* ----- radar nell'intestazione della Home ----- */
@keyframes radarSweep { to { transform: rotate(360deg); } }
.home-hero {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 22, 34, 0.7), rgba(8, 13, 21, 0.7));
  box-shadow: var(--shadow);
}
.home-hero::before {
  inset: 0 !important; animation: none !important;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 52px, rgba(31, 227, 154, 0.09) 53px 54px),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(31, 227, 154, 0.07) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(31, 227, 154, 0.07) 50%, transparent calc(50% + 0.5px)),
    radial-gradient(circle at 50% 50%, rgba(31, 227, 154, 0.12), transparent 62%) !important;
}
.home-hero::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(31, 227, 154, 0.26), rgba(31, 227, 154, 0) 22%, rgba(31, 227, 154, 0) 100%);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 68%); mask-image: radial-gradient(circle, #000 15%, transparent 68%);
  animation: radarSweep 7s linear infinite;
}
.home-hero h1 { text-shadow: 0 0 30px rgba(255, 255, 255, 0.12); }
.radar-dot { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent); }

/* ----- finestre modali ----- */
.modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(3, 6, 11, 0.74) !important; }
.modal-box { border-radius: 18px !important; border-color: var(--line-strong) !important; background: var(--glass), #0b1119 !important; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(31, 227, 154, 0.06) !important; }

/* ----- notifiche ----- */
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--info);
  color: var(--text); font-size: 13.5px; line-height: 1.45; padding: 12px 14px; border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.75);
  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(--accent); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.75), -8px 0 24px -14px rgba(31, 227, 154, 0.6); }
.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: stato del sistema ----- */
.site-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
  border-top: 1px solid var(--line); padding: 16px 0 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-4);
}
.site-foot .gruppo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.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(--accent); display: inline-block; box-shadow: 0 0 10px var(--accent); }
.stato.ok i { animation: respiro 2.8s ease-in-out infinite; }
.stato.problema { color: #fcd34d; }
.stato.problema i { background: var(--warn); box-shadow: 0 0 10px 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(--accent); }
@keyframes respiro { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 227, 154, 0.5), 0 0 10px var(--accent); } 60% { box-shadow: 0 0 0 6px rgba(31, 227, 154, 0), 0 0 10px var(--accent); } }

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

/* ----- 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; }
}