.commission-page { min-width: 0; }
.commission-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.commission-view-group { display: flex; align-items: center; gap: 22px; min-width: 0; flex-wrap: wrap; }
.commission-tabs { border: 0; margin: 0; }
.commission-tabs .tab { min-height: 48px; padding: 10px 16px; }
.commission-month select { min-height: 40px; min-width: 140px; }
.commission-month-label { color: var(--muted); font-variant-numeric: tabular-nums; }
.commission-search { padding: 20px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.commission-search input { width: min(360px, 100%); min-width: 180px; height: 42px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 13px; background: #fcfdff; }
.commission-filter-chips { padding: 0 24px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.commission-filter-chip { background: var(--soft); color: var(--primary-hover); border: 1px solid #c8d9f2; border-radius: 6px; padding: 6px 10px; min-height: 34px; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
.commission-filter-panel { margin: 0 24px 20px; border: 1px solid #c8d9f2; border-radius: 8px; background: #f5f8ff; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.commission-filter-panel select { min-width: 160px; max-width: min(500px, 100%); min-height: 40px; }
.commission-page .commission-table-wrap { overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-gutter: stable; }
.commission-page .commission-table { width: 100%; min-width: 1360px; border-collapse: collapse; table-layout: fixed; }
.commission-page .commission-table thead th { padding: 15px 14px; background: #f6f8fc; font-size: 13px; color: #506582; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: left; }
.commission-column-filter { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 4px 0; min-height: 28px; color: inherit; background: transparent; cursor: pointer; white-space: nowrap; }
.commission-column-filter:hover, .commission-column-filter.active { color: var(--primary); }
.commission-column-filter.active svg { fill: #d3e2fc; }
.commission-condition-filter { border: 0; background: transparent; color: var(--muted); display: block; font-size: 12px; min-height: 26px; padding: 2px 0; cursor: pointer; }
.commission-condition-filter:hover { color: var(--primary); }
.commission-page .commission-table td { padding: 20px 14px; border-bottom: 1px solid #edf0f6; font-size: 14px; vertical-align: middle; text-align: left; }
.commission-page .commission-table .commission-company-start td { border-top: 2px solid #dfe8f5; }
.commission-page .commission-table tbody tr:hover { background: #fafcff; }
.commission-page .commission-table td:first-child { min-width: 0; max-width: none; overflow-wrap: anywhere; }
.commission-product { min-width: 0; max-width: none; font-weight: 500; overflow-wrap: anywhere; line-height: 1.75; }
.commission-conditions { display: block; min-width: 0; max-width: none; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.commission-number { text-align: left; font-variant-numeric: tabular-nums; max-width: 180px; overflow-wrap: anywhere; }
.commission-percent { color: var(--muted); padding-left: 2px; font-size: 12px; }
.commission-total { color: var(--primary-hover); font-weight: 650; }
.commission-investor { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; line-height: 1.4; min-width: 40px; padding: 5px 8px; border-radius: 5px; background: #edf2f8; color: #52657f; }
.commission-pi { background: #fff0ef; color: #a23e3c; }
.commission-npi { background: #edf4ff; color: #295cb2; }
.commission-row-actions { display: flex; gap: 14px; white-space: nowrap; }
.commission-delete { color: var(--danger); }

/* Catalog column headers and data share one left edge; settlement tables keep their own styles. */
.commission-page .commission-table th:nth-child(1) { width: 8%; }
.commission-page .commission-table th:nth-child(2) { width: 19%; }
.commission-page .commission-table th:nth-child(3) { width: 13%; }
.commission-page .commission-table th:nth-child(4) { width: 10%; }
.commission-page .commission-table th:nth-child(n + 5):nth-child(-n + 10) { width: 7%; }
.commission-page .commission-table th:nth-child(11) { width: 8%; }
.commission-page .commission-table th,
.commission-page .commission-table td { padding-inline: 14px; }
.commission-column-title { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 0; }
.commission-header-filter { position: relative; display: inline-flex; align-items: center; border-radius: 4px; cursor: pointer; }
.commission-header-filter select { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.commission-header-filter:focus-within { outline: 2px solid #7da7ee; outline-offset: 4px; }
.commission-header-filter:hover .commission-column-filter,
.commission-header-filter.active .commission-column-filter { color: var(--primary); }
.commission-header-filter.active .commission-column-filter svg { fill: #d3e2fc; }

.commission-page .commission-table .commission-empty { text-align: center; padding: 72px 20px; color: var(--muted); }
.commission-error { margin: 0 24px 18px; }
.commission-load-error { padding: 28px; }
#commission-dialog { width: min(1160px, calc(100vw - 40px)); padding: 0; }
#commission-dialog .dialog-header { display: flex; justify-content: space-between; align-items: center; }
#commission-dialog .dialog-header h2 { margin: 0; }
#commission-dialog .dialog-body { overflow-y: auto; max-height: calc(90dvh - 160px); }
#commission-dialog .dialog-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 16px 24px; gap: 12px; border-top: 1px solid var(--line); }
.commission-draft-status { margin-right: auto; color: var(--muted); font-size: 12px; }
.commission-editor-heading { display: grid; grid-template-columns: 170px 1fr 1.4fr; gap: 20px; margin-bottom: 24px; }
.commission-editor-heading input, .commission-draft-grid input, .commission-draft-grid select { width: 100%; min-width: 0; }
.commission-dropzone { position: relative; border: 1px dashed #9eb9e8; border-radius: 10px; background: #f5f8ff; padding: 25px; text-align: center; margin-bottom: 24px; }
.commission-dropzone input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.commission-dropzone:focus-within { outline: 3px solid #95b8ef; outline-offset: 3px; }
.commission-dropzone label { display: flex; flex-direction: column; gap: 5px; pointer-events: none; overflow-wrap: anywhere; }
.commission-dropzone label strong { font-weight: 600; color: var(--primary-hover); }
.commission-dropzone label span { font-size: 13px; color: var(--muted); }
.commission-dropzone.dragging { background: #e7efff; border-color: var(--primary); }
.commission-warnings { margin: 18px 0 24px; padding: 12px 16px; background: #fff9ed; border: 1px solid #ecd7a6; border-radius: 8px; color: #795521; font-size: 13px; }
.commission-warnings summary { cursor: pointer; font-weight: 600; }
.commission-warnings ul { max-height: 200px; overflow: auto; padding-left: 20px; margin-bottom: 0; }
.commission-warnings li { padding: 4px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.commission-preview-heading h3 { margin: 0 0 16px; font-size: 16px; }
.commission-drafts { display: grid; gap: 20px; }
.commission-draft { background: #fbfcff; border: 1px solid #dfe7f3; border-radius: 10px; padding: 20px; }
.commission-draft > header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.commission-draft > header strong { overflow-wrap: anywhere; }
.commission-draft > header .text-button { margin-left: auto; }
.commission-draft > header .muted { font-size: 12px; }
.commission-draft-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.commission-draft-grid .commission-field-conditions { grid-column: span 3; }
.commission-draft-grid .commission-field-insurer { grid-column: span 2; }
.commission-draft-grid .commission-field-product_name { grid-column: span 3; }
.commission-draft-total { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 15px; }
.commission-draft-total > span { color: var(--muted); font-size: 13px; }
.commission-draft-total > strong { color: var(--primary-hover); font-size: 20px; font-variant-numeric: tabular-nums; max-width: 75%; overflow-wrap: anywhere; }
.commission-add-variant { margin-top: 20px; }
.commission-conflict { color: var(--warn); padding: 12px 0; margin: 0; }
@media (max-width: 850px) {
  .commission-toolbar { padding: 10px 16px; gap: 12px; }
  .commission-search { padding: 16px; }
  .commission-editor-heading { grid-template-columns: 1fr 1fr; }
  .commission-editor-heading > :last-child { grid-column: 1 / -1; }
  .commission-draft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commission-draft-grid .commission-field-conditions, .commission-draft-grid .commission-field-insurer, .commission-draft-grid .commission-field-product_name { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .commission-toolbar, .commission-view-group { gap: 12px; }
  .commission-toolbar > .actions { margin-left: auto; }
  .commission-tabs .tab { padding: 10px; }
  .commission-month-label { font-size: 12px; }
  .commission-search input { width: 100%; min-width: 0; }
  .commission-filter-panel { margin-inline: 16px; }
  .commission-filter-panel select { flex: 1; min-width: 100px; width: 100%; }
  .commission-page .pager { gap: 12px; align-items: flex-start; }
  .commission-page .pager-controls { gap: 6px; flex-wrap: wrap; }
  .commission-page .pager-controls .btn { padding: 6px 9px; }
  .commission-page .pager-controls select { max-width: 110px; }
  #commission-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  #commission-dialog .dialog-body { padding: 18px 14px; }
  #commission-dialog .dialog-header { padding: 15px; }
  #commission-dialog .dialog-header h2 { font-size: 19px; }
  #commission-dialog .dialog-footer { padding: 12px 14px; }
  .commission-editor-heading { grid-template-columns: 1fr; gap: 15px; }
  .commission-draft { padding: 15px; }
  .commission-draft-grid { gap: 15px 12px; }
  .commission-draft-grid .form-field label { font-size: 12px; }
  .commission-draft-status { width: 100%; }
}

/* New-policy commission preview is read-only; creation uses a server snapshot. */
.policy-commission-preview-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 18px; }
.policy-commission-preview-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.policy-commission-preview-heading > span { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.policy-commission-preview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; }
.policy-commission-preview-grid > div { padding: 14px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f7faff; min-width: 0; }
.policy-commission-preview-grid dt { color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.policy-commission-preview-grid dd { margin: 0; color: var(--title); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.policy-commission-preview-grid dd small { color: var(--muted); font-size: 12px; padding-left: 3px; }
.policy-commission-preview-conditions { margin: 16px 0 0; font-size: 13px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.policy-commission-preview-conditions > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
@media (max-width: 600px) {
  .policy-commission-preview-heading { flex-wrap: wrap; gap: 6px; }
  .policy-commission-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.commission-page .commission-table .commission-insurer-cell { vertical-align: top; background: #fbfcff; }
.commission-company-toggle { display: flex; align-items: flex-start; gap: 7px; border: 0; border-radius: 4px; background: transparent; padding: 0; max-width: 100%; color: var(--title); font: inherit; font-weight: 650; text-align: left; cursor: pointer; line-height: 1.65; }
.commission-company-toggle:hover { color: var(--primary); }
.commission-company-toggle:focus-visible { outline: 2px solid #7da7ee; outline-offset: 4px; }
.commission-company-chevron { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; color: var(--muted); }
.commission-insurer-name { min-width: 0; overflow-wrap: anywhere; }
.commission-page .commission-table .commission-collapsed-note { color: var(--muted); font-size: 13px; background: #fbfcff; }

.commission-changes-entry { white-space: nowrap; }
#commission-changes-dialog { width: min(940px, calc(100vw - 40px)); padding: 0; }
#commission-changes-dialog .dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#commission-changes-dialog .dialog-header h2 { margin: 0; }
.commission-changes-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.commission-changes-toolbar label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.commission-changes-toolbar select { min-height: 38px; min-width: 130px; max-width: 100%; }
.commission-changes-toolbar .btn { margin-left: auto; }
#commission-changes-dialog .commission-changes-body { max-height: calc(90dvh - 235px); overflow-y: auto; padding: 22px 24px; }
.commission-change-list { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
.commission-change-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 18px 20px; min-width: 0; }
.commission-change-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commission-change-source { background: #edf4ff; color: #295cb2; padding: 3px 7px; border-radius: 4px; }
.commission-change-card h3 { margin: 14px 0 0; color: var(--title); font-size: 14px; font-weight: 600; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.commission-change-before { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.commission-change-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; border-top: 1px solid var(--line); padding-top: 16px; margin: 16px 0 0; }
.commission-change-values > div { min-width: 0; }
.commission-change-values dt { color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.commission-change-values dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commission-change-values dd > span, .commission-change-values dd > strong { min-width: 0; max-width: 100%; }
.commission-change-old { color: var(--muted); }
.commission-change-arrow { color: #8393aa; }
.commission-change-values strong { color: var(--title); font-weight: 600; }
.commission-change-total strong { color: var(--primary-hover); }
.commission-changes-empty { padding: 42px 12px; margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
#commission-changes-dialog .commission-changes-pager { padding: 16px 24px; border-top: 1px solid var(--line); gap: 16px; }
@media (max-width: 600px) {
  #commission-changes-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  #commission-changes-dialog .dialog-header { padding: 16px; }
  #commission-changes-dialog .dialog-header h2 { font-size: 19px; }
  .commission-changes-toolbar { padding: 12px 14px; gap: 9px; flex-wrap: wrap; }
  #commission-changes-dialog .commission-changes-body { padding: 16px 14px; max-height: calc(90dvh - 245px); }
  .commission-change-card { padding: 15px 13px; }
  .commission-change-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  #commission-changes-dialog .commission-changes-pager { padding: 12px 14px; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .commission-changes-pager .pager-controls { gap: 7px; flex-wrap: wrap; }
  .commission-changes-pager .btn { padding: 6px 10px; }
}