/* Extracted shared detail layout layer from styles-layout.css. Keep this file loaded after styles-layout.css. */

/* Shared detail overflow contract.
   Dense detail blocks use two side-by-side fields. Long fields keep the layout
   stable with inner scrolling and can be resized by the user when inspection
   needs more space. */
.record-detail-list,
.payment-approval-main {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
}

.record-detail-list.is-dense-detail,
.payment-approval-main.is-dense-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.record-detail-list.is-dense-detail .detail-item,
.payment-approval-main.is-dense-detail > div {
  min-width: 0;
  grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
}

.payment-approval-main > .detail-payment-sum {
  grid-column: 1 / -1;
}

.record-detail-list.is-resizable-detail,
.task-view-details:has(.is-resizable-detail),
.detail-panel:has(.is-resizable-detail) {
  max-height: min(70vh, 720px);
  overflow: auto;
  resize: vertical;
  scrollbar-gutter: stable;
}

.record-detail-list .detail-item,
.payment-approval-main > div {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.record-detail-list .detail-item > dd,
.payment-approval-main > div > dd {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.record-detail-list .detail-item.is-long-detail > dd,
.payment-approval-main > div.is-long-detail > dd {
  max-height: 5.4em;
  overflow: auto;
  resize: vertical;
  scrollbar-gutter: stable;
}

@container (max-width: 360px) {
  .record-detail-list.is-dense-detail,
  .payment-approval-main.is-dense-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.payment-confirm-scope {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: 12px;
  background: #fffaf2;
}

.payment-confirm-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.payment-confirm-row-list label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}

.payment-confirm-row-list em,
.payment-confirm-row-list strong {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-confirm-row-list small {
  grid-column: 2;
  width: fit-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f4edf0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.payment-confirm-row-list label.is-confirmed {
  border-color: #8c6d79;
  background: #fff7fa;
}

.payment-confirm-row-list label.is-confirmed small {
  background: #f6e2e9;
  color: var(--brand);
}

.cs-filter-bar,
.audit-filter-bar,
.record-filter-bar,
.task-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(4, minmax(142px, .72fr));
  align-items: stretch;
  gap: 10px;
}

.cs-filter-bar {
  grid-template-columns: minmax(240px, 1.15fr) repeat(6, minmax(124px, .66fr)) 46px;
  align-items: start;
}

.audit-filter-bar {
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(140px, .66fr)) minmax(210px, .84fr) auto;
  align-items: end;
}

.record-filter-bar,
.task-filters {
  grid-template-columns: minmax(240px, 1.18fr) repeat(5, minmax(130px, .68fr)) minmax(210px, .9fr);
}

.cs-filter-bar > input,
.cs-filter-bar .date-range-control,
.cs-filter-bar .cs-multi-filter,
.audit-filter-bar > *,
.task-filters > *,
.record-filter-bar > * {
  min-width: 0;
}

.record-filter-bar .date-range-control {
  grid-column: span 2;
}

.cs-filter-bar .date-range-control,
.task-filters .date-range-control {
  grid-column: auto;
}

.cs-filter-bar .date-range-control {
  max-width: 360px;
}

.cs-filter-bar #csResetWindow,
.record-filter-bar .record-filter-reset,
.audit-filter-bar .audit-clear-filter {
  justify-self: end;
}

.cs-multi-filter {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.record-multi-filter,
.task-multi-filter {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdfb;
}

.cs-multi-filter > summary,
.record-multi-filter > summary,
.task-multi-filter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}

.cs-multi-filter > summary span,
.record-multi-filter > summary span,
.task-multi-filter > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-multi-filter > summary::-webkit-details-marker,
.task-multi-filter > summary::-webkit-details-marker {
  display: none;
}

.record-multi-filter > summary::after,
.task-multi-filter > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  color: var(--accent);
}

.record-multi-filter[open] > summary::after,
.task-multi-filter[open] > summary::after {
  transform: rotate(180deg);
}

.cs-multi-filter > div.cs-multi-panel,
.record-multi-filter > div.record-multi-panel,
.task-multi-filter > div.task-multi-panel {
  left: 0;
  right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: min(360px, calc(100vw - 48px)) !important;
  min-width: min(280px, calc(100vw - 48px)) !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  max-height: min(420px, 58vh);
  overflow: auto;
  padding: 10px;
  z-index: 180;
  position: absolute;
  top: calc(100% + 8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf7;
  box-shadow: 0 16px 34px rgba(60, 42, 45, .16);
}

.cs-multi-filter[data-cs-multi="module"] > div.cs-multi-panel,
.cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel,
.record-multi-filter[data-record-multi="paymentStyle"] > div.record-multi-panel,
.record-multi-filter[data-record-multi="approvedBy"] > div.record-multi-panel,
.task-multi-filter[data-task-multi="approvedBy"] > div.task-multi-panel {
  left: auto;
  right: 0;
}

.cs-multi-filter label,
.record-multi-filter label,
.task-multi-filter label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
}

.cs-multi-filter label input,
.record-multi-filter label input,
.task-multi-filter label input {
  justify-self: center;
  width: 16px;
  height: 16px;
}

.cs-multi-filter label span,
.record-multi-filter label span,
.task-multi-filter label span,
.cs-multi-panel label span,
.record-multi-panel label span,
.task-multi-panel label span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.25;
  white-space: normal;
}

.record-multi-filter label:hover,
.task-multi-filter label:hover {
  background: #f6eceb;
}

