/* ============================================================= */
/* 🪟 DASHBOARD MODAL DARK MODE FORCE SYSTEM                    */
/* ============================================================= */

/* Force all modals to always use dark theme */
#mission-modal,
#badge-gallery-modal,
#goal-modal,
#level-up-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Modal containers */
#mission-modal > div,
#badge-gallery-modal > div,
#goal-modal > div,
#level-up-modal > div {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

/* Typography in modals */
#mission-modal h1, #mission-modal h2, #mission-modal h3,
#mission-modal h4, #mission-modal h5, #mission-modal h6 {
    color: #f9fafb !important;
}

#mission-modal p, #mission-modal span, #mission-modal div {
    color: #d1d5db !important;
}

#badge-gallery-modal h1, #badge-gallery-modal h2, #badge-gallery-modal h3,
#badge-gallery-modal h4, #badge-gallery-modal h5, #badge-gallery-modal h6 {
    color: #f9fafb !important;
}

#badge-gallery-modal p, #badge-gallery-modal span, #badge-gallery-modal div {
    color: #d1d5db !important;
}

/* Text color overrides for mission modal */
#mission-modal .text-gray-800 { color: #f9fafb !important; }
#mission-modal .text-gray-700 { color: #e5e7eb !important; }
#mission-modal .text-gray-600 { color: #d1d5db !important; }
#mission-modal .text-gray-500 { color: #9ca3af !important; }

/* Text color overrides for badge gallery modal */
#badge-gallery-modal .text-gray-800 { color: #f9fafb !important; }
#badge-gallery-modal .text-gray-700 { color: #e5e7eb !important; }
#badge-gallery-modal .text-gray-600 { color: #d1d5db !important; }
#badge-gallery-modal .text-gray-500 { color: #9ca3af !important; }
#badge-gallery-modal .text-gray-400 { color: #6b7280 !important; }

/* Background overrides for mission modal */
#mission-modal .bg-white { background-color: #374151 !important; }
#mission-modal .bg-gray-50 { background-color: #374151 !important; }
#mission-modal .bg-gray-100 { background-color: #4b5563 !important; }
#mission-modal .bg-gray-200 { background-color: #4b5563 !important; }

/* Background overrides for badge gallery modal */
#badge-gallery-modal .bg-white { background-color: #374151 !important; }
#badge-gallery-modal .bg-gray-50 { background-color: #374151 !important; }
#badge-gallery-modal .bg-gray-100 { background-color: #4b5563 !important; }
#badge-gallery-modal .bg-gray-200 { background-color: #4b5563 !important; }

/* Border overrides for mission modal */
#mission-modal .border-gray-200 { border-color: #4b5563 !important; }
#mission-modal .border-gray-300 { border-color: #6b7280 !important; }

/* Border overrides for badge gallery modal */
#badge-gallery-modal .border-gray-200 { border-color: #4b5563 !important; }
#badge-gallery-modal .border-gray-300 { border-color: #6b7280 !important; }

/* Special handling for gradient backgrounds in dark mode */
#mission-modal .bg-gradient-to-r,
#mission-modal .bg-gradient-to-br,
#badge-gallery-modal .bg-gradient-to-r,
#badge-gallery-modal .bg-gradient-to-br {
    /* Keep gradients but ensure text remains readable */
    color: #f9fafb !important;
}

/* Force dark for badge cards specifically */
#badge-gallery-modal .badge-item {
    background-color: #374151 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
}

#badge-gallery-modal .badge-item.opacity-60 {
    background-color: #1f2937 !important;
    opacity: 0.6 !important;
}

/* Mission cards force dark */
#mission-modal .mission-detail-card {
    background-color: #374151 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
}

/* Category headers in modals */
#mission-modal .category-header-text,
#badge-gallery-modal .category-header-text {
    color: #ffffff !important;
}

/* Progress bars in modals */
#mission-modal .bg-gray-200,
#badge-gallery-modal .bg-gray-200 {
    background-color: #4b5563 !important;
}

#mission-modal .bg-gray-700,
#badge-gallery-modal .bg-gray-700 {
    background-color: #374151 !important;
}

/* Input fields in modals */
#goal-modal input,
#goal-modal select,
#goal-modal textarea {
    background-color: #374151 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
}

/* Close buttons */
#mission-modal button,
#badge-gallery-modal button,
#goal-modal button {
    color: #f9fafb !important;
}

/* Tips and info sections */
#mission-modal .bg-blue-50,
#mission-modal .bg-indigo-50,
#mission-modal .bg-purple-50,
#badge-gallery-modal .bg-blue-50,
#badge-gallery-modal .bg-indigo-50,
#badge-gallery-modal .bg-purple-50 {
    background-color: rgba(79, 70, 229, 0.1) !important;
}

#mission-modal .bg-amber-100,
#mission-modal .bg-yellow-100,
#badge-gallery-modal .bg-amber-100,
#badge-gallery-modal .bg-yellow-100 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Scrollbars */
#mission-modal-content::-webkit-scrollbar-track,
#full-badge-gallery-content::-webkit-scrollbar-track {
    background: #374151 !important;
}

#mission-modal-content::-webkit-scrollbar-thumb,
#full-badge-gallery-content::-webkit-scrollbar-thumb {
    background: #6b7280 !important;
}

/* ============================================================= */
/* 픽스 FIX: VISIBILITY FOR GOAL MODAL FORM ELEMENTS             */
/* ============================================================= */

/* FIX: Atur warna teks untuk label agar terlihat di latar gelap */
#goal-modal label {
    color: #d1d5db !important; /* Warna abu-abu terang */
    margin-bottom: 0.5rem;
    display: block;
}

/* FIX: Paksa tema gelap untuk dropdown Choices.js di dalam modal */
#goal-modal .choices__inner {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #6b7280 !important;
}

#goal-modal .choices__list--dropdown {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

#goal-modal .choices__list--dropdown .choices__item {
    color: #d1d5db !important;
}

#goal-modal .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

#goal-modal .choices[data-type*="select-one"]::after {
    border-color: #d1d5db transparent transparent !important;
}

#goal-modal .choices.is-open[data-type*="select-one"]::after {
    border-color: transparent transparent #d1d5db !important;
}