/* =========================================================
   MARWA HIJAB — Dark Mode + Theme Switcher
   Load SETELAH marwa.css agar override variabel
   ========================================================= */

/* ===== Dark Mode Variables ===== */
html[data-theme="dark"] {
    --marwa-primary: #C9456E;
    --marwa-primary-dark: #A82E55;
    --marwa-primary-soft: rgba(201, 69, 110, .18);
    --marwa-gold: #E8C26B;
    --marwa-gold-soft: rgba(232, 194, 107, .15);

    --bg: #0F1216;
    --surface: #1A1E24;
    --surface-2: #232830;
    --border: #2C323C;
    --border-strong: #3A4150;
    --text: #E8EAEE;
    --text-muted: #9BA3B0;
    --text-soft: #6B7280;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 2px 10px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.3);

    color-scheme: dark;
}

/* ===== Dark mode: Bootstrap & Component Overrides ===== */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .card-marwa-header,
html[data-theme="dark"] .modal-header {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .bg-soft {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--marwa-primary);
    box-shadow: 0 0 0 .15rem var(--marwa-primary-soft);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--text-soft); }

html[data-theme="dark"] .table { color: var(--text); --bs-table-bg: transparent; }
html[data-theme="dark"] .table thead { background: var(--surface-2); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-color: var(--border); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: var(--marwa-primary-soft); color: var(--text); }

html[data-theme="dark"] .btn-light {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
html[data-theme="dark"] .btn-light:hover { background: var(--border-strong); color: var(--text); }
html[data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-strong); }
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); }

html[data-theme="dark"] .alert-light {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .alert-info  { background: rgba(13,202,240,.12); border-color: rgba(13,202,240,.3); color: #75D5F0; }
html[data-theme="dark"] .alert-warning { background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.3); color: #F7C948; }
html[data-theme="dark"] .alert-success { background: rgba(25,135,84,.12); border-color: rgba(25,135,84,.35); color: #4ADE80; }
html[data-theme="dark"] .alert-danger  { background: rgba(220,53,69,.12); border-color: rgba(220,53,69,.35); color: #F87171; }

html[data-theme="dark"] code { background: var(--surface-2); color: #F8C8B8; padding: 1px 6px; border-radius: 3px; }
html[data-theme="dark"] hr { border-color: var(--border) !important; opacity: .6; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
html[data-theme="dark"] .badge.bg-light { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .text-dark { color: var(--text) !important; }

html[data-theme="dark"] .sidebar-marwa {
    background: var(--surface);
    border-right: 1px solid var(--border);
}
html[data-theme="dark"] .sidebar-marwa a,
html[data-theme="dark"] .sidebar-marwa .menu-group { color: var(--text); }
html[data-theme="dark"] .sidebar-marwa a:hover,
html[data-theme="dark"] .sidebar-marwa .menu-group:hover { background: var(--surface-2); }
html[data-theme="dark"] .sidebar-marwa .active { background: var(--marwa-primary-soft); color: var(--marwa-primary); }

html[data-theme="dark"] .nav-marwa {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .nav-marwa .nav-link { color: var(--text); }
html[data-theme="dark"] .nav-marwa .nav-link.active { color: var(--marwa-primary); }

html[data-theme="dark"] .marwa-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); }

html[data-theme="dark"] .accordion-button {
    background: var(--surface);
    color: var(--text);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--marwa-primary-soft); color: var(--marwa-primary); }
html[data-theme="dark"] .accordion-body { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .accordion-item { background: var(--surface); border-color: var(--border); }

html[data-theme="dark"] .dropdown-item { color: var(--text); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

html[data-theme="dark"] .breadcrumb { background: transparent; }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted); }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-soft); }

/* Select2 di dark mode */
html[data-theme="dark"] .select2-dropdown {
    background-color: #1A1E24 !important;
    border-color: var(--marwa-primary) !important;
}
html[data-theme="dark"] .select2-results__option {
    background-color: #1A1E24 !important;
    color: #E8EAEE !important;
}
html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--marwa-primary) !important;
    color: #FFFFFF !important;
}
html[data-theme="dark"] .select2-search__field {
    background-color: #232830 !important;
    color: #E8EAEE !important;
    border-color: #3A4150 !important;
}
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: #1A1E24 !important;
    border-color: #2C323C !important;
    color: #E8EAEE !important;
}
html[data-theme="dark"] .select2-selection__rendered { color: #E8EAEE !important; }

/* Searchable dropdown di dark mode — SOLID gelap, tidak transparan */
html[data-theme="dark"] .ss-wrap .ss-list {
    background-color: #1A1E24 !important;
    border-color: var(--marwa-primary);
    box-shadow: 0 16px 44px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.5);
}
html[data-theme="dark"] .ss-item {
    background-color: #1A1E24 !important;
    color: #E8EAEE;
    border-bottom-color: #2C323C;
}
html[data-theme="dark"] .ss-item:hover,
html[data-theme="dark"] .ss-item.active {
    background-color: #2C1620 !important;
    color: var(--marwa-primary);
}
html[data-theme="dark"] .ss-item .ss-meta { color: #9BA3B0; }
html[data-theme="dark"] .ss-empty {
    background-color: #1A1E24 !important;
    color: #9BA3B0;
}
html[data-theme="dark"] .ss-group {
    background-color: #2A2218 !important;
    color: var(--marwa-primary);
    border-bottom-color: #2C323C;
}
@media (max-width: 576px) {
    html[data-theme="dark"] .ss-wrap .ss-list.show::before { background: #4A4F5A; }
}

/* Pagination di dark mode */
html[data-theme="dark"] .pagination .page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--marwa-primary);
}
html[data-theme="dark"] .pagination .page-link:hover {
    background: var(--marwa-primary-soft);
    color: var(--marwa-primary);
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: var(--bg);
    color: var(--text-soft);
}

html[data-theme="dark"] .product-card {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .product-card:hover { box-shadow: var(--shadow-lg); }

html[data-theme="dark"] img.product-img { background: var(--surface-2); }

/* ===== Theme Switcher UI ===== */
.theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    background: var(--surface-2, var(--bg));
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.theme-switcher button {
    border: 0; background: transparent; cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    transition: all .15s ease;
}
.theme-switcher button:hover { background: var(--marwa-primary-soft); color: var(--marwa-primary); }
.theme-switcher button.active {
    background: var(--marwa-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.theme-switcher button.active:hover { background: var(--marwa-primary-dark); color: #fff; }

/* Smooth transitions between themes */
body, .card, .nav-marwa, .sidebar-marwa, .modal-content,
.form-control, .form-select, .table, .alert {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}