/* =============================================================
   Digiza.id — Kerangka Dashboard v2
   Satu tema (tanpa theme-customizer bawaan template).
   Melanjutkan bahasa visual landing-v2.
   ============================================================= */

:root {
    --blue:#2b7fff; --blue-600:#1d6fe8; --blue-700:#1657c4;
    --blue-50:#eff6ff; --blue-100:#dbeafe;

    --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
    --paper:#ffffff; --paper-2:#f6f8fc; --line:#e8edf4;

    --green:#16a34a; --green-bg:#f0fdf4;
    --amber:#d97706; --amber-bg:#fffbeb;
    --red:#dc2626;   --red-bg:#fef2f2;
    --violet:#8b5cf6;--violet-bg:#f5f3ff;

    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.5rem; --s6:2rem;  --s7:3rem;

    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

    --sh-1:0 1px 3px rgba(15,23,42,.05);
    --sh-2:0 4px 16px -4px rgba(15,23,42,.08);
    --sh-3:0 16px 40px -12px rgba(15,23,42,.14);
    --sh-blue:0 8px 22px -6px rgba(43,127,255,.4);

    --ease:cubic-bezier(.16,1,.3,1);
    --spring:cubic-bezier(.34,1.4,.64,1);

    --sidebar-w:260px;
    --topbar-h:64px;
}

/* =============================== BASE =============================== */
.dz { font-family:var(--font); color:var(--ink); background:var(--paper-2); margin:0; -webkit-font-smoothing:antialiased; }
.dz *, .dz *::before, .dz *::after { box-sizing:border-box; }

/* Aturan dasar elemen dibungkus :where() supaya bobotnya nol — hasilnya
   setara selektor elemen polos (0,0,1), bukan (0,1,1).
   Sebabnya: halaman yang belum diredesign memakai kelas Bootstrap seperti
   .btn-primary (putih di atas biru) atau .card-title. Dengan `.dz a`, aturan
   kita menang dan `color:inherit` menghitamkan teks & ikon yang seharusnya
   putih; `.dz h1..h6` juga memaksa semua judul jadi tebal-hitam.
   Dengan :where(), kelas apa pun menang, sementara elemen polos di kerangka
   v2 tetap kita yang atur — karena berkas ini dimuat setelah style.css,
   jadi pada spesifisitas seri kita tetap unggul. */
:where(.dz) h1, :where(.dz) h2, :where(.dz) h3,
:where(.dz) h4, :where(.dz) h5, :where(.dz) h6 { margin:0; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.3; }
:where(.dz) p { margin:0; color:var(--ink-2); line-height:1.65; }
:where(.dz) a { text-decoration:none; color:inherit; }
:where(.dz) ul { list-style:none; margin:0; padding:0; }
:where(.dz) img { max-width:100%; }
:where(.dz) table { border-collapse:collapse; width:100%; }

/* =============================== SIDEBAR =============================== */
.dz-side {
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:200;
    background:var(--paper); border-right:1px solid var(--line);
    display:flex; flex-direction:column;
    transition:transform .3s var(--ease);
}
.dz-side-top { padding:var(--s5) var(--s5) var(--s4); flex-shrink:0; }

.dz-logo { display:inline-flex; align-items:center; gap:var(--s2); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; min-width:0; }
/* Logo dari pengaturan website. object-fit:contain supaya logo bentuk apa pun
   — kotak, bulat, atau memanjang — tidak terpotong maupun gepeng. */
