/* SWP Laundry POS — safe responsive polish 2026-08-27
   Additive override only. Keeps existing mobile composition:
   - Owner Mode: 3 buttons in one row
   - Owner filters: 3 controls in one row
   - Owner summary: 2 x 2
   - Transaction actions: one compact row where space allows
   No Vite bundle is modified. */

@media (max-width: 767px) {
  body.mobile-owner-report-page {
    --swp-owner-x: clamp(7px, 2.6vw, 16px);
    --swp-owner-card-pad: clamp(9px, 3vw, 14px);
    --swp-owner-gap: clamp(5px, 1.8vw, 8px);
    --swp-owner-control-h: clamp(38px, 11vw, 44px);
    --swp-owner-icon-w: clamp(28px, 8.5vw, 34px);
  }

  /* Use the available viewport instead of stacking fixed paddings. */
  body.mobile-owner-report-page .layout-main-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.mobile-owner-report-page .layout-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: var(--swp-owner-x) !important;
    padding-right: var(--swp-owner-x) !important;
  }
  body.mobile-owner-report-page .daily-report-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: var(--swp-owner-card-pad) !important;
    padding-right: var(--swp-owner-card-pad) !important;
    overflow: hidden !important;
  }

  /* Heading stays one row, but typography and spacing scale with viewport. */
  body.mobile-owner-report-page .report-title-period-source {
    gap: clamp(6px, 2vw, 12px) !important;
    min-height: clamp(58px, 18vw, 72px) !important;
    padding-left: clamp(8px, 2.7vw, 14px) !important;
    padding-right: clamp(8px, 2.7vw, 14px) !important;
  }
  body.mobile-owner-report-page .report-title-period-source .report-title-source {
    font-size: clamp(14px, 4.2vw, 18px) !important;
    white-space: nowrap !important;
  }
  body.mobile-owner-report-page .report-period-source {
    font-size: clamp(8px, 2.45vw, 11px) !important;
    white-space: nowrap !important;
  }

  /* Owner Mode keeps exactly three choices in one row. */
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(9px, 3vw, 13px) !important;
    gap: clamp(7px, 2.5vw, 11px) !important;
  }
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-copy strong {
    font-size: clamp(12px, 3.7vw, 15.5px) !important;
  }
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-copy small {
    font-size: clamp(8.5px, 2.7vw, 11.5px) !important;
  }
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--swp-owner-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(38px, 11.5vw, 44px) !important;
    padding: clamp(5px, 1.7vw, 7px) clamp(2px, 1vw, 5px) !important;
    gap: clamp(2px, .8vw, 5px) !important;
    font-size: clamp(8px, 2.55vw, 10.8px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.mobile-owner-report-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button i {
    font-size: clamp(10px, 3vw, 13px) !important;
    flex: 0 0 auto !important;
  }

  /* Filter stays Tanggal | Rentang | Export in one row. */
  body.mobile-owner-report-page .daily-report-controls-source {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--swp-owner-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: clamp(12px, 4vw, 20px) !important;
  }
  body.mobile-owner-report-page .daily-report-controls-source > .report-control-cell {
    min-width: 0 !important;
    grid-template-rows: clamp(15px, 4.8vw, 18px) var(--swp-owner-control-h) !important;
    row-gap: clamp(4px, 1.5vw, 6px) !important;
  }
  body.mobile-owner-report-page .daily-report-controls-source > .report-control-cell > label,
  body.mobile-owner-report-page .daily-report-controls-source > .report-control-cell > .report-control-label-spacer {
    height: clamp(15px, 4.8vw, 18px) !important;
    min-height: clamp(15px, 4.8vw, 18px) !important;
    max-height: clamp(15px, 4.8vw, 18px) !important;
    font-size: clamp(7.5px, 2.45vw, 11px) !important;
    line-height: clamp(15px, 4.8vw, 18px) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  body.mobile-owner-report-page .daily-report-date-control-source,
  body.mobile-owner-report-page .daily-report-export-button-source {
    height: var(--swp-owner-control-h) !important;
    min-height: var(--swp-owner-control-h) !important;
    max-height: var(--swp-owner-control-h) !important;
    min-width: 0 !important;
  }
  body.mobile-owner-report-page .daily-report-date-control-source .p-inputtext,
  body.mobile-owner-report-page .daily-report-date-control-source .p-datepicker-input {
    right: var(--swp-owner-icon-w) !important;
    width: calc(100% - var(--swp-owner-icon-w)) !important;
    max-width: calc(100% - var(--swp-owner-icon-w)) !important;
    height: var(--swp-owner-control-h) !important;
    min-height: var(--swp-owner-control-h) !important;
    max-height: var(--swp-owner-control-h) !important;
    padding-left: clamp(5px, 2vw, 10px) !important;
    padding-right: clamp(3px, 1vw, 7px) !important;
    font-size: clamp(8px, 2.55vw, 12px) !important;
    line-height: var(--swp-owner-control-h) !important;
  }
  body.mobile-owner-report-page .daily-report-date-control-source .p-datepicker-trigger,
  body.mobile-owner-report-page .daily-report-date-control-source .p-datepicker-dropdown {
    width: var(--swp-owner-icon-w) !important;
    min-width: var(--swp-owner-icon-w) !important;
    max-width: var(--swp-owner-icon-w) !important;
    height: var(--swp-owner-control-h) !important;
    min-height: var(--swp-owner-control-h) !important;
    max-height: var(--swp-owner-control-h) !important;
  }
  body.mobile-owner-report-page .daily-report-date-control-source .p-datepicker-trigger .p-icon,
  body.mobile-owner-report-page .daily-report-date-control-source .p-datepicker-dropdown .p-icon {
    width: clamp(11px, 3.5vw, 15px) !important;
    height: clamp(11px, 3.5vw, 15px) !important;
  }
  body.mobile-owner-report-page .daily-report-export-button-source,
  body.mobile-owner-report-page .daily-report-export-button-source .p-button-label,
  body.mobile-owner-report-page .daily-report-export-button-source .p-button-icon {
    font-size: clamp(7px, 2.2vw, 10px) !important;
  }
  body.mobile-owner-report-page .daily-report-export-button-source {
    padding-left: clamp(2px, .8vw, 6px) !important;
    padding-right: clamp(2px, .8vw, 6px) !important;
    gap: clamp(2px, .8vw, 5px) !important;
  }

  /* Summary stays 2 x 2, but cards scale instead of being squeezed. */
  body.mobile-owner-report-page .owner-summary-grid.owner-summary-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(7px, 2.5vw, 12px) !important;
    margin-bottom: clamp(14px, 5vw, 20px) !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card {
    min-height: clamp(82px, 25vw, 92px) !important;
    padding: clamp(8px, 2.6vw, 10px) clamp(6px, 2.2vw, 9px) clamp(7px, 2.3vw, 9px) clamp(40px, 12.5vw, 48px) !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card::before {
    left: clamp(7px, 2.5vw, 9px) !important;
    width: clamp(27px, 8.5vw, 30px) !important;
    height: clamp(27px, 8.5vw, 30px) !important;
    font-size: clamp(11px, 3.5vw, 13px) !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card > span {
    font-size: clamp(8px, 2.55vw, 10px) !important;
    line-height: 1.12 !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card > strong {
    font-size: clamp(13px, 4.2vw, 16px) !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-subvalue {
    font-size: clamp(7px, 2.2vw, 9px) !important;
  }
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card small {
    font-size: clamp(6.5px, 1.95vw, 8px) !important;
    line-height: 1.2 !important;
  }

  /* Table keeps the existing desktop-like mobile layout, but is allowed to use full width. */
  body.mobile-owner-report-page .daily-report-table-source,
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-wrapper,
  body.mobile-owner-report-page .daily-report-table-source table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Extra-small Android: same composition, only tighter proportions. */
@media (max-width: 390px) {
  body.mobile-owner-report-page {
    --swp-owner-x: clamp(6px, 2vw, 9px);
    --swp-owner-card-pad: clamp(7px, 2.3vw, 10px);
    --swp-owner-gap: clamp(4px, 1.4vw, 6px);
  }

  body.mobile-owner-report-page .laundry-owner-scope-copy small {
    max-width: 96% !important;
    margin-inline: auto !important;
  }

  /* Transaction list: remove stacked fixed paddings and scale action buttons. */
  body.mobile-transaction-list-page .layout-main-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.mobile-transaction-list-page .layout-main {
    padding-left: clamp(7px, 2.4vw, 10px) !important;
    padding-right: clamp(7px, 2.4vw, 10px) !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-card,
  body.mobile-transaction-list-page .card,
  body.mobile-transaction-list-page .surface-card,
  body.mobile-transaction-list-page .p-card,
  body.mobile-transaction-list-page .p-panel {
    padding-left: clamp(7px, 2.4vw, 10px) !important;
    padding-right: clamp(7px, 2.4vw, 10px) !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr {
    padding-left: clamp(6px, 2vw, 9px) !important;
    padding-right: clamp(6px, 2vw, 9px) !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: clamp(3px, 1vw, 6px) !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell .p-button,
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell button {
    flex: 0 1 clamp(31px, 9.5vw, 36px) !important;
    width: clamp(31px, 9.5vw, 36px) !important;
    min-width: 31px !important;
    max-width: 36px !important;
    height: clamp(31px, 9.5vw, 36px) !important;
    min-height: 31px !important;
    max-height: 36px !important;
    border-radius: clamp(8px, 2.5vw, 10px) !important;
  }
}