/* =========================================================
   Diplogs - Tema gelap (nebula · highway · container · aurora)
   Aktif bila <html data-mode="dark">. Memakai komponen yang sama
   dengan app.css; hanya token warna & beberapa permukaan yang diganti.
   ========================================================= */
html[data-mode="dark"] {
    color-scheme: dark;
    --ink: #eef3ff;
    --muted: #a3b3d9;
    --line: rgba(255, 255, 255, .1);
    --glass: rgba(12, 19, 42, .56);
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, .8);
    --blue-50: rgba(79, 141, 255, .14);
    --blue-100: rgba(79, 141, 255, .3);
    --orange-100: rgba(255, 122, 26, .2);
    --orange-600: #ff9a4d;
    --bg-1: #050b1f;
    --bg-2: #08122e;
    --bg-3: #050b1f;
    background: var(--bg-1);
}
html[data-mode="dark"] body {
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
    background-attachment: fixed;
}

/* Teks di atas scene 3D */
html[data-mode="dark"] .hero h1,
html[data-mode="dark"] .hero .lead,
html[data-mode="dark"] .section__head { text-shadow: 0 2px 26px rgba(3, 6, 18, .75); }

/* Permukaan */
html[data-mode="dark"] .glass { border-color: rgba(255, 255, 255, .09); }
html[data-mode="dark"] .nav__inner { background: rgba(8, 14, 34, .6); border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); }
html[data-mode="dark"] .nav.is-scrolled .nav__inner { background: rgba(8, 14, 34, .88); }
html[data-mode="dark"] .nav__links a.is-active { color: #9dbdff; }
html[data-mode="dark"] .nav__toggle span { background: var(--ink); }
html[data-mode="dark"] .btn--ghost { color: #cfe0ff; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
html[data-mode="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] .pill { background: rgba(255, 122, 26, .1); border-color: rgba(255, 122, 26, .35); }
html[data-mode="dark"] .hero__trust b { color: var(--ink); }
html[data-mode="dark"] .chip { background: rgba(255, 255, 255, .05); color: #b9ceff; }
html[data-mode="dark"] .chip:hover { color: #ffb37a; }
html[data-mode="dark"] .footer { background: rgba(4, 8, 22, .82); }
html[data-mode="dark"] .nav__links { --nav-pop: rgba(8, 14, 34, .96); }
html[data-mode="dark"] .motion-toggle,
html[data-mode="dark"] .theme-switch { background: rgba(8, 14, 34, .85); color: var(--ink); border-color: rgba(255, 255, 255, .14); }

/* CTA + form */
html[data-mode="dark"] .cta { background: linear-gradient(135deg, rgba(20, 44, 110, .85), rgba(12, 22, 58, .9)); border: 1px solid rgba(255, 255, 255, .1); }
html[data-mode="dark"] .form { background: rgba(6, 11, 28, .82); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .8); }
html[data-mode="dark"] .form input,
html[data-mode="dark"] .form textarea { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: var(--ink); }
html[data-mode="dark"] .form input::placeholder,
html[data-mode="dark"] .form textarea::placeholder { color: #6b7ba3; }
html[data-mode="dark"] .form input:focus,
html[data-mode="dark"] .form textarea:focus { background: rgba(255, 255, 255, .09); border-color: #5b95ff; box-shadow: 0 0 0 4px rgba(79, 141, 255, .18); }
html[data-mode="dark"] .form .is-invalid { background: rgba(229, 72, 77, .12); }
html[data-mode="dark"] .err { color: #ff8a8e; }
html[data-mode="dark"] .toast { background: #0d1a3d; border: 1px solid rgba(255, 255, 255, .12); }

@media (max-width: 720px) {
    html[data-mode="dark"] .nav__links { background: var(--nav-pop); border: 1px solid rgba(255, 255, 255, .1); }
}

/* ---------- Variasi per tema ---------- */

/* 1. Nebula Network: biru malam, aksen oranye */
html[data-theme="nebula"] { --bg-1: #040a1e; --bg-2: #071236; --bg-3: #040a1e; }
html[data-theme="nebula"] body {
    background:
        radial-gradient(60% 50% at 82% 18%, rgba(255, 122, 26, .12), transparent 70%),
        radial-gradient(70% 60% at 12% 70%, rgba(59, 130, 246, .16), transparent 70%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
    background-attachment: fixed;
}

/* 2. Night Highway: hitam hangat, langit senja */
html[data-theme="highway"] { --bg-1: #05060f; --bg-2: #0a0d26; --bg-3: #17102e; }
html[data-theme="highway"] body {
    background:
        radial-gradient(90% 40% at 50% 100%, rgba(255, 122, 26, .16), transparent 70%),
        linear-gradient(180deg, #03040b 0%, #070a1f 45%, #150f2b 100%);
    background-attachment: fixed;
}

/* 3. Container Grid: slate kebiruan */
html[data-theme="container"] { --bg-1: #060d1c; --bg-2: #0a1830; --bg-3: #060d1c; --glass: rgba(11, 22, 46, .6); }
html[data-theme="container"] body {
    background:
        radial-gradient(50% 45% at 78% 40%, rgba(37, 99, 235, .16), transparent 70%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2) 60%, var(--bg-3));
    background-attachment: fixed;
}

/* 4. Aurora Waves: indigo dalam */
html[data-theme="aurora"] { --bg-1: #040716; --bg-2: #0a0e2c; --bg-3: #050817; }
html[data-theme="aurora"] body {
    background:
        radial-gradient(70% 45% at 30% 0%, rgba(99, 102, 241, .18), transparent 70%),
        radial-gradient(60% 40% at 90% 100%, rgba(255, 122, 26, .1), transparent 70%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
    background-attachment: fixed;
}

/* ---------- Pemilih tema (semua mode) ---------- */
.theme-switch {
    position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid var(--blue-100); background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px); box-shadow: 0 8px 20px -10px rgba(10, 31, 92, .4); color: var(--blue-900);
}
.theme-switch__label { font: 600 12px/1 var(--font); margin-right: 4px; white-space: nowrap; }
.theme-switch button {
    position: relative; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(128, 128, 160, .35); transition: transform .2s;
}
.theme-switch button:hover { transform: scale(1.15); }
.theme-switch button.is-active { border-color: var(--orange-500); transform: scale(1.1); }
@media (max-width: 720px) {
    .theme-switch__label { display: none; }
    .theme-switch { padding: 6px; right: 10px; bottom: 10px; }
    .motion-toggle { left: 10px; bottom: 10px; }
}

/* ---------- Halaman Customer (tema gelap) ---------- */
html[data-mode="dark"] .cus-net td { background: rgba(10, 18, 42, .72); border-color: rgba(255, 255, 255, .1); }
html[data-mode="dark"] .cus-net tr::after { box-shadow: 0 0 0 4px rgba(4, 8, 22, .6), 0 0 14px var(--c); }
html[data-mode="dark"] .cus-net tr.st-active { --c: #4ade80; }
html[data-mode="dark"] .cus-net tr.st-inactive { --c: #6b7ba3; }
html[data-mode="dark"] .cus-tag { background: rgba(79, 141, 255, .16); color: #a9c6ff; }
html[data-mode="dark"] .cus-filter button,
html[data-mode="dark"] .cus-card .dt-paging-button { border-color: rgba(255, 255, 255, .14); color: #cfe0ff; }
html[data-mode="dark"] .cus-filter button.is-active,
html[data-mode="dark"] .cus-card .dt-paging-button.current { color: #fff; }
html[data-mode="dark"] .cus-card .dt-search input,
html[data-mode="dark"] .cus-sort { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--ink); }
html[data-mode="dark"] .cus-sort option { background: #0d1a3d; color: #eef3ff; }
html[data-mode="dark"] .cus-fleet i { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] .cus-badge--active { color: #4ade80; background: rgba(74, 222, 128, .14); }
html[data-mode="dark"] .cus-badge--inactive { color: #9fb0d8; background: rgba(159, 176, 216, .14); }
html[data-mode="dark"] .dummy-note { background: rgba(255, 122, 26, .16); color: #ffb37a; }
html[data-mode="dark"] .cus-card,
html[data-mode="dark"] .cus-stats__grid { background: rgba(9, 15, 36, .74); }

/* ---------- Halaman Penerapan (tema gelap) ---------- */
html[data-mode="dark"] .flow__no { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #9fb0d8; }
html[data-mode="dark"] .flow__steps button.is-active { background: rgba(9, 15, 36, .8); border-color: rgba(255, 255, 255, .14); }
html[data-mode="dark"] .flow__steps button.is-done .flow__no { background: var(--blue-600); color: #fff; }
html[data-mode="dark"] .flow__steps::before { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] .flow__card { background: rgba(9, 15, 36, .78); }
html[data-mode="dark"] .fp { border-color: rgba(255, 255, 255, .14); }
html[data-mode="dark"] .fp.is-on { background: rgba(255, 255, 255, .05); }
html[data-mode="dark"] .fp.is-now { border-color: var(--orange-500); }
html[data-mode="dark"] .fc-track, html[data-mode="dark"] .fc-meter { background: rgba(255, 255, 255, .1); }
@media (max-width: 899px) { html[data-mode="dark"] .flow__steps button { border-color: rgba(255, 255, 255, .12); background: rgba(9, 15, 36, .6); } }

/* Customer: peta, stat, kartu unggulan */
html[data-mode="dark"] .cus-map { background: rgba(9, 15, 36, .74); }
html[data-mode="dark"] .cus-stats__grid b { background: linear-gradient(120deg, #ffb37a, #8db3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-mode="dark"] .cus-stats__grid span { color: #b9c8ea; }
html[data-mode="dark"] .cus-hub__orb { border-color: rgba(141, 179, 255, .5); }
html[data-mode="dark"] .cus-net tr.is-star td { background: linear-gradient(135deg, rgba(255, 138, 42, .18), rgba(79, 141, 255, .12)), rgba(10, 18, 42, .82); }