:root{
  --bg:#f7fafc;
  --panel:#ffffff;
  --muted:#5b6b7b;
  --text:#0f172a;
  --primary:#148dcd;
  --ok:#16a34a;
  --bad:#dc2626;
  --shadow:0 6px 18px rgba(17,24,39,.08);
  --radius:14px;
  --border:#e5e7eb;

  /* Sidebar */
  --sb-expanded: 240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans;
  background:var(--bg); color:var(--text);
}

/* ---------- TOPBAR (logo + titolo orizzontali) ---------- */
.topbar{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border) }
.topbar-inner{ max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px }
.hamburger{
  font-size:22px; line-height:1; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer;
}
.no-sidebar .hamburger{ display:none; }
.backlink{
  text-decoration:none; font-size:20px; line-height:1;
  border:1px solid var(--border); border-radius:10px; padding:4px 10px;
  color:var(--text); background:#fff;
}
.brandline{ display:flex; align-items:center; gap:10px }
.brandlogo-lg{ width:36px; height:36px; object-fit:contain }
.brandtitle-lg{ font-weight:900; font-size:28px; color:var(--primary) }
.flexgrow{ flex:1 }

/* icona utente */
.usericon{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.usericon:active{ transform: translateY(1px) scale(0.99); box-shadow:none }
.usericon:focus{ outline:2px solid #93c5fd; outline-offset:2px }
.usericon svg{ width:22px; height:22px; fill:#334155 }

/* ---------- LAYOUT PRINCIPALE ---------- */
.container{ max-width:1100px; margin:12px auto; padding:0 16px }

/* ---------- CARD / TABELLE / FORMS ---------- */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow)
}
.grid{ display:grid; gap:16px }
.grid.cards{ grid-template-columns: repeat(auto-fill,minmax(260px,1fr)) }

.input, select, .file{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); outline:none
}
.label{ font-size:14px; color:var(--muted); margin-bottom:6px; display:block }
.field{ margin-bottom:12px }
.table{ width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; border:1px solid var(--border) }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left }
.table th{ color:var(--muted); font-weight:600; background:#f3f4f6 }
.kbd{ background:#eef2f7; padding:2px 8px; border-radius:8px; border:1px solid var(--border) }

.btn{
  display:inline-block; padding:8px 14px; border-radius:12px;
  background:var(--primary); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:var(--shadow); border:1px solid var(--primary);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn.outline{ background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none }
.btn.small{ padding:6px 10px; font-size:14px; border-radius:10px }
.btn.logout{ background:var(--bad); border-color:var(--bad) }
.btn:active{ transform: translateY(1px) scale(0.99); box-shadow:none }

/* Pulsanti solo icona con tooltip */
.iconbtn{
  --size:36px;
  width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background:#fff;
  cursor:pointer; text-decoration:none; font-size:18px;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.iconbtn:hover{ background:#f3f4f6 }
.iconbtn:active{ transform: translateY(1px) scale(0.98) }
.iconbtn[data-tip]{ position:relative }
.iconbtn[data-tip]::after{
  content: attr(data-tip);
  position:absolute; bottom: calc(100% + 8px); left:50%; transform: translate(-50%, 4px);
  background:#111827; color:#fff; font-size:12px; line-height:1; padding:6px 8px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:10;
}
.iconbtn[data-tip]::before{
  content:""; position:absolute; bottom: calc(100% + 2px); left:50%;
  width:8px; height:8px; background:#111827; transform: translateX(-50%) rotate(45deg);
  opacity:0; transition:opacity .12s ease; z-index:10;
}
.iconbtn:hover::after, .iconbtn:focus::after{ opacity:1; transform: translate(-50%, 0) }
.iconbtn:hover::before, .iconbtn:focus::before{ opacity:1 }

/* Status piccoli (rete online/offline) */
.netstatus{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#111827;
  padding:2px 6px; border:1px solid var(--border); border-radius:999px; background:#fff;
}
.netstatus .dot{ width:8px; height:8px; border-radius:50%; background:#9ca3af }

/* Badge “Stato Macchina” (grande) */
.machstate{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; font-weight:800; border:1px solid var(--border);
  background:#fff; color:#111827; box-shadow:var(--shadow);
  font-size:16px;
}
.machstate .dot{ width:14px; height:14px; border-radius:50% }

/* Varianti colore */
.machstate.ferma{      background:#e6f4ff; color:#0369a1 }       /* celeste */
.machstate.ferma .dot{ background:#0ea5e9 }
.machstate.mov{        background:#fff7ed; color:#9a3412 }       /* arancione */
.machstate.mov .dot{   background:#f59e0b }
.machstate.lavoro{     background:#ecfdf5; color:#065f46 }       /* verde */
.machstate.lavoro .dot{background:#16a34a }
.machstate.emergenza{  background:#fef2f2; color:#b91c1c }       /* rosso + lampeggio dot */
.machstate.emergenza .dot{
  background:#dc2626; animation: blinkDot 1s infinite;
}
@keyframes blinkDot { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- SIDEBAR (invariata, a scomparsa) ---------- */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:var(--sb-expanded);
  transform:translateX(calc(-1 * var(--sb-expanded)));
  background:#ffffff; border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:64px 10px 14px; gap:10px; transition:transform .18s ease; z-index:19;
}
body.sidebar-open .sidebar{ transform:translateX(0) }
.no-sidebar .sidebar{ display:none }
.sidenav{ display:flex; flex-direction:column; width:100%; gap:6px; flex:1 }
.sidenav .navitem{
  width:100%; display:flex; align-items:center; justify-content:flex-start;
  gap:12px; padding:10px 12px; border-radius:12px; border:1px solid transparent; color:inherit; text-decoration:none;
  transition: transform .06s ease, background-color .12s ease, border-color .12s ease;
}
.sidenav .navitem:hover{ background:#f3f4f6; border-color:var(--border) }
.sidenav .navitem:active{ transform: translateY(1px) scale(0.99) }
.sidenav .navitem img{ width:26px; height:26px; display:block }
.navlabel{ font-weight:600; color:#111827 }
.grow{ flex:1 }

.sidebar-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.2); display:none; z-index:18;
}
body.sidebar-open .sidebar-overlay{ display:block }

/* DIALOG */
.dialog{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.25)
}
.dialog.open{ display:flex }
.dialog .panel{ background:#fff; border:1px solid var(--border); border-radius:14px; max-width:560px; width:100%; padding:16px; box-shadow:var(--shadow) }
.dialog header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.dialog h3{ margin:0 }

/* FOOTER */
.footer{ margin-top:40px; border-top:1px solid var(--border); padding:20px 0; color:var(--muted) }

/* ------ Popover utente ------ */
.usercluster{ position:relative }
.popover{ position:absolute; right:0; top:calc(100% + 10px); display:none; z-index:30 }
.popover.open{ display:block }
.popcard{ min-width:280px; border:1px solid var(--border); box-shadow:var(--shadow); padding:12px 12px 14px 12px }
.pophead strong{ font-size:14px; letter-spacing:.2px }
.poplist{ margin:6px 0 0 0; padding:0 }
.poprow{
  display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:center;
  padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; margin-top:8px
}
.poprow dt{ margin:0; font-size:12px; color:var(--muted) }
.poprow dd{ margin:0; font-weight:600; color:#111827 }
.popcard::before{
  content:""; position:absolute; right:18px; top:-8px; width:14px; height:14px; background:#fff;
  border-left:1px solid var(--border); border-top:1px solid var(--border); transform:rotate(45deg)
}