.supplier-fee-workbench { min-width: 0; color: #183452; }
.supplier-fee-page-header { border-bottom: 1px solid #ccdaea; background: #fff; }
.supplier-fee-page-header h2 { margin: 2px 0 0; font-size: 22px; color: #173a61; }
.supplier-fee-header-status { display: flex; align-items: center; gap: 12px; }
.supplier-fee-header-status span { padding: 6px 12px; border: 1px solid #a9c5e1; border-radius: 999px; background: #edf6ff; color: #245a8d; font-size: 13px; font-weight: 800; }
.supplier-fee-header-status strong { min-width: 60px; text-align: right; color: #173a61; }
.supplier-fee-controls { padding: 14px 18px 12px; border-bottom: 1px solid #c9d9e9; background: #f6faff; }
.supplier-fee-search { display: flex; align-items: center; gap: 8px; min-width: 0; }
.supplier-fee-search input, .supplier-fee-search select { height: 36px; border: 1px solid #b7cce1; border-radius: 5px; background: #fff; color: #173451; font: 700 13px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; }
.supplier-fee-search input:focus, .supplier-fee-search select:focus { outline: 0; border-color: #4386c7; box-shadow: 0 0 0 3px rgba(44, 117, 184, .13); }
.supplier-fee-search-box { flex: 0 0 180px; width: 180px; min-width: 150px; }
.supplier-fee-search-box input { width: 100%; padding: 0 12px; }
.supplier-fee-search select { flex: 0 0 142px; padding: 0 8px; }
.supplier-fee-search select.supplier-fee-search-type { flex-basis: 148px; color: #173f67; font-weight: 900; }
.supplier-fee-supplier-filter { position: relative; flex: 0 0 210px; width: 210px; min-width: 180px; }
.supplier-fee-search .supplier-fee-supplier-filter > input[type="text"] { width: 100%; padding: 0 12px; }
.supplier-fee-supplier-candidates { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 3px; max-height: 240px; padding: 5px; overflow: auto; border: 1px solid #a9c2d9; border-radius: 5px; background: #fff; box-shadow: 0 8px 20px rgba(31,75,111,.17); }
.supplier-fee-supplier-candidates.hidden { display: none; }
.supplier-fee-supplier-candidate { min-height: 32px; border: 0; border-radius: 4px; padding: 6px 9px; background: transparent; color: #204b6d; font: 700 12px/1.35 "Segoe UI", "Microsoft YaHei", sans-serif; text-align: left; cursor: pointer; }
.supplier-fee-supplier-candidate:hover, .supplier-fee-supplier-candidate:focus { outline: 0; background: #e8f3fb; color: #155b92; }
.supplier-fee-search select.supplier-fee-account-filter { flex-basis: 174px; }
.supplier-fee-search select.supplier-fee-currency-filter { flex-basis: 168px; }
.supplier-fee-search-command, .supplier-fee-reset-command { min-width: 70px; height: 36px; border-radius: 5px; padding: 0 15px; font: 800 13px/1 "Microsoft YaHei", sans-serif; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.supplier-fee-search-command { border: 1px solid #256ca9; border-bottom-color: #174d80; background: linear-gradient(#5fa5dc, #2878b8); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 0 #18598e, 0 7px 14px rgba(32, 87, 137, .15); }
.supplier-fee-reset-command { border: 1px solid #a9bfd5; border-bottom-color: #819bb4; background: linear-gradient(#fff, #e8f0f7); color: #264b6e; box-shadow: inset 0 1px #fff, 0 2px 0 #9cb2c7; }
.supplier-fee-search-command:hover, .supplier-fee-reset-command:hover { transform: translateY(-1px); filter: brightness(1.03); }
.supplier-fee-check { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #425f7b; font-size: 12px; font-weight: 700; }
.supplier-fee-check input { width: 16px; height: 16px; }
.supplier-fee-batch-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 45px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dce7f1; }
#supplierFeeSelectionSummary { color: #526d86; font-size: 13px; font-weight: 700; }
.supplier-fee-batch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.supplier-fee-batch-actions button { min-height: 32px; border: 1px solid #9db9d5; border-bottom-color: #7197bb; border-radius: 5px; padding: 0 11px; background: linear-gradient(#fff, #e9f2fa); color: #214f79; font: 800 12px/1 "Microsoft YaHei", sans-serif; box-shadow: inset 0 1px #fff, 0 2px 0 #95b0ca; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.supplier-fee-batch-actions button.primary { border-color: #2a74b1; border-bottom-color: #15558b; background: linear-gradient(#62a9df, #2676b5); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 0 #17588e; }
.supplier-fee-batch-actions button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px #fff, 0 3px 0 #789bbd, 0 8px 14px rgba(35, 82, 124, .13); }
.supplier-fee-batch-actions button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* 表格超宽时可横向滚动；高度随内容展开，不限制列表高度。 */
.legacy-table-wrap.supplier-fee-table-wrap { max-height: none; min-height: 0; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: visible; }
.supplier-fee-table { width: 100%; min-width: 1240px; table-layout: auto; }
.supplier-fee-table th { position: sticky; z-index: 2; top: 0; height: 41px; background: #285f94; color: #fff; white-space: nowrap; font-size: 12px; }
.supplier-fee-table td { height: 50px; padding: 7px 9px; border-color: #d4e1ed; color: #203d59; vertical-align: middle; font-size: 12px; }
.supplier-fee-row:hover td { background: #eef6fe; }
.supplier-fee-row.is-overdue td { background: #fff2f2; color: #a22b2b; }
.supplier-fee-row.wait-invoice td { background: #edf6ff; color: #245d91; }
.supplier-fee-child td { background: #f7fafc; color: #506a83; }
.supplier-fee-child td:first-child { box-shadow: inset 4px 0 #74a5d2; }
.sf-select { width: 30px; text-align: center; }
.sf-select input { width: 15px; height: 15px; }
.sf-order { white-space: nowrap; }
.sf-order > a { color: #145b98; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.sf-order > button { display: inline-flex; align-items: center; gap: 3px; min-width: 32px; height: 23px; margin-left: 7px; border: 1px solid #a8c1d9; border-radius: 4px; background: #fff; color: #2c6396; cursor: pointer; }
.sf-supplier { min-width: 180px; }
.sf-supplier strong, .sf-supplier span { display: block; }
.sf-supplier strong { color: #183e64; font-size: 13px; }
.sf-supplier span { max-width: 240px; margin-top: 2px; overflow: hidden; color: #657d94; text-overflow: ellipsis; white-space: nowrap; }
.sf-search-hit-meta { display: block; width: fit-content; margin-top: 4px; padding: 2px 6px; border: 1px solid #edc763; border-radius: 3px; background: #fff8d9; color: #74540b; font-size: 11px; font-weight: 800; }
.supplier-fee-table mark.sf-hit { border-radius: 2px; background: #ffe56e; color: #522f00; padding: 1px 2px; box-shadow: inset 0 -1px 0 rgba(166, 104, 0, .24); font-weight: 900; }
.sf-account { display: inline-flex; padding: 4px 8px; border: 1px solid #b9cce0; border-radius: 999px; background: #f8fbfe; color: #315b82; font-weight: 800; white-space: nowrap; }
.sf-account.account-2 { border-color: #d7bf85; background: #fff9e9; color: #765810; }
.sf-account.account-3 { border-color: #b9c8ad; background: #f3f8ee; color: #46653b; }
.sf-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
.sf-batch-money { min-width: 118px; white-space: nowrap; }
.sf-batch-money span { display: block; color: #6b7f91; font-size: 10px; font-weight: 750; }
.sf-batch-money strong { display: block; margin-top: 2px; color: #173f61; font-size: 12px; font-weight: 950; }
.supplier-fee-table tfoot td { height: 44px; border-top: 1px solid #bdcede; background: #f7fafc; }
.supplier-fee-table tfoot.has-selection td { background: #fff9f4; border-top-color: #d9b9a7; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.sf-selected-total-money { min-width: 118px; color: #b74747 !important; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-selected-total-money span { display: block; color: #6b7f91; font-size: 10px; font-weight: 800; }
.sf-selected-total-money strong { display: block; margin-top: 2px; color: #b74747; font-size: 13px; font-weight: 950; }
.sf-request { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-file { display: block; max-width: 190px; overflow: hidden; color: #17629f; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.supplier-fee-table .sf-download-button { display: table; min-width: 76px; min-height: 28px; box-sizing: border-box; padding: 5px 9px; border: 1px solid #aac1d6; border-radius: 4px; background: linear-gradient(#fff, #edf3f8); color: #24557f; text-decoration: none; text-align: center; line-height: 18px; }
.supplier-fee-table .sf-download-button + .sf-download-button { margin-top: 4px; }
.supplier-fee-table .sf-download-button:hover, .supplier-fee-table .sf-download-button:focus-visible { border-color: #4386c7; background: #e8f3fb; }
.supplier-fee-table .sf-named-bill-file { width: min(240px, 100%); max-width: 240px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.supplier-fee-table .sf-date-column { min-width: 142px; width: 156px; white-space: nowrap; overflow-wrap: normal; word-break: normal; font-variant-numeric: tabular-nums; }
.supplier-fee-table .sf-payment-deadline.is-due { color: #b42318; font-weight: 900; }
.sf-actions { white-space: nowrap; }
.sf-action, .sf-text-action { min-height: 28px; border: 1px solid #aac1d6; border-radius: 4px; padding: 0 9px; background: linear-gradient(#fff, #edf3f8); color: #24557f; font-weight: 800; cursor: pointer; }
.sf-action.primary { border-color: #3c7fb7; background: linear-gradient(#69addd, #347eb8); color: #fff; }
.sf-actions .sf-action + .sf-action { margin-left: 5px; }
.supplier-fee-table :is(.sf-action, .sf-text-action, .sf-download-button) { min-height: 30px; border-radius: 6px; border: 1px solid #a4bed5; border-bottom-color: #7197b8; background: linear-gradient(#fff 0%,#f0f7fc 52%,#dceaf5 100%); color: #24557f; font-weight: 800; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 2px 0 #9cb6cc,0 5px 10px rgba(39,78,112,.11); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.supplier-fee-table .sf-action.primary { border-color: #397eb7; border-bottom-color: #205c8b; background: linear-gradient(#7abce8 0%,#509dd3 52%,#2e76ac 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #285f88,0 5px 10px rgba(39,78,112,.16); }
/* Match the pre-order delete pill, without changing any action or permission. */
.supplier-fee-table .sf-action.danger { border-color: #ca8d8d; border-bottom-color: #965a5a; border-radius: 999px; background: linear-gradient(#fffafa 0%,#f8e1e1 52%,#e7bcbc 100%); color: #943333; box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 2px 0 #b97979,0 7px 14px rgba(127,51,51,.13); }
.supplier-fee-table :is(.sf-action, .sf-text-action, .sf-download-button):hover:not(:disabled) { filter: brightness(1.035); transform: translateY(-1px); }
.supplier-fee-table :is(.sf-action, .sf-text-action, .sf-download-button):active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(39,78,112,.16); }
.supplier-fee-table :is(.sf-action, .sf-text-action, .sf-download-button):focus-visible { outline: 2px solid #21699f; outline-offset: 3px; }
.supplier-fee-table :is(.sf-action, .sf-text-action):disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .supplier-fee-table :is(.sf-action, .sf-text-action, .sf-download-button) { transition: none; } }
.supplier-fee-loading, .supplier-fee-empty { height: 120px !important; color: #6e8499 !important; text-align: center; }
.supplier-fee-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 49px; border-top: 1px solid #d5e1ec; background: #f7fafc; }
.supplier-fee-pagination button { min-width: 70px; height: 30px; border: 1px solid #a9bfd4; border-radius: 4px; background: #fff; color: #2a557d; font-weight: 700; }
.supplier-fee-action-modal { z-index: 1450; padding: 24px; background: rgba(16, 35, 55, .58); backdrop-filter: blur(2px); }
.supplier-fee-action-dialog { width: min(760px, calc(100vw - 42px)); max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid #8fb1d0; border-radius: 7px; background: #fff; box-shadow: 0 28px 70px rgba(11, 32, 53, .35); }
.supplier-fee-action-dialog > header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px 16px; border-bottom: 1px solid #bfd1e3; background: linear-gradient(135deg, #fafdff, #eaf4fd); }
.supplier-fee-action-dialog > header span { color: #4d769b; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.supplier-fee-action-dialog > header h3 { margin: 3px 0; color: #173f67; font-size: 21px; }
.supplier-fee-action-dialog > header p { margin: 0; color: #627c95; font-size: 12px; }
.supplier-fee-action-dialog > header button { width: 34px; height: 34px; border: 1px solid #abc2d8; border-radius: 5px; background: #fff; color: #315c82; font-size: 23px; cursor: pointer; }
.supplier-fee-modal-body { max-height: calc(100vh - 220px); overflow: auto; padding: 20px 22px; background: #f8fbfe; }
.supplier-fee-action-dialog > footer { display: flex; justify-content: center; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid #c8d8e7; background: #fff; }
.supplier-fee-action-dialog > footer button { min-width: 100px; height: 36px; border: 1px solid #a5bdd3; border-radius: 5px; background: linear-gradient(#fff, #e8f0f7); color: #315778; font-weight: 900; cursor: pointer; }
.supplier-fee-action-dialog > footer button.primary { border-color: #2672af; background: linear-gradient(#64aade, #2878b7); color: #fff; box-shadow: 0 2px 0 #18598e; }
.supplier-fee-action-dialog.sf-finance-dialog { width: min(960px, calc(100vw - 42px)); }
.sf-finance-dialog > header { padding: 20px 25px 17px; border-top: 3px solid #2d72a9; background: linear-gradient(180deg,#fff 0%,#edf6fd 100%); }
.sf-finance-dialog > header h3 { font-size: 23px; }
.sf-finance-dialog > header p { margin-top: 4px; font-size: 13px; }
.sf-finance-dialog .supplier-fee-modal-body { padding: 18px 24px 22px; background: #f5f9fc; }
.sf-finance-dialog > footer { min-height: 64px; padding: 13px 24px 16px; background: #fafdff; box-shadow: 0 -8px 22px rgba(30,68,102,.06); }
.sf-finance-dialog > footer button { min-width: 118px; height: 38px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sf-finance-dialog > footer button:hover { filter: brightness(1.03); transform: translateY(-1px); }
.sf-selection-card { display: grid; grid-template-columns: 1.35fr 1fr .65fr 1.25fr; gap: 0; margin-bottom: 14px; overflow: hidden; border: 1px solid #9fbdd8; border-radius: 6px; background: #fff; box-shadow: 0 7px 18px rgba(30,70,107,.08); }
.sf-selection-card div { min-width: 0; padding: 12px 15px; border-right: 1px solid #d4e1ed; background: #fff; }
.sf-selection-card div:last-child { border-right: 0; }
.sf-selection-card span, .sf-selection-card strong { display: block; }
.sf-selection-card span { color: #6a8197; font-size: 10px; font-weight: 800; }
.sf-selection-card strong { margin-top: 4px; overflow: hidden; color: #173f67; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.sf-selection-card .sf-selection-main { box-shadow: inset 4px 0 #3d83bb; }
.sf-selection-card .sf-selection-amount { background: linear-gradient(145deg,#eef7ff,#fff); }
.sf-selection-card .sf-selection-amount span { color: #3e6d96; }
.sf-selection-card .sf-selection-amount strong { color: #17659f; font-size: 17px; font-variant-numeric: tabular-nums; }
.sf-finance-form { display: block; }
.sf-single-bill { display: grid; grid-template-columns: minmax(0,1fr) 100px 150px; gap: 0; margin-bottom: 14px; overflow: hidden; border: 1px solid #bed1e2; border-radius: 6px; background: #fff; }
.sf-single-bill div { min-width: 0; padding: 11px 14px; border-right: 1px solid #d8e4ee; }
.sf-single-bill div:last-child { border-right: 0; text-align: right; }
.sf-single-bill span, .sf-single-bill strong { display: block; }
.sf-single-bill span { color: #768ba0; font-size: 10px; font-weight: 800; }
.sf-single-bill strong { margin-top: 3px; overflow: hidden; color: #234e74; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sf-single-bill div:last-child strong { color: #17659f; font-variant-numeric: tabular-nums; }
.sf-batch-detail { margin-bottom: 14px; overflow: hidden; border: 1px solid #bed1e2; border-radius: 6px; background: #fff; }
.sf-batch-detail > header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 15px; border-bottom: 1px solid #d6e2ec; background: #f8fbfe; }
.sf-batch-detail > header div span, .sf-batch-detail > header div strong { display: block; }
.sf-batch-detail > header div span { color: #768ba0; font-size: 10px; font-weight: 800; }
.sf-batch-detail > header div strong { margin-top: 2px; color: #234e74; font-size: 13px; }
.sf-batch-detail > header b { min-width: 48px; padding: 5px 9px; border: 1px solid #adc6dc; border-radius: 999px; background: #fff; color: #2f608b; text-align: center; font-size: 12px; }
.sf-batch-collapsed > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 14px; background: #f8fbfe; color: #234e74; cursor: pointer; list-style: none; }
.sf-batch-collapsed > summary::-webkit-details-marker { display: none; }
.sf-batch-collapsed > summary span { font-size: 12px; font-weight: 900; }
.sf-batch-collapsed > summary b { margin-left: 5px; color: #5f7d97; font-size: 11px; }
.sf-batch-collapsed > summary em { color: #2b6f9f; font-size: 11px; font-style: normal; font-weight: 900; }
.sf-batch-collapsed > summary em::before { content: "展开"; }
.sf-batch-collapsed[open] > summary { border-bottom: 1px solid #d6e2ec; }
.sf-batch-collapsed[open] > summary em::before { content: "收起"; }
.sf-batch-table-wrap { max-height: 166px; overflow: auto; }
.sf-batch-preview .sf-batch-table-wrap { max-height: none; }
.sf-batch-preview [data-sf-batch-extra][hidden] { display: none !important; }
.sf-batch-preview-actions { display: flex; justify-content: center; padding: 9px 12px; border-top: 1px solid #e1e9f0; background: #f8fbfe; }
.sf-batch-detail table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sf-batch-detail th, .sf-batch-detail td { height: 34px; padding: 5px 11px; border-bottom: 1px solid #e1e9f0; color: #284965; font-size: 12px; text-align: left; }
.sf-batch-detail th { position: sticky; top: 0; z-index: 1; background: #edf4fa; color: #52708a; font-size: 10px; font-weight: 900; }
.sf-batch-detail th:first-child, .sf-batch-detail td:first-child { width: 52px; text-align: center; }
.sf-batch-detail th:nth-child(3), .sf-batch-detail td:nth-child(3) { width: 80px; text-align: center; }
.sf-batch-detail th:last-child, .sf-batch-detail td:last-child { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
.sf-finance-section { margin-top: 12px; padding-top: 13px; border-top: 1px solid #c9d9e7; }
.sf-finance-section > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sf-finance-section > header strong { color: #173f66; font-size: 14px; }
.sf-finance-section > header span { color: #73899c; font-size: 11px; }
.sf-request-form .sf-finance-section, .sf-payment-form .sf-finance-section { margin-top: 12px; padding: 14px 15px 15px; border: 1px solid #c2d4e3; border-radius: 7px; background: #fff; box-shadow: 0 4px 12px rgba(30,70,107,.045); }
.sf-request-form .sf-finance-section > header, .sf-payment-form .sf-finance-section > header { margin-bottom: 12px; }
.sf-request-form .sf-finance-section > header strong, .sf-payment-form .sf-finance-section > header strong { display: inline-flex; align-items: center; gap: 8px; }
.sf-request-form, .sf-payment-form { counter-reset: sf-request-step; }
.sf-request-form .sf-finance-section > header strong::before, .sf-payment-form .sf-finance-section > header strong::before { counter-increment: sf-request-step; content: counter(sf-request-step); display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: #e7f2fb; color: #22679e; font-size: 11px; font-weight: 900; }
.sf-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-modal-grid.sf-modal-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sf-modal-grid.sf-modal-grid-notes { gap: 14px; }
.sf-modal-field { display: grid; gap: 6px; min-width: 0; color: #315675; font-size: 12px; font-weight: 800; }
.sf-modal-field input, .sf-modal-field select, .sf-modal-field textarea { width: 100%; min-height: 40px; border: 1px solid #a9c2d9; border-radius: 5px; padding: 8px 11px; background: #fff; color: #183752; font: 700 13px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif; box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(30,65,95,.05); }
.sf-modal-field select { height: 40px; }
.sf-modal-field input:focus, .sf-modal-field select:focus, .sf-modal-field textarea:focus { outline: 0; border-color: #4282bb; box-shadow: 0 0 0 3px rgba(52,123,184,.12); }
.sf-modal-field textarea { min-height: 86px; resize: vertical; }
.sf-request-amount { display: flex; align-items: center; min-height: 40px; color: #17659f; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-supplier-autocomplete { position: relative; width: 100%; }
.sf-supplier-autocomplete-hint { display: block; margin-top: 5px; color: #668097; font-size: 11px; font-weight: 700; line-height: 1.35; }
.sf-supplier-candidates { display: grid; gap: 3px; max-height: 224px; margin-top: 6px; padding: 5px; overflow: auto; border: 1px solid #a9c2d9; border-radius: 5px; background: #fafdff; box-shadow: 0 6px 16px rgba(31,75,111,.12); }
.sf-supplier-candidates.hidden { display: none; }
.sf-supplier-candidate { width: 100%; min-height: 33px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: #204b6d; font: 700 12px/1.35 "Segoe UI", "Microsoft YaHei", sans-serif; text-align: left; cursor: pointer; }
.sf-supplier-candidate:hover, .sf-supplier-candidate:focus { outline: 0; background: #e8f3fb; color: #155b92; }
.sf-readonly-grid textarea { background: #eef3f7; color: #3f5d77; box-shadow: none; }
.sf-upload-field { position: relative; grid-template-columns: 125px auto 1fr; align-items: center; min-height: 58px; margin-top: 0; padding: 10px 13px; border: 1px solid #b4cadf; border-radius: 6px; background: #fff; }
.sf-upload-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-upload-field b { display: inline-flex; justify-content: center; align-items: center; width: 96px; min-height: 34px; border: 1px solid #397eb8; border-bottom-color: #226598; border-radius: 4px; background: linear-gradient(#fafdff 0%, #d9edf9 48%, #83b9dc 100%); color: #194e78; font-size: 12px; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.96),0 2px 0 #246697,0 5px 10px rgba(28,93,138,.1); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sf-upload-field:hover b { filter: brightness(1.03); box-shadow: inset 0 1px rgba(255,255,255,.98),0 3px 0 #246697,0 8px 14px rgba(28,93,138,.16); transform: translateY(-1px); }
.sf-upload-field small { min-width: 0; overflow: hidden; color: #657e95; text-overflow: ellipsis; white-space: nowrap; }
.sf-request-deadline { max-width: 300px; }
.sf-request-upload-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: start; }
.sf-request-attachment-field { position: relative; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 34px 30px; align-content: start; min-height: 110px; margin-top: 0; padding: 10px 13px; border: 1px solid #b4cadf; border-radius: 6px; background: #fff; box-sizing: border-box; }
.sf-request-attachment-field > span { min-height: 16px; line-height: 16px; }
.sf-request-attachment-field > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-request-attachment-actions { display: flex; align-items: stretch; gap: 8px; min-width: 0; height: 34px; }
.sf-request-attachment-button { display: inline-flex; justify-content: center; align-items: center; width: 96px; min-width: 96px; height: 34px; min-height: 34px; padding: 6px 10px; border: 1px solid #397eb8; border-bottom-color: #226598; border-radius: 4px; background: linear-gradient(#fafdff 0%,#d9edf9 48%,#83b9dc 100%); color: #194e78; font: 900 12px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; box-sizing: border-box; box-shadow: inset 0 1px rgba(255,255,255,.96),0 2px 0 #246697,0 5px 10px rgba(28,93,138,.1); cursor: pointer; transition: transform .15s ease,box-shadow .15s ease,filter .15s ease; }
.sf-request-attachment-button:hover { filter: brightness(1.03); box-shadow: inset 0 1px rgba(255,255,255,.98),0 3px 0 #246697,0 8px 14px rgba(28,93,138,.16); transform: translateY(-1px); }
.sf-request-attachment-button:focus-visible { outline: 3px solid #85b7de; outline-offset: 2px; }
.sf-request-attachment-button:disabled { border-color: #afbec9; background: #e8edf1; color: #8293a0; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
.sf-request-attachment-actions small { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; padding: 0 9px; overflow: hidden; border: 1px solid #d5e1ea; border-radius: 4px; background: #f8fbfd; color: #657e95; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sf-request-attachment-option { min-width: 0; min-height: 30px; }
.sf-invoice-defer-choice { display: inline-flex; align-items: center; justify-self: start; gap: 7px; color: #526d83; font-size: 11px; font-weight: 800; line-height: 1.3; cursor: pointer; }
.sf-invoice-defer-choice input { flex: 0 0 16px; width: 16px; min-height: 0; height: 16px; margin: 0; padding: 0; border-radius: 3px; accent-color: #2d75aa; cursor: pointer; box-shadow: none; }
.sf-invoice-defer-choice span { min-width: 0; }
.sf-invoice-upload-field.is-deferred .sf-request-attachment-actions small { border-color: #e2c27f; background: #fff8e8; color: #875a12; }
#sfRequestForm [data-sf-invoice-fields][hidden] { display: none !important; }
.sf-request-notes { display: grid; gap: 12px; }
.sf-bank-details { overflow: hidden; border: 1px solid #b9cfe0; border-radius: 6px; background: #f8fbfe; }
.sf-bank-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 9px 13px; color: #244f74; cursor: pointer; list-style: none; }
.sf-bank-details > summary::-webkit-details-marker { display: none; }
.sf-bank-details > summary span { min-width: 0; }
.sf-bank-details > summary b, .sf-bank-details > summary small { display: block; }
.sf-bank-details > summary b { font-size: 12px; }
.sf-bank-details > summary small { margin-top: 3px; overflow: hidden; color: #657f96; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sf-bank-details > summary em { flex: 0 0 auto; color: #23689f; font-size: 11px; font-style: normal; font-weight: 900; }
.sf-bank-details[open] > summary { border-bottom: 1px solid #d4e1eb; background: #eef6fc; }
.sf-bank-details > .sf-modal-field { padding: 12px 13px 13px; }
.sf-bank-details textarea { min-height: 180px; }
.sf-payment-review-grid { display: grid; gap: 10px; }
.sf-payment-readonly-note { padding: 10px 13px; border: 1px solid #c8d9e6; border-radius: 6px; background: #f8fbfe; }
.sf-payment-readonly-note span { display: block; color: #526f88; font-size: 11px; font-weight: 900; }
.sf-payment-readonly-note p { margin: 5px 0 0; color: #24445f; font-size: 12px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; }
.sf-bank-details-readonly > .sf-readonly-bank-info { padding: 11px 13px 13px; color: #24445f; font-size: 12px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; }
.sf-payment-amount-input[readonly] { background: #eef5fa; color: #17659f; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; cursor: default; box-shadow: none; }
.sf-payment-proof-row { display: grid; grid-template-columns: minmax(0,1fr); }
.sf-payment-proof-field { max-width: none; }
.sf-payment-confirm-note { margin: 12px 2px 0; color: #617c92; font-size: 11px; font-weight: 700; text-align: right; }
.sf-text-result { margin-top: 15px; padding: 13px 15px; border: 1px solid #9bc4a9; border-radius: 6px; background: #f2fbf5; color: #285f3b; }
.sf-text-result.is-warning { border-color: #d7a64d; background: #fff8e9; color: #7d5512; }
.sf-text-result table { width: 100%; margin-top: 12px; border-collapse: collapse; background: #fff; color: #294966; font-size: 12px; }
.sf-text-result th, .sf-text-result td { padding: 8px; border: 1px solid #d5e2ee; text-align: left; vertical-align: top; }
.sf-text-result th { background: #eaf3fb; color: #244f77; font-weight: 900; }
.sf-text-result tr.is-missing td { background: #fff3f2; color: #9c3129; }
.sf-text-result tr.is-mismatch td { background: #fff9eb; color: #8a5a11; }
.sf-text-result .sf-text-result-note { margin: 8px 0 0; font-weight: 800; }

@media (max-width: 1100px) {
  .supplier-fee-search { flex-wrap: wrap; }
  .supplier-fee-search-box { flex-basis: 180px; }
  .supplier-fee-batch-toolbar { align-items: flex-start; flex-direction: column; }
  .supplier-fee-batch-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .supplier-fee-controls { padding: 10px; }
  .supplier-fee-search-box { flex: 1 1 100%; width: 100%; }
  .supplier-fee-search select { flex: 1 1 calc(50% - 8px); }
  .sf-selection-card, .sf-single-bill, .sf-modal-grid, .sf-modal-grid.sf-modal-grid-three { grid-template-columns: 1fr 1fr; }
  .sf-selection-card .sf-selection-amount { grid-column: span 2; }
  .sf-single-bill div:first-child { grid-column: span 2; }
  .sf-request-upload-row, .sf-modal-grid.sf-request-invoice-details { grid-template-columns: 1fr; }
  .sf-modal-grid.sf-payment-fields { grid-template-columns: 1fr; }
  .supplier-fee-action-modal { padding: 8px; }
  .supplier-fee-action-dialog { width: calc(100vw - 16px); }
  .sf-upload-field { grid-template-columns: 1fr; }
}

.supplier-fee-table .sf-download-group + .sf-download-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid #cbd8e4; }

/* Only the two reconciliation dialogs share the agent-search visual treatment. */
.sf-reconcile-modal .supplier-fee-action-dialog { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.sf-reconcile-modal .supplier-fee-action-dialog :is(input, select, textarea, button, label, span, p, small, h3) { font-family: inherit; }
.sf-reconcile-modal .supplier-fee-modal-body :is(input, select, textarea, button, label),
.sf-reconcile-modal .supplier-fee-action-dialog > footer button { font-size: 13px; font-weight: 600; line-height: 1.5; }
.sf-reconcile-modal .supplier-fee-modal-body small { display: block; margin-top: 5px; color: #657e95; font-size: 12px; font-weight: 400; line-height: 1.5; }
.sf-reconcile-modal .sf-supplier-candidates { position: absolute; top: 40px; left: 0; right: 0; z-index: 5; margin-top: 0; gap: 0; max-height: 200px; padding: 4px; border: 1px solid #b7ccdf; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgba(31,75,111,.14); }
.sf-reconcile-modal .supplier-fee-action-dialog .sf-supplier-candidate { display: block; width: 100%; min-height: 34px; margin: 0; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: #244b68; box-shadow: none; text-align: left; cursor: pointer; transform: none; }
.sf-reconcile-modal .supplier-fee-action-dialog .sf-supplier-candidate:hover,
.sf-reconcile-modal .supplier-fee-action-dialog .sf-supplier-candidate:focus { background: #e9f3fb; color: #155b92; outline: none; box-shadow: none; transform: none; }
.sf-reconcile-modal .sf-supplier-candidate mark { padding: 1px 2px; border-radius: 3px; background: #deedf9; color: #125e94; font: inherit; font-weight: 700; }
.sf-reconcile-modal #sfTextSupplierInput.is-selected { border-color: #6d9dbf; background: #f6faff; }