/**
 * Mobile browser (≤900px) — full-page layout for all modules.
 * Does not require Capacitor/APK. No JS/function changes.
 */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .app-layout {
    display: block;
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
  }

  /* Sidebar off-screen on mobile — content uses full width */
  .sidebar,
  .outlook-sidebar {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .main-content,
  .outlook-sidebar ~ .main-content,
  .outlook-sidebar.is-collapsed ~ .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100dvh;
  }

  /* Space for bottom navigation bar */
  .main-content {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* Bottom nav — same as APK, also on mobile browsers */
  .native-bottom-nav {
    display: flex !important;
    visibility: visible !important;
  }

  body.is-launcher-open .native-bottom-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* Topbar safe-area */
  .topbar {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .topbar-left h2 {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Page content edge-to-edge with safe padding */
  .page-content {
    padding:
      14px
      max(14px, env(safe-area-inset-left, 0px))
      20px
      max(14px, env(safe-area-inset-right, 0px)) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Responsive grids */
  .grid-2,
  .grid-3,
  .metrics-grid,
  .metrics-grid-6,
  .rbac-layout,
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 14px 16px !important;
  }

  .card-body {
    padding: 14px 16px !important;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  .flex-between {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Tables scroll inside card, not whole page */
  .page-content .data-table-scroll,
  .data-table-scroll,
  .rbac-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }

  .page-content table.data-table {
    min-width: 520px;
  }

  /* Prevent iOS input zoom */
  input,
  select,
  textarea,
  .form-input {
    font-size: 16px !important;
  }

  /* Toast above bottom nav */
  .toast-container {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Dashboard */
  .dash-report {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .dash-report-header {
    padding: 18px 16px;
    border-radius: 14px;
  }

  /* Staff attendance admin */
  .staff-att-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .staff-att-tab {
    min-width: 0;
    flex: 1 1 140px;
    padding: 12px 14px;
  }

  .staff-att-tab-nav {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Shift schedule wide table */
  .shift-schedule-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}

/* Auth pages — full viewport on phone */
@media (max-width: 960px) {
  html.auth-page,
  body.auth-page {
    overflow: auto !important;
    overflow-x: hidden !important;
    min-height: 100dvh;
    height: auto !important;
    max-width: 100%;
  }

  .auth-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    overflow: visible !important;
  }

  .auth-form-panel {
    min-height: auto;
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-left, 0px))
      max(24px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-right, 0px));
  }

  .auth-form-box {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
}

/* Minimal layout (errors, payment) */
@media (max-width: 900px) {
  body:not(.auth-page):not(.pos-body):not(.staff-absen-body) > .page-content {
    min-height: 100dvh;
    padding:
      max(20px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-left, 0px))
      max(24px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

/* Staff absen — full width on all phone sizes */
@media (max-width: 900px) {
  .staff-absen-body {
    overflow-x: hidden;
  }

  .absen-app {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .absen-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: none !important;
    border-radius: 0;
  }
}