/* layout cair untuk desktop, tablet, HP. Aturan ini hanya untuk layar;
   ukuran nota dan kwitansi cetak tetap ditangani print.css. */
@media screen {
  html { min-width:0; min-height:100%; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
  body { min-width:0; min-height:100vh; min-height:100dvh; }
  .shell { width:100%; min-height:100vh; min-height:100dvh; }
  .main { flex:1 1 0%; width:calc(100% - 248px); }
  .content { max-width:none; width:100%; min-width:0; flex:1; padding:18px 18px 32px; }
  .content>main { width:100%; min-width:0; }
  .card,.card-h,.card-b,.toolbar,.form-grid,.grid,.pos,.cart-foot,.modal { min-width:0; }
  .grid>* ,.form-grid>* { min-width:0; }
  .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .g-2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .topbar { flex:none; gap:12px; padding-inline:18px; }
  .topbar h1 { flex-shrink:1; }
  .sidebar { max-width:calc(100% - 40px); padding-bottom:env(safe-area-inset-bottom,0px); }
  .sidebar nav { min-height:0; overscroll-behavior:contain; }
  .brand,.loc,.side-foot { flex-shrink:0; }
  .card-h>.toolbar { width:100%; }
  .toolbar>* { min-width:0; max-width:100%; }
  .toolbar>.search { flex:1 1 220px; min-width:0; }
  .toolbar>input { width:auto; flex:1 1 220px; }
  .toolbar>select { flex:0 1 auto; }
  .toolbar>label.f { flex:0 1 auto; }
  .toolbar>label.f input { max-width:100%; }
  input,select,textarea { max-width:100%; }
  input[type=checkbox],input[type=radio] { flex:none; }
  .btn { max-width:100%; }
  .note,.demo-bar,.modal-h h3,.card-h h2,.prof-info { overflow-wrap:anywhere; }
  .kpi .v { white-space:normal; overflow-wrap:anywhere; font-size:clamp(18px,1.5vw,26px); }
  .kpi .l { gap:6px; }
  .rank-i { grid-template-columns:minmax(0,1.4fr) minmax(24px,1fr) minmax(42px,.55fr); }
  .rank-i>span { overflow-wrap:anywhere; }
  .tbl-wrap { width:100%; max-width:100%; min-width:0; overflow:auto; -webkit-overflow-scrolling:touch; }
  .tbl-wrap:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
  .tbl-wrap table { min-width:100%; }
  .pager { flex-wrap:wrap; gap:10px; }
  .pager>div { flex-wrap:wrap; max-width:100%; }
  .pos { grid-template-columns:minmax(0,1fr) clamp(340px,28vw,440px); }
  .pos-list { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
  .pcard { min-width:0; grid-template-columns:60px minmax(0,1fr); }
  .pcard img { width:60px; height:60px; }
  .pcard .pr { flex-wrap:wrap; }
  .cart { top:74px; max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px); }
  .cart-items { min-height:0; flex-shrink:0; }
  .cart-pay { position:static; }
  .pay-m { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pay-m button { min-width:0; font-size:13px; min-height:40px; }
  .more>summary { flex-wrap:wrap; gap:6px; }
  .more>summary small { min-width:0; max-width:100%; }
  #pay-detail { display:flex; flex-direction:column; gap:10px; min-width:0; }
  .pay-cash { grid-template-columns:minmax(0,1fr) auto; }
  .ci-top b { min-width:0; }
  .overlay { min-width:0; overflow:hidden; padding:16px; }
  .modal { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
  .modal-h,.modal-f { flex-shrink:0; }
  .modal-h { gap:10px; }
  .modal-b { min-height:0; min-width:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
  .modal-b .row { display:flex; gap:12px; flex-wrap:wrap; }
  .modal-b .row>label { flex:1 1 180px; min-width:0; }
  .modal-b label.f+label.f,.modal-b .note+label.f { margin-top:10px; }
  .modal-b details { margin-top:14px; }
  .modal-f .btn { white-space:normal; text-align:center; }
  #bon-summary { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px!important; }
  #bon-summary>div { min-width:0; }
  #bon-summary b { overflow-wrap:anywhere; font-size:clamp(16px,1.5vw,22px)!important; }
  #bon-q { flex-basis:260px; }
  .hc { max-width:calc(100vw - 24px); }
  #toasts { max-width:calc(100% - 24px); right:12px; }
  .toast { max-width:100%; overflow-wrap:anywhere; }
}
@media screen and (min-width:1600px) {
  .content { padding:20px 22px 36px; }
  .pos-list { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}
@media screen and (max-width:1100px) {
  .pos { grid-template-columns:minmax(0,1fr); }
  .cart { position:static; max-height:none; overflow:visible; }
  .cart-items { min-height:0; max-height:none; overflow:visible; }
  .cart-pay { position:static; box-shadow:none; }
  .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-2-1 { grid-template-columns:minmax(0,1fr); }
  .stok-main { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .stok-main>label:first-child,.stok-main>.btn { grid-column:1/-1; }
  body[data-page=kasir] .content { padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
  .cart-fab:not([hidden]) { left:calc(248px + 18px); right:18px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); min-width:0; }
  .cart-fab b { min-width:0; overflow-wrap:anywhere; }
}
@media screen and (max-width:860px) {
  .main { margin-left:0; width:100%; }
  .content { padding:14px 12px 28px; }
  .topbar { padding-inline:12px; gap:8px; }
  .topbar h1 { font-size:16px; }
  .g2,.g3,.form-grid { grid-template-columns:minmax(0,1fr); }
  .cart-fab:not([hidden]) { left:12px; right:12px; }
  .form-grid .full { grid-column:1/-1; }
  .sidebar { padding-top:env(safe-area-inset-top,0px); }
  .qris-box { flex-wrap:wrap; }
  .kpi .v { font-size:clamp(18px,3vw,24px); }
}
@media screen and (max-width:600px) {
  html { scroll-padding-top:72px; }
  .content { padding:12px 10px 24px; }
  .card-h { padding:12px; gap:8px; }
  .card-b { padding:12px; }
  .grid,.pos { gap:12px; }
  .toolbar { width:100%; gap:8px; align-items:stretch; }
  .toolbar>.search,.toolbar>input,.toolbar>label.f { flex:1 1 100%; width:100%; }
  .toolbar>select { flex:1 1 135px; width:0; }
  .toolbar>.btn { flex:1 1 130px; white-space:normal; text-align:center; }
  .toolbar>label.f { justify-content:space-between; }
  .toolbar>label.f input { flex:1; width:0!important; }
  .card-h>select { max-width:100%; }
  input,select,textarea { font-size:16px; min-height:42px; }
  input[type=checkbox],input[type=radio] { min-height:0; width:18px; height:18px; }
  .btn { min-height:42px; white-space:normal; text-align:center; padding:9px 12px; font-size:13px; }
  .btn.sm { min-height:38px; padding:7px 10px; font-size:12.5px; }
  .btn.lg { font-size:14px; padding:12px; }
  .icon-btn { min-width:36px; min-height:36px; }
  .tabs { width:100%; }
  .tabs button { flex:1 1 auto; padding:8px 10px; font-size:13px; }
  .kpi { padding:12px; gap:5px; }
  .kpi .l { font-size:10.5px; align-items:flex-start; letter-spacing:.02em; }
  .kpi .v { font-size:clamp(16px,4.5vw,22px); }
  .kpi .s,.kpi .v.io { font-size:12px; }
  .kpi .l>.ic { width:16px; height:16px; }
  #sumrow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px!important; }
  #bon-summary { grid-template-columns:minmax(0,1fr); gap:10px!important; }
  #bon-summary>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  #bon-summary b { font-size:16px!important; text-align:right; }
  #bon-summary .sm-t { font-size:12px; }
  .rank-i { grid-template-columns:minmax(0,1.3fr) minmax(24px,1fr) 50px; gap:8px; font-size:12px; }
  th,td { padding:9px 10px; font-size:12px; }
  .pcell { min-width:180px; gap:8px; }
  .thumb { width:36px; height:36px; }
  .pager { padding:10px 12px; }
  .pager>span { flex-basis:100%; }
  .pager>div { width:100%; justify-content:space-between; }
  .pos-list { padding:10px; gap:8px; }
  .pcard { grid-template-columns:52px minmax(0,1fr); padding:8px; gap:9px; }
  .pcard img { width:52px; height:52px; }
  .pcard .n { font-size:13px; }
  .pcard .pr b { font-size:13px; }
  .pcard .sp { font-size:11.5px; }
  .cart-items { padding:10px; }
  .cart-items .ci { grid-template-columns:minmax(0,1fr); padding:10px; }
  .cart-items .ci-top,.cart-items .ci>.sm-t,.cart-items .ci>div:last-child { grid-column:1; }
  .cart-items .ci-top b { -webkit-line-clamp:2; }
  .cart-items .ci>div:last-child { width:100%; justify-content:space-between; flex-wrap:wrap; }
  .step button { width:36px; height:36px; }
  .step input { width:52px; font-size:16px; min-height:36px; }
  .pay-m { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pay-m button { padding:9px 6px; }
  .pay-cash { grid-template-columns:minmax(0,1fr); gap:8px; }
  .pay-cash .kb { flex-direction:row; justify-content:space-between; align-items:center; }
  .more-b,.sum.cart-pay,.sum.tight { padding-inline:12px; }
  .more-b .row,.sum .row { flex-wrap:wrap; }
  .more-b .row input:not([type=checkbox]),.sum .row input:not([type=checkbox]) { max-width:100%; flex:0 1 140px; }
  .more>summary small { flex-basis:100%; margin-left:0; white-space:normal; }
  .cart-fab:not([hidden]) { left:10px; right:10px; gap:8px; padding:11px 12px; }
  .cart-fab .fab-n { font-size:11px; padding:3px 7px; }
  .cart-fab b { font-size:14px; }
  .cart-fab .fab-go { font-size:11px; }
  .ong-row { grid-template-columns:minmax(0,1fr) minmax(100px,.8fr); }
  .prof-box { flex-wrap:wrap; }
  .qr-img,.qr { max-width:110px; height:110px; }
  .overlay { padding:8px; padding-top:max(8px,env(safe-area-inset-top,0px)); padding-bottom:max(8px,env(safe-area-inset-bottom,0px)); }
  .modal,.modal.wide { width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border-radius:12px; }
  .modal-h,.modal-b,.modal-f { padding:12px; }
  .modal-h h3 { font-size:15px; }
  .modal-f { gap:8px; }
  .modal-f .btn { flex:1 1 120px; }
  .modal-b .row { flex-direction:column; gap:8px; }
  .modal-b .row>label { flex-basis:auto; width:100%; }
  .toast { font-size:13px; padding:10px 12px; }
}
@media screen and (max-width:359px) {
  .g4 { grid-template-columns:minmax(0,1fr); }
  .stok-main { grid-template-columns:minmax(0,1fr); }
  .ong-row { grid-template-columns:minmax(0,1fr); }
  .cart-fab .fab-go { display:none; }
  .topbar .avatar { width:30px; height:30px; }
}
@media screen and (max-height:540px) and (min-width:1101px) {
  .cart { position:static; max-height:none; overflow:visible; }
}
/* Login: satu layar yang dapat bergulir, tanpa panel promosi yang terlalu tinggi di HP. */
@media screen {
  body[data-page=login]>.lg { min-height:100vh; min-height:100dvh; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .lg-main,.lg-hero,.lg-card { min-width:0; }
  .lg-feats { flex-wrap:wrap; }
}
@media screen and (max-width:900px) {
  body[data-page=login]>.lg { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:600px) {
  .lg-hero { padding:20px; gap:18px; }
  .lg-hero h2 { font-size:25px; margin-bottom:10px; }
  .lg-hero p,.lg-feats,.lg-eyebrow { display:none; }
  .lg-logo { width:44px; height:44px; }
  .lg-brand strong { font-size:18px; }
  .lg-brand span { font-size:11px; }
  .lg-main { padding:22px 18px max(30px,env(safe-area-inset-bottom,0px)); align-items:start; }
  .lg-card { width:100%; max-width:420px; }
  .lg-card h1 { font-size:25px; }
  .lg-card input[type=text],.lg-card input[type=password] { font-size:16px; }
  .lg-sub { margin-bottom:18px; }
  .lg-show { max-width:100%; }
}

@media screen and (max-width:600px) {
  .topbar { gap:6px; padding-inline:10px; }
  .topbar h1 { flex:1 1 0%; font-size:15px; }
  .topbar>.grow,.topbar .avatar,.topbar .logout-label { display:none; }
  .topbar #logout-btn { flex:0 0 36px; width:36px; min-height:36px; padding:8px; }
  .topbar .demo-badge { font-size:9px; padding-inline:5px; }
  .topbar .bell-wrap { flex:none; }
}