/*
 * PHONETHIP PAYROLL — Mobile Desktop View
 * ສະເພາະໂທລະສັບ/ແທັບເລັດ. Desktop ບໍ່ຖືກກະທົບ.
 */
html.mobile-desktop-mode {
  min-width: 1280px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y pinch-zoom;
}

html.mobile-desktop-mode body.mobile-desktop-body {
  min-width: 1280px;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}

/* ຮັກສາ Desktop layout ເມື່ອເຂົ້າຜ່ານໂທລະສັບ */
html.mobile-desktop-mode .app {
  display: flex !important;
  min-width: 1280px !important;
  min-height: 100vh;
}

html.mobile-desktop-mode .app > aside {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 260px !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.mobile-desktop-mode .main {
  margin-left: 260px !important;
  width: calc(1280px - 260px) !important;
  min-width: calc(1280px - 260px) !important;
  padding: 22px !important;
}

html.mobile-desktop-mode .grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html.mobile-desktop-mode .grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.mobile-desktop-mode .grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.mobile-desktop-mode .form-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* ຕາຕະລາງ/ເອກະສານຍັງຄົງຂະໜາດ Desktop ແລະ ເລື່ອນໄດ້ */
html.mobile-desktop-mode table { min-width: max-content; }
html.mobile-desktop-mode .card,
html.mobile-desktop-mode .modal-box,
html.mobile-desktop-mode .preview-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Login ຍັງຢູ່ກາງໜ້າຈໍຕາມຮູບແບບເກົ່າ */
html.mobile-desktop-mode .login {
  min-width: 1280px;
}


/* PWA install button must never become the full-height desktop sidebar. */
html.mobile-desktop-mode #pwaInstallBar {
  left: auto !important;
  right: 16px !important;
  top: auto !important;
  bottom: 16px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  transform: translateY(140%) !important;
  pointer-events: none !important;
}
html.mobile-desktop-mode #pwaInstallBar.show {
  transform: translateY(0) !important;
}
html.mobile-desktop-mode #pwaInstallBar button {
  pointer-events: auto !important;
}

/* LOGIN SECURITY/UI FIX — before authentication, show only the login screen. */
html.mobile-desktop-mode #appRoot.hide,
html.mobile-desktop-mode .app.hide {
  display: none !important;
}

html.mobile-desktop-mode.mobile-login-only {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

html.mobile-desktop-mode.mobile-login-only body.mobile-desktop-body {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.mobile-desktop-mode.mobile-login-only #loginScreen {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  padding: 18px !important;
  z-index: 10000 !important;
  overflow-y: auto !important;
}

html.mobile-desktop-mode.mobile-login-only #loginScreen.hide {
  display: none !important;
}

html.mobile-desktop-mode.mobile-login-only .login-card {
  width: min(410px, 100%) !important;
  max-width: 410px !important;
  margin: auto !important;
  padding: 24px 22px !important;
  border-radius: 22px !important;
}