/* Netwatch — foglio di stile comune a tutte le sezioni. */

:root {
  --bg: #f5f6f8; --panel: #ffffff; --line: #e2e5ea; --text: #16181d; --muted: #6a7180;
  --accent: #2f6fed; --new: #b9410a; --new-bg: #fdefe6; --ok: #1e7a44; --off: #9aa1ad;
  --nav: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --panel:#1c1f25; --line:#2c313a; --text:#e7e9ee; --muted:#98a0ae;
          --accent:#6d9bff; --new:#ff9b63; --new-bg:#3a2415; --ok:#4cc27e; --off:#6b7280;
          --nav:#191c21; }
}
* { box-sizing: border-box; }
body { margin:0; padding:0 0 64px; background:var(--bg); color:var(--text);
       font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
/* Tutta la larghezza disponibile: la tabella ha molte colonne e i bottoni
   in fondo non devono finire nello scroll orizzontale. */
.wrap { max-width:none; margin:0 auto; padding:20px 24px 0; }

/* ------------------------------------------------------------------ navbar */
.nav { position:sticky; top:0; z-index:50; background:var(--nav);
       border-bottom:1px solid var(--line); }
.nav-in { max-width:none; margin:0 auto; padding:0 24px;
          display:flex; align-items:center; gap:14px; min-height:54px; flex-wrap:wrap; }
.brand { font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap;
         display:flex; align-items:center; gap:8px; }
.brand .bulb { width:9px; height:9px; border-radius:50%; background:var(--ok); }
.nav-links { display:flex; gap:4px; flex:1; }
.nav-links a { padding:8px 14px; border-radius:8px; text-decoration:none; color:var(--muted);
               font-size:13.5px; font-weight:500; white-space:nowrap; }
.nav-links a:hover { background:var(--bg); color:var(--text); }
.nav-links a.on { background:var(--accent); color:#fff; }
.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.burger { display:none; margin-left:auto; padding:6px 11px; font-size:17px; line-height:1;
          border:1px solid var(--line); border-radius:8px; background:var(--panel);
          color:var(--text); cursor:pointer; }

@media (max-width:760px) {
  .nav-in { padding:8px 12px; }
  .burger { display:block; }
  .nav-links { display:none; flex-direction:column; width:100%; gap:2px; padding-bottom:8px; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:11px 12px; }
  .nav-right { width:100%; margin-left:0; }
}

/* ------------------------------------------------------------- intestazioni */
h1 { font-size:19px; margin:0 0 4px; }
.sub { color:var(--muted); font-size:13px; margin:0 0 18px; }
.sub a { color:var(--accent); text-decoration:none; }

/* ------------------------------------------------------------------- schede */
.cards { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:10px 14px; min-width:120px; flex:1 1 120px; }
.card b { display:block; font-size:22px; font-weight:650; }
.card span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.card.hot b { color:var(--new); }

/* ------------------------------------------------------- barre e comandi */
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.barlabel { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-right:2px; }
.tab { padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel);
       color:var(--text); text-decoration:none; font-size:13px; }
.tab.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.tab.toggle { color:var(--muted); }
.tab.toggle.on { background:var(--off); border-color:var(--off); color:#fff; }
.cnt { font-variant-numeric:tabular-nums; opacity:.65; font-size:11px; }
input[type=text], select { padding:7px 11px; border:1px solid var(--line); border-radius:8px;
                           background:var(--panel); color:var(--text); font-size:13px; }
input[type=text] { min-width:200px; }
button { padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:var(--panel);
         color:var(--text); font-size:12px; cursor:pointer; }
button:hover { border-color:var(--accent); color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { color:#fff; opacity:.9; }
.pill { font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--line);
        background:var(--panel); color:var(--muted); }
.pill.ok  { color:var(--ok); border-color:var(--ok); }
.pill.err { color:var(--new); border-color:var(--new); }
.pill.busy{ opacity:.6; }
.progress { height:8px; background:var(--line); border-radius:999px; overflow:hidden;
            flex:1; min-width:160px; display:none; }
.progress div { height:100%; width:0; background:var(--accent); transition:width .3s; }

/* ------------------------------------------------------------------ tabelle */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; background:var(--panel);
        border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
     padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tr.isnew { background:var(--new-bg); }
tr.unknown { background:var(--new-bg); }
th a.sort { color:inherit; text-decoration:none; white-space:nowrap; }
th a.sort:hover { color:var(--accent); }
th a.sort.on { color:var(--text); }
.sortable { opacity:.35; font-weight:400; }
th a.sort:hover .sortable { opacity:.8; }
.empty { padding:40px; text-align:center; color:var(--muted); }

/* -------------------------------------------------------------- contenuti */
.mac { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; white-space:nowrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--off); margin-right:6px; }
.dot.on { background:var(--ok); }
.tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 6px;
       border-radius:5px; background:var(--new); color:#fff; text-transform:uppercase; }
.tag.grey { background:var(--off); }
.tag.warn { background:transparent; color:var(--new); border:1px solid var(--new); }
.muted { color:var(--muted); font-size:12px; }
.nowrap { white-space:nowrap; }
.src { font-size:11px; color:var(--muted); font-style:italic; }
.svc { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc a { color:var(--accent); text-decoration:none; font-size:12px; }
.svc a:hover { text-decoration:underline; }
.svc-refresh { margin-top:2px; }
.svc-refresh button { font-size:11px; padding:1px 6px; opacity:.55; }
tr:hover .svc-refresh button, .svc-refresh button:focus { opacity:1; }
.ports { margin-top:2px; display:flex; gap:3px; flex-wrap:wrap; }
.port { font-size:10px; font-family:ui-monospace,Menlo,monospace; padding:1px 5px; border-radius:4px;
        border:1px solid var(--line); color:var(--muted); }
.acts { display:flex; gap:6px; flex-wrap:wrap; min-width:260px; }
.acts form { display:inline-flex; gap:4px; }
.acts input[type=text] { min-width:110px; width:130px; padding:4px 8px; font-size:12px; }
.acts button { white-space:nowrap; }
td:last-child { width:1%; }   /* la colonna azioni prende quel che le serve, mai tagliata */
.hist { margin-top:22px; font-size:12px; color:var(--muted); }
.hist td, .hist th { padding:6px 10px; }
.foot { color:var(--muted); font-size:12px; margin-top:14px; }

@media (max-width:820px) {
  .hide-s { display:none; }
  .wrap { padding:14px 12px 0; }
  input[type=text] { min-width:140px; }
  .card { min-width:100px; }
}

/* --------------------------------------------------- barra dei filtri */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
           background:var(--panel); border:1px solid var(--line); border-radius:12px;
           padding:10px 12px; margin-bottom:12px; }
.tb-left  { display:flex; gap:6px; align-items:center; flex:1 1 260px; }
.tb-right { display:flex; gap:8px; align-items:center; margin-left:auto; }
.search { position:relative; flex:1; display:flex; }
.search input { width:100%; min-width:0; padding-left:30px; }
.search::before { content:"⌕"; position:absolute; left:10px; top:50%; transform:translateY(-50%);
                  color:var(--muted); font-size:15px; pointer-events:none; }

/* tendine con caselle (reti, visibilità) */
.dd { position:relative; }
.dd > summary { list-style:none; cursor:pointer; padding:7px 12px; font-size:13px;
                border:1px solid var(--line); border-radius:8px; background:var(--panel);
                white-space:nowrap; user-select:none; }
.dd > summary::-webkit-details-marker { display:none; }
.dd > summary::after { content:" ▾"; color:var(--muted); }
.dd > summary:hover { border-color:var(--accent); }
.dd[open] > summary { border-color:var(--accent); color:var(--accent); }
.dd-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:250px;
           max-width:min(320px, 90vw); background:var(--panel); border:1px solid var(--line);
           border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:2px;
           box-shadow:0 10px 28px rgba(0,0,0,.14); max-height:70vh; overflow:auto; }
.dd-menu label { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px;
                 font-size:13px; cursor:pointer; }
.dd-menu label:hover { background:var(--bg); }
.dd-menu label .grow { flex:1; }
.dd-menu .sep { height:1px; background:var(--line); margin:6px 2px; }
.dd-menu .mini { font-size:11px; color:var(--muted); padding:2px 8px 6px; }
.dd-actions { display:flex; gap:6px; margin-top:6px; }
.dd-actions button { flex:1; }

/* stato: gruppo di pulsanti accostati */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden;
       background:var(--panel); flex-wrap:wrap; }
