/* =========================================================
   Wusmail - tema gelap (dipakai index.php, inbox.php, admin.php)
   Aktif lewat atribut html[data-theme="dark"] yang diatur theme.js
   ========================================================= */

/* ----- ikon tombol tema: tampilkan ikon mode tujuan (gelap -> matahari, terang -> bulan) ----- */
[data-theme-toggle] .t-light,
[data-theme-toggle] .t-dark { display:none; }
html[data-theme="dark"] [data-theme-toggle] .t-light { display:block; }
html:not([data-theme="dark"]) [data-theme-toggle] .t-dark { display:block; }

/* tombol tema bergaya kotak (dipakai di halaman login) */
.theme-btn {
    display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:11px;
    border:1px solid var(--line); background:var(--panel, #fff); color:var(--muted); cursor:pointer;
    transition:background .18s, color .18s, border-color .18s;
}
.theme-btn:hover { color:var(--ink); border-color:var(--line2); }

/* toast kecil saat tema diganti */
.theme-toast {
    position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:500;
    padding:10px 16px; border-radius:12px; background:#0f2347; color:#fff;
    font:700 14px/1.3 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    box-shadow:0 18px 40px -12px rgba(15,35,71,.5); pointer-events:none;
    transform:translate(-50%,16px); opacity:0; transition:opacity .22s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.theme-toast.show { opacity:1; transform:translate(-50%,0); }

/* ================= PALET GELAP ================= */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg:#151515; --rail:#181818; --panel:#1b1b1b; --panel2:#222222; --raised:#222222;
    --soft:rgba(255,255,255,.06);
    --hover:rgba(255,255,255,.05); --active:rgba(255,255,255,.09);
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
    --text:#d0d0d0; --ink:#f2f2f2; --muted:#a6a6a6; --faint:#7c7c7c;
    --blue-text:#8ab4ff;
    --signal:#7dd3fc; --signal-bg:rgba(125,211,252,.10); --signal-line:rgba(125,211,252,.35);
    --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
    --tex:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px);
    --tex-soft:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.3px);
}
/* latar halaman: titik netral, tanpa cahaya biru */
html[data-theme="dark"] body { background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px); background-size:22px 22px; }
html[data-theme="dark"] .reader { background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px); background-size:22px 22px; }

/* ---- permukaan yang tadinya putih ---- */
html[data-theme="dark"] .form,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .pillars li,
html[data-theme="dark"] .seg { background:var(--panel); }
html[data-theme="dark"] .form { box-shadow:0 30px 60px -34px rgba(0,0,0,.75); }
html[data-theme="dark"] .dialog { box-shadow:0 30px 70px -20px rgba(0,0,0,.7); }
html[data-theme="dark"] .pillars li { box-shadow:0 10px 24px -18px rgba(0,0,0,.7); }

/* ---- login (index.php) ---- */
html[data-theme="dark"] .side { background:linear-gradient(160deg, #1d1d1d 0%, #151515 70%); }
html[data-theme="dark"] .side::before { background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); }
html[data-theme="dark"] .inp:focus-within { background:var(--panel2); }
html[data-theme="dark"] .tg,
html[data-theme="dark"] .foot b { color:var(--blue-text); }
html[data-theme="dark"] .alert { background:rgba(220,38,38,.12); border-color:rgba(248,113,113,.40); color:#fca5a5; }
html[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 1000px #222222 inset; -webkit-text-fill-color:#eaf0fc; caret-color:#eaf0fc;
}

/* ---- inbox (inbox.php) ---- */
html[data-theme="dark"] .group-label { background:rgba(27,27,27,.92); }
html[data-theme="dark"] .mail.active .unread-dot { box-shadow:0 0 0 3px #2a2a2a; }
html[data-theme="dark"] .reader-head { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(27,27,27,.65)); }
html[data-theme="dark"] .reader-body.is-text { background:var(--panel); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
/* isi email HTML tetap terang agar terbaca (email dirancang untuk latar putih) */
html[data-theme="dark"] .reader-body.is-html { box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
html[data-theme="dark"] .badge-n { background:#0284c7; }
html[data-theme="dark"] .btn-copy { background:#0369a1; }
html[data-theme="dark"] .toast.success { background:rgba(16,185,129,.14); border-color:rgba(52,211,153,.40); color:#6ee7b7; }
html[data-theme="dark"] .toast.error { background:rgba(220,38,38,.14); border-color:rgba(248,113,113,.40); color:#fca5a5; }

/* ---- admin (admin.php) ---- */
html[data-theme="dark"] .top { background:rgba(21,21,21,.85); }
html[data-theme="dark"] .diag { color:#fcd34d; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); }
html[data-theme="dark"] .diag code { color:#fde68a; }
html[data-theme="dark"] .d-err { color:#fca5a5; background:rgba(220,38,38,.12); border-color:rgba(248,113,113,.40); }

/* tooltip & toast tetap kontras di latar gelap */
html[data-theme="dark"] .theme-toast { background:#2e2e2e; }

/* =========================================================
   Tambahan: halaman error (404/403/410/50x) dan landing.php
   ========================================================= */
html[data-theme="dark"] .card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .mock,
html[data-theme="dark"] .float,
html[data-theme="dark"] .final .box,
html[data-theme="dark"] .hero .tag { background:var(--panel); }
html[data-theme="dark"] .card { box-shadow:0 30px 60px -34px rgba(0,0,0,.75); }
html[data-theme="dark"] .back { color:var(--blue-text); }

/* landing */
html[data-theme="dark"] .nav { background:rgba(21,21,21,.85); }
html[data-theme="dark"] footer { background:rgba(27,27,27,.7); }
html[data-theme="dark"] .mock-bar { background:linear-gradient(180deg, rgba(255,255,255,.05), var(--panel)); }
html[data-theme="dark"] .cta-row .btn.ghost { background:var(--panel); }
html[data-theme="dark"] .cta-row .btn.ghost:hover { background:var(--panel2); }
html[data-theme="dark"] h1 em { background-image:linear-gradient(135deg, #7db4ff, #3b82f6); }
html[data-theme="dark"] .grid .card:hover,
html[data-theme="dark"] .card:hover { box-shadow:0 26px 50px -28px rgba(0,0,0,.8); }

/* ---- sisa elemen yang tadinya kebiruan -> netral (aksen biru tetap untuk tombol/tautan) ---- */
html[data-theme="dark"] .overlay { background:rgba(0,0,0,.65); }
html[data-theme="dark"] .copy-toast,
html[data-theme="dark"] .toast:not(.success):not(.error) { background:#2e2e2e; }
html[data-theme="dark"] .rail-btn[data-tip]::after { background:#2e2e2e; border-color:#2e2e2e; }
html[data-theme="dark"] .list-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .reader-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); }
html[data-theme="dark"] .bar-row .track,
html[data-theme="dark"] .lg-col.zero .b { background:rgba(255,255,255,.08); }
html[data-theme="dark"] .stat.hero { background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(59,130,246,.12)); }
html[data-theme="dark"] .mock .row:first-of-type { background:rgba(255,255,255,.04); }