/* ============================================================================
   SWP Laundry POS — R56 UNIVERSAL MOBILE RESPONSIVE LAYER
   Presentation-only safety layer.

   Contract:
   - Mobile <= 768 CSS px; Desktop >= 769 CSS px.
   - Preserve the settled mobile composition. No DOM/route/API/business-logic change.
   - The current "good" phone layout remains the visual reference.
   - Narrower phones reclaim space; they do not switch to a different layout.
   - Wide/column-heavy tables keep readable geometry and scroll horizontally.
   ============================================================================ */

@media (max-width: 768px) {
  /* 1) Canonical viewport: never force a 320px document that Android must shrink. */
  html,
  body,
  #app {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html,
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    overflow-x: hidden !important;
  }

  @supports (overflow: clip) {
    html,
    body { overflow-x: clip !important; }
  }

  /* Main canvas/containers may shrink, while their composition stays untouched. */
  body.mobile-native-app .layout-wrapper,
  body.mobile-native-app .layout-main-container,
  body.mobile-native-app .layout-main,
  body.mobile-native-app .layout-main > *,
  body.mobile-native-app .card,
  body.mobile-native-app .surface-card,
  body.mobile-native-app .p-card,
  body.mobile-native-app .p-card-body,
  body.mobile-native-app .p-card-content,
  body.mobile-native-app .p-panel,
  body.mobile-native-app .p-panel-content,
  body.mobile-native-app form,
  body.mobile-native-app fieldset,
  body.mobile-native-app .grid,
  body.mobile-native-app .flex,
  body.mobile-native-app .p-toolbar,
  body.mobile-native-app .p-datatable,
  body.mobile-native-app .p-datatable-header {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobile-native-app .grid > *,
  body.mobile-native-app .flex > *,
  body.mobile-native-app .p-toolbar > *,
  body.mobile-native-app .p-datatable-header > * {
    min-width: 0 !important;
  }

  body.mobile-native-app img,
  body.mobile-native-app svg,
  body.mobile-native-app canvas,
  body.mobile-native-app video,
  body.mobile-native-app iframe {
    max-width: 100% !important;
  }

  /* 2) Header: same row as canonical phone; only release legacy max-content pressure. */
  body.mobile-native-app .layout-topbar,
  body.mobile-native-app .layout-topbar .layout-topbar-logo-container,
  body.mobile-native-app .layout-topbar .layout-topbar-actions {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-logo-container {
    flex: 1 1 auto !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-actions {
    flex: 0 1 auto !important;
  }

  body.mobile-native-app .layout-topbar .active-company-badge {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(112px, 31vw) !important;
    flex: 0 1 auto !important;
  }

  body.mobile-native-app .layout-topbar .active-company-badge span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-menu {
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-width: calc(100dvw - 16px) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }

  /* 3) Controls: fixed/min-content defaults must never widen a mobile page. */
  body.mobile-native-app input,
  body.mobile-native-app textarea,
  body.mobile-native-app select,
  body.mobile-native-app .p-inputtext,
  body.mobile-native-app .p-inputnumber,
  body.mobile-native-app .p-inputnumber-input,
  body.mobile-native-app .p-select,
  body.mobile-native-app .p-dropdown,
  body.mobile-native-app .p-multiselect,
  body.mobile-native-app .p-datepicker,
  body.mobile-native-app .p-calendar,
  body.mobile-native-app .p-iconfield,
  body.mobile-native-app .p-password,
  body.mobile-native-app .p-autocomplete,
  body.mobile-native-app .p-inputgroup,
  body.mobile-native-app .p-button-label {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.mobile-native-app input,
  body.mobile-native-app textarea,
  body.mobile-native-app select,
  body.mobile-native-app .p-inputtext,
  body.mobile-native-app .p-select,
  body.mobile-native-app .p-dropdown,
  body.mobile-native-app .p-multiselect,
  body.mobile-native-app .p-datepicker,
  body.mobile-native-app .p-calendar,
  body.mobile-native-app .p-iconfield,
  body.mobile-native-app .p-password,
  body.mobile-native-app .p-autocomplete,
  body.mobile-native-app .p-inputgroup {
    max-width: 100% !important;
  }

  /* 4) Dialog/overlay shell always follows the visible phone viewport. */
  .p-dialog-mask {
    box-sizing: border-box !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .p-dialog,
  .p-popover,
  .p-overlaypanel,
  .p-menu,
  .p-tieredmenu,
  .p-select-overlay,
  .p-dropdown-panel,
  .p-multiselect-panel,
  .p-datepicker-panel {
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-width: calc(100dvw - 16px) !important;
    box-sizing: border-box !important;
  }

  .p-dialog .p-dialog-header,
  .p-dialog .p-dialog-content,
  .p-dialog .p-dialog-footer,
  .p-dialog .p-dialog-content > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Modal/report tables: preserve column geometry; scroll instead of squeezing. */
  body.mobile-daily-report-page .p-dialog .p-datatable:not(.mobile-responsive-table),
  body.mobile-report-page .p-dialog .p-datatable:not(.mobile-responsive-table),
  body.mobile-native-app .p-dialog .inventory-history-table-source,
  body.mobile-native-app .p-dialog .master-history-table-source {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-daily-report-page .p-dialog .p-datatable:not(.mobile-responsive-table) .p-datatable-wrapper,
  body.mobile-report-page .p-dialog .p-datatable:not(.mobile-responsive-table) .p-datatable-wrapper,
  body.mobile-native-app .p-dialog .inventory-history-table-source .p-datatable-wrapper,
  body.mobile-native-app .p-dialog .master-history-table-source .p-datatable-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Existing deliberately-wide tables are allowed to remain wide inside scrollers. */
  body.mobile-native-app .inventory-history-table-source table,
  body.mobile-native-app .master-history-table-source table,
  body.mobile-native-app .history-table-scroll table {
    max-width: none !important;
  }

  /* 5) Page headings/text can consume available width without pushing siblings. */
  body.mobile-native-app .laundry-page-heading,
  body.mobile-native-app .laundry-page-heading > *,
  body.mobile-native-app .mobile-page-heading,
  body.mobile-native-app .p-card-title,
  body.mobile-native-app .p-card-subtitle,
  body.mobile-native-app .transaction-customer-source,
  body.mobile-native-app .customer-name-source,
  body.mobile-native-app .master-item-name-source,
  body.mobile-native-app .stock-item-name,
  body.mobile-native-app .deleted-reason-source {
    min-width: 0 !important;
  }

  /* 6) Fixed bottom nav keeps five identical slots and respects notches. */
  body.mobile-native-app .mobile-app-bottom-nav {
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button,
  body.mobile-native-app .mobile-app-bottom-nav button span {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 7) POS full-width sheets are tied to the visible viewport, not document width. */
  body.mobile-native-app .pos-customer-picker-overlay,
  body.mobile-native-app .pos-service-picker-overlay {
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
  }

  /* Login also obeys the same mobile canvas contract. */
  body.mobile-login-page,
  body.mobile-login-page #app,
  body.mobile-login-page #app > div,
  body.mobile-login-page #app > div > div {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   NARROW PHONE (<= 340 CSS px)
   Preserve every settled composition; only reclaim horizontal room.
   ============================================================================ */
@media (max-width: 340px) {
  :root {
    --swp-r56-edge: clamp(6px, 2.6vw, 9px);
    --swp-r56-gap: clamp(4px, 1.8vw, 7px);
  }

  body.mobile-native-app .layout-main-container {
    padding-left: var(--swp-r56-edge) !important;
    padding-right: var(--swp-r56-edge) !important;
  }

  /* Header remains hamburger | logo | branch | bell | menu. */
  body.mobile-native-app .layout-topbar {
    padding-left: var(--swp-r56-edge) !important;
    padding-right: var(--swp-r56-edge) !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-logo {
    max-width: clamp(62px, 22vw, 72px) !important;
    flex-basis: clamp(62px, 22vw, 72px) !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-logo img {
    max-width: clamp(56px, 20vw, 66px) !important;
  }

  body.mobile-native-app .layout-topbar .active-company-badge {
    max-width: clamp(76px, 29vw, 96px) !important;
    padding-left: clamp(5px, 1.9vw, 7px) !important;
    padding-right: clamp(5px, 1.9vw, 7px) !important;
    font-size: clamp(8.4px, 2.8vw, 9.5px) !important;
  }

  body.mobile-native-app .layout-topbar .layout-menu-button,
  body.mobile-native-app .layout-topbar .layout-topbar-action,
  body.mobile-native-app .layout-topbar .layout-topbar-menu-button {
    width: clamp(35px, 11vw, 40px) !important;
    min-width: clamp(35px, 11vw, 40px) !important;
    height: clamp(36px, 11.5vw, 40px) !important;
  }

  /* Owner Mode remains exactly three choices in one row. */
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind] {
    padding-left: clamp(8px, 3vw, 10px) !important;
    padding-right: clamp(8px, 3vw, 10px) !important;
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--swp-r56-gap) !important;
    min-width: 0 !important;
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-button {
    min-width: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    gap: 2px !important;
    font-size: clamp(7.6px, 2.8vw, 9.5px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-button i {
    font-size: clamp(9px, 3.2vw, 11px) !important;
  }

  /* Existing filter row count/column count is preserved; only gaps shrink. */
  body.mobile-native-app .daily-report-controls-source,
  body.mobile-native-app .transaction-status-filters-source,
  body.mobile-native-app .transaction-report-filters,
  body.mobile-native-app .mobile-report-filter-row,
  body.mobile-native-app .mobile-report-filter-grid {
    gap: var(--swp-r56-gap) !important;
    min-width: 0 !important;
  }

  body.mobile-native-app .daily-report-controls-source > *,
  body.mobile-native-app .transaction-status-filters-source > *,
  body.mobile-native-app .transaction-report-filters > *,
  body.mobile-native-app .mobile-report-filter-row > *,
  body.mobile-native-app .mobile-report-filter-grid > * {
    min-width: 0 !important;
  }

  /* Transaction card keeps the canonical row layout; no middle-column squeeze. */
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) {
    grid-template-columns: clamp(26px, 9vw, 30px) minmax(0, 1fr) max-content !important;
    column-gap: clamp(6px, 2.2vw, 9px) !important;
    padding-left: clamp(9px, 3.5vw, 12px) !important;
    padding-right: clamp(9px, 3.5vw, 12px) !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(2),
  body.mobile-transaction-list-page .transaction-invoice-number {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Keep the already-settled Transaksi Dihapus action on the right. */
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.deleted-at-column-source > .deleted-at-info-source {
    grid-template-columns: minmax(0, 1fr) clamp(30px, 10vw, 32px) !important;
    column-gap: clamp(6px, 2.2vw, 9px) !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-at-date-source,
  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-reason-source {
    grid-template-columns: clamp(48px, 17vw, 60px) minmax(0, 1fr) !important;
    gap: clamp(5px, 1.8vw, 7px) !important;
  }

  /* Paginator remains one row on small dialogs/pages. */
  body.mobile-native-app .p-paginator,
  .p-dialog .p-paginator {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    gap: clamp(1px, .8vw, 3px) !important;
  }

  body.mobile-native-app .p-paginator .p-paginator-page,
  body.mobile-native-app .p-paginator .p-paginator-first,
  body.mobile-native-app .p-paginator .p-paginator-prev,
  body.mobile-native-app .p-paginator .p-paginator-next,
  body.mobile-native-app .p-paginator .p-paginator-last,
  .p-dialog .p-paginator .p-paginator-page,
  .p-dialog .p-paginator .p-paginator-first,
  .p-dialog .p-paginator .p-paginator-prev,
  .p-dialog .p-paginator .p-paginator-next,
  .p-dialog .p-paginator .p-paginator-last {
    width: clamp(27px, 9.5vw, 32px) !important;
    min-width: clamp(27px, 9.5vw, 32px) !important;
    height: clamp(27px, 9.5vw, 32px) !important;
    min-height: clamp(27px, 9.5vw, 32px) !important;
  }

  /* Five bottom-nav slots remain unchanged; only typography/gaps tighten. */
  body.mobile-native-app .mobile-app-bottom-nav {
    column-gap: clamp(1px, .8vw, 3px) !important;
    padding-left: max(clamp(3px, 1.8vw, 7px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(3px, 1.8vw, 7px), env(safe-area-inset-right)) !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button {
    padding-left: 1px !important;
    padding-right: 1px !important;
    font-size: clamp(.50rem, 2.5vw, .62rem) !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button.mobile-long-label span {
    font-size: clamp(.47rem, 2.25vw, .56rem) !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button i {
    font-size: clamp(1rem, 5vw, 1.12rem) !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button.mobile-primary i {
    font-size: clamp(1.18rem, 5.8vw, 1.38rem) !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button.mobile-primary span {
    font-size: clamp(.55rem, 2.8vw, .68rem) !important;
  }


}

/* ============================================================================
   ULTRA-NARROW / SPLIT-SCREEN (<= 299 CSS px)
   Still preserve layout. This is a safety net, not a separate design.
   ============================================================================ */
@media (max-width: 299px) {
  body.mobile-native-app .layout-main-container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.mobile-native-app .layout-topbar {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-logo {
    max-width: 54px !important;
    flex-basis: 54px !important;
  }

  body.mobile-native-app .layout-topbar .layout-topbar-logo img {
    max-width: 50px !important;
  }

  body.mobile-native-app .layout-topbar .active-company-badge {
    max-width: 70px !important;
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-controls,
  body.mobile-owner-report-page .daily-report-controls-source {
    gap: 3px !important;
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-button {
    font-size: 7.2px !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) {
    column-gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.mobile-native-app .mobile-app-bottom-nav button {
    font-size: .48rem !important;
  }
}

/* Master Items history is intentionally content-fit on mobile. This overrides
   the generic universal rule that preserves wide modal tables in a scroller. */
@media (max-width:768px){
  body.mobile-native-app.mobile-items-page .p-dialog .inventory-history-table-source .p-datatable-wrapper,
  body.mobile-native-app.mobile-items-page .p-dialog .inventory-history-table-source .p-datatable-table-container{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    max-width:100%!important;
    touch-action:pan-x pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.mobile-native-app.mobile-items-page .inventory-history-table-source table,
  body.mobile-native-app.mobile-items-page .inventory-history-table-source .p-datatable-table{
    width:max-content!important;
    min-width:440px!important;
    max-width:none!important;
    table-layout:fixed!important;
  }
}