/* HT_POS_PARKING_ANDROID9_ALL_SCREEN_COMPAT_V1_0_2_3
Android 9 WebView/Chrome 71-era and newer.
Critical modal geometry intentionally avoids modern-only CSS.
*/
html.htpk-responsive-v103,
html.htpk-responsive-v103 body{min-height:100%}
body.htpk-modal-open{overflow:hidden!important}

/* POS 9-item navigation */
#posBottomNav{
  box-sizing:border-box!important;display:flex!important;align-items:stretch!important;
  justify-content:flex-start!important;width:100%!important;min-height:64px!important;
  overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
  white-space:nowrap!important;
}
#posBottomNav>button,#posBottomNav>a,
#posBottomNav>#htPosMusicButton,#posBottomNav>#htPosAnnouncementButton{
  box-sizing:border-box!important;flex:0 0 88px!important;width:88px!important;min-width:88px!important;
  min-height:62px!important;padding:8px 6px!important;margin:0!important;border-radius:0!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  font-size:11px!important;line-height:1.15!important;font-weight:700!important;text-align:center!important;
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
}
#posBottomNav [data-pos-tab="sales"]{order:1!important}
#posBottomNav [data-pos-tab="orders"]{order:2!important}
#posBottomNav [data-pos-tab="events"]{order:3!important}
#posBottomNav [data-pos-tab="reports"]{order:4!important}
#posBottomNav [data-pos-tab="cashbook"]{order:5!important}
#htPosParkingButton{order:6!important}
#posBottomNav [data-pos-tab="settings"]{order:7!important}
#posBottomNav #htPosMusicButton{order:8!important}
#posBottomNav #htPosAnnouncementButton{order:9!important}
#htPosParkingButton{border:0!important;background:transparent!important;color:inherit!important;cursor:pointer!important;font:inherit!important}
#htPosParkingButton span{display:block!important;margin:0 auto 4px!important;font-size:19px!important;line-height:1!important}

@media (min-width:1280px){
  #posBottomNav{justify-content:center!important;overflow-x:hidden!important}
  #posBottomNav>button,#posBottomNav>a,#posBottomNav>#htPosMusicButton,#posBottomNav>#htPosAnnouncementButton{
    flex:1 1 0!important;width:auto!important;min-width:98px!important;max-width:160px!important;font-size:12px!important;padding:9px!important;
  }
}
@media (min-width:721px) and (max-width:1279px){
  #posBottomNav>button,#posBottomNav>a,#posBottomNav>#htPosMusicButton,#posBottomNav>#htPosAnnouncementButton{
    flex:0 0 96px!important;width:96px!important;min-width:96px!important;
  }
}
@media (max-width:720px){
  #posBottomNav{min-height:66px!important}
  #posBottomNav>button,#posBottomNav>a,#posBottomNav>#htPosMusicButton,#posBottomNav>#htPosAnnouncementButton{
    flex:0 0 76px!important;width:76px!important;min-width:76px!important;min-height:64px!important;padding:7px 4px!important;font-size:10px!important;
  }
}

