/* ═══════════════════════════════════════════════════════════
   dark.css — Dark mode override (COMPREHENSIVE)
   Fase 9.1 — Fix visibility
   Loaded SETELAH premium.css → override semua hardcoded color
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: #93c5fd;
  --accent: #a78bfa;
  --accent-light: #c4b5fd;

  --bg-main: #0b1220;
  --bg-card: #131c31;
  --bg-topbar: rgba(19, 28, 49, 0.88);
  --bg-sidebar: linear-gradient(180deg, #070d18 0%, #0f172a 100%);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-light: #64748b;
  --text-sidebar: #cbd5e1;
  --text-sidebar-active: #ffffff;

  --border-color: #1e293b;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY (semua heading dalam card & dashboard)
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] .card-body h5,
html[data-theme="dark"] .card-body h6,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6,
html[data-theme="dark"] .chart-card h5,
html[data-theme="dark"] .chart-card h6,
html[data-theme="dark"] .dashboard-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-subtitle {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .footer {
  color: var(--text-light) !important;
}

html[data-theme="dark"] small,
html[data-theme="dark"] .small {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   CARD & CONTAINERS
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .search-modal-panel {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .card-header {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Override .bg-white hardcoded */
html[data-theme="dark"] .bg-white {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .bg-light {
  background: #1a2640 !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   TABEL — semua varian
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .table {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] .table tbody tr {
  background: transparent !important;
}

html[data-theme="dark"] .table tbody tr:hover {
  background: rgba(96, 165, 250, 0.08) !important;
}

html[data-theme="dark"] .table tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: rgba(148, 163, 184, 0.1) !important;
}

html[data-theme="dark"] .table thead.table-dark th,
html[data-theme="dark"] .table thead th {
  background: linear-gradient(135deg, #070d18 0%, #0f172a 100%) !important;
  color: #ffffff !important;
}

/* row warna khusus (rank-1/2/3) tetap berwarna tapi teks gelap */
html[data-theme="dark"] tr.rank-1,
html[data-theme="dark"] tr.rank-2,
html[data-theme="dark"] tr.rank-3 {
  color: #0f172a !important;
}
html[data-theme="dark"] tr.rank-1 td,
html[data-theme="dark"] tr.rank-2 td,
html[data-theme="dark"] tr.rank-3 td {
  color: #0f172a !important;
}

/* table-success (kelola_tahun.php) */
html[data-theme="dark"] tr.table-success > td {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f172a !important;
  color: var(--text-primary) !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background: #0b1220 !important;
  color: var(--text-primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder {
  color: var(--text-light) !important;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .nilai-input {
  background: #0f172a !important;
  color: var(--text-primary) !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .nilai-input:focus {
  background: #0b1220 !important;
  border-color: var(--primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .topbar {
  background: var(--bg-topbar) !important;
  border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] .topbar-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .topbar-user {
  background: rgba(96, 165, 250, 0.15) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .topbar-btn {
  background: rgba(148, 163, 184, 0.1) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .topbar-btn:hover {
  background: rgba(96, 165, 250, 0.15) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .topbar-btn kbd {
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--text-light) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .modal-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) brightness(1.5);
}

/* ═══════════════════════════════════════════════════════════
   ALERT
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .alert {
  color: var(--text-primary) !important;
  border-left-width: 3px !important;
}
html[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
  border-left-color: #3b82f6 !important;
}
html[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-left-color: #10b981 !important;
}
html[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-left-color: #ef4444 !important;
}
html[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-left-color: #f59e0b !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .badge.bg-primary   { background: linear-gradient(135deg, #3b82f6, #60a5fa) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-info      { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-success   { background: linear-gradient(135deg, #059669, #10b981) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-secondary { background: linear-gradient(135deg, #475569, #64748b) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-warning   { background: linear-gradient(135deg, #d97706, #f59e0b) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-danger    { background: linear-gradient(135deg, #dc2626, #ef4444) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   SEARCH MODAL
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .search-modal-input-wrap input {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .search-item-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .search-item-subtitle {
  color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS & SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .progress {
  background: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #475569, #334155);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS (outline variant)
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .btn-outline-success {
  color: #6ee7b7 !important;
  border-color: #10b981 !important;
}
html[data-theme="dark"] .btn-outline-success:hover {
  background: #10b981 !important;
  color: #fff !important;
}
html[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════
   TRANSITION HALUS
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .table,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   FASE9-2-MEDAL-FIX
   Fix medal row background yang hilang di dark mode
   ═══════════════════════════════════════════════════════════ */

/* Medal row: restore background gradient emas/silver/bronze */
html[data-theme="dark"] tr.rank-1,
html[data-theme="dark"] tr.rank-1 > td,
html[data-theme="dark"] tr.rank-1 > th {
  background: linear-gradient(90deg, #FFD700 0%, #FFF8DC 100%) !important;
  color: #1e293b !important;
}
html[data-theme="dark"] tr.rank-2,
html[data-theme="dark"] tr.rank-2 > td,
html[data-theme="dark"] tr.rank-2 > th {
  background: linear-gradient(90deg, #C0C0C0 0%, #F0F0F0 100%) !important;
  color: #1e293b !important;
}
html[data-theme="dark"] tr.rank-3,
html[data-theme="dark"] tr.rank-3 > td,
html[data-theme="dark"] tr.rank-3 > th {
  background: linear-gradient(90deg, #CD7F32 0%, #F5DEB3 100%) !important;
  color: #1e293b !important;
}
html[data-theme="dark"] tr.rank-1 td,
html[data-theme="dark"] tr.rank-2 td,
html[data-theme="dark"] tr.rank-3 td {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Hover glow tetap */
html[data-theme="dark"] tr.rank-1:hover { box-shadow: inset 0 0 0 2px #FFD700, 0 0 24px rgba(255, 215, 0, 0.4) !important; }
html[data-theme="dark"] tr.rank-2:hover { box-shadow: inset 0 0 0 2px #C0C0C0, 0 0 24px rgba(192, 192, 192, 0.4) !important; }
html[data-theme="dark"] tr.rank-3:hover { box-shadow: inset 0 0 0 2px #CD7F32, 0 0 24px rgba(205, 127, 50, 0.4) !important; }

/* ─── Stat card di dashboard_stat (dengan varian warna) ─── */
html[data-theme="dark"] .stat-card.stat-card-primary .stat-value,
html[data-theme="dark"] .stat-card.stat-card-success .stat-value,
html[data-theme="dark"] .stat-card.stat-card-info .stat-value,
html[data-theme="dark"] .stat-card.stat-card-warning .stat-value {
  color: #ffffff !important;
}
html[data-theme="dark"] .stat-card.stat-card-primary .stat-label,
html[data-theme="dark"] .stat-card.stat-card-success .stat-label,
html[data-theme="dark"] .stat-card.stat-card-info .stat-label,
html[data-theme="dark"] .stat-card.stat-card-warning .stat-label {
  color: rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="dark"] .stat-card.stat-card-primary small,
html[data-theme="dark"] .stat-card.stat-card-success small,
html[data-theme="dark"] .stat-card.stat-card-info small,
html[data-theme="dark"] .stat-card.stat-card-warning small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ─── Tabel header dark mode: contrast tinggi ─── */
html[data-theme="dark"] .table thead th {
  background: linear-gradient(135deg, #0a1020 0%, #131c31 100%) !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2) !important;
}

/* ─── Dropdown tahun (form-select) ─── */
html[data-theme="dark"] .form-select option {
  background: #131c31 !important;
  color: #e2e8f0 !important;
}

/* ─── Chart canvas di dark: card putih jadi dark ─── */
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .card .card-body canvas {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   FASE9-3-MARKER
   SweetAlert2 + DataTables dark mode
   ═══════════════════════════════════════════════════════════ */

/* ─── SweetAlert2 ─── */
html[data-theme="dark"] .swal2-popup {
  background: #131c31 !important;
  color: #e2e8f0 !important;
  border: 1px solid #1e293b !important;
}
html[data-theme="dark"] .swal2-title {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}
html[data-theme="dark"] .swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
html[data-theme="dark"] .swal2-icon.swal2-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
html[data-theme="dark"] .swal2-icon.swal2-info {
  border-color: #06b6d4 !important;
  color: #06b6d4 !important;
}
html[data-theme="dark"] .swal2-close {
  color: #64748b !important;
}
html[data-theme="dark"] .swal2-close:hover {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .swal2-cancel {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .swal2-cancel:hover {
  background: #334155 !important;
}
html[data-theme="dark"] .swal2-timer-progress-bar {
  background: rgba(96, 165, 250, 0.5) !important;
}

/* ─── DataTables ─── */
html[data-theme="dark"] .dataTables_wrapper {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
  color: #94a3b8 !important;
  font-weight: 500;
}

/* Pagination */
html[data-theme="dark"] .pagination .page-link {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .pagination .page-link:hover {
  background: #1e293b !important;
  color: #60a5fa !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  color: #fff !important;
  border-color: #3b82f6 !important;
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background: #0b1220 !important;
  color: #475569 !important;
  border-color: #1e293b !important;
}

/* DataTables sorting arrows */
html[data-theme="dark"] table.dataTable thead > tr > th.sorting:before,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting:after,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:before,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:after,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:before,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:after {
  color: #64748b !important;
  opacity: 0.6;
}
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:before,
html[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:after {
  color: #60a5fa !important;
  opacity: 1;
}

/* DataTables empty state */
html[data-theme="dark"] .dataTables_empty {
  color: #64748b !important;
}

/* ─── SweetAlert2 + DataTables transition ─── */
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .dataTables_wrapper input,
html[data-theme="dark"] .dataTables_wrapper select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}