:root {
  --bg: #eef1f6;
  --bg-2: #f7f9fc;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #5b6475;
  --line: #e6e9f0;
  --line-soft: #eff2f7;
  --subtle: #fbfcfe;
  --primary: #5558e8;
  --primary-d: #4338ca;
  --primary-2: #8b5cf6;
  --accent: #06b6d4;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --ok: #10b981;
  --ok-bg: #ecfdf5;
  --warn: #f59e0b;
  --warn-bg: #fffbeb;
  /* Esiti: testo («-ink») e fondo tenue («-soft») di badge e riquadri. Gli
     -ink sono ridefiniti nei temi scuri; i -soft seguono da soli il tema.
     Nei temi chiari gli -ink sono un tono piu' scuri di quelli del sistema
     grafico, per stare sopra 4,5:1 anche sul fondo grigio della pagina. */
  --ok-ink: #065f46;
  --warn-ink: #854d0e;
  --danger-ink: #991b1b;
  /* rgba e non color-mix: lo stesso colore, ma letto bene da tutti i
     browser e dalla prova visiva (tools/ui_check.py). */
  --ok-soft: rgba(16,185,129,.16);
  --warn-soft: rgba(245,158,11,.16);
  --danger-soft: rgba(220,38,38,.14);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent);
  --neutral-soft: color-mix(in srgb, var(--muted) 14%, transparent);
  --sh-pop: 0 12px 32px -8px rgba(13,20,38,.18);
  /* Nomi alternativi usati in giro (prima mai definiti: valeva il ripiego). */
  --card: var(--panel);
  --text: var(--ink);
  --border: var(--line);
  --surface-high: var(--line);       /* binari e bordi dei grafici: si devono vedere */
  --text-secondary: var(--muted);
  --err: var(--danger-ink);          /* testo rosso (avvisi del Banco Hotel) */
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Marchio (tasto «Guida»): testo --brand su --brand-bg, e al passaggio del
     mouse --brand-on su --brand. Ridefinito per tema, sempre >= 4,5:1. */
  --brand: #4338ca;
  --brand-on: #fff;
  --brand-bg: var(--primary-soft);
  --brand-line: color-mix(in srgb, var(--primary) 35%, transparent);
  --code-bg: #11151c;
  --code-fg: #d7dde6;
  /* Scala dei caratteri e degli spazi del sistema grafico (DECISIONI-2.0):
     uguale in tutti i temi. */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 36px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 12px 28px -8px rgba(15,23,42,.18);
  --sidebar-1: #1e1b4b;
  --sidebar-2: #312e81;
  --sidebar-ink: #c7cbe6;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rail: 64px;
  --side-w: 246px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  line-height: 1.55;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-d); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary); }
h1 { font-size: 1.4rem; margin: 0 0 1rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 0 0 .7rem; font-weight: 650; letter-spacing: -.01em; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.muted { color: var(--muted); }

/* ===== Layout (shell: sidebar fissa a tutta altezza, solo il contenuto scorre) ===== */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--rail); flex-shrink: 0;
  background: linear-gradient(165deg, var(--sidebar-2), var(--sidebar-1) 70%);
  color: var(--sidebar-ink);
  display: flex; flex-direction: column; padding: .55rem .5rem;
  height: 100vh; z-index: 50;
  transition: width .18s ease;
}
html.nav-pinned body .sidebar { width: var(--side-w); padding: .8rem .7rem; }

/* Testata rail: pulsante ☰ + logo */
.side-head { display: flex; align-items: center; gap: .35rem; padding: .1rem .1rem .35rem; }
.nav-toggle { width: 44px; height: 40px; flex: none; display: grid; place-items: center;
  background: transparent; border: none; color: var(--sidebar-ink); cursor: pointer;
  border-radius: var(--radius-sm); transition: background .15s, color .15s; }
.nav-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.brand { font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .5rem; min-width: 0; }
html:not(.nav-pinned) body .side-head .brand { display: none; }
.brand-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 4px 12px rgba(99,102,241,.5); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; margin-top: .3rem; overflow-y: auto; overflow-x: visible; }
/* Barra di scorrimento sottile e fondo sfumato: si vede che il menu continua sotto. */
.sidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.07); }
.nav-group-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: #7f84ab; font-weight: 700; padding: .35rem .7rem .15rem; }
html:not(.nav-pinned) body .nav-group-label { display: none; }

