/* ============================================
   DARK MODE SUPPORT - LENGKAP
   ============================================ */

body.dark-mode {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* ===== CARDS & CONTAINERS ===== */
body.dark-mode .card,
body.dark-mode .navbar-main,
body.dark-mode .sidebar-widget,
body.dark-mode .stat-card,
body.dark-mode .topbar,
body.dark-mode .topbar-custom,
body.dark-mode .card-custom,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .table {
    background: #16213e !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e !important;
}

/* ===== BACKGROUNDS ===== */
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body {
    background: #16213e !important;
}

body.dark-mode .bg-secondary {
    background: #2a3a5e !important;
}

body.dark-mode .bg-light {
    background: #1a2a4a !important;
}

/* ===== TEXT ===== */
body.dark-mode .text-muted,
body.dark-mode .text-dark,
body.dark-mode .text-body {
    color: #8a8a8a !important;
}

body.dark-mode .text-white {
    color: #e0e0e0 !important;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6,
body.dark-mode .page-title,
body.dark-mode .section-title,
body.dark-mode .fw-bold,
body.dark-mode .card-title {
    color: #e0e0e0 !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #4CAF50 !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #66BB6A !important;
}

/* ===== HERO ===== */
body.dark-mode .hero-section::before {
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)) !important;
}

/* ===== FOOTER ===== */
body.dark-mode .footer,
body.dark-mode footer {
    background: #0d0d1a !important;
}

body.dark-mode .footer a,
body.dark-mode footer a {
    color: #8a8a8a !important;
}

body.dark-mode .footer a:hover,
body.dark-mode footer a:hover {
    color: #4CAF50 !important;
}

/* ===== TABLES ===== */
body.dark-mode .table {
    color: #e0e0e0 !important;
}

body.dark-mode .table th,
body.dark-mode .table td {
    border-color: #2a3a5e !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background: #1a2a4a !important;
}

/* ===== FORMS ===== */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background: #1a2a4a !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: #1a2a4a !important;
    border-color: #1a7a4a !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 122, 74, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: #6a6a8a !important;
}

/* ===== BUTTONS ===== */
body.dark-mode .btn-secondary {
    background: #2a3a5e !important;
    border-color: #2a3a5e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .btn-secondary:hover {
    background: #3a4a6e !important;
}

body.dark-mode .btn-outline-secondary {
    color: #8a8a8a !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background: #2a3a5e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .btn-light {
    background: #2a3a5e !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .btn-light:hover {
    background: #3a4a6e !important;
}

/* ===== BREADCRUMB ===== */
body.dark-mode .breadcrumb-item a {
    color: #4CAF50 !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #8a8a8a !important;
}

body.dark-mode .breadcrumb {
    background: transparent !important;
}

/* ===== ALERTS ===== */
body.dark-mode .alert-light {
    background: #1a2a4a !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .alert-success {
    background: #0d3a1a !important;
    color: #8a8a8a !important;
    border-color: #1a4a2a !important;
}

body.dark-mode .alert-danger {
    background: #3a0d0d !important;
    color: #e0a0a0 !important;
    border-color: #4a1a1a !important;
}

body.dark-mode .alert-warning {
    background: #3a2a0d !important;
    color: #e0d0a0 !important;
    border-color: #4a3a1a !important;
}

body.dark-mode .alert-info {
    background: #0d2a3a !important;
    color: #a0d0e0 !important;
    border-color: #1a3a4a !important;
}

/* ===== MODALS ===== */
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #2a3a5e !important;
}

body.dark-mode .modal-title {
    color: #e0e0e0 !important;
}

body.dark-mode .btn-close {
    filter: invert(1);
}

/* ===== SIDEBAR ===== */
body.dark-mode .sidebar {
    background: #0d0d1a !important;
}

body.dark-mode .sidebar .nav-link {
    color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .sidebar .nav-link:hover {
    color: white !important;
    background: rgba(255,255,255,0.05) !important;
}

body.dark-mode .sidebar .sidebar-brand {
    border-color: #2a3a5e !important;
}

/* ===== SHARE SECTION ===== */
body.dark-mode .share-section {
    background: #1a2a4a !important;
    border-color: #2a3a5e !important;
}

/* ===== GALLERY OVERLAY ===== */
body.dark-mode .gallery-item .overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
}

/* ===== NAVBAR ===== */
body.dark-mode .navbar-main {
    background: #16213e !important;
    border-bottom: 1px solid #2a3a5e !important;
}

body.dark-mode .navbar-main .navbar-brand {
    color: #e0e0e0 !important;
}

body.dark-mode .navbar-main .navbar-brand .brand-text small {
    color: #8a8a8a !important;
}

body.dark-mode .navbar-main .nav-link {
    color: #e0e0e0 !important;
}

body.dark-mode .navbar-main .nav-link:hover,
body.dark-mode .navbar-main .nav-link.active {
    color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.1) !important;
}

body.dark-mode .navbar-main .dropdown-menu {
    background: #1a2a4a !important;
}

body.dark-mode .navbar-main .dropdown-item {
    color: #e0e0e0 !important;
}

body.dark-mode .navbar-main .dropdown-item:hover {
    background: rgba(76, 175, 80, 0.1) !important;
    color: #4CAF50 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    body.dark-mode .navbar-main .navbar-nav .nav-link {
        color: #e0e0e0 !important;
    }
}

/* ===== BADGE ===== */
body.dark-mode .badge.bg-success {
    background: #1a4a2a !important;
    color: #8a8a8a !important;
}

body.dark-mode .badge.bg-primary {
    background: #1a2a4a !important;
    color: #8a8a8a !important;
}

body.dark-mode .badge.bg-warning {
    background: #3a2a0d !important;
    color: #e0d0a0 !important;
}

body.dark-mode .badge.bg-danger {
    background: #3a0d0d !important;
    color: #e0a0a0 !important;
}

body.dark-mode .badge.bg-info {
    background: #0d2a3a !important;
    color: #a0d0e0 !important;
}

/* ===== PAGINATION ===== */
body.dark-mode .page-link {
    background: #16213e !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .page-link:hover {
    background: #1a2a4a !important;
    color: #4CAF50 !important;
}

body.dark-mode .page-item.active .page-link {
    background: #1a7a4a !important;
    border-color: #1a7a4a !important;
}

/* ===== PROGRESS ===== */
body.dark-mode .progress {
    background: #2a3a5e !important;
}

/* ===== TAB ===== */
body.dark-mode .nav-tabs .nav-link {
    color: #8a8a8a !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background: #16213e !important;
    color: #e0e0e0 !important;
    border-color: #2a3a5e #2a3a5e #16213e !important;
}

/* ===== ACCORDION ===== */
body.dark-mode .accordion-item {
    background: #16213e !important;
    border-color: #2a3a5e !important;
}

body.dark-mode .accordion-button {
    background: #16213e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background: #1a2a4a !important;
    color: #4CAF50 !important;
}

/* ===== DARK MODE TOGGLE ICON ===== */
body.dark-mode .header-top .icon-item#darkModeToggle i {
    color: #f1c40f !important;
}