/* Mobile UI layer
   Shared ergonomic rules for managed Admin and Petugas pages.
*/
:root {
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);
  --ui-mobile-gutter: 12px;
  --ui-mobile-touch: 46px;
  --ui-mobile-viewport-height: 100dvh;
}

html.ui-mobile {
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html.ui-mobile body.ui-managed-page {
  min-width: 0;
  min-height: var(--ui-mobile-viewport-height);
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-bottom: var(--ui-safe-bottom);
}

html.ui-mobile body.ui-managed-page :where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

html.ui-mobile body.ui-managed-page :where(
  button,
  .btn,
  .btn-action,
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-warning,
  .btn-danger,
  .link-action,
  [role="button"]
) {
  min-height: var(--ui-mobile-touch);
  touch-action: manipulation;
}

html.ui-mobile body.ui-managed-page :where(
  .icon-btn,
  .btn-icon,
  .sidebar-toggle,
  .sidebar-close,
  .menu-toggle,
  .hamburger-btn,
  .ui-page-header__menu
) {
  width: var(--ui-mobile-touch);
  min-width: var(--ui-mobile-touch);
  height: var(--ui-mobile-touch);
  min-height: var(--ui-mobile-touch);
  padding: 0;
}

html.ui-mobile body.ui-managed-page :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .ui-control,
  .ui-form-control,
  .form-control
) {
  max-width: 100%;
  min-height: 48px;
  font-size: 16px !important;
}

html.ui-mobile body.ui-managed-page textarea {
  min-height: 112px;
}

html.ui-mobile body.ui-managed-page input[type="checkbox"],
html.ui-mobile body.ui-managed-page input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
}

html.ui-mobile body.ui-managed-page :where(.content, .main-content, .main, .page-shell) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: max(var(--ui-mobile-gutter), var(--ui-safe-right)) !important;
  padding-left: max(var(--ui-mobile-gutter), var(--ui-safe-left)) !important;
}

html.ui-mobile body.ui-managed-page :where(.content-inner, .main-inner, .page-inner, .wrap) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html.ui-mobile body.ui-managed-page :where(.sidebar) {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  width: min(88vw, 340px) !important;
  max-width: calc(100vw - 44px);
  height: var(--ui-mobile-viewport-height);
  padding-top: max(10px, var(--ui-safe-top));
  padding-bottom: max(12px, var(--ui-safe-bottom));
  transform: translate3d(-112%, 0, 0) !important;
  transition: transform .22s ease;
  overscroll-behavior: contain;
  z-index: 1200 !important;
  pointer-events: auto;
}

html.ui-mobile body.ui-managed-page.sidebar-open :where(.sidebar),
html.ui-mobile body.ui-managed-page :where(.sidebar.show, .sidebar.open, .sidebar.active) {
  transform: translate3d(0, 0, 0) !important;
}

html.ui-mobile body.ui-managed-page :where(.sidebar-close) {
  position: sticky;
  top: max(10px, var(--ui-safe-top));
  margin-left: auto;
  margin-right: 10px;
  z-index: 3;
  flex: 0 0 auto;
}

html.ui-mobile body.ui-managed-page :where(.sidebar .app-sidebar, .sidebar-nav) {
  min-height: 0;
}

