/* =====================================================================
   RESPONSIVE — Tablet-first (dioptimalkan untuk tab 7–8", 2 orientasi)
   Additive only: tidak menyentuh business logic / printer / payload.
   Breakpoints:
     >=1201px           : desktop (layout asli, tak diubah)
     880–1200px         : tablet landscape → 2 kolom (menu + keranjang)
     <=879px            : tablet portrait & ponsel → keranjang jadi bottom-sheet
   ===================================================================== */

/* Elemen bottom-sheet disembunyikan di layar lebar (default) */
.cart-peek{display:none}
.cart-backdrop{display:none}

/* ---------- LOGO / BRAND (aset asli Ngegrill) ---------- */
.login-logo{margin:0 auto 16px;display:grid;place-items:center}
.login-logo img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(196,0,0,.22))}
.khead .brand{gap:9px}
.khead .brand-logo{height:30px;width:auto;display:block}
.khead .brand-pos{font-size:10px;font-weight:800;letter-spacing:2px;opacity:.92;
  background:rgba(255,255,255,.18);padding:3px 7px;border-radius:7px;line-height:1}
.sidebar .sb-logo{height:27px;width:auto;max-width:100%;display:block}
.sidebar .sb-sub{display:block;font-size:9px;font-weight:700;letter-spacing:2px;opacity:.85;margin-top:3px}
.preview .pv-logo img{width:52px;height:52px;object-fit:contain;margin:0 auto;display:block}

/* Target sentuh minimum lebih nyaman untuk jari (tablet) */
@media (pointer:coarse){
  .cat{padding:11px 20px}
  .qty button{width:38px;height:38px}
  .payopt{height:52px}
  .fchip{padding:12px 18px}
}

/* ---------- TABLET LANDSCAPE (880–1200px): tetap 2 kolom, dirapatkan ---------- */
@media (min-width:880px) and (max-width:1200px){
  .kwrap{grid-template-columns:1fr 348px}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .kleft .ktop{padding:14px 16px 8px}
  .kleft .kmenu{padding:6px 16px 20px}
  .khead{gap:12px;padding:0 14px}
  .khead .stat{gap:16px}
  .rekap-grid{grid-template-columns:1fr 300px}
  .kasbox{grid-template-columns:repeat(2,1fr)}
}

/* ---------- HEADER kompak untuk layar sempit ---------- */
@media (max-width:879px){
  .khead{gap:10px;padding:0 12px}
  .khead .who{display:none}
  .khead .bt{font-size:17px}
  .khead .stat{gap:14px;margin-right:2px}
  .khead .flame{width:32px;height:32px}
  /* status: ikon + titik warna saja (hemat ruang) */
  .chip-st{gap:5px}
  .chip-st .lb{flex-direction:row;align-items:center}
  .chip-st .lb b{display:none}
  .chip-st .dot{font-size:0;gap:0}
  .chip-st .dot i{width:8px;height:8px}
  .subhead .ht{font-size:17px}
  .pad{padding:16px 16px 24px}
  .khead .brand-logo{height:26px}
}

/* ---------- KASIR: keranjang jadi BOTTOM-SHEET (<=879px) ---------- */
@media (max-width:879px){
  .kwrap{grid-template-columns:1fr}
  .kleft{border-right:none}
  .kleft .kmenu{padding-bottom:96px}        /* ruang untuk peek bar */
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

  #cartPanel{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:86vh;max-height:86vh;z-index:70;
    border-top-left-radius:22px;border-top-right-radius:22px;
    box-shadow:0 -10px 40px rgba(0,0,0,.22);
    transform:translateY(calc(100% - 72px));
    transition:transform .28s var(--ease);will-change:transform;
  }
  #cartPanel.open{transform:translateY(0)}

  /* peek: batang 72px yang SELALU tampil (Total + BAYAR, sesuai mockup sticky-bottom) */
  .cart-peek{display:flex;align-items:center;gap:10px;height:72px;padding:0 14px 0 16px;flex:none;position:relative;
    border-top-left-radius:22px;border-top-right-radius:22px;border-bottom:1px solid var(--line);background:var(--surface)}
  .cart-peek::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:var(--line)}
  .peek-main{flex:1;display:flex;align-items:center;gap:12px;height:100%;min-width:0}
  .pk-ic{position:relative;color:var(--red);display:grid;place-items:center;flex:none}
  .pk-ic svg{width:26px;height:26px}
  .pk-badge{position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
    min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
  .pk-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
  .pk-lbl{font-size:12px;color:var(--text-3);font-weight:700}
  .pk-total{font-size:19px;font-weight:800;color:var(--text)}
  .pk-chev{margin-left:auto;color:var(--text-3);transition:transform .28s var(--ease);flex:none}
  .pk-chev svg{width:22px;height:22px}
  #cartPanel.open .pk-chev{transform:rotate(180deg)}
  .peek-pay{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;
    background:var(--red);color:#fff;font-weight:800;font-size:16px;box-shadow:0 6px 16px rgba(196,0,0,.28)}
  .peek-pay svg{width:20px;height:20px}
  #cartPanel.open .peek-pay{display:none}   /* saat terbuka pakai tombol BAYAR di footer */

  .cart-backdrop{position:fixed;inset:0;background:rgba(8,10,14,.42);z-index:69;
    opacity:0;pointer-events:none;transition:opacity .28s}
  .cart-backdrop.show{display:block;opacity:1;pointer-events:auto}
}

/* ---------- REKAP responsif (<=879px) ---------- */
@media (max-width:879px){
  .rekap-grid{grid-template-columns:1fr}
  .stat4{grid-template-columns:repeat(2,1fr)}
  .kasbox{grid-template-columns:1fr}
  .infobar{grid-template-columns:1fr;gap:8px}
  .preview{position:static;order:-1}       /* preview struk di atas saat sempit */
  .savebar{padding:10px 16px}
}

/* ---------- RIWAYAT: tabel bisa digeser horizontal (<=879px) ---------- */
@media (max-width:879px){
  #rivHost{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .otable{min-width:640px}
  .pghead{flex-direction:column}
  .searchpill{width:100%}
  .searchpill input{width:100%}
  .actgrid{grid-template-columns:1fr 1fr}
}

/* ---------- SETTINGS device modal nyaman di layar sempit ---------- */
@media (max-width:879px){
  .modal.wide{max-width:94vw}
}

/* ---------- ADMIN: sidebar jadi rel ikon di tablet portrait ---------- */
@media (max-width:1000px){
  .admin{grid-template-columns:76px 1fr}
  .sidebar .sb-brand{justify-content:center;padding:16px 6px 14px}
  .sidebar .sb-sub{display:none}
  .sidebar .sb-logo{height:22px}
  .sb-item{position:relative;justify-content:center;gap:0;padding:13px 0}
  .sb-item span:not(.sb-badge){display:none}
  .sb-item .sb-badge{position:absolute;top:5px;right:12px;margin:0}
  .sb-user{justify-content:center;padding:12px 8px}
  .sb-user > div{display:none}
  .astat{grid-template-columns:repeat(2,1fr)}
  .arow2,.arow2b{grid-template-columns:1fr}
  .admin-top{flex-wrap:wrap;padding:16px 18px 6px}
  .admin-body{padding:12px 18px 26px}
  .admin-main .panel{overflow-x:auto}
  .admin-main .mini{min-width:520px}
}
@media (max-width:600px){
  .admin{grid-template-columns:64px 1fr}
  .astat{grid-template-columns:1fr}
  .setgrid{grid-template-columns:repeat(2,1fr)}
}