.seg a { padding:7px 13px; font-size:13px; color:var(--muted); text-decoration:none;
         border-right:1px solid var(--line); white-space:nowrap; }
.seg a:last-child { border-right:0; }
.seg a:hover { background:var(--bg); color:var(--text); }
.seg a.on { background:var(--accent); color:#fff; }
.seg a .cnt { color:inherit; opacity:.7; }

tbody tr:hover, table tr:hover { background:color-mix(in srgb, var(--accent) 4%, transparent); }
tr.isnew:hover, tr.unknown:hover { background:color-mix(in srgb, var(--new) 12%, transparent); }

@media (max-width:760px) {
  .toolbar { padding:10px; }
  .tb-right { width:100%; margin-left:0; }
  .dd { flex:1; }
  .dd > summary { text-align:center; }
  .dd-menu { right:auto; left:0; }
  .seg { width:100%; }
  .seg a { flex:1; text-align:center; }
}

/* titoli delle griglie */
.gridtitle { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
             margin:22px 0 8px; display:flex; align-items:center; gap:8px; font-weight:600; }
.gridtitle .cnt { background:var(--panel); border:1px solid var(--line); border-radius:999px;
                  padding:1px 8px; font-size:11px; letter-spacing:0; }
.gridtitle:first-of-type { margin-top:4px; }
.tag.kind { background:transparent; color:var(--accent); border:1px solid var(--accent);
            text-transform:none; font-weight:600; letter-spacing:0; }

/* ------------------------------------------------------------ tabella di rete */
tr.free td { color:var(--muted); }
tr.free td.mac { color:var(--muted); }
.tag.pool { background:transparent; color:var(--muted); border:1px solid var(--line); }
.tag.out  { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:6px 0 14px; }
.opts { display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; }
.opts label { display:inline-flex; gap:5px; align-items:center; white-space:nowrap; }

/* ------------------------------------------------------ centro di controllo */
:root { --down:#c62828; --warn:#b26a00; }
@media (prefers-color-scheme: dark) { :root { --down:#ff6b6b; --warn:#ffb74d; } }
.dot.down { background:var(--down); }
.dot.unk  { background:transparent; border:1.5px solid var(--off); }
.err-txt  { color:var(--down); }
.inline   { display:inline; }
h2 { font-size:15px; margin:0 0 10px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.flash { padding:10px 14px; border-radius:10px; border:1px solid var(--ok); color:var(--ok); background:var(--panel); margin:0 0 14px; }
.flash.err  { border-color:var(--down); color:var(--down); }
.flash.warn { border-color:var(--warn); color:var(--warn); }

/* moduli */
.form .fgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 14px; margin-bottom:12px; }
.form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.form label.wide { grid-column:span 2; }
.form label.check { flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:13px; }
.form input[type=text], .form input[type=number], .form input[type=password], .form select { width:100%; min-width:0; }
input[type=number], input[type=password] { padding:7px 11px; border:1px solid var(--line); border-radius:8px;
                                           background:var(--panel); color:var(--text); font-size:13px; }
@media (max-width:560px) { .form label.wide { grid-column:auto; } }

/* clienti */
.cgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-bottom:18px; }
.ccard { display:block; text-decoration:none; color:var(--text); margin:0; }
.ccard:hover { border-color:var(--accent); }
.ccard.alarm { border-color:var(--down); }
.ctitle { font-weight:650; font-size:15px; margin-bottom:8px; }
.cstats { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; font-size:12px; color:var(--muted); }
.cstats b { color:var(--text); font-size:14px; }
.keyrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.key { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px; letter-spacing:.04em;
       padding:6px 12px; border:1px dashed var(--line); border-radius:8px; user-select:all; word-break:break-all; }

/* login */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login form { width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; }
.login label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.login input { width:100%; min-width:0; }
.login button { padding:9px; font-size:14px; }

/* Dispositivi: sottomenu per tipo (antenne, switch, server) */
.subtabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.subtabs .tab .n { margin-left:6px; font-size:11px; opacity:.8; }
.subtabs .tab.alarm { border-color:var(--down); color:var(--down); }
.subtabs .tab.on.alarm { background:var(--down); color:#fff; }

/* Scanner dei clienti: tipo messo a mano e correzione in riga */
.tag.kind.manual { background:var(--accent); color:#fff; }
.edrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
details.ed { display:inline-block; }
details.ed > summary { list-style:none; cursor:pointer; color:var(--muted); font-size:13px; padding:0 4px; }
details.ed > summary::-webkit-details-marker { display:none; }
details.ed[open] > summary { color:var(--accent); }
/* in linea, non sospeso: .tablewrap scorre e taglierebbe un riquadro sospeso */
details.ed[open] { display:block; flex-basis:100%; }
.edform { min-width:220px; display:flex; flex-direction:column; gap:8px; margin-top:6px;
          padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.edform label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.edform input { width:100%; box-sizing:border-box; }
.subtabs.types .tab { font-size:12px; }

/* Scanner: nome host e produttore stretti, il testo intero nel tooltip */
.clip { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.mac a { color:inherit; text-decoration:underline dotted; }
td.mac a:hover { color:var(--accent); }

/* Comandi da copiare (pagina Plugin) */
pre.code { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
           font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }

/* ------------------------------------------------ barra alla RoomServer
   Toolbar con bottoni Filtri / Opzioni / Tipo apparato che aprono un riquadro
   sotto (come la pagina Camere di RoomServer, stile October CMS): bottoni bianchi
   con bordo leggero, primario viola, interruttori, etichetta piccola maiuscola.
   Le righe delle tabelle restano quelle di sempre. */
:root { --rs-primary:#6a6cf7; --rs-primary-hover:#8082f8; --rs-ring:rgba(64,68,82,.2); --rs-head:#35425b;
        --rs-danger:#dc3545; --rs-grey:#72809d; }
@media (prefers-color-scheme: dark) {
  :root { --rs-primary:#8082f8; --rs-primary-hover:#9a9bfa; --rs-ring:rgba(255,255,255,.16); --rs-head:#e7e9ee; }
}
.ico { display:inline-block; vertical-align:-2px; flex:none; }
.ctool { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:0 0 12px; }
.ct-item { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ct-right { margin-left:auto; }
.ct-div { width:1px; height:24px; background:var(--line); margin:0 4px; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; line-height:1.4;
       border:0; border-radius:6px; background:var(--panel); color:var(--text); cursor:pointer; white-space:nowrap;
       box-shadow:rgba(0,0,0,.08) 0 1px 1px 0, var(--rs-ring) 0 0 0 1px; text-decoration:none; }
.btn:hover { background:color-mix(in srgb, var(--panel) 92%, var(--text)); color:var(--text); border:0; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.btn-primary { background:var(--rs-primary); color:#fff; box-shadow:none; }
.btn.btn-primary:hover { background:var(--rs-primary-hover); color:#fff; }
.btn.tbtn.active, .btn.tbtn.on { background:color-mix(in srgb, var(--rs-primary) 12%, var(--panel));
       box-shadow:var(--rs-primary) 0 0 0 1px; color:var(--rs-primary); }
.badge { display:inline-block; min-width:18px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600;
         line-height:16px; text-align:center; color:#fff; background:var(--rs-danger); font-variant-numeric:tabular-nums; }
.badge.grey { background:var(--rs-grey); }
.badge.red { background:var(--rs-danger); }
.badge.blue { background:var(--rs-primary); max-width:180px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.fsel { padding:6px 10px; font-size:13px; border:1px solid var(--line); border-radius:6px; background:var(--panel);
        color:var(--text); min-width:0; }
input.fsel { min-width:140px; }
.ct-search { display:flex; align-items:center; border-radius:6px; background:var(--panel);
             box-shadow:var(--rs-ring) 0 0 0 1px; min-width:240px; max-width:320px; }
.ct-search .ico { margin:0 4px 0 10px; color:var(--muted); }
.ct-search input { border:0; background:transparent; color:var(--text); padding:7px 10px 7px 4px; font-size:13px;
                   width:100%; outline:none; }
.ct-search:focus-within { box-shadow:var(--rs-primary) 0 0 0 1px; }
.fpanel { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; padding:10px 16px; margin-bottom:12px;
          background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.fpanel[hidden] { display:none; }
.fpanel .frow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; width:100%; }
.flab { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.sw { display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; user-select:none; }
.sw input { position:absolute; opacity:0; pointer-events:none; }
.sw i { width:30px; height:17px; border-radius:999px; background:var(--panel); border:1px solid var(--off);
        position:relative; transition:background .15s, border-color .15s; flex:none; }
.sw i::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
               background:var(--off); transition:transform .15s, background .15s; }
.sw input:checked + i { background:var(--rs-primary); border-color:var(--rs-primary); }
.sw input:checked + i::after { transform:translateX(13px); background:#fff; }
.sw input:focus-visible + i { outline:2px solid var(--rs-primary); outline-offset:2px; }
.linkbtn { border:0; background:none; color:var(--rs-primary); padding:0; font-size:13px; cursor:pointer; text-decoration:none; }
.linkbtn:hover { text-decoration:underline; border:0; color:var(--rs-primary); }
.linkbtn[hidden], .badge[hidden] { display:none; }
.ct-agent { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ct-status { font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.ct-status b { color:var(--text); font-weight:600; }
.ctool + .progress, .progress#prog { margin:0 0 12px; }
/* Tipo apparato: un box per tipo con il numero grande */
.tboxes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; width:100%; }
.tbox { display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:6px; text-decoration:none;
        color:var(--text); background:var(--panel); box-shadow:var(--rs-ring) 0 0 0 1px; }
.tbox b { font-size:18px; font-weight:650; color:var(--rs-head); font-variant-numeric:tabular-nums; }
.tbox span { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbox:hover { box-shadow:var(--rs-primary) 0 0 0 1px; }
.tbox.on { background:var(--rs-primary); box-shadow:none; }
.tbox.on b, .tbox.on span { color:#fff; }
/* Colonne spente da Opzioni */
.hide-dev .c-dev, .hide-host .c-host, .hide-mac .c-mac, .hide-vendor .c-vendor, .hide-assign .c-assign,
.hide-online .c-online, .hide-first .c-first, .hide-ports .c-ports, .hide-svc .c-svc, .hide-name .c-name,
.hide-ip .c-ip, .hide-last .c-last, .hide-acts .c-acts, .hide-net .c-net { display:none; }
tr[hidden] { display:none; }
details.ed > summary.add { color:var(--rs-primary); font-size:12px; white-space:nowrap; }
a.tag.kind { text-decoration:none; }
@media (max-width:760px) {
  .ct-right { width:100%; margin-left:0; }
  .ct-search { max-width:none; width:100%; }
  .tbtn .lbl { display:none; }
  .fpanel { padding:8px 12px; gap:6px 14px; }
}

/* DHCP: stati (Attivi, Nuovi 24h...) come gruppo di bottoni alla RoomServer */
.ctool .clientsel select { padding:6px 10px; font-size:13px; border:1px solid var(--line); border-radius:6px;
                           background:var(--panel); color:var(--text); }
.ct-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.ct-tabs .seg { border:0; border-radius:6px; box-shadow:rgba(0,0,0,.08) 0 1px 1px 0, var(--rs-ring) 0 0 0 1px; }
.ct-tabs .seg a { border-right:1px solid var(--line); }
.ct-tabs .seg a.on { background:var(--rs-primary); color:#fff; }

/* Assegnazioni DHCP: esiti dei controlli su una riga ciascuno */
#res .tag { white-space:nowrap; margin-bottom:3px; }