/* theme.css — variabel warna, font, sudut, dan skala tampilan RetailSync */

:root {
    --font-utama: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --skala: 1;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* aksen bawaan: amber */
    --a-50: #fffbeb; --a-100: #fef3c7; --a-200: #fde68a; --a-300: #fcd34d; --a-400: #fbbf24;
    --a-500: #f59e0b; --a-600: #d97706; --a-700: #b45309; --a-800: #92400e; --a-900: #78350f;
    --t-700: #b45309; --t-800: #92400e; --t-900: #78350f;
}

/* ---------- pilihan warna aksen ---------- */
[data-aksen="biru"] {
    --a-50:#eff6ff; --a-100:#dbeafe; --a-200:#bfdbfe; --a-300:#93c5fd; --a-400:#60a5fa;
    --a-500:#3b82f6; --a-600:#2563eb; --a-700:#1d4ed8; --a-800:#1e40af; --a-900:#1e3a8a;
    --t-700:#1d4ed8; --t-800:#1e40af; --t-900:#1e3a8a;
}
[data-aksen="hijau"] {
    --a-50:#ecfdf5; --a-100:#d1fae5; --a-200:#a7f3d0; --a-300:#6ee7b7; --a-400:#34d399;
    --a-500:#10b981; --a-600:#059669; --a-700:#047857; --a-800:#065f46; --a-900:#064e3b;
    --t-700:#047857; --t-800:#065f46; --t-900:#064e3b;
}
[data-aksen="ungu"] {
    --a-50:#f5f3ff; --a-100:#ede9fe; --a-200:#ddd6fe; --a-300:#c4b5fd; --a-400:#a78bfa;
    --a-500:#8b5cf6; --a-600:#7c3aed; --a-700:#6d28d9; --a-800:#5b21b6; --a-900:#4c1d95;
    --t-700:#6d28d9; --t-800:#5b21b6; --t-900:#4c1d95;
}
[data-aksen="merah"] {
    --a-50:#fff1f2; --a-100:#ffe4e6; --a-200:#fecdd3; --a-300:#fda4af; --a-400:#fb7185;
    --a-500:#f43f5e; --a-600:#e11d48; --a-700:#be123c; --a-800:#9f1239; --a-900:#881337;
    --t-700:#be123c; --t-800:#9f1239; --t-900:#881337;
}
[data-aksen="netral"] {
    --a-50:#f8fafc; --a-100:#f1f5f9; --a-200:#e2e8f0; --a-300:#cbd5e1; --a-400:#94a3b8;
    --a-500:#64748b; --a-600:#475569; --a-700:#334155; --a-800:#1e293b; --a-900:#0f172a;
    --t-700:#334155; --t-800:#1e293b; --t-900:#0f172a;
}

/* ---------- mode gelap ---------- */
[data-mode="gelap"] {
    --a-50:#1e293b; --a-100:#0f172a; --a-200:#1e293b; --a-300:#334155; --a-400:#475569;
    --t-700:#cbd5e1; --t-800:#e2e8f0; --t-900:#f8fafc;
    --r-sm: 6px;
}

/* ---------- sudut ---------- */
[data-sudut="tajam"] { --r-sm: 3px; --r-md: 5px; --r-lg: 7px; }
[data-sudut="lembut"] { --r-sm: 10px; --r-md: 16px; --r-lg: 22px; }

/* ---------- skala huruf ---------- */
[data-skala="kecil"] { --skala: 0.92; }
[data-skala="besar"] { --skala: 1.08; }

html { font-size: calc(16px * var(--skala)); }
body { font-family: var(--font-utama) !important; }