html.ui-mobile body.ui-managed-page :where(.sidebar-nav) {
  overflow-y: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

html.ui-mobile body.ui-managed-page :where(.sidebar a, .app-sidebar .sidebar-nav a) {
  min-height: 50px;
}

html.ui-mobile body.ui-managed-page :where(.sidebar-overlay) {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100%;
  height: var(--ui-mobile-viewport-height);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(15, 23, 42, .42);
  transition: opacity .2s ease, visibility .2s ease;
  overscroll-behavior: none;
  z-index: 1190 !important;
}

html.ui-mobile body.ui-managed-page.sidebar-open :where(.sidebar-overlay),
html.ui-mobile body.ui-managed-page :where(.sidebar-overlay.show, .sidebar-overlay.open, .sidebar-overlay.active) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.ui-mobile body.ui-managed-page :where(.ui-page-header, .top-bar, .topbar, .page-header) {
  min-width: 0;
  margin-bottom: 12px;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

html.ui-mobile body.ui-managed-page :where(.ui-page-header__main, .header-group) {
  min-width: 0;
  flex: 1 1 auto;
}

html.ui-mobile body.ui-managed-page :where(
  .ui-page-header__title,
  .top-bar h1,
  .top-bar h2,
  .topbar h1,
  .topbar h2,
  .page-header h1,
  .page-header h2
) {
  min-width: 0;
  margin: 0;
  font-size: 1.05rem !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

html.ui-mobile body.ui-managed-page :where(.ui-page-header__subtitle, .page-subtitle) {
  font-size: .85rem;
  line-height: 1.4;
}

html.ui-mobile body.ui-managed-page .ui-page-header__actions {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-bottom: 2px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

html.ui-mobile body.ui-managed-page .ui-page-header__actions::-webkit-scrollbar {
  display: none;
}

html.ui-mobile body.ui-managed-page .ui-page-header__actions > * {
  flex: 0 0 auto !important;
  scroll-snap-align: start;
}

html.ui-mobile body.ui-managed-page :where(
  .ui-panel,
  .ui-card,
  .ui-filter-card,
  .card,
  .cardx,
  .panel,
  .data-table-card,
  .table-card,
  .history-panel
) {
  max-width: 100%;
  min-width: 0;
  border-radius: 8px !important;
}

html.ui-mobile body.ui-managed-page :where(
  .ui-card,
  .ui-filter-card,
  .card,
  .cardx,
  .panel,
  .data-table-card,
  .table-card,
  .history-panel
) {
  padding: 14px;
}

html.ui-mobile body.ui-managed-page :where(.ui-form-grid, .form-grid, .fields, .form-row) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px;
}

html.ui-mobile body.ui-managed-page :where(.ui-form-actions, .form-actions, .action-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

html.ui-mobile body.ui-managed-page :where(.ui-form-actions, .form-actions, .action-row) > :where(a, button, .btn, input[type="submit"]) {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

html.ui-mobile body.ui-managed-page :where(.ui-choice, label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  min-height: 44px;
  align-items: center;
  white-space: normal;
}

html.ui-mobile body.ui-managed-page :where(.ui-table-toolbar, .table-toolbar, .table-header, .history-table-header) {
  align-items: stretch;
  gap: 10px;
}

html.ui-mobile body.ui-managed-page :where(.ui-table-search, .search-box, [role="search"]) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html.ui-mobile body.ui-managed-page :where(.ui-table-toolbar__actions, .table-actions, .toolbar-actions) {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html.ui-mobile body.ui-managed-page :where(.ui-table-toolbar__actions, .table-actions, .toolbar-actions)::-webkit-scrollbar {
  display: none;
}

html.ui-mobile body.ui-managed-page :where(.ui-table-toolbar__actions, .table-actions, .toolbar-actions) > * {
  flex: 0 0 auto;
}

html.ui-mobile body.ui-managed-page .ui-table-shell[data-ui-overflow] {
  position: relative;
  border-radius: 8px;
  scroll-padding-inline: 12px;
  scrollbar-width: thin;
}

html.ui-mobile body.ui-managed-page .ui-table-shell[data-ui-overflow]::after {
  content: "";
  position: sticky;
  right: 0;
  display: block;
  width: 24px;
  height: 1px;
  margin-left: auto;
  pointer-events: none;
  box-shadow: -12px 0 18px 8px rgba(35, 48, 67, .12);
}

html.ui-mobile body.ui-managed-page table[data-mobile-cards="1"] tbody {
  gap: 10px;
}

html.ui-mobile body.ui-managed-page table[data-mobile-cards="1"] tr {
  border-radius: 8px !important;
  box-shadow: 0 7px 20px rgba(35, 48, 67, .07) !important;
}

html.ui-mobile body.ui-managed-page table[data-mobile-cards="1"] td {
  min-width: 0;
  overflow-wrap: anywhere;
}

html.ui-mobile body.ui-managed-page table[data-mobile-cards="1"] td.ui-table-col-actions :where(a, button, input[type="submit"]) {
  min-width: 44px;
  min-height: 44px;
}

html.ui-mobile body.ui-managed-page :where(
  .tabs,
  .tab-list,
  .nav-tabs,
  .segmented-control,
  [role="tablist"],
  [data-ui-mobile-scroll]
) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

html.ui-mobile body.ui-managed-page :where(
  .tabs,
  .tab-list,
  .nav-tabs,
  .segmented-control,
  [role="tablist"],
  [data-ui-mobile-scroll]
)::-webkit-scrollbar {
  display: none;
}

html.ui-mobile body.ui-managed-page :where(
  .tabs,
  .tab-list,
  .nav-tabs,
  .segmented-control,
  [role="tablist"],
  [data-ui-mobile-scroll]
) > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

html.ui-mobile body.ui-managed-page :where(.alert, .flash, .notice, .ui-notice-card) {
  max-width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html.ui-mobile body.ui-managed-page :where(
  .custom-modal,
  .modal.is-open,
  .modal.show,
  .lz-modal-overlay
) {
  align-items: flex-end !important;
  padding: max(8px, var(--ui-safe-top)) max(8px, var(--ui-safe-right)) max(8px, var(--ui-safe-bottom)) max(8px, var(--ui-safe-left)) !important;
}

html.ui-mobile body.ui-managed-page .custom-modal[style*="display: block"],
html.ui-mobile body.ui-managed-page .custom-modal.is-open,
html.ui-mobile body.ui-managed-page .custom-modal.show {
  display: flex !important;
}

html.ui-mobile body.ui-managed-page :where(
  .custom-modal-content,
  .custom-modal .modal-content,
  .modal.is-open .modal-content,
  .modal.show .modal-content,
  .lz-modal
) {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(var(--ui-mobile-viewport-height) - var(--ui-safe-top) - 12px) !important;
  margin: 0 !important;
  overflow: auto;
  border-radius: 8px 8px 0 0 !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.ui-mobile body.ui-managed-page :where(.modal-footer, .custom-modal-footer, .lz-modal__footer) {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-bottom: max(12px, var(--ui-safe-bottom));
  background: #fff;
}

html.ui-mobile body.ui-managed-page :where(.modal-footer, .custom-modal-footer, .lz-modal__footer) > :where(a, button, .btn) {
  width: 100%;
  justify-content: center;
}

html.ui-mobile.ui-keyboard-open body.ui-managed-page {
  padding-bottom: 0;
}

html.ui-mobile.ui-keyboard-open body.ui-managed-page :where(.simple-faq, .lz-live-wrap) {
  display: none !important;
}

html.ui-mobile body.ui-managed-page .simple-faq {
  right: max(10px, var(--ui-safe-right)) !important;
  bottom: max(10px, var(--ui-safe-bottom)) !important;
}

html.ui-mobile body.ui-managed-page .simple-faq__panel {
  right: max(10px, var(--ui-safe-right)) !important;
  bottom: calc(76px + var(--ui-safe-bottom)) !important;
  width: calc(100vw - max(20px, calc(var(--ui-safe-left) + var(--ui-safe-right) + 20px))) !important;
  max-height: calc(var(--ui-mobile-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - 92px) !important;
}

html.ui-mobile body.ui-managed-page .lz-live-wrap {
  top: auto !important;
  right: auto !important;
  bottom: max(10px, var(--ui-safe-bottom)) !important;
  left: max(10px, var(--ui-safe-left)) !important;
  width: auto !important;
  max-width: calc(100vw - 90px - var(--ui-safe-left) - var(--ui-safe-right));
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  pointer-events: none;
}

html.ui-mobile body.ui-managed-page .lz-live-wrap .lz-live-pill {
  padding: 6px 8px !important;
}

html.ui-mobile body.ui-managed-page .lz-live-wrap .lz-live-text {
  display: none;
}

@media (max-width: 560px) {
  :root {
    --ui-mobile-gutter: 10px;
  }

  html.ui-mobile body.ui-managed-page :where(.content, .main-content, .main, .page-shell) {
    padding-top: max(8px, var(--ui-safe-top)) !important;
  }

  html.ui-mobile body.ui-managed-page :where(.ui-page-header__icon) {
    display: none;
  }

  html.ui-mobile body.ui-managed-page :where(.ui-page-header__subtitle, .page-subtitle) {
    display: none;
  }

  html.ui-mobile body.ui-managed-page table[data-mobile-cards="1"] td {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  html.ui-mobile body.ui-managed-page :where(.sidebar) {
    width: min(62vw, 340px) !important;
  }

  html.ui-mobile body.ui-managed-page :where(
    .custom-modal-content,
    .custom-modal .modal-content,
    .modal.is-open .modal-content,
    .modal.show .modal-content,
    .lz-modal
  ) {
    max-height: calc(var(--ui-mobile-viewport-height) - 8px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-mobile body.ui-managed-page * {
    scroll-behavior: auto !important;
  }
}