/* SN Panel — tema scuro con i colori di simplenetworks.it */
:root{
  --bg:#060a1c;--ink:#eef2ff;--mute:#8d98c0;
  --glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.09);--line:rgba(255,255,255,.11);
  --navy:#292e68;--blue:#256fb3;--sky:#2d91cb;--cyan:#5be8f1;--violet:#5176ff;
  --accent:#ff0053;--ok:#39f8a0;--warn:#ffd416;
  --r:16px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.55 InterVariable,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;position:relative;overflow-x:hidden}
a{color:var(--sky);text-decoration:none}a:hover{color:var(--cyan)}

/* ---- sfere sfumate di sfondo ---- */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 22s ease-in-out infinite}
.orb.o1{width:560px;height:560px;left:-160px;top:-120px;background:radial-gradient(circle at 30% 30%,var(--sky),var(--blue) 55%,transparent 72%)}
.orb.o2{width:480px;height:480px;right:-140px;top:12%;background:radial-gradient(circle at 40% 40%,var(--violet),var(--navy) 60%,transparent 74%);animation-delay:-7s}
.orb.o3{width:420px;height:420px;left:28%;bottom:-180px;background:radial-gradient(circle at 50% 40%,var(--blue),var(--navy) 62%,transparent 75%);animation-delay:-13s}
.orb.o4{width:260px;height:260px;right:22%;bottom:18%;background:radial-gradient(circle,var(--cyan),transparent 70%);opacity:.22;animation-delay:-4s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-50px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:1.5rem;padding:.85rem 1.75rem;background:rgba(6,10,28,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .logo img{display:block;height:26px;width:auto}
.top nav{display:flex;gap:.35rem;flex:1}
.top nav a{color:var(--mute);padding:.4rem .85rem;border-radius:99px;font-weight:500}
.top nav a:hover,.top nav a.on{color:#fff;background:var(--glass-2)}
main{max-width:1240px;margin:0 auto;padding:1.75rem}
h1,h2,h3{margin:0}
.title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.25rem}

/* ---- controlli ---- */
form{display:inline}
.btn{display:inline-block;cursor:pointer;font:inherit;font-weight:500;color:var(--ink);background:var(--glass);border:1px solid var(--line);padding:.45rem .95rem;border-radius:99px;transition:.15s}
.btn:hover{background:var(--glass-2);border-color:rgba(255,255,255,.25);color:#fff}
.btn.primary{background:linear-gradient(135deg,var(--sky),var(--blue));border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(37,111,179,.4)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{color:#ff6b95}.btn.danger:hover{background:rgba(255,0,83,.15);border-color:var(--accent)}
input[type=email],input[type=number],input[type=password],input[type=search],select{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:.45rem .8rem;border-radius:12px;outline:0}
input:focus,select:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(45,145,203,.25)}
select option{background:#10152e;color:var(--ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.5rem}.toolbar .sp{flex:1}

/* ---- vetro ---- */
.glass,.stat,.card,.panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ---- statistiche ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{padding:1rem 1.25rem}
.stat b{display:block;font-size:2rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b.bad{background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text}
.stat span{color:var(--mute);font-size:.85rem}

/* ---- schede siti ---- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{display:block;padding:1.15rem 1.25rem;color:inherit;transition:.18s}
.card:hover{transform:translateY(-3px);border-color:rgba(91,232,241,.45);background-color:var(--glass-2);box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 1px rgba(91,232,241,.12);color:inherit}
.card h3{font-size:1.08rem;display:flex;align-items:center;gap:.55rem}
.card .url{color:var(--mute);font-size:.85rem;word-break:break-all}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.warn{background:var(--warn);box-shadow:0 0 10px var(--warn)}.dot.bad{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.meta{display:flex;gap:1.1rem;margin:.9rem 0 .7rem;font-size:.85rem;color:var(--mute)}.meta b{color:var(--ink);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:.4rem}
.badge{display:inline-block;font-size:.76rem;font-weight:600;padding:.12rem .6rem;border-radius:99px;background:rgba(57,248,160,.13);color:var(--ok);border:1px solid rgba(57,248,160,.25)}
.badge.bad{background:rgba(255,0,83,.14);color:#ff6b95;border-color:rgba(255,0,83,.3)}
.badge.off{background:var(--glass);color:var(--mute);border-color:var(--line)}
.card .foot{margin-top:.8rem;font-size:.78rem;color:var(--mute)}
.err{color:#ff6b95;font-size:.88rem;margin-top:.5rem}

/* ---- dettaglio ---- */
.panel{padding:1.15rem 1.35rem;margin-bottom:1.25rem}
.panel h2{font-size:1rem;margin-bottom:.9rem}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem 1.75rem}
.kv>div{word-break:break-word}.kv .l{display:block;color:var(--mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.1rem}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
th{color:var(--mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
tr:last-child td{border-bottom:0}tbody tr:hover td,table tr:hover td{background:rgba(255,255,255,.03)}
details summary{cursor:pointer;color:var(--sky)}
pre{overflow:auto;background:rgba(0,0,0,.35);padding:1rem;border-radius:12px;font-size:.8rem;color:#c9d4ff}
.empty{text-align:center;color:var(--mute);padding:3rem 1rem}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.login{width:100%;max-width:360px;padding:2rem;text-align:center}
.login img{height:30px;margin-bottom:1.5rem}
.login input{width:100%;margin-bottom:.9rem}.login .btn{width:100%}

@media(max-width:700px){.top{padding:.7rem 1rem;gap:.75rem}main{padding:1rem}.top nav a{padding:.35rem .6rem}}

/* ---- Generatore scheda sito (views/template.php) ---- */
#tg .hint{color:var(--mute);font-size:.85rem;margin:0 0 .8rem}
#tg .req-star{color:var(--accent)}
#tg #steps{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
#tg #steps button{font:inherit;font-size:.82rem;color:var(--mute);background:var(--glass);border:1px solid var(--line);padding:.3rem .8rem;border-radius:99px;cursor:pointer}
#tg #steps button:hover{color:#fff;background:var(--glass-2)}
#tg #steps button.on{color:#fff;background:linear-gradient(135deg,var(--sky),var(--blue));border-color:transparent}
#tg section{display:none;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#tg section.on{display:block}
#tg section>h2{margin:0 0 .4rem;font-size:1.05rem}
#tg .f{margin:.8rem 0}
#tg label.l{display:block;font-weight:600;font-size:.85rem;margin-bottom:.25rem}
#tg label.l.req::after{content:" *";color:var(--accent)}
#tg input[type=text],#tg select,#tg textarea{width:100%;font:inherit;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;padding:.45rem .7rem;outline:0}
#tg input:focus,#tg select:focus,#tg textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(45,145,203,.25)}
#tg textarea{min-height:75px;resize:vertical}
#tg select option{background:#10152e;color:var(--ink)}
#tg .bad{border-color:var(--accent) !important}
#tg .sub{font-weight:700;margin:1.1rem 0 0;font-size:.85rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.05em}
#tg .chk label{display:inline-block;margin-right:1rem}
#tg .row{position:relative;border:1px dashed var(--line);border-radius:12px;padding:.2rem 1rem .8rem;margin:.6rem 0}
#tg .rm{position:absolute;top:.4rem;right:.5rem;padding:.1rem .6rem}
#tg button.add,#tg .rm{font:inherit;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:.35rem .9rem;cursor:pointer}
#tg button.add:hover,#tg .rm:hover{background:var(--glass-2);color:#fff}
#tg .bar{position:sticky;bottom:0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding:.8rem 0;margin-top:1rem;background:linear-gradient(transparent,rgba(6,10,28,.92) 40%)}
#tg #msg{color:#ff6b95;font-weight:600}
#tg pre{background:rgba(0,0,0,.35);border:1px solid var(--line);color:#c9d4ff;border-radius:12px;padding:1rem;white-space:pre-wrap;max-height:480px;overflow:auto;font-size:.85rem}
#tg #promptBox{margin-top:1.2rem}#tg #promptBox pre{max-height:none}

.badge.paid{background:color-mix(in srgb,var(--badge-paid) 14%,transparent);color:var(--badge-paid);border-color:color-mix(in srgb,var(--badge-paid) 35%,transparent)}

/* ---- moneta: plugin a pagamento ---- */
.card{position:relative}
.paid-tag{position:absolute;top:.85rem;right:.9rem;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem .2rem .45rem;border-radius:99px;
  color:var(--badge-paid);background:color-mix(in srgb,var(--badge-paid) 16%,transparent);border:1px solid color-mix(in srgb,var(--badge-paid) 50%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--badge-paid) 35%,transparent);font-size:.85rem}
.paid-tag b{font-weight:700;color:#fff}
.card h3.has-tag{padding-right:4.2rem}
.coin-inline{display:inline-flex;vertical-align:middle;color:var(--badge-paid);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--badge-paid) 50%,transparent))}
.coin-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;transition:.15s;background:var(--glass);border:1px solid var(--line);color:var(--mute);opacity:.6}
.coin-btn:hover{opacity:1;border-color:rgba(255,255,255,.3)}
.coin-btn.on{color:var(--badge-paid);opacity:1;background:color-mix(in srgb,var(--badge-paid) 16%,transparent);border-color:color-mix(in srgb,var(--badge-paid) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--badge-paid) 35%,transparent)}

/* ---- uptime ---- */
.uptime{display:inline-flex;align-items:flex-end;gap:2px;height:22px}
.uptime i{display:block;width:5px;height:100%;border-radius:2px;background:var(--line)}
.uptime.big{display:flex;width:100%;height:34px;gap:3px;margin-bottom:.3rem}
.uptime.big i{flex:1;width:auto;border-radius:3px}
.u-up{background:var(--ok) !important}.u-part{background:var(--warn) !important}.u-down{background:var(--accent) !important}
.u-maint{background:var(--violet) !important}.u-none{background:rgba(255,255,255,.1) !important}
.uptime-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.1rem 0 .7rem}
.uptime-row b{font-size:.85rem;color:var(--mute)}.uptime-row b.ok{color:var(--ok)}.uptime-row b.warn{color:var(--warn)}.uptime-row b.bad{color:#ff6b95}
.uptime-label{margin:1rem 0 .35rem;color:var(--mute);font-size:.78rem}
.uptime-legend{margin-top:.9rem;color:var(--mute);font-size:.78rem}
.uptime-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 .25rem 0 .8rem;vertical-align:middle}.uptime-legend i:first-child{margin-left:0}

/* ---- popup (es. promemoria backup prima di un aggiornamento) ---- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem;background:rgba(3,6,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal-box{width:min(480px,100%);padding:1.6rem 1.7rem;border-radius:18px;text-align:center;
  background:linear-gradient(160deg,rgba(45,145,203,.22),rgba(41,46,104,.55)),#0b1030;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.modal-box h2{margin:0 0 .7rem;font-size:1.2rem}
.modal-what{color:var(--ink);font-weight:600}
.modal-box p{margin:0 0 1rem;color:#c9d4ff}
.modal-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:0 !important}

/* ---- filtro aggiornamenti e indicatore di stato nelle schede ---- */
.seg{display:inline-flex;gap:.35rem;flex-wrap:wrap}
.seg .btn small{margin-left:.35rem;padding:.05rem .45rem;border-radius:99px;background:rgba(255,255,255,.14);font-size:.75rem}
.seg .btn.primary small{background:rgba(255,255,255,.25)}
.card.is-update{border-left:4px solid var(--accent)}
.card.is-ok{border-left:4px solid var(--ok)}
.card.is-wait{border-left:4px solid var(--line)}
.upflag{display:flex;align-items:center;gap:.5rem;margin:.55rem 0 .15rem;font-weight:700;font-size:.95rem}
.upflag.up-update{color:#ff6b95}.upflag.up-ok{color:var(--ok)}.upflag.up-wait{color:var(--mute);font-weight:500}
.upflag .status-icon{flex:none}

/* ---- richiede attenzione ---- */
/* il riquadro prende il colore delle attenzioni che contiene: rosso se ce n'è una grave, giallo se sono solo avvisi, verde se è tutto a posto */
.panel.attention{--att:var(--accent);border-left:4px solid var(--att);background-image:linear-gradient(90deg,color-mix(in srgb,var(--att) 12%,transparent),transparent 45%)}
.panel.attention.is-bad{--att:var(--accent)}
.panel.attention.is-warn{--att:var(--warn)}
.panel.attention.is-ok{--att:var(--ok)}
.panel.attention h2{display:flex;align-items:center;gap:.6rem}
.panel.attention .count{font-size:.8rem;padding:.05rem .55rem;border-radius:99px;background:color-mix(in srgb,var(--att) 18%,transparent);color:color-mix(in srgb,var(--att) 70%,#fff)}
.panel.attention ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.panel.attention li{display:flex;align-items:center;gap:.6rem}
.panel.attention li i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn)}
.panel.attention li.bad i{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.panel.attention li a{color:var(--ink)}.panel.attention li a:hover{color:var(--cyan)}
.panel.attention li.more{color:var(--mute)}.panel.attention li.more i{display:none}
.att-ok{display:flex;align-items:center;gap:.6rem;color:var(--ok)}.att-ok span{color:var(--mute)}

/* ---- grafico tempi di risposta ---- */
.sparkline{display:block;width:100%;height:64px;border-radius:10px;background:rgba(255,255,255,.04)}
.sp-line{fill:none;stroke:var(--sky);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sp-dot{fill:var(--sky)}

/* riquadro "Richiede attenzione" comprimibile */
.panel.attention details summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;font-size:1rem;font-weight:600;color:var(--ink);user-select:none}
.panel.attention details summary::-webkit-details-marker{display:none}
.panel.attention details summary::before{content:"";flex:none;width:.55rem;height:.55rem;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);margin-right:.3rem;transition:.15s}
.panel.attention details:not([open]) summary::before{transform:rotate(-45deg)}
.panel.attention details[open] summary{margin-bottom:.8rem}
.panel.attention details summary:hover{color:#fff}

/* tempi di risposta: valori al passaggio del cursore */
.spark{position:relative;cursor:crosshair}
.spark .sparkline{height:72px}
.sp-axis{position:absolute;left:8px;font-size:.7rem;color:var(--mute);pointer-events:none}
.sp-max{top:3px}.sp-min{bottom:3px}
.sp-cursor{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35);pointer-events:none}
.sp-hover{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);pointer-events:none}
.sp-tip{position:absolute;bottom:calc(100% + 6px);white-space:nowrap;padding:.3rem .65rem;border-radius:8px;font-size:.8rem;font-weight:600;color:#fff;background:#0b1030;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;z-index:3}

/* tempo di risposta nella scheda */
.resp-row{display:flex;justify-content:space-between;gap:.6rem;margin:-.25rem 0 .7rem;font-size:.82rem;color:var(--mute)}
.resp-row b{color:var(--ink);font-weight:600}.resp-row b.warn{color:var(--warn)}.resp-row b.bad{color:#ff6b95}

/* bottone "Ignora" nei plugin esterni */
.ign-btn{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:.3rem .85rem;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--mute);transition:.15s}
.ign-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.ign-btn.on{color:#fff;background:rgba(141,152,192,.28);border-color:rgba(141,152,192,.6)}

/* legenda in basso a destra */
#legend{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
#legend-btn{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:99px;
  color:var(--ink);background:rgba(6,10,28,.82);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
#legend-btn:hover{border-color:rgba(255,255,255,.35)}
#legend-btn b{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--blue));font-size:.75rem}
#legend-panel{width:min(450px,calc(100vw - 2rem));max-height:min(70vh,560px);overflow:auto;padding:1rem 1.1rem;border-radius:16px;background:rgba(11,16,48,.96);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.6)}
#legend-panel[hidden]{display:none}
#legend-panel h3{margin:0 0 .4rem;font-size:1rem}
#legend-panel h4{margin:.8rem 0 .3rem;font-size:.7rem;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
#legend-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
#legend-panel li{display:flex;align-items:center;gap:.65rem;font-size:.85rem;color:#c9d4ff}
#legend-panel .lg-ico{flex:none;width:8.6rem;display:flex;align-items:center}
#legend-panel .badge{white-space:nowrap}#legend-panel .lg-ico .badge{white-space:normal;line-height:1.25}#legend-panel li>span:last-child .pdot{display:inline-block;vertical-align:middle}
#legend-panel .lg-bar{display:block;width:5px;height:20px;border-radius:2px}
#legend-panel .upflag{margin:0}

/* icona divieto: plugin ignorati */
.ban-inline{display:inline-flex;vertical-align:middle;color:var(--badge-ignored)}
.ban-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;transition:.15s;background:var(--glass);border:1px solid var(--line);color:var(--mute);opacity:.6}
.ban-btn:hover{opacity:1;border-color:rgba(255,255,255,.3)}
.ban-btn.on{color:var(--badge-ignored);opacity:1;background:color-mix(in srgb,var(--badge-ignored) 16%,transparent);border-color:color-mix(in srgb,var(--badge-ignored) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--badge-ignored) 25%,transparent)}

/* colonna unica "Badge" dei plugin esterni: moneta e divieto affiancati */
.badge-cell{white-space:nowrap}
.badge-cell form{display:inline-block;margin-right:.5rem}

/* etichette in alto a destra della scheda: plugin a pagamento e plugin ignorati */
.card-tags{position:absolute;top:.85rem;right:.9rem;display:flex;gap:.4rem;align-items:center}
.card-tags .paid-tag{position:static}
.ign-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem .2rem .45rem;border-radius:99px;font-size:.85rem;
  color:var(--badge-ignored);background:color-mix(in srgb,var(--badge-ignored) 16%,transparent);border:1px solid color-mix(in srgb,var(--badge-ignored) 45%,transparent)}
.ign-tag b{font-weight:700;color:#fff}
.card h3.has-tag-2{padding-right:8.2rem}

/* hosting */
.host-chip{display:inline-block;margin-left:.45rem;padding:.05rem .55rem;border-radius:99px;font-size:.74rem;font-weight:600;vertical-align:middle;
  --hc:#5be8f1;color:var(--hc);background:rgba(91,232,241,.1);border:1px solid rgba(91,232,241,.35)}
.host-chip[style]{background:color-mix(in srgb,var(--hc) 14%,transparent);border-color:color-mix(in srgb,var(--hc) 45%,transparent)}
.card .url .host-chip{margin-left:.5rem}

/* utente connesso (intestazione) */
header.top .whoami{margin-left:auto;margin-right:.6rem;color:var(--ink);text-decoration:none;font-weight:500}
header.top .whoami small{color:var(--mute);font-weight:400;margin-left:.3rem}

/* Impostazioni: ingranaggio nella barra e schede delle sezioni */
header.top .gear{display:inline-flex;align-items:center;color:var(--mute);padding:.4rem;border-radius:99px}
header.top .gear:hover,header.top .gear.on{color:#fff;background:var(--glass-2)}
.settings-wrap{display:grid;grid-template-columns:13rem 1fr;gap:1.75rem;align-items:start}
.settings-side{position:sticky;top:5rem;display:flex;flex-direction:column;gap:.2rem;padding:.9rem;border-radius:var(--r,16px);background:var(--glass);border:1px solid var(--line)}
.settings-side b{color:var(--mute);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .7rem .5rem}
.settings-side a{color:var(--mute);padding:.5rem .8rem;border-radius:10px;font-weight:500}
.settings-side a:hover,.settings-side a.on{color:#fff;background:var(--glass-2)}
.settings-main{min-width:0}
@media(max-width:800px){.settings-wrap{grid-template-columns:1fr}.settings-side{position:static;flex-direction:row;flex-wrap:wrap}.settings-side b{display:none}}
.coin-inline[hidden],.ban-inline[hidden],.pend[hidden]{display:none}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1.25rem}
.tabs a{color:var(--mute);padding:.4rem .95rem;border-radius:99px;font-weight:500;border:1px solid var(--line)}
.tabs a:hover,.tabs a.on{color:#fff;background:var(--glass-2)}
.role-matrix th{vertical-align:bottom}.role-matrix .rs{display:block;min-height:1em;color:var(--mute);font-weight:400}
.role-matrix td:first-child,.role-matrix th:first-child{min-width:15rem}
/* (matita e ＋ dei ruoli ora sono .dlg-pencil, come nel resto del Pannello) */
.role-matrix [data-col]:not(.edit) .rp,.role-matrix [data-col]:not(.edit) .rl,.role-matrix [data-col]:not(.edit) .rs,.role-matrix [data-col]:not(.edit) form,.role-matrix [data-col]:not(.edit) button.btn{display:none}
.role-matrix [data-col].edit .ro,.role-matrix [data-col].edit .rn{display:none}
.role-matrix [data-col="new"]:not(.edit){display:none}
/* In modifica la casella è un check: riquadro vuoto, con il ✓ (lo stesso della vista) quando è concesso */
.role-matrix input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.35rem;height:1.35rem;margin:0;border:1.5px solid var(--line);border-radius:6px;background:var(--glass);cursor:pointer;vertical-align:middle;display:inline-grid;place-content:center;transition:.15s}
.role-matrix input[type=checkbox]:hover{border-color:var(--mute)}
.role-matrix input[type=checkbox]::after{content:"✓";color:#fff;font-size:.95rem;line-height:1;opacity:0;transform:scale(.6);transition:.15s}
.role-matrix input[type=checkbox]:checked{background:var(--glass-2);border-color:#5be8f1}
.role-matrix input[type=checkbox]:checked::after{opacity:1;transform:none;color:#5be8f1}
.role-matrix input[type=checkbox]:focus-visible{outline:2px solid #5be8f1;outline-offset:2px}
.role-matrix .pencil.done{color:#5be8f1;font-weight:700}
.role-scroll{overflow-x:auto}.role-matrix{min-width:max-content}
.role-matrix th form.hd{display:inline}.role-matrix .pencil.danger:hover{filter:none;color:#ff6b6b}
.role-matrix tr:first-child th:first-child,.role-matrix td:first-child{position:sticky;left:0;background:#0d1530;z-index:1}

/* ---- canone (solo icona) e tipo di sito ---- */
.sub-tag{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--badge-canone);background:color-mix(in srgb,var(--badge-canone) 16%,transparent);border:1px solid color-mix(in srgb,var(--badge-canone) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--badge-canone) 30%,transparent)}
.sub-inline{display:inline-flex;vertical-align:middle;color:var(--badge-canone);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--badge-canone) 50%,transparent))}
.sub-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;transition:.15s;background:var(--glass);border:1px solid var(--line);color:var(--mute);opacity:.6}
.sub-btn:hover{opacity:1;border-color:rgba(255,255,255,.3)}
.sub-btn.on{color:var(--badge-canone);opacity:1;background:color-mix(in srgb,var(--badge-canone) 16%,transparent);border-color:color-mix(in srgb,var(--badge-canone) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--badge-canone) 35%,transparent)}
.card h3.has-tag-3{padding-right:11.4rem}
.card.is-hidden-site{opacity:.6}

/* ---- mini tab sulle schede: pallino di stato (uptime, risposta) e "i" degli aggiornamenti ---- */
.pop-wrap{position:relative;display:inline-flex;align-items:center;cursor:help;outline:none;border-radius:50%}
.pop-wrap:focus-visible{box-shadow:0 0 0 2px rgba(91,232,241,.6)}
.pop{display:none;position:absolute;left:-.5rem;top:calc(100% + .6rem);z-index:30;width:max-content;min-width:230px;max-width:320px;padding:.8rem .9rem;border-radius:12px;background:rgba(9,14,36,.97);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.55);font-size:.82rem;font-weight:400;line-height:1.35;color:var(--ink);text-align:left;cursor:default;white-space:normal}
.pop::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.pop-wrap:hover .pop,.pop-wrap:focus .pop,.pop-wrap.open .pop{display:block}
.pop-wrap.pop-left .pop{left:auto;right:-.5rem}
.card:hover,.card:focus-within{z-index:20}
.pop .pop-title{display:block;font-size:.9rem;margin-bottom:.45rem;color:#fff}
.pop .pop-sec{display:flex;justify-content:space-between;gap:1rem;margin:.55rem 0 .25rem;color:var(--mute);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.pop .pop-sec b{text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--mute)}
.pop .pop-sec b.ok{color:var(--ok)}.pop .pop-sec b.warn{color:var(--warn)}.pop .pop-sec b.bad{color:#ff6b95}
.pop .pop-row{display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0}
.pop .pop-row>span{color:var(--mute)}.pop .pop-row b{font-weight:600;color:var(--ink);white-space:nowrap}
.pop .pop-row b.warn{color:var(--warn)}.pop .pop-row b.bad{color:#ff6b95}
.pop .pop-row small{color:var(--mute);font-weight:400}
.pop .uptime{margin:.2rem 0 .4rem}
.upflag .pop-wrap{cursor:pointer}

/* scheda: hosting, tipologia e badge sulla stessa riga, sotto il dominio */
.card .chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.45rem 0 .1rem}
.card .chips .host-chip{margin:0}

/* etichette in alto a destra della scheda: più piccole, occupano meno spazio */
.card-tags{top:.7rem;right:.75rem;gap:.3rem}
.card-tags .paid-tag,.card-tags .ign-tag{gap:.2rem;padding:.08rem .45rem .08rem .3rem;font-size:.72rem;box-shadow:none}
.card-tags .sub-tag{width:22px;height:22px;box-shadow:none}
.card h3.has-tag{padding-right:3.4rem}
.card h3.has-tag-2{padding-right:5.6rem}
.card h3.has-tag-3{padding-right:7.6rem}

/* scheda di un sito a canone: gradiente che parte dall'angolo in alto a destra (colore: Impostazioni → Canone) */
.card.is-canone{background-image:linear-gradient(to bottom left,color-mix(in srgb,var(--badge-canone-gradient) 34%,transparent) 0%,color-mix(in srgb,var(--badge-canone-gradient) 10%,transparent) 38%,transparent 66%)}
.canone-preview{max-width:340px;margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r);border:1px solid var(--line);background-color:var(--glass);background-image:linear-gradient(to bottom left,color-mix(in srgb,var(--badge-canone-gradient) 34%,transparent) 0%,color-mix(in srgb,var(--badge-canone-gradient) 10%,transparent) 38%,transparent 66%);position:relative}
.canone-preview .sub-tag{position:absolute;top:.7rem;right:.75rem;width:22px;height:22px;box-shadow:none}

/* badge con colore scelto (Impostazioni → Badge) */
.badge.b-down,.badge.b-maint,.badge.b-ssl,.badge.b-hidden,.badge.b-ignored,.badge.b-update{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.b-down{--c:var(--badge-down)}.b-maint{--c:var(--badge-maint)}.b-ssl{--c:var(--badge-ssl)}.b-hidden{--c:var(--badge-hidden)}.b-ignored{--c:var(--badge-ignored)}.b-update{--c:var(--badge-update)}
.badge-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr auto auto;gap:.8rem 1rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line)}
.badge-row:first-of-type{border-top:0}
.badge-row .pv .paid-tag,.badge-row .pv .ign-tag{position:static}
.badge-row .pv{display:flex;align-items:center;min-height:34px}
@media(max-width:700px){.badge-row{grid-template-columns:1fr auto auto}.badge-row .pv{grid-column:1/-1}}

/* elenco della mini tab: altezza massima, l'interno scorre (il titolo resta fermo) */
.pop .pop-body{display:block;max-height:14rem;overflow-y:auto;overscroll-behavior:contain;padding-right:.35rem;margin-right:-.35rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* siti preferiti: stella accanto al nome (vuota = non preferito, piena e gialla = preferito) */
.fav-btn{display:inline-flex;align-items:center;flex:none;cursor:pointer;color:var(--mute);opacity:.4;transition:.15s;outline:none;border-radius:6px;--star-fill:0}
.card:hover .fav-btn,.fav-btn:hover,.fav-btn:focus-visible{opacity:1}
.fav-btn:focus-visible{box-shadow:0 0 0 2px rgba(91,232,241,.6)}
.fav-btn.on{color:var(--warn);opacity:1;--star-fill:.9}
.fav-btn.big{padding:.35rem}
.fav-btn .star path{fill-opacity:var(--star-fill,0)}

/* scheda: stella in alto a destra; i badge (moneta, ignorati, canone) in una riga sopra il nome */
.card>.fav-btn{position:absolute;top:.7rem;right:.75rem;z-index:2}
.card .card-tags{position:static;top:auto;right:auto;margin:0 0 .45rem;flex-wrap:wrap}
.card h3,.card h3.has-tag,.card h3.has-tag-2,.card h3.has-tag-3{padding-right:1.8rem}

/* ---- scelta del tema nel profilo ---- */
.theme-pick{display:flex;gap:.6rem;flex-wrap:wrap}
.theme-opt{display:flex;flex-direction:column;gap:.1rem;min-width:11rem;padding:.65rem .9rem;border-radius:12px;border:1px solid var(--line);background:var(--glass);cursor:pointer;transition:.15s}
.theme-opt input{position:absolute;opacity:0;pointer-events:none}
.theme-opt b{font-weight:600}.theme-opt span{color:var(--mute);font-size:.8rem}
.theme-opt:hover{border-color:var(--mute)}
.theme-opt.on{border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.theme-opt:focus-within{border-color:var(--sky)}

/* =====================================================================================
   TEMA CHIARO — si attiva con <html data-theme="light"> (scelta nel Profilo; "auto" segue il sistema)
   Le variabili cambiano i colori di base; sotto, i pochi punti con colori fissi pensati per lo scuro.
   ===================================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#eef2fa;--ink:#141b34;--mute:#59658f;--strong:#0b1230;
  --glass:rgba(255,255,255,.74);--glass-2:rgba(41,46,104,.07);--line:rgba(26,40,92,.15);
  --sky:#1a72b0;--blue:#256fb3;--cyan:#0a8aa4;
  --accent:#d6003f;--ok:#0d8a58;--warn:#a87300;
}
html[data-theme="light"] .orb{opacity:.2}
html[data-theme="light"] .orb.o4{opacity:.1}
html[data-theme="light"] .top{background:rgba(255,255,255,.78)}
html[data-theme="light"] .top .logo img,html[data-theme="light"] .login img{filter:brightness(0);opacity:.88}  /* il logo è bianco: in chiaro diventa scuro */

/* testi che nello scuro erano bianchi */
html[data-theme="light"] .top nav a:hover,html[data-theme="light"] .top nav a.on,
html[data-theme="light"] .btn:not(.primary):hover,
html[data-theme="light"] #tg #steps button:hover,html[data-theme="light"] #tg button.add:hover,html[data-theme="light"] #tg .rm:hover,
html[data-theme="light"] .panel.attention details summary:hover,
html[data-theme="light"] .ign-btn:hover,html[data-theme="light"] .ign-btn.on,
html[data-theme="light"] header.top .gear:hover,html[data-theme="light"] header.top .gear.on,
html[data-theme="light"] .settings-side a:hover,html[data-theme="light"] .settings-side a.on,
html[data-theme="light"] .tabs a:hover,html[data-theme="light"] .tabs a.on,
html[data-theme="light"] .role-matrix .pencil:hover,
html[data-theme="light"] .pop .pop-title,
html[data-theme="light"] .paid-tag b,html[data-theme="light"] .ign-tag b{color:var(--strong)}
html[data-theme="light"] .btn:hover,html[data-theme="light"] .coin-btn:hover,html[data-theme="light"] .ban-btn:hover,html[data-theme="light"] .sub-btn:hover,html[data-theme="light"] .ign-btn:hover,html[data-theme="light"] #legend-btn:hover{border-color:rgba(26,40,92,.35)}
html[data-theme="light"] .stat b{background-image:linear-gradient(135deg,var(--strong),var(--blue))}
html[data-theme="light"] .stat b.bad{background-image:linear-gradient(135deg,var(--strong),var(--accent))}

/* campi, tabelle, blocchi di codice */
html[data-theme="light"] input[type=email],html[data-theme="light"] input[type=number],html[data-theme="light"] input[type=password],html[data-theme="light"] input[type=search],html[data-theme="light"] input[type=text],html[data-theme="light"] select,html[data-theme="light"] #tg input[type=text],html[data-theme="light"] #tg select,html[data-theme="light"] #tg textarea{background:rgba(255,255,255,.92)}
html[data-theme="light"] select option,html[data-theme="light"] #tg select option{background:#fff;color:var(--ink)}
html[data-theme="light"] tbody tr:hover td,html[data-theme="light"] table tr:hover td{background:rgba(26,40,92,.045)}
html[data-theme="light"] pre,html[data-theme="light"] #tg pre{background:rgba(255,255,255,.75);color:#27325c}
html[data-theme="light"] .sparkline{background:rgba(26,40,92,.05)}
html[data-theme="light"] .sp-cursor{background:rgba(26,40,92,.4)}
html[data-theme="light"] .u-none{background:rgba(26,40,92,.12) !important}
html[data-theme="light"] .seg .btn small{background:rgba(26,40,92,.1)}
html[data-theme="light"] .card:hover{border-color:rgba(26,114,176,.5);box-shadow:0 14px 34px rgba(20,32,80,.16),0 0 0 1px rgba(26,114,176,.12)}

/* rosso dei testi, più scuro per essere leggibile sul chiaro */
html[data-theme="light"] .err,html[data-theme="light"] .upflag.up-update,html[data-theme="light"] .uptime-row b.bad,html[data-theme="light"] .resp-row b.bad,html[data-theme="light"] #tg #msg,html[data-theme="light"] .btn.danger,html[data-theme="light"] .pop .pop-row b.bad,html[data-theme="light"] .pop .pop-sec b.bad{color:#c2113f}
html[data-theme="light"] .btn.danger:hover{background:rgba(214,0,63,.1)}
html[data-theme="light"] .badge{background:rgba(13,138,88,.12);border-color:rgba(13,138,88,.3)}
html[data-theme="light"] .badge.bad{background:rgba(214,0,63,.1);color:#c2113f;border-color:rgba(214,0,63,.3)}
html[data-theme="light"] .panel.attention .count{color:color-mix(in srgb,var(--att) 72%,#000)}

/* badge con il colore scelto in Impostazioni → Badge: per il testo si scurisce, così si legge anche sul chiaro */
html[data-theme="light"] .badge.b-down,html[data-theme="light"] .badge.b-maint,html[data-theme="light"] .badge.b-ssl,html[data-theme="light"] .badge.b-hidden,html[data-theme="light"] .badge.b-ignored,html[data-theme="light"] .badge.b-update{color:color-mix(in srgb,var(--c) 58%,#000)}
html[data-theme="light"] .paid-tag,html[data-theme="light"] .coin-inline,html[data-theme="light"] .coin-btn.on,html[data-theme="light"] .badge.paid{color:color-mix(in srgb,var(--badge-paid) 58%,#000)}
html[data-theme="light"] .ign-tag,html[data-theme="light"] .ban-inline,html[data-theme="light"] .ban-btn.on{color:color-mix(in srgb,var(--badge-ignored) 58%,#000)}
html[data-theme="light"] .sub-tag,html[data-theme="light"] .sub-inline,html[data-theme="light"] .sub-btn.on{color:color-mix(in srgb,var(--badge-canone) 58%,#000)}
html[data-theme="light"] .host-chip{color:color-mix(in srgb,var(--hc) 55%,#000)}
html[data-theme="light"] .fav-btn.on{color:#b8860b}

/* finestre e riquadri flottanti */
html[data-theme="light"] .modal{background:rgba(20,28,60,.45)}
html[data-theme="light"] .modal-box{background:linear-gradient(160deg,rgba(45,145,203,.14),rgba(255,255,255,.92)),#fff;box-shadow:0 24px 70px rgba(20,32,80,.3)}
html[data-theme="light"] .modal-box p,html[data-theme="light"] #legend-panel li{color:#34406b}
html[data-theme="light"] #legend-btn{background:rgba(255,255,255,.88);box-shadow:0 6px 18px rgba(20,32,80,.18)}
html[data-theme="light"] #legend-panel{background:rgba(255,255,255,.97);box-shadow:0 18px 50px rgba(20,32,80,.28)}
html[data-theme="light"] .pop{background:rgba(255,255,255,.98);box-shadow:0 14px 40px rgba(20,32,80,.28)}
html[data-theme="light"] #tg .bar{background:linear-gradient(transparent,rgba(238,242,250,.95) 40%)}

/* tabella ruoli: colonna fissa e check */
html[data-theme="light"] .role-matrix tr:first-child th:first-child,html[data-theme="light"] .role-matrix td:first-child{background:#e9eef9}
html[data-theme="light"] .role-matrix input[type=checkbox]:checked{border-color:var(--cyan)}
html[data-theme="light"] .role-matrix input[type=checkbox]:checked::after,html[data-theme="light"] .role-matrix .pencil.done{color:var(--cyan)}
html[data-theme="light"] .role-matrix input[type=checkbox]:focus-visible{outline-color:var(--cyan)}

/* Scelta del reparto */
.dept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media(max-width:820px){.dept-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.dept-grid{grid-template-columns:1fr}}
.dept-card{display:flex;flex-direction:column;gap:.35rem;padding:1.4rem 1.5rem;min-height:7.5rem}
.dept-card b{font-size:1.3rem;color:var(--strong, #fff)}
.dept-card span{color:var(--mute);font-size:.9rem}
.dept-card:hover{border-color:var(--sky)}
.dept-chip{display:inline-block;font-size:.8rem;font-weight:600;padding:.2rem .7rem;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--ink);white-space:nowrap}
.dept-chip:hover{border-color:var(--sky)}
.dept-menu{position:relative}.dept-menu summary{list-style:none;cursor:pointer}.dept-menu summary::-webkit-details-marker{display:none}
.dept-list{position:absolute;right:0;top:calc(100% + .4rem);z-index:90;min-width:12rem;display:grid;padding:.35rem;border-radius:12px;border:1px solid var(--line);background:rgba(11,16,48,.97);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.dept-list a{padding:.45rem .7rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.88rem;white-space:nowrap}
.dept-list a:hover{background:var(--glass-2)}.dept-list a.on{font-weight:600;color:var(--sky)}.dept-list a.all{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:.2rem;color:var(--mute);font-size:.82rem}
html[data-theme="light"] .dept-list{background:rgba(255,255,255,.98);box-shadow:0 18px 50px rgba(20,32,80,.2)}
.dept-tags .badge{margin:0 .2rem .2rem 0}

/* Marketing: calendario mensile */
.cal-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.cal-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
.cal-filter .badge:not(.off){background:color-mix(in srgb,var(--c,var(--ok)) 18%,transparent);color:var(--ink);border-color:var(--c,var(--ok))}
.pdot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--c,var(--mute));margin-right:.35rem;vertical-align:baseline;flex:none}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:.8rem}
.cal-h{background:var(--glass-2);padding:.4rem .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.cal-d{background:var(--bg);min-height:7.2rem;padding:.3rem .35rem;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cal-d.out{opacity:.45}.cal-d.today{box-shadow:inset 0 0 0 2px var(--cyan)}
.cal-n{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mute)}
.cal-n b{opacity:0;font-weight:700;color:var(--ink)}.cal-d.can{cursor:pointer}.cal-d.can:hover{background:var(--glass-2)}.cal-d:hover .cal-n b{opacity:1}
.cal-e{display:block;font-size:.76rem;line-height:1.25;padding:.2rem .4rem;border-radius:6px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--ink);text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
button.cal-e{width:100%;text-align:left;font:inherit;font-size:.76rem;cursor:pointer;border-top:0;border-right:0;border-bottom:0}button.cal-e:hover{background:color-mix(in srgb,var(--c) 30%,transparent)}
.cal-e.sheet{border-left-style:dashed}
@media (max-width:760px){.cal-d{min-height:4.5rem}.cal-e{font-size:.68rem;-webkit-line-clamp:2}}

/* popup (dialog) */
.dlg{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink);padding:1.4rem 1.5rem;width:min(30rem,92vw);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.dlg::backdrop{background:rgba(3,6,20,.6);backdrop-filter:blur(4px)}
.dlg h2{margin:0 0 1rem}.dlg-fields{display:grid;gap:.8rem}.dlg-fields label{display:block}
.dlg-fields .l{display:block;color:var(--mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}
.dlg-fields input:not([type=color]),.dlg-fields select,.dlg-fields textarea{width:100%}
.dlg-ro{white-space:pre-line;margin:0 0 1rem}.dlg-hint{color:var(--mute);font-size:.82rem;margin:0}
.dlg-btns{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem}
.dlg input:not([type=color]),.dlg select,.dlg textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:.45rem .8rem;border-radius:12px;outline:0}
html[data-theme="light"] .dlg input:not([type=color]),html[data-theme="light"] .dlg select,html[data-theme="light"] .dlg textarea{background:rgba(255,255,255,.92)}
.dlg [hidden]{display:none!important}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.dlg-head h2{margin:0}
.dlg-pencil{display:inline-grid;place-content:center;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;transition:.15s}
.dlg-pencil:hover{background:var(--glass-2);border-color:var(--cyan);color:var(--cyan)}
.dlg-proj{color:var(--mute);font-size:.85rem;margin-bottom:.5rem}.dlg-name{font-size:1.1rem;font-weight:600;margin:0 0 .6rem;word-break:break-word}.dlg-notes{white-space:pre-line;margin:0 0 .8rem;color:var(--ink)}
.card.proj{border-left:4px solid var(--c)}.card.proj:hover{transform:none}
.proj-link{color:inherit;text-decoration:none}.proj-link:hover{text-decoration:underline}
.proj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.9rem}.proj-actions form{margin:0}
.card.proj .chips a.badge{text-decoration:none}
.dlg-pencil.danger{color:#ff6b95}.dlg-pencil.danger:hover{background:rgba(255,0,83,.15);border-color:var(--accent);color:#ff6b95}
a.dlg-pencil{text-decoration:none}
#entry-title{font-size:1.6rem;letter-spacing:-.02em;word-break:break-word}
.proj-next{margin-top:.7rem;font-size:.85rem;min-width:0}.proj-next .l{display:block;color:var(--mute);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.1rem}
.proj-next a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.proj-next a:hover{text-decoration:underline}
.sheet-row{display:flex;gap:.4rem;align-items:center;margin-bottom:.4rem}.sheet-row input[type=number]{width:6rem;flex:none}.sheet-row input[type=url]{flex:1;min-width:0}

/* calendario con molte voci */
.cal-d{cursor:pointer}.cal-d:hover{background:var(--glass-2)}
.cal-filter .badge small{margin-left:.4rem;opacity:.75;font-weight:700}
.cal-n small{font-weight:700;color:var(--ink);background:var(--glass-2);border-radius:99px;padding:0 .4rem}
.cal-p{display:block;font-style:normal;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font:inherit;font-size:.72rem;font-weight:600;color:var(--mute);background:none;border:0;text-align:left;padding:.1rem .3rem;cursor:pointer}.cal-more:hover{color:var(--ink)}
.dlg-wide{width:min(38rem,94vw)}
.day-list{display:grid;gap:.5rem;max-height:60vh;overflow:auto;padding-right:.2rem}
.day-e{display:grid;gap:.1rem;text-align:left;font:inherit;color:var(--ink);cursor:pointer;padding:.55rem .8rem;border-radius:10px;border:1px solid var(--line);border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.day-e:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}.day-e.sheet{border-left-style:dashed}
.day-p{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c)}
.day-n{color:var(--mute);font-size:.85rem;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* campi di testo, data e note nei pannelli (Marketing, Amministrazione) */
.panel input[type=text],.panel input[type=date],.panel input[type=url],.panel textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:.45rem .8rem;border-radius:12px;outline:0}
html[data-theme="light"] .panel input[type=text],html[data-theme="light"] .panel input[type=date],html[data-theme="light"] .panel input[type=url],html[data-theme="light"] .panel textarea{background:rgba(255,255,255,.92)}
input[data-date]{width:8.5rem}.kv input[data-date]{width:100%}

/* righe in sola lettura: la matita apre la modifica */
/* sola lettura / modifica: conta la riga più vicina (le voci del contratto sono righe dentro la riga del contratto) */
[data-row]:not(.editing) .ed:not([data-row]:not(.editing) [data-row].editing .ed),[data-row].editing .vw:not([data-row].editing [data-row]:not(.editing) .vw){display:none!important}
td.acts{white-space:nowrap;text-align:right}td.acts form{display:inline;margin:0}td.acts>span{display:inline-flex;gap:.3rem;align-items:center}
.addrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}.addrow input[type=number]{font:inherit}
tr.tot td{border-top:1px solid var(--line)}
.disc{color:var(--ok);font-weight:600;white-space:nowrap}.disc.up{color:var(--warn)}
.contract{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-bottom:.9rem}
.contract-head{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;cursor:pointer;list-style:none}.contract-head::-webkit-details-marker{display:none}
.contract-head::before{content:'▸';color:var(--mute);transition:transform .15s}.contract[open]>.contract-head::before{transform:rotate(90deg)}.contract[open]>.contract-head{margin-bottom:.7rem}.contract-head form{margin:0}
/* voci del cliente fuori da ogni contratto, scelta delle voci del nuovo contratto */
.uncovered{border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:.8rem 1rem;margin-bottom:.9rem;display:grid;gap:.45rem}
.uncovered>b{color:var(--warn)}
.unc-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0}.unc-row .unc-l{flex:1;min-width:12rem}.unc-row .unc-p{color:var(--mute);white-space:nowrap}
.new-contract>summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem}.new-contract>summary::-webkit-details-marker{display:none}
.new-contract[open]{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.item-pick{display:grid;gap:.3rem;max-height:16rem;overflow:auto}.item-pick label{display:flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer}.item-pick small{color:var(--mute)}
.warn-badge{background:rgba(255,212,22,.15);color:var(--warn);border-color:var(--warn)}
td .badge{white-space:nowrap}
table.sum td,table.sum th{white-space:nowrap}
.panel:has(table.sum){overflow-x:auto}

/* esito dei salvataggi in background */
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,1rem);z-index:60;max-width:min(90vw,32rem);padding:.6rem 1rem;border-radius:12px;background:var(--bg);border:1px solid var(--ok);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.err{border-color:var(--accent)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem;align-items:start}@media (max-width:820px){.cols2{grid-template-columns:1fr}}
.cal-d.exp{cursor:default}.cal-d.exp:hover{background:var(--bg)}a.cal-e:hover{background:color-mix(in srgb,var(--c) 30%,transparent)}
.cal-e.done{opacity:.45}.cal-e.more{display:none}.cal-d.all .cal-e.more{display:-webkit-box}.cal-d.all .cal-more{display:none}
.cal-filter span.badge{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--ink);border-color:var(--c)}.cal-filter span.badge .pdot,.exp-row .badge .pdot{background:var(--c)}
.exp-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .5rem}.exp-row small{color:var(--mute)}
.settings-group summary{cursor:pointer;list-style:none;color:var(--ink);font-weight:600;padding:.5rem .8rem;border-radius:10px;display:flex;justify-content:space-between}.settings-group summary::-webkit-details-marker{display:none}
.settings-group summary::after{content:'▸';color:var(--mute);transition:transform .15s}.settings-group[open] summary::after{transform:rotate(90deg)}.settings-group summary:hover{background:var(--glass-2)}
.settings-group a{display:block;padding-left:1.5rem}
@media(max-width:800px){.settings-group{width:100%}}
/* Ruoli: la colonna dei permessi va a capo, così le colonne dei ruoli (con la matita) restano a vista */
.role-matrix.role-matrix{min-width:0;width:100%}.role-matrix td:first-child{min-width:15rem}
.role-matrix .rm-dept th{text-align:left;padding-top:1.4rem;font-size:1.05rem;color:var(--ink);border-bottom:2px solid var(--line)}.role-matrix .rm-dept small{font-size:.75rem;font-weight:400;color:var(--mute);margin-left:.4rem}
.role-matrix .rm-area th{text-align:left;color:var(--mute);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding-top:.7rem}
.role-matrix .rm-inc{font-size:.68rem;margin-left:.3rem;white-space:nowrap}
.role-matrix .rm-dept th.rm-rh{text-align:center;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);vertical-align:bottom}
/* Icone: un solo disegno (componente x-icon) */
.ico{flex:none;vertical-align:middle}
.role-matrix .dlg-pencil{width:1.8rem;height:1.8rem;padding:0;margin:0 .1rem}.role-matrix th form.hd{display:inline}
.pencil.done .i-off,.pencil:not(.done) .i-on{display:none}.pencil.done{border-color:var(--cyan);color:var(--cyan)}
.role-matrix .rm-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}.role-matrix .rm-toggle::before{content:'▸';color:var(--mute);font-size:.8rem;transform:rotate(90deg);transition:transform .15s}
.rm-sec.closed .rm-toggle::before{transform:none}.rm-sec.closed tr:not(.rm-dept){display:none}.rm-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.exp-row small .paid{color:var(--ok);font-weight:600}
/* Statistiche (grafici): colori delle serie per tema, assi e griglia discreti, tooltip */
.viz{--series-1:#3987e5;--series-2:#d95926}
html[data-theme="light"] .viz{--series-1:#2a78d6;--series-2:#eb6834}
.viz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}
.viz-legend{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--mute)}.viz-legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:3px;background:var(--c);margin-left:.5rem}
.viz-svg{width:100%;height:auto;display:block}.viz-svg .grid{stroke:var(--line);stroke-width:1}.viz-svg .axis{stroke:var(--mute);stroke-width:1;opacity:.6}
.viz-svg .tick{fill:var(--mute);font-size:11px}.viz-svg .hit{fill:transparent}.viz-svg .hit:hover{fill:var(--glass-2)}
.viz-table{margin-top:.6rem;font-size:.85rem}.viz-table summary{cursor:pointer;color:var(--mute)}
.hbar{display:grid;grid-template-columns:minmax(6rem,11rem) 1fr auto;align-items:center;gap:.6rem;padding:.3rem 0}.hbar .hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.hbar .ht{height:.85rem}.hbar .ht i{display:block;height:100%;min-width:2px;background:var(--series-1);border-radius:0 4px 4px 0}.hbar .hv{font-size:.85rem;color:var(--mute);font-variant-numeric:tabular-nums}
.hbar:hover .ht i{filter:brightness(1.15)}
#viz-tip{position:fixed;z-index:50;pointer-events:none;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.45rem .65rem;font-size:.82rem;box-shadow:0 6px 24px rgba(0,0,0,.35)}#viz-tip b{display:block;margin-bottom:.15rem}
/* Card dei clienti: avvisi di scadenza, come le card dei siti */
.card.is-exp-ok{border-left:4px solid var(--ok)}.card.is-exp-warn{border-left:4px solid var(--warn)}.card.is-exp-bad{border-left:4px solid var(--accent)}
.badge.b-exp-bad,.badge.b-exp-warn{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.b-exp-bad{--c:#ff6b95}.b-exp-warn{--c:var(--warn)}html[data-theme="light"] .b-exp-bad{--c:var(--accent)}
.exp-chips{margin-top:.5rem}
.stats.kpi .stat b{font-size:1.55rem;white-space:nowrap}
#viz-tip div{white-space:nowrap}