/* ══════════════════════════════════════════════════════════════
   Toko Baju — tampilan gelap bergaya Sentry
   ══════════════════════════════════════════════════════════════ */

:root{
  --latar:#1F1633; --latar-dalam:#150F23;
  --kartu:#251C3D; --kartu-tinggi:#2D2348;
  --garis:#362D59; --garis-terang:#584674;
  --ungu:#6A5FC1; --ungu-redup:#79628C; --ungu-pekat:#422082;
  --hijau:#C2EF4E; --koral:#FFB287; --merah-muda:#FA7FAA;
  --merah:#F87171; --kuning:#FBBF24; --biru:#60A5FA;
  --teks:#FFFFFF; --redup:#A89FC4; --redup-2:#8F86AD;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  font-family:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.5;
  background:var(--latar);color:var(--teks);
  -webkit-font-smoothing:antialiased;
  padding-bottom:78px;
}

/* ── bilah atas ── */
.atas{
  position:sticky;top:0;z-index:50;
  background:var(--latar-dalam);
  border-bottom:1px solid var(--garis);
  padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.atas h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px}
.atas .sub{
  font-size:10px;font-weight:600;color:var(--redup-2);margin-top:3px;
  text-transform:uppercase;letter-spacing:.25px;
}

/* ── menu bawah ── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--latar-dalam);
  border-top:1px solid var(--garis);
  display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  box-shadow:0 -4px 20px rgba(10,7,18,.5);
}
.nav a{
  flex:1;text-align:center;padding:6px 2px;
  color:var(--redup-2);text-decoration:none;
  font-size:9.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2px;
}
.nav a .ik{display:block;font-size:19px;margin-bottom:2px;line-height:1}
.nav a.aktif{color:var(--hijau)}

/* ── isi ── */
.isi{padding:12px}

/* ── kartu ── */
.kartu{
  background:var(--kartu);
  border:1px solid var(--garis);
  border-radius:12px;padding:13px;margin-bottom:10px;
  box-shadow:rgba(0,0,0,.1) 0 10px 15px -3px;
}
.kartu h2{margin:0 0 4px;font-size:14px;font-weight:600}
.kartu .ket{font-size:11px;color:var(--redup-2);margin-bottom:11px}

/* ── angka ringkas ── */
.angka{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.kotak{
  background:var(--kartu);border:1px solid var(--garis);
  border-radius:12px;padding:13px;position:relative;overflow:hidden;
  box-shadow:rgba(0,0,0,.1) 0 10px 15px -3px;
}
.kotak::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;
               background:var(--ungu)}
.kotak.hijau::before{background:var(--hijau)}
.kotak.kuning::before{background:var(--koral)}
.kotak.merah::before{background:var(--merah)}
.kotak.biru::before{background:var(--biru)}
.kotak .l{font-size:9.5px;color:var(--redup-2);text-transform:uppercase;
          letter-spacing:.25px;font-weight:600;margin-bottom:6px}
.kotak .n{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.15}
.kotak .k{font-size:10.5px;color:var(--redup-2);margin-top:4px}

/* ── isian ── */
input,select,textarea{
  font-family:inherit;
  background:var(--kartu);border:1px solid var(--garis);
  color:var(--teks);border-radius:8px;padding:12px;
  font-size:16px;width:100%;
}
input::placeholder{color:var(--redup-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ungu);
  box-shadow:rgba(0,0,0,.15) 0 2px 10px inset;
}
label{
  display:block;margin:10px 0 5px;
  font-size:10px;font-weight:600;color:var(--redup-2);
  text-transform:uppercase;letter-spacing:.25px;
}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ── tombol ── */
.btn{
  padding:13px;border-radius:12px;
  background:var(--ungu-redup);border:1px solid var(--garis-terang);
  color:var(--teks);font-family:inherit;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2px;
  box-shadow:rgba(0,0,0,.1) 0 1px 3px 0 inset;width:100%;
}
.btn:active{box-shadow:rgba(0,0,0,.18) 0 .5rem 1.5rem}
.btn:disabled{opacity:.5}
.btn.abu{background:rgba(255,255,255,.06);border-color:var(--garis);
         color:var(--redup)}
.btn.utama{background:var(--hijau);border-color:var(--hijau);
           color:var(--latar-dalam)}
.btn.kecil{padding:9px 12px;font-size:11px;width:auto}

