/* 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;
  }
}


/* Transaksi Dihapus R50-safe */
/* R50 — Transaksi Dihapus: canonical archive UI + delete confirmation flow */
html.laundry-delete-modal-open,
html.laundry-delete-modal-open body { overflow: hidden !important; }

.laundry-delete-modal-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: "Nunito Sans", sans-serif;
}
.laundry-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(3px);
}
.laundry-delete-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid #dbe7ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}
.laundry-delete-modal-header {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 18px 20px 15px;
  border-bottom: 1px solid #edf2f6;
}
.laundry-delete-modal-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 900;
}
.laundry-delete-modal-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 600;
}
.laundry-delete-modal-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.05rem;
}
.laundry-delete-modal-icon.soft { color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; }
.laundry-delete-modal-icon.permanent { color: #b42318; background: #fff1f2; border: 1px solid #fecdd3; }
.laundry-delete-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}
.laundry-delete-modal-close:hover { background: #f1f5f9; color: #334155; }
.laundry-delete-modal-body { padding: 18px 20px; }
.laundry-delete-invoice-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 14px;
  margin-bottom: 15px;
  border: 1px solid #dbe7ef;
  border-radius: 11px;
  background: #f8fbfd;
}
.laundry-delete-invoice-box span,
.laundry-delete-confirm-summary span {
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.laundry-delete-invoice-box strong { color: #1f2937; font-size: .96rem; font-weight: 900; text-align: right; }
.laundry-delete-reason-list { display: grid; gap: 9px; }
.laundry-delete-reason-option {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 24px;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #dbe4ea;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.laundry-delete-reason-option:hover { border-color: #a9c9dc; background: #fbfdff; }
.laundry-delete-reason-option.is-selected { border-color: #2583bd; background: #f3f9fd; box-shadow: 0 0 0 2px rgba(37,131,189,.08); }
.laundry-delete-reason-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef6fa;
  color: #2677a7;
}
.laundry-delete-reason-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.laundry-delete-reason-copy strong { color: #263648; font-size: .88rem; font-weight: 900; }
.laundry-delete-reason-copy small { color: #758396; font-size: .72rem; line-height: 1.35; font-weight: 600; }
.laundry-delete-reason-radio {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1.5px solid #bac8d2;
  border-radius: 999px;
  color: #fff;
  font-size: .58rem;
}
.laundry-delete-reason-option.is-selected .laundry-delete-reason-radio { border-color: #2583bd; background: #2583bd; }
.laundry-delete-other-wrap { display: none; margin-top: 13px; }
.laundry-delete-other-wrap.is-visible { display: block; }
.laundry-delete-other-wrap label { display: block; margin-bottom: 6px; color: #334155; font-size: .78rem; font-weight: 850; }
.laundry-delete-other-wrap textarea {
  width: 100%;
  resize: vertical;
  min-height: 82px;
  padding: 10px 11px;
  border: 1px solid #cddae3;
  border-radius: 10px;
  outline: none;
  color: #263648;
  background: #fff;
  font: 650 .82rem/1.45 "Nunito Sans", sans-serif;
}
.laundry-delete-other-wrap textarea:focus { border-color: #2583bd; box-shadow: 0 0 0 3px rgba(37,131,189,.10); }
.laundry-delete-other-wrap small { display: block; margin-top: 5px; color: #94a3b8; font-size: .67rem; font-weight: 650; }
.laundry-delete-modal-error { display: none; margin-top: 12px; padding: 9px 11px; border-radius: 9px; background: #fff1f2; color: #b42318; font-size: .76rem; font-weight: 750; }
.laundry-delete-modal-error.is-visible { display: block; }
.laundry-delete-confirm-summary { display: grid; gap: 0; overflow: hidden; border: 1px solid #dbe7ef; border-radius: 11px; background: #f8fbfd; }
.laundry-delete-confirm-summary > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 13px; }
.laundry-delete-confirm-summary > div + div { border-top: 1px solid #e6edf2; }
.laundry-delete-confirm-summary strong { color: #263648; font-size: .84rem; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
.laundry-delete-notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px 12px; border-radius: 10px; font-size: .76rem; line-height: 1.45; font-weight: 650; }
.laundry-delete-notice i { margin-top: 2px; }
.laundry-delete-notice p { margin: 0; }
.laundry-delete-notice.soft { color: #475569; border: 1px solid #d9e7ef; background: #f7fafc; }
.laundry-delete-notice.soft i { color: #2583bd; }
.laundry-delete-notice.permanent { color: #8b1e16; border: 1px solid #fecdd3; background: #fff5f5; }
.laundry-delete-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px 18px;
  border-top: 1px solid #edf2f6;
  background: #fbfdfe;
}
.laundry-delete-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 9px;
  font: 800 .78rem "Nunito Sans", sans-serif;
  cursor: pointer;
}
.laundry-delete-btn.secondary { border: 1px solid #cfdbe3; color: #526273; background: #fff; }
.laundry-delete-btn.danger { border: 1px solid #d97706; color: #fff; background: #d97706; }
.laundry-delete-btn.permanent { border: 1px solid #c62828; color: #fff; background: #c62828; }
.laundry-delete-btn:disabled { opacity: .62; cursor: wait; }
.laundry-delete-success { min-height: 120px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #27834d; text-align: center; }
.laundry-delete-success i { font-size: 2rem; }

/* Archive page: title is one line; card/filter geometry follows canonical reports. */
body.laundry-deleted-transactions-page .deleted-transaction-heading-source {
  align-items: center !important;
  margin-bottom: 14px !important;
}
body.laundry-deleted-transactions-page .deleted-transaction-heading-source h5 {
  white-space: nowrap !important;
}
body.laundry-deleted-transactions-page .deleted-transaction-subtitle-source { display: none !important; }
body.laundry-deleted-transactions-page .transaction-report-filters {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.laundry-deleted-transactions-page .deleted-at-column-source {
  min-width: 250px !important;
}
body.laundry-deleted-transactions-page .deleted-at-info-source {
  align-items: stretch !important;
  gap: 8px !important;
  text-align: left !important;
}
body.laundry-deleted-transactions-page .deleted-at-date-source,
body.laundry-deleted-transactions-page .deleted-reason-source {
  display: grid !important;
  grid-template-columns: 72px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
}
body.laundry-deleted-transactions-page .deleted-at-label-source,
body.laundry-deleted-transactions-page .deleted-reason-label-source {
  color: #8796a7 !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  letter-spacing: .025em !important;
}
body.laundry-deleted-transactions-page .deleted-at-date-source strong,
body.laundry-deleted-transactions-page .deleted-reason-source strong {
  min-width: 0 !important;
  color: #334155 !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere !important;
}
body.laundry-deleted-transactions-page .deleted-permanent-button-source {
  width: 100% !important;
  min-height: 31px !important;
  margin-top: 2px !important;
  border-radius: 8px !important;
  font-size: .70rem !important;
  font-weight: 850 !important;
}

@media (min-width: 769px) {
  body.laundry-deleted-transactions-page .card {
    border-radius: 14px !important;
  }
  body.laundry-deleted-transactions-page .transaction-report-filters > .daily-report-filter-source,
  body.laundry-deleted-transactions-page .transaction-report-filters > .daily-report-controls-source {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 768px) {
  .laundry-delete-modal-root { align-items: flex-end; padding: 10px; }
  .laundry-delete-modal { width: 100%; max-height: calc(100vh - 20px); border-radius: 17px 17px 13px 13px; }
  .laundry-delete-modal-header { grid-template-columns: 40px minmax(0,1fr) 32px; gap: 9px; padding: 15px 14px 13px; }
  .laundry-delete-modal-icon { width: 38px; height: 38px; border-radius: 10px; }
  .laundry-delete-modal-header h3 { font-size: 1rem; }
  .laundry-delete-modal-header p { font-size: .72rem; }
  .laundry-delete-modal-body { padding: 14px; }
  .laundry-delete-modal-footer { display: grid; grid-template-columns: 1fr 1.25fr; padding: 11px 14px 14px; }
  .laundry-delete-btn { width: 100%; padding: 0 10px; font-size: .72rem; }
  .laundry-delete-reason-option { grid-template-columns: 34px minmax(0,1fr) 20px; padding: 10px; gap: 9px; }
  .laundry-delete-reason-icon { width: 32px; height: 32px; }
  .laundry-delete-reason-copy strong { font-size: .82rem; }
  .laundry-delete-reason-copy small { font-size: .67rem; }

  /* Deleted page has two controls per filter row; cancel the old forced 3-column rule. */
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .transaction-report-filters > .daily-report-filter-source.daily-report-controls-source:first-child,
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .transaction-status-filters-source {
    --report-mobile-control-columns: repeat(2,minmax(0,1fr)) !important;
    --report-control-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* The 10th canonical cell becomes deletion metadata + manual permanent action. */
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) {
    grid-template-areas:
      "number invoice total"
      "number date process"
      "number customer payment"
      "actions actions actions" !important;
  }
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(10) {
    display: block !important;
    margin-top: 7px !important;
    padding-top: 10px !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-info-source {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-date-source,
  body.laundry-deleted-transactions-page .deleted-reason-source {
    grid-template-columns: 64px minmax(0,1fr) !important;
  }
  body.laundry-deleted-transactions-page .deleted-permanent-button-source {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-top: 3px !important;
  }
}

/* R50 final polish: canonical card/filter proportions for Deleted Transactions. */
body.laundry-deleted-transactions-page .card {
  overflow: visible !important;
}
body.laundry-deleted-transactions-page .deleted-transaction-heading-source {
  min-height: 42px !important;
  padding: 0 !important;
}
body.laundry-deleted-transactions-page .deleted-transaction-heading-source h5 {
  color: #24384b !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
}
body.laundry-deleted-transactions-page .transaction-report-filters {
  display: grid !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
body.laundry-deleted-transactions-page .transaction-report-filters > .daily-report-filter-source {
  width: 100% !important;
  margin: 0 !important;
  gap: 10px !important;
}
body.laundry-deleted-transactions-page .transaction-report-filters .report-control-cell > label {
  color: #56687a !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}
body.laundry-deleted-transactions-page .transaction-total-count {
  margin: 2px 0 10px !important;
  color: #5e7081 !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}
body.laundry-deleted-transactions-page .p-datatable-header {
  padding: 10px 12px !important;
}
body.laundry-deleted-transactions-page .p-datatable-header .p-inputtext {
  min-height: 36px !important;
  border-radius: 9px !important;
  font-size: .78rem !important;
}
.laundry-delete-btn.danger {
  border-color: #d63b3b !important;
  background: #d63b3b !important;
}

@media (min-width: 769px) {
  body.laundry-deleted-transactions-page .transaction-report-filters {
    grid-template-columns: 1fr !important;
  }
  body.laundry-deleted-transactions-page .transaction-report-filters > .daily-report-filter-source {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.laundry-deleted-transactions-page .p-datatable-header > div {
    justify-content: flex-end !important;
  }
  body.laundry-deleted-transactions-page .p-datatable-header .p-inputtext {
    width: 260px !important;
  }
}

@media (max-width: 768px) {
  body.laundry-deleted-transactions-page .card {
    border-radius: 12px !important;
  }
  body.laundry-deleted-transactions-page .deleted-transaction-heading-source {
    min-height: 34px !important;
    margin-bottom: 10px !important;
  }
  body.laundry-deleted-transactions-page .deleted-transaction-heading-source h5 {
    font-size: 1rem !important;
  }
  body.laundry-deleted-transactions-page .transaction-report-filters {
    gap: 8px !important;
    margin-bottom: 9px !important;
  }
  body.laundry-deleted-transactions-page .transaction-report-filters .report-control-cell > label {
    font-size: .69rem !important;
    margin-bottom: 5px !important;
  }
  body.laundry-deleted-transactions-page .transaction-total-count {
    margin: 1px 0 8px !important;
    font-size: .72rem !important;
  }
  body.laundry-deleted-transactions-page .p-datatable-header {
    padding: 8px !important;
  }
  body.laundry-deleted-transactions-page .p-datatable-header > div,
  body.laundry-deleted-transactions-page .p-datatable-header .p-iconfield,
  body.laundry-deleted-transactions-page .p-datatable-header .p-inputtext {
    width: 100% !important;
  }
  body.laundry-deleted-transactions-page .deleted-reason-source strong {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}


/* R51 — Transaksi Dihapus mobile alignment + keyboard-safe delete dialogs. */
.laundry-delete-modal {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: min(760px, calc(100% - 36px)) !important;
}
.laundry-delete-modal-header,
.laundry-delete-modal-footer { flex: 0 0 auto !important; }
.laundry-delete-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Reuse the canonical compact action-button geometry: icon only, perfect square. */
body.laundry-deleted-transactions-page .deleted-at-info-source {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 32px !important;
  grid-template-areas:
    "deleted action"
    "reason action" !important;
  column-gap: 9px !important;
  row-gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
}
body.laundry-deleted-transactions-page .deleted-at-date-source { grid-area: deleted !important; }
body.laundry-deleted-transactions-page .deleted-reason-source { grid-area: reason !important; }
body.laundry-deleted-transactions-page .deleted-at-date-source,
body.laundry-deleted-transactions-page .deleted-reason-source {
  grid-template-columns: 64px minmax(0,1fr) !important;
  gap: 7px !important;
  margin: 0 !important;
}
body.laundry-deleted-transactions-page .deleted-permanent-button-source {
  grid-area: action !important;
  justify-self: end !important;
  align-self: center !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.laundry-deleted-transactions-page .deleted-permanent-button-source .p-button-icon {
  margin: 0 !important;
  font-size: .78rem !important;
}

@media (max-width: 768px) {
  /* Dialog stays inside the *visible* viewport, including when Android keyboard opens. */
  .laundry-delete-modal-root {
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  .laundry-delete-modal {
    width: 100% !important;
    max-height: calc(100% - 8px) !important;
    border-radius: 15px !important;
  }
  .laundry-delete-modal-body {
    padding: 12px 14px !important;
    scroll-padding-top: 12px !important;
    scroll-padding-bottom: 12px !important;
  }
  .laundry-delete-modal-header {
    padding: 13px 14px 11px !important;
  }
  .laundry-delete-modal-footer {
    padding: 10px 14px 12px !important;
  }
  .laundry-delete-other-wrap textarea {
    min-height: 72px !important;
    resize: none !important;
  }
  .laundry-delete-keyboard-focus .laundry-delete-modal {
    max-height: calc(100% - 6px) !important;
  }

  /* Start the delete metadata at the invoice/customer column, not under the number badge. */
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) {
    grid-template-areas:
      "number invoice total"
      "number date process"
      "number customer payment"
      "number actions actions" !important;
    row-gap: 6px !important;
    padding-bottom: 11px !important;
  }
  body.laundry-deleted-transactions-page.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(10) {
    grid-area: actions !important;
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding-top: 9px !important;
    border-top: 1px solid #eef2f6 !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-info-source {
    grid-template-columns: minmax(0,1fr) 32px !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-date-source,
  body.laundry-deleted-transactions-page .deleted-reason-source {
    grid-template-columns: 54px minmax(0,1fr) !important;
    gap: 6px !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-label-source,
  body.laundry-deleted-transactions-page .deleted-reason-label-source {
    font-size: .61rem !important;
    line-height: 1.3 !important;
  }
  body.laundry-deleted-transactions-page .deleted-at-date-source strong,
  body.laundry-deleted-transactions-page .deleted-reason-source strong {
    font-size: .73rem !important;
    line-height: 1.3 !important;
  }
  body.laundry-deleted-transactions-page .deleted-permanent-button-source {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
  }
}


/* R54 — hard canonical mobile alignment for Transaksi Dihapus.
   Unique cell selectors make this independent from route helper classes. */
@media (max-width: 768px) {
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td.deleted-at-column-source {
    grid-area: auto !important;
    grid-column: 2 / 4 !important;
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 5px 0 0 !important;
    padding: 9px 0 0 !important;
    border-top: 1px solid #eef2f6 !important;
    text-align: left !important;
    justify-self: stretch !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.deleted-at-column-source > .deleted-at-info-source {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 32px !important;
    grid-template-areas: "deleted action" "reason action" !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-at-date-source { grid-area: deleted !important; }
  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-reason-source { grid-area: reason !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 {
    display: grid !important;
    grid-template-columns: 64px minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: stretch !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-permanent-button-source {
    grid-area: action !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; min-width: 32px !important; max-width: 32px !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    margin: 0 !important; padding: 0 !important; border-radius: 8px !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table .deleted-permanent-button-source .p-button-icon {
    margin: 0 !important; font-size: .78rem !important;
  }
}