/* ===== Dalla Costa - House · BMS · Tema (versione PC) ===== */
:root {
  --bg-0: #070b16;
  --bg-1: #0d1426;
  --card: rgba(20, 30, 54, 0.72);
  --card-brd: rgba(120, 150, 220, 0.18);
  --txt: #e8eefc;
  --txt-dim: #93a3c4;
  --accent: #6366f1;
  --accent-2: #22d3ee;
  --good: #34d399;
  --warn: #f59e0b;
  --bad: #f43f5e;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  color: var(--txt);
  background: radial-gradient(1200px 800px at 15% -10%, #15224a 0%, transparent 55%),
              radial-gradient(1000px 700px at 110% 20%, #2a1245 0%, transparent 50%),
              linear-gradient(160deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Aurora animata di sfondo */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.4;
  animation: float 18s ease-in-out infinite;
}
.aurora span:nth-child(1){ width:420px;height:420px;background:#3b82f6;top:-120px;left:-80px;}
.aurora span:nth-child(2){ width:360px;height:360px;background:#a855f7;bottom:-100px;right:-60px;animation-delay:-6s;}
.aurora span:nth-child(3){ width:300px;height:300px;background:#22d3ee;top:40%;left:55%;animation-delay:-11s;}
@keyframes float {
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-30px) scale(1.12); }
}

/* ===== LOGIN ===== */
.login-wrap {
  position: relative; z-index: 1;
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px; padding: 38px 34px;
  background: var(--card); border: 1px solid var(--card-brd);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  animation: rise 0.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise { from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }

.brand { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; }
.brand img { width: 96px; height: 96px; filter: drop-shadow(0 6px 20px rgba(99,102,241,.5)); }
.brand h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: .3px; }
.brand .sub { color: var(--txt-dim); font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; }

.field { margin-bottom: 16px; }
.field label { display:block; font-size:.78rem; color:var(--txt-dim); margin-bottom:6px; }
.field input {
  width:100%; padding:12px 14px; border-radius:12px; color:var(--txt);
  background: rgba(8,14,30,.7); border:1px solid var(--card-brd);
  font-size:.95rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(34,211,238,.15); }

.btn {
  width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer;
  color:#fff; font-size:.98rem; font-weight:600; letter-spacing:.3px;
  background: linear-gradient(120deg, var(--accent), #8b5cf6, var(--accent-2));
  background-size: 200% 100%; transition: background-position .4s, transform .1s;
}
.btn:hover { background-position: 100% 0; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity:.6; cursor:not-allowed; }

.msg { margin-top:14px; min-height:20px; font-size:.85rem; text-align:center; color:var(--bad); }
.foot { margin-top:22px; text-align:center; font-size:.72rem; color:var(--txt-dim); }

/* ===== DASHBOARD ===== */
.topbar {
  position: sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; backdrop-filter: blur(12px);
  background: rgba(8,12,26,.55); border-bottom:1px solid var(--card-brd);
}
.topbar .left { display:flex; align-items:center; gap:14px; }
.topbar img { width:42px; height:42px; }
.topbar .title { font-weight:700; font-size:1.05rem; }
.topbar .title small { display:block; color:var(--txt-dim); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; }
.topbar .right { display:flex; align-items:center; gap:16px; }
.clock { font-variant-numeric: tabular-nums; color:var(--txt-dim); font-size:.9rem; }
.logout { background:none; border:1px solid var(--card-brd); color:var(--txt-dim);
  padding:8px 14px; border-radius:10px; cursor:pointer; font-size:.82rem; transition:.2s; }
.logout:hover { color:var(--txt); border-color:var(--bad); }

.container { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:34px 28px 60px; }
.greeting { margin-bottom:6px; font-size:1.6rem; font-weight:700; }
.greeting span { background:linear-gradient(90deg,var(--accent-2),#a855f7);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.subtitle { color:var(--txt-dim); margin-bottom:30px; font-size:.92rem; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }

.tile {
  position:relative; padding:26px 24px; border-radius:var(--radius);
  background: var(--card); border:1px solid var(--card-brd);
  box-shadow: var(--shadow); cursor:pointer; overflow:hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  animation: rise .5s backwards;
}
.tile:hover { transform: translateY(-6px); box-shadow:0 26px 60px rgba(0,0,0,.55); }
.tile::before {
  content:''; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background: radial-gradient(420px 180px at 80% -20%, var(--tile-accent), transparent 60%);
}
.tile .ico {
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:18px; font-size:26px; color:#fff;
  background: linear-gradient(135deg, var(--tile-accent), rgba(255,255,255,.08));
  box-shadow: 0 10px 26px -8px var(--tile-accent);
}
.tile h3 { font-size:1.15rem; margin-bottom:6px; }
.tile p { color:var(--txt-dim); font-size:.82rem; }

.status { display:flex; align-items:center; gap:8px; margin-top:18px; font-size:.8rem; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--txt-dim); box-shadow:0 0 0 0 currentColor; }
.dot.online { background:var(--good); color:var(--good); animation: pulse 1.8s infinite; }
.dot.offline { background:var(--bad); color:var(--bad); }
.dot.planned { background:var(--warn); color:var(--warn); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }

.badge { position:absolute; top:16px; right:16px; font-size:.62rem; letter-spacing:1px;
  text-transform:uppercase; padding:4px 9px; border-radius:20px;
  background:rgba(245,158,11,.15); color:var(--warn); border:1px solid rgba(245,158,11,.3); }