/* Extracted shared control/filter layer from styles.css. Keep this file loaded after styles-record-entry.css. */

/* Shared UI overflow policy: long user/business content wraps inside cards, while compact controls clip safely. */
.task-summary-list dd,
.record-table td,
.cs-mini-details,
.document-click-tooltip,
.native-title-tooltip,
.task-payment-row-detail,
.permission-module-note {
  min-width: 0;
  overflow-wrap: anywhere;
}
details.permission-row.permission-card > summary::-webkit-details-marker {
  display: none;
}
details.permission-row.permission-card > summary::after {
  content: "▾";
  justify-self: end;
  color: var(--brand);
  font-weight: 950;
}
details.permission-row.permission-card[open] > summary::after {
  transform: rotate(180deg);
}
details.permission-row.permission-card > summary em {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
details.permission-row.permission-card > .permission-toggles {
  padding: 0 14px 14px;
}
.document-click-tooltip {
  position: fixed;
  z-index: 2000;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2b1e1f;
  color: #fffaf7;
  box-shadow: 0 10px 24px rgba(38, 27, 31, .18);
  font-size: 13px;
  font-weight: 850;
  pointer-events: none;
}
.document-click-tooltip > b,
.document-click-tooltip > span,
.document-click-tooltip small { display: block; }
.document-click-tooltip > b { font-size: 14px; }
.document-click-tooltip > span,
.document-click-tooltip small { color: #eadbdd; font-weight: 750; }
.document-click-tooltip ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.document-click-tooltip li { display: grid; gap: 2px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.16); }
.document-click-tooltip li span { color: #fff2ef; font-size: 12px; }
.native-title-tooltip {
  position: fixed;
  z-index: 2147483000;
  max-width: min(280px, calc(100vw - 24px));
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: #2b1e1f;
  color: #fffaf7;
  box-shadow: 0 10px 24px rgba(38, 27, 31, .18);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
  pointer-events: none;
}
.photo-storage-monitor {
  display: grid;
  gap: 14px;
}
.photo-storage-headbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.photo-storage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.photo-storage-results {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.storage-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.storage-monitor-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(42,31,34,.05);
}
.storage-monitor-card-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.storage-monitor-card-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
}
.storage-monitor-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.storage-monitor-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.storage-monitor-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e3f0ed;
  border-radius: 14px;
  background: rgba(244, 251, 249, .78);
}
.storage-monitor-metric b,
.storage-monitor-metric span,
.storage-monitor-metric small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-monitor-metric b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}
.storage-monitor-metric span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}
.storage-monitor-metric small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}
.storage-bucket-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.storage-bucket-chip { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #e3f0ed; border-radius: 14px; background: rgba(244, 251, 249, .78); }
.storage-bucket-chip :is(b, span, small) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-bucket-chip span { color: var(--ink); font-size: 17px; font-weight: 950; }
.storage-bucket-chip small { color: var(--muted); font-size: 10px; font-weight: 850; }
.storage-bucket-internal { border-color: #d7ece8; background: rgba(239, 250, 247, .86); }
.storage-bucket-product { border-color: #ead4dc; background: rgba(252, 239, 245, .88); }
.storage-bucket-external { border-color: #eadfca; background: rgba(255, 249, 236, .9); }
.storage-monitor-details {
  min-width: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid #e6f0ed;
  padding-top: 10px;
}
.storage-monitor-details > summary {
  cursor: pointer;
  color: var(--brand);
  font-size: 12px;
  font-weight: 950;
}
.storage-monitor-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.storage-monitor-key-list {
  min-width: 0;
}
@media (max-width: 860px) {
  .storage-monitor-grid,
  .storage-monitor-detail-grid {
    grid-template-columns: 1fr;
  }
  .storage-monitor-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .storage-monitor-card {
    padding: 11px;
    border-radius: 16px;
  }
  .storage-monitor-card-head h3 {
    font-size: 18px;
  }
  .storage-monitor-metric {
    padding: 8px;
  }
  .storage-monitor-metric span {
    font-size: 14px;
  }
}
.photo-storage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.photo-storage-stat,
.photo-storage-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(42,31,34,.05);
}
.photo-storage-stat {
  display: grid;
  gap: 4px;
  padding: 12px;
}
.photo-storage-stat b,
.photo-storage-panel h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}
.photo-storage-stat span {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}
.photo-storage-stat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.photo-storage-stat-warning {
  border-color: #e4b8a5;
  background: #fff5ed;
}
.photo-storage-limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.photo-storage-limit-row > div {
  min-width: 0;
}
.photo-storage-limit-row p {
  margin: 4px 0 0;
}
.photo-storage-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid #ead4dc;
  border-radius: 999px;
  background: #fff7f4;
}
.photo-storage-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9d5062, #d889a0);
}
.photo-storage-verification {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.photo-storage-verification > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf7;
}
.photo-storage-verification b,
.photo-storage-verification span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-storage-verification b {
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}
.photo-storage-verification span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}
.photo-storage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.photo-storage-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
}
.photo-storage-wide {
  grid-column: 1 / -1;
}
.photo-storage-table {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.photo-storage-count {
  margin: -2px 0 2px;
  font-size: 12px;
  font-weight: 800;
}
.photo-storage-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(86px, .45fr) minmax(86px, .45fr) minmax(86px, .45fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #f0e0e5;
  border-radius: 12px;
  background: #fff;
}
.photo-storage-panel:not(.photo-storage-wide) .photo-storage-row {
  grid-template-columns: minmax(0, 1fr) minmax(72px, .35fr) minmax(82px, .4fr);
}
.photo-storage-row b,
.photo-storage-row span,
.photo-storage-row code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-storage-row b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.photo-storage-row span,
.photo-storage-row code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.photo-storage-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.photo-storage-head {
  background: var(--soft-accent-bg);
}
@media (max-width: 760px) {
  .photo-storage-headbar,
  .photo-storage-limit-row {
    display: grid;
    justify-items: stretch;
  }
  .photo-storage-actions {
    justify-content: stretch;
  }
  .photo-storage-actions .btn,
  .photo-storage-limit-row .btn {
    width: 100%;
  }
  .photo-storage-stats,
  .photo-storage-grid {
    grid-template-columns: 1fr;
  }
  .photo-storage-verification {
    grid-template-columns: 1fr;
  }
  .photo-storage-stat span {
    font-size: 18px;
  }
  .photo-storage-row,
  .photo-storage-panel:not(.photo-storage-wide) .photo-storage-row {
    grid-template-columns: minmax(0, 1fr) minmax(64px, .35fr) minmax(72px, .4fr);
  }
  .photo-storage-wide .photo-storage-row {
    grid-template-columns: minmax(0, 1fr) minmax(54px, .28fr) minmax(70px, .34fr) minmax(70px, .34fr);
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.storage-monitor-grid, .storage-monitor-detail-grid, .photo-storage-grid) {
  grid-template-columns: 1fr;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .photo-storage-monitor,
body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-card {
  gap: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.storage-monitor-card, .photo-storage-panel, .photo-storage-stat) {
  padding: 9px;
  border-radius: 13px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-card-head h3 {
  font-size: 18px;
  line-height: 1.02;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-card-head p {
  font-size: 10.5px;
  line-height: 1.2;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-metric {
  padding: 7px 6px;
  border-radius: 11px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-metric :is(b, small) {
  font-size: 9px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .storage-monitor-metric span {
  font-size: 13px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .photo-storage-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .photo-storage-stat span {
  font-size: 16px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .photo-storage-table {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .photo-storage-row {
  min-width: 360px;
  grid-template-columns: minmax(150px, 1fr) 82px 70px minmax(120px, .8fr);
  gap: 6px;
  padding: 7px;
}
.cs-compact-row {
  grid-template-columns: minmax(190px, .28fr) minmax(0, 1fr) auto;
}
.cs-compact-main {
  align-content: start;
  gap: 8px;
}
.cs-system-facts {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.cs-system-facts span {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #eadbdd;
  border-radius: 10px;
  background: #fffaf7;
}
.cs-system-facts em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: none;
}
.cs-system-facts b {
  font-size: 13px;
  line-height: 1.2;
}
.modal-card:has(#editRecordForm) {
  width: min(1240px, calc(100vw - 28px));
}
.modal-card [data-edit-customer-payment-row].customer-payment-row-card {
  grid-template-columns: 78px minmax(220px, 1fr) minmax(170px, .75fr) minmax(292px, 292px) minmax(292px, 292px) !important;
  overflow: visible;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field {
  max-width: 292px;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  grid-template-columns: repeat(5, 31px) 5px repeat(2, 31px) !important;
  width: max-content;
  max-width: 100%;
  overflow: visible;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  min-width: 31px;
  width: 31px;
  overflow: visible;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  width: 31px;
  min-width: 31px;
  font-size: 17px;
  line-height: 30px;
}

.cs-filter-bar {
  align-items: start;
  grid-template-columns: minmax(280px, 1fr) minmax(160px, .34fr) minmax(170px, .36fr) minmax(160px, .34fr) minmax(250px, .52fr) 46px;
}
.cs-multi-filter {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdfb;
}
.cs-multi-filter > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
  min-width: 0;
}
.cs-multi-filter > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-multi-filter > summary::-webkit-details-marker {
  display: none;
}
.cs-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);
}
.cs-multi-filter[open] > summary::after {
  transform: rotate(180deg);
}
.cs-multi-filter > div {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  left: 0;
  width: min(300px, 88vw);
  min-width: min(260px, 88vw);
  max-width: min(340px, 92vw);
  max-height: min(420px, 58vh);
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 10px;
  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-filter[data-cs-multi="branch"] > div {
  right: 0;
  left: auto;
}
.cs-multi-filter[data-cs-multi="module"] > div {
  width: min(340px, 92vw);
}
.cs-multi-filter label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
}
.cs-multi-filter label span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.2;
}
.cs-multi-filter label:hover {
  background: #f6eceb;
}
.completed-task-section.collapsible-records-card > summary {
  grid-column: 1 / -1;
  padding: 16px 18px;
}
.completed-task-section.collapsible-records-card > .record-bulk-toolbar {
  grid-column: 1 / -1;
  justify-self: end;
}
.completed-task-section.collapsible-records-card > .task-board,
.completed-task-section.collapsible-records-card > .empty,
.completed-task-section.collapsible-records-card > .pagination-row {
  grid-column: 1 / -1;
}
.locked-confirm-payment {
  border-color: #b9c5b0 !important;
  background: #eef5eb !important;
  color: #47734d !important;
  cursor: not-allowed;
}
.task-card.is-completed {
  border-color: #d6e2d1;
  background: linear-gradient(180deg, #fbfffa 0%, #fffaf7 100%);
}
.existing-invoice-summary {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  margin: 6px 0 0;
}
.existing-invoice-summary div {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #eadbdd;
  border-radius: 10px;
  background: #fffaf7;
}
.existing-invoice-summary .wide {
  grid-column: 1 / -1;
}
.existing-invoice-summary dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: none;
}
.existing-invoice-summary dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  border-radius: 18px;
  background: #fffaf7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f4ecea 100%);
  box-shadow: inset 0 -8px 16px rgba(143, 72, 80, .05);
}

@media (max-width: 1380px) {
  .modal-card [data-edit-customer-payment-row].customer-payment-row-card {
    grid-template-columns: 78px minmax(210px, 1fr) minmax(160px, .76fr) minmax(270px, 270px) minmax(270px, 270px) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field {
    max-width: 270px;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
    grid-template-columns: repeat(5, 28px) 5px repeat(2, 28px) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
    width: 28px;
    min-width: 28px;
  }
}

@media (max-width: 1180px) {
  .modal-card [data-edit-customer-payment-row].customer-payment-row-card {
    grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-deposit-field,
  .modal-card [data-edit-customer-payment-row] .customer-payment-full-field {
    max-width: none;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
    width: 100%;
    grid-template-columns: repeat(5, minmax(28px, 1fr)) 5px repeat(2, minmax(28px, 1fr)) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  details.permission-row.permission-card > summary,
  .cs-compact-row {
    grid-template-columns: 1fr;
  }
  details.permission-row.permission-card > summary em {
    justify-self: start;
  }
}

/* Final alignment pass: task filters stay in one scan line on desktop. */
.task-filters {
  grid-template-columns: minmax(320px, 1.15fr) minmax(170px, .42fr) minmax(220px, .58fr) minmax(260px, .62fr) !important;
  align-items: stretch;
}
.task-filters > input,
.task-filters > select,
.task-filters > .date-range-control {
  min-width: 0;
}

/* Edit Customer Payment amount controls: tighter, cleaner digit rhythm. */
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  width: max-content;
  max-width: 100%;
  grid-template-columns: repeat(5, 32px) 7px repeat(2, 32px) !important;
  justify-content: start;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px 5px;
  overflow: hidden;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  width: 32px;
  min-width: 32px;
  height: 34px;
  min-height: 34px !important;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px !important;
  padding: 0;
  line-height: 32px;
  font-size: 17px;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-decimal-dot {
  width: 7px;
  align-self: center;
  text-align: center;
}

@media (max-width: 1120px) {
  .cs-filter-bar {
    grid-template-columns: 1fr 1fr;
  }
  .cs-filter-bar .date-range-control {
    grid-column: auto;
  }
  .task-filters {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 760px) {
  .cs-filter-bar {
    grid-template-columns: 1fr;
  }
  .cs-multi-filter > div,
  .cs-multi-filter[data-cs-multi="module"] > div,
  .cs-multi-filter[data-cs-multi="branch"] > div {
    right: auto;
    left: 0;
    max-width: 100%;
  }
  .task-filters {
    grid-template-columns: 1fr !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
    width: 100%;
    grid-template-columns: repeat(5, minmax(24px, 1fr)) 6px repeat(2, minmax(24px, 1fr)) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
    width: auto;
    min-width: 0;
  }
}

/* P1 shared field polish: one stable rhythm for filters, audit rows, and edit amount cells. */
.audit-log-card {
  display: grid;
  gap: 12px;
}
.audit-log-card > p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.45;
}
.audit-filter-bar {
  grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(150px, .55fr)) auto !important;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
.audit-filter-bar .field {
  margin: 0;
}
.audit-filter-bar input,
.audit-filter-bar select {
  min-height: 46px;
}
.audit-log-item {
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) !important;
}
.audit-log-main strong,
.audit-detail-summary span,
.audit-change-grid span,
.audit-raw-json pre {
  overflow-wrap: anywhere;
}
.cs-filter-bar {
  grid-template-columns: minmax(260px, 1.1fr) repeat(3, minmax(150px, .38fr)) minmax(240px, .56fr) 46px !important;
  gap: 10px;
  align-items: start;
}
.cs-multi-filter > div {
  width: min(340px, calc(100vw - 40px));
  min-width: min(280px, calc(100vw - 40px));
  max-width: min(340px, calc(100vw - 40px));
}
.cs-multi-filter[data-cs-multi="module"] > div {
  width: min(380px, calc(100vw - 40px));
  min-width: min(320px, calc(100vw - 40px));
  max-width: min(380px, calc(100vw - 40px));
}
.cs-multi-filter label {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 36px;
  font-size: 13px;
  align-items: center;
}
.cs-multi-filter label input {
  width: 16px;
  height: 16px;
  margin: 0;
  justify-self: center;
}
.cs-multi-filter label span {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.25;
}
.customer-payment-amount-field .amount-number-control {
  width: 100%;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(5, minmax(28px, 1fr)) 6px repeat(2, minmax(28px, 1fr)) !important;
  gap: 4px;
  overflow: visible;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  height: 34px;
  min-height: 34px !important;
  box-sizing: border-box;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .invoice-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0 !important;
  padding: 0;
  box-sizing: border-box;
  line-height: 32px;
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1120px) {
  .audit-filter-bar,
  .cs-filter-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .cs-filter-bar .date-range-control {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .audit-filter-bar,
  .audit-log-item,
  .cs-filter-bar {
    grid-template-columns: 1fr !important;
  }
  .cs-multi-filter > div,
  .cs-multi-filter[data-cs-multi="module"] > div,
  .cs-multi-filter[data-cs-multi="branch"] > div {
    right: auto;
    left: 0;
    width: min(100%, calc(100vw - 40px));
    min-width: 0;
    max-width: min(100%, calc(100vw - 40px));
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
    grid-template-columns: repeat(5, minmax(24px, 1fr)) 5px repeat(2, minmax(24px, 1fr)) !important;
  }
}

/* Shared P1/P2 guardrails: reuse these shapes for Store Database instead of adding one-off layouts. */
.task-summary-grid,
.cs-doc-groups,
.cs-document-summary,
.cs-amount-stats,
.cs-mini-details,
.task-summary-list,
.audit-change-grid {
  min-width: 0;
}

.task-board.task-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  justify-items: stretch;
  align-items: start;
}
.task-board.task-summary-grid > .task-summary-card {
  width: 100%;
  max-width: none;
}

.task-card,
.task-summary-card,
.cs-document-panel,
.cs-doc-group,
.cs-compact-row,
.audit-log-item,
.record-table-wrap,
.existing-invoice-summary {
  max-width: 100%;
  overflow: hidden;
}

.task-summary-list dd,
.task-summary-list dt,
.cs-mini-details span,
.cs-mini-details b,
.cs-system-facts span,
.cs-timeline-item,
.audit-log-main,
.audit-detail-summary,
.document-click-tooltip {
  overflow-wrap: anywhere;
}

.task-filters,
.cs-filter-bar,
.audit-filter-bar {
  max-width: 100%;
}

.task-filters > *,
.cs-filter-bar > *,
.audit-filter-bar > *,
.cs-multi-filter > summary,
.record-bulk-toolbar > summary {
  min-width: 0;
}

.table-wrap,
.compact-table,
.record-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cs-multi-filter[open] {
  z-index: 40;
}

.cs-multi-filter > div {
  max-height: min(420px, calc(100vh - 220px));
  overflow: auto;
}

.document-click-tooltip {
  width: min(360px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 40px));
  overflow: auto;
}

.modal-card [data-edit-customer-payment-row].customer-payment-row-card {
  align-items: start;
}

.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row,
.customer-payment-row-card .customer-payment-amount-field .amount-digit-row {
  align-items: center;
}

.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .invoice-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit,
.customer-payment-row-card .customer-payment-amount-field .amount-lock-window .invoice-digit,
.customer-payment-row-card .customer-payment-amount-field .amount-lock-window .amount-digit,
.customer-payment-row-card .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  display: block;
  appearance: none;
  border: 0;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 950;
}

@media (max-width: 1180px) {
  .task-filters,
  .cs-filter-bar,
  .audit-filter-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .task-filters .date-range-control,
  .cs-filter-bar .date-range-control {
    grid-column: auto !important;
  }
  .cs-compact-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .btn.small,
  .record-bulk-toolbar > summary,
  .audit-bulk-row .record-bulk-toolbar > summary {
    min-height: 44px;
  }

  .card,
  .modal-card,
  .collapsible-records-card {
    min-width: 0;
  }

  table,
  .compact-table table,
  .table-wrap table {
    min-width: 0 !important;
    table-layout: fixed;
  }
  th,
  td,
  .compact-table td:last-child,
  .compact-table th:last-child {
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .task-board.task-summary-grid,
  .cs-document-summary,
  .cs-amount-stats,
  .cs-mini-details,
  .task-summary-list {
    grid-template-columns: 1fr !important;
  }
  .task-card-select {
    position: static;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    width: 100%;
  }
  .payment-approval-main {
    grid-template-columns: 1fr !important;
  }
  .cs-heatmap {
    grid-template-columns: 1fr;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .invoice-digit,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit,
  .customer-payment-row-card .customer-payment-amount-field .amount-lock-window .invoice-digit,
  .customer-payment-row-card .customer-payment-amount-field .amount-lock-window .amount-digit,
  .customer-payment-row-card .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
    font-size: 15px;
  }
}

/* Final guardrail: Edit Record amount controls should match Customer Payment Details. */
.modal-card [data-edit-customer-payment-row].customer-payment-row-card {
  grid-template-columns: 82px minmax(168px, .9fr) minmax(148px, .72fr) minmax(208px, 1fr) minmax(208px, 1fr) !important;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-row-title {
  grid-column: 1;
  grid-row: 1;
  padding-top: 31px;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-style-stack {
  grid-column: 3;
  grid-row: 1;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-type-field {
  grid-column: 2;
  grid-row: 1;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-deposit-field {
  grid-column: 4;
  grid-row: 1;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-full-field {
  grid-column: 5;
  grid-row: 1;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-row-card-fields {
  grid-column: 2 / -1;
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
}
.modal-card #editLinkedSOField.customer-payment-linked-so {
  grid-template-columns: 120px minmax(220px, 320px) minmax(260px, 1fr) !important;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field {
  max-width: none;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-wrap {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(20px, 1fr)) 5px repeat(2, minmax(20px, 1fr)) !important;
  min-height: 44px;
  padding: 4px;
  gap: 3px;
  border: 1px solid #d9c4ca;
  border-radius: 19px;
  background: linear-gradient(180deg, #fff 0%, #fff8f6 100%);
  overflow: hidden;
  align-items: center;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 34px !important;
  border-color: #eadbdd;
  border-radius: 13px;
  box-sizing: border-box;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 34px !important;
  padding: 0;
  line-height: 1;
  font-size: 19px;
}
.modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-decimal-dot {
  min-width: 5px;
  font-size: 19px;
}
@media (max-width: 760px) {
  .modal-card [data-edit-customer-payment-row].customer-payment-row-card,
  .modal-card #editLinkedSOField.customer-payment-linked-so {
    grid-template-columns: 1fr !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-row-title,
  .modal-card [data-edit-customer-payment-row] .customer-payment-style-stack,
  .modal-card [data-edit-customer-payment-row] .customer-payment-type-field,
  .modal-card [data-edit-customer-payment-row] .customer-payment-deposit-field,
  .modal-card [data-edit-customer-payment-row] .customer-payment-full-field,
  .modal-card [data-edit-customer-payment-row] .customer-payment-row-card-fields {
    grid-column: auto;
    grid-row: auto;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-digit-row {
    grid-template-columns: repeat(5, minmax(20px, 1fr)) 5px repeat(2, minmax(20px, 1fr)) !important;
  }
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-digit,
  .modal-card [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window .amount-cent-digit {
    font-size: 15px;
  }
}