/* Halaman login Djeonail: selalu gelap, palet Basalt.
   Frappe punya tema gelap bawaan lewat [data-theme="dark"]; berkas ini
   hanya menggeser variabelnya ke warna brand, bukan menambal tiap elemen. */
:root[data-theme="dark"] {
  --bg-color: #000000;
  --fg-color: #0A0B0C;
  --card-bg: #0A0B0C;
  --control-bg: #121316;
  --control-bg-on-gray: #1A1C1F;
  --disabled-control-bg: #121316;
  --navbar-bg: #0A0B0C;
  --subtle-accent: #121316;
  --subtle-fg: #1A1C1F;
  --border-color: rgba(214, 235, 253, .14);
  --dark-border-color: rgba(214, 235, 253, .19);
  --text-color: #F0F0F0;
  --heading-color: #FFFFFF;
  --text-light: #6C6C6C;
  --text-muted: #A0A0A0;
  --invert-neutral: #0A0B0C;
  --primary: #A5F3FC;
  --primary-color: #A5F3FC;
  --blue-500: #7CC4FF;
  --red-500: #FF6B6B;
  --green-500: #6EE7A8;
  --shadow-base: 0 1px 3px rgba(0, 0, 0, .5);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* Latar halaman: sedikit cahaya di atas supaya tidak terasa datar. */
[data-theme="dark"] body {
  background-color: #000 !important;
  background-image:
    radial-gradient(58% 46% at 26% 0%, rgba(165, 243, 252, .07), transparent 70%),
    radial-gradient(46% 40% at 78% 6%, rgba(196, 181, 253, .06), transparent 70%);
  background-repeat: no-repeat;
  color: #F0F0F0;
}

/* .for-login hanyalah pembungkus selebar halaman, bukan kartu. */
[data-theme="dark"] .for-login {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .login-content.page-card,
[data-theme="dark"] .page-card {
  background-color: #0A0B0C;
  border: 1px solid rgba(214, 235, 253, .14);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .page-card-head h4,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: #FFFFFF; }
[data-theme="dark"] .page-card-subtitle,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .login-content .text-muted { color: #A0A0A0 !important; }
[data-theme="dark"] .app-logo { filter: none; }

/* Kolom isian */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"] {
  background-color: #121316;
  border: 1px solid rgba(214, 235, 253, .14);
  color: #F0F0F0;
}
[data-theme="dark"] .form-control::placeholder { color: #6C6C6C; }
[data-theme="dark"] .form-control:focus {
  background-color: #1A1C1F;
  border-color: rgba(214, 235, 253, .32);
  box-shadow: none;
  color: #FFFFFF;
}
[data-theme="dark"] .control-label,
[data-theme="dark"] label { color: #A0A0A0; }

/* Tombol. Berkas ini dimuat SESUDAH login.bundle.css, tetapi kelasnya bertumpuk
   (btn-default + btn-login), jadi tetap perlu !important agar tidak saling batal. */
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-login-option {
  background-color: #1A1C1F !important;
  border-color: rgba(214, 235, 253, .14) !important;
  color: #F0F0F0 !important;
}
[data-theme="dark"] .btn-login-option:hover,
[data-theme="dark"] .btn-default:hover { background-color: #24272B !important; color: #FFFFFF !important; }

/* Tindakan utama: paling terang supaya jelas mana yang harus ditekan. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-login:not(.btn-login-option) {
  background-color: #F0F0F0 !important;
  border-color: #F0F0F0 !important;
  color: #0A0B0C !important;
  font-weight: 600;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-login:not(.btn-login-option):hover {
  background-color: #FFFFFF !important; border-color: #FFFFFF !important; color: #000 !important;
}
[data-theme="dark"] a { color: #A5F3FC; }
[data-theme="dark"] a:hover { color: #C4B5FD; }
[data-theme="dark"] .social-login-buttons .btn { background-color: #1A1C1F !important; border-color: rgba(214,235,253,.14) !important; color: #F0F0F0 !important; }

/* Pesan galat dan notifikasi */
[data-theme="dark"] .alert-danger, [data-theme="dark"] .msgprint {
  background-color: #241213; border-color: rgba(214,235,253,.19); color: #FF6B6B;
}