.sidebar nav a {
  position: relative;
  color: var(--sidebar-ink); padding: .55rem .65rem; font-size: .9rem; font-weight: 500;
  border-radius: var(--radius-sm); display: flex; align-items: center; gap: .7rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
html:not(.nav-pinned) body .sidebar nav a { justify-content: center; padding: .55rem 0; }
.sidebar nav a .ico { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active { background: linear-gradient(135deg, rgba(99,102,241,.9), rgba(139,92,246,.85)); color: #fff; box-shadow: 0 6px 16px -6px rgba(99,102,241,.7); }

/* Etichette: nascoste nel rail, visibili quando espanso */
.sidebar .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:not(.nav-pinned) body .sidebar .lbl { display: none; }

/* Tooltip col nome dell'icona (rail compresso): elemento agganciato al body
   da ui.js, posizione fixed, così non viene mai ritagliato dallo scroll. */
.nav-tip {
  position: fixed; transform: translateY(-50%); z-index: 300; pointer-events: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  padding: .32rem .6rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow-lg);
}

.side-foot { margin-top: auto; flex: 0 0 auto; padding-top: .4rem; }
.logout { padding: .6rem .1rem 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: .4rem; }
/* Riga utente + Esci affiancati (tema sopra, admin accanto a Esci) */
.logout-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.logout-row .whoami { margin-bottom: 0; flex: 1; min-width: 0; }
.logout-row .btn { flex: none; }
html:not(.nav-pinned) body .logout-row { flex-direction: column; gap: .35rem; }
.whoami { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: #e2e4f3; margin-bottom: .55rem; padding: 0 .2rem; min-width: 0; }
/* .whoami come link a "Il mio telefono": eredita colore, senza sottolineatura. */
a.whoami { text-decoration: none; border-radius: 8px; transition: background .12s ease; }
a.whoami:hover { background: rgba(255,255,255,.08); color: #fff; }
.whoami .lbl { overflow: hidden; text-overflow: ellipsis; }
html:not(.nav-pinned) body .whoami { justify-content: center; }
html:not(.nav-pinned) body .whoami .lbl { display: none; }
html:not(.nav-pinned) body .logout .btn .lbl { display: none; }
html:not(.nav-pinned) body .theme-switch { display: none; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; font-weight: 700; font-size: .85rem; }

.tenant-chip { display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: .45rem .6rem; margin: .1rem .1rem .35rem; min-width: 0; }
.tenant-badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 800; font-size: .95rem; }
.tenant-meta { display: flex; flex-direction: column; min-width: 0; }
html:not(.nav-pinned) body .tenant-chip { justify-content: center; background: transparent; border-color: transparent; padding: .2rem 0; margin-bottom: .1rem; }
html:not(.nav-pinned) body .tenant-meta { display: none; }
.tenant-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: #a5a9d0; }
.tenant-name { color: #fff; font-weight: 650; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-switch { font-size: .72rem; color: #a5b4fc; flex: none; }

/* Contenuto allineato subito dopo il rail (niente centratura: nessuno spazio
   morto a sinistra su schermi larghi), con un limite ampio per la leggibilità. */
.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 1.6rem 2.2rem; max-width: 1720px; width: 100%; }

/* Pulsante flottante + sfondo per il drawer su mobile (nascosti su desktop) */
.nav-fab { display: none; }
.nav-scrim { display: none; }

/* ===== Auth ===== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(99,102,241,.18), transparent), linear-gradient(180deg, var(--bg-2), var(--bg)); }
.brand-lg { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }

/* Login a due pannelli */
.login-split { display: grid; grid-template-columns: 1.05fr .95fr; width: min(920px, 100%);
  min-height: 520px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.35));
  border: 1px solid var(--line); }
.login-hero { padding: 2.6rem 2.2rem; color: #fff; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(600px 320px at 20% 8%, rgba(53,214,255,.20), transparent),
    linear-gradient(160deg, #0D1A33, #070C18 70%); position: relative; }
/* Il marchio e' l'icona dell'app (static/app-icon-512.png). */
.login-logo { display: block; width: 64px; height: 64px; border-radius: 16px; margin-bottom: 1.1rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -8px rgba(0,0,0,.6); }
.login-hero h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.login-tag { font-size: 1.02rem; opacity: .92; margin: .4rem 0 1.4rem; max-width: 30ch; }
.login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem;
  font-size: .93rem; opacity: .95; }
.login-points li { display: flex; align-items: center; gap: .55rem; }
.login-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(53,214,255,.16); color: #35D6FF; font-size: .75rem; flex: none; }
.login-panel { background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card { width: 100%; max-width: 340px; text-align: left; padding: 0; background: none; border: none;
  box-shadow: none; margin: 0; }
.login-brand-mobile { display: none; text-align: center; margin-bottom: .6rem; }
.login-brand-ico { width: 40px; height: 40px; border-radius: 10px; vertical-align: middle; margin-right: .3rem; }
.login-org { margin: .1rem 0 .5rem; font-weight: 600; color: var(--ink-soft); }
.login-title { margin: 0 0 .1rem; font-size: 1.4rem; }
.login-form { margin-top: 1rem; }
.login-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .9rem; }
.login-form input { display: block; width: 100%; margin-top: .35rem; padding: .62rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s; }
.login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.login-form .btn-block { margin-top: .3rem; }
/* «Mostra password» dentro il campo, a destra (lo accende login.js). */
.pw-field { margin-bottom: .9rem; }
.login-form .pw-field label { margin-bottom: 0; }
.pw-wrap { position: relative; display: block; margin-top: .35rem; }
.login-form .pw-wrap input { margin-top: 0; padding-right: 5.5rem; }
/* Edge mette il suo «occhio» e la sua crocetta: ne basta uno, il nostro. */
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }
/* --ink-soft: contrasto almeno 4,5:1 sul fondo della scheda in tutti i temi. */
.pw-toggle { position: absolute; top: .3rem; bottom: .3rem; right: .3rem; padding: 0 .6rem; border: 0;
  border-radius: 6px; background: transparent; color: var(--ink-soft); font: 600 .8rem var(--font); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.pw-toggle:hover { background: var(--subtle); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-forgot { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.login-forgot:hover { color: var(--ink); }
@media (pointer: coarse) {
  .login-form .pw-wrap input { min-height: 44px; }
  .pw-toggle { top: 0; bottom: 0; right: 0; min-width: 44px; min-height: 44px; }
  .login-forgot { display: inline-block; padding: .65rem 0; }
}
/* Lo spazio dell'avviso resta sempre: quando compare la scheda non salta. */
.caps-warn { margin: -.5rem 0 .9rem; padding: .35rem .6rem; border: 1px solid var(--warn); border-radius: 8px;
  background: var(--warn-bg); color: var(--ink); font-size: .8rem; font-weight: 600; min-height: 1.95rem; }
.caps-warn:empty { visibility: hidden; }
.login-foot { margin-top: 1.1rem; font-size: .82rem; text-align: center; }
/* Chi fa il centralino: logo di Telematica Torino alto 20px, nel colore dei
   testi secondari (il disegno fa da maschera, il colore lo da' il tema). */
.login-maker { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 1.2rem 0 0;
  font-size: .78rem; color: var(--muted); }
.login-maker-logo { display: inline-block; height: 20px; aspect-ratio: 169 / 72; background: var(--muted);
  -webkit-mask: url(/static/logo-telematica-torino.png) center / contain no-repeat;
  mask: url(/static/logo-telematica-torino.png) center / contain no-repeat; }

@media (max-width: 720px) {
  .login-split { grid-template-columns: 1fr; min-height: 0; }
  .login-hero { display: none; }
  .login-brand-mobile { display: block; }
}

/* ===== Cards ===== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.stat { position: relative; text-align: left; display: block; overflow: hidden; transition: border-color .16s; padding-left: 1.25rem; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sec, var(--primary)); }
/* Numeri: niente testo sfumato (copriva anche i colori .sec-ok/.sec-fail) e
   niente riquadro che si solleva: il numero si legge e basta. */
.stat-num { font-size: 1.95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .88rem; font-weight: 500; }
.empty { text-align: center; padding: 2.2rem 1.4rem; }

/* Utility di layout per ridurre lo scroll: griglie a più colonne */
.grid { display: grid; gap: 1rem; align-items: start; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.side { grid-template-columns: 1.6fr 1fr; }
.grid > .card { margin-bottom: 0; }
@media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.side { grid-template-columns: 1fr; } }

/* ===== Page head ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
/* Tastino «Guida» accanto al titolo (lo mette guida.js): apre in una nuova
   finestra il capitolo del manuale che parla della pagina. */
.guida-btn { display: inline-flex; align-items: center; gap: .3rem; margin-left: .7rem; padding: .18rem .6rem; font-size: .78rem; font-weight: 600; letter-spacing: 0; vertical-align: middle; color: var(--brand, #6d4de6); background: var(--brand-bg, #efeafe); border: 1px solid var(--brand-line, #d8cdfb); border-radius: 999px; text-decoration: none; white-space: nowrap; }
.guida-btn:hover { background: var(--brand, #6d4de6); color: var(--brand-on, #fff); text-decoration: none; }

/* ===== Status / picker ===== */
.status-bar { padding: .7rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: .5rem; }
.status-bar.ok { background: var(--ok-bg); color: #047857; border: 1px solid #a7f3d0; }
.status-bar.err { background: var(--danger-bg); color: #b91c1c; border: 1px solid #fecaca; }
.tenant-picker { display: flex; align-items: center; gap: .7rem; }
.tenant-picker label { font-weight: 600; font-size: .9rem; margin: 0; white-space: nowrap; }
.tenant-picker select { flex: 1; }

/* ===== Tables ===== */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.table th, .table td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.table th { background: var(--subtle); color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--subtle); }
.table tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.actions form { display: inline; }

/* ===== Badges: pillola con pallino =====
   Il colore dice l'esito, uguale in tutti i temi: verde va, giallo da
   guardare, rosso da sistemare. Senza variante e' neutro (grigio tenue). */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.4; background: var(--neutral-soft); color: var(--ink-soft); }
.badge::before { content: ""; display: inline-block; flex: none; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: currentColor; vertical-align: middle; }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.err { background: var(--danger-soft); color: var(--danger-ink); }
/* Il pallino solo quando il badge dice un esito (non su «—», «?», versioni...). */
.badge:not(.ok):not(.warn):not(.err)::before { display: none; }
/* Badge vuoto: solo il pallino (es. messaggio non letto). */
.badge:empty { padding: .3rem; }
.badge:empty::before { margin-right: 0; }
/* inline-flex non deve vincere sull'attributo hidden (contatori a zero). */
.badge[hidden] { display: none; }

/* ===== Forms ===== */
.form label { display: block; margin-bottom: .85rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.form input[type=text], .form input[type=password], .form input[type=number],
.form input[type=time], .form input[type=date], .form input[type=file],
/* email/tel/url/search restavano fuori e uscivano come campicini in linea. */
.form input[type=email], .form input[type=tel], .form input[type=url],
.form input[type=search], .form select {
  width: 100%; margin-top: .4rem; padding: .62rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .95rem; font-weight: 400; background: var(--panel);
  font-family: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.form small { display: block; font-weight: 400; margin-top: .3rem; color: var(--muted); font-size: .82rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 500; color: var(--ink-soft); }
label.check input { width: auto; margin: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.member-select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1.05rem; background: var(--subtle); }
.member-select legend { font-weight: 600; font-size: .82rem; padding: 0 .45rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.member-select label.check { padding: .25rem 0; }
.form-actions { margin-top: .5rem; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: .9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--subtle); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(99,102,241,.6); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-d), var(--primary-2)); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn-ghost:hover { background: rgba(148,163,184,.14); box-shadow: none; }
.sidebar .btn-ghost { color: #c7cbe6; }
.sidebar .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-danger { color: var(--danger); border-color: #f3c9c9; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: .34rem .7rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ===== Flash ===== */
.flashes { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.flash { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; border: 1px solid transparent; box-shadow: var(--shadow-sm); animation: slidein .25s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.flash-success { background: var(--ok-bg); color: #047857; border-color: #a7f3d0; }
.flash-error { background: var(--danger-bg); color: #b91c1c; border-color: #fecaca; }
.flash-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: #fde68a; }
.flash-info { background: #eef2ff; color: var(--primary-d); border-color: #c7d2fe; }
/* Messaggi a comparsa del pannello (_flashes.html + toast.js): fuori dal
   flusso della pagina, quindi comparendo e sparendo non spostano nulla.
   Sopra 820px tutti in basso a destra. Sotto, quelli che si chiudono da soli
   (.toasts-auto) in alto a tutta larghezza; avvisi, errori e messaggi da
   copiare restano nella pagina, sopra il titolo, e non coprono i comandi. */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 65; display: flex;
  flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.toasts-auto { display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .5rem;
  padding: .7rem .5rem .7rem 1rem; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 16px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  line-height: 1.45; animation: toast-in .2s cubic-bezier(.2,.8,.2,1);
  transition: opacity .2s ease, transform .2s ease; }
.toast.is-out { opacity: 0; transform: translateY(8px); }
.toast-success { border-left-color: var(--ok); }
.toast-info { border-left-color: var(--primary); }
.toast-warning { border-left-color: var(--warn); }
.toast-error { border-left-color: var(--danger); }
.toast-msg { flex: 1; min-width: 0; padding-top: .1rem; overflow-wrap: anywhere; }
.toast-x { flex: none; width: 32px; height: 32px; margin: -.3rem 0; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 1.2rem; line-height: 1; }
.toast-x:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .toasts { position: static; width: auto; pointer-events: auto; }
  .toasts:has(> .toast) { margin-bottom: 1rem; }
  .toasts-auto { position: fixed; top: 64px; left: 12px; right: 12px; z-index: 65; }
  .toast.is-out { transform: translateY(-8px); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (pointer: coarse) { .toast-x { width: 44px; height: 44px; margin: -.65rem -.2rem; } }
/* Senza JavaScript nessuno li chiude: restano in cima alla pagina, nel flusso,
   come le strisce di prima (leggibili e senza coprire i comandi). */
@media (scripting: none) {
  .toasts, .toasts-auto { position: static; width: auto; pointer-events: auto; }
  .toasts { margin-bottom: 1.1rem; }
  .toast-x { display: none; }
}

.reg-list { list-style: none; padding: 0; margin: 0; }
.reg-list li { padding: .4rem 0; border-bottom: 1px solid var(--line-soft); font-family: ui-monospace, monospace; font-size: .9rem; }
.reg-list li:last-child { border-bottom: none; }

/* ===== Responsive: sidebar come drawer a scomparsa ===== */
@media (max-width: 820px) {
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: var(--side-w);
    padding: .8rem .7rem; transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg); z-index: 80; }
  body.nav-open .sidebar { transform: none; }
  /* Nel drawer mostra sempre le etichette come se fosse espanso */
  .sidebar .lbl, .sidebar .nav-group-label, .sidebar .tenant-meta, .sidebar .theme-switch { display: revert !important; }
  .sidebar .side-head .brand { display: flex !important; }
  .sidebar nav a { justify-content: flex-start !important; padding: .55rem .65rem !important; }
  .sidebar nav a::after { display: none !important; }
  .sidebar .tenant-chip { justify-content: flex-start; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); padding: .45rem .6rem; }
  .sidebar .whoami { justify-content: flex-start; }
  .nav-toggle { display: none; }
  .nav-fab { display: grid; position: fixed; top: 12px; left: 12px; z-index: 90;
    width: 42px; height: 42px; place-items: center; border-radius: 11px; cursor: pointer;
    background: var(--primary-d); color: #fff; border: none; box-shadow: var(--shadow-lg); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(2,6,23,.5); backdrop-filter: blur(1px); }
  .content { padding: 3.4rem 1rem 1.2rem; max-width: 100%; }
  .form .row { grid-template-columns: 1fr; }
}

/* ============================================================
   TEMI SELEZIONABILI (data-theme su <html>)
   ============================================================ */

/* --- Scuro --- */
:root[data-theme="dark"] {
  --bg: #0b1020;
  --bg-2: #0e1428;
  --panel: #141b2e;
  --ink: #e8ebf5;
  --ink-soft: #c4cadb;
  --muted: #8a93ab;
  --line: #26304a;
  --line-soft: #1c2437;
  --subtle: #101827;
  --sidebar-1: #070b17;
  --sidebar-2: #121a33;
  --sidebar-ink: #c4cadb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 4px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 34px -10px rgba(0,0,0,.6);
  --danger-bg: #2a1417; --ok-bg: #0e2420; --warn-bg: #2a2110;
  --ok-ink: #6ee7a8; --warn-ink: #fcd38a; --danger-ink: #ff8a8e;
  --ok-soft: rgba(76,183,130,.16); --warn-soft: rgba(242,201,76,.16); --danger-soft: rgba(235,87,87,.16);
  --sh-pop: 0 16px 48px -12px rgba(0,0,0,.6);
  --brand: #a5b4fc; --brand-on: #0b1020;
}
:root[data-theme="dark"] .status-bar.ok { border-color: #14532d; }
:root[data-theme="dark"] .status-bar.err { border-color: #7f1d1d; }
:root[data-theme="dark"] .flash-success { border-color: #14532d; color: #6ee7b7; }
:root[data-theme="dark"] .flash-error { border-color: #7f1d1d; color: #fca5a5; }
:root[data-theme="dark"] .flash-warning { border-color: #78350f; color: #fcd34d; }
:root[data-theme="dark"] .flash-info { background: #172554; border-color: #1e3a8a; color: #93c5fd; }

/* --- Glassy (vetro) --- */
:root[data-theme="glassy"] {
  --panel: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.65);
  --subtle: rgba(255,255,255,.4);
  --ink: #221b4d;
  --ink-soft: #3a338f;
  --muted: #6b62a6;
  --sidebar-1: rgba(49,46,129,.85);
  --sidebar-2: rgba(99,102,241,.75);
  /* Sul vetro le linee sono bianche: binari dei grafici e marchio piu' scuri. */
  --surface-high: color-mix(in srgb, var(--ink) 14%, transparent);
  --brand: #312e81;
}
:root[data-theme="glassy"] body {
  background: linear-gradient(135deg, #a5b4fc, #f0abfc 55%, #7dd3fc);
  background-attachment: fixed;
}
:root[data-theme="glassy"] .sidebar {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255,255,255,.25);
}
:root[data-theme="glassy"] .card,
:root[data-theme="glassy"] .table {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 32px rgba(31,38,135,.15);
}
:root[data-theme="glassy"] .table th { background: rgba(255,255,255,.45); }
/* Trova sul vetro: quasi pieno, altrimenti la pagina sotto si legge attraverso. */
:root[data-theme="glassy"] .search-panel { background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* --- Selettore tema nella sidebar --- */
.theme-switch { display: flex; gap: .3rem; padding: .5rem .3rem 0; }
.theme-switch a {
  flex: 1; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
  border-radius: 8px; padding: .35rem 0; cursor: pointer; font-size: 1rem; text-align: center;
  transition: background .15s, transform .1s;
}
.theme-switch a:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.theme-switch a.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; }

/* ============================================================
   ICONE A LINEA (inline SVG, stile Linear/Lucide)
   ============================================================ */
svg.ic { flex-shrink: 0; vertical-align: middle; }
.brand-icon svg { color: #fff; }
.sidebar nav a .ico { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; filter: none; opacity: .85; }
.sidebar nav a .ico svg { width: 18px; height: 18px; }
.sidebar nav a.active .ico { filter: none; opacity: 1; }
.btn svg.ic { width: 16px; height: 16px; }
.theme-switch a { color: var(--sidebar-ink); display: flex; align-items: center; justify-content: center; }
.theme-switch a.active { color: #fff; }

/* ============================================================
   TEMA LINEAR (scuro, sobrio) — predefinito
   ============================================================ */
:root[data-theme="linear"] {
  --bg: #08090a;
  --bg-2: #0b0c0d;
  --panel: #101113;
  --ink: #f7f8f8;
  --ink-soft: #d0d3d8;
  --muted: #8a8f98;
  --line: #23252a;
  --line-soft: #191b1f;
  --subtle: #141518;
  --primary: #858ff0;
  --primary-d: #5e6ad2;
  --primary-2: #8f7cf0;
  --accent: #4cb7c7;
  --danger: #eb5757; --danger-bg: #26161a;
  --ok: #4cb782; --ok-bg: #10231c;
  --warn: #f2c94c; --warn-bg: #241f10;
  --ok-ink: #6ee7a8; --warn-ink: #fcd38a; --danger-ink: #ff8a8e;
  --sh-pop: 0 16px 48px -12px rgba(0,0,0,.6);
  --brand: #a5adf6; --brand-on: #08090a;
  --radius: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,.7);
  --sidebar-1: #0a0b0c;
  --sidebar-2: #0a0b0c;
  --sidebar-ink: #b4b8bf;
}
:root[data-theme="linear"] body { background: var(--bg); }
:root[data-theme="linear"] .sidebar { border-right: 1px solid var(--line); }
:root[data-theme="linear"] .brand-icon { background: #191a1e; border: 1px solid var(--line); box-shadow: none; }
:root[data-theme="linear"] .sidebar nav a { color: var(--sidebar-ink); font-weight: 500; }
:root[data-theme="linear"] .sidebar nav a:hover { background: rgba(255,255,255,.045); color: #fff; transform: none; }
:root[data-theme="linear"] .sidebar nav a.active { background: rgba(255,255,255,.07); color: #fff; box-shadow: none; }
:root[data-theme="linear"] .tenant-chip { background: rgba(255,255,255,.04); border-color: var(--line); }
:root[data-theme="linear"] .tenant-label { color: var(--muted); }
:root[data-theme="linear"] .btn-primary { background: var(--primary-d); box-shadow: none; }
:root[data-theme="linear"] .btn-primary:hover { background: var(--primary); }
:root[data-theme="linear"] .avatar { background: linear-gradient(135deg, var(--accent), var(--primary-d)); }
:root[data-theme="linear"] .status-bar.ok { border-color: #14532d; }
:root[data-theme="linear"] .status-bar.err { border-color: #7f1d1d; }
:root[data-theme="linear"] .flash-success { border-color: #14532d; color: #6ee7b7; }
:root[data-theme="linear"] .flash-error { border-color: #7f1d1d; color: #fca5a5; }
:root[data-theme="linear"] .flash-warning { border-color: #78350f; color: #fcd34d; }
:root[data-theme="linear"] .flash-info { background: #171a2e; border-color: #2a2f52; color: #a5b0f0; }
:root[data-theme="linear"] .theme-switch a { border-color: var(--line); background: rgba(255,255,255,.03); }
:root[data-theme="linear"] .theme-switch a.active { background: var(--primary-d); border-color: transparent; }

/* ============================================================
   EDITOR TASTI BLF (form estensione)
   ============================================================ */
.blf-editor { margin-top: .3rem; }
.blf-rows { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
/* Una riga sola: maniglia, ↑ ↓ ✕, tipo, valore, etichetta (prima ↑ ↓ ✕
   andavano a capo e la prima colonna restava vuota). */
.blf-row { display: grid; grid-template-columns: auto auto minmax(180px, 1.3fr) 1fr 1fr; gap: .5rem; align-items: center; }
.blf-row select, .blf-row input { margin-top: 0; }
.blf-actions { display: flex; gap: .2rem; }
.blf-row .blf-del { padding: .45rem .65rem; color: var(--danger); border-color: transparent; box-shadow: none; }
.blf-row .blf-up, .blf-row .blf-down { padding: .45rem .6rem; border-color: transparent; box-shadow: none; }
.blf-row .blf-del:hover { background: var(--danger-bg); }
.blf-help { margin-top: .7rem; }
.blf-help summary { cursor: pointer; font-size: .85rem; }
.blf-help ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.95; }
.blf-help code { background: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: .04rem .35rem; font-size: .8rem; }
@media (max-width: 680px) {
  .blf-row { grid-template-columns: auto 1fr; }
  .blf-row select, .blf-row input { grid-column: 1 / -1; }
}

/* ============================================================
   PAGINA SICUREZZA
   ============================================================ */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.sec-item { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.sec-item .sec-h { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .92rem; margin-bottom: .4rem; }
.sec-item .sec-h svg { color: var(--primary); }
.sec-item p { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.6; }
.sec-item em { color: var(--muted); font-style: normal; }
.sec-io { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.sec-import label { margin-bottom: .6rem; }
.sec-export .btn { margin: .2rem .3rem .2rem 0; }
.sec-search { display: flex; gap: .5rem; align-items: center; }
.sec-search input, .sec-search select { margin-top: 0; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-family: inherit; font-size: .88rem; }
.sec-search input { min-width: 220px; }
.pager { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1.1rem; }
@media (max-width: 720px) { .sec-io { grid-template-columns: 1fr; } .sec-search input { min-width: 0; } }

/* ============================================================
   FLUSSO CHIAMATE
   ============================================================ */
.svc-toggle { display: flex; gap: .5rem; flex-wrap: wrap; }
.svc-toggle form { margin: 0; }
.svc-form { position: relative; display: inline-block; }
.svc-form.has-peek .svc-btn { padding-right: 2.5rem; }  /* spazio per il cannocchiale */
.svc-peek { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 6px; color: var(--muted); transition: background .15s, color .15s; }
.svc-peek:hover { background: rgba(148,163,184,.22); color: var(--ink); }
.svc-btn.active.svc-auto + .svc-peek { color: #fff; }
.svc-btn.active.svc-auto + .svc-peek:hover { background: rgba(255,255,255,.22); color: #fff; }
.svc-btn { padding: .55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-soft); font-weight: 600; font-size: .9rem; cursor: pointer;
  font-family: inherit; transition: all .15s; }
.svc-btn:hover { background: var(--subtle); }
.svc-btn.active.svc-auto { background: var(--primary-d); border-color: transparent; color: #fff; }
.svc-btn.active.svc-day { background: #f59e0b; border-color: transparent; color: #1a1205; }
.svc-btn.active.svc-night { background: #1e293b; border-color: transparent; color: #dbeafe; }
.svc-btn.active.svc-holiday { background: #0e7490; border-color: transparent; color: #ecfeff; }

.flow-lines { display: flex; flex-direction: column; gap: .5rem; }
.flow-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 0; }
.flow-line + .fl-edit { margin: -.2rem 0 .6rem; }
.fl-source { display: flex; align-items: center; gap: .4rem; }
.fl-arrow { color: var(--muted); display: inline-flex; }
.fl-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-sm); }
.fl-chip .fl-ic { display: inline-flex; color: var(--primary); }
.fl-txt { display: flex; flex-direction: column; line-height: 1.15; }
.fl-txt strong { font-size: .9rem; }
.fl-txt small { color: var(--muted); font-size: .74rem; }
.fl-empty { color: var(--muted); font-style: italic; box-shadow: none; background: var(--subtle); }
.fl-trunk .fl-ic { color: var(--accent); }
.fl-extension .fl-ic { color: #22c55e; }
.fl-queue .fl-ic { color: #f59e0b; }
.fl-ringgroup .fl-ic { color: #8b5cf6; }
.fl-ivr .fl-ic { color: #06b6d4; }
.fl-timeroute .fl-ic { color: #eab308; }
.fl-voicemail .fl-ic { color: #ec4899; }
.fl-unknown .fl-ic { color: var(--muted); }

/* Nodo cliccabile del flusso: chip (link alla configurazione) + dettaglio sotto. */
.fl-node { display: inline-flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
a.fl-chip { text-decoration: none; color: inherit; transition: filter .12s, box-shadow .12s; }
a.fl-chip:hover { filter: brightness(1.05); box-shadow: var(--shadow); border-color: var(--primary); }
.fl-detail { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: .78rem; padding-left: .2rem; }
.fl-detail .fl-members { font-size: .78rem; color: var(--ink-soft); }

.fl-branch-card { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem;
  background: var(--subtle); min-width: 260px; }
.fl-branch-head { font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .45rem;
  display: flex; align-items: center; gap: .4rem; }
.fl-branch { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; flex-wrap: wrap; }
.fl-branch-name { font-size: .76rem; font-weight: 600; color: var(--muted); min-width: 62px;
  padding: .12rem .45rem; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
.fl-b-giorno { color: var(--warn-ink); }
.fl-b-notte { color: #3b82f6; }
.fl-b-vacanza { color: #db2777; }

.fl-edit { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.fl-edit .form label { margin-bottom: 0; }

.fl-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--subtle); color: var(--muted); font-weight: 600; font-size: .82rem;
  cursor: pointer; font-family: inherit; transition: all .15s; }
.fl-toggle .fl-toggle-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.fl-toggle.on { background: var(--ok-bg); color: #047857; border-color: #6ee7b7; }
.fl-toggle.on .fl-toggle-dot { background: #10b981; }
.fl-toggle:hover { filter: brightness(.98); }

/* ===== In alto a destra: pulsanti della pagina, Riavvio, Applica + orologio, su UNA riga ===== */
.topbar-r { position: fixed; top: 10px; right: 18px; z-index: 60; display: flex; gap: .4rem;
  align-items: center; }
.topclock { font-size: .78rem;
  font-weight: 500; color: var(--muted); letter-spacing: .01em; pointer-events: none;
  padding: .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.topconf { display: flex; gap: .4rem; align-items: center; }
.topconf-f { margin: 0; }
.topconf-btn { cursor: pointer; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .28rem .7rem; border-radius: 999px; border: 1px solid transparent; line-height: 1;
  color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* «Rigenera» (solo super admin): discreto, non deve sembrare uno stato. */
.topconf-regen { background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted);
  border-color: var(--line); box-shadow: none; }
.topconf-regen:hover { background: var(--panel); color: var(--ink); }
.topconf-save { background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: color-mix(in srgb, var(--primary) 70%, #000); }
.topconf-sync { background: var(--accent, #06b6d4);
  border-color: color-mix(in srgb, var(--accent, #06b6d4) 70%, #000); }
.topconf-save:hover, .topconf-sync:hover { filter: brightness(1.08); }
/* «Riavvio necessario»: rosso, pulsa due volte e poi resta fermo. */
.topconf-apply { background: var(--danger, #dc2626);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 70%, #000);
  animation: topconf-pulse 1.6s ease-in-out 2; }
@keyframes topconf-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #dc2626) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; } }
/* «Modifiche da applicare · Applica»: pillola arancio con pallino fermo; si
   fa notare due volte quando compare, poi resta calma (niente lampeggio). */
.applybtn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; padding: .34rem .8rem;
  border-radius: 999px; color: var(--warn-ink, #92400e);
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  animation: applybtn-ring 1.6s ease-in-out 2; }
.applybtn b { font-weight: 700; }
.applybtn:hover { background: color-mix(in srgb, var(--warn) 26%, var(--panel)); }
.applybtn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
/* Temi scuri: testo nel colore pieno dell'avviso (contrasto ≥ 4,5:1). */
:root[data-theme="linear"] .applybtn, :root[data-theme="dark"] .applybtn {
  color: var(--warn-ink, var(--warn)); }
@media (pointer: coarse) { .applybtn { min-height: 44px; } }
@keyframes applybtn-ring { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 820px) {
  .topbar-r { top: auto; bottom: 12px; right: 12px; left: 12px; justify-content: flex-end;
    pointer-events: none; }
  .topbar-r > * { pointer-events: auto; }
  .topconf { flex-wrap: wrap; justify-content: flex-end; }
  .topclock { display: none; }
  /* La riga dei pulsanti sta in basso: l'ultimo comando della pagina (e il
     «Salva» fisso delle schede) deve poter salire sopra di lei. */
  body.has-topconf .content { padding-bottom: 72px; }
}
/* La riga in alto a destra e' fissa: su desktop le si lascia lo spazio minimo
   (una riga), altrimenti copre i pulsanti in testa alle pagine. */
@media (min-width: 821px) {
  body.has-clock .content, body.has-topconf .content { padding-top: 2.5rem; }
}
/* Chi ha chiesto al sistema «riduci movimento»: niente animazioni ne'
   transizioni in tutto il pannello. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Pagina Sistema (key/value + barre) ===== */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: .55rem .4rem; border-bottom: 1px solid var(--line-soft); font-size: .9rem; vertical-align: top; }
.kv tr:last-child td { border-bottom: none; }
.kv td:first-child { color: var(--muted); width: 180px; font-weight: 500; }
.meter { display: inline-block; width: 180px; height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; vertical-align: middle; margin-right: .6rem; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }

/* ===== Diagnostica trunk ===== */
.diag { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem; font-family: ui-monospace, Menlo, monospace; font-size: .82rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto; color: var(--ink-soft); }

/* ===== Aiuto contestuale (tooltip a destra) ===== */
.help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--line); color: var(--muted); font-size: .7rem; font-weight: 700;
  cursor: help; margin-left: .35rem; vertical-align: middle; position: relative; user-select: none; }
.help:hover, .help:focus { background: var(--primary-d); color: #fff; outline: none; }
.help:hover::after, .help:focus::after {
  content: attr(data-tip); position: absolute; left: 150%; top: 50%; transform: translateY(-50%);
  width: 250px; max-width: 60vw; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; font-size: .8rem;
  font-weight: 400; line-height: 1.45; box-shadow: var(--shadow-lg); z-index: 200; white-space: normal;
  text-transform: none; letter-spacing: 0; }
.help:hover::before, .help:focus::before {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: var(--line); z-index: 200; }
@media (max-width: 900px) {
  .help:hover::after, .help:focus::after { left: auto; right: 150%; }
  .help:hover::before, .help:focus::before { left: auto; right: 100%; border-right-color: transparent; border-left-color: var(--line); }
}

/* Monitor di sistema in tempo reale (chiamate attive + grafico CPU/RAM) */
.mon-live { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.mon-kpi { flex: 1 1 130px; background: rgba(148,163,184,.08); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; }
.mon-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.mon-lbl { font-size: .8rem; color: var(--muted, #94a3b8); }
.mon-ranges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mon-ranges .btn.active { background: var(--primary-d); border-color: transparent; color: #fff; }
#mon-chart { width: 100%; max-width: 100%; display: block; cursor: crosshair; }
.mon-chart-wrap { position: relative; }
.mon-tip { position: absolute; z-index: 20; min-width: 150px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: .5rem .6rem; font-size: .8rem; }
.mon-tip-t { font-weight: 700; color: var(--ink); margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.mon-tip-r { display: flex; align-items: center; gap: .4rem; line-height: 1.7; }
.mon-tip-l { color: var(--muted); }
.mon-tip-v { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mon-legend { margin-top: .5rem; font-size: .85rem; color: var(--muted, #94a3b8); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mon-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
/* Monitor del server AI: KPI colorati (ok/attenzione/pieno), avvisi, contatori */
#ai-chart { width: 100%; max-width: 100%; display: block; cursor: crosshair; }
.mon-sub { font-size: .76rem; color: var(--muted, #94a3b8); margin-top: .15rem; }
.mon-kpi.ok { border-color: rgba(16,185,129,.6); }
.mon-kpi.ok .mon-num { color: #059669; }
.mon-kpi.warn { border-color: rgba(245,158,11,.75); }
.mon-kpi.warn .mon-num { color: #d97706; }
.mon-kpi.danger { border-color: rgba(239,68,68,.75); }
.mon-kpi.danger .mon-num { color: #dc2626; }
.ai-alert { border: 1px solid rgba(239,68,68,.55); border-left-width: 4px; border-radius: 10px;
  padding: .55rem .8rem; margin-bottom: .6rem; font-size: .9rem; }
.ai-alert b { display: block; color: #dc2626; }
.ai-alert .ai-todo { margin-top: .2rem; }
.ai-counters { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.ai-counters .mon-kpi { flex: 1 1 140px; padding: .45rem .7rem; }
.ai-counters .mon-num { font-size: 1.1rem; }
.ai-sub { font-size: 1rem; margin: .9rem 0 .4rem; }

/* Trascrizione messaggi segreteria */
.vm-text { max-width: 340px; font-size: .88rem; line-height: 1.35; white-space: pre-wrap; }

/* Bandiera Paese nella lista IP bloccati */
.flag { font-size: 1.15rem; line-height: 1; vertical-align: -1px; }

/* Report sicurezza */
.sec-ok { color: var(--ok-ink); }
.sec-warn { color: #d97706; }
.sec-fail { color: #dc2626; }
.sec-unknown { color: var(--muted, #94a3b8); }
.sec-score { font-weight: 700; }
.sec-dot { font-size: 1.1rem; line-height: 1; }
.sec-dot-cell { width: 1.5rem; text-align: center; }
.sec-report td { vertical-align: top; }

/* Selettore Paesi per continente (blocco geografico) */
.geo-picker { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0 .8rem; }
.geo-cont { border: 1px solid var(--border, #2a2a35); border-radius: 8px; padding: .2rem .6rem; }
.geo-cont > summary { cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; padding: .5rem .2rem; font-weight: 600; list-style: none; }
.geo-cont > summary::-webkit-details-marker { display: none; }
.geo-cont > summary::before { content: "▸"; margin-right: .5rem; color: var(--muted, #94a3b8); }
.geo-cont[open] > summary::before { content: "▾"; }
.geo-cont-name { flex: 1; }
.geo-cont-actions { padding: .2rem .2rem .4rem; border-top: 1px solid var(--border, #2a2a35); }
.geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .2rem .8rem; padding: .3rem 0 .5rem; }
.geo-item { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }

/* Condivisione telefono utente: due riquadri (Android / iPhone) */
.phone-share { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .phone-share { grid-template-columns: 1fr; } }
.phone-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; background: var(--subtle); }
.phone-box-h { font-weight: 700; font-size: .95rem; margin-bottom: .7rem; }
.phone-qr { background: #fff; border-radius: 10px; padding: 6px; width: 224px; max-width: 100%; }
/* crispEdges anche via CSS: moduli netti (niente sfocatura da anti-aliasing),
   così il QR è leggibile dallo schermo con qualunque app. */
.phone-qr svg, .phone-qr img { display: block; width: 100%; height: auto; shape-rendering: crispEdges; image-rendering: pixelated; }
/* QR scaduto: sbiadito, così è chiaro che va rigenerato. */
.phone-qr.qr-stale { opacity: .28; filter: grayscale(1); }

/* Pagina "Il mio telefono": barra con conto alla rovescia + Rigenera. */
.prov-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.prov-timer { display: flex; align-items: center; gap: .6rem; flex: none; }
.prov-count { font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.prov-count.expired { color: var(--danger, #dc2626); }
.phone-link { word-break: break-all; font-size: .78rem; margin: .5rem 0; color: var(--muted); }
.phone-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; margin-top: 1rem; }

/* Assistenti AI: card della lista */
.asst-card { display: flex; flex-direction: column; gap: .3rem; transition: transform .14s, border-color .14s, box-shadow .14s; }
.asst-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.asst-ic { display: inline-flex; color: var(--primary); }
.asst-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.asst-desc { font-size: .86rem; }
.asst-meta { margin-top: .35rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.asst-edit { position: relative; }
.asst-edit > summary { list-style: none; }
.asst-edit > summary::-webkit-details-marker { display: none; }
.asst-edit-pop { position: absolute; z-index: 30; right: 0; margin-top: .4rem; width: 280px; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow-lg); }
.asst-edit-pop input { width: 100%; margin-top: .3rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-family: inherit; }

/* "Le mie chiamate": trascrizione + riassunto */
.mycall-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mycall-dir { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.mycall-del { margin-left: auto; }
.mycall-del form, .mycall-head .mycall-del { margin: 0; }
.mycall-sum { background: var(--subtle); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: .6rem .8rem; }
.mycall-sum-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.mycall-sum p { margin: .3rem 0 0; color: var(--ink); }
.mycall-tx { margin-top: .6rem; }
.mycall-tx summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--muted); }
.mycall-tx-body { white-space: pre-wrap; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line-soft); }

/* Guida (help): tipografia del contenuto Markdown */
.guide { line-height: 1.65; }
.guide h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.guide h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.guide h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.guide h1:first-child, .guide h2:first-child { margin-top: 0; }
.guide p { margin: .55rem 0; color: var(--ink-soft); }
.guide ul, .guide ol { margin: .5rem 0 .8rem; padding-left: 1.35rem; }
.guide li { margin: .28rem 0; color: var(--ink-soft); }
.guide li strong, .guide p strong { color: var(--ink); }
.guide a { font-weight: 600; }
.guide code { background: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; font-size: .86em; font-family: ui-monospace, Menlo, monospace; }
.guide .guide-pre { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; overflow-x: auto; margin: .7rem 0; }
.guide .guide-pre code { background: none; border: none; padding: 0; font-size: .84rem; line-height: 1.5; }
.guide blockquote { margin: .7rem 0; padding: .5rem .9rem; border-left: 3px solid var(--primary); background: var(--subtle); border-radius: 0 8px 8px 0; color: var(--ink-soft); }
.guide hr { border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }

/* Console operatore: card "Azioni rapide" centrata */
.console-actions { max-width: 760px; margin-left: auto; margin-right: auto; }
.con-act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: end; }
.con-act-grid label { display: block; margin-bottom: .5rem; }
.con-act-grid input { width: 100%; margin-top: .35rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-family: inherit; font-size: .95rem; }
@media (max-width: 640px) { .con-act-grid { grid-template-columns: 1fr; } }

/* Dashboard: azioni rapide */
.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.quick-link { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--subtle); color: var(--ink-soft); font-weight: 600; font-size: .88rem;
  transition: background .15s, border-color .15s, transform .1s; }
.quick-link:hover { background: var(--panel); border-color: var(--primary); color: var(--ink); transform: translateY(-1px); }
.quick-link .ql-ic { display: inline-flex; color: var(--primary); flex: none; }

/* Dashboard Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; margin: 1rem 0; }
.team-cell { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); }
.team-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #94a3b8; }
.team-free .team-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.team-busy .team-dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.15); }
.team-offline { opacity: .6; }
.team-info { flex: 1; min-width: 0; }
.team-num { font-weight: 700; }
.team-name { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-call { flex: none; }
.team-q { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  font-weight: 800; font-size: .82rem; cursor: pointer; background: var(--panel); color: #fff; }
.team-q.q-in { background: #2563eb; border-color: #1d4ed8; }
.team-q.q-out { background: #94a3b8; border-color: #94a3b8; }

/* Popup code/stato agente */
.team-pop { position: absolute; z-index: 60; width: 240px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.28); padding: .3rem; }
.team-pop-head { display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .5rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.team-pop-x { border: none; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); }
.team-pop-sec { padding: .5rem; }
.team-pop-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; }
.team-pop-status { display: flex; gap: .3rem; }
.team-pop-status button { flex: 1; padding: .35rem .2rem; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer; font-size: .78rem; }
.team-pop-status button.on { background: #16a34a; color: #fff; border-color: #15803d; }
.team-pop-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .3rem .1rem; font-size: .84rem; }
.team-pop-row .tick { color: #2563eb; font-weight: 800; }
.team-pop-row .tick.off { color: transparent; }
.team-pop-row button { padding: .2rem .55rem; border-radius: 6px; border: 1px solid var(--line);
  cursor: pointer; font-size: .76rem; background: var(--bg); }
.team-pop-row button.leave { color: #b91c1c; }
.team-pop-row button.join { color: #1d4ed8; }
.team-pop-all { border-bottom: 1px dashed var(--line); padding-bottom: .5rem; margin-bottom: .3rem; }

/* Reporting */
.rep-chart { display: flex; align-items: flex-end; gap: .4rem; height: 180px; padding-top: .5rem; }
.rep-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.rep-bar { width: 70%; min-height: 2px; background: rgba(99,102,241,.25); border-radius: 4px 4px 0 0;
  display: flex; align-items: flex-end; position: relative; }
.rep-bar-ans { width: 100%; background: linear-gradient(180deg, var(--primary), var(--primary-d)); border-radius: 4px 4px 0 0; }
.rep-bar-lbl { font-size: .68rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 640px) { .rep-two { grid-template-columns: 1fr; } }

/* Sezione Telefoni */
.ph-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; vertical-align: middle; }
.ph-dot.ph-registered { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.ph-dot.ph-failed { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.ph-dot.ph-offline { background: #94a3b8; }
.ph-dot.ph-never { background: #cbd5e1; }
.ph-row-never td { opacity: .7; }
/* App: cerchio blu attorno al pallino di stato (lo stato interno non cambia). */
.ph-dot.ph-app { box-shadow: 0 0 0 2px var(--card, #0b1220), 0 0 0 4px #2563eb; }
/* Icona del tipo di dispositivo (telefono fisso / Android / Apple) accanto al
   pallino di stato, nella prima colonna della tabella Telefoni. */
.ph-status { white-space: nowrap; }
.ph-devtype { display: inline-flex; vertical-align: middle; color: var(--muted, #64748b); margin-left: .35rem; }
.ph-devtype .ic { width: 15px; height: 15px; }
.ph-split .ph-devtype { margin-left: 0; margin-right: .1rem; }
/* Schede cliccabili (filtro per stato). */
.ph-filter { cursor: pointer; border: 1px solid transparent; transition: border-color .12s, box-shadow .12s; }
.ph-filter:hover { border-color: rgba(37,99,235,.4); }
.ph-filter.is-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.28); }
.ph-filter:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ph-reg-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.ph-split { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .82rem; }
.ph-split .ph-dot { width: 9px; height: 9px; }
.ph-split-item { white-space: nowrap; }

/* Trova (ricerca globale) */
.search-overlay { position: fixed; inset: 0; background: rgba(10,12,20,.55); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem; }
/* L'attributo hidden deve vincere sul display:flex: chiuso finché non si apre a comando. */
.search-overlay[hidden] { display: none !important; }
/* Una sola colonna: in alto la casella (con «Chiudi» accanto al titolo), sotto
   i risultati. Colori del tema: nei temi scuri il pannello e' scuro. */
.search-panel { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 76vh; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-pop); overflow: hidden; }
.search-left { padding: .9rem 1rem .8rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .55rem .6rem; }
.search-left input, .search-tip { grid-column: 1 / -1; }
.search-left #search-close { grid-column: 2; grid-row: 1; }
.search-label { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.search-left input { width: 100%; font-size: 1.05rem; padding: .6rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--subtle); color: inherit; }
.search-tip { font-size: .78rem; margin: 0; color: var(--muted); }
.search-panel kbd { display: inline-block; min-width: 1.5em; padding: .05rem .35rem; text-align: center; font: 600 .72rem/1.5 var(--mono); color: var(--ink-soft); background: var(--subtle); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; }
.search-right { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem .6rem .7rem; }
.search-hint { padding: 1rem .3rem; color: var(--muted); }
.search-group { margin-bottom: .7rem; }
.search-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .3rem .3rem .2rem; }
.search-item { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.search-item:hover, .search-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.search-item-title { font-weight: 600; }
.search-item-sub { color: var(--muted); font-size: .82rem; text-align: right; }

/* ===== Report attacchi (grafici sicurezza) ===== */
.sec-two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:820px){ .sec-two { grid-template-columns:1fr; } }
.chart-bars { display:flex; align-items:flex-end; gap:3px; height:180px;
  padding-top:.5rem; overflow-x:auto; }
.chart-bar-col { flex:1 0 14px; min-width:14px; display:flex; flex-direction:column;
  align-items:center; height:100%; justify-content:flex-end; }
.chart-bar { width:70%; min-height:2px; background:linear-gradient(180deg,#e5484d,#b02a2e);
  border-radius:3px 3px 0 0; transition:height .3s; }
.chart-bar-lbl { font-size:.62rem; color:var(--text-secondary,#8ea0bf); margin-top:3px;
  white-space:nowrap; transform:rotate(-40deg); transform-origin:top right; height:1.4em; }
.hbar-row { display:grid; grid-template-columns:1fr 120px 44px; align-items:center;
  gap:.5rem; margin:.35rem 0; }
.hbar-label { font-size:.85rem; }
.hbar-track { background:var(--surface-high,#1e2a44); border-radius:6px; height:14px; overflow:hidden; }
.hbar-fill { height:100%; border-radius:6px; min-width:2px; }
.hbar-val { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
a.hbar-link { text-decoration:none; color:inherit; border-radius:8px; padding:.15rem .3rem; margin:.2rem -.3rem; transition:background .12s; }
a.hbar-link:hover { background:var(--surface-high,#1e2a44); }
.pie-wrap { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.pie { flex:0 0 auto; }
.pie-legend { display:flex; flex-direction:column; gap:.25rem; min-width:160px; }
.pie-leg-row { display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:.4rem;
  font-size:.85rem; }
.pie-swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
.heat-row { display:flex; gap:2px; }
.heat-cell { flex:1; min-width:0; height:38px; border-radius:4px; position:relative;
  border:1px solid var(--surface-high,#1e2a44); }
.heat-h { position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:.6rem;
  color:var(--text-secondary,#8ea0bf); }

/* Riordino per trascinamento (dragsort.js): maniglia + riga in movimento. */
.drag-handle { cursor: grab; user-select: none; color: var(--muted);
  display: inline-flex; align-items: center; padding: 0 .25rem; line-height: 1;
  font-size: 1.05rem; letter-spacing: -1px; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.dragging { opacity: .55; box-shadow: var(--shadow); }
tr.dragging { background: var(--subtle); }
.blf-row .drag-handle { align-self: center; }

/* Orari: settimana da sinistra a destra + riempimento rapido. */
.sched-quick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .4rem 0 .9rem; }
.sched-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.sched-day { display: flex; flex-direction: column; gap: .25rem; }
.sched-day-h { font-size: .8rem; font-weight: 600; color: var(--muted); }
.sched-day input { width: 100%; }

/* Editor agenti coda: chip trascinabili in ordine di priorità. */
.qa-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; min-height: 2rem; }
.qa-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow-sm); }
.qa-chip .qa-num { font-family: var(--mono, monospace); font-weight: 600; }
.qa-chip .qa-name { color: var(--muted); font-size: .82rem; }
.qa-del { cursor: pointer; border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; }
.qa-add { display: flex; gap: .4rem; align-items: end; flex-wrap: wrap; }

/* --- Avviso della console Hotel (popup sveglia non risposta) --------------
   Deve FERMARE l'operatore: schermo oscurato e riquadro al centro. La sveglia
   scatta alle 6:30, quando sta facendo altro; una riga in pagina non basta. */
.modal-scrim { position: fixed; inset: 0; z-index: 900; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 0, 0, .55); }
.modal-scrim[hidden] { display: none; }
.modal-scrim .modal { max-width: 30rem; width: 100%; text-align: center;
  border-left: 4px solid var(--warn, #d98324); }
.modal-scrim .modal h2 { margin-top: 0; }
.modal-scrim .modal .mono { font-weight: 600; word-break: break-word; }

/* --- Quadro camere (console Hotel) ---------------------------------------
   La governante deve capire a colpo d'occhio cosa resta da fare: colore =
   stato, bordo acceso = da rifare adesso. Il testo dice sempre anche QUANDO,
   perche' "pulita" senza data non risponde alla domanda "pulita quando?". */
/* ---------- QUADRO CAMERE: tre viste, stessa sostanza ----------
   Un albergo da cento camere si guarda a quadratini (colpo d'occhio), uno
   piccolo si legge a righe, e chi lavora su poche camere vuole le schede
   grandi. Sceglie l'operatore; il contenuto della camera e' sempre lo stesso.
   Tutto in HTML: i riquadri si aprono con <details>, senza una riga di JS. */
.roomgrid { display: grid; gap: .6rem; margin: .4rem 0 .8rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
/* Quadratini: ~4.6rem, ci stanno cento camere in due schermate. */
.roomgrid.rg-mini { gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
.roomtile, .rcell, .rline { border: 1px solid var(--line);
  border-left: 5px solid var(--muted); border-radius: 10px;
  background: var(--panel); box-shadow: var(--shadow-sm); }
.roomtile { padding: .55rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.roomtile .rt-head { display: flex; justify-content: space-between;
  align-items: baseline; font-size: 1.05rem; }
.roomtile .rt-occ, .rc-occ, .rl-occ { color: var(--muted); }

/* Corpo comune della camera (ospite, stato, azioni). */
.rx-who { font-size: .85rem; }
.rx-state { font-size: .76rem; color: var(--muted); }
.rx-flag, .rl-flag { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--err, #c0392b); }
.rx-act { display: flex; gap: .3rem; align-items: center;
  flex-wrap: wrap; margin-top: .2rem; }
.rx-act select { flex: 1 1 5rem; min-width: 0; }
.rx-in > summary { list-style: none; display: inline-block; }
.rx-in > summary::-webkit-details-marker { display: none; }

/* Vista quadratini. Chiusa: solo numero e pallino. Aperta: prende tutta la
   riga della griglia, cosi' le altre camere non ballano intorno. */
.rcell { padding: .3rem .35rem; }
.rcell > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: baseline; gap: .2rem;
  font-size: .92rem; line-height: 1.25; }
.rcell > summary::-webkit-details-marker { display: none; }
.rcell .rc-occ { font-size: .7rem; }
.rcell[open] { grid-column: 1 / -1; padding: .5rem .6rem; }
.rcell[open] > summary { font-size: 1.05rem; margin-bottom: .3rem;
  justify-content: flex-start; gap: .5rem; }
/* Aperta, la camera prende tutta la riga: il contenuto pero' resta su una
   riga sola, altrimenti sembra una scheda vuota lunga uno schermo. */
.rc-body { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.rc-body .rx-act, .rl-body .rx-act { flex: 0 0 auto; flex-wrap: nowrap;
  margin-top: 0; }
.rc-body .rx-act select, .rl-body .rx-act select { flex: 0 0 11rem; }
.rc-body .rx-who { font-size: .95rem; }

/* Vista righe: ospite e stato leggibili senza aprire. Il testo sta tutto a
   sinistra, quindi in uno schermo da banco ci stanno tre colonne di camere
   invece di una riga sprecata per tre quarti. */
.roomlist { display: grid; gap: .25rem .6rem; margin: .4rem 0 .8rem;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.rline[open] { grid-column: 1 / -1; }
.rline { padding: .25rem .5rem; }
.rline > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.rline > summary::-webkit-details-marker { display: none; }
.rl-num { min-width: 2.6rem; font-size: 1rem; }
.rl-who { flex: 0 1 auto; max-width: 8rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rl-state { color: var(--muted); font-size: .8rem; margin-left: auto; }
.rline > summary { gap: .45rem; }
.rl-body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: .35rem 0 .2rem; }
/* Nella vista a righe ospite e stato sono gia' nella riga: aperta servono
   solo i comandi, non la stessa informazione scritta due volte. */
.rl-body .rx-who, .rl-body .rx-state, .rl-body .rx-flag { display: none; }

/* Stato: sporca (da rifare), pulita, controllata, fuori servizio. */
.rs-dirty { border-left-color: #c0392b; }
.rs-clean { border-left-color: #27924a; }
.rs-inspected { border-left-color: #1e7fd4; }
.rs-ooo { border-left-color: #6b6b6b; opacity: .7; }
/* Da rifare ADESSO: anche una camera "pulita" ieri e occupata stanotte. */
.rs-due { outline: 2px solid rgba(192, 57, 43, .45); }

/* Legenda dei colori e intestazione di piano. */
.rlegend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-size: .78rem; color: var(--muted); margin: .3rem 0 .2rem; }
.rlegend .lg { display: inline-flex; align-items: center; gap: .3rem; }
.rlegend .lg::before { content: ""; width: .7rem; height: .7rem;
  border-radius: 3px; background: transparent; }
.rlegend .lg-dirty::before { background: #c0392b; }
.rlegend .lg-clean::before { background: #27924a; }
.rlegend .lg-inspected::before { background: #1e7fd4; }
.rlegend .lg-ooo::before { background: #6b6b6b; }
.rlegend .lg-due::before { outline: 2px solid rgba(192, 57, 43, .45); }
.fl-head { font-size: .92rem; margin: .7rem 0 .1rem; display: flex;
  align-items: baseline; gap: .5rem; }
.fl-head .muted { font-size: .78rem; font-weight: 400; }
.viewsel { display: inline-flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }

/* Schermo pieno del banco: via il menu, l'orologio, i pulsanti di
   configurazione, il titolo e le sveglie. Restano le camere e la riga dei
   filtri, dove i conti e la prossima sveglia ricompaiono in piccolo. Si esce
   con lo stesso pulsante: e' un indirizzo, non uno stato nascosto. */
body.kiosk .sidebar, body.kiosk .topbar-r, body.kiosk .topclock, body.kiosk .topconf,
body.kiosk .nav-fab, body.kiosk .kiosk-hide { display: none !important; }
body.kiosk .content { padding: .6rem .9rem; }
body.kiosk .card { margin-top: 0; }
.kiosk-only { display: none; }
body.kiosk .kiosk-only { display: inline-block; }
/* A schermo pieno la riga dei filtri deve restare UNA riga: i campi si
   stringono, i conti stanno in mezzo, i pulsanti in fondo. */
body.kiosk .hk-filter select { min-width: 7rem; }
body.kiosk .hk-filter input[type="search"] { min-width: 9rem; }
body.kiosk .hk-filter { gap: .5rem; }
body.kiosk .viewsel { margin-left: .4rem; }
.pager { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }

/* Filtro del quadro camere: su una riga sola. In una pagina da banco lo
   spazio verticale e' quello che conta: le camere devono stare a schermo. */
.hk-filter { display: flex; gap: .7rem; align-items: end; flex-wrap: wrap;
  margin-bottom: .4rem; }
.hk-filter label { display: flex; flex-direction: column; gap: .2rem; }
.hk-filter select { min-width: 10rem; }
.hk-filter input[type="search"] { min-width: 14rem; }

/* Sezione richiudibile del Banco Hotel. Le sveglie sono consultazione: chiuse
   occupano una riga, e il riassunto dice gia' quante sono, quando scatta la
   prossima e quante non hanno risposto — cosi' spesso non serve nemmeno
   aprirle. Il quadro camere, che e' il lavoro vero, resta a schermo. */
.hk-fold { padding: .55rem .9rem; }
.hk-fold > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: 1.05rem; }
.hk-fold > summary::-webkit-details-marker { display: none; }
.hk-fold > summary::before { content: "▸"; color: var(--muted);
  display: inline-block; transition: transform .15s ease; }
.hk-fold[open] > summary::before { transform: rotate(90deg); }
.hk-fold[open] > summary { margin-bottom: .6rem; }
.hk-fold > summary .muted { font-size: .85rem; font-weight: 400; }

/* Guida passo passo nella pagina DNS: pieghevole, perché dopo la prima volta
   non serve più leggerla, ma non deve sparire (di impianti se ne fa uno ogni
   tanto, e la volta dopo non ci si ricorda l'ordine). */
.dnsguide > summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: .5rem; }
.dnsguide > summary::-webkit-details-marker { display: none; }
.dnsguide > summary::before { content: "▸"; color: var(--muted);
  transition: transform .15s ease; }
.dnsguide[open] > summary::before { transform: rotate(90deg); }
.dnsguide[open] > summary { margin-bottom: .6rem; }
.steps { margin: .4rem 0 .6rem; padding-left: 1.4rem; }
.steps > li { margin-bottom: .55rem; line-height: 1.5; }
/* Indirizzo interno per gli impianti in sede, dentro la riga dell'azienda. */
.inline-ip { display: flex; gap: .35rem; margin-top: .35rem; }
.fw-modelli { margin-top: .3rem; }
button.fw-update { border: 0; cursor: pointer; font: inherit; font-size: .8rem; }
button.fw-update:hover { filter: brightness(1.15); text-decoration: underline; }
.fw-sel { vertical-align: middle; margin-left: .2rem; }
.fw-modelli > summary { cursor: pointer; color: var(--accent, inherit); }
.fw-modelli form { display: flex; gap: .35rem; margin: .3rem 0 .2rem; }
.fw-modelli input { min-width: 0; flex: 1; font-size: .85rem; padding: .25rem .4rem; }
.inline-ip input { width: 12rem; font-size: .85rem; padding: .25rem .4rem; }

/* Sistema → DNS: l'output di certbot sotto l'errore del certificato. Chiuso di
   default: serve solo quando il riassunto non basta. */
.certlog { margin-top: 4px; }
.certlog summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.certlog pre {
  margin: 4px 0 0; padding: 8px; max-height: 260px; max-width: 420px;
  overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 11px; line-height: 1.4;
  background: var(--code-bg, #11151c); color: var(--code-fg, #d7dde6);
  border-radius: 6px;
}

/* Testata di pagina con i tasti a fianco del titolo (Sistema). Senza
   head-start la riga e' space-between e i tasti finiscono in fondo, addosso
   all'orologio in alto a destra. */
.page-head.head-start { justify-content: flex-start; gap: 1.25rem; }
.head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Conferma senza JavaScript: la CSP del pannello vieta il codice scritto
   dentro la pagina, quindi un onsubmit="confirm(...)" non partirebbe mai e il
   tasto agirebbe al primo clic. Il primo clic apre il riquadro, il secondo
   conferma. */
.confirm { position: relative; }
.confirm > summary { list-style: none; cursor: pointer; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm > summary::marker { content: ""; }
.confirm-box {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: 290px; padding: .85rem; text-align: left;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.confirm-box p { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.45; }
@media (max-width: 640px) {
  .confirm-box { position: static; width: auto; margin-top: .5rem; }
}

/* La riga che non si e' riusciuta a disegnare ({% sicuro %}). Deve saltare
   all'occhio: e' l'unico segnale che quel cliente ha un problema, e tutto il
   resto della pagina intorno funziona benissimo. */
.rotta > td {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
}
.rotta .badge.err {
  background: var(--danger);
  color: #fff;
}
:root[data-theme="dark"] .rotta > td,
:root[data-theme="linear"] .rotta > td { background: rgba(239, 68, 68, .14); }

/* Pagina DNS → Porte e protocolli */
.table.porte td { vertical-align: top; }
.table.porte input[type="number"] { padding: .25rem .4rem; }

/* Temi scuri: i controlli nativi (calendario delle date, menu a tendina,
   barre di scorrimento) seguono il tema invece di restare bianchi. */
:root[data-theme="dark"], :root[data-theme="linear"] { color-scheme: dark; }

/* ===== Campi di base in tutto il pannello =====
   Prima i campi fuori dai moduli «.form» (filtri, barre in testa alle pagine,
   Team…) uscivano col riquadro grezzo del browser. :where() ha specificità
   zero: gli stili dedicati (.form, .rep-filter, ricerca…) restano quelli. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=file]), select, textarea) {
  font: inherit; font-size: .92rem; color: var(--ink); background-color: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem .75rem; min-height: 2.35rem; max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
:where(input, select, textarea)::placeholder { color: var(--muted); opacity: .8; }
:where(input:not([type=checkbox]):not([type=radio]), select, textarea):hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
:where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
:where(select) { cursor: pointer; }
:where(textarea) { min-height: 5rem; line-height: 1.45; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; }
:where(input[type=file]) { font: inherit; font-size: .88rem; color: var(--muted); }
:where(input[type=file])::file-selector-button {
  font: inherit; font-weight: 600; font-size: .85rem; margin-right: .7rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--subtle); color: var(--ink);
}
/* Etichette in linea col campo (barre di filtro, Team): allineate e spaziate. */
/* Tutto dentro :where(): specificità zero, i moduli .form restano a blocchi. */
:where(label:has(> input:not([type=checkbox]):not([type=radio]), > select)) {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
:where(select) { min-width: 8rem; }

/* ===== Modulo interno ===== */
.form .ext-row3 { display: grid; grid-template-columns: minmax(110px, .6fr) 1fr 1.3fr; gap: 1rem; }
@media (max-width: 760px) { .form .ext-row3 { grid-template-columns: 1fr; gap: 0; } }
.prov-urls { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem;
  align-items: baseline; font-size: .88rem; }
.prov-urls .mono { word-break: break-all; user-select: all; }
@media (max-width: 560px) { .prov-urls { grid-template-columns: 1fr; } }
details.ext-details { padding: .7rem 1rem; }
details.ext-details > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-soft, var(--ink)); }
details.ext-details[open] > summary { margin-bottom: .2rem; }
.ext-alert { border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 55%, transparent);
  background: var(--danger-bg, #fdecec); color: var(--ink); border-radius: var(--radius-sm);
  padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.ext-alert ul { margin: .4rem 0 .2rem 1.1rem; padding: 0; }
.ext-alert li { margin: .2rem 0; }
.ext-alert .btn { margin-left: .5rem; }

/* ============================================================
   SEZIONI DELLE PAGINE: titoli e separazione
   Ogni sezione (card) ha una testata a fascia con il titolo nel carattere
   «display» (Plus Jakarta Sans, grassetto) e un colore d'accento che cambia
   da una sezione all'altra: le schede non sembrano piu' tutte uguali. I
   gruppi dentro i moduli (fieldset) hanno la stessa grammatica, piu' leggera.
   ============================================================ */
/* Carattere dei titoli servito dal pannello stesso (niente dipendenze esterne:
   funziona anche negli impianti senza Internet). Plus Jakarta Sans, licenza
   SIL Open Font License 1.1. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800;
  font-display: swap; src: url(/static/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); }
:root { --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --sec: var(--primary); }
h1, h2, h3, .login-title { font-family: var(--font-display); }
h1 { font-weight: 800; font-size: 1.6rem; letter-spacing: -.005em; word-spacing: .06em; }
.page-head { margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
h2 { font-weight: 800; font-size: 1.12rem; letter-spacing: 0; word-spacing: .05em; color: var(--ink); }
h3 { font-weight: 700; letter-spacing: 0; }

/* Separazione fra le sezioni: piu' aria, bordo piu' deciso. */
.card { margin-bottom: 1.35rem; }
.grid > .card { margin-bottom: 0; }
.grid { gap: 1.35rem; }

/* Testata a fascia: la card che comincia con il titolo. */
.card > h2:first-child {
  display: flex; align-items: center; gap: .6rem;
  margin: -1.15rem -1.25rem 1.1rem; padding: .85rem 1.25rem .8rem;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card > h2:first-child::before {
  content: ""; flex: none; width: 3px; height: 1.15em; border-radius: 3px;
  background: var(--sec);
}
/* Il colore della scheda viene dal significato, mai dalla posizione: di serie
   l'indaco del pannello; verde, giallo o rosso solo per dire com'e' andata.
   «:root» davanti: stessa forza di «:root[data-theme=glassy] .card» e piu' in
   basso nel file, quindi il bordo colorato vince anche sul vetro. */
.card.stat, .card.empty { --sec: var(--primary); }
:root .card.is-ok { --sec: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
:root .card.is-warn { --sec: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
:root .card.is-danger { --sec: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.card:is(.is-ok, .is-warn, .is-danger) > h2:first-child { background: color-mix(in srgb, var(--sec) 8%, transparent); }

/* Titoli dentro una riga (h2 con pulsanti accanto, testate dei report). */
.rep-card-head h2, .card > div:first-child > h2 { font-family: var(--font-display); font-weight: 800; }
.rep-card-head { padding-bottom: .65rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }

/* Gruppi dentro i moduli: titolo leggibile (non piu' maiuscoletto grigio),
   barretta d'accento a sinistra e sfondo leggermente diverso. Il colore e'
   lo stesso per tutti i gruppi: come per le schede, mai dalla posizione. */
.member-select { border-left: 3px solid var(--sec); padding: 1.05rem 1.1rem 1rem; margin: 1.35rem 0 1.2rem;
  background: color-mix(in srgb, var(--sec) 4%, var(--subtle)); }
.member-select legend {
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .005em; word-spacing: .05em;
  text-transform: none; color: var(--ink);
  padding: .2rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}

/* Sezioni a scomparsa dei moduli: titolo nella stessa famiglia. */
.blf-help summary, details.ext-details > summary { font-family: var(--font-display); font-weight: 700; }

/* ============================================================
   DASHBOARD: numeri della giornata/settimana + riquadri del menu
   ============================================================ */
.dash-status { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; margin-bottom: 1.1rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .82rem; color: var(--ink-soft); }
.dash-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dash-status.err i { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.35rem; }
.dash-kpi { display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
/* Icone dei numeri su fondo neutro: il colore resta per chi ha un problema vero
   (chiamate perse oggi > 0); zero perse si scrive «nessuna», in grigio. */
.dk-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--ink-soft); background: var(--neutral-soft); }
.dash-kpi.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.dash-kpi.is-danger .dk-ic { background: var(--danger-soft); color: var(--danger-ink); }
.dash-kpi.is-danger .dk-num { color: var(--danger-ink); }
.dk-num.dk-none { color: var(--muted); font-weight: 600; }
.dk-num { font: 800 1.65rem var(--font-display, inherit); line-height: 1.1; letter-spacing: -.01em; }
.dk-lbl { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.dk-sub { font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.dash-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; align-items: end; height: 210px; padding-top: .4rem; }
.dc-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: .35rem; }
.dc-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  border-bottom: 1px solid var(--line); }
.dc-bar { width: 38%; max-width: 22px; min-height: 2px; border-radius: 6px 6px 2px 2px; transition: height .3s; }
.dc-made { background: linear-gradient(180deg, #8b5cf6, #6366f1); }
.dc-recv { background: linear-gradient(180deg, #22c55e, #0ea5e9); }
.dc-talk { height: 6px; border-radius: 4px; background: var(--subtle); overflow: hidden; }
.dc-talk span { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, #0ea5e9); }
.dc-lbl { text-align: center; line-height: 1.15; }
.dc-lbl b { display: block; font-size: .78rem; text-transform: capitalize; }
.dc-lbl small { font-size: .68rem; color: var(--muted); }
.dc-col.today .dc-lbl b { color: var(--primary); }
.dash-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; font-size: .78rem; color: var(--muted); }
.dash-legend .lg::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.lg-made::before { background: #6366f1; } .lg-recv::before { background: #22c55e; } .lg-talk::before { background: #14b8a6; }
.dash-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dash-tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: .3rem .4rem; }
.dash-tbl td { padding: .5rem .4rem; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.dash-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .84rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.dash-group { margin-top: 1.6rem; }
.dash-group-title { font-size: 1rem; margin: 0 0 .8rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .75rem; }
.dash-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; text-align: center;
  padding: 1.1rem .6rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s, box-shadow .15s; }
.dash-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); box-shadow: var(--shadow-lg); }
.dt-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary-2) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.dash-tile:hover .dt-ic { color: #fff; background: linear-gradient(135deg, var(--primary-d), var(--primary-2)); }
.dt-lbl { font-size: .84rem; font-weight: 650; line-height: 1.2; }
.dash-group:nth-of-type(2n) .dt-ic { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.dash-badge { margin-left: auto; font: 700 .72rem var(--font, inherit); padding: .2rem .55rem; border-radius: 999px; background: var(--danger); color: #fff; }
.dash-vm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.dash-vm-item { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--subtle); }
.dash-vm-item.unread { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--primary); }
.dvm-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; }
.dvm-top .muted { font-size: .78rem; }
.dvm-read { margin: 0 0 0 auto; }
.dvm-txt { margin: .45rem 0 .55rem; font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dash-vm-item audio { width: 100%; height: 34px; }
.dash-vm { margin-top: 1.35rem; }

/* «Il mio assistente» (Dashboard) */
.dash-assist { margin-top: 1.35rem; }
.dash-assist.on { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.as-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.as-head h2 { margin: 0; display: flex; align-items: center; gap: .45rem; }
.as-toggle { margin: 0 0 0 auto; }
.as-switch { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .75rem .3rem .3rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--subtle); color: var(--muted);
  font: 650 .82rem var(--font, inherit); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.as-knob { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
.as-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.as-switch.on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.as-switch.on .as-knob { background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--primary))); }
.as-switch.on .as-knob::after { transform: translateX(14px); }
.as-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.as-intro { margin: .7rem 0 .2rem; max-width: 75ch; line-height: 1.55; }
.as-day { margin: .9rem 0 .6rem; padding: .85rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); }
.as-day h3 { margin: 0; font-size: .95rem; }
.as-day-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .45rem; }
.as-gauge { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem;
  border-radius: 999px; background: var(--subtle); border: 1px solid var(--line); font-size: .85rem; }
.as-gauge small { color: var(--muted); }
.as-stars { display: inline-flex; gap: 3px; }
.as-stars i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.as-gauge.v4 .as-stars i.on, .as-gauge.v5 .as-stars i.on { background: var(--ok); }
.as-gauge.v3 .as-stars i.on { background: var(--warn); }
.as-gauge.v1 .as-stars i.on, .as-gauge.v2 .as-stars i.on { background: var(--danger); }
.as-vote { font: 700 .74rem var(--font, inherit); padding: .12rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.as-vote.v4, .as-vote.v5 { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.as-vote.v1, .as-vote.v2 { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.as-mood { margin: .1rem 0 .2rem; font-size: .84rem; font-weight: 650; color: var(--warn); }
.as-mood.v4, .as-mood.v5 { color: var(--ok); }
.as-mood.v1, .as-mood.v2 { color: var(--danger); }
.as-sum { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; margin: .3rem 0 0; font-size: .88rem; line-height: 1.5; }
.as-sum dt { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.as-sum dd { margin: 0; color: var(--ink-soft); }
.as-sum dd.as-free { grid-column: 1 / -1; }
.as-todo { margin: 0; padding-left: 1.1rem; display: grid; gap: .15rem; }
.as-todo li::marker { color: var(--primary); }
.as-sum dt.as-da-fare, .as-sum dt.as-da-fare + dd { color: var(--primary); }
.as-calls { display: grid; gap: .5rem; }
.as-call { border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); padding: .1rem .85rem; }
.as-call[open] { padding-bottom: .7rem; }
.as-call > summary { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .55rem 0; cursor: pointer; list-style: none; font-size: .88rem; }
.as-call > summary::-webkit-details-marker { display: none; }
.as-call.pending { opacity: .8; }
.as-dir { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.as-dir.as-outbound { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.as-time { font-weight: 700; }
.as-dur { margin-left: auto; font-size: .78rem; }
.as-note { display: flex; align-items: center; gap: .35rem; font-size: .76rem; margin: .8rem 0 .2rem; }
@media (max-width: 600px) {
  .as-sum { grid-template-columns: 1fr; }
  .as-toggle { margin-left: 0; }
}

/* ============================================================
   RUBRICA A SCHEDE (bacheca come le camere dell'hotel)
   ============================================================ */
.ct-head { gap: .9rem; }
.ct-count { font: 700 .9rem var(--font, inherit); padding: .15rem .55rem; border-radius: 999px; background: var(--subtle); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.ct-search { flex: 1; min-width: 240px; max-width: 560px; position: relative; margin: 0; }
.ct-search input { width: 100%; margin: 0; padding: .62rem .9rem .62rem 2.3rem; border-radius: 12px; font-size: .95rem; }
.ct-search-ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.ct-books { display: flex; gap: .45rem; flex-wrap: wrap; margin: -.4rem 0 1.1rem; }
.ct-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-soft); font-size: .84rem; font-weight: 600; text-decoration: none; margin: 0; }
.ct-chip b { font-weight: 700; color: var(--muted); font-size: .76rem; }
.ct-chip.on { background: color-mix(in srgb, var(--primary) 16%, var(--panel)); border-color: var(--primary); color: var(--ink); }
.ct-chip-sel select { margin: 0; padding: .1rem .3rem; border: 0; background: transparent; font-size: .82rem; box-shadow: none; }
.ct-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .45rem; }
.ct-az { display: flex; flex-wrap: wrap; gap: .2rem; margin: -.3rem 0 .8rem; }
.ct-az a { min-width: 1.75rem; padding: .15rem .35rem; text-align: center; border-radius: 7px; font: 700 .78rem var(--font-display, inherit);
  color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.ct-az a:hover { color: var(--primary); border-color: var(--line); background: var(--panel); }
.ct-card[data-first] { scroll-margin-top: 90px; }
.ct-letter { grid-column: 1 / -1; margin: .5rem 0 -.1rem; padding: 0 .2rem; font: 800 .95rem var(--font-display, inherit); color: var(--primary);
  border-bottom: 1px solid var(--line); }
.ct-card { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.ct-card:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow); }
.ct-card[hidden] { display: none; }
/* Iniziali sobrie, tutte uguali: colore del pannello, niente arcobaleno. */
.ct-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font: 800 .8rem var(--font-display, inherit); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.ct-av-lg { width: 48px; height: 48px; font-size: 1.05rem; background: linear-gradient(135deg, var(--primary-d), var(--primary-2)); }
.ct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ct-name { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-org { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-nums { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin-top: .1rem; }
.ct-num { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.ct-num::before { content: "☎ "; color: var(--muted); }
.ct-mob::before { content: "✆ "; color: var(--muted); }
.ct-none-num { color: var(--muted); font-style: italic; }
.ct-none-num::before { content: none; }
.ct-speed { font-size: .7rem; font-weight: 700; padding: 0 .35rem; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); color: var(--ink-soft); }
.ct-card-add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); min-height: 62px; }
.ct-plus { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: var(--primary-d); color: #fff; }
.ct-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.ct-pager { flex-wrap: wrap; }
.ct-per { margin: 0; } .ct-per select { margin: 0; padding: .3rem .5rem; font-size: .82rem; }
.ct-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); }
.ct-dialog::backdrop { background: rgba(5, 8, 20, .55); backdrop-filter: blur(3px); }
.ct-dialog .form { padding: 1.1rem 1.3rem .4rem; margin: 0; }
.ct-dlg-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.ct-dlg-head div { flex: 1; display: flex; flex-direction: column; }
.ct-dlg-head b { font: 800 1.15rem var(--font-display, inherit); }
.ct-x { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--subtle); color: var(--ink); cursor: pointer; font-size: 1.2rem; }
.ct-dialog .ct-row3 { grid-template-columns: 1fr 1fr 1fr; }
.ct-dialog .ct-row-notes { grid-template-columns: 1fr 2.5fr; }
.ct-dlg-foot { display: flex; gap: .5rem; padding: .4rem 0 .6rem; }
.ct-del { padding: 0 1.3rem 1rem; margin: 0; }
@media (max-width: 640px) { .ct-dialog .ct-row3, .ct-dialog .ct-row-notes { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ On Air */
.oa-head h1 { display: flex; align-items: center; gap: .6rem; }
.oa-tenant { color: var(--muted); font-weight: 600; }
.oa-live { width: .7rem; height: .7rem; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: oa-pulse 1.8s infinite; }
@keyframes oa-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .oa-live { animation: none; } }
.oa-clock { font-variant-numeric: tabular-nums; font-size: .9rem; }
/* ------------------------------------------------------------ Vivavoce: avvisi e comandi */
.vv-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: .6rem 0 1rem; overflow-x: auto; }
.vv-tabs a { padding: .6rem .85rem; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.vv-tabs a.on { color: var(--ink); border-bottom-color: var(--primary); }
.vv-luce { display: inline-block; flex: none; width: .85rem; height: .85rem; border-radius: 50%; background: var(--neutral-soft); border: 2px solid var(--line); vertical-align: middle; }
.vv-luce[data-luce="fissa"] { background: var(--ok); border-color: var(--ok); }
.vv-luce[data-luce="lampeggia"] { background: var(--warn); border-color: var(--warn); animation: vv-lampo 1s steps(2, start) infinite; }
@keyframes vv-lampo { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .vv-luce[data-luce="lampeggia"] { animation: none; background: var(--danger); border-color: var(--danger); } }
.vv-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.vv-switch .vv-luce { width: 1.3rem; height: 1.3rem; }
.vv-switch strong { font-size: var(--fs-md); }
.vv-prossimo { font-size: var(--fs-md); margin: .6rem 0; }
.vv-av { padding: .5rem 0; border-top: 1px solid var(--line); }
.vv-av-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.vv-av-azioni { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.vv-av-azioni form { margin: 0; }
.vv-ant { list-style: none; padding: 0; margin: .3rem 0; font-variant-numeric: tabular-nums; }
.vv-ant li { padding: .15rem 0; }
.vv-ant li.saltata { color: var(--muted); }
.vv-manca { color: var(--danger-ink); }
.vv-quando fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; margin: .4rem 0; }
.vv-quando legend { font-weight: 600; padding: 0 .3rem; }
.vv-giorni { display: flex; flex-wrap: wrap; gap: .35rem .8rem; }
.vv-esito { white-space: pre-wrap; font-size: var(--fs-sm); margin: .3rem 0 0; }
/* le parti nascoste dai moduli (tipo di «Quando», «Cosa mandare», righe dei comandi):
   .row e altri contenitori hanno display:grid/flex, che vincerebbe su hidden */
.vv-avviso-form [hidden], .vv-comando-form [hidden], .vv-azioni [hidden], .vv-av [hidden] { display: none !important; }
.vv-in-onda { font-weight: 600; color: var(--warn-ink, var(--ink)); }
.oa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.oa-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: var(--shadow-sm); border-top: 3px solid var(--line); }
.oa-kpi-n { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oa-kpi-l { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
.oa-kpi-s { font-size: .76rem; color: var(--muted); }
.oa-kpi.hot { border-top-color: var(--danger); } .oa-kpi.hot .oa-kpi-n { color: var(--danger); }
.oa-kpi.busy { border-top-color: var(--warn); }
.oa-kpi.ok { border-top-color: var(--ok); }
.oa-kpi.bad { border-top-color: var(--danger); }
.oa-section { margin-bottom: 1.25rem; }
.oa-h2 { display: flex; align-items: center; gap: .5rem; font-weight: 800; margin: 0 0 .65rem; }
.oa-queues { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }
.oa-q { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; overflow: hidden; border-left: 4px solid var(--ok); }
.oa-q.has-wait { border-left-color: var(--warn); }
.oa-q.alarm { border-left-color: var(--danger); }
.oa-q-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem .5rem; }
.oa-q-title b { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; display: block; }
.oa-q-title small { color: var(--muted); font-size: .76rem; }
.oa-pill { font-size: .74rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--subtle); color: var(--muted); white-space: nowrap; }
.oa-pill.hot { background: var(--danger-bg); color: var(--danger); }
.oa-waitlist { padding: 0 1rem .5rem; display: flex; flex-direction: column; gap: .3rem; min-height: 2rem; }
.oa-waiter { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 8px; background: var(--subtle); font-size: .86rem; }
.oa-pos { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--warn); color: #fff; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.oa-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oa-tag { font-size: .68rem; font-weight: 700; padding: 0 .4rem; border-radius: 6px; background: var(--ok-bg); color: var(--ok); }
.oa-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-soft); }
.oa-timer.late { color: var(--danger); }
.oa-none { color: var(--muted); font-size: .84rem; font-style: italic; }
.oa-q-agents { padding: .5rem 1rem .6rem; border-top: 1px dashed var(--line); }
.oa-q-sub { font-size: .76rem; color: var(--muted); margin-bottom: .35rem; }
.oa-warn { color: var(--danger); font-weight: 700; }
.oa-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.oa-agent { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.oa-agent.out { opacity: .55; }
.oa-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.oa-dot.free { background: var(--ok); }
.oa-dot.ring { background: var(--primary); animation: oa-pulse 1s infinite; }
.oa-dot.talk, .oa-dot.busy { background: var(--danger); }
.oa-dot.wrap { background: #8b5cf6; }
.oa-dot.break { background: var(--warn); }
.oa-dot.out { background: transparent; border: 1.5px solid var(--muted); }
.oa-q-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); background: var(--subtle); margin-top: auto; }
.oa-stat { padding: .45rem .25rem; text-align: center; }
.oa-stat b { display: block; font-variant-numeric: tabular-nums; font-size: .95rem; }
.oa-stat small { display: block; font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.oa-stat.ok b { color: var(--ok); } .oa-stat.bad b { color: var(--danger); }
.oa-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.oa-chip { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--subtle); color: var(--ink-soft); font-size: .78rem; font-weight: 600; cursor: pointer; }
.oa-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.oa-state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.oa-qtag { display: inline-block; font-size: .74rem; font-weight: 600; padding: .05rem .45rem; margin: .1rem .25rem .1rem 0; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); }
.oa-agents td.num, .oa-agents th.num, .oa-section th.num, .oa-section td.num { text-align: right; font-variant-numeric: tabular-nums; }
.oa-row.out td { color: var(--muted); }
.oa-empty { margin: .5rem 0; }
@media (max-width: 520px) {
  .oa-queues { grid-template-columns: 1fr; }
  .oa-q-stats { grid-template-columns: repeat(3, 1fr); }
  .oa-kpi-n { font-size: 1.5rem; }
}
.oa-section .table-wrap { overflow-x: auto; }

/* ===== Elenchi lunghi richiudibili (Sicurezza: IP bloccati, attacchi, accessi, regole) ===== */
details.fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: .5rem; padding: .4rem .85rem; margin: .1rem 0 .6rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--ink-soft); font-size: .85rem;
  font-weight: 600; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; transition: transform .15s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { border-color: var(--primary-d); }
details.fold .fold-n { color: var(--muted); font-weight: 500; }

/* ===== Scroll: si muove SOLO il contenuto, mai la finestra intera =====
   Arrivati in fondo alla pagina, la rotella «passava» alla finestra e tutto il
   pannello saliva lasciando una fascia vuota sotto. Il contenuto e il menu
   trattengono lo scroll; su desktop la finestra non scorre proprio (il pannello
   e' alto quanto lo schermo e ha le sue barre di scorrimento interne). */
.content, .sidebar nav { overscroll-behavior: contain; }
@media (min-width: 821px) {
  html:has(body.app-shell), body.app-shell { height: 100%; overflow: hidden; }
}

/* Pagine pubbliche (informativa privacy dell'app) */
.legal { max-width: 760px; margin: 0 auto; padding: 2.5rem 16px 4rem; line-height: 1.65; }
.legal h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
.legal h2 { font-size: 1.1rem; margin: 1.8rem 0 .4rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }

/* --- Licenza: banner, popup, pagina ------------------------------------ */
.lic-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lic-b, #f59e0b55);
  background: var(--lic-bg, #f59e0b14); font-size: .92rem; }
.lic-banner .lic-text { flex: 1; min-width: 0; }
.lic-dot { width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--lic-c, #f59e0b); box-shadow: 0 0 0 4px var(--lic-bg, #f59e0b22); }
.lic-trial { --lic-c: #3b82f6; --lic-b: #3b82f655; --lic-bg: #3b82f614; }
.lic-expiring { --lic-c: #f59e0b; --lic-b: #f59e0b66; --lic-bg: #f59e0b16; }
.lic-grace { --lic-c: #f97316; --lic-b: #f9731677; --lic-bg: #f9731618; }
.lic-demo { --lic-c: #dc2626; --lic-b: #dc262677; --lic-bg: #dc26261a; }
.lic-active { --lic-c: #15803d; --lic-b: #16a34a55; --lic-bg: #16a34a14; }
.lic-off { --lic-c: #64748b; --lic-b: #64748b44; --lic-bg: #64748b12; }
.lic-popup { max-width: 460px; width: calc(100% - 32px); border: 1px solid var(--lic-b);
  border-top: 4px solid var(--lic-c); border-radius: 16px; padding: 24px;
  background: var(--panel, #fff); color: inherit; box-shadow: 0 24px 60px #0005; }
.lic-popup::backdrop { background: #0008; backdrop-filter: blur(2px); }
.lic-popup h2 { margin: 8px 0; }
.lic-popup-icon { color: var(--lic-c); }
.lic-card { border-left: 4px solid var(--lic-c); }
.lic-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lic-badge, .lic-pill { display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--lic-bg); color: var(--lic-c); border: 1px solid var(--lic-b);
  font-weight: 700; font-size: .85rem; }
.lic-days { font-size: 1.4rem; font-weight: 700; color: var(--lic-c); }
.lic-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; }
.lic-grid dt { color: var(--muted, #64748b); }
.lic-grid dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .lic-banner { flex-wrap: wrap; }
  .lic-grid { grid-template-columns: 1fr; }
  .lic-grid dd { margin-bottom: 6px; }
}

/* Costi e listini: importi allineati a destra e barra del monte minuti. */
.table td.r, .table th.r { text-align: right; }
.stat-num, .kpi-val, .table td.num { font-variant-numeric: tabular-nums; }
.monte { height: 8px; border-radius: 4px; background: var(--border, #e3e6eb);
  overflow: hidden; margin: .35rem 0; min-width: 6rem; }
.monte > span { display: block; height: 100%; background: var(--primary, #2f6fed); }
.monte.quasi > span { background: var(--warn, #d98e04); }
.monte.pieno > span { background: var(--danger, #c0392b); }
.privacy-note { font-size: .86rem; color: var(--muted); }

/* Banco Hotel -> Gruppi: camera + stellina «responsabile» nella stessa casella. */
.grp-rooms .grp-room { display: flex; align-items: center; gap: .35rem; }
.grp-rooms .grp-room.busy { opacity: .55; }
.grp-rooms .grp-lead { font-size: .85em; margin-left: auto; }
.grp-edit[open] { flex-basis: 100%; }
.grp-edit .grp-form { text-align: left; }

/* ============================================================
   MODULI COMPATTI E A SCHEDE
   Campi piu' bassi, etichette e spiegazioni piu' piccole, fino a quattro
   campi per riga sugli schermi larghi: si scrive senza scorrere la pagina.
   I moduli lunghi (interni, linee, code...) hanno le schede in alto
   (formtabs.js) e il tasto Salva sempre visibile in basso.
   ============================================================ */
.form label { margin-bottom: .55rem; font-size: .82rem; }
.form input[type=text], .form input[type=password], .form input[type=number],
.form input[type=time], .form input[type=date], .form input[type=file],
.form input[type=email], .form input[type=tel], .form input[type=url],
.form input[type=search], .form select {
  margin-top: .22rem; padding: .42rem .6rem; font-size: .9rem; min-height: 2.15rem;
}
.form textarea { margin-top: .22rem; padding: .45rem .6rem; font-size: .9rem; }
.form small { margin-top: .18rem; font-size: .76rem; line-height: 1.35; }
.form .row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .45rem .9rem; }
.form .ext-row3 { gap: .2rem .9rem; }
.form label.check { margin-bottom: .3rem; font-size: .86rem; }
.member-select { padding: .7rem .9rem .5rem; margin: .8rem 0 .7rem; }
.member-select legend { font-size: .86rem; padding: .12rem .6rem; }
.member-select label.check { padding: .12rem 0; }
.form > p, .member-select > p { margin: .2rem 0 .55rem; font-size: .84rem; }

/* Schede. */
.form-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 .7rem;
  padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle);
  position: sticky; top: 0; z-index: 5; }
.form-tab { border: 0; background: transparent; color: var(--ink-soft, var(--ink)); cursor: pointer;
  font: 600 .84rem/1.2 var(--font-display, inherit); padding: .45rem .8rem; border-radius: 9px;
  position: relative; }
.form-tab:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.form-tab.on { background: var(--primary); color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.form-tab.dirty::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--warn, #f59e0b); }
.form-tab-all { margin-left: auto; font-weight: 500; color: var(--muted); }
.form-tab-all.on { background: var(--panel); color: var(--ink); box-shadow: none; outline: 1px solid var(--line); }
.form.has-tabs .tab-pane:not(.tab-on) { display: none; }
.form.has-tabs .tab-pane.member-select { margin-top: .2rem; }
/* Tasto Salva sempre a portata di mano. */
.form.has-tabs > .form-actions, .form[data-tabs] > .form-actions {
  position: sticky; bottom: 0; z-index: 4; margin: .6rem -1.25rem -1.15rem; padding: .65rem 1.25rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; gap: .6rem; }
.form[data-tabs] > .form-actions::after { content: "Ctrl+Invio per salvare"; margin-left: auto;
  font-size: .74rem; color: var(--muted); }
@media (max-width: 760px) {
  .form-tabs { position: static; }
  .form[data-tabs] > .form-actions::after { display: none; }
}


/* Tabelle piu' fitte: righe basse, azioni e campi in linea (senza andare a capo). */
.table th, .table td { padding: .4rem .7rem; }
.table td form.inline { display: inline-flex; gap: .3rem; align-items: center; flex-wrap: nowrap; margin: 0; }
/* La cella dei pulsanti resta una cella vera (non flex, come .actions fuori
   dalle tabelle): stessa altezza, stesso bordo e stesso sfondo della riga. */
.table td.actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
.table td.actions > * + * { margin-left: .4rem; }
.table td select, .table td input[type=text], .table td input[type=email], .table td input[type=number] {
  padding: .22rem .45rem; font-size: .84rem; min-height: 0; min-width: 0; }
.table td .btn-sm { padding: .22rem .55rem; }

/* Manuali illustrati (Guida -> Manuali) */
.manuali-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.manuale-card h2 { font-size: 1.05rem; margin: 0 0 .4rem; display: flex; gap: .4rem; align-items: center; }
.manuale-azioni { display: flex; gap: .5rem; margin-top: .6rem; }
.manuali-mini { margin: .3rem 0 .7rem; padding-left: 1.1rem; font-size: .9rem; }

/* Configurazione rapida dell'azienda */
.rapida-sez { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.rapida-giorni { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.rapida-errori ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.rapida-azioni { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.rapida-fatto h2 { margin-top: 0; }
.rapida-sez label:not(.check) { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: .3rem; }
.rapida-sez textarea, .rapida-sez input[type=text] { width: 100%; }
.rapida-sez textarea { font-family: var(--mono, ui-monospace, monospace); min-height: 7rem; }
.rapida-sez label.check { display: flex; flex-direction: row; align-items: center; gap: .5rem; }

/* Che cosa e' il numero scritto in un campo destinazione (destlabel.js). */
.dest-what { display: block; margin-top: .2rem; font-size: .8rem; color: var(--muted, #6b7280); min-height: 1em; }
.dest-what.dest-missing { color: var(--danger, #dc2626); }
/* Destinazione a due menu (destpicker.js): tipo -> quale */
.destpick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; width: 100%; }
.destpick > .dp-kind { flex: 1 1 10rem; min-width: 0; max-width: 22rem; }
.destpick > .dp-item, .destpick > input { flex: 2 1 14rem; min-width: 0; }
.destpick > [hidden] { display: none !important; }
.destpick > .dest-what { flex-basis: 100%; margin-top: 0; }
.destpick:not(.dp-altro) > .dest-what:not(.dest-missing) { display: none; }
.dest-note { color: var(--muted, #6b7280); font-size: .85em; margin-left: .25rem; }

/* Orari: «Come funziona» in tre passi e titolo del profilo scelto */
.sched-steps { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.sched-steps li { margin: .25rem 0; }
.sched-title { margin: 1.4rem 0 .6rem; font-size: 1.15rem; }
.sched-edit-row td { padding-top: 0; border-top: 0; }
.sched-edit-row summary { list-style: none; cursor: pointer; display: inline-block; }
.sched-editbtn { border: 2px solid #facc15; color: var(--ink); font-weight: 700; }
.sched-editbtn:hover { border-color: #eab308; background: rgba(250,204,21,.14); }

/* Walkie-talkie: scelta degli interni del canale */
.wt-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; margin: .4rem 0 .6rem; }

/* Telefono (stretto): le tabelle larghe scorrono da sole, non tutta la pagina;
   indirizzi lunghi e menu a tendina non escono dallo schermo. */
@media (max-width: 820px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mono, small { overflow-wrap: anywhere; }
  select { max-width: 100%; }
}

/* Pagina DNS e certificati: schede di pagina e selezione multipla (dnspage.js). */
.page-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .9rem; padding: .3rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
html:not(.has-page-tabs) .page-tabs { display: none; }
.has-page-tabs .page-pane-off { display: none; }
.dns-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .7rem;
  padding: .5rem .7rem; border: 1px dashed var(--line); border-radius: 10px; }
.dns-bulk button[disabled] { opacity: .45; cursor: not-allowed; }
.table th.dns-sel, .table td.dns-sel { width: 2rem; text-align: center; padding-left: .4rem; padding-right: .2rem; }
.table .dns-sel input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; }

/* Schede che si aprono e si chiudono dal titolo (static/schede.js). */
.scheda-chiudibile > h2:first-child { cursor: pointer; user-select: none; }
.scheda-chiudibile > h2:first-child:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.scheda-chiudibile.is-chiusa > :not(h2:first-child) { display: none !important; }
.scheda-chiudibile.is-chiusa > h2:first-child { margin-bottom: -1.15rem; border-bottom: 0;
  border-radius: var(--radius); }
.scheda-freccia { margin-left: .2rem; width: .55rem; height: .55rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .15s; }
.scheda-chiudibile.is-chiusa .scheda-freccia { transform: rotate(-45deg); }
.scheda-pin { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: .95rem;
  line-height: 1; padding: .2rem .3rem; border-radius: 6px; opacity: .35; filter: grayscale(1);
  transition: opacity .15s, filter .15s; }
.scheda-pin:hover { opacity: .8; }
.scheda-pin[aria-pressed="true"] { opacity: 1; filter: none; }
@media print { .scheda-chiudibile.is-chiusa > :not(h2:first-child) { display: revert !important; }
  .scheda-pin, .scheda-freccia { display: none; } }

/* Sistema → DNS: «Stato dei certificati e limiti» (certstato.py). Barre dei
   limiti di Let's Encrypt verdi / gialle / rosse, elenco dei problemi. */
.certstato-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.certstato-head h2 { margin: 0; }
.certstato-badge { font-size: .85rem; padding: .3rem .8rem; }
.certstato-elenco { margin: .8rem 0; padding-left: 1.2rem; }
.certstato-elenco li { margin: .2rem 0; }
.certstato-elenco li.err { color: var(--danger); }
.certstato-elenco li.warn { color: var(--warn-ink); }
:root[data-theme="dark"] .certstato-elenco li.warn { color: #fcd34d; }
.certstato-limiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem 1.2rem; margin: .4rem 0 .6rem; }
.certstato-riga { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.certstato-barra { height: 10px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin: .3rem 0; }
.certstato-barra span { display: block; height: 100%; min-width: 2px; background: var(--ok); }
.certstato-barra.giallo span { background: var(--warn); }
.certstato-barra.rosso span { background: var(--danger); }
.certstato-det { margin-top: .6rem; }
.certstato-det > summary { cursor: pointer; padding: .3rem 0; }
.certstato-det .table { margin-top: .4rem; }
.certstato-prova { margin-top: .3rem; }
/* Dashboard: «Le mie chiamate» e «La mia azienda» */
.dash-sec { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.dash-sec-note { margin: -.2rem 0 .8rem; font-size: .85rem; }

/* Pagine vuote (_empty.html) */
/* Un elenco vuoto invita a fare: icona in un cerchio tenue, titolo, una frase
   e il pulsante per creare la prima cosa. tone «ok» = cerchio verde (buona
   notizia, es. nessun attacco). Le variabili dei token nuovi hanno il ripiego. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3, 12px); padding: var(--sp-10, 40px) var(--sp-6, 24px); }
.empty-state .empty-ic { display: grid; place-items: center; width: 64px; height: 64px;
  flex: none; border-radius: 50%;
  color: color-mix(in srgb, var(--accent) 75%, var(--ink));
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent)); }
.empty-state.is-ok .empty-ic { color: var(--ok-ink, color-mix(in srgb, var(--ok) 75%, var(--ink)));
  background: var(--ok-soft, color-mix(in srgb, var(--ok) 16%, transparent)); }
.empty-state .empty-ic svg.ic { width: 32px; height: 32px; }
.empty-state .empty-title { margin: var(--sp-1, 4px) 0 0; font-size: var(--fs-md, 1.05rem); }
.empty-state .empty-text { margin: 0; max-width: 46ch; color: var(--muted); }
.empty-state .empty-actions { display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2, 8px); margin-top: var(--sp-2, 8px); }

/* Scelta del file (filepick.js): il campo del browser («Choose File») resta nel
   modulo, «required» compreso, ma non si vede; al suo posto «Scegli il file…»
   e il nome scelto. Senza JavaScript non cambia niente. */
.filepick-input { position: absolute !important; width: 1px !important; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; opacity: 0; }
.filepick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2, 8px);
  margin-top: var(--sp-1, 4px); font-weight: 400; }
.filepick-btn { cursor: pointer; }
.filepick-name { color: var(--muted); font-size: var(--fs-sm, .85rem); overflow-wrap: anywhere; }
.filepick-name.is-scelto { color: var(--ink); }
.filepick.is-sopra .filepick-btn { border-color: var(--accent); }
.filepick-input:focus-visible + .filepick .filepick-btn { outline: 2px solid var(--accent);
  outline-offset: 2px; }
/* Pannello fluido */
/* On Air: il posto per i numeri e per le code c'e' gia' prima che onair.js li
   disegni (la pagina non salta); senza code torna piccolo. I numeri sono alti
   106 px con le scritte su una riga e 125 px quando vanno a capo (1366 px). */
#oa-kpis { min-height: 126px; }
#oa-queues { min-height: 280px; }
.oa-section:has(#oa-queues-empty:not([hidden])) #oa-queues { min-height: 0; }
/* «Sto lavorando» (ui.js): barra sottile in alto mentre arriva la pagina nuova
   e pulsante premuto in attesa. */
html.is-busy { cursor: progress; }
html.is-busy::before { content: ""; position: fixed; top: 0; left: 0; z-index: 10000;
  width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary) 40%, var(--primary) 60%, transparent);
  animation: tt-busy 1.1s ease-in-out infinite; }
@keyframes tt-busy { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  html.is-busy::before { animation: none; background: var(--primary); opacity: .6; } }
button[aria-busy="true"], input[aria-busy="true"] { cursor: progress; opacity: .75; }

/* Vista semplice (web.vista_pro): i comandi marcati .solo-pro si vedono solo
   in «Admin Pro». Il link per cambiare vista sta in fondo al menu. */
body.vista-semplice .solo-pro { display: none !important; }
.vista-sw { display: inline-flex; gap: .2rem; align-items: center; }
.vista-sw .vista-on { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; cursor: default; }
.riavvia-menu{position:relative}
.riavvia-menu>summary{list-style:none;cursor:pointer}
.riavvia-menu>summary::-webkit-details-marker{display:none}
.riavvia-pop{position:absolute;right:0;top:calc(100% + .3rem);z-index:60;display:flex;flex-direction:column;gap:.5rem;padding:.7rem;min-width:15rem;background:var(--card,#fff);border:1px solid var(--border,#ddd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.riavvia-pop form{display:flex;gap:.3rem;margin:0}
.riavvia-pop input{width:7rem}

/* Punto 7 — contrasto almeno 4,5:1 anche nel tema Linear: link più chiari
   (con :where non battono .btn & co.), scheda attiva sul viola scuro. */
:where(:root[data-theme="linear"]) a { color: #8f98ec; }
:root[data-theme="linear"] .form-tab.on { background: var(--primary-d); }
/* Telefono: niente scorrimento di lato per la scelta dell'azienda e i filtri
   della Sicurezza (vanno a capo). */
.tenant-picker select { min-width: 0; }
.sec-search { flex-wrap: wrap; }
.sec-search > * { min-width: 0; max-width: 100%; }
@media (max-width: 520px) { .tenant-picker { flex-wrap: wrap; } .tenant-picker select { flex-basis: 100%; } }
/* Moduli a schede: finché formtabs.js non li ha divisi restano invisibili,
   così la pagina non salta (CLS). Se lo script non parte si vedono comunque
   dopo poco (animazione di sicurezza). La classe «js» la mette navstate.js. */
html.js form[data-tabs]:not(.has-tabs),
html.js form[data-tabs]:not(.has-tabs) ~ * { visibility: hidden; animation: tabs-show 0s 1.2s forwards; }
@keyframes tabs-show { to { visibility: visible; } }
/* Puntina e freccia delle schede: posto riservato nel titolo fin dal primo
   disegno, così quando schede.js le aggiunge la pagina non salta (CLS). */
html.js main.content .card:not(.stat):not([data-sempre-aperta]) > h2:first-child { position: relative; padding-right: 3.6rem; }
.scheda-chiudibile > h2:first-child > .scheda-pin { position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); margin: 0; }
.scheda-chiudibile > h2:first-child > .scheda-freccia { position: absolute; right: .9rem; top: 50%; margin-top: -.35rem; }
:root[data-theme="linear"] .lic-active, :root[data-theme="dark"] .lic-active { --lic-c: #4cb782; }
/* On Air: finché onair.js non ha disegnato i numeri (riquadri in alto vuoti)
   le sezioni sotto restano invisibili, così non saltano giù quando i
   riquadri si riempiono (CLS sul telefono). */
html.js .oa-kpis:empty ~ .oa-section { visibility: hidden; }
/* Moduli con campi destinazione: invisibili finché destpicker.js non ha
   trasformato i campi nei due menu (cambia l'altezza delle righe). Se lo
   script non parte si vedono comunque dopo poco. */
html.js:not(.dp-pronto) main.content form:has(input[list='dests']),
html.js:not(.dp-pronto) main.content form:has(input[list='dests']) ~ * { visibility: hidden; animation: tabs-show 0s 1.2s forwards; }