/* Extracted preview layout layer from styles-layout.css. Keep this file loaded after styles-layout-details.css. */

/* Desktop mobile-preview must behave like a phone even when Chrome is wide. */
body.mobile-preview-mode .customer-payment-details-head {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile-preview-mode .customer-payment-details-head .field,
body.mobile-preview-mode .customer-payment-details-head select,
body.mobile-preview-mode .customer-payment-details-head input {
  min-width: 0;
  width: 100%;
}

body.mobile-preview-mode .customer-payment-details-head .customer-payment-reset {
  grid-column: 1 / -1;
}

body.mobile-preview-mode .customer-payment-service-charge-row {
  grid-template-columns: minmax(136px, .44fr) minmax(0, .56fr);
  width: 100%;
}

body.mobile-preview-mode .customer-payment-service-charge-row:not([open]) {
  width: min(260px, 100%);
  grid-template-columns: minmax(0, 1fr);
}

body.mobile-preview-mode .customer-payment-row-card,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row].customer-payment-row-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-inline: 12px;
}

body.mobile-preview-mode .customer-payment-row-card .customer-payment-row-title,
body.mobile-preview-mode .customer-payment-row-card .customer-payment-style-stack,
body.mobile-preview-mode .customer-payment-row-card .customer-payment-type-field,
body.mobile-preview-mode .customer-payment-row-card .customer-payment-row-card-fields,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-title,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-style-stack,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-type-field,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-card-fields {
  grid-column: 1 / -1;
}

body.mobile-preview-mode .customer-payment-row-card .customer-payment-row-title,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-title {
  padding-inline: 2px;
  min-width: 0;
}

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

body.mobile-preview-mode .customer-payment-row-card .customer-payment-full-field,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-full-field {
  grid-column: 2;
}

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

body.mobile-preview-mode .customer-payment-row-card .customer-payment-row-card-fields,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-card-fields {
  grid-template-columns: 1fr;
}

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

body.mobile-preview-mode .customer-payment-amount-field .amount-lock-window .amount-digit,
body.mobile-preview-mode .customer-payment-amount-field .amount-lock-window .amount-cent-digit,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
body.mobile-preview-mode #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  min-height: 34px !important;
  height: 34px !important;
  font-size: clamp(11px, 3.2vw, 15px) !important;
  padding: 0 !important;
}

@media (max-width: 340px) {
  body.mobile-preview-mode .task-payment-row-detail dl,
  body.mobile-preview-mode .payment-confirm-row-list,
  body.mobile-preview-mode .cs-mini-details {
    grid-template-columns: 1fr !important;
  }
}

/* Final layout guards: keep later feature layers from changing core grids. */
@media (min-width: 761px) {
  body:not(.mobile-preview-mode) .task-board.task-summary-grid,
  body:not(.mobile-preview-mode) #taskResults .task-board.task-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.mobile-preview-mode) .task-filters {
    grid-template-columns:
      minmax(260px, 1.35fr)
      minmax(160px, .78fr)
      repeat(3, minmax(130px, .66fr))
      minmax(164px, .74fr)
      minmax(210px, .88fr) !important;
  }

  body:not(.mobile-preview-mode) .task-filters .date-range-control {
    grid-column: auto !important;
  }

  body:not(.mobile-preview-mode) .cs-filter-bar {
    grid-template-columns:
      minmax(260px, 1.25fr)
      repeat(6, minmax(126px, .66fr))
      46px !important;
  }

  body:not(.mobile-preview-mode) .audit-filter-bar {
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, .66fr)) minmax(214px, .78fr) auto !important;
  }

  body:not(.mobile-preview-mode) .record-filter-bar {
    grid-template-columns:
      minmax(260px, 1.25fr)
      repeat(5, minmax(132px, .66fr))
      minmax(214px, .88fr) !important;
  }
}

