/* RTM OS 4b — bảng theo dõi PO (js/rtm-po.js)
   Phần popup/toast KHÔNG có tiền tố ID vì modal gắn thẳng vào document.body
   (xem ghi chú .rtm-modal-ov trong rtm-os.css) và biến --primary không với tới đó. */

#workspace-rtm-os .rtmpo-load,
#workspace-rtm-os .rtmpo-err { display: flex; align-items: center; gap: 9px; padding: 26px 18px; color: #64748B; font-size: 13.5px; }
#workspace-rtm-os .rtmpo-err { color: #9F1239; background: #FCE8EB; border: 1px solid #F5C2CB; border-radius: 10px; }

/* ── Dải hạn mức công nợ ─────────────────────────────────────────────────── */
#workspace-rtm-os .rtmpo-credit { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
#workspace-rtm-os .rtmpo-credit.none {
  display: block; background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px; color: #64748B; line-height: 1.5;
}
#workspace-rtm-os .rtmpo-cr {
  flex: 1 1 210px; min-width: 210px; background: #fff; border: 1px solid #E6E9EF;
  border-left: 3px solid #94A3B8; border-radius: 10px; padding: 9px 12px;
}
#workspace-rtm-os .rtmpo-cr.t-ok   { border-left-color: #00C875; }
#workspace-rtm-os .rtmpo-cr.t-warn { border-left-color: #FDAB3D; }
#workspace-rtm-os .rtmpo-cr.t-bad  { border-left-color: #E2445C; }
#workspace-rtm-os .rtmpo-cr b { display: block; font-size: 13px; color: #0F172A; }
#workspace-rtm-os .rtmpo-cr span { display: block; font-size: 11.5px; color: #64748B; margin-top: 2px; }
#workspace-rtm-os .rtmpo-cr small { display: block; font-size: 11px; color: #94A3B8; margin-top: 3px; }
#workspace-rtm-os .rtmpo-crbar { height: 6px; background: #F1F5F9; border-radius: 4px; overflow: hidden; margin-top: 6px; }
#workspace-rtm-os .rtmpo-crbar i { display: block; height: 100%; background: #94A3B8; }
#workspace-rtm-os .rtmpo-cr.t-ok   .rtmpo-crbar i { background: #00C875; }
#workspace-rtm-os .rtmpo-cr.t-warn .rtmpo-crbar i { background: #FDAB3D; }
#workspace-rtm-os .rtmpo-cr.t-bad  .rtmpo-crbar i { background: #E2445C; }

/* ── Thanh lọc ───────────────────────────────────────────────────────────── */
#workspace-rtm-os .rtmpo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
#workspace-rtm-os .rtmpo-fst { display: flex; gap: 6px; flex-wrap: wrap; }
#workspace-rtm-os .rtmpo-fb {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 99px; border: 1px solid #E6E9EF; background: #fff;
  color: #475569; cursor: pointer; white-space: nowrap;
}
#workspace-rtm-os .rtmpo-fb i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #94A3B8); }
#workspace-rtm-os .rtmpo-fb.on { border-color: #0073EA; color: #0073EA; background: #F5FAFF; }
#workspace-rtm-os .rtmpo-bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#workspace-rtm-os .rtmpo-bar-r input {
  height: 32px; padding: 0 11px; border: 1px solid #E6E9EF; border-radius: 8px;
  font-size: 12.5px; min-width: 190px;
}

