/*
    Mode tampilan toko (atribut data-theme di <body>, dari setelan Tampilan Toko).
    Token warna (--bg, --surface, --ink, --line, --brand, --brand-2, ...) diisi _ThemeVars.cshtml.
    Light = bawaan (token terang, sama dengan tampilan lama). Dark = latar gelap. Blocking = blok warna solid utama/sekunder.
*/

/* Latar & teks dasar untuk semua mode (nilai terang = tampilan lama, jadi Light tak berubah). */
body {
    background-color: var(--bg, #ffffff);
    color: var(--ink, #1c2e49);
}

/* ===================== DARK ===================== */
[data-theme="dark"] {
    color-scheme: dark;
}
[data-theme="dark"] .store-nav.bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
    background-color: var(--surface) !important;
    color: var(--ink);
}
[data-theme="dark"] .bg-light,
[data-theme="dark"] .text-bg-light,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .card,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .dropdown-menu {
    border-color: var(--line) !important;
}
[data-theme="dark"] .text-muted { color: var(--muted-ink) !important; }
[data-theme="dark"] .store-nav .nav-link,
[data-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .navbar-brand { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-2); color: var(--ink); }
[data-theme="dark"] .form-control::placeholder { color: var(--muted-ink); opacity: 1; }
[data-theme="dark"] .app-bottom-nav {
    background-color: var(--surface);
    border-top-color: var(--line);
}
[data-theme="dark"] .app-bottom-nav .app-nav-item { color: var(--muted-ink); }
[data-theme="dark"] .app-bottom-nav .app-nav-item.active { color: var(--brand, #00b9ae); }
/* Bar atas & footer sudah .bg-dark (gelap) — biarkan apa adanya. */

/* ===================== BLOCKING (color-blocking) ===================== */
/* Navbar memakai warna utama solid, teks kontras. */
[data-theme="blocking"] .store-nav.bg-white {
    background-color: var(--brand, #00b9ae) !important;
    border-bottom-color: var(--brand-dark, var(--brand)) !important;
    box-shadow: none;
}
[data-theme="blocking"] .store-nav .nav-link,
[data-theme="blocking"] .store-nav .navbar-brand,
[data-theme="blocking"] .store-nav .store-actions .nav-link {
    color: var(--brand-contrast, #ffffff) !important;
}
[data-theme="blocking"] .store-nav .nav-link.active {
    opacity: 1;
    border-bottom: 2px solid var(--brand-contrast, #ffffff);
}
[data-theme="blocking"] .store-nav .navbar-toggler {
    border-color: var(--brand-contrast, #ffffff);
}
/* Bar atas memakai warna sekunder; footer memakai warna utama. */
[data-theme="blocking"] .store-header > .bg-dark {
    background-color: var(--brand-2, var(--brand)) !important;
    color: var(--brand-2-contrast, #ffffff) !important;
}
[data-theme="blocking"] footer.bg-dark,
[data-theme="blocking"] .store-footer.bg-dark {
    background-color: var(--brand, #00b9ae) !important;
    color: var(--brand-contrast, #ffffff) !important;
}
/* Menu bawah HP memakai warna utama solid. */
[data-theme="blocking"] .app-bottom-nav {
    background-color: var(--brand, #00b9ae) !important;
    border-top: none;
}
[data-theme="blocking"] .app-bottom-nav .app-nav-item,
[data-theme="blocking"] .app-bottom-nav .app-nav-item.active {
    color: var(--brand-contrast, #ffffff) !important;
}
/* Badge promo & highlight memakai warna sekunder. */
[data-theme="blocking"] .badge-promo,
[data-theme="blocking"] .image-badge .badge {
    background-color: var(--brand-2, var(--brand)) !important;
    color: var(--brand-2-contrast, #ffffff) !important;
}