/* =============================
   NAWALA MONITOR DARK-GLASS THEME
   ============================= */

/* animasi halus */
@keyframes floatin {
  from {opacity:0; transform:translateY(10px)}
  to   {opacity:1; transform:translateY(0)}
}

/* background utama */
.bg-gradient-nawala {
  background: linear-gradient(135deg, #0b1736 0%, #0e1f58 40%, #1f53ff 100%);
  min-height: 100vh;
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* kartu transparan */
.card-glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  color: #fff;
  animation: floatin .4s ease both;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* sidebar */
.sidebar {
  width: 260px;
  min-height: 100vh;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-right: 1px solid rgba(255,255,255,0.15);
  position: sticky;
  top: 0;
}

.brand { color:#fff; font-weight:800; font-size:20px; margin-bottom:18px; }
.brand span { color:#9ec5ff; }

.nav-section {
  color:#9ec5ff;
  font-size:12px;
  margin-top:14px;
  margin-bottom:6px;
  letter-spacing:.5px;
}

.nav-item {
  display:block;
  color:#fff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  transition: all .2s ease;
}
.nav-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateX(2px);
}

/* tombol */
.btn-neo {
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255,255,255,0.1);
}
.btn-outline-danger {
  color: #ff6b6b !important;
  border-color: #ff6b6b !important;
  font-weight: 500;
  transition: 0.3s;
}
.btn-outline-danger:hover {
  background-color: #ff6b6b !important;
  color: #fff !important;
}

/* statistik box */
.stat-card {
  border-radius:16px;
  color:#fff;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
}
.stat-title { opacity:.8; font-size:14px; }
.stat-value { font-size:28px; font-weight:800; }

.glow { box-shadow: 0 0 0 rgba(30,144,255,0.0); transition: box-shadow .25s ease; }
.glow:hover { box-shadow: 0 6px 32px rgba(30,144,255,0.25); }

/* =======================================
   TABEL DARK MODE ANTI-PUTIH UNIVERSAL 😎
   ======================================= */
table, thead, tbody, tr, td, th {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.table {
  border-collapse: collapse !important;
  background: transparent !important;
  width: 100%;
}

.table-nawala th, .table-nawala td {
  color: #fff !important;
}

/* header kolom */
.table thead th {
  color: #9ed0ff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
  background: transparent !important;
}

/* isi tabel */
.table tbody td {
  color: #f3f8ff !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
}

/* baris hover */
.table tbody tr:hover {
  background: rgba(255,255,255,0.07) !important;
  transition: all 0.25s ease;
}

/* hilangkan semua strip/warna default bootstrap */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-hover > tbody > tr:hover > *,
.card .table,
.card .table * {
  background: transparent !important;
}

/* =======================================
   FORM INPUT DAN SELECT
   ======================================= */
.card-glass input,
.card-glass select {
  background-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 10px;
}
.card-glass input::placeholder {
  color: rgba(255,255,255,0.6);
}

/* =======================================
   MISC STYLE
   ======================================= */
.table-badge {
  padding:.25rem .5rem;
  border-radius:8px;
  font-weight:700;
  font-size:12px
}
.badge-normal  { background:#0fd67d; color:#001a0e; }
.badge-blocked { background:#ff5a7a; color:#36000c; }
.badge-unknown { background:#ffd166; color:#260; }

.card, .card-glass {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
}