/* ── Bảng ────────────────────────────────────────────────────────────────── */
#workspace-rtm-os .rtmpo-tw { overflow-x: auto; border: 1px solid #E6E9EF; border-radius: 10px; background: #fff; }
#workspace-rtm-os .rtmpo-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
#workspace-rtm-os .rtmpo-tbl th {
  position: sticky; top: 0; z-index: 2; background: #F8FAFC; color: #475569;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  text-align: left; padding: 9px 11px; white-space: nowrap; border-bottom: 1px solid #E6E9EF;
}
#workspace-rtm-os .rtmpo-tbl td { padding: 9px 11px; border-top: 1px solid #F1F5F9; vertical-align: middle; }
#workspace-rtm-os .rtmpo-tbl tbody tr { cursor: pointer; }
#workspace-rtm-os .rtmpo-tbl tbody tr:hover { background: #F8FAFC; }
#workspace-rtm-os .rtmpo-tbl .r { text-align: right; }
#workspace-rtm-os .rtmpo-tbl .b { font-weight: 700; }
#workspace-rtm-os .rtmpo-tbl .nw { white-space: nowrap; }
#workspace-rtm-os .rtmpo-tbl .mut { color: #94A3B8; }
#workspace-rtm-os .rtmpo-tbl small { display: block; font-size: 10.5px; line-height: 1.3; }
#workspace-rtm-os .rtmpo-tbl small.mut { color: #94A3B8; }
#workspace-rtm-os .rtmpo-tbl small.late { color: #DC2626; font-weight: 700; }
#workspace-rtm-os .rtmpo-tbl tfoot td { background: #F8FAFC; border-top: 1px solid #E6E9EF; }
#workspace-rtm-os .rtmpo-empty { text-align: center; color: #94A3B8; padding: 26px 12px; font-size: 13px; }
#workspace-rtm-os .rtmpo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#workspace-rtm-os .rtmpo-pill {
  display: inline-block; font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 9px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 32%, #fff);
}
#workspace-rtm-os .rtmpo-pct {
  display: inline-block; width: 46px; height: 6px; background: #F1F5F9; border-radius: 4px;
  overflow: hidden; margin-right: 6px; vertical-align: middle;
}
#workspace-rtm-os .rtmpo-pct i { display: block; height: 100%; background: #00C875; }
#workspace-rtm-os .rtmpo-tbl .rbo-btn.sm { padding: 3px 9px; font-size: 11.5px; margin-left: 4px; }
#workspace-rtm-os .rtmpo-tbl .rbo-btn.dg { color: #DC2626; border-color: #FECACA; }

/* ── Cảnh báo trong form Tạo PO ──────────────────────────────────────────── */
.rtmpo-flag {
  display: block; margin-top: 9px; border-radius: 8px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; font-family: 'Public Sans','Be Vietnam Pro',system-ui,sans-serif;
}
.rtmpo-flag.bad  { background: #FCE8EB; border: 1px solid #F5C2CB; border-left: 3px solid #E2445C; color: #9F1239; }
.rtmpo-flag.warn { background: #FFF4E5; border: 1px solid #FDE68A; border-left: 3px solid #FDAB3D; color: #92400E; }
.rtmpo-flag b { font-weight: 700; }
input.rtmpo-bad { border-color: #E2445C !important; background: #FFF5F6 !important; }

/* ── Popup nhận hàng + toast (ngoài #workspace-rtm-os) ───────────────────── */
.rtmpo-ov .rtmpo-sub { font-size: 12.5px; color: #676879; line-height: 1.5; margin-bottom: 10px; }
.rtmpo-ov .rtmpo-tw { max-height: 46vh; overflow: auto; border: 1px solid #E6E9EF; border-radius: 8px; }
.rtmpo-ov .rtmpo-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtmpo-ov .rtmpo-tbl th { position: sticky; top: 0; background: #F8FAFC; padding: 7px 10px; font-size: 11px; text-align: left; color: #475569; }
.rtmpo-ov .rtmpo-tbl td { padding: 7px 10px; border-top: 1px solid #F1F5F9; }
.rtmpo-ov .rtmpo-tbl .r { text-align: right; }
.rtmpo-ov .rtmpo-tbl .mut { color: #94A3B8; }
.rtmpo-ov .rtmpo-in { width: 100px; text-align: right; padding: 5px 8px; border: 1px solid #D0D4E4; border-radius: 6px; font-size: 13px; }

.rtmpo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 10050;
  display: flex; align-items: center; gap: 8px; max-width: min(620px, 92vw);
  background: #0F172A; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45;
  padding: 11px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.28);
  font-family: 'Public Sans','Be Vietnam Pro',system-ui,-apple-system,sans-serif;
}
.rtmpo-toast.bad { background: #9F1239; }
.rtmpo-toast .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }