/* ==========================================================
   dark-mode.css
   File tema mode malam untuk seluruh halaman SIMPORA NTT.
   Cukup di-link sekali di setiap file .php lewat:
   <link rel="stylesheet" href="assets/dark-mode.css">
   ========================================================== */


:root {
    --dm-page-bg: #0d1320;
    --dm-card-bg: #161d2c;
    --dm-card-bg-2: #1c2436;
    --dm-line: #2a3550;
    --dm-text-main: #e7ecf6;
    --dm-text-muted: #94a3bb;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Timpa variabel CSS asli yang dipakai berbagai halaman (var(--text-main),
               var(--line), var(--blue-soft), dst) supaya otomatis ikut gelap tanpa
               perlu override manual di setiap class */
    --page-bg: var(--dm-page-bg);
    --card-bg: var(--dm-card-bg);
    --line: var(--dm-line);
    --text-main: var(--dm-text-main);
    --text-muted: var(--dm-text-muted);
    --blue-soft: rgba(37, 99, 235, 0.22);
    --green-soft: rgba(22, 163, 74, 0.22);
    --red-soft: rgba(220, 38, 38, 0.22);
    --yellow-soft: rgba(217, 119, 6, 0.22);
}

html[data-theme="dark"] body {
    background: var(--dm-page-bg);
    color: var(--dm-text-main);
}

/* Kartu, panel, dan permukaan putih -> jadi gelap */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .latest-activity,
html[data-theme="dark"] .welcome-card,
html[data-theme="dark"] .score-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .btn-calendar,
html[data-theme="dark"] .calendar-head,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .detail-modal-box,
html[data-theme="dark"] .info-popup-box,
html[data-theme="dark"] .welcome-bubble,
html[data-theme="dark"] .welcome-bubble::after,
html[data-theme="dark"] .card-menu,
html[data-theme="dark"] .mini-doc-card,
html[data-theme="dark"] #lightbox img {
    background: var(--dm-card-bg);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .mini-summary-card,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .latest-meta span,
html[data-theme="dark"] .document-item,
html[data-theme="dark"] .topbar-search,
html[data-theme="dark"] .topbar-date,
html[data-theme="dark"] .topbar-user,
html[data-theme="dark"] .info-popup-close {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
    border-color: var(--dm-line);
}

/* Border tipis di berbagai komponen */
html[data-theme="dark"] .topbar-search,
html[data-theme="dark"] .topbar-date,
html[data-theme="dark"] .topbar-user,
html[data-theme="dark"] .detail-modal-header,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .welcome-bubble,
html[data-theme="dark"] .mini-summary-card,
html[data-theme="dark"] .calendar-grid,
html[data-theme="dark"] .calendar-head,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .btn-calendar,
html[data-theme="dark"] td,
html[data-theme="dark"] .photo-list img,
html[data-theme="dark"] .document-item,
html[data-theme="dark"] .mini-doc-card,
html[data-theme="dark"] .card-menu {
    border-color: var(--dm-line);
}

/* Teks judul / angka utama */
html[data-theme="dark"] .detail-modal-header h3,
html[data-theme="dark"] .detail-item strong,
html[data-theme="dark"] .card-number,
html[data-theme="dark"] .mini-summary-card strong,
html[data-theme="dark"] .info-popup-box h2,
html[data-theme="dark"] .total-chart-header h3,
html[data-theme="dark"] .latest-action-card h3,
html[data-theme="dark"] .mini-doc-body h4,
html[data-theme="dark"] .topbar-search input {
    color: var(--dm-text-main);
}

