/*
 * Latar animasi jaringan untuk halaman masuk/lupa sandi/reset sandi.
 *
 * Permintaan pemilik 2026-10-05: *“ganti background loginnya pakai background seperti di halaman
 * landing sehingga bawaan greeva tidak ada”*. Isi latar (mesh node + gradien) sama seperti halaman
 * publik; yang berbeda hanya nama variabel warna (`--noc-*`) supaya tidak bertabrakan dengan variabel
 * bawaan tema Konrix/Greeva.
 *
 * Warna dipisah per tema: bawaan halaman masuk adalah GELAP (permintaan pemilik 2026-10-05
 * *“buat default dark, dan tambahkan button light/dark”*) dan tema terang dipakai bila pengguna
 * menekan tombol ganti tema. Nama variabelnya (`--noc-*`) sengaja dibuat sendiri supaya tidak
 * bertabrakan dengan variabel bawaan tema Konrix/Greeva.
 */
.latar-noc {
  --noc-bg: #f4f6fb;
  --noc-node: rgba(37, 99, 235, 0.55);
  --noc-link: rgba(37, 99, 235, 0.18);
  --noc-packet: #2563eb;
  --noc-up: #12b76a;
  --noc-veil:
    radial-gradient(1200px 600px at 15% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(18, 183, 106, 0.10), transparent 55%);
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Tema GELAP — warna sama dengan halaman publik (`views/landing/index.ejs`). */
html[data-theme="dark"] .latar-noc {
  --noc-bg: #0b1220;
  --noc-node: rgba(96, 165, 250, 0.65);
  --noc-link: rgba(96, 165, 250, 0.20);
  --noc-packet: #60a5fa;
  --noc-up: #34d399;
  --noc-veil:
    radial-gradient(1200px 600px at 15% -10%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(52, 211, 153, 0.12), transparent 55%);
}

.latar-noc #bgNetwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.latar-noc .veil {
  position: absolute;
  inset: 0;
  background: var(--noc-veil);
}

/* Halaman masuk: pola bawaan tema (bg-pattern Greeva) dimatikan, isi halaman diangkat di atas latar. */
body.pakai-latar-noc {
  background-color: #f4f6fb;
}

html[data-theme="dark"] body.pakai-latar-noc {
  background-color: #0b1220;
  color: #e6ebf5;
}

/*
 * Kartu halaman masuk diselaraskan dengan warna permukaan halaman publik (`--surface` di
 * `views/landing/index.ejs`) supaya halaman masuk dan halaman publik tidak terasa berbeda tema.
 */
html[data-theme="dark"] body.pakai-latar-noc .card {
  background-color: #131c2f;
  border-color: #243049;
}

body.pakai-latar-noc .auth-bg {
  background-image: none;
  background-color: transparent;
}

body.pakai-latar-noc .auth-bg > .row {
  position: relative;
  z-index: 2;
}

/*
 * Baris paling bawah kartu halaman masuk: hak cipta.
 * Permintaan pemilik 2026-10-05: hak cipta dirapikan di bawah kartu, tombol tema di pojok kanan atas.
 */
.auth-bottombar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.3;
  color: #667085;
}

/*
 * Tempat tombol ganti tema: pojok KANAN ATAS kartu, di atas logo.
 * Kartu Bootstrap sudah `position: relative`, jadi cukup ditempelkan ke sudutnya.
 * Permintaan pemilik 2026-10-05: *“pindahkan button light/dark di pojok kanan atas kartu form login,
 * di atas logo”*.
 */
.auth-tema-pojok {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  line-height: 0;
}

html[data-theme="dark"] .auth-bottombar {
  color: #9aa8c0;
}

/*
 * Tombol ganti tema terang/gelap — bulat, ikon tepat di tengah, mengikuti tema aktif.
 * Ikon yang tampil menunjukkan tema yang sedang dipakai (senada dengan tombol di halaman publik).
 */
.tombol-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tombol-tema svg {
  display: block;
  width: 16px;
  height: 16px;
}

.tombol-tema:hover {
  border-color: #2563eb;
  color: #2563eb;
  background-color: rgba(37, 99, 235, 0.10);
}

.tombol-tema:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

html[data-theme="dark"] .tombol-tema #ikonMatahari {
  display: none;
}

html[data-theme="light"] .tombol-tema #ikonBulan {
  display: none;
}