/* ── tabel ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;color:#B0A9CC;text-transform:uppercase;
   letter-spacing:.25px;padding:0 0 8px;font-weight:600}
td{padding:9px 0;border-top:1px solid var(--garis)}
td.n{text-align:right;font-weight:600;white-space:nowrap}
.urut{display:inline-flex;width:19px;height:19px;border-radius:5px;
      background:rgba(106,95,193,.20);color:var(--ungu);font-size:10px;
      font-weight:700;align-items:center;justify-content:center;margin-right:8px}
.nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      max-width:140px;display:inline-block;vertical-align:middle}

/* ── penanda ── */
.tanda{display:inline-block;padding:3px 8px;border-radius:999px;
       font-size:10px;font-weight:700;text-transform:uppercase;
       letter-spacing:.2px}
.t-hijau{background:rgba(194,239,78,.14);color:var(--hijau)}
.t-merah{background:rgba(248,113,113,.14);color:var(--merah)}
.t-kuning{background:rgba(251,191,36,.14);color:var(--kuning)}
.t-ungu{background:rgba(106,95,193,.20);color:var(--ungu)}
.t-biru{background:rgba(96,165,250,.14);color:var(--biru)}

/* ── grafik batang ── */
.batang{display:flex;align-items:stretch;gap:4px;height:100px;
        padding-top:6px;overflow-x:auto}
.batang .b{flex:1;min-width:24px;max-width:60px;
           background:rgba(106,95,193,.20);border-radius:4px 4px 0 0;
           position:relative;align-self:flex-end;height:100%}
.batang .b i{position:absolute;inset:auto 0 0 0;background:var(--ungu);
             border-radius:4px 4px 0 0;display:block}
.sumbu{display:flex;justify-content:space-between;font-size:9.5px;
       color:var(--redup-2);margin-top:6px;text-transform:uppercase;
       letter-spacing:.25px;font-weight:600}

/* ── saringan ── */
.saring{display:flex;gap:6px;margin-bottom:11px;overflow-x:auto;
        padding-bottom:2px;-webkit-overflow-scrolling:touch}
.saring button{
  flex:0 0 auto;padding:10px 15px;min-height:36px;
  border:1px solid var(--garis);background:var(--kartu);
  border-radius:999px;font-size:11px;font-weight:600;color:var(--redup);
  white-space:nowrap;font-family:inherit;
  text-transform:uppercase;letter-spacing:.2px;
}
.saring button.aktif{background:var(--ungu-redup);color:var(--teks);
                     border-color:var(--garis-terang);font-weight:700}

/* ── daftar baris ── */
.baris{
  background:var(--kartu);border:1px solid var(--garis);
  border-radius:11px;padding:12px;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
}
.baris .kiri{flex:1;min-width:0}
.baris .nm{font-weight:600;font-size:14px;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.baris .kd{font-size:10px;color:var(--redup-2);margin-top:2px;
           text-transform:uppercase;letter-spacing:.25px;font-weight:600}
.baris .hg{font-size:13.5px;color:var(--hijau);font-weight:700;margin-top:4px}
.baris .kanan{text-align:right;flex:0 0 auto}

/* ── dialog ── */
.tirai{position:fixed;inset:0;z-index:95;display:none;
       background:rgba(10,7,18,.8);backdrop-filter:blur(4px);
       align-items:flex-end}
.tirai.buka{display:flex}
.dialog{
  background:var(--latar-dalam);border-top:1px solid var(--garis);
  width:100%;border-radius:18px 18px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom)) 16px;
  max-height:90vh;overflow-y:auto;
  box-shadow:rgba(0,0,0,.5) 0 -10px 40px;
}
.dialog h3{margin:0 0 4px;font-size:17px;font-weight:600}
.dialog .ket{font-size:12px;color:var(--redup-2);margin-bottom:12px}
.dialog .btn{margin-top:14px}

/* ── pesan ── */
.salah{background:rgba(248,113,113,.10);color:var(--merah);
       border:1px solid rgba(248,113,113,.28);
       padding:10px 12px;border-radius:8px;font-size:13px;
       margin-top:10px;display:none}
.salah.tampil{display:block}
.sukses{background:rgba(194,239,78,.10);color:var(--hijau);
        border:1px solid rgba(194,239,78,.28);
        padding:10px 12px;border-radius:8px;font-size:13px;
        margin-top:10px;display:none}
.sukses.tampil{display:block}

.kosong{text-align:center;padding:26px 16px;color:var(--redup-2);
        font-size:13px}
.muat{text-align:center;padding:44px;color:var(--redup-2)}

/* ── tombol tambah mengambang ── */
.tambah{
  position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:70;width:54px;height:54px;border-radius:50%;
  background:var(--hijau);color:var(--latar-dalam);border:none;
  font-size:28px;font-weight:700;font-family:inherit;
  box-shadow:0 4px 20px rgba(194,239,78,.35);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.tambah:active{transform:scale(.94)}