/* Teks sekunder / muted */
html[data-theme="dark"] .detail-modal-header span,
html[data-theme="dark"] .detail-section small,
html[data-theme="dark"] .detail-item small,
html[data-theme="dark"] .detail-section p,
html[data-theme="dark"] .welcome-text p,
html[data-theme="dark"] .welcome-card .welcome-text p,
html[data-theme="dark"] .mini-summary-card span,
html[data-theme="dark"] .mini-summary-card small,
html[data-theme="dark"] .score-card p,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .panel-header h2,
html[data-theme="dark"] .calendar-head,
html[data-theme="dark"] .document-item,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .total-chart-header span,
html[data-theme="dark"] .card-menu-button,
html[data-theme="dark"] .latest-action-card span,
html[data-theme="dark"] .latest-action-card p,
html[data-theme="dark"] .card-menu a,
html[data-theme="dark"] .mini-doc-body p,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .info-popup-box p,
html[data-theme="dark"] .latest-content h2,
html[data-theme="dark"] .latest-content p,
html[data-theme="dark"] .topbar-search input::placeholder {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .btn-calendar:hover {
    background: var(--dm-card-bg-2);
}

html[data-theme="dark"] .card-menu a:hover,
html[data-theme="dark"] .topbar-menu:hover,
html[data-theme="dark"] .topbar-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Tabel */
html[data-theme="dark"] tr:hover td {
    background: var(--dm-card-bg-2);
}

/* Placeholder foto & thumbnail */
html[data-theme="dark"] .latest-photo,
html[data-theme="dark"] .mini-doc-image {
    background: #232c40;
}

/* Badge / pill status tetap berwarna, hanya dilembutkan agar tidak menyilaukan di gelap */
html[data-theme="dark"] .status-pill.aman,
html[data-theme="dark"] .risk-pill.rendah,
html[data-theme="dark"] .event-item.aman,
html[data-theme="dark"] .badge.aman,
html[data-theme="dark"] .badge.risiko-rendah {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #4ade80 !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
}

html[data-theme="dark"] .status-pill.ricuh,
html[data-theme="dark"] .risk-pill.tinggi,
html[data-theme="dark"] .event-item.ricuh,
html[data-theme="dark"] .badge.ricuh,
html[data-theme="dark"] .badge.risiko-tinggi,
html[data-theme="dark"] .btn-delete {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #f87171 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

html[data-theme="dark"] .status-pill.selesai,
html[data-theme="dark"] .event-item.selesai,
html[data-theme="dark"] .badge.selesai,
html[data-theme="dark"] .btn-edit {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #60a5fa !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
}

html[data-theme="dark"] .risk-pill.sedang,
html[data-theme="dark"] .badge.risiko-sedang {
    background: rgba(217, 119, 6, 0.22) !important;
    color: #fbbf24 !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
}

html[data-theme="dark"] .btn-delete:hover {
    background: rgba(220, 38, 38, 0.35) !important;
}

html[data-theme="dark"] .btn-edit:hover {
    background: rgba(37, 99, 235, 0.35) !important;
}

html[data-theme="dark"] .latest-label,
html[data-theme="dark"] .document-item span {
    background: rgba(37, 99, 235, 0.22);
    color: #60a5fa;
}

html[data-theme="dark"] .latest-action-icon {
    background: rgba(40, 199, 111, 0.22);
}

/* Modal & popup overlay sedikit lebih pekat di dark mode */
html[data-theme="dark"] .detail-modal,
html[data-theme="dark"] .info-popup {
    background: rgba(0, 0, 0, 0.7);
}

/* Ikon toggle mode malam berubah saat aktif */
html[data-theme="dark"] #darkModeToggle i::before {
    content: "\f185";
    /* fa-sun */
}

html[data-theme="dark"] .document-icon,
html[data-theme="dark"] .status-icon,
html[data-theme="dark"] .mini-icon {
    color: #ffffff;
}

/* ==========================================================
           Tambahan khusus halaman Data & Statistik / Grafik
           ========================================================== */

html[data-theme="dark"] .detail-box,
html[data-theme="dark"] .calendar-popup-box,
html[data-theme="dark"] .status-modal-box {
    background: var(--dm-card-bg);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .detail-box h3,
html[data-theme="dark"] .status-modal-box h3,
html[data-theme="dark"] .location-pie-legend b,
html[data-theme="dark"] .risk-donut-center strong,
html[data-theme="dark"] .risk-donut-legend b,
html[data-theme="dark"] .status-detail-item strong {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .location-pie-legend li,
html[data-theme="dark"] .risk-donut-center span,
html[data-theme="dark"] .risk-donut-legend li,
html[data-theme="dark"] .popup-event-item span,
html[data-theme="dark"] .legend-item,
html[data-theme="dark"] .status-detail-item span,
html[data-theme="dark"] .status-empty {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .detail-close,
html[data-theme="dark"] .calendar-popup-close,
html[data-theme="dark"] .status-modal-close {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
}

/* Isi modal "Detail Data Unjuk Rasa" (header, field info, section isu/tuntutan) */
html[data-theme="dark"] .detail-box-header {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(37, 99, 235, 0.18));
    border-bottom-color: var(--dm-line);
}

html[data-theme="dark"] .detail-box-header p {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .detail-field,
html[data-theme="dark"] .detail-section {
    background: var(--dm-card-bg-2);
    border-color: var(--dm-line);
}

html[data-theme="dark"] .detail-field:hover {
    background: #202a40;
    border-color: #33415f;
}

html[data-theme="dark"] .detail-label {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .detail-value {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .detail-section .detail-label {
    color: #60a5fa;
}

html[data-theme="dark"] .detail-section-text {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .detail-files .empty-photo,
html[data-theme="dark"] .empty-photo {
    background: var(--dm-card-bg-2);
    border-color: var(--dm-line);
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .detail-files a,
html[data-theme="dark"] .btn-print-filter,
html[data-theme="dark"] .btn-chart-filter,
html[data-theme="dark"] .status-detail-btn {
    background: rgba(37, 99, 235, 0.22);
    color: #60a5fa;
}

html[data-theme="dark"] .status-detail-btn:hover {
    background: rgba(37, 99, 235, 0.35);
}

html[data-theme="dark"] .calendar-filter select,
html[data-theme="dark"] .print-filter select,
html[data-theme="dark"] .chart-year-filter select,
html[data-theme="dark"] .status-detail-item {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
    border-color: var(--dm-line);
}

html[data-theme="dark"] .calendar-legend,
html[data-theme="dark"] .popup-event-item {
    border-color: var(--dm-line);
}

html[data-theme="dark"] .calendar-popup,
html[data-theme="dark"] .status-modal {
    background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .btn-print {
    background: #16a34a;
    color: #ffffff;
}

/* ==========================================================
           Tambahan khusus halaman Data & Statistik / Tabel
           ========================================================== */

html[data-theme="dark"] .edit-modal-box,
html[data-theme="dark"] .edit-modal-loading {
    background: var(--dm-card-bg);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .edit-modal-close {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .edit-modal {
    background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .pagination button {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
    border-color: var(--dm-line);
}

html[data-theme="dark"] .pagination button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .pagination button.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

html[data-theme="dark"] .pagination .pagination-ellipsis {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .btn-duplicate {
    background: rgba(217, 119, 6, 0.22);
    color: #fbbf24;
}

html[data-theme="dark"] .btn-duplicate:hover {
    background: rgba(217, 119, 6, 0.35);
}

/* ==========================================================
           Tambahan khusus halaman Kalender Aksi
           ========================================================== */

html[data-theme="dark"] .day-detail-panel {
    background: linear-gradient(180deg, var(--dm-card-bg), var(--dm-card-bg-2));
    border-color: var(--dm-line);
}

html[data-theme="dark"] .day-detail-panel h3 {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .popup-event-item {
    background: var(--dm-card-bg-2);
    border-color: var(--dm-line);
    box-shadow: none;
}

html[data-theme="dark"] .popup-event-item .event-title strong {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .popup-event-item .event-sub {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .status-pill.risiko-rendah {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .status-pill.risiko-sedang {
    background: rgba(217, 119, 6, 0.22) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .status-pill.risiko-tinggi {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .event-detail-list,
html[data-theme="dark"] .event-detail-note {
    border-top-color: var(--dm-line);
}

html[data-theme="dark"] .event-detail-row,
html[data-theme="dark"] .event-detail-note {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .event-detail-row i {
    color: #64748b;
}

html[data-theme="dark"] .event-detail-row b,
html[data-theme="dark"] .event-detail-note b {
    color: var(--dm-text-main);
}

/* ==========================================================
           Tambahan khusus halaman Dokumentasi
           ========================================================== */

html[data-theme="dark"] .card-stat,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .modal-box {
    background: var(--dm-card-bg);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .card-stat p,
html[data-theme="dark"] .doc-body p,
html[data-theme="dark"] .doc-keterangan,
html[data-theme="dark"] .empty-state {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .filter-tab,
html[data-theme="dark"] .mobile-menu-btn,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group input[type="file"],
html[data-theme="dark"] .modal-file-chip,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .delete-preview {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
    border-color: var(--dm-line);
}

html[data-theme="dark"] .filter-tab:hover,
html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .form-group select:focus,
html[data-theme="dark"] .form-group input[type="file"]:focus {
    background: var(--dm-card-bg);
}

html[data-theme="dark"] .doc-image,
html[data-theme="dark"] .doc-image .media-icon-box {
    background: #232c40;
}

html[data-theme="dark"] .doc-image-suara .media-icon-box {
    background: rgba(217, 119, 6, 0.18);
}

html[data-theme="dark"] .doc-image-dokumen .media-icon-box {
    background: #232c40;
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .tag-dokumen {
    background: #2a3550;
    color: var(--dm-text-main);
}

html[data-theme="dark"] .tag-video {
    background: rgba(109, 40, 217, 0.28);
    color: #c4b5fd;
}

html[data-theme="dark"] .tag-suara {
    background: rgba(217, 119, 6, 0.22);
    color: #fbbf24;
}

html[data-theme="dark"] .badge.rendah {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .badge.tinggi {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .badge.sedang {
    background: rgba(217, 119, 6, 0.22) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .alert-banner.success {
    background: rgba(22, 163, 74, 0.22);
    color: #4ade80;
    border-color: rgba(22, 163, 74, 0.4);
}

html[data-theme="dark"] .alert-banner.error {
    background: rgba(220, 38, 38, 0.22);
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.4);
}

html[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .doc-delete-btn {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
}

html[data-theme="dark"] .doc-delete-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ==========================================================
           Tambahan khusus halaman Upload Data
           ========================================================== */

html[data-theme="dark"] .success-popup-box,
html[data-theme="dark"] .success-card {
    background: var(--dm-card-bg);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .success-popup-box h2 {
    color: var(--dm-text-main);
}

html[data-theme="dark"] .success-popup-box p,
html[data-theme="dark"] .upload-note,
html[data-theme="dark"] label {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .success-popup-close,
html[data-theme="dark"] .success-close,
html[data-theme="dark"] .btn-secondary {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
}

html[data-theme="dark"] .success-close:hover,
html[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--dm-card-bg-2);
    color: var(--dm-text-main);
    border-color: var(--dm-line);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #4f46e5;
    background: var(--dm-card-bg);
}

html[data-theme="dark"] .upload-box {
    border-color: var(--dm-line);
    background: var(--dm-card-bg-2);
}

html[data-theme="dark"] .preview img {
    border-color: var(--dm-line);
}

html[data-theme="dark"] .alert {
    background: rgba(220, 38, 38, 0.22);
    color: #f87171;
}

html[data-theme="dark"] .topbar p {
    color: var(--dm-text-muted);
}