/* =====================================================================
   GESTORE VENTILATORI - Tema (ispirato a Ordinex)
   ===================================================================== */
:root{
  --primary:#0f6ea8; --primary-dark:#0b5480; --secondary:#5f7d3a;
  --success:#2f9f6b; --danger:#d85a4f; --warning:#f4c542; --info:#123b6d;
  --bg:#f7f5ef; --text:#203047; --muted:#6f7c8f;
  --border:rgba(18,59,109,.12); --surface:rgba(255,255,255,.92);
  --shadow:0 18px 40px rgba(18,59,109,.12); --sidebar-w:268px;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:var(--text); margin:0; min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(244,197,66,.18), transparent 26%),
    radial-gradient(circle at top right, rgba(15,110,168,.15), transparent 24%),
    linear-gradient(180deg,#fbfaf6 0%,var(--bg) 100%);
}
a{color:var(--primary)}

/* ---- Layout shell ---- */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,rgba(18,59,109,.98) 0%,rgba(15,110,168,.94) 100%);
  color:#fff; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
  z-index:1040; transition:transform .3s ease; box-shadow:6px 0 30px rgba(18,59,109,.18);
}
.sidebar .brand{padding:1.4rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar .brand .eyebrow{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.sidebar .brand strong{display:block; font-size:1.25rem; line-height:1.15; margin-top:.15rem}
.sidebar nav{padding:1rem .8rem; display:flex; flex-direction:column; gap:.25rem; overflow-y:auto}
.sidebar nav a{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:14px;
  color:rgba(255,255,255,.85); text-decoration:none; font-weight:600; font-size:.95rem;
  transition:background .2s,color .2s;
}
.sidebar nav a:hover{background:rgba(255,255,255,.1); color:#fff}
.sidebar nav a.active{background:rgba(255,255,255,.18); color:#fff}
.sidebar nav a .ic{width:20px; text-align:center}
.sidebar .sb-foot{margin-top:auto; padding:1rem 1.1rem; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:rgba(255,255,255,.8)}

.main{flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
  background:linear-gradient(135deg,rgba(18,59,109,.96),rgba(15,110,168,.92)); color:#fff;
  box-shadow:0 10px 30px rgba(18,59,109,.16);
}
.topbar h1{font-size:1.25rem; margin:0; font-weight:700}
.topbar .user{margin-left:auto; display:flex; align-items:center; gap:.8rem; font-size:.9rem}
.content{padding:1.6rem 1.5rem; flex:1}
.hamburger{display:none; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.3rem; border-radius:10px; padding:.3rem .6rem; cursor:pointer}
.sb-overlay{display:none; position:fixed; inset:0; background:rgba(18,59,109,.45); z-index:1035}

/* ---- Card ---- */
.card-x{background:var(--surface); border:1px solid rgba(255,255,255,.6); border-radius:20px; box-shadow:var(--shadow); padding:1.4rem; margin-bottom:1.3rem}
.card-x h2,.card-x h3{margin-top:0}
.section-title{font-size:1.05rem; font-weight:700; color:var(--info); margin:0 0 1rem}

/* ---- KPI ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.1rem; margin-bottom:1.4rem}
.kpi{position:relative; overflow:hidden; border-radius:20px; padding:1.3rem 1.4rem; color:#fff; box-shadow:var(--shadow)}
.kpi .lbl{font-size:.82rem; letter-spacing:.04em; opacity:.92; text-transform:uppercase; font-weight:600}
.kpi .val{font-size:2.4rem; font-weight:800; line-height:1.1; margin-top:.2rem}
.kpi .ic{position:absolute; right:1rem; top:1rem; font-size:1.6rem; opacity:.35}
.kpi.b1{background:linear-gradient(135deg,#0f6ea8,#0b5480)}
.kpi.b2{background:linear-gradient(135deg,#f4c542,#d99b1f); color:#3a2c05}
.kpi.b3{background:linear-gradient(135deg,#2f9f6b,#1f7a4f)}
.kpi.b4{background:linear-gradient(135deg,#5f7d3a,#47602b)}
.kpi.b5{background:linear-gradient(135deg,#123b6d,#0b2647)}
.kpi.b6{background:linear-gradient(135deg,#d85a4f,#b23f35)}
.kpi.b2 .lbl{opacity:.85}

/* ---- Buttons ---- */
.btn{border-radius:999px !important; font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border:none}
.btn-secondary{background:linear-gradient(135deg,var(--secondary),#47602b); border:none}
.btn-success{background:linear-gradient(135deg,var(--success),#1f7a4f); border:none}
.btn-danger{background:var(--danger); border:none}
.btn-outline-light-x{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.4)}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto; border-radius:16px}
table.tbl{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:16px; overflow:hidden}
table.tbl thead th{background:rgba(18,59,109,.06); color:var(--info); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; padding:.8rem .9rem; text-align:left; white-space:nowrap}
table.tbl tbody td{padding:.75rem .9rem; border-top:1px solid var(--border); font-size:.92rem; vertical-align:middle}
table.tbl tbody tr:hover{background:rgba(15,110,168,.04)}

/* ---- Badge stato ---- */
.badge-stato{display:inline-block; padding:.32rem .7rem; border-radius:999px; font-size:.75rem; font-weight:700; color:#fff}
.badge-stato.bg-warning{color:#3a2c05}

/* ---- Forms ---- */
.form-label{font-weight:600; font-size:.88rem; color:var(--text)}
.form-control,.form-select{border-radius:12px; border:1px solid var(--border)}
.form-control:focus,.form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(15,110,168,.18)}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.login-card{width:100%; max-width:410px; background:var(--surface); border-radius:24px; box-shadow:var(--shadow); padding:2.2rem; border:1px solid rgba(255,255,255,.6)}
.login-card .brand-mark{width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem; margin:0 auto 1rem}

/* ---- Misc ---- */
.muted{color:var(--muted)}
.flash{border-radius:14px; padding:.85rem 1.1rem; margin-bottom:1.2rem; font-weight:600}
.flash.success{background:rgba(47,159,107,.15); color:#1f7a4f; border:1px solid rgba(47,159,107,.3)}
.flash.error{background:rgba(216,90,79,.14); color:#b23f35; border:1px solid rgba(216,90,79,.3)}
.flash.info{background:rgba(15,110,168,.12); color:var(--primary-dark); border:1px solid rgba(15,110,168,.25)}
.toolbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.1rem}
.toolbar .spacer{flex:1}
.empty{text-align:center; color:var(--muted); padding:2.5rem 1rem}

/* ---- Responsive ---- */
@media (max-width:992px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:inline-block}
  body.sb-open .sb-overlay{display:block}
}