/* ---------- warna dasar ---------- */
.bg-amber-50 { background-color: var(--a-50) !important; }
.bg-amber-50\/80 { background-color: var(--a-50) !important; }
.bg-amber-100 { background-color: var(--a-100) !important; }
.bg-amber-100\/40, .bg-amber-100\/50, .bg-amber-100\/60 { background-color: var(--a-100) !important; }
.bg-amber-200 { background-color: var(--a-200) !important; }
.bg-amber-200\/60, .bg-amber-200\/70 { background-color: var(--a-200) !important; }
.bg-amber-300 { background-color: var(--a-300) !important; }
.bg-amber-400 { background-color: var(--a-400) !important; }
.bg-amber-500 { background-color: var(--a-500) !important; }
.bg-amber-600 { background-color: var(--a-600) !important; }
.bg-amber-700 { background-color: var(--a-700) !important; }
.bg-amber-800 { background-color: var(--a-800) !important; }
.bg-amber-900 { background-color: var(--a-900) !important; }

.text-amber-700 { color: var(--t-700) !important; }
.text-amber-800 { color: var(--t-800) !important; }
.text-amber-900 { color: var(--t-900) !important; }

.border-amber-100 { border-color: var(--a-100) !important; }
.border-amber-200 { border-color: var(--a-200) !important; }
.border-amber-300 { border-color: var(--a-300) !important; }
.border-amber-400 { border-color: var(--a-400) !important; }
.border-amber-600 { border-color: var(--a-600) !important; }
.divide-amber-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--a-100) !important; }
.divide-amber-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--a-200) !important; }

.from-amber-500 { --tw-gradient-from: var(--a-500) !important; }
.from-amber-600 { --tw-gradient-from: var(--a-600) !important; }
.from-amber-700 { --tw-gradient-from: var(--a-700) !important; }
.to-amber-400 { --tw-gradient-to: var(--a-400) !important; }
.to-amber-500 { --tw-gradient-to: var(--a-500) !important; }
.to-amber-600 { --tw-gradient-to: var(--a-600) !important; }

/* ---------- sudut membulat ---------- */
.rounded-sm { border-radius: var(--r-sm) !important; }
.rounded, .rounded-md { border-radius: var(--r-md) !important; }
.rounded-lg, .rounded-xl, .rounded-2xl { border-radius: var(--r-lg) !important; }

