/*
 * Dark Mode Modern theme override for ar.peryroybowo.com
 * -----------------------------------------------------
 * Dimuat SETELAH css/styles.css. Sama dengan versi di domain utama
 * (peryroybowo.com/css/dark-theme.css) supaya tampilan konsisten di
 * kedua domain. Lihat file itu untuk catatan lengkapnya.
 */

/* ===== 1. Palet warna ===== */
:root {
  --pb-bg: #0a0e17;
  --pb-surface: #12172a;
  --pb-surface-2: #1a2140;
  --pb-surface-3: #212a4d;
  --pb-border: rgba(255, 255, 255, 0.09);
  --pb-border-strong: rgba(255, 255, 255, 0.16);
  --pb-text: #e8ebf5;
  --pb-text-muted: #a7b0c8;
  --pb-accent-1: #4f6bff;
  --pb-accent-2: #ff3fa6;
  --pb-gradient: linear-gradient(135deg, var(--pb-accent-1) 0%, var(--pb-accent-2) 100%);
  --pb-glow: 0 0 0 1px rgba(79, 107, 255, 0.25), 0 8px 30px rgba(79, 107, 255, 0.18);
}

/* ===== 2. Variabel inti Bootstrap (body, link, border) ===== */
:root {
  --bs-body-bg: var(--pb-bg);
  --bs-body-bg-rgb: 10, 14, 23;
  --bs-body-color: var(--pb-text);
  --bs-body-color-rgb: 232, 235, 245;
  --bs-border-color: var(--pb-border);
  --bs-border-color-translucent: var(--pb-border);
  --bs-link-color: var(--pb-accent-1);
  --bs-link-hover-color: var(--pb-accent-2);
  --bs-link-color-rgb: 79, 107, 255;
  --bs-link-hover-color-rgb: 255, 63, 166;
  --bs-secondary-color: var(--pb-text-muted);
  --bs-tertiary-bg: var(--pb-surface);
  --bs-heading-color: #ffffff;
}

html {
  background-color: var(--pb-bg);
}

body {
  background-color: var(--pb-bg);
  color: var(--pb-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #ffffff;
}

hr {
  border-color: var(--pb-border);
  opacity: 1;
}

::selection {
  background: var(--pb-accent-1);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pb-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--pb-surface-3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pb-accent-1);
}

/* ===== 3. Latar (bg-*) & teks (text-muted) ===== */
.bg-white {
  background-color: var(--pb-surface) !important;
}
.bg-light {
  background-color: var(--pb-surface-2) !important;
}
.bg-dark {
  background-color: var(--pb-surface) !important;
}
.text-muted {
  color: var(--pb-text-muted) !important;
}
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--pb-border) !important;
}

/* ===== 4. Navbar ===== */
.site-navbar {
  background-color: rgba(10, 14, 23, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pb-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-navbar .navbar-brand span {
  letter-spacing: 0.02em;
}
.site-navbar .nav-link {
  color: var(--pb-text-muted) !important;
  transition: color 0.15s ease-in-out;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-item.active .nav-link,
.site-navbar .nav-link.active {
  color: #ffffff !important;
}
.site-navbar .navbar-toggler {
  border-color: var(--pb-border-strong);
}
.site-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--pb-surface);
  --bs-dropdown-color: var(--pb-text);
  --bs-dropdown-link-color: var(--pb-text);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: var(--pb-surface-2);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: var(--pb-accent-1);
  --bs-dropdown-border-color: var(--pb-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ===== 5. Footer ===== */
.site-footer {
  background-color: var(--pb-surface) !important;
  border-top: 1px solid var(--pb-border);
  color: var(--pb-text-muted);
}
.site-footer a {
  color: var(--pb-text-muted);
}
.site-footer a:hover {
  color: #ffffff;
}

/* ===== 6. Kartu (card) ===== */
.card {
  --bs-card-bg: var(--pb-surface);
  --bs-card-color: var(--pb-text);
  --bs-card-border-color: var(--pb-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card.shadow,
.card.shadow-sm {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--pb-border-strong);
  box-shadow: var(--pb-glow) !important;
}
.card-header,
.card-footer {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--pb-border);
}

/* ===== 7. Form (login, register wajah, reset password) ===== */
.form-control,
.form-select {
  background-color: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
  border: 1px solid var(--pb-border-strong) !important;
}
.form-control::placeholder {
  color: var(--pb-text-muted);
  opacity: 0.8;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-accent-1) !important;
  box-shadow: 0 0 0 0.25rem rgba(79, 107, 255, 0.25) !important;
}
.form-label {
  color: var(--pb-text);
}
.form-text {
  color: var(--pb-text-muted);
}
.input-group-text {
  background-color: var(--pb-surface-2);
  color: var(--pb-text);
  border-color: var(--pb-border-strong);
}

/* ===== 8. Tombol ===== */
.btn-primary {
  --bs-btn-bg: var(--pb-accent-1);
  --bs-btn-border-color: var(--pb-accent-1);
  --bs-btn-hover-bg: #3a56f0;
  --bs-btn-hover-border-color: #3a56f0;
  --bs-btn-active-bg: #3348d6;
  --bs-btn-active-border-color: #3348d6;
  box-shadow: 0 4px 16px rgba(79, 107, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(79, 107, 255, 0.45);
}
.btn-outline-primary {
  --bs-btn-color: var(--pb-accent-1);
  --bs-btn-border-color: var(--pb-accent-1);
  --bs-btn-hover-bg: var(--pb-accent-1);
  --bs-btn-hover-border-color: var(--pb-accent-1);
}

/* ===== 9. Gradient brand ===== */
.text-gradient {
  background: -webkit-linear-gradient(315deg, var(--pb-accent-1) 0%, var(--pb-accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-gradient-primary-to-secondary {
  background: var(--pb-gradient) !important;
}
.feature.bg-gradient-primary-to-secondary,
.feature.bg-primary {
  box-shadow: 0 6px 20px rgba(79, 107, 255, 0.35);
}

/* ===== 10. Alert ===== */
.alert-success {
  --bs-alert-color: #7CFFC4;
  --bs-alert-bg: rgba(25, 135, 84, 0.15);
  --bs-alert-border-color: rgba(25, 135, 84, 0.35);
}
.alert-danger {
  --bs-alert-color: #FF9FAE;
  --bs-alert-bg: rgba(220, 53, 69, 0.15);
  --bs-alert-border-color: rgba(220, 53, 69, 0.35);
}

/* ===== 11. Pagination & list group ===== */
.pagination {
  --bs-pagination-bg: var(--pb-surface);
  --bs-pagination-color: var(--pb-text);
  --bs-pagination-border-color: var(--pb-border);
  --bs-pagination-hover-bg: var(--pb-surface-2);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-border-color: var(--pb-border-strong);
  --bs-pagination-active-bg: var(--pb-accent-1);
  --bs-pagination-active-border-color: var(--pb-accent-1);
  --bs-pagination-disabled-bg: var(--pb-surface);
  --bs-pagination-disabled-color: var(--pb-text-muted);
}
.list-group-item {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--pb-text);
  --bs-list-group-border-color: var(--pb-border);
  --bs-list-group-action-hover-color: #fff;
  --bs-list-group-action-hover-bg: var(--pb-surface-2);
  --bs-list-group-action-active-bg: var(--pb-surface-2);
}

/* ===== 12. Sentuhan halaman AR (scan kelas / register wajah) ===== */
.corner {
  border-color: var(--pb-accent-1) !important;
}