/* ============================================================
   DWICELL APP — tampilan adaptif (ponsel · tablet · desktop)
   Dimuat PALING AKHIR supaya menimpa aturan dasar.
   Titik ubah:
     ≤359px  ponsel kecil
     ≥600px  ponsel lebar
     ≥768px  tablet  (menu samping muncul, menu bawah hilang)
     ≥1200px desktop lebar
     ≥1600px desktop sangat lebar
   ============================================================ */

/* ---------- 0. ponsel kecil ---------- */
@media (max-width:359px){
  :root{--nav-h:62px}
  #view{padding-left:12px; padding-right:12px}
  .qquick{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .nota{padding:14px}
  .btn{padding:11px 14px}
}

/* ---------- 1. ponsel lebar (≥600px) ---------- */
@media (min-width:600px){
  #view{padding-left:20px; padding-right:20px}

  /* kartu angka & menu menyesuaikan lebar, tidak dipaksa 2 kolom */
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .menu-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .spec-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .grid-2{grid-template-columns:1fr 1fr}

  /* daftar HP: berubah jadi kumpulan kartu (2 kolom ke atas) */
  .card.pad-0:has(> .stok-item){
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px;
    padding:0; background:transparent; border:0; box-shadow:none; overflow:visible;
  }
  .card.pad-0:has(> .stok-item) > .stok-item{
    border:1px solid var(--line-2); border-radius:var(--r-lg); background:#fff;
    box-shadow:var(--sh-1); padding:12px;
  }
  .card.pad-0:has(> .stok-item) > .stok-item:hover{box-shadow:var(--sh-2); border-color:var(--blue-100)}

  .login-wrap{max-width:430px}
  .login-brand img{width:262px}
  .login-tag{font-size:14px}
  .modal{max-width:560px}
  .results{max-height:340px}
  .hero{padding:20px 22px}
  .hero h2{font-size:21px}
  .nota{padding:22px}
  .scan-stage{aspect-ratio:4/3}
  .big-number{font-size:34px}
}

/* ---------- 2. tablet (≥768px): menu samping aktif ---------- */
@media (min-width:768px){
  :root{--nav-h:0px}
  .bottomnav{display:none}

  /* --- sidebar kiri: rapat & padat seperti dashboard lain --- */
  .side{
    display:flex; flex-direction:column; gap:2px; width:212px; flex:0 0 212px;
    background:#fff; border-right:1px solid var(--line); padding:13px 9px 11px;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .side-brand{display:flex; align-items:center; gap:9px; padding:2px 6px 11px; margin-bottom:2px}
  .side-brand>div{min-width:0}
  .side-brand img{width:32px; height:32px; border-radius:10px; flex:0 0 auto}
  .side-nama,.side-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .side-nama{font-size:15px; line-height:1.2}
  .side-sub{font-size:10px; color:var(--muted); font-weight:500; margin-top:1px}
  .side-grp{margin:9px 8px 4px; font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); opacity:.75}
  .side-grp:first-of-type{margin-top:3px}
  .side .nav-item{
    display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px;
    flex:0 0 auto; height:auto; padding:8px 10px; border-radius:9px;
    font-size:13.5px; font-weight:600; color:var(--muted);
    width:100%; position:relative; text-align:left;
  }
  .side .nav-lab{font-size:13.5px; font-weight:600}
  .side .nav-item.on .nav-lab{font-weight:700}
  .side .nav-item:hover{background:var(--bg); color:var(--ink)}
  .side .nav-item.on{background:var(--blue-50); color:var(--blue-700); font-weight:700}
  .side .nav-item.on::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:16px; border-radius:0 3px 3px 0; background:var(--blue);
  }
  .side .nav-ico svg{width:18px; height:18px}
  .side-foot{margin-top:auto; border-top:1px solid var(--line-2); padding-top:9px}
  .side-user{gap:9px; padding:2px 2px 8px}
  .side-user .avatar{width:30px; height:30px; font-size:12px}
  .side-foot .btn{font-size:12.5px; padding:7px 10px}

  #view{padding:0 22px 34px; max-width:1180px}
  .topbar-in{padding:10px 22px}
  .toast-root{bottom:24px}
  .fab{bottom:24px; right:24px}
  .modal-bg{align-items:center; padding:24px}
  .modal{border-radius:var(--r-xl)}
  .sticky-cta{position:static; padding:16px 0 0; background:none}

  /* dua kolom berdampingan untuk halaman yang berpasangan */
  .grid-wide{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
  .grid-dash{display:grid; grid-template-columns:1fr; gap:16px; align-items:start}

  /* daftar HP dua kolom */
  .card.pad-0:has(> .stok-item){grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* ---------- 3. tablet lanskap / laptop kecil (≥1000px) ---------- */
@media (min-width:1000px){
  .split{display:grid; grid-template-columns:1fr 330px; gap:16px; align-items:start}
  .grid-dash{grid-template-columns:1.15fr .85fr}
  .bars{height:150px}
  .card.pad-0:has(> .stok-item){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}

/* ---------- 5. PONSEL SEMPIT (≤599px) ---------- */
@media (max-width:599px){
  /* nota harus muat penuh tanpa membuat layar bergeser */
  .nota-wrap{padding:14px}
  .nota-table{table-layout:fixed}
  .nota-table th,.nota-table td{padding:8px 5px; font-size:11.5px}
  .nota-table td.mono,.nota-table th.mono{word-break:break-all; overflow-wrap:anywhere}
  .nota-table th:nth-child(1),.nota-table td:nth-child(1){width:37%}
  .nota-table th:nth-child(2),.nota-table td:nth-child(2){width:33%}
  .nota-table th:nth-child(3),.nota-table td:nth-child(3){width:15%}
  .nota-table th:nth-child(4),.nota-table td:nth-child(4){width:15%}
}

@media (min-width:1200px){
  /* grafik batang jangan melar terlalu lebar */
  .bars{max-width:880px}
}
@media (min-width:1200px){
  .side{width:224px; flex:0 0 224px; padding:15px 10px 13px}
  .side-nama{font-size:15px}
  .side .nav-item{font-size:14px; padding:9px 11px}
  .side .nav-ico svg{width:19px; height:19px}

  #view{max-width:1340px; padding:0 30px 46px}
  .topbar-in{max-width:1340px; padding:12px 30px}

  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .menu-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .card{padding:18px}
  .card.pad-0{padding:0}
  .hero{padding:24px 26px}
  .hero h2{font-size:23px}
  .hero .sub{font-size:13.5px}
  .kpi .v{font-size:22px}
  .bars{height:176px}
  .bar{max-width:40px}
  .big-number{font-size:38px}
  .spec-grid{grid-template-columns:repeat(4,1fr)}

  /* daftar HP tiga kolom */
  .card.pad-0:has(> .stok-item){grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
  .card.pad-0:has(> .stok-item) > .stok-item{padding:14px}

  .login-wrap{max-width:440px}
  .login-brand img{width:274px}
  .login-bg{align-items:center; padding:44px 18px}
  .split{grid-template-columns:1fr 380px}
  .nota{max-width:760px; margin:0 auto}
  .scan-stage{aspect-ratio:16/10; max-height:520px}
}

/* ---------- 5. desktop sangat lebar (≥1600px) ---------- */
@media (min-width:1600px){
  #view{max-width:1520px}
  .topbar-in{max-width:1520px}
  .card.pad-0:has(> .stok-item){grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* ---------- 6. layar pendek (HP tidur/landscape) ---------- */
@media (max-height:460px) and (orientation:landscape){
  .login-bg{min-height:auto; padding:20px 16px 32px}
  .login-brand img{width:200px}
  .scan-stage{aspect-ratio:16/9; max-height:60vh}
}

/* ---------- 7. layar sentuh: area sentuh lebih nyaman ---------- */
@media (hover:none){
  .side .nav-item{min-height:38px}
  .bottomnav .nav-item{min-height:44px}
  .stok-item{padding-top:13px; padding-bottom:13px}
}