/* ============================================================
   DWICELL APP — tampilan per halaman
   ============================================================ */

/* ---------- 1. LOGIN (konsep baru: bersih, logo tengah, tab pil) ---------- */
.login-bg{
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:30px 18px 44px;
  background:linear-gradient(180deg,#E8F0FE 0%, #F6F9FF 40%, #FFFFFF 100%);
}
.login-wrap{width:100%; max-width:398px}
.login-brand{text-align:center; margin:4px 0 20px}
.login-brand img{width:238px; margin:0 auto 10px}
.login-tag{color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; padding:0 4px}
.login-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#EDF1F7; border-radius:999px; padding:6px; margin-bottom:18px}
.ltab{border-radius:999px; padding:11px 0; font-size:15px; font-weight:700; color:var(--muted); transition:background .18s,color .18s,box-shadow .18s}
.ltab.on{background:#fff; color:var(--blue-600); box-shadow:0 3px 10px rgba(15,23,42,.10)}
.login-form{background:transparent; border:0; box-shadow:none; padding:0}
.inp-bulat{height:54px; border-radius:999px; padding-left:50px; border:1.5px solid var(--line); background:#fff; width:100%; font-size:15px}
.inp-bulat::placeholder{color:var(--muted-2)}
.inp-bulat:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.inp-icon .inp-bulat{padding-left:50px}
.login-lupa{text-align:right; margin:0 6px 16px}
.login-lupa button{color:var(--blue-600); font-weight:750; font-size:14px}
.btn-masuk{height:54px; border-radius:14px; font-size:16.5px; font-weight:750; letter-spacing:.2px; box-shadow:0 10px 22px rgba(37,99,235,.30)}
.btn-masuk2{height:54px; border-radius:14px; font-size:15.5px; font-weight:700}
.login-note{color:var(--muted); font-size:13px; text-align:center; margin:14px 4px 0; line-height:1.6}
.login-legal{color:var(--muted); font-size:13px; text-align:center; line-height:1.75; margin:22px 4px 0}
.llink{color:var(--blue-600); font-weight:750; font-size:13px; padding:0}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted-2); font-size:12.5px; margin:16px 0}
.divider::before,.divider::after{content:''; height:1px; background:var(--line); flex:1}
.btn-google{background:#fff; border:1px solid var(--line); color:var(--ink-2); font-weight:650}
.btn-google:hover{background:#FAFBFF}
.login-foot{text-align:center; color:var(--muted); font-size:12.5px; margin-top:18px}
.legal-isi{color:var(--ink-2); font-size:13.5px; line-height:1.7; max-height:52vh; overflow:auto; margin-bottom:14px}
.legal-isi b{color:var(--ink)}
.legal-isi li{margin-bottom:6px}
/* ---------- 2. BERANDA ---------- */
.hero{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#4338CA 100%); color:#fff;
  border-radius:var(--r-xl); padding:16px 18px; margin-bottom:14px; box-shadow:0 10px 26px rgba(37,99,235,.28);
}
.hero h2{margin:0 0 4px; font-size:19px; letter-spacing:-.4px}
.hero .sub{font-size:12.5px; opacity:.92}
.hero .date{display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:rgba(255,255,255,.18); padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:600}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.stat{background:#fff; border-radius:var(--r-lg); padding:13px; border:1px solid var(--line-2); box-shadow:var(--sh-1); display:flex; gap:11px; align-items:flex-start}
.stat .ico{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.stat .ico.green{background:var(--green-50); color:var(--green)}
.stat .ico.red{background:var(--red-50); color:var(--red)}
.stat .ico.amber{background:var(--amber-50); color:#D97706}
.stat .ico.blue{background:var(--blue-50); color:var(--blue)}
.stat .lbl{font-size:11.5px; color:var(--muted); font-weight:600}
.stat .val{font-size:clamp(13px,3.9vw,17.5px); font-weight:800; letter-spacing:-.5px; margin-top:1px; white-space:nowrap; font-variant-numeric:tabular-nums}
.stat .val.sm{font-size:clamp(11.5px,3.3vw,15px); white-space:nowrap}
.bars{display:flex; align-items:flex-end; gap:8px; height:132px; padding:6px 2px 0}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end}
.bar{width:100%; max-width:34px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#60A5FA,#2563EB); min-height:5px; transition:height .3s ease}
.bar-col.on .bar{background:linear-gradient(180deg,#2563EB,#1E40AF)}
.bar-val{font-size:9px; color:var(--muted-2); font-weight:600; white-space:nowrap}
.bar-lab{font-size:10.5px; color:var(--muted); font-weight:600}
/* ---------- menu pintas premium (beranda) ---------- */
.qquick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 14px}
.qquick a{position:relative; background:#fff; border:1px solid var(--line-2); border-radius:18px; padding:12px 6px 11px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:-.1px; line-height:1.15;
  box-shadow:var(--sh-1); transition:transform .16s ease, box-shadow .16s ease}
.qquick a:hover{box-shadow:0 10px 22px -12px rgba(16,24,40,.45)}
.qquick a:active{transform:scale(.96)}
.qquick .qpr{display:block; width:50px; height:50px; border-radius:16px;
  filter:drop-shadow(0 7px 11px var(--sc, rgba(29,78,216,.3)))}
@media (max-width:359px){
  .qquick .qpr{width:44px; height:44px}
  .qquick a{font-size:10.5px; padding:10px 4px}
}

/* ---------- 3. STOK ---------- */
.stok-item{display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line-2)}
.stok-item:last-child{border-bottom:0}
.stok-item:hover{background:#FAFBFE}
.stok-img{width:52px; height:68px; object-fit:contain; background:var(--bg); border-radius:11px; padding:4px; flex:0 0 auto}
.stok-info{flex:1; min-width:0}
.stok-name{font-weight:700; font-size:14.5px; letter-spacing:-.2px}
.stok-imei{font-size:11.5px; color:var(--muted); word-break:break-all; margin-top:2px}
.stok-price{font-weight:750; color:var(--blue-700); font-size:14.5px; margin-top:4px}
.stok-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.searchbar{position:relative; margin-bottom:12px}
.searchbar .inp{padding-left:42px; background:#fff; box-shadow:var(--sh-1); border-color:var(--line-2)}
.searchbar>svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted-2)}
.searchbar.bar-scan{display:flex; align-items:stretch; gap:8px}
.searchbar.bar-scan .inp{flex:1 1 auto; min-width:0}
.searchbar.bar-scan .iconbtn{width:46px; height:auto; min-height:46px; flex:0 0 46px; border-radius:var(--r); border-color:var(--line-2); box-shadow:var(--sh-1); background:#fff}
.searchbar.bar-scan .iconbtn:hover{background:var(--bg)}

/* ---------- 5. PENJUALAN ---------- */
.pick-hp{display:flex; gap:12px; align-items:center; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-lg); padding:12px}
.pick-hp img{width:46px; height:58px; object-fit:contain}
.pick-hp .x{margin-left:auto; color:var(--muted); width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.result-box{position:relative}
.results{position:absolute; z-index:35; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); max-height:290px; overflow:auto}
.results .li{padding:10px 12px}
.totals{background:var(--bg); border-radius:var(--r); padding:12px 14px; border:1px dashed var(--line)}
.totals .row{justify-content:space-between; font-size:13.5px; padding:3px 0; color:var(--muted)}
.totals .row b{color:var(--ink)}
.totals .row.grand{font-size:15.5px; padding-top:8px; border-top:1px solid var(--line); margin-top:6px}
.totals .row.grand b{color:var(--blue-700); font-size:clamp(15px,4.4vw,18px); font-weight:800; white-space:nowrap}

/* ---------- 6. NOTA ---------- */
.nota{background:#fff; border-radius:var(--r-lg); padding:18px; border:1px solid var(--line-2); box-shadow:var(--sh-1)}
.nota-head{display:flex; gap:12px; align-items:center; border-bottom:2px dashed var(--line); padding-bottom:12px; margin-bottom:12px}
.nota-head img.logo{width:44px; height:44px; border-radius:11px}
.nota-head img.wordmark{width:150px}
.nota-toko b{font-size:16.5px; letter-spacing:-.3px; display:block}
.nota-toko span{font-size:11.5px; color:var(--muted); display:block}
.nota-meta{font-size:12.5px; display:grid; grid-template-columns:auto 1fr; gap:3px 8px; margin-bottom:12px}
.nota-meta .k{color:var(--muted)}
table.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
table.tbl th{background:var(--bg); text-align:left; padding:9px 8px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
table.tbl td{padding:9px 8px; border-bottom:1px solid var(--line-2); vertical-align:top}
table.tbl tfoot td{border-bottom:0; padding:5px 8px}
.nota-foot{text-align:center; margin-top:14px; font-size:12px; color:var(--muted); white-space:pre-line; border-top:1px dashed var(--line); padding-top:12px}

/* ---------- 7. DETAIL ---------- */
.detail-top{display:flex; gap:14px; align-items:center}
.detail-top img{width:78px; height:100px; object-fit:contain; background:var(--bg); border-radius:14px; padding:6px}
.dl{display:grid; grid-template-columns:1fr auto; gap:9px 14px; font-size:13.5px}
.dl .k{color:var(--muted)}
.dl .v{font-weight:650; text-align:right; word-break:normal; overflow-wrap:break-word}
.dl .v.mono{font-size:12.5px; word-break:break-all}
.spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.spec{background:var(--bg); border-radius:var(--r); padding:10px 12px}
.spec .k{font-size:11px; color:var(--muted); font-weight:600}
.spec .v{font-weight:700; font-size:13.5px; margin-top:2px}

/* ---------- 8. RIWAYAT ---------- */
.timeline{position:relative; padding-left:30px}
.timeline::before{content:''; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute; left:-30px; top:1px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 0 4px #fff}
.tl-dot.green{background:var(--green)}.tl-dot.red{background:var(--red)}.tl-dot.blue{background:var(--blue)}.tl-dot.slate{background:var(--muted-2)}
.tl-title{font-weight:700; font-size:14px}
.tl-time{font-size:11.5px; color:var(--muted); margin-top:1px}
.tl-note{font-size:12.5px; color:var(--ink-2); margin-top:5px; background:var(--bg); border-radius:10px; padding:8px 10px; line-height:1.6}

/* ---------- 9. LAPORAN ---------- */
.kpi{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1)}
.kpi .k{font-size:11.5px; color:var(--muted); font-weight:600}
.kpi .v{font-size:19px; font-weight:800; letter-spacing:-.6px; margin-top:3px}
.kpi .v.blue{color:var(--blue-700)}
.kpi .v.green{color:var(--green)}
.rank{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.rank:last-child{border-bottom:0}
.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 .nm{flex:1; font-weight:650; font-size:13.5px}
.rank .qt{font-weight:800; color:var(--blue-700)}
.month-nav{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:10px 12px; box-shadow:var(--sh-1)}
.month-nav b{flex:1; text-align:center; font-size:14.5px}

/* ---------- lain-lain ---------- */
.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.menu-item{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:15px; box-shadow:var(--sh-1); display:flex; gap:12px; align-items:center}
.menu-item .ico{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff}
.menu-item .t{font-weight:700; font-size:13.5px; letter-spacing:-.2px}
.menu-item .s{font-size:11.5px; color:var(--muted)}
.ico.g-blue{background:linear-gradient(160deg,#3B82F6,#2563EB)}
.ico.g-green{background:linear-gradient(160deg,#34D399,#059669)}
.ico.g-violet{background:linear-gradient(160deg,#A78BFA,#7C3AED)}
.ico.g-amber{background:linear-gradient(160deg,#FBBF24,#D97706)}
.ico.g-red{background:linear-gradient(160deg,#F87171,#DC2626)}
.ico.g-teal{background:linear-gradient(160deg,#2DD4BF,#0D9488)}
.ico.g-slate{background:linear-gradient(160deg,#94A3B8,#475569)}
.user-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line-2)}
.user-row:last-child{border-bottom:0}
.scan-stage{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#0F172A; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center}
.scan-stage video{width:100%; height:100%; object-fit:cover}
.scan-frame{position:absolute; inset:17% 8%; border-radius:16px; box-shadow:0 0 0 100vmax rgba(15,23,42,.35)}
.scan-frame::before,.scan-frame::after{content:''; position:absolute; width:30px; height:30px; border:3px solid #fff; border-radius:6px}
.scan-frame::before{left:-2px; top:-2px; border-right:0; border-bottom:0}
.scan-frame::after{right:-2px; bottom:-2px; border-left:0; border-top:0}
.laser{position:absolute; left:12%; right:12%; height:2px; background:linear-gradient(90deg,transparent,#60A5FA,transparent); animation:scan 2.1s linear infinite}
@keyframes scan{0%{top:15%}50%{top:84%}100%{top:15%}}
.scan-aksi{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.scan-aksi .btn{flex:1 1 46%}
#baris-zoom input[type=range]{width:100%; accent-color:var(--blue-600); height:26px}
.btn.on{background:var(--blue-600); color:#fff; border-color:var(--blue-600)}
.big-number{font-size:clamp(22px,6.4vw,30px); font-weight:850; letter-spacing:-1px; white-space:nowrap; font-variant-numeric:tabular-nums}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted)}
.legend i{width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px}
.bar-h{display:flex; align-items:center; gap:10px; font-size:12.5px; padding:5px 0}
.bar-h .nm{width:112px; color:var(--muted); flex:0 0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-h .track{flex:1; height:9px; background:var(--line-2); border-radius:999px; overflow:hidden}
.bar-h .fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#60A5FA,#2563EB)}
.sticky-cta{position:fixed; left:0; right:0; bottom:var(--nav-h); padding:12px 16px 32px; background:linear-gradient(180deg,rgba(244,247,252,0),#F4F7FC 40%); z-index:45}
.inp.salah, .inp.salah:focus{border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.16) !important; background:#fff6f6 !important}
@media (min-width:768px){.sticky-cta{position:static; padding:16px 0 0; background:none}}

.li-right .btn-sm + .btn-sm{margin-left:6px}