.supplier-overview { --sio-red:#bd454f; --sio-green:#39844a; --sio-muted:#8a8580; }
.supplier-overview * { letter-spacing:0; }
.supplier-overview .main { min-width:0; }
.supplier-overview .topbar { flex-wrap:wrap; gap:12px; padding:14px 24px; min-height:62px; height:auto; }
.supplier-overview .topbar-actions { flex-wrap:wrap; max-width:100%; }
.supplier-overview .btn { text-decoration:none; }
.supplier-overview .btn svg { width:14px; height:14px; }
.supplier-overview button:disabled { opacity:.45; cursor:default; }
.supplier-overview [hidden] { display:none !important; }
.sio-content { overflow:auto; padding:16px 24px 32px; min-width:0; }
.sio-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:20px 0 24px; border-bottom:1px solid #dedbd6; }
.sio-heading h2 { font:700 30px/1.25 var(--font-mono); margin:0 0 8px; }
.sio-heading #asOf { font:400 11px/1.4 var(--font-body); color:var(--sio-muted); }
.sio-metrics { display:grid; grid-template-columns:repeat(5,minmax(135px,1fr)); gap:24px; margin:0; }
.sio-metrics div { min-width:0; }
.sio-metrics dt { font:400 10px/1.4 var(--font-body); text-transform:uppercase; color:var(--sio-muted); margin-bottom:8px; }
.sio-metrics dd { font:700 18px/1.4 var(--font-mono); white-space:nowrap; margin:0; }
#balance,#overdue { color:var(--sio-red); } #upcoming,#unallocated,#review { color:#946224; }
.sio-metrics dd.sio-zero { color:var(--sio-muted) !important; }
.sio-metrics dd.sio-compact { font-size:12px; }
.sio-inline-amount { font:700 11px/1.4 var(--font-mono); }
.sio-message { margin:12px 0; font-size:12px; line-height:1.6; min-height:19px; color:var(--sio-muted); overflow-wrap:anywhere; }
.sio-message.sio-error { color:var(--sio-red); }
.sio-message:empty { display:none; }
.sio-invoices,.sio-orders { min-width:0; margin:0 0 24px; }
.sio-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 0; }
.sio-section-heading h3 { margin:0; font:500 13px/1.4 var(--font-body); text-transform:uppercase; }
.sio-section-heading > span { font:400 11px/1.4 var(--font-body); color:var(--sio-muted); }
.sio-filters { display:flex; gap:8px; flex-wrap:wrap; padding:12px; background:#fff; border:1px solid #e8e5e0; }
.sio-search { display:flex; align-items:center; flex:1 1 230px; position:relative; min-width:0; }
.sio-search svg { position:absolute; left:10px; width:14px; height:14px; stroke:#999; }
.sio-search input { width:100%; min-width:0; height:34px; padding:0 10px 0 32px; border:1px solid #d1ccc5; border-radius:6px; font:400 12px var(--font-body); background:#fff; color:#212529; }
.supplier-overview .focus-select { flex:0 1 210px; max-width:260px; min-width:130px; height:34px; border:1px solid #ebe7e2; background-color:#fff; font:400 12px var(--font-body); border-radius:6px; padding:0 28px 0 10px; text-overflow:ellipsis; }
.supplier-overview :is(input,select,button,a,[tabindex]):focus-visible { outline:2px solid #4e8e88; outline-offset:2px; }
.sio-views { display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 12px; }
.sio-views button { background:none; border:0; border-bottom:2px solid transparent; padding:9px 10px; font:400 12px var(--font-body); color:var(--sio-muted); cursor:pointer; }
.sio-views button[aria-pressed="true"] { border-bottom-color:#252a2e; color:#252a2e; }
.sio-views small { margin-left:6px; font:400 10px var(--font-mono); }
.sio-scroll { position:relative; overflow:auto; max-width:100%; border:1px solid #e6e3de; background:#fff; border-radius:6px; }
.supplier-overview table { width:100%; border-collapse:collapse; }
.sio-table { min-width:1110px; } .sio-po-table { min-width:950px; }
.supplier-overview .data-table thead th { position:static; font:500 10px/1.4 var(--font-body); padding:11px 12px; background:#4f4f4d; color:#fff; text-align:left; white-space:nowrap; }
.supplier-overview .data-table td { padding:12px; font:400 12px/1.5 var(--font-body); color:#26292c; border-bottom:1px solid #eeeae5; vertical-align:top; }
.supplier-overview .data-table tr:last-child td { border-bottom:0; }
.supplier-overview .data-table tbody tr:hover { background:#fcfbf9; }
.supplier-overview .data-table .num { text-align:right; }
.supplier-overview .data-table td.sio-amount { font:700 12px/1.5 var(--font-mono); text-align:right; white-space:nowrap; }
.supplier-overview .data-table .sio-out { color:var(--sio-red); }
.supplier-overview .data-table .sio-paid { color:var(--sio-green); }
.supplier-overview .data-table .sio-due { color:#946224; }
.supplier-overview .data-table .sio-unknown { color:#946224; }
.supplier-overview .data-table .sio-cancelled td { color:#9b9792; }
.sio-table a,.sio-po-table a { color:inherit; text-underline-offset:3px; }
.sio-table td:first-child { min-width:145px; max-width:240px; overflow-wrap:anywhere; }
.sio-table td:nth-child(2),.sio-table td:nth-child(3),.sio-po-table td:nth-child(2),.sio-po-table td:nth-child(3) { max-width:210px; overflow-wrap:anywhere; }
.supplier-overview .data-table small { display:block; font:400 10px/1.5 var(--font-body); color:var(--sio-muted); margin-top:3px; }
.sio-table td small.sio-review-note,.sio-po-table small.sio-review-note { color:#946224; max-width:230px; }
.sio-document { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #e6e3de; border-radius:4px; }
.sio-document svg { width:14px; height:14px; }
.sio-table-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; font-size:11px; color:var(--sio-muted); }
.sio-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1250px) { .sio-heading { align-items:flex-start; } .sio-metrics { width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; } .sio-metrics dd { font-size:16px; } }
@media(max-width:768px) {
  .supplier-overview .topbar { padding:12px 16px; } .supplier-overview .topbar-actions { gap:6px; }
  .supplier-overview .topbar-actions .btn { font-size:11px; padding:7px 9px; }
  .sio-content { padding:8px 16px 24px; } .sio-heading h2 { font-size:25px; }
  .sio-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .sio-filters { gap:8px; } .sio-search { flex-basis:100%; }
  .supplier-overview .focus-select { flex:1 1 120px; min-width:0; max-width:none; width:100%; }
  .sio-views { gap:0; } .sio-views button { padding:8px; font-size:11px; }
}