#section-vendor-payments { background: #fff; border: 1px solid #e3d8c9; border-radius: 8px; padding: 10px; }
.payment-form-surface { min-width: 0; margin-top: 8px; padding: 10px; border: 1px solid #e3d8c9; border-radius: 8px; background: #fff; }
.payment-form-surface > h3 { margin: 0 0 4px; color: #b45309; font-size: 18px; font-weight: 800; }
.payment-vendor-search { margin: 8px 0; }
.payment-vendor-selector { display: block; width: min(520px, 100%); margin: 0 0 8px; }
.payment-vendor-selector > select, .payment-vendor-selector .searchable-select, .payment-vendor-selector .searchable-row, .payment-vendor-selector .searchable-input { width: 100%; min-width: 0; }
#payment-detail fieldset { margin: 10px 0; border: 1px solid #e3d8c9; border-radius: 8px; padding: 10px; min-width: 0; background: #fff; }
#payment-detail legend { padding: 0 5px; font-size: 14px; line-height: 1.2; font-weight: 700; }
.payment-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.payment-fields label { min-width: 0; margin: 0; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
.payment-fields input, .payment-fields select, .payment-fields textarea { width: 100%; box-sizing: border-box; }
.payment-fields input[type=checkbox] { width: auto; }
.payment-fields input:not([type=checkbox]), .payment-fields select { min-height: 34px; padding: 6px 8px; }
.payment-fields textarea { min-height: 58px; padding: 6px 8px; resize: vertical; }
.payment-general-fields { grid-template-columns: minmax(150px, 1fr) minmax(130px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.4fr); align-items: end; }
.payment-general-fields [data-field=note] { grid-column: auto; }
.payment-cheque-fields { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(110px, .55fr) minmax(110px, .55fr) minmax(320px, 2fr); align-items: end; }
.payment-cheque-fields [data-field=cheque_address] { grid-column: auto; }
.payment-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.payment-contact-candidate-note { align-self: center; color: #675e52; font-size: 13px; }
.payment-contact-candidate-button { white-space: nowrap; }
.payment-detail-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e6ded1; border-radius: 8px; background: #fff; }
.payment-detail-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.payment-accounts-table { min-width: 1240px; }
.payment-detail-table th, .payment-detail-table td { padding: 8px; border-bottom: 1px solid #eadfce; vertical-align: middle; text-align: left; }
.payment-detail-table th { background: #f4ede2; color: #3d2f1f; font-weight: 700; }
.payment-accounts-table th { white-space: nowrap; }
.payment-detail-table input, .payment-detail-table select { width: 100%; min-width: 0; box-sizing: border-box; }
.payment-select-col { width: 34px; text-align: center !important; }
.payment-contacts-table th:nth-child(4), .payment-contacts-table td:nth-child(4) { width: 70px; }
.payment-contacts-table th:nth-child(6), .payment-contacts-table td:nth-child(6) { width: 220px; }
.payment-accounts-table th:nth-child(2), .payment-accounts-table td:nth-child(2) { width: 118px; }
.payment-accounts-table th:nth-child(4), .payment-accounts-table td:nth-child(4), .payment-accounts-table th:nth-child(6), .payment-accounts-table td:nth-child(6) { width: 104px; }
.payment-accounts-table th:nth-child(9), .payment-accounts-table td:nth-child(9) { width: 80px; }
.payment-detail-data-row.is-disabled { background: #f4f4f2; color: #777; }
.payment-detail-data-row.is-disabled td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) { visibility: hidden; }
.payment-detail-data-row.is-disabled td:nth-child(3)::after { content: "  (停用，點銀行名稱可展開)"; color: #a52727; font-weight: 700; }
.payment-list-modal-content { width: min(1440px, calc(100vw - 24px)); max-width: none; }
.payment-list-table { width: max-content; min-width: 100%; table-layout: fixed; }
.payment-list-table th { width: 10em; min-width: 10em; white-space: nowrap; cursor: pointer; }
.payment-list-table th:first-child { width: 72px; min-width: 72px; cursor: default; }
.payment-list-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.payment-list-table tr.is-expanded td { height: auto; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.payment-vendor-cell { display: flex; min-width: 0; align-items: flex-start; gap: 6px; }
.payment-vendor-cell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.payment-list-table tr.is-expanded .payment-vendor-cell span { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.payment-row-expand { flex: 0 0 26px; width: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 4px; background: #26322d; color: #fff; font-size: 11px; line-height: 1; }
.payment-proof-upload { display: inline-flex; width: auto; cursor: pointer; margin: 0 0 8px; }
.payment-proof-upload.is-uploading { opacity: .6; pointer-events: none; }
.payment-proof-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.payment-proof-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 1px solid #e3d8c9; border-radius: 8px; padding: 6px; background: #fffdfa; }
.payment-proof-preview { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; min-width: 0; padding: 4px; border: 0; background: transparent; color: inherit; text-align: left; }
.payment-proof-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #d7c9b5; border-radius: 6px; background: #f4ede2; font-size: 13px; font-weight: 700; }
.payment-proof-name { overflow-wrap: anywhere; }
.payment-proof-preview-modal-content { width: min(960px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); max-width: none; display: flex; flex-direction: column; }
.payment-proof-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.payment-proof-preview-body img { display: block; max-width: 100%; max-height: calc(100vh - 180px); margin: 0 auto; object-fit: contain; }
.payment-proof-preview-body iframe { width: 100%; min-height: 520px; flex: 1 1 auto; border: 1px solid #e3d8c9; border-radius: 8px; background: #fff; }
#payment-detail summary { cursor: pointer; padding: 8px 0; }
#payment-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
#payment-status { color: #176b35; font-weight: bold; }
#payment-status[data-error="1"] { color: #a52727; }
@media (max-width: 1200px) { .payment-general-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payment-general-fields [data-field=note] { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .payment-cheque-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payment-cheque-fields [data-field=cheque_address] { grid-column: auto; } }
@media (max-width: 760px) { .payment-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payment-proof-list { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .payment-fields { grid-template-columns: minmax(0, 1fr); } .payment-fields [data-field] { grid-column: auto; } }