/* ============================================================
   DWICELL APP — tambahan gaya (menu, dasbor angka, nota, scan)
   ============================================================ */

/* ---------- navigasi ---------- */
.nav-item,.navbtn{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted-2); font-size:10.5px; font-weight:700}
.nav-item.on,.navbtn.on{color:var(--blue)}
.nav-ico{display:flex; align-items:center; justify-content:center; height:22px}
.nav-ico svg{width:21px; height:21px}
/* penanda jumlah pendaftar yang menunggu persetujuan (menu Lainnya) */
.nav-item[data-nav="#/lainnya"] .nav-ico{position:relative}
.nav-dot{position:absolute; top:-7px; right:-12px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--amber,#F59E0B); color:#fff; font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px #fff}
.nav-lab{letter-spacing:-.1px}
.side-nama{font-weight:800; font-size:15px; letter-spacing:-.3px}
.side-sub{font-size:10.5px; color:var(--muted); font-weight:500}
.side-user{display:flex; align-items:center; gap:10px; padding:6px 4px 10px}
@media (min-width:768px){
  .side .nav-item{display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:11px; padding:11px 12px; border-radius:12px; font-size:14px; color:var(--muted); font-weight:600}
  .side .nav-item:hover{background:var(--bg); color:var(--ink)}
  .side .nav-item.on{background:var(--blue-50); color:var(--blue-700)}
  .side .nav-ico svg{width:20px; height:20px}
}

/* ---------- angka & kartu informasi ---------- */
.avatar-lg{width:52px; height:52px; font-size:17px}
.stat{display:flex; flex-direction:column; gap:5px}
.stat-ico,.ico-bulat{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.stat-lab{font-size:11.5px; color:var(--muted); font-weight:650}
.stat-val{font-size:clamp(14px,4.1vw,18.5px); font-weight:800; letter-spacing:-.4px; white-space:nowrap; font-variant-numeric:tabular-nums}
.stok-count{font-size:20px; font-weight:850; color:var(--blue-700); letter-spacing:-.6px; white-space:nowrap}
.ta-center{text-align:center}
.ta-r{text-align:right}
.hero-total{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.hero-angka{font-size:clamp(19px,5.4vw,25px); font-weight:850; letter-spacing:-.7px; line-height:1.2; white-space:nowrap; max-width:100%; font-variant-numeric:tabular-nums}
.hero-total .small{font-size:12.5px}
.kotak-total{background:var(--bg); border:1px dashed var(--line); border-radius:var(--r); padding:10px 12px}
.kotak-total .kr{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:2px 0}
.kotak-total .kr b{color:var(--ink); font-weight:750}
.bulan-pick{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:8px 10px; box-shadow:var(--sh-1)}
.bulan-pick .inp{min-height:40px; padding:8px 12px}

/* ---------- menu lain ---------- */
.menu-ico{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.menu-title{font-weight:700; font-size:13.5px; letter-spacing:-.2px}
.menu-sub{font-size:11.5px; color:var(--muted)}
.li-model{cursor:pointer}
.li-model .stok-count{margin-right:2px}
.hc-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2)}
.hc-item:last-child{border-bottom:0}
.hasil-cari{margin-top:12px}
.rank-no{width:26px; height:26px; border-radius:8px; background:var(--blue-50); color:var(--blue-700); font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center}
.rank-qty{font-weight:800; color:var(--blue-700); font-size:12.5px; white-space:nowrap}

/* ---------- pilih HP & metode bayar ---------- */
.hp-pilih{display:flex; gap:12px; align-items:center; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-lg); padding:12px}
.hp-pilih img{width:46px; height:58px; object-fit:contain}
.metode-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.metode{padding:10px 6px; border:1px solid var(--line); border-radius:var(--r); background:#fff; text-align:center; font-size:12.5px; font-weight:650; color:var(--muted)}
.metode.on{border-color:var(--blue); background:var(--blue-50); color:var(--blue-700); box-shadow:0 0 0 1px var(--blue) inset}
.metode svg{display:block; margin:0 auto 5px}
.ico-scan{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--blue); background:var(--blue-50); border:1px solid var(--blue-100)}

/* ---------- nota ---------- */
.nota-wrap{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:18px; margin-top:12px}
.nota-logo{width:46px; height:46px; border-radius:12px; object-fit:cover}
.nota-table{width:100%; border-collapse:collapse; font-size:12.5px}
.nota-table th{background:var(--bg); text-align:left; padding:9px 8px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; border-radius:8px}
.nota-table td{padding:9px 8px; border-bottom:1px solid var(--line-2); vertical-align:top}
.nota-table td.r,.nota-table th.r{text-align:right}
.nota-total{display:flex; flex-direction:column; gap:2px; font-size:13px; padding:3px 0; color:var(--muted)}
.nota-total>.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%}
.nota-total b{color:var(--ink)}
.nota-total.besar{font-size:16px; border-top:1px solid var(--line); margin-top:6px; padding-top:8px}
.nota-total.besar b{color:var(--blue-700); font-weight:850; font-size:19px}
.nota-aksi{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
.kotak-info{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); font-size:12.5px; line-height:1.55}
.prev-slide{aspect-ratio:8/3; border-radius:var(--r); overflow:hidden; border:1px dashed var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; text-align:center; padding:6px}
.prev-slide img{width:100%; height:100%; object-fit:cover; border-radius:calc(var(--r) - 2px)}
.nota-batal{background:#fff; border:1px solid var(--red-100); color:#B91C1C; border-radius:var(--r); padding:12px; font-weight:650; display:flex; align-items:center; justify-content:center; gap:8px}
@media (max-width:400px){.nota-aksi{grid-template-columns:1fr 1fr}.metode-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   DWICELL APP — tambahan revisi: kategori brand, struk/nota rapi,
   nota service HP + halaman progres pelanggan
   ============================================================ */

/* ---------- kategori brand HP (dropdown) ---------- */
.brand-pick{display:flex; gap:8px}
.brand-pick .inp{background:#fff; box-shadow:var(--sh-1); border-color:var(--line-2); font-weight:600}

/* ---------- struk / nota: angka tidak bertumpuk ---------- */
.nota-judul{font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--muted); text-align:center; margin:2px 0 10px}
.nota-produk{background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); padding:11px 12px}
.nota-produk .np-nama{font-weight:750; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere}
.nota-produk .np-sub{font-size:11.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere}
.nota-produk .np-line{display:flex; gap:10px; justify-content:space-between; align-items:baseline; font-size:12px; margin-top:6px}
.nota-produk .np-line span{color:var(--muted); flex:0 0 auto}
.nota-produk .np-line b{font-weight:650; text-align:right; word-break:break-word; overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.nota-rinci{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.nota-rinci .nr{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px}
.nota-rinci .nr span{color:var(--muted); min-width:0; overflow-wrap:anywhere; line-height:1.35}
.nota-rinci .nr b{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:13px; flex:0 0 auto}
.nota-rinci .nr.total{border-top:1px dashed var(--line); margin-top:4px; padding-top:9px; align-items:center}
.nota-rinci .nr.total span{color:var(--ink); font-weight:750; font-size:14px; letter-spacing:-.2px}
.nota-rinci .nr.total b{color:var(--blue-700); font-weight:850; font-size:19px; letter-spacing:-.6px}
@media (max-width:360px){
  .nota-rinci .nr b{font-size:12.5px}
  .nota-rinci .nr.total b{font-size:17px}
}

/* ---------- nota: keterangan HP tukar tambah + catatan penjualan ---------- */
.nota-rinci .nr-ket{display:flex; flex-direction:column; gap:3px; margin:-2px 0 2px 10px; padding-left:9px;
  border-left:2px solid var(--blue-100); font-size:11.5px; color:var(--muted); line-height:1.4}
.nota-rinci .nr-ket span{overflow-wrap:anywhere}
.nota-rinci .nr-ket b{color:var(--ink)}
.nota-catatan{margin-top:12px; background:var(--amber-50); border:1px solid var(--amber-100);
  border-radius:var(--r); padding:10px 12px}
.nota-catatan .nc-judul{font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#B45309; margin-bottom:4px}
.nota-catatan .nc-isi{font-size:12.5px; color:#78350F; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap}
@media print{.nota-catatan{background:#fff; border-color:#ddd}.nota-catatan .nc-isi{color:#000}}

/* ---------- tahap pengerjaan service ---------- */
.stepper{display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; min-width:0; max-width:100%}
.stepper::-webkit-scrollbar{display:none}
.stepper .step{flex:1 0 auto; min-width:62px; text-align:center}
.stepper .step-dot{width:24px; height:24px; margin:0 auto 5px; border-radius:50%; background:#F1F5F9; color:var(--muted); font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.stepper .step.on:not(.now) .step-dot{background:var(--green-50); color:#15803D; border-color:var(--green-100)}
.stepper .step.on .step-dot{background:var(--blue-50); color:var(--blue-700); border-color:var(--blue-100)}
.stepper .step.on:not(.now) .step-dot{background:var(--green-50); color:#15803D; border-color:var(--green-100)}
.stepper .step.now .step-dot{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50)}
.stepper .step-lab{font-size:10.5px; font-weight:650; color:var(--muted)}
.stepper .step.now .step-lab{color:var(--blue-700)}

/* ---------- bagikan tautan progres ---------- */
.link-box{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px dashed var(--line); border-radius:var(--r); padding:10px 12px; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.link-box svg{flex:0 0 auto; color:var(--blue)}

/* ---------- halaman pelanggan (lacak progres) ---------- */
#screen-lacak{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
.lacak-head{display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1)}
.ambil-box{display:flex; gap:10px; align-items:center; background:var(--amber-50); border:1px solid var(--amber-100); color:#B45309; border-radius:var(--r); padding:11px 12px}
.ambil-box.siap{background:var(--green-50); border-color:var(--green-100); color:#15803D}

/* ---------- cetak: hanya struk/nota yang tercetak ---------- */
@media print{
  body.mode-cetak .bottomnav, body.mode-cetak .side, body.mode-cetak .topbar,
  body.mode-cetak .btn, body.mode-cetak .fab, body.mode-cetak .no-print,
  body.mode-cetak .sticky-cta{display:none !important}
  body.mode-cetak #view>*:not(.nota-wrap){display:none !important}
  body.mode-cetak .nota-wrap{box-shadow:none !important; border:0 !important; padding:0 !important; margin:0 !important; max-width:none}
}

/* ---------- tombol tengah menonjol (lingkaran premium) ---------- */
.bottomnav{overflow:visible}
.bottomnav::after{content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.45),transparent)}
.bottomnav .nav-tengah{justify-content:flex-end; padding-bottom:4px; position:relative; overflow:visible}
.bottomnav .nav-tengah .nav-ico{position:absolute; top:-32px; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(150deg,#5AA7FF 0%,var(--blue) 48%,var(--violet) 100%); color:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 24px rgba(37,99,235,.42), 0 0 0 5px #fff;
  transition:transform .18s ease, box-shadow .18s ease}
.bottomnav .nav-tengah .nav-ico svg{width:26px; height:26px}
.bottomnav .nav-tengah .nav-lab{color:var(--blue-700); font-weight:800}
.bottomnav .nav-tengah:active .nav-ico{transform:translateY(-2px) scale(.95)}
.bottomnav .nav-tengah.on .nav-ico{box-shadow:0 14px 28px rgba(37,99,235,.55), 0 0 0 5px #fff, 0 0 0 9px rgba(37,99,235,.14)}