/* =========================================================
   OPENE~LIST — Tema "Flat Biru Tua" untuk halaman di luar
   dashboard: Login, Lupa/Reset Password, Pilih Role.
   Menggantikan candy-auth.css. Dimuat SETELAH <style> bawaan
   tiap halaman, jadi cukup menimpa variabel & gaya utama.
   Warna memakai nilai tetap (tidak bergantung --brand-h).
   ========================================================= */

:root {
  --navy: #13284f;
  --brand: #1e3f7b;
  --brand-dark: #163165;
  --brand-deep: #0f2550;
  --brand-light: #e3eaf6;
  --brand-line: #cdd7e8;

  /* variabel yang dipakai <style> bawaan halaman */
  --bg: #eef2f8;
  --panel-bg: #ffffff;
  --text: #1f2a40;
  --text-muted: #5d6b82;
  --border: #cdd7e8;
  --input-bg: #ffffff;
  --accent: #1e3f7b;
  --accent-hover: #163165;
  --accent-active: #0f2550;
  --accent-soft: #e3eaf6;
  --radius: 10px;
  --shadow: none;
  --ink: #1e3f7b;          /* teks link/judul bermerek */
  --ink-head: #0f2550;
  --err-bg: #f9e2e4;
  --err-fg: #8f2230;
  --icon-c: #1e3f7b;
}
[data-theme="dark"], html:not([data-theme]) {
  --bg: #0c1a33;
  --panel-bg: #12233f;
  --text: #dbe4f2;
  --text-muted: #9aa9c3;
  --border: #223a63;
  --input-bg: #0d1a2e;
  --brand: #2c5bb0;
  --brand-dark: #3a6cc6;
  --brand-deep: #b8ccf0;
  --brand-light: #182d52;
  --brand-line: #223a63;
  --accent: #2c5bb0;
  --accent-hover: #3a6cc6;
  --accent-active: #24499a;
  --accent-soft: #182d52;
  --navy: #1a3466;
  --ink: #8db0ee;
  --ink-head: #e0ecff;
  --err-bg: #3a1414;
  --err-fg: #fca5a5;
  --icon-c: #f0c25a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
}
h1, h2, .brand-logo, .brand-link { font-family: inherit !important; font-weight: 700 !important; }

/* Gambar latar login (diatur Superadmin): lapisan biru tua */
.page-bg::after { background: rgba(12, 26, 51, .55) !important; }

/* ---------- Kotak utama ---------- */
.auth-shell, .auth-card, .panel {
  background: var(--panel-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

/* ---------- Login: panel kiri biru tua solid ---------- */
.brand-panel {
  background: var(--navy) !important;
  background-image: none !important;
  border-right: 0 !important;
  color: #fff !important;
}
.brand-panel .brand-logo, .brand-copy h1 { color: #fff !important; text-shadow: none; }
.brand-copy p, .brand-footnote { color: rgba(255,255,255,.8) !important; }
.brand-features li { color: #fff !important; font-weight: 500; }
.brand-features i { background: rgba(255,255,255,.14) !important; color: #fff !important; box-shadow: none; }
.brand-logo img { border-radius: 8px !important; box-shadow: none; }
.mobile-brand { color: var(--ink-head); }
.form-panel h2, .auth-card h1, .panel h1 { color: var(--ink-head) !important; }
.auth-card .brand-link { color: var(--ink) !important; font-size: 1.5rem !important; }
.field label { color: var(--text) !important; font-weight: 600 !important; }

/* ---------- Input ---------- */
.input-wrap i { color: var(--text-muted) !important; }
.input-wrap input {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--input-bg) !important;
  color: var(--text) !important;
  font-family: inherit;
}
.input-wrap input::placeholder { color: var(--text-muted) !important; opacity: .7; }
.input-wrap input:hover { border-color: var(--brand) !important; }
.input-wrap input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(44, 91, 176, .22) !important; outline: none; }

/* ---------- Tombol: solid, tanpa efek 3D ---------- */
.btn-login, .btn-auth {
  position: relative !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 13px !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: #fff !important;
  text-shadow: none;
  background: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none;
  transition: background-color .15s ease !important;
}
.btn-login::before, .btn-auth::before { content: none !important; }
.btn-login:hover, .btn-auth:hover, .btn-login:focus-visible, .btn-auth:focus-visible {
  background: var(--accent-hover) !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none;
}
.btn-login:active, .btn-auth:active { background: var(--accent-active) !important; transform: none !important; box-shadow: none !important; }
.btn-login:hover i, .btn-auth:hover i { transform: none; }
.ripple, .candy-ripple { display: none !important; }

.forgot-link, .back-link {
  display: inline-block !important;
  width: auto !important;
  margin: 20px auto 0 !important;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink) !important;
  background: transparent;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.form-panel .forgot-link { align-self: center; }
.auth-card .back-link { display: table !important; }
.forgot-link:hover, .back-link:hover { transform: none; background: var(--accent-soft); }

.alert-flash, .alert-flash-success, .panel .alert {
  border-radius: 8px !important;
  border: 0 !important;
  border-left: 4px solid currentColor !important;
  font-weight: 500;
}
.form-panel .alert-flash, .panel .alert { background: var(--err-bg) !important; color: var(--err-fg) !important; }

/* ---------- Kontrol tema (lupa/reset password) ---------- */
.icon-btn {
  border: 1px solid var(--border) !important;
  background: var(--panel-bg) !important;
  color: var(--icon-c) !important;
  box-shadow: none !important;
}
.icon-btn:hover { transform: none; background: var(--brand-light) !important; }
.color-swatches { display: none !important; }

/* ---------- Pilih Role ---------- */
.role-btn {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.role-btn i {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff !important;
  font-size: 1.05rem !important;
  box-shadow: none;
}
.role-btn:hover, .role-btn.aktif {
  transform: none;
  border-color: var(--brand) !important;
  background: var(--brand-light) !important;
  box-shadow: none;
}
.logout { font-weight: 600; color: var(--ink) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}