/* 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:260px; 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; }
.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; }