:root {
  --bg-side: #1f2937;
  --bg-top:  #111827;
  --accent:  #2563eb;
  --accent-2:#1d4ed8;
}
html, body { height: 100%; }
body { background:#f3f4f6; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }

.topbar {
  background: var(--bg-top); color: #fff; height: 56px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.topbar .brand { font-weight: 600; letter-spacing:.3px; }

.layout { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
  width: 240px; background: var(--bg-side); color:#cbd5e1;
  position: sticky; top:56px; align-self: flex-start;
  height: calc(100vh - 56px); overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar .nav-link {
  color:#cbd5e1; padding:.65rem 1rem; border-left:3px solid transparent;
  border-radius: 0; display:flex; align-items:center; gap:.6rem;
}
.sidebar .nav-link i { width: 18px; text-align:center; font-size: 1.05rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.05); color:#fff; }
.sidebar .nav-link.active {
  background: rgba(37,99,235,.15); color:#fff; border-left-color: var(--accent);
}
.sidebar-footer { margin-top:auto; border-top:1px solid rgba(255,255,255,.05); }
.content { flex: 1; min-width: 0; }

.card-stat {
  border:0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-stat .stat-value { font-size: 1.6rem; font-weight: 700; }
.card-stat .stat-label { color:#6b7280; font-size:.85rem; text-transform: uppercase; letter-spacing:.5px; }
.card-stat .stat-icon  { font-size: 2rem; opacity:.25; }

/* Quick-filter cards di ONU list */
.card-filter {
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  border: 2px solid transparent !important;
}
.card-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.card-filter.active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.badge-state-online    { background:#10b981 !important; }
.badge-state-offline   { background:#6b7280 !important; }
.badge-state-los       { background:#ef4444 !important; }
.badge-state-dying     { background:#f59e0b !important; }

.term-out {
  background:#0b1020; color:#cbd5e1; padding: 12px; border-radius:8px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .85rem; white-space: pre-wrap; word-break: break-all;
  max-height: 480px; overflow:auto;
}

.login-wrap {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #1e3a8a, #0f172a);
}
.login-card {
  width: 100%; max-width: 380px; background:#fff; padding: 28px 26px;
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-card h4 { font-weight: 700; }
.login-card .brand-icon {
  width:56px; height:56px; border-radius:14px; background: var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size: 1.6rem; margin: 0 auto 14px;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed; left:-260px; transition: left .25s ease; z-index:200;
    box-shadow: 2px 0 12px rgba(0,0,0,.3);
  }
  .sidebar.show { left: 0; }
}