/* Journalist Academy — Dark mode overrides (Bootstrap 5.3 + custom JA) */

[data-bs-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --ja-dark-surface: #1e1e1e;
  --ja-dark-surface-2: #252a27;
  --ja-dark-border: #3a403c;
  --ja-dark-text: #f8f9fa;
  --ja-dark-muted: #adb5bd;
  --ja-sidebar-deep: #0d291a;
}

/* Smooth theme transitions */
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .header-top,
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-white,
[data-bs-theme="dark"] .card-header-clean,
[data-bs-theme="dark"] .list-group-item,
body.dark-mode .sidebar,
body.dark-mode .header-top,
body.dark-mode .main-content,
body.dark-mode .card,
body.dark-mode .card-white,
body.dark-mode .card-header-clean,
body.dark-mode .list-group-item {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ============================================================
   SIDEBAR — Deep Green
   ============================================================ */
[data-bs-theme="dark"] .sidebar,
body.dark-mode .sidebar {
  background: #0d291a !important;
  background-image: linear-gradient(180deg, #0f3320 0%, #0a1f14 55%, #071810 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .sidebar .user-profile,
body.dark-mode .sidebar .user-profile {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .sidebar .user-profile img,
body.dark-mode .sidebar .user-profile img {
  border-color: #c9a227 !important;
  background: #1a2e22 !important;
}

[data-bs-theme="dark"] .sidebar .user-name,
body.dark-mode .sidebar .user-name {
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .sidebar .user-role,
body.dark-mode .sidebar .user-role {
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .sidebar .nav-header,
body.dark-mode .sidebar .nav-header {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link,
body.dark-mode .sidebar .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover,
body.dark-mode .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Menu aktif — gold kalem, bukan kuning menyilaukan */
[data-bs-theme="dark"] .sidebar .nav-link.active,
body.dark-mode .sidebar .nav-link.active {
  background: rgba(201, 162, 39, 0.2) !important;
  color: #e8d48b !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #c9a227, 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link.active i,
body.dark-mode .sidebar .nav-link.active i {
  color: #d4b85a !important;
}

[data-bs-theme="dark"] .sidebar .logout-link:hover,
body.dark-mode .sidebar .logout-link:hover {
  background: rgba(220, 53, 69, 0.18) !important;
  color: #ff8a8a !important;
}

[data-bs-theme="dark"] .sidebar .nav-footer,
body.dark-mode .sidebar .nav-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   LAYOUT & HEADER
   ============================================================ */
[data-bs-theme="dark"] body,
body.dark-mode {
  background-color: #121212 !important;
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .main-content,
body.dark-mode .main-content {
  background-color: #121212 !important;
}

[data-bs-theme="dark"] .header-top,
body.dark-mode .header-top {
  background: #1a1f1c !important;
  border-bottom-color: #198754 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .header-top .text-dark,
[data-bs-theme="dark"] .header-user-info .text-dark,
body.dark-mode .header-top .text-dark,
body.dark-mode .header-user-info .text-dark {
  color: #f1f3f5 !important;
}

[data-bs-theme="dark"] .header-profile-dropdown .img-header-small,
body.dark-mode .header-profile-dropdown .img-header-small {
  border-color: #444 !important;
}

[data-bs-theme="dark"] .profile-menu-trigger:hover,
[data-bs-theme="dark"] .profile-menu-trigger.show,
[data-bs-theme="dark"] .theme-toggle-btn:hover,
[data-bs-theme="dark"] .theme-toggle-btn.show,
body.dark-mode .profile-menu-trigger:hover,
body.dark-mode .profile-menu-trigger.show,
body.dark-mode .theme-toggle-btn:hover,
body.dark-mode .theme-toggle-btn.show {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .theme-toggle-btn,
body.dark-mode .theme-toggle-btn {
  color: #c9a227 !important;
}

/* ============================================================
   CARDS & SURFACES — override putih membandel
   ============================================================ */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-white,
[data-bs-theme="dark"] .card.bg-white,
body.dark-mode .card,
body.dark-mode .card-white,
body.dark-mode .card.bg-white {
  background-color: #1e1e1e !important;
  background-image: none !important;
  border: 1px solid #3a403c !important;
  color: #f8f9fa !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .card-header-clean,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .card-header-clean {
  background-color: #252a27 !important;
  border-color: #3a403c !important;
  color: #75d6a0 !important;
}

[data-bs-theme="dark"] .card-body,
body.dark-mode .card-body {
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .bg-white,
body.dark-mode .bg-white {
  background-color: #252a27 !important;
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .text-dark,
body.dark-mode .text-dark {
  color: #f1f3f5 !important;
}

[data-bs-theme="dark"] .text-muted,
body.dark-mode .text-muted {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .text-secondary,
body.dark-mode .text-secondary {
  color: #ced4da !important;
}

/* Kartu profil user, statistik poin, riwayat kehadiran (dashboard index) */
[data-bs-theme="dark"] .card.card-white.p-4,
body.dark-mode .card.card-white.p-4 {
  background-color: #1e1e1e !important;
}

[data-bs-theme="dark"] .list-group-item,
body.dark-mode .list-group-item {
  background-color: #1e1e1e !important;
  border-color: #3a403c !important;
  color: #dee2e6 !important;
}

[data-bs-theme="dark"] .list-group-item:hover,
body.dark-mode .list-group-item:hover {
  background-color: #252a27 !important;
}

/* Kartu motivasi / info dengan gradient inline */
[data-bs-theme="dark"] .card.border-0.shadow-sm.overflow-hidden,
body.dark-mode .card.border-0.shadow-sm.overflow-hidden {
  background: #1a2520 !important;
  border-left: 5px solid #20c997 !important;
}

[data-bs-theme="dark"] .card.border-0.shadow-sm.p-3.mb-3,
body.dark-mode .card.border-0.shadow-sm.p-3.mb-3 {
  background: #1e1e1e !important;
  border: 1px solid #3a403c !important;
  border-left: 5px solid #198754 !important;
}

[data-bs-theme="dark"] .badge.bg-white,
body.dark-mode .badge.bg-white {
  background-color: #2d3330 !important;
  color: #ced4da !important;
  border-color: #404540 !important;
}

[data-bs-theme="dark"] .card-presensi-done,
body.dark-mode .card-presensi-done {
  background: #1a2e22 !important;
  color: #75d6a0 !important;
  border-color: #2d5a3d !important;
}

[data-bs-theme="dark"] .img-profile-circle,
body.dark-mode .img-profile-circle {
  border-color: #3a5a40 !important;
}

/* ============================================================
   TABLES & FORMS
   ============================================================ */
[data-bs-theme="dark"] .table-custom th,
body.dark-mode .table-custom th {
  background: #2a302c !important;
  color: #ced4da !important;
  border-color: #3a403c !important;
}

[data-bs-theme="dark"] .table-custom td,
body.dark-mode .table-custom td {
  color: #dee2e6 !important;
  border-color: #333 !important;
}

[data-bs-theme="dark"] .table-custom tbody tr:hover,
body.dark-mode .table-custom tbody tr:hover {
  background-color: #252b28 !important;
}

[data-bs-theme="dark"] .select-custom,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
body.dark-mode .select-custom,
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #2a2f2c !important;
  border-color: #404540 !important;
  color: #f1f3f5 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #2a2f2c !important;
  color: #fff !important;
  border-color: #198754 !important;
}

[data-bs-theme="dark"] .btn-light,
body.dark-mode .btn-light {
  background: #2d3330 !important;
  border-color: #404540 !important;
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .btn-outline-success,
body.dark-mode .btn-outline-success {
  color: #75d6a0 !important;
  border-color: #3d8b5e !important;
}

[data-bs-theme="dark"] .btn-outline-success:hover,
body.dark-mode .btn-outline-success:hover {
  background: rgba(25, 135, 84, 0.2) !important;
  color: #9ae6b0 !important;
}

/* Stat cards admin — sedikit redupkan agar selaras */
[data-bs-theme="dark"] .stat-card,
body.dark-mode .stat-card {
  filter: brightness(0.88) saturate(0.95);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .announcement-card,
body.dark-mode .announcement-card {
  background: #3d3420 !important;
  border-left-color: #c9a227 !important;
}

[data-bs-theme="dark"] .announcement-title,
body.dark-mode .announcement-title {
  color: #e8d48b !important;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
[data-bs-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background: #1e2220 !important;
  border-color: #3a403c !important;
}

[data-bs-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background: #2a302c !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item[aria-pressed="true"],
body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item[aria-pressed="true"] {
  background: rgba(25, 135, 84, 0.25) !important;
  color: #75d6a0 !important;
}

[data-bs-theme="dark"] .dropdown-header,
body.dark-mode .dropdown-header {
  color: #868e96 !important;
}

[data-bs-theme="dark"] .dropdown-divider,
body.dark-mode .dropdown-divider {
  border-color: #3a403c !important;
}

/* ============================================================
   AUTH PAGES (login / register)
   ============================================================ */
[data-bs-theme="dark"] .login-wrapper,
body.dark-mode .login-wrapper {
  background-color: #1a1f1c !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] .right-side,
[data-bs-theme="dark"] .register-card,
body.dark-mode .right-side,
body.dark-mode .register-card {
  background: transparent !important;
}

[data-bs-theme="dark"] .login-title-wrapper h3,
[data-bs-theme="dark"] .login-title-wrapper p,
[data-bs-theme="dark"] .register-title,
body.dark-mode .login-title-wrapper h3,
body.dark-mode .login-title-wrapper p,
body.dark-mode .register-title {
  color: #f1f3f5 !important;
}

[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] .link-forgot,
body.dark-mode .form-check-label,
body.dark-mode .link-forgot {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .auth-theme-toggle .theme-toggle-btn,
body.dark-mode .auth-theme-toggle .theme-toggle-btn {
  color: #c9a227 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-bs-theme="light"] .auth-theme-toggle .theme-toggle-btn {
  color: #198754 !important;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}