.dz-logo-img { width:34px; height:34px; border-radius:10px; object-fit:contain; flex-shrink:0; }
/* Lencana cadangan kalau berkas logonya tidak ada */
.dz-logo-mark { width:34px; height:34px; border-radius:10px; background:linear-gradient(140deg,#3b8cff,#1657c4); display:grid; place-items:center; color:#fff; flex-shrink:0; box-shadow:var(--sh-blue); }
.dz-logo-mark[hidden] { display:none; }
.dz-logo-mark svg { width:18px; height:18px; }
/* Nama panjang dipotong, bukan mendorong sidebar melar */
.dz-logo-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Menu */
.dz-nav { flex:1; overflow-y:auto; padding:0 var(--s3) var(--s5); }
.dz-nav::-webkit-scrollbar { width:6px; }
.dz-nav::-webkit-scrollbar-thumb { background:#dbe3ee; border-radius:99px; }
.dz-nav::-webkit-scrollbar-track { background:transparent; }

.dz-grp { font-size:.63rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:var(--s4) var(--s3) var(--s2); }

.dz-link {
    display:flex; align-items:center; gap:var(--s3);
    padding:.6rem var(--s3); border-radius:var(--r-sm);
    font-size:.86rem; font-weight:500; color:var(--ink-2);
    position:relative;
    transition:background .18s var(--ease), color .18s var(--ease);
}
.dz-link svg { width:18px; height:18px; flex-shrink:0; color:var(--ink-3); transition:color .18s; }
.dz-link:hover { background:var(--paper-2); color:var(--ink); }
.dz-link:hover svg { color:var(--blue); }
.dz-link.on { background:var(--blue-50); color:var(--blue); font-weight:600; }
.dz-link.on svg { color:var(--blue); }
/* Penanda tegak di sisi kiri item aktif */
.dz-link.on::before { content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 99px 99px 0; background:var(--blue); }

.dz-tag { margin-left:auto; font-size:.6rem; font-weight:800; padding:.1rem .4rem; border-radius:var(--r-pill); }
.dz-tag-new { background:var(--blue); color:#fff; }
.dz-tag-num { background:var(--red); color:#fff; min-width:18px; text-align:center; }

/* =============================== TOPBAR =============================== */
.dz-main { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

.dz-top {
    position:sticky; top:0; z-index:150; height:var(--topbar-h);
    background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:var(--s3);
    padding:0 var(--s5);
}
.dz-icon-btn {
    width:38px; height:38px; border-radius:var(--r-sm); border:1px solid transparent;
    background:transparent; color:var(--ink-2); cursor:pointer;
    display:grid; place-items:center; flex-shrink:0;
    transition:background .18s, color .18s, border-color .18s;
}
.dz-icon-btn:hover { background:var(--paper-2); color:var(--blue); border-color:var(--line); }
.dz-icon-btn svg { width:19px; height:19px; }
.dz-burger { display:none; }

.dz-top-right { margin-left:auto; display:flex; align-items:center; gap:var(--s3); }

/* Pil saldo */
.dz-balance {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:.45rem .85rem; border-radius:var(--r-pill);
    background:linear-gradient(135deg,#eff6ff,#dbeafe);
    border:1px solid #cfe0f9;
    font-size:.85rem; font-weight:800; color:var(--blue-700);
    white-space:nowrap;
    transition:transform .25s var(--spring), box-shadow .25s var(--ease);
}
.dz-balance:hover { transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(43,127,255,.5); }
.dz-balance svg { width:16px; height:16px; color:var(--blue); }

/* Dropdown profil */
.dz-drop { position:relative; }
.dz-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; cursor:pointer; border:2px solid #fff; box-shadow:var(--sh-1); transition:box-shadow .2s; }
.dz-avatar:hover { box-shadow:0 0 0 3px var(--blue-100); }

.dz-drop-menu {
    position:absolute; right:0; top:calc(100% + 10px); min-width:230px;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-3); padding:var(--s2); z-index:200;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.dz-drop.open .dz-drop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dz-drop-head { padding:var(--s3); border-bottom:1px solid var(--line); margin-bottom:var(--s2); }
.dz-drop-head b { display:block; font-size:.85rem; }
.dz-drop-head span { font-size:.75rem; color:var(--ink-3); }
.dz-drop-menu a {
    display:flex; align-items:center; gap:var(--s3);
    padding:.55rem var(--s3); border-radius:var(--r-sm);
    font-size:.84rem; font-weight:500; color:var(--ink-2);
    transition:background .15s, color .15s;
}
.dz-drop-menu a svg { width:16px; height:16px; color:var(--ink-3); }
.dz-drop-menu a:hover { background:var(--paper-2); color:var(--ink); }
.dz-drop-menu a.danger { color:var(--red); }
.dz-drop-menu a.danger svg { color:var(--red); }
.dz-drop-menu a.danger:hover { background:var(--red-bg); }

/* =============================== KONTEN =============================== */
.dz-body { flex:1; padding:var(--s5); }
.dz-head { margin-bottom:var(--s5); }
.dz-crumb { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-3); margin-bottom:.35rem; }
.dz-crumb svg { width:13px; height:13px; }
.dz-crumb a:hover { color:var(--blue); }
.dz-head h1 { font-size:1.5rem; font-weight:800; }

/* Kartu dasar */
.dz-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.dz-card-h { display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); }
.dz-card-h h3 { font-size:.95rem; font-weight:700; }
.dz-card-h svg { width:18px; height:18px; color:var(--blue); }
.dz-card-h .dz-more { margin-left:auto; font-size:.78rem; font-weight:600; color:var(--blue); }
.dz-card-b { padding:var(--s5); }

/* Tombol */
.dz-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
    font-family:var(--font); font-weight:600; font-size:.85rem;
    padding:.6rem 1.15rem; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
    transition:transform .22s var(--spring), box-shadow .22s var(--ease), background .18s, border-color .18s, color .18s;
}
.dz-btn svg { width:16px; height:16px; }
.dz-btn-primary { background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.dz-btn-primary:hover { background:var(--blue-600); color:#fff; transform:translateY(-2px); }
.dz-btn-ghost { background:#fff; border-color:var(--line); color:var(--ink); }
.dz-btn-ghost:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.dz-btn-block { width:100%; }
.dz-btn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* Footer */
.dz-foot { padding:var(--s5); text-align:center; font-size:.8rem; color:var(--ink-3); border-top:1px solid var(--line); background:#fff; }
.dz-foot .hero-text-gradient { background-image:linear-gradient(90deg,#25a1f4,#f91fa9,#25a1f4); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dz-foot .text-primary { color:var(--blue) !important; }

/* Notifikasi (pengganti alert.php + result.php yang butuh jQuery/Swal) */
.dz-flash {
    display:flex; align-items:flex-start; gap:var(--s3);
    padding:var(--s4); border-radius:var(--r-md); border:1px solid;
    margin-bottom:var(--s4); font-size:.86rem;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    animation:dzFlashIn .35s var(--ease);
}
@keyframes dzFlashIn { from { opacity:0; transform:translateY(-8px); } }
.dz-flash > svg { width:19px; height:19px; flex-shrink:0; margin-top:1px; }
.dz-flash-t { flex:1; min-width:0; }
.dz-flash-t b { display:block; font-weight:700; margin-bottom:.15rem; }
.dz-flash-t div { line-height:1.6; }
.dz-flash-t ul { margin:.35rem 0 0; padding-left:1.1rem; list-style:disc; }
.dz-flash-x { background:none; border:none; cursor:pointer; color:inherit; opacity:.55; padding:2px; flex-shrink:0; }
.dz-flash-x:hover { opacity:1; }
.dz-flash-x svg { width:16px; height:16px; }
.dz-flash-ok   { background:var(--green-bg); border-color:#bbf7d0; color:#166534; }
.dz-flash-bad  { background:var(--red-bg);   border-color:#fecaca; color:#991b1b; }
.dz-flash-warn { background:var(--amber-bg); border-color:#fde68a; color:#92400e; }
.dz-flash-info { background:var(--blue-50);  border-color:#bfdbfe; color:#1e40af; }

/* Overlay sidebar mobile */
.dz-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:190; }
.dz-overlay.on { display:block; }

/* =============================== RESPONSIF =============================== */
/* Tombol buka-tutup hanya berlaku di layar lebar; di bawah 1024px sidebar
   sudah jadi laci yang diatur tombol burger, jadi dua kontrol akan bentrok. */
@media (min-width:1025px) {
    .dz-side-off .dz-side { transform:translateX(-100%); }
    .dz-side-off .dz-main { margin-left:0; }
    .dz-main { transition:margin-left .3s var(--ease); }
}

@media (max-width:1024px) {
    .dz-side { transform:translateX(-100%); box-shadow:var(--sh-3); }
    .dz-side.open { transform:translateX(0); }
    .dz-main { margin-left:0; }
    .dz-burger { display:grid; }
    .dz-toggle { display:none; }
}

@media (max-width:640px) {
    .dz-top { padding:0 var(--s4); gap:var(--s2); }
    .dz-body { padding:var(--s4); }
    .dz-head h1 { font-size:1.25rem; }
    .dz-card-b, .dz-card-h { padding:var(--s4); }
    .dz-balance { font-size:.78rem; padding:.4rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dz-side { transition-duration:.5s; }
}

/* ---------- Panel konfirmasi pesanan ----------
   Tinggal di dalam .dz-flash, jadi warna hijaunya sudah dari induk. */
.dz-ok { margin-top:var(--s3); }

/* Tanpa bingkai sendiri: kalau diberi kotak, hasilnya kartu di dalam kartu
   dan barisnya berhenti sebelum tepi kanan. Sekarang menyatu dengan judul
   notifikasi, memakai lebar penuh, dipisah garis rambut saja. */
.dz-ok-d { margin:0; }
.dz-ok-d > div {
    display:flex; align-items:baseline; gap:var(--s4);
    padding:.45rem 0; border-top:1px solid rgba(22,101,52,.12);
}
.dz-ok-d > div:first-child { border-top:0; padding-top:.2rem; }
.dz-ok-d dt {
    flex:0 0 104px; margin:0;
    font-size:.76rem; font-weight:500; color:inherit; opacity:.7;
}
.dz-ok-d dd {
    margin:0; flex:1; min-width:0;
    font-size:.85rem; font-weight:600;
}
.dz-ok-brk { overflow-wrap:anywhere; }

/* ID pesanan diperlakukan sebagai token yang akan disalin orang */
.dz-ok-id {
    display:inline-block; padding:.1rem .5rem; border-radius:var(--r-sm);
    background:rgba(22,101,52,.12);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.85rem; font-weight:700; letter-spacing:.02em;
}

/* Baris terakhir = yang paling dicari mata. Ditekankan lewat garis yang
   sedikit lebih tegas dan huruf yang lebih besar, bukan blok warna. */
.dz-ok-tot { border-top-width:2px !important; border-top-color:rgba(22,101,52,.25) !important; margin-top:.15rem; }
.dz-ok-tot dt { opacity:.85; font-weight:600; }
.dz-ok-tot dd { font-size:1rem; font-weight:800; }


@media (max-width:640px) {
    .dz-ok-d > div { flex-direction:column; gap:.15rem; }
    .dz-ok-d dt { flex-basis:auto; }
}

/* ---------- Daftar hasil Pesanan Massal ----------
   Satu baris per target, memakai kerangka yang sama dengan .dz-ok-d. */
.dz-rows {
    margin:0; list-style:none; padding:0;
}
.dz-rows li {
    display:flex; align-items:baseline; gap:var(--s4);
    padding:.45rem 0; border-top:1px solid rgba(15,23,42,.1);
}
.dz-rows li:first-child { border-top:0; padding-top:.2rem; }
/* Titik status di depan target — hijau kalau jadi, merah kalau tidak */
.dz-rows li::before {
    content:''; flex-shrink:0; align-self:center;
    width:7px; height:7px; border-radius:50%;
}
.dz-rows li.ok::before  { background:var(--green); }
.dz-rows li.bad::before { background:var(--red); }
.dz-rowt { flex:1; min-width:0; font-size:.82rem; font-weight:600; overflow-wrap:anywhere; }
.dz-rowk { flex-shrink:0; font-size:.76rem; opacity:.8; text-align:right; }
.dz-rows li.bad .dz-rowk { color:var(--red); opacity:1; }

@media (max-width:640px) {
    .dz-rows li { flex-wrap:wrap; }
    .dz-rowk { text-align:left; flex-basis:100%; padding-left:calc(7px + var(--s4)); }
}

/* =============================== PANEL ADMIN ===============================
   Kerangka admin memakai ulang seluruh komponen dz-* dari panel user.
   Yang ditambahkan di sini hanya penanda bahwa ini area admin, supaya orang
   tidak bingung sedang berada di panel mana. */

/* Label di bawah logo */
.dz-adm-tag {
    display:inline-block; margin-top:var(--s2);
    padding:.15rem .5rem; border-radius:var(--r-pill);
    background:var(--violet-bg); color:var(--violet);
    border:1px solid #ddd6fe;
    font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* Avatar admin: inisial nama, bukan foto — tabel admin tidak menyimpan foto */
.dz-adm-av {
    width:38px; height:38px; border-radius:50%; flex-shrink:0; cursor:pointer;
    display:grid; place-items:center; border:none;
    background:linear-gradient(140deg,#a78bfa,#7c3aed); color:#fff;
    font-family:var(--font); font-size:.95rem; font-weight:800;
    box-shadow:var(--sh-1); transition:box-shadow .2s;
}
.dz-adm-av:hover { box-shadow:0 0 0 3px #ede9fe; }
.dz-adm-av:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }

/* Titik penanda ada yang perlu ditangani (tiket masuk / deposit pending) */
.dz-adm-n { position:relative; }
.dz-dot {
    position:absolute; top:7px; right:7px;
    width:8px; height:8px; border-radius:50%;
    background:var(--red); border:2px solid #fff;
}

/* Menu aktif di admin memakai aksen ungu — pembeda cepat dari panel user
   yang biru, tanpa harus membaca judul halaman. */
.dz-adm .dz-link.on { background:var(--violet-bg); color:var(--violet); }
.dz-adm .dz-link.on svg { color:var(--violet); }
.dz-adm .dz-link.on::before { background:var(--violet); }
.dz-adm .dz-link:hover svg { color:var(--violet); }
.dz-adm .dz-crumb a:hover { color:var(--violet); }

/* ---------- Menu admin yang bisa dilipat ----------
   Dikurung ke .dz-adm supaya sidebar panel user tetap datar seperti sekarang.
   Admin punya ~30 menu dalam 8 grup; kalau semua terbuka, daftarnya jauh lebih
   panjang dari layar dan grup paling bawah nyaris tak pernah terlihat. */
.dz-adm .dz-grp-wrap { margin-bottom:2px; }
.dz-adm .dz-grp {
    display:flex; align-items:center; gap:var(--s3); width:100%;
    background:none; border:none; cursor:pointer; font-family:var(--font); text-align:left;
    font-size:.9rem; font-weight:600; letter-spacing:0; text-transform:none;
    color:var(--ink-2); padding:.58rem var(--s3);
    border-radius:var(--r-sm); transition:color .18s, background .18s;
}
.dz-adm .dz-grp > svg { width:18px; height:18px; flex-shrink:0; color:var(--ink-3); transition:color .18s; }
.dz-adm .dz-grp span { flex:1; min-width:0; }
.dz-adm .dz-grp .dz-grp-x { width:15px; height:15px; color:var(--ink-3); transition:transform .25s var(--ease), color .18s; }
.dz-adm .dz-grp:hover { background:var(--paper-2); color:var(--ink); }
.dz-adm .dz-grp:hover > svg, .dz-adm .dz-grp:hover .dz-grp-x { color:var(--violet); }
.dz-adm .dz-grp:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
.dz-adm .dz-grp-wrap.open > .dz-grp { color:var(--ink); font-weight:700; }
.dz-adm .dz-grp-wrap.open > .dz-grp > svg { color:var(--violet); }
.dz-adm .dz-grp-wrap.open > .dz-grp .dz-grp-x { transform:rotate(180deg); }

/* Trik grid 0fr->1fr: melipat halus tanpa perlu tahu tinggi isinya, yang di
   sini memang berbeda-beda tiap grup. */
.dz-adm .dz-grp-b { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s var(--ease); }
.dz-adm .dz-grp-wrap.open > .dz-grp-b { grid-template-rows:1fr; }
.dz-adm .dz-grp-i { overflow:hidden; min-height:0; }

/* Garis panduan menegaskan item di dalamnya anak dari grup di atasnya */
.dz-adm .dz-grp-wrap.open > .dz-grp-b .dz-grp-i {
    margin:2px 0 var(--s2) calc(var(--s3) + 9px);
    padding-left:var(--s3); border-left:1px solid var(--line);
}
.dz-adm .dz-grp-i .dz-link { font-size:.85rem; padding:.44rem var(--s3); gap:var(--s2); }
/* Ikon anak diseragamkan jadi titik: yang membedakan cuma teksnya, dan 30
   ikon berbeda-beda justru bikin kolomnya ramai. */
.dz-adm .dz-grp-i .dz-link svg { width:9px; height:9px; margin:0 3px; stroke-width:3; }
.dz-adm .dz-grp-i .dz-link.on svg { fill:currentColor; }
/* Penanda tegak item aktif menempel ke garis panduan, bukan ke tepi sidebar */
.dz-adm .dz-grp-i .dz-link.on::before { left:calc(var(--s3) * -1 - 1px); }

.dz-adm .dz-link-solo { margin-bottom:var(--s2); }

/* Halaman login admin: sidebar & topbar tidak dirender, jadi konten tidak
   boleh lagi menyisakan ruang 260px untuk sidebar yang tidak ada. */
.dz-adm-tamu .dz-main { margin-left:0; }
.dz-adm-tamu .dz-body { display:flex; align-items:center; justify-content:center; }
.dz-adm-tamu .dz-body > .row { width:100%; }