.package-commission-settlements {
  --settlement-ink: #172448;
  --settlement-muted: #667085;
  --settlement-line: #dfe5ee;
  --settlement-soft: #f6f8fb;
  --settlement-accent: #112262;
  display: grid;
  min-width: 0;
  gap: 18px;
  color: var(--settlement-ink);
}

.package-commission-settlements *,
.package-commission-settlements *::before,
.package-commission-settlements *::after {
  box-sizing: border-box;
}

.package-commission-settlements > * { min-width: 0; }
.package-commission-settlements__feedback:empty { display: none; }

.package-commission-settlements__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.package-commission-settlements__heading h1,
.package-commission-settlements__heading p {
  margin: 0;
}

.package-commission-settlements__heading > div:first-child {
  display: grid;
  gap: 6px;
}

.package-commission-settlements__heading > div:first-child > p:last-child {
  max-width: 720px;
  color: var(--settlement-muted);
}

.package-commission-settlements__heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.package-commission-settlements__new {
  min-width: 154px;
}

.package-commission-settlements__feedback,
.package-commission-settlements__modal-feedback {
  min-height: 20px;
  margin: 0;
  color: var(--settlement-muted);
}

.package-commission-settlements__feedback--error,
.package-commission-settlements__modal-feedback--error {
  color: #a52b2b;
}

.package-commission-settlements__filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(145px, .8fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--settlement-line);
}

.package-commission-settlements__filters label,
.package-commission-settlements__field {
  display: grid;
  gap: 7px;
  color: var(--settlement-muted);
  font-size: 13px;
  font-weight: 700;
}

.package-commission-settlements :is(input, select, textarea) {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfd6e2;
  border-radius: 9px;
  padding: 9px 11px;
  background: #fff;
  color: var(--settlement-ink);
  font: inherit;
}

.package-commission-settlements textarea {
  resize: vertical;
}

.package-commission-settlements :is(input, select, textarea):focus {
  outline: 3px solid rgb(17 34 98 / 14%);
  border-color: var(--settlement-accent);
}

.package-commission-settlements__filter-actions {
  display: flex;
  gap: 8px;
}

.package-commission-settlements__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.package-commission-settlements__summary article {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 17px 18px 15px;
  overflow: hidden;
  border: 1px solid var(--settlement-line);
  border-radius: 12px;
  background: #fff;
}

.package-commission-settlements__summary article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #ec681c;
  content: '';
}

.package-commission-settlements__summary span {
  color: var(--settlement-muted);
  font-size: 13px;
}

.package-commission-settlements__summary strong {
  font-size: clamp(21px, 2vw, 28px);
}

.package-commission-settlements__table-region,
.package-commission-settlements__preview {
  position: relative;
  overflow: auto;
  border: 1px solid var(--settlement-line);
  border-radius: 12px;
  background: #fff;
}

.package-commission-settlements__table-region[aria-busy='true'],
.package-commission-settlements__preview[aria-busy='true'] {
  min-height: 160px;
  opacity: .66;
  pointer-events: none;
}

.package-commission-settlements__table,
.package-commission-settlements__preview-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: separate;
  border-spacing: 0;
}

.package-commission-settlements__preview-table {
  min-width: 980px;
}

.package-commission-settlements :is(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.package-commission-settlements th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f5f9;
  color: #4b5671;
  font-size: 12px;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.package-commission-settlements tbody tr:hover td {
  background: #fbfcff;
}

.package-commission-settlements td[data-align='numeric'] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.package-commission-settlements td a {
  color: var(--settlement-accent);
  font-weight: 750;
  text-decoration: none;
}

.package-commission-settlements__history-receipt {
  min-height: 34px;
  padding: 7px 11px;
  white-space: nowrap;
}

.package-commission-settlements__review,
.package-commission-settlements__ready {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 750;
}

.package-commission-settlements__review {
  background: #fff3dc;
  color: #865000;
}

.package-commission-settlements__ready {
  background: #eaf8ef;
  color: #17663a;
}

.package-commission-settlements__pagination {
  border: 1px solid var(--settlement-line);
  border-radius: 12px;
  background: #fff;
}

.package-commission-settlements__modal {
  z-index: 2050;
}

.package-commission-settlements__receipt-modal {
  z-index: 2060;
}

.package-commission-settlements__modal-surface {
  width: min(1480px, 100%);
  display: grid;
  gap: 16px;
  padding: 0 20px 20px;
  border-top: 5px solid #ec681c;
}

.package-commission-settlements__modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 -20px;
  padding: 20px;
  border-bottom: 1px solid var(--settlement-line);
  background: #fff;
}

.package-commission-settlements__modal-header > div {
  display: grid;
  gap: 5px;
}

.package-commission-settlements__modal-header :is(h2, p) {
  margin: 0;
}

.package-commission-settlements__modal-header p {
  color: var(--settlement-muted);
}

.package-commission-settlements__modal-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--settlement-line);
  border-radius: 12px;
  background: var(--settlement-soft);
}

.package-commission-settlements__field--notes {
  grid-column: 1 / -1;
}

.package-commission-settlements__selection-bar,
.package-commission-settlements__modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.package-commission-settlements__selection-bar {
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid var(--settlement-line);
  border-radius: 10px;
  background: #fff;
}