/* Android 9-safe fixed modal. Do not rely on inset or dvh. */
body .htpk-modal{
  box-sizing:border-box!important;position:fixed!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;
  margin:0!important;padding:12px!important;background:rgba(8,18,34,.68)!important;
  z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
}
body .htpk-box{
  box-sizing:border-box!important;position:relative!important;width:calc(100% - 24px)!important;
  max-width:1120px!important;height:auto!important;max-height:calc(100vh - 24px)!important;
  margin:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;
  background:#f7f9fc!important;color:#142033!important;border:1px solid #dfe6ef!important;
  border-radius:16px!important;padding:18px!important;box-shadow:0 18px 54px rgba(0,0,0,.30)!important;
  font-size:14px!important;line-height:1.4!important;z-index:2147483001!important;
}
body .htpk-head{
  position:-webkit-sticky!important;position:sticky!important;top:0!important;z-index:5!important;
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  margin:-4px -4px 10px!important;padding:4px 4px 10px!important;background:#f7f9fc!important;
}
body .htpk-head>div{flex:1 1 auto!important;min-width:0!important;padding-right:12px!important}
body .htpk-head h2{margin:0!important;color:#142033!important;font-size:26px!important;line-height:1.15!important}
body .htpk-head small{display:block!important;margin-top:5px!important;color:#657287!important;font-size:12px!important;line-height:1.35!important}
body .htpk-head button{
  flex:0 0 40px!important;width:40px!important;height:40px!important;margin:0!important;border:0!important;
  border-radius:10px!important;background:#e9eef6!important;color:#1c2940!important;font-size:24px!important;
  line-height:40px!important;text-align:center!important;cursor:pointer!important;
}
body .htpk-filters{
  position:-webkit-sticky!important;position:sticky!important;top:54px!important;z-index:4!important;
  display:flex!important;flex-wrap:wrap!important;margin:0 0 10px!important;padding:8px 0 4px!important;background:#f7f9fc!important;
}
body .htpk-filter{
  min-height:38px!important;margin:0 8px 8px 0!important;border:1px solid #d4deeb!important;border-radius:20px!important;
  background:#fff!important;color:#26354c!important;padding:8px 13px!important;font-size:12px!important;line-height:1!important;
  font-weight:800!important;cursor:pointer!important;
}
body .htpk-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-gap:12px!important;gap:12px!important;min-width:0!important;
}
body .htpk-item{
  box-sizing:border-box!important;min-width:0!important;border:1px solid #dce4ef!important;background:#fff!important;
  border-radius:13px!important;padding:14px!important;box-shadow:0 3px 12px rgba(18,40,74,.05)!important;
}
body .htpk-num{margin-bottom:7px!important;color:#0d6efd!important;font-size:24px!important;line-height:1!important;font-weight:900!important}
body .htpk-item small{display:block!important;margin-top:5px!important;color:#66758a!important;font-size:12px!important;line-height:1.35!important;word-break:break-word!important}
body .htpk-badge{
  display:inline-block!important;min-height:24px!important;padding:5px 8px!important;border-radius:14px!important;
  background:#eef3fa!important;color:#34445c!important;font-size:11px!important;line-height:14px!important;font-weight:800!important;
}
body .htpk-action{
  display:block!important;width:100%!important;min-height:40px!important;margin-top:11px!important;border:0!important;border-radius:9px!important;
  background:#0d6efd!important;color:#fff!important;padding:8px 12px!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important;
}
body .htpk-pending{
  box-sizing:border-box!important;position:fixed!important;right:14px!important;bottom:82px!important;left:auto!important;top:auto!important;
  z-index:2147482000!important;width:auto!important;max-width:480px!important;max-height:calc(100vh - 110px)!important;overflow:auto!important;
  margin:0!important;padding:11px 13px!important;border-radius:12px!important;background:#13223c!important;color:#fff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.24)!important;font-size:12px!important;line-height:1.4!important;
}
body .htpk-pending b{color:#8fc0ff!important}
body .htpk-pending.err{background:#8f1d22!important}
body .htpk-mini{min-height:30px!important;border:0!important;border-radius:7px!important;padding:5px 9px!important;margin-left:7px!important;font-size:11px!important;font-weight:800!important;cursor:pointer!important}
body .htpk-mini.cancel{background:rgba(255,255,255,.14)!important;color:#fff!important}

@media (min-width:1440px){
  body .htpk-box{max-width:1240px!important;padding:20px!important}
  body .htpk-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media (min-width:761px) and (max-width:1099px){
  body .htpk-modal{padding:8px!important}
  body .htpk-box{width:calc(100% - 16px)!important;max-height:calc(100vh - 16px)!important;padding:13px!important}
  body .htpk-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-gap:9px!important;gap:9px!important}
  body .htpk-item{padding:11px!important}
  body .htpk-head h2{font-size:22px!important}
}
@media (max-width:760px){
  body .htpk-modal{align-items:flex-end!important;justify-content:center!important;padding:6px!important}
  body .htpk-box{width:100%!important;max-width:none!important;max-height:calc(100vh - 10px)!important;padding:12px!important;border-radius:16px 16px 8px 8px!important}
  body .htpk-head{padding-bottom:9px!important}
  body .htpk-head h2{font-size:21px!important}
  body .htpk-filters{
    top:52px!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;padding:7px 0 2px!important;
  }
  body .htpk-filter{flex:0 0 auto!important;margin-right:7px!important;min-height:36px!important;padding:7px 11px!important}
  body .htpk-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-gap:9px!important;gap:9px!important}
  body .htpk-item{padding:11px!important}
  body .htpk-pending{left:8px!important;right:8px!important;bottom:74px!important;width:auto!important;max-width:none!important;padding:9px 11px!important}
}
@media (max-width:460px){
  body .htpk-modal{padding:4px!important}
  body .htpk-box{width:100%!important;max-height:calc(100vh - 6px)!important;padding:10px!important;border-radius:14px 14px 6px 6px!important}
  body .htpk-grid{grid-template-columns:1fr!important}
  body .htpk-item{padding:12px!important}
  body .htpk-head small{font-size:11px!important}
}
/* Short Android/POS landscape: 1024x600-class and similar. */
@media (max-height:640px) and (orientation:landscape){
  body .htpk-modal{align-items:center!important;justify-content:center!important;padding:5px!important}
  body .htpk-box{width:calc(100% - 10px)!important;max-width:1120px!important;max-height:calc(100vh - 10px)!important;padding:9px!important;border-radius:11px!important}
  body .htpk-head{position:static!important;margin:0 0 5px!important;padding:0 0 5px!important}
  body .htpk-head h2{font-size:20px!important}
  body .htpk-head small{font-size:11px!important}
  body .htpk-head button{width:34px!important;height:34px!important;flex-basis:34px!important;line-height:34px!important}
  body .htpk-filters{
    position:static!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;margin:0 0 5px!important;padding:2px 0!important;
  }
  body .htpk-filter{flex:0 0 auto!important;min-height:32px!important;margin:0 6px 5px 0!important;padding:6px 9px!important;font-size:11px!important}
  body .htpk-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-gap:7px!important;gap:7px!important}
  body .htpk-item{padding:8px!important}
  body .htpk-num{font-size:19px!important;margin-bottom:5px!important}
  body .htpk-action{min-height:34px!important;margin-top:7px!important;padding:6px 8px!important}
}
@media (min-width:1200px) and (max-height:640px) and (orientation:landscape){
  body .htpk-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
/* Modern enhancement only; Android 9 correctness does not require dvh. */
@supports (height:100dvh){
  body .htpk-modal{height:100dvh!important;min-height:100dvh!important}
  body .htpk-box{max-height:calc(100dvh - 24px)!important}
  @media (max-width:760px){body .htpk-box{max-height:calc(100dvh - 10px)!important}}
  @media (max-height:640px) and (orientation:landscape){body .htpk-box{max-height:calc(100dvh - 10px)!important}}
}