/* ---------- mode gelap: permukaan & teks ---------- */
[data-mode="gelap"] body { background-color: #0f172a !important; color: #e2e8f0; }
[data-mode="gelap"] .bg-white { background-color: #1e293b !important; }
[data-mode="gelap"] .bg-slate-100 { background-color: #334155 !important; }
[data-mode="gelap"] .bg-slate-200 { background-color: #334155 !important; }
[data-mode="gelap"] .bg-slate-300 { background-color: #475569 !important; }
[data-mode="gelap"] .bg-slate-400 { background-color: #475569 !important; }
[data-mode="gelap"] .bg-amber-50,
[data-mode="gelap"] .bg-amber-50\/80 { background-color: #1e293b !important; }

[data-mode="gelap"] .text-slate-400 { color: #94a3b8 !important; }
[data-mode="gelap"] .text-slate-500 { color: #94a3b8 !important; }
[data-mode="gelap"] .text-slate-600 { color: #cbd5e1 !important; }
[data-mode="gelap"] .text-slate-700 { color: #e2e8f0 !important; }
[data-mode="gelap"] .text-slate-800 { color: #f1f5f9 !important; }
[data-mode="gelap"] .text-slate-900 { color: #ffffff !important; }

[data-mode="gelap"] .border-slate-200,
[data-mode="gelap"] .border-slate-300,
[data-mode="gelap"] .border-slate-400 { border-color: #334155 !important; }
[data-mode="gelap"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }

[data-mode="gelap"] input,
[data-mode="gelap"] select,
[data-mode="gelap"] textarea {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-mode="gelap"] table thead tr { color: #0f172a; }
[data-mode="gelap"] .bg-emerald-50,
[data-mode="gelap"] .bg-red-50 { background-color: #1e293b !important; }

/* ============================================================
   GAYA MODERN  (html[data-gaya="modern"])
   Tampilan bersih: latar terang, kartu putih, aksen teal,
   sudut membulat, tabel ringan. Menu tetap sama.
   ============================================================ */

/* palet teal sebagai aksen bawaan gaya modern */
[data-aksen="teal"] {
    --a-50:#f0fdfa; --a-100:#ccfbf1; --a-200:#99f6e4; --a-300:#5eead4; --a-400:#2dd4bf;
    --a-500:#14b8a6; --a-600:#0d9488; --a-700:#0f766e; --a-800:#115e59; --a-900:#134e4a;
    --t-700:#0f766e; --t-800:#115e59; --t-900:#0f473f;
}

html[data-gaya="modern"] {
    --r-sm:8px; --r-md:12px; --r-lg:16px;
    --m-bg:#f8fafc; --m-isi:#ffffff; --m-garis:#e2e8f0; --m-garis2:#f1f5f9;
    --m-teks:#0f172a; --m-teks2:#475569; --m-teks3:#94a3b8;
}

html[data-gaya="modern"] body {
    background-color: var(--m-bg) !important;
    color: var(--m-teks) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ---------- header atas ---------- */
html[data-gaya="modern"] header {
    background-image: none !important;
    background-color: var(--m-isi) !important;
    color: var(--m-teks) !important;
    border-bottom: 1px solid var(--m-garis) !important;
    box-shadow: none !important;
}
html[data-gaya="modern"] header h1,
html[data-gaya="modern"] header a { color: var(--m-teks2) !important; }
html[data-gaya="modern"] header h1 { font-size: 15px !important; letter-spacing: -0.01em; }
html[data-gaya="modern"] header h1 span {
    background-color: var(--m-garis2) !important;
    color: var(--m-teks2) !important;
    font-weight: 600;
}
html[data-gaya="modern"] header nav a {
    border-radius: 8px;
    padding: 6px 10px !important;
    font-weight: 500 !important;
}
html[data-gaya="modern"] header nav a:hover {
    background-color: var(--m-garis2) !important;
    text-decoration: none !important;
    color: var(--m-teks) !important;
}
html[data-gaya="modern"] header nav a.bg-amber-700,
html[data-gaya="modern"] header nav a.underline {
    background-color: var(--a-50) !important;
    color: var(--a-700) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* ---------- baris sub-menu ---------- */
html[data-gaya="modern"] .bg-amber-200\/70,
html[data-gaya="modern"] .bg-amber-200 {
    background-color: var(--m-isi) !important;
}
html[data-gaya="modern"] .bg-amber-200\/70 { border-bottom: 1px solid var(--m-garis) !important; }
html[data-gaya="modern"] .bg-amber-200\/70 button {
    border-radius: 999px !important;
    font-weight: 500 !important;
    color: var(--m-teks2) !important;
    padding: 5px 14px !important;
}
html[data-gaya="modern"] .bg-amber-200\/70 button:hover { background-color: var(--m-garis2) !important; }
html[data-gaya="modern"] .bg-amber-200\/70 button.bg-amber-700 {
    background-color: var(--a-600) !important;
    color: #fff !important;
}

/* ---------- kartu & panel ---------- */
html[data-gaya="modern"] .bg-white {
    background-color: var(--m-isi) !important;
    border-color: var(--m-garis) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-gaya="modern"] .border-amber-300,
html[data-gaya="modern"] .border-amber-200 { border-color: var(--m-garis) !important; }
html[data-gaya="modern"] .border-amber-100 { border-color: var(--m-garis2) !important; }

/* blok berwarna lembut -> netral */
html[data-gaya="modern"] .bg-amber-100,
html[data-gaya="modern"] .bg-amber-100\/40,
html[data-gaya="modern"] .bg-amber-100\/50,
html[data-gaya="modern"] .bg-amber-100\/60 {
    background-color: var(--m-garis2) !important;
}

/* header gelap (bg-amber-800/900) -> teal rata */
html[data-gaya="modern"] .bg-amber-800,
html[data-gaya="modern"] .bg-amber-900 {
    background-color: var(--a-700) !important;
    color: #fff !important;
}

/* ---------- tabel ---------- */
html[data-gaya="modern"] table { border-collapse: separate; border-spacing: 0; }
html[data-gaya="modern"] table thead tr {
    background-color: var(--m-garis2) !important;
    color: var(--m-teks3) !important;
}
html[data-gaya="modern"] table thead th {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700 !important;
    border-color: var(--m-garis) !important;
    color: var(--m-teks3) !important;
    padding: 9px 10px !important;
}
html[data-gaya="modern"] table td {
    border-color: var(--m-garis2) !important;
    padding: 9px 10px !important;
}
html[data-gaya="modern"] table tbody tr:hover { background-color: #f8fafc !important; }
html[data-gaya="modern"] .divide-amber-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--m-garis2) !important; }
html[data-gaya="modern"] .divide-amber-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--m-garis2) !important; }

/* ---------- input & tombol ---------- */
html[data-gaya="modern"] input,
html[data-gaya="modern"] select,
html[data-gaya="modern"] textarea {
    background-color: var(--m-isi) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--r-sm) !important;
    color: var(--m-teks) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}
html[data-gaya="modern"] input:focus,
html[data-gaya="modern"] select:focus,
html[data-gaya="modern"] textarea:focus {
    outline: none !important;
    border-color: var(--a-500) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .16) !important;
}
html[data-gaya="modern"] button,
html[data-gaya="modern"] .rounded.bg-amber-600 {
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0;
}
html[data-gaya="modern"] button:active { transform: translateY(1px); }

/* ---------- judul bagian ---------- */
html[data-gaya="modern"] h2 {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: var(--m-teks) !important;
    border-color: var(--m-garis) !important;
    font-weight: 700 !important;
}
html[data-gaya="modern"] h3 { text-transform: none !important; color: var(--m-teks) !important; }

/* ---------- menu samping ---------- */
html[data-gaya="modern"] .w-full.text-left.p-2.rounded {
    border-radius: var(--r-sm) !important;
    font-weight: 500 !important;
    color: var(--m-teks2) !important;
    margin-bottom: 2px;
}
html[data-gaya="modern"] .w-full.text-left.p-2.rounded:hover { background-color: var(--m-garis2) !important; }
html[data-gaya="modern"] .w-full.text-left.p-2.rounded.bg-emerald-600,
html[data-gaya="modern"] .w-full.text-left.p-2.rounded.bg-amber-600 {
    background-color: var(--a-50) !important;
    color: var(--a-700) !important;
}

/* teks abu di atas latar terang */
html[data-gaya="modern"] .text-slate-500 { color: var(--m-teks3) !important; }
html[data-gaya="modern"] .text-slate-600 { color: var(--m-teks2) !important; }
html[data-gaya="modern"] .text-slate-700 { color: var(--m-teks2) !important; }

/* label bergaya huruf kapital rapat -> lebih halus */
html[data-gaya="modern"] .uppercase { letter-spacing: .03em; }

/* header tabel: paksa netral (mengalahkan bg-amber-200) */
html[data-gaya="modern"] table thead tr,
html[data-gaya="modern"] table thead tr.bg-amber-200,
html[data-gaya="modern"] table thead tr.bg-amber-100 {
    background-color: #f8fafc !important;
    background-image: none !important;
}
html[data-gaya="modern"] table thead th,
html[data-gaya="modern"] table thead th.text-amber-900 {
    color: #64748b !important;
    background-color: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-gaya="modern"] table tbody tr {
    background-color: #fff !important;
}
html[data-gaya="modern"] table tbody td {
    color: #334155 !important;
}

/* ============================================================
   TATA LETAK: MENU SAMPING + KONTRAS TEKS
   ============================================================ */

html[data-gaya="modern"] body {
    padding-left: 236px;
    color: #1e293b !important;
}

/* header menjadi panel samping */
html[data-gaya="modern"] header {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 236px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    z-index: 60;
    overflow-y: auto;
}
html[data-gaya="modern"] header > div.container,
html[data-gaya="modern"] header > div {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px;
    height: 100%;
}
html[data-gaya="modern"] header h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em;
    padding: 0 4px;
}
html[data-gaya="modern"] header h1 span {
    display: block;
    margin-top: 3px;
    padding: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
}
html[data-gaya="modern"] header nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    space-x: 0;
}
html[data-gaya="modern"] header nav a {
    display: block;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}
html[data-gaya="modern"] header nav a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-gaya="modern"] header nav a.bg-amber-700,
html[data-gaya="modern"] header nav a.underline {
    background: #ccfbf1 !important;
    color: #0f766e !important;
    font-weight: 600 !important;
}

/* sub-menu tetap di atas area isi */
html[data-gaya="modern"] .bg-amber-200\/70 {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 20px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

/* ---------- KONTRAS TEKS ---------- */
html[data-gaya="modern"] .text-slate-400 { color: #94a3b8 !important; }
html[data-gaya="modern"] .text-slate-500 { color: #64748b !important; }
html[data-gaya="modern"] .text-slate-600 { color: #475569 !important; }
html[data-gaya="modern"] .text-slate-700 { color: #334155 !important; }
html[data-gaya="modern"] .text-slate-800,
html[data-gaya="modern"] .text-slate-900 { color: #0f172a !important; }

html[data-gaya="modern"] label { color: #334155 !important; font-weight: 600; }
html[data-gaya="modern"] table tbody td { color: #334155 !important; }
html[data-gaya="modern"] table tbody td.font-bold,
html[data-gaya="modern"] table tbody td strong { color: #0f172a !important; }

html[data-gaya="modern"] input,
html[data-gaya="modern"] select,
html[data-gaya="modern"] textarea {
    color: #0f172a !important;
    font-weight: 500;
}
html[data-gaya="modern"] input::placeholder,
html[data-gaya="modern"] textarea::placeholder { color: #94a3b8 !important; }

/* teks kecil dibuat lebih terbaca */
html[data-gaya="modern"] .text-\[10px\],
html[data-gaya="modern"] .text-\[11px\] {
    font-size: 11.5px !important;
    color: #475569 !important;
}

/* tombol: teks putih jelas */
html[data-gaya="modern"] button.bg-amber-600,
html[data-gaya="modern"] button.bg-amber-700,
html[data-gaya="modern"] button.bg-emerald-600,
html[data-gaya="modern"] button.bg-blue-600,
html[data-gaya="modern"] button.bg-red-600 { color: #ffffff !important; }

/* layar kecil: kembali ke menu atas */
@media (max-width: 900px) {
    html[data-gaya="modern"] body { padding-left: 0; }
    html[data-gaya="modern"] header {
        position: static;
        width: auto;
        height: auto;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    html[data-gaya="modern"] header nav {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 4px !important;
    }
}

/* perbaikan: label kecil di sidebar */
html[data-gaya="modern"] header h1 > span,
html[data-gaya="modern"] header h1 span.bg-amber-800,
html[data-gaya="modern"] header h1 span.bg-amber-900 {
    display: block !important;
    background: transparent !important;
    color: #64748b !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    margin-top: 3px;
}

/* ============================================================
   KONTRAS & IKON MENU
   ============================================================ */

/* ikon menu utama */
html[data-gaya="modern"] header nav a {
    display: flex !important;
    align-items: center;
    gap: 9px;
    color: #1e293b !important;
    font-weight: 500 !important;
}
html[data-gaya="modern"] header nav a svg {
    opacity: .75;
    flex: none;
}
html[data-gaya="modern"] header nav a.bg-amber-700 svg,
html[data-gaya="modern"] header nav a.underline svg { opacity: 1; }
html[data-gaya="modern"] header nav a span { display: inline; }

/* sub-menu lebih jelas */
html[data-gaya="modern"] .bg-amber-200\/70 button {
    color: #475569 !important;
    font-weight: 600 !important;
}
html[data-gaya="modern"] .bg-amber-200\/70 button.bg-amber-700 {
    color: #ffffff !important;
}

/* tabel: judul & isi lebih tegas */
html[data-gaya="modern"] table thead th {
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-gaya="modern"] table tbody td { color: #1e293b !important; }

/* teks bantuan / keterangan */
html[data-gaya="modern"] .text-slate-400 { color: #64748b !important; }
html[data-gaya="modern"] .italic { color: #475569 !important; }

/* angka & nilai penting */
html[data-gaya="modern"] .font-mono { color: #0f172a !important; }

/* teks di atas latar berwarna lembut */
html[data-gaya="modern"] .bg-amber-100 .text-slate-500,
html[data-gaya="modern"] .bg-amber-100\/40 .text-slate-500,
html[data-gaya="modern"] .bg-amber-100\/60 .text-slate-500 { color: #475569 !important; }

/* keterangan kecil di bawah field */
html[data-gaya="modern"] .text-\[10px\],
html[data-gaya="modern"] .text-\[11px\] { color: #475569 !important; }

/* ringkasan: label vs nilai */
html[data-gaya="modern"] .text-slate-500.font-bold { color: #334155 !important; }

/* ============================================================
   MODE GELAP + GAYA MODERN  (perbaikan kontras)
   ============================================================ */
html[data-gaya="modern"][data-mode="gelap"] body {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
}
html[data-gaya="modern"][data-mode="gelap"] header {
    background-color: #111c2e !important;
    border-right-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] header h1 { color: #f1f5f9 !important; }
html[data-gaya="modern"][data-mode="gelap"] header h1 > span,
html[data-gaya="modern"][data-mode="gelap"] header h1 span.bg-amber-800 { color: #94a3b8 !important; }

html[data-gaya="modern"][data-mode="gelap"] header nav a { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] header nav a:hover {
    background-color: #1f2b3e !important;
    color: #ffffff !important;
}
html[data-gaya="modern"][data-mode="gelap"] header nav a.bg-amber-700,
html[data-gaya="modern"][data-mode="gelap"] header nav a.underline {
    background-color: #0f766e !important;
    color: #ccfbf1 !important;
}

/* kartu & panel */
html[data-gaya="modern"][data-mode="gelap"] .bg-white {
    background-color: #111c2e !important;
    border-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-200\/70 {
    background-color: #111c2e !important;
    border-bottom-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-100,
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-100\/40,
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-100\/50,
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-100\/60,
html[data-gaya="modern"][data-mode="gelap"] .bg-amber-50 { background-color: #16233a !important; }

/* teks */
html[data-gaya="modern"][data-mode="gelap"] label { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-slate-400 { color: #94a3b8 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-slate-500 { color: #94a3b8 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-slate-600 { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-slate-700 { color: #e2e8f0 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-slate-800,
html[data-gaya="modern"][data-mode="gelap"] .text-slate-900 { color: #f8fafc !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-amber-900,
html[data-gaya="modern"][data-mode="gelap"] .text-amber-800,
html[data-gaya="modern"][data-mode="gelap"] .text-amber-700 { color: #5eead4 !important; }
html[data-gaya="modern"][data-mode="gelap"] .text-\[10px\],
html[data-gaya="modern"][data-mode="gelap"] .text-\[11px\] { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] .italic { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] .font-mono { color: #f1f5f9 !important; }
html[data-gaya="modern"][data-mode="gelap"] h2,
html[data-gaya="modern"][data-mode="gelap"] h3 { color: #f1f5f9 !important; border-color: #1f2b3e !important; }

/* tabel */
html[data-gaya="modern"][data-mode="gelap"] table thead tr,
html[data-gaya="modern"][data-mode="gelap"] table thead tr.bg-amber-200 {
    background-color: #0f1a2b !important;
}
html[data-gaya="modern"][data-mode="gelap"] table thead th {
    color: #94a3b8 !important;
    border-bottom-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] table tbody td {
    color: #e2e8f0 !important;
    border-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] table tbody tr { background-color: #111c2e !important; }
html[data-gaya="modern"][data-mode="gelap"] table tbody tr:hover { background-color: #16233a !important; }

/* input */
html[data-gaya="modern"][data-mode="gelap"] input,
html[data-gaya="modern"][data-mode="gelap"] select,
html[data-gaya="modern"][data-mode="gelap"] textarea {
    background-color: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html[data-gaya="modern"][data-mode="gelap"] input::placeholder,
html[data-gaya="modern"][data-mode="gelap"] textarea::placeholder { color: #94a3b8 !important; }

/* menu di dalam halaman (Persiapan, Pengaturan) */
html[data-gaya="modern"][data-mode="gelap"] .w-full.text-left.p-2.rounded {
    color: #cbd5e1 !important;
}
html[data-gaya="modern"][data-mode="gelap"] .w-full.text-left.p-2.rounded:hover {
    background-color: #1f2b3e !important;
    color: #ffffff !important;
}
html[data-gaya="modern"][data-mode="gelap"] .w-full.text-left.p-2.rounded.bg-amber-600,
html[data-gaya="modern"][data-mode="gelap"] .w-full.text-left.p-2.rounded.bg-emerald-600 {
    background-color: #0f766e !important;
    color: #ccfbf1 !important;
}

/* ============================================================
   HALAMAN LOGIN — tanpa menu samping, benar-benar di tengah
   ============================================================ */
html[data-gaya="modern"] body.login-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f1f5f9 !important;
}
html[data-gaya="modern"] body.login-page > div {
    width: 100%;
    max-width: 384px;
    margin: 0 auto;
}
html[data-gaya="modern"] body.login-page h1 {
    color: #0f766e !important;
    font-size: 30px !important;
    letter-spacing: -0.02em;
}
html[data-gaya="modern"] body.login-page h1 + p,
html[data-gaya="modern"] body.login-page p { color: #64748b !important; }
html[data-gaya="modern"] body.login-page .bg-amber-50 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
    padding: 26px !important;
}
html[data-gaya="modern"] body.login-page h2 {
    text-transform: none !important;
    font-size: 15px !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em;
}
html[data-gaya="modern"] body.login-page label { color: #334155 !important; font-weight: 600; }
html[data-gaya="modern"] body.login-page input {
    border-color: #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
}
html[data-gaya="modern"] body.login-page input:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .18) !important;
}
html[data-gaya="modern"] body.login-page button {
    border-radius: 10px !important;
    padding: 11px !important;
    font-size: 13px !important;
    letter-spacing: .02em;
}

/* mode gelap untuk halaman login */
html[data-gaya="modern"][data-mode="gelap"] body.login-page { background-color: #0b1220 !important; }
html[data-gaya="modern"][data-mode="gelap"] body.login-page .bg-amber-50 {
    background-color: #111c2e !important;
    border-color: #1f2b3e !important;
}
html[data-gaya="modern"][data-mode="gelap"] body.login-page h2 { color: #f1f5f9 !important; }
html[data-gaya="modern"][data-mode="gelap"] body.login-page label { color: #cbd5e1 !important; }
html[data-gaya="modern"][data-mode="gelap"] body.login-page input {
    background-color: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* ============================================================
   MENU BERKELOMPOK
   ============================================================ */
.nav-judul {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 800;
    color: #fde68a;
    background: rgba(255, 255, 255, .16);
    padding: 2px 7px;
    border-radius: 3px;
    margin-right: 7px;
    white-space: nowrap;
}
.nav-grup { display: inline-flex; align-items: center; gap: 4px; }

/* mode samping (modern) */
html[data-gaya="modern"] header nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
    width: 100%;
}
html[data-gaya="modern"] .nav-grup {
    display: block !important;
    width: 100%;
    margin-bottom: 2px;
}
html[data-gaya="modern"] .nav-judul {
    display: block;
    background: transparent !important;
    color: #94a3b8 !important;
    padding: 13px 10px 5px !important;
    margin: 0 !important;
    letter-spacing: .09em;
    font-size: 9px;
    border-radius: 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 3px !important;
}
html[data-gaya="modern"] .nav-grup:first-child .nav-judul {
    padding-top: 2px !important;
    border-bottom: none;
    margin-bottom: 0 !important;
}
html[data-gaya="modern"][data-mode="gelap"] .nav-judul {
    color: #64748b !important;
    border-bottom-color: #1f2b3e;
}

/* layar kecil: menu kembali ke atas, grup ditandai */
@media (max-width: 900px) {
    html[data-gaya="modern"] .nav-judul { display: none; }
}