/* 應付帳款 UI —— BATCH-041。沿用既有財務頁的設計語言（.fin-card／.cos-table／.fin-kpi-*），
   只補這兩頁自己需要的排版；不另建第二套財務樣式。 */
.payable-kpi-v41 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.payable-kpi-v41 .fin-kpi-card {
  border: 1px solid var(--cos-border, #e5e7eb); border-radius: 12px; padding: 14px 16px;
  background: var(--cos-surface, #fff);
}
.payable-kpi-v41 .fin-kpi-label { font-size: 13px; color: var(--cos-text-muted, #6b7280); }
.payable-kpi-v41 .fin-kpi-value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.payable-kpi-v41 .fin-kpi-sub { font-size: 12px; color: var(--cos-text-muted, #9ca3af); margin-top: 2px; }
.payable-kpi-v41 .fin-kpi-overdue .fin-kpi-value { color: var(--cos-danger, #b91c1c); }

.payable-filters-v41 { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.payable-filters-v41 label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.payable-filters-v41 label > span { color: var(--cos-text-muted, #6b7280); }
.payable-filters-v41 input, .payable-filters-v41 select {
  padding: 7px 10px; border: 1px solid var(--cos-border, #e5e7eb); border-radius: 8px; min-width: 150px;
}

.payable-table-v41 td.fin-dc-num, .payable-table-v41 th.fin-dc-num { text-align: right; }
.payable-row-v41 { cursor: pointer; }
.payable-row-v41.is-overdue { background: var(--cos-danger-soft, #fef2f2); }
.payable-overdue-tag-v41 {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--cos-danger, #b91c1c); color: #fff; font-size: 11px;
}
.payable-total-v41 { margin-top: 10px; font-size: 13px; color: var(--cos-text-muted, #6b7280); }
.payable-totals-v41 { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.payable-totals-v41 b { font-size: 16px; }

.payable-drawer-v41 .fin-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.payable-drawer-v41 .fin-pr-alloc-row.is-voided { opacity: .6; text-decoration: line-through; }
.payable-dialog-v41 { border-top: 1px solid var(--cos-border, #e5e7eb); padding-top: 12px; }
.payable-dialog-v41 input, .payable-dialog-v41 select, .payable-dialog-v41 textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--cos-border, #e5e7eb); border-radius: 8px;
}

@media (max-width: 900px) {
  .payable-kpi-v41 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payable-drawer-v41 .fin-detail-grid { grid-template-columns: 1fr; }
}