/* ===========================
   SpiderNode — Premium Glass UI
   compatibile con il tuo HTML
   =========================== */

:root{
  --bg0:#05030a;
  --bg1:#09051a;
  --bg2:#120726;

  --panel: rgba(18, 10, 34, .48);
  --panel2: rgba(12, 7, 22, .55);
  --stroke: rgba(194, 134, 255, .18);
  --stroke2: rgba(255,255,255,.08);

  --text:#f4f0ff;
  --muted: rgba(244,240,255,.72);

  --violet:#7c2ae8;
  --violet2:#b36bff;
  --pink:#ff2da8;
  --cyan:#22e6ff;
  --green:#00e5a8;
  --red:#ff4d6d;

  --radius: 18px;
  --radius2: 14px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 26px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 520px at 18% 22%, rgba(255,45,168,.20), transparent 60%),
    radial-gradient(1000px 520px at 72% 28%, rgba(124,42,232,.24), transparent 60%),
    radial-gradient(900px 480px at 55% 80%, rgba(34,230,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
  overflow-x: hidden;
}

/* --- piccoli dettagli “premium” --- */
::selection{ background: rgba(179,107,255,.28); }

a{ color: inherit; text-decoration: none; }

/* ===========================
   Topbar
   =========================== */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  padding: 14px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,6,18,.78), rgba(10,6,18,.48));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.topbar .container-fluid{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing: .2px;
  font-weight: 650;
  user-select:none;
}

.brand i{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(179,107,255,.35), rgba(124,42,232,.15));
  border: 1px solid rgba(179,107,255,.25);
  box-shadow: 0 0 22px rgba(124,42,232,.18);
}

.brand span{ font-size: 16px; opacity:.92; }
.brand b{ font-size: 16px; opacity:1; }

/* Bottone “Home” che hai messo inline: lo rendiamo coerente */
.topbar button{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,6,18,.55) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px !important;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.topbar button:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(124,42,232,.18), var(--shadow2);
}

/* ===========================
   Primary gradient button
   =========================== */
.btn-primary-grad{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 650;
  letter-spacing: .15px;
  color: #fff;
  border: 1px solid rgba(179,107,255,.22);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,45,168,.18), transparent 55%),
    linear-gradient(90deg, rgba(124,42,232,.95), rgba(179,107,255,.92));
  box-shadow: 0 0 26px rgba(124,42,232,.20);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-primary-grad:hover{
  transform: translateY(-2px);
  filter: brightness(1.10);
  box-shadow: 0 0 34px rgba(124,42,232,.32);
}
.btn-primary-grad:active{
  transform: translateY(0px) scale(.99);
}

/* ===========================
   Toolbar + Search
   =========================== */
.toolbar{
  padding: 0 14px;
}

.search-box{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(10,6,18,.52);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}

.search-box i{
  opacity: .75;
  font-size: 16px;
}

.search-box input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: var(--text);
  font-weight: 520;
  letter-spacing: .2px;
}
.search-box input::placeholder{
  color: rgba(244,240,255,.55);
}

#refreshBtn{
  border-radius: 14px;
  padding: 11px 16px;
  border: 1px solid rgba(179,107,255,.18);
}

/* ===========================
   Glass panels / cards
   =========================== */
.glass{
  background: linear-gradient(180deg, rgba(18,10,34,.55), rgba(10,6,18,.42));
  border: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(179,107,255,.18);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  position: relative;
}

.glass::before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(255,45,168,.18), transparent 60%),
    radial-gradient(900px 220px at 80% 0%, rgba(124,42,232,.22), transparent 60%);
  pointer-events:none;
}

.card-lg{
  padding: 18px !important;
}

.card-title{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: .2px;
}

.card-title i{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(124,42,232,.18);
  border: 1px solid rgba(179,107,255,.18);
  box-shadow: 0 0 18px rgba(124,42,232,.16);
}

/* ===========================
   Table
   =========================== */
.table-wrapper{
  position: relative;
  z-index: 1;
  width:100%;
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,5,14,.38);
}