.cs-heat-inline-detail,
.cs-heatmap-detail-outside,
.cs-document-panel,
.cs-document-detail,
.cs-section-body,
.cs-mini-details {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.cs-mini-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.cs-mini-details span,
.cs-mini-details div,
.cs-mini-details b,
.cs-mini-details dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cs-document-panel,
.cs-doc-group,
.cs-compact-row,
.cs-compact-main,
.cs-photo-strip {
  min-width: 0;
  max-width: 100%;
}

.cs-compact-row {
  grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr) minmax(100px, auto);
  align-items: stretch;
}

.cs-compact-main,
.cs-photo-strip {
  overflow: hidden;
}

.cs-payment-row-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  min-width: 0;
}

.cs-payment-row-list article {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #f0dedb;
  border-radius: 12px;
  background: #fffdfa;
  min-width: 0;
}

.cs-payment-row-list b,
.cs-payment-row-list span {
  min-width: 0;
  overflow-wrap: break-word;
}

.cs-payment-row-list b {
  color: var(--brand);
  font-size: 12px;
}

.cs-payment-row-list span {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.existing-customer-payment-preview {
  max-width: 100%;
  max-height: none;
  overflow: visible;
}

.existing-customer-payment-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.existing-invoice-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.existing-invoice-summary div,
.existing-invoice-summary dd {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.existing-invoice-summary .wide {
  grid-column: 1 / -1;
}

.audit-log-list {
  display: grid;
  gap: 10px;
}

.audit-log-item {
  display: grid;
  grid-template-columns: minmax(210px, .28fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.audit-log-meta,
.audit-log-main,
.audit-detail-row,
.audit-detail-summary,
.audit-change-grid,
.audit-raw-json pre {
  min-width: 0;
  max-width: 100%;
}

.audit-log-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
}

.audit-log-meta time,
.audit-log-meta .audit-done-by,
.audit-log-meta em,
.audit-log-main strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.audit-log-meta em {
  grid-column: 1 / -1;
}

.audit-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1200px) {
  .task-board.task-summary-grid,
  #taskResults .task-board.task-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .record-filter-bar,
  .task-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-filter-bar > input,
  .audit-filter-bar .field:first-child,
  .record-filter-search,
  .task-filters > input {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .customer-payment-details-head,
  body.mobile-preview-mode .customer-payment-details-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .task-board.task-summary-grid,
  #taskResults .task-board.task-summary-grid {
    grid-template-columns: 1fr;
  }

  .task-filters,
  .record-filter-bar,
  .cs-filter-bar,
  .audit-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .task-filters > input,
  .audit-filter-bar .field:first-child,
  .record-filter-search,
  .cs-filter-bar > input,
  .task-filters .date-range-control,
  .record-filter-bar .date-range-control,
  .cs-filter-bar .date-range-control {
    grid-column: 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 {
    position: absolute !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);
  }

  .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 {
    left: auto !important;
    right: 0 !important;
  }

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

  .customer-payment-row-card .customer-payment-row-title,
  .customer-payment-row-card .customer-payment-style-stack,
  .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-type-field,
  #editRecordForm [data-edit-customer-payment-row] .customer-payment-row-card-fields {
    grid-column: 1 / -1;
  }

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

  .customer-payment-row-card .customer-payment-deposit-field:not(.is-hidden) {
    grid-column: 1;
  }

  .customer-payment-row-card .customer-payment-full-field {
    grid-column: 2;
  }

  .customer-payment-row-card .customer-payment-deposit-field.is-hidden + .customer-payment-full-field {
    grid-column: 1 / -1;
  }

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

  .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(18px, 1fr)) 4px repeat(2, minmax(18px, .82fr));
    gap: 2px;
    padding: 3px;
  }

  .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-height: 36px;
    height: 36px;
    font-size: 15px;
    padding: 0;
  }

  .existing-invoice-summary,
  .confirm-box .existing-invoice-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .confirm-box,
  .confirm-box .existing-customer-payment-preview {
    max-height: none;
    overflow: visible;
  }

  .confirm-box .existing-invoice-summary .wide,
  .confirm-box .existing-invoice-summary div:nth-last-child(1) {
    grid-column: 1 / -1;
  }

  .cs-mini-details,
  .cs-section-body,
  .cs-document-detail {
    grid-template-columns: 1fr !important;
  }

  .cs-compact-row {
    grid-template-columns: 1fr !important;
  }

  .cs-payment-row-list {
    grid-template-columns: 1fr;
  }

  .task-payment-row-detail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-log-item {
    grid-template-columns: 1fr;
  }
}

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

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 .record-filter-bar .date-range-control,
body.mobile-preview-mode .task-filters .date-range-control {
  grid-column: 1 / -1 !important;
}

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

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

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

body.mobile-preview-mode .task-board.task-summary-grid,
body.mobile-preview-mode #taskResults .task-board.task-summary-grid,
body.mobile-preview-mode .cs-compact-row,
body.mobile-preview-mode .audit-log-item {
  grid-template-columns: 1fr !important;
}

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

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

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

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

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

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

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

body.mobile-preview-mode .task-payment-row-detail dl {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.mobile-preview-mode .task-payment-row-detail div {
  padding: 7px;
  min-width: 0;
}

body.mobile-preview-mode .task-payment-row-detail dt {
  font-size: 9px;
  line-height: 1.15;
  overflow-wrap: break-word;
}

body.mobile-preview-mode .task-payment-row-detail dd {
  font-size: 12px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

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;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  width: min(320px, calc(100vw - 48px)) !important;
  min-width: min(260px, calc(100vw - 48px)) !important;
  max-width: min(340px, calc(100vw - 48px)) !important;
  max-height: min(52vh, 360px);
  overflow: auto;
}

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

@media (max-width: 430px) {
  .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;
  }

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

  .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;
  }

  .existing-invoice-summary,
  .confirm-box .existing-invoice-summary {
    grid-template-columns: 1fr;
  }

  .task-payment-row-detail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}