/* Extracted mobile density/layout layer from styles-layout.css. Keep this file loaded after styles-layout.css and before styles-layout-contracts.css. */

/* Mobile density layer: keep the phone UI closer to a data app than a hero page. */
@media (max-width: 760px) {
  body.has-app {
    font-size: 13px;
    line-height: 1.34;
  }

  body.has-app .main {
    padding-inline: 8px !important;
  }

  body.has-app .topbar {
    margin-bottom: 7px !important;
    gap: 6px !important;
    padding-bottom: 7px !important;
  }

  body.has-app .topbar-title {
    gap: 3px !important;
  }

  body.has-app .topbar-title h1 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  body.has-app :is(.section-heading, .card-head, .modal-head) {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body.has-app :is(.section-heading h2, .card-head h2, .mobile-hub-hero h2, .mobile-more-head h2) {
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  body.has-app :is(.card, .record-step-card, .task-card, .cs-card, .mobile-hub-card, .mobile-more-sheet, .confirm-box, .deleted-records-card, .cs-document-panel, .audit-log-card) {
    padding: 10px !important;
    border-radius: 15px !important;
  }

  body.has-app :is(.card + .card, .task-section, .record-step-card, .confirm-box) {
    margin-top: 8px !important;
  }

  body.has-app :is(.field, .admin-switcher) {
    gap: 4px !important;
    margin-block: 7px !important;
  }

  body.has-app :is(.field span, .label, .admin-switcher span, .page-note, .field-hint) {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  body.has-app :is(input, select, textarea) {
    min-height: 40px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 1.24 !important;
  }

  body.has-app textarea {
    min-height: 64px !important;
  }

  body.has-app :is(.btn, .range-trigger, .record-filter-reset, .audit-clear-filter) {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.16 !important;
  }

  body.has-app :is(.badge, .pill, .status, .kicker, .record-transfer-status) {
    min-height: 0 !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.has-app p {
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  body.has-app .lang-icon {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    grid-template-rows: 20px 12px !important;
  }

  body.has-app .lang-icon span {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  body.has-app .lang-icon b {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  body.has-app .task-board {
    gap: 8px !important;
  }

  body.has-app .task-card {
    gap: 7px !important;
  }

  body.has-app .task-card h3 {
    font-size: 17px !important;
    line-height: 1.14 !important;
  }

  body.has-app .task-summary-list {
    margin-top: 6px !important;
    border-radius: 11px !important;
  }

  body.has-app .task-summary-list div,
  body.has-app .details-row .detail-item {
    grid-template-columns: minmax(78px, 32%) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 7px !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
  }

  body.has-app :is(.task-summary-list dt, .details-row .detail-item dt, th) {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  body.has-app :is(.task-summary-list dd, .details-row .detail-item dd, td, .full-record, .record-detail-text) {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  body.has-app :is(th, td) {
    padding: 7px !important;
  }

  body.has-app :is(.record-filter-bar, .task-filters, .cs-filter-bar, .audit-filter-bar) {
    gap: 6px !important;
    padding: 8px !important;
  }

  body.has-app :is(.record-multi-filter > summary, .task-multi-filter > summary, .cs-multi-filter > summary, .audit-multi-filter > summary) {
    min-height: 38px !important;
    padding: 7px 28px 7px 9px !important;
    font-size: 12px !important;
  }

  body.has-app :is(.record-multi-panel label, .task-multi-panel label, .cs-multi-panel label, .audit-multi-panel label) {
    min-height: 34px !important;
    padding: 6px 7px !important;
    font-size: 11px !important;
  }

  body.has-app .payment-confirm-row-list {
    gap: 7px !important;
  }

  body.has-app .payment-confirm-row-list label {
    min-height: 104px !important;
    padding: 9px !important;
    font-size: 13px !important;
  }

  body.has-app .payment-confirm-row-list strong {
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  body.has-app .payment-confirm-row-list small {
    font-size: 10px !important;
  }

  body.has-app :is(.customer-payment-row-card, .customer-payment-linked-so) {
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  body.has-app .customer-payment-row-title {
    font-size: 11px !important;
  }

  body.has-app :is(.invoice-digit-row, .amount-digit-row) {
    min-height: 46px !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  body.has-app :is(.invoice-lock-window, .invoice-lock-window .invoice-digit, .amount-lock-window, .amount-lock-window .amount-digit, .amount-lock-window .amount-cent-digit) {
    min-height: 38px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body.has-app .mobile-bottom-nav {
    left: 7px !important;
    right: 7px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    padding: 5px !important;
    border-radius: 17px !important;
  }

  body.has-app .mobile-tab-btn {
    min-height: 44px !important;
    border-radius: 13px !important;
    gap: 0 !important;
    padding: 3px 2px !important;
  }

  body.has-app .mobile-tab-btn span {
    font-size: 16px !important;
  }

  body.has-app .mobile-tab-btn b {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) {
  font-size: 12.5px;
  line-height: 1.3;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .main {
  padding-inline: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar {
  margin-bottom: 7px !important;
  gap: 6px !important;
  padding-bottom: 7px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-title h1 {
  font-size: 20px !important;
  line-height: 1.08 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.section-heading h2, .card-head h2, .mobile-hub-hero h2, .mobile-more-head h2) {
  font-size: 17px !important;
  line-height: 1.12 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.card, .record-step-card, .task-card, .cs-card, .mobile-hub-card, .mobile-more-sheet, .confirm-box, .deleted-records-card, .cs-document-panel, .audit-log-card) {
  padding: 9px !important;
  border-radius: 15px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.field span, .label, .admin-switcher span, .page-note, .field-hint) {
  font-size: 10.5px !important;
  line-height: 1.22 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(input, select, textarea) {
  min-height: 44px !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
  line-height: 1.24 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.btn, .range-trigger, .record-filter-reset, .audit-clear-filter) {
  min-height: 44px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.badge, .pill, .status, .kicker, .record-transfer-status) {
  min-height: 0 !important;
  padding: 4px 7px !important;
  font-size: 10.5px !important;
  line-height: 1.12 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .lang-icon {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  grid-template-rows: 20px 12px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .lang-icon span {
  font-size: 15px !important;
  line-height: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .lang-icon b {
  font-size: 9px !important;
  line-height: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card h3 {
  font-size: 16px !important;
  line-height: 1.14 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-summary-list div, .details-row .detail-item) {
  grid-template-columns: minmax(78px, 32%) minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 6px 7px !important;
  font-size: 11.5px !important;
  line-height: 1.24 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-summary-list dt, .details-row .detail-item dt, th) {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-summary-list dd, .details-row .detail-item dd, td, .full-record, .record-detail-text) {
  font-size: 11.8px !important;
  line-height: 1.28 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.invoice-lock-window, .invoice-lock-window .invoice-digit, .amount-lock-window, .amount-lock-window .amount-digit, .amount-lock-window .amount-cent-digit) {
  min-height: 38px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .mobile-tab-btn {
  min-height: 44px !important;
  border-radius: 13px !important;
  gap: 0 !important;
  padding: 3px 2px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .mobile-tab-btn span {
  font-size: 16px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .mobile-tab-btn b {
  font-size: 9.5px !important;
  line-height: 1 !important;
}

/* Mobile task detail readability guardrail.
   Payment Rows use their dedicated cards; generic View Details should not
   squeeze long values into narrow two-column cells on phone widths. */
@container (max-width: 520px) {
  .record-detail-list.is-dense-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .payment-approval-main.is-dense-detail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .payment-approval-main > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 7px 10px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .payment-approval-main > :is(.detail-payment-sum, .is-long-detail) {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .details-row .record-detail-list.is-dense-detail {
  grid-template-columns: minmax(0, 1fr) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .details-row .record-detail-list .detail-item {
  grid-template-columns: minmax(88px, 30%) minmax(0, 1fr) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card :is(.payment-approval-main, .task-detail-items, .task-payment-row-detail) dd,
body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .amount-cell {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .amount-cell {
  min-width: 0 !important;
  width: 100% !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .amount-cell :is(b, small) {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .document-link {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .collapsible-records-card > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .collapsible-records-card > summary > span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .collapsible-records-card > summary :is(.kicker, b, em) {
  line-height: 1.2 !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .collapsible-records-card > summary b {
  white-space: normal !important;
}

/* Sales Task View Details card layout.
   Payment Row 1-5 lives in .task-payment-rows only; generic details use the
   same clear card pattern so field values stay visible instead of being hidden
   inside cramped summary cells. */
.task-view-details .task-detail-card-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
  resize: none !important;
}

.task-view-details .task-detail-card-list > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 64px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fffdfa !important;
  overflow: visible !important;
}

.task-view-details .task-detail-card-list > div:first-child {
  border-top: 1px solid var(--line) !important;
}

.task-view-details .task-detail-card-list > div.is-long-detail {
  grid-column: 1 / -1 !important;
}

.task-view-details .task-detail-card-list dt,
.task-payment-row-detail dt {
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.task-view-details .task-detail-card-list dd,
.task-payment-row-detail dd {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  max-height: none !important;
  resize: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-view-details .task-detail-card-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-view-details .task-detail-card-list.is-dense-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-view-details .task-detail-card-list > div {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 58px !important;
  padding: 9px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-view-details .task-detail-card-list > div.is-long-detail {
  grid-column: 1 / -1 !important;
}

/* Final compact sizing contract.
   Keep media and form controls bounded so later module work cannot make
   photos, fields, or amount controls grow past their containers. */
.photo-grid,
.photo-preview-grid,
.submission-photo-preview {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 88px), 112px)) !important;
  gap: 8px !important;
  align-items: start !important;
  justify-content: start !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.photo-grid.empty-photo {
  grid-template-columns: minmax(0, 1fr) !important;
}

.photo-grid > .photo-thumb,
.photo-grid > button.photo-thumb,
.photo-preview-grid > .photo-thumb,
.submission-photo-preview > .photo-thumb,
.submission-photo-preview > .photo-preview-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 112px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.photo-thumb img,
.photo-preview-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 84px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.photo-thumb > span,
.photo-thumb small,
.photo-preview-card span,
.photo-preview-card small {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 20px !important;
  padding: 4px 6px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.photo-thumb.placeholder {
  min-height: 92px !important;
  padding: 8px !important;
  align-content: center !important;
  justify-items: center !important;
}

.photo-thumb.placeholder > span:first-child {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  font-size: 10px !important;
}

.photo-preview-body img {
  max-width: 100% !important;
  max-height: min(58vh, 520px) !important;
  object-fit: contain !important;
}

.photo-preview-placeholder {
  max-width: 100% !important;
}

.photo-preview-placeholder img {
  width: min(220px, 100%) !important;
}

.modal-card #editRecordForm [data-edit-customer-payment-row].customer-payment-row-card {
  grid-template-columns: 72px minmax(126px, .78fr) minmax(128px, .72fr) minmax(148px, 1fr) minmax(148px, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.modal-card #editRecordForm [data-edit-customer-payment-row] .field,
.modal-card #editRecordForm [data-edit-customer-payment-row] select,
.modal-card #editRecordForm [data-edit-customer-payment-row] input {
  min-width: 0 !important;
}

.modal-card #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-card-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.customer-payment-amount-field .amount-digit-row,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  grid-template-columns: repeat(5, minmax(12px, 1fr)) 4px repeat(2, minmax(12px, .92fr)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  gap: 2px !important;
  padding: 3px !important;
  overflow: hidden !important;
}

.customer-payment-amount-field .amount-lock-window,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window,
.customer-payment-amount-field .amount-lock-window .amount-digit,
.customer-payment-amount-field .amount-lock-window .amount-cent-digit,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  line-height: 1 !important;
}

.customer-payment-amount-field .amount-lock-window .amount-digit,
.customer-payment-amount-field .amount-lock-window .amount-cent-digit,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
#editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  font-size: clamp(12px, 1.05vw, 15px) !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  .customer-payment-row-card,
  #editRecordForm [data-edit-customer-payment-row].customer-payment-row-card,
  .modal-card #editRecordForm [data-edit-customer-payment-row].customer-payment-row-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  .customer-payment-row-card .customer-payment-row-title,
  .customer-payment-row-card .customer-payment-style-stack,
  .customer-payment-row-card .customer-payment-other-style-field,
  .customer-payment-row-card .customer-payment-type-field,
  .customer-payment-row-card .customer-payment-row-card-fields,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-title,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-style-stack,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-other-style-field,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-type-field,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-card-fields {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .customer-payment-row-card .customer-payment-deposit-field:not(.is-hidden),
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-deposit-field:not(.is-hidden) {
    grid-column: 1 !important;
  }

  .customer-payment-row-card .customer-payment-full-field,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-full-field {
    grid-column: 2 !important;
  }

  .customer-payment-row-card .customer-payment-deposit-field.is-hidden + .customer-payment-full-field,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-deposit-field.is-hidden + .customer-payment-full-field {
    grid-column: 1 / -1 !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.field, .admin-switcher) {
  gap: 3px !important;
  margin-block: 5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) textarea {
  min-height: 56px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.photo-grid, .photo-preview-grid, .submission-photo-preview) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.photo-thumb, .photo-preview-card) {
  max-width: 100% !important;
  border-radius: 10px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.photo-thumb img, .photo-preview-card img) {
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.photo-thumb > span, .photo-thumb small, .photo-preview-card span, .photo-preview-card small) {
  min-height: 18px !important;
  padding: 3px 5px !important;
  font-size: 9px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-entry > summary {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-entry > summary span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 20px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-entry > summary b {
  font-size: 13px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-entry > summary small {
  max-width: 88px;
  font-size: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-form {
  gap: 8px;
  padding: 0 8px 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-kcode-field, .store-db-content-field, .store-db-remark-field, .store-db-branch-allocation-field, .store-db-left-field, .store-db-right-field) {
  grid-column: 1 / -1;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-grid :is(input, textarea) {
  min-height: 38px !important;
  font-size: 12px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-photo-field .photo-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-photo-field :is(.photo-add-card, .photo-preview-card) {
  width: 100% !important;
  min-height: 92px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-edit-modal {
  width: min(430px, calc(100vw - 16px));
  padding: 10px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-edit-photo-policy {
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-edit-existing-photos {
  gap: 4px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-edit-existing-photos span {
  max-width: 132px;
  font-size: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-edit-replace-toggle {
  min-width: 0;
  justify-content: flex-start;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-card {
  gap: 7px;
  padding: 8px;
  border-radius: 13px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-head h3 {
  font-size: 14px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-components {
  grid-template-columns: 1fr;
  gap: 5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-components li {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-mini-photo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-set-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-item-card {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 13px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-photo {
  width: 96px;
  min-height: 112px;
  max-height: 132px;
  border-radius: 12px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-photo img {
  height: 94px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-item-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-item-head .badge {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-item-head .status-badge {
  max-width: 92px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-facts > div {
  padding: 5px 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-facts dt {
  font-size: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-facts dd {
  font-size: 11px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile > summary {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 5px;
  padding: 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile > summary :is(span, b, em) {
  font-size: 9.5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile-facts > div {
  padding: 5px 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile-facts dt {
  font-size: 8.5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile-facts dd {
  font-size: 10.5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 0 6px 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-amount-field, #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field) .amount-digit-row {
  grid-template-columns: repeat(5, minmax(8px, 1fr)) 3px repeat(2, minmax(8px, .92fr)) !important;
  min-height: 34px !important;
  gap: 1px !important;
  padding: 2px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-amount-field, #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field) .amount-lock-window,
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-amount-field, #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field) .amount-lock-window :is(.amount-digit, .amount-cent-digit) {
  min-height: 24px !important;
  height: 24px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-amount-field, #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field) .amount-lock-window :is(.amount-digit, .amount-cent-digit) {
  font-size: clamp(10px, 2.9vw, 13px) !important;
}

.invoice-number-control .invoice-digit-row,
body:is(.mobile-layout-mode, .mobile-preview-mode) .invoice-number-control .invoice-digit-row {
  grid-template-columns: repeat(5, minmax(8px, 1fr)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  gap: 2px !important;
  padding: 2px !important;
  align-items: start !important;
  align-content: start !important;
  overflow: hidden !important;
}

.invoice-number-control .invoice-lock-window,
.invoice-number-control .invoice-lock-window .invoice-digit,
body:is(.mobile-layout-mode, .mobile-preview-mode) .invoice-number-control :is(.invoice-lock-window, .invoice-lock-window .invoice-digit) {
  min-width: 0 !important;
  min-height: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.invoice-number-control .invoice-lock-window .invoice-digit,
body:is(.mobile-layout-mode, .mobile-preview-mode) .invoice-number-control .invoice-lock-window .invoice-digit {
  font-size: clamp(10px, 2.9vw, 13px) !important;
  padding: 0 !important;
}

/* Mobile filter density contract: enough width may use three compact filters per row. */
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
  gap: 6px !important;
}

@media (min-width: 390px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) .date-range-control {
    grid-column: span 2 !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter) > summary,
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.date-range-control .range-trigger, .record-filter-reset, .audit-clear-filter),
body:is(.mobile-layout-mode, .mobile-preview-mode) #csResetWindow {
  min-height: 38px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-filter-search input, .cs-filter-bar > input, .task-filters > input, .audit-filter-bar .field:first-child input) {
  min-height: 40px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter) > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
  width: min(300px, calc(100vw - 22px)) !important;
  max-width: calc(100vw - 22px) !important;
  gap: 6px !important;
}

@media (min-width: 430px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter) > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter) > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) label {
  min-height: 32px !important;
  padding: 5px 6px !important;
  gap: 5px !important;
  font-size: 11.5px !important;
}

/* Record summary mobile two-column contract: short fields pair up; long/action fields take the row. */
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: start !important;
  padding: 8px !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row td {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(226, 205, 204, .78) !important;
  border-radius: 13px !important;
  background: rgba(255, 253, 250, .9) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row td::before {
  display: block !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row .select-col {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
  background: rgba(255, 253, 250, .96) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row .select-col + td {
  padding-right: 50px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row :is(td[data-cell="Payment Sum"], td[data-cell="付款合计"], td[data-cell="Action"], td[data-cell="操作"], .record-action-cell) {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .record-action-cell :is(.record-icon-action, .record-transfer-status-icon) {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

/* Record detail mobile two-column contract: readable facts pair up; long rows span full width. */
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row {
  position: relative !important;
  z-index: 8 !important;
  margin: 8px 0 14px !important;
  background: rgba(255, 253, 250, .98) !important;
  border-radius: 16px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row.hidden {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row td {
  padding: 8px !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .detail-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 8px !important;
  border: 1px solid rgba(226, 205, 204, .84) !important;
  border-radius: 16px !important;
  background: rgba(255, 253, 250, .98) !important;
  box-shadow: 0 12px 26px rgba(42, 31, 34, .06) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list,
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list:is(.is-dense-detail, .is-resizable-detail) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  resize: none !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list .detail-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(226, 205, 204, .82) !important;
  border-radius: 13px !important;
  background: rgba(255, 253, 250, .94) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list .detail-item:is(.detail-item-payment-row, .is-long-detail),
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list .detail-item dd:has(.full-record) {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list .detail-item dt {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row .record-detail-list .detail-item dd {
  min-width: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Document Database mobile selected detail contract: selected CS/SO content must have a readable phone detail panel. */
body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-date-lane.has-inline-detail {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-date-lane.has-inline-detail .cs-heat-cells {
  width: 100% !important;
  min-width: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-heat-inline-detail {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px dashed rgba(151, 76, 98, .28) !important;
}

/* Sales Task card checkbox contract: bulk select is an icon-sized control and never becomes a competing card column. */
body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card {
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card > div {
  min-width: 0 !important;
  padding-right: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-card-select {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(255, 253, 250, .96) !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-card-select span {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-card-head {
  padding-right: 48px !important;
}

/* Mobile density refinement contract: keep header, filters, records and notifications readable without tall chrome. */
body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar {
  gap: 6px !important;
  padding-top: max(7px, env(safe-area-inset-top)) !important;
  padding-bottom: 7px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-title {
  gap: 3px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .lang-icon b {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.card, .task-card, .record-step-card) {
  gap: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.card-head, .task-panel-head, .record-section-head) {
  gap: 5px !important;
  margin-bottom: 4px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.card-head h2, .task-section h3, .record-section-head h2) {
  line-height: 1.05 !important;
  margin: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .date-range-control .range-trigger {
  min-height: 38px !important;
  grid-template-columns: 24px minmax(0, 1fr) 10px !important;
  gap: 5px !important;
  padding: 6px 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .date-range-control .calendar-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 13px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .date-range-control .range-picker-label small {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .date-range-control .range-picker-label b {
  font-size: 11.5px !important;
  line-height: 1.05 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-popover {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: min(520px, calc(100dvh - 138px - env(safe-area-inset-bottom))) !important;
  max-height: min(520px, calc(100dvh - 138px - env(safe-area-inset-bottom))) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.notification-head, .notification-filter-bar, .notification-list-meta) {
  flex: 0 0 auto !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-head {
  padding: 2px 2px 7px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-filter-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 2px 7px !important;
  margin-bottom: 5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-filter-btn {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card .task-view-details[open] {
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card :is(.task-detail-card-list, .task-payment-rows, .task-payment-row-detail) {
  max-height: none !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .customer-payment-row-title {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .customer-payment-type-field {
  grid-column: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .customer-payment-style-stack {
  grid-column: 2 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) :is(.customer-payment-other-style-field, .customer-payment-row-card-fields) {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tbody {
  gap: 11px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row {
  position: relative !important;
  border: 1px solid rgba(226, 205, 204, .9) !important;
  border-left: 4px solid rgba(151, 76, 98, .86) !important;
  border-radius: 17px !important;
  background: rgba(255, 252, 250, .96) !important;
  box-shadow: 0 10px 24px rgba(42, 31, 34, .055) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) tr.summary-row:nth-of-type(4n + 1) {
  background: rgba(255, 248, 250, .98) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-heat-inline-detail {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-heatmap-detail-outside {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  scroll-margin-top: calc(116px + env(safe-area-inset-top)) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-heatmap-detail-outside .cs-document-panel {
  margin-top: 0 !important;
  padding: 9px !important;
  border-radius: 17px !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-head {
  gap: 7px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-detail-filter {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 3px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-detail-filter .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-toolbar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

@media (min-width: 390px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-toolbar input {
  grid-column: 1 / -1 !important;
  flex-basis: auto !important;
  min-height: 40px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-toolbar :is(select, .store-db-multi-filter) {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-toolbar .icon-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.storage-monitor-grid, .storage-monitor-detail-grid) { grid-template-columns: 1fr; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-card { padding: 9px; gap: 8px; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-card-head h3 { font-size: 18px; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-metric { padding: 7px 6px; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card > .muted { font-size: 12px; line-height: 1.42; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card .smoke-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card .smoke-summary div { display: block; min-width: 0; padding: 0; border: 0; background: transparent; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card .smoke-summary :is(b, span) { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card .action-row { display: flex; flex-wrap: wrap; gap: 5px; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .system-smoke-card .action-row button { min-height: 30px; padding: 5px 8px; font-size: 11.5px; }