.package-commission-settlements__selection-bar label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
}

.package-commission-settlements__selection-bar input,
.package-commission-settlements__preview-table input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--settlement-accent);
}

.package-commission-settlements__modal-actions {
  position: sticky;
  bottom: -20px;
  z-index: 5;
  margin: 0 -20px -20px;
  padding: 15px 20px;
  border-top: 1px solid var(--settlement-line);
  background: #fff;
}

.package-commission-settlements__modal-actions span {
  color: var(--settlement-muted);
  font-size: 13px;
}

.package-commission-settlements__submit {
  min-width: 180px;
}

.package-commission-settlements__receipt-surface {
  width: min(1320px, 100%);
  padding: 0;
  border-top: 5px solid #ec681c;
}

.package-commission-settlements__receipt-document {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.package-commission-settlements__receipt-header,
.package-commission-settlements__receipt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.package-commission-settlements__receipt-header > div {
  display: grid;
  gap: 4px;
  text-align: right;
}

.package-commission-settlements__receipt-header :is(h2, p) {
  margin: 0;
}

.package-commission-settlements__receipt-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.package-commission-settlements__receipt-facts div {
  padding: 14px;
  border: 1px solid var(--settlement-line);
  border-radius: 10px;
  background: var(--settlement-soft);
}

.package-commission-settlements__receipt-facts dt {
  color: var(--settlement-muted);
  font-size: 12px;
}

.package-commission-settlements__receipt-facts dd {
  margin: 5px 0 0;
  color: var(--settlement-ink);
  font-weight: 800;
}

.package-commission-settlements__receipt-table-region {
  max-height: min(54vh, 620px);
  overflow: auto;
  border: 1px solid var(--settlement-line);
  border-radius: 10px;
}

.package-commission-settlements__receipt-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.package-commission-settlements__receipt-total,
.package-commission-settlements__receipt-total :is(dt, dd) {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.package-commission-settlements__receipt-actions {
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .package-commission-settlements__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-commission-settlements__filter-actions {
    grid-column: 1 / -1;
  }

  .package-commission-settlements__modal-controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .package-commission-settlements {
    gap: 14px;
  }

  .package-commission-settlements__heading,
  .package-commission-settlements__modal-header,
  .package-commission-settlements__modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .package-commission-settlements__modal-actions > * {
    width: 100%;
  }

  .package-commission-settlements__filters,
  .package-commission-settlements__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-commission-settlements__modal-controls {
    grid-template-columns: 1fr;
  }

  .package-commission-settlements__heading { margin: 0; padding: 0; gap: 12px; }
  .package-commission-settlements__heading h1 { font-size: 1.3rem; }
  .package-commission-settlements__heading > div:first-child > p:last-child { font-size: .84rem; line-height: 1.45; }
  .package-commission-settlements__heading-actions,
  .package-commission-settlements__filter-actions {
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
  }
  .package-commission-settlements__heading-actions > *,
  .package-commission-settlements__filter-actions > * { width: auto; flex: 0 1 auto; }
  .package-commission-settlements__new { min-width: 0; }
  .package-commission-settlements__filters { padding: 12px; }
  .package-commission-settlements__summary { gap: 10px; }
  .package-commission-settlements__summary article { min-height: 76px; padding: 12px; gap: 5px; }
  .package-commission-settlements__summary strong { font-size: 1.2rem; overflow-wrap: anywhere; }

  .package-commission-settlements__receipt-facts {
    grid-template-columns: 1fr 1fr;
  }

  .package-commission-settlements__field--notes {
    grid-column: auto;
  }

  .package-commission-settlements__modal-surface {
    padding-inline: 14px;
  }

  .package-commission-settlements__modal-header,
  .package-commission-settlements__modal-actions {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

@media print {
  .document-print-root .package-commission-settlements__receipt-document {
    display: grid !important;
    gap: 16px;
    color: #172448;
  }

  .document-print-root .package-commission-settlements__receipt-actions {
    display: none !important;
  }

  .document-print-root .package-commission-settlements__receipt-header,
  .document-print-root .package-commission-settlements__receipt-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .document-print-root .package-commission-settlements__receipt-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .document-print-root .package-commission-settlements__receipt-facts div {
    padding: 10px;
    border: 1px solid #dfe5ee;
  }

  .document-print-root .package-commission-settlements__receipt-facts dt {
    color: #667085;
    font-size: 10px;
  }

  .document-print-root .package-commission-settlements__receipt-facts dd {
    margin: 4px 0 0;
    font-weight: 700;
  }

  .document-print-root .package-commission-settlements__receipt-total,
  .document-print-root .package-commission-settlements__receipt-total :is(dt, dd) {
    font-size: 10pt;
    font-weight: 800;
  }

  .document-print-root .package-commission-settlements__receipt-table-region {
    max-height: none;
    overflow: visible;
  }

  .document-print-root .package-commission-settlements__receipt-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  .document-print-root .package-commission-settlements__receipt-table th,
  .document-print-root .package-commission-settlements__receipt-table td {
    padding: 8px;
    border: 1px solid #dfe5ee;
    text-align: left;
  }
}