/* P1/P2 shared layout contract: filters and document details stay stable across modules. */
@media (min-width: 761px) {
  body:not(.mobile-preview-mode) .cs-filter-bar {
    grid-template-columns:
      minmax(260px, 1.22fr)
      repeat(6, minmax(124px, .58fr))
      minmax(214px, .78fr)
      46px !important;
    align-items: stretch;
  }

  body:not(.mobile-preview-mode) .record-filter-bar {
    grid-template-columns:
      minmax(260px, 1.18fr)
      minmax(176px, .72fr)
      repeat(4, minmax(126px, .58fr))
      minmax(214px, .78fr)
      46px !important;
    align-items: stretch;
  }

  body:not(.mobile-preview-mode) .task-filters {
    grid-template-columns:
      minmax(260px, 1.2fr)
      minmax(190px, .76fr)
      repeat(3, minmax(126px, .56fr))
      minmax(156px, .62fr)
      minmax(214px, .78fr) !important;
    align-items: stretch;
  }

  body:not(.mobile-preview-mode) .audit-filter-bar {
    grid-template-columns:
      minmax(260px, 1.25fr)
      repeat(3, minmax(156px, .64fr))
      minmax(214px, .78fr)
      minmax(46px, auto) !important;
    align-items: end;
  }

  body:not(.mobile-preview-mode) .task-board.task-summary-grid,
  body:not(.mobile-preview-mode) #taskResults .task-board.task-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.cs-heat-inline-detail {
  display: none;
}

.cs-heatmap-detail-outside {
  display: block;
  scroll-margin-top: 18px;
}

.cs-document-panel {
  min-width: 0;
  max-width: 100%;
}

.cs-compact-row {
  grid-template-columns: minmax(190px, .26fr) minmax(0, 1fr) minmax(120px, .16fr) !important;
  align-items: start;
}

.cs-mini-details {
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)) !important;
}

.cs-mini-details span,
.cs-document-summary span,
.cs-payment-row-list article {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.cs-mini-details b,
.cs-document-summary b,
.cs-payment-row-list span {
  overflow-wrap: anywhere;
}

.cs-payment-row-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.cs-photo-strip {
  min-width: 0;
  justify-content: flex-start;
}

.record-filter-branch,
.task-filter-branch {
  min-width: 0;
}

.record-filter-branch .field,
.task-filter-branch select {
  min-width: 0;
}

@media (max-width: 760px) {
  .cs-filter-bar,
  .audit-filter-bar,
  .record-filter-bar,
  .task-filters,
  body.mobile-preview-mode .cs-filter-bar,
  body.mobile-preview-mode .audit-filter-bar,
  body.mobile-preview-mode .record-filter-bar,
  body.mobile-preview-mode .task-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .cs-filter-bar > input,
  .audit-filter-bar .field:first-child,
  .record-filter-search,
  .task-filters > input,
  .cs-filter-bar .date-range-control,
  .audit-filter-bar .date-range-control,
  .record-filter-bar .date-range-control,
  .task-filters .date-range-control,
  body.mobile-preview-mode .cs-filter-bar > input,
  body.mobile-preview-mode .audit-filter-bar .field:first-child,
  body.mobile-preview-mode .record-filter-search,
  body.mobile-preview-mode .task-filters > input,
  body.mobile-preview-mode .cs-filter-bar .date-range-control,
  body.mobile-preview-mode .audit-filter-bar .date-range-control,
  body.mobile-preview-mode .record-filter-bar .date-range-control,
  body.mobile-preview-mode .task-filters .date-range-control {
    grid-column: 1 / -1 !important;
  }

  .record-filter-branch,
  .task-filter-branch,
  body.mobile-preview-mode .record-filter-branch,
  body.mobile-preview-mode .task-filter-branch {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) minmax(66px, auto) !important;
  }

  .record-branch-staff-scope,
  .task-branch-staff-scope,
  body.mobile-preview-mode .record-branch-staff-scope,
  body.mobile-preview-mode .task-branch-staff-scope {
    min-width: 0;
    width: auto;
    padding-inline: 7px;
    white-space: normal;
    line-height: 1.1;
  }

  .cs-multi-filter > div.cs-multi-panel,
  .cs-multi-filter[data-cs-multi="branch"] > div.cs-multi-panel,
  .cs-multi-filter[data-cs-multi="module"] > div.cs-multi-panel,
  .cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="branch"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="module"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel {
    position: absolute !important;
    inset: auto !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(320px, calc(100vw - 32px)) !important;
    min-width: min(220px, calc(100vw - 32px)) !important;
    max-width: min(340px, calc(100vw - 32px)) !important;
    max-height: min(56vh, 420px);
    overflow: auto;
  }

  .cs-multi-filter[data-cs-multi="department"] > div.cs-multi-panel,
  .cs-multi-filter[data-cs-multi="createdBy"] > div.cs-multi-panel,
  .cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="department"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="createdBy"] > div.cs-multi-panel,
  body.mobile-preview-mode .cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel {
    left: auto !important;
    right: 0 !important;
  }

  .cs-date-lane.has-inline-detail {
    grid-column: 1 / -1;
  }

  .cs-heatmap-title,
  body.mobile-preview-mode .cs-heatmap-title {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  .cs-heatmap-count,
  body.mobile-preview-mode .cs-heatmap-count {
    display: inline-flex;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    align-items: baseline;
    text-align: left;
    justify-items: start;
  }

  .cs-heatmap-count span,
  body.mobile-preview-mode .cs-heatmap-count span {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  .cs-heatmap > .empty,
  body.mobile-preview-mode .cs-heatmap > .empty {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: 18px 12px;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    line-height: 1.35;
  }

  .cs-heat-inline-detail,
  body.mobile-preview-mode .cs-heat-inline-detail {
    display: block;
    margin: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
  }

  .cs-heatmap-detail-outside,
  body.mobile-preview-mode .cs-heatmap-detail-outside {
    display: none;
  }

  .cs-compact-row,
  body.mobile-preview-mode .cs-compact-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 8px;
  }

  .cs-document-summary,
  body.mobile-preview-mode .cs-document-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cs-compact-row .cs-mini-details,
  body.mobile-preview-mode .cs-compact-row .cs-mini-details {
    grid-template-columns: 1fr !important;
  }

  .cs-compact-row .cs-mini-details span,
  body.mobile-preview-mode .cs-compact-row .cs-mini-details span {
    display: grid;
    grid-template-columns: minmax(78px, .34fr) minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }

  .cs-payment-row-list,
  body.mobile-preview-mode .cs-payment-row-list {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop mobile-preview uses a wide viewport, so keep the critical mobile
   layout rules active through the mode class as well as media queries. */
body.mobile-preview-mode .btn.small,
body.mobile-preview-mode .record-bulk-toolbar > summary,
body.mobile-preview-mode .audit-bulk-select-inline,
body.mobile-preview-mode .audit-bulk-row .record-bulk-toolbar > summary {
  min-height: 44px;
}

body.mobile-preview-mode .audit-bulk-row {
  display: grid !important;
  grid-template-columns: minmax(128px, .46fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px;
}

body.mobile-preview-mode .audit-bulk-select-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  min-width: 0;
  overflow: hidden;
  padding-inline: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 248, .86);
}

body.mobile-preview-mode .audit-bulk-select-inline input {
  flex: 0 0 auto;
}

body.mobile-preview-mode .audit-bulk-select-inline span {
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  clip: auto !important;
  line-height: 1.05;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}

body.mobile-preview-mode .audit-bulk-select-inline::after {
  content: none;
  display: none;
}

body.mobile-preview-mode .audit-bulk-row .record-bulk-toolbar,
body.mobile-preview-mode .audit-bulk-row .record-bulk-toolbar > summary {
  width: 100%;
  min-width: 0;
}

body.mobile-preview-mode .audit-bulk-row .record-bulk-toolbar > summary {
  justify-content: space-between;
}

body.mobile-preview-mode .audit-log-meta {
  grid-template-columns: 1fr !important;
}

body.mobile-preview-mode .audit-log-meta .audit-select {
  display: inline-flex;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 248, .9);
}

body.mobile-preview-mode .audit-log-meta .audit-select span {
  display: inline !important;
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
}

body.mobile-preview-mode .table-wrap table,
body.mobile-preview-mode .compact-table table {
  min-width: 0 !important;
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) :is(.table-wrap, .compact-table) {
  overflow: visible !important;
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) :is(table, thead, tbody, tr, td) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

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

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

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row {
  position: relative;
  display: grid !important;
  gap: 8px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 250, 248, .92);
  box-shadow: 0 8px 20px rgba(78, 37, 48, .055);
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row td {
  display: grid !important;
  grid-template-columns: minmax(82px, .34fr) minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row td::before {
  content: attr(data-cell);
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row .select-col {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex !important;
  justify-content: flex-end;
  width: auto !important;
  padding: 0 !important;
}

body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row .select-col::before,
body.mobile-preview-mode :is(.record-list-card, .deleted-records-card) tr.summary-row td[data-cell=""]::before {
  display: none !important;
  content: "";
}

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

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

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

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

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

body.mobile-preview-mode .cs-document-panel {
  padding: 8px;
}

body.mobile-preview-mode .cs-compact-main {
  grid-template-columns: 1fr;
}

body.mobile-preview-mode .cs-system-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px;
}

body.mobile-preview-mode .cs-system-facts span,
body.mobile-preview-mode .cs-mini-details span {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-height: 0;
  padding: 7px 8px;
}

body.mobile-preview-mode .cs-document-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.mobile-preview-mode .cs-payment-row-list {
  grid-template-columns: 1fr !important;
}