.table-wrapper table{
  width:100%;
  border-collapse: collapse;
  min-width: 880px; /* così non “schiaccia” le colonne */
}

.table-wrapper thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 12.5px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(244,240,255,.78);
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(14,9,24,.92), rgba(12,7,22,.72));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.table-wrapper tbody td{
  padding: 14px 14px;
  color: rgba(244,240,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
}

.table-wrapper tbody tr{
  transition: background .18s ease;
}

.table-wrapper tbody tr:hover{
  background: rgba(124,42,232,.10);
}

.table-wrapper tbody tr td:first-child{
  font-variant-numeric: tabular-nums;
  color: rgba(244,240,255,.75);
}

/* “badge” di stato: se nel JS metti classi tipo .status-ok/.status-warn/.status-off */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,6,18,.45);
}
.status-ok{ border-color: rgba(0,229,168,.22); box-shadow: 0 0 14px rgba(0,229,168,.10); }
.status-warn{ border-color: rgba(255,208,80,.22); box-shadow: 0 0 14px rgba(255,208,80,.10); }
.status-off{ border-color: rgba(255,77,109,.22); box-shadow: 0 0 14px rgba(255,77,109,.10); }

/* Azioni: se nel JS crei bottoni/link in tabella */
.table-action{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,6,18,.40);
  color: rgba(244,240,255,.90);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.table-action:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(124,42,232,.16);
}

/* ===========================
   Modal
   =========================== */
.modal-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}

.modal-card{
  width: min(680px, 100%);
  border-radius: 20px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(18,10,34,.72), rgba(10,6,18,.58));
  border: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(179,107,255,.18);
  box-shadow: 0 24px 90px rgba(0,0,0,.70);
  position: relative;
  overflow:hidden;
}

.modal-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 260px at 15% 0%, rgba(255,45,168,.16), transparent 60%),
    radial-gradient(800px 260px at 75% 0%, rgba(124,42,232,.22), transparent 60%);
  pointer-events:none;
}

.modal-card h5{
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap: 10px;
}

.modal-card form{
  position: relative;
  z-index: 1;
  display:grid;
  gap: 10px;
}

.modal-card label{
  font-size: 12.5px;
  color: rgba(244,240,255,.72);
  margin-top: 6px;
}

.modal-card input{
  width:100%;
  border: 1px solid rgba(255,255,255,.10);
  outline: none;
  background: rgba(8,5,14,.35);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.modal-card input:focus{
  border-color: rgba(179,107,255,.30);
  box-shadow: 0 0 0 4px rgba(124,42,232,.18);
}

.modal-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* Bottoni modal (usa le tue classi esistenti) */
.btn{
  border-radius: 14px;
  font-weight: 700;
}

.btn-ghost{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(10,6,18,.35) !important;
  color: rgba(244,240,255,.92) !important;
  padding: 10px 14px !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn-ghost:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(124,42,232,.14);
}

.btn-primary{
  border: 1px solid rgba(179,107,255,.22) !important;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,45,168,.16), transparent 55%),
    linear-gradient(90deg, rgba(124,42,232,.95), rgba(179,107,255,.92)) !important;
  padding: 10px 14px !important;
  box-shadow: 0 0 22px rgba(124,42,232,.18);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.10);
  box-shadow: 0 0 28px rgba(124,42,232,.28);
}

/* ===========================
   Footer
   =========================== */
.footer{
  color: rgba(244,240,255,.62);
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(10,6,18,.30);
  backdrop-filter: blur(10px);
}

/* ===========================
   Bootstrap overrides minimi
   =========================== */
.container, .container-fluid{
  position: relative;
  z-index: 1;
}

.text-secondary{ color: rgba(244,240,255,.55) !important; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px){
  .topbar .container-fluid{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .brand{ width:100%; }
  .toolbar{ flex-direction: column; align-items: stretch !important; }
  #refreshBtn{ width:100%; justify-content:center; }
  .btn-primary-grad{ width:100%; justify-content:center; }
}