/* Plan Order view (v1) — scoped #tab-plan-order */
#tab-plan-order{ --po-ink:#18181B; --po-cobalt:#2563EB; --po-amber:#F59E0B; --po-amberD:#B45309; --po-teal:#0E9F90; --po-red:#DC2626; --po-soft:#A1A1AA; --po-muted:#6B6B72; --po-line:#ECECEE;
  font-family:'Public Sans','Be Vietnam Pro',system-ui,sans-serif; font-variant-numeric:tabular-nums; }
#tab-plan-order .po-empty{ text-align:center; padding:26px; color:var(--po-muted); font-size:13px; }
#tab-plan-order code{ background:#F4F4F5; padding:1px 5px; border-radius:4px; font-size:12px; }

.po-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.po-kpi{ background:#fff; border:1px solid var(--po-line); border-radius:12px; padding:12px 14px; position:relative; overflow:hidden; }
.po-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.po-kpi.k1::before{background:var(--po-ink);} .po-kpi.k2::before{background:var(--po-cobalt);} .po-kpi.k3::before{background:var(--po-amber);}
.po-kl{ font-size:11px; color:var(--po-muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.po-kv{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:3px; }
.po-kx{ font-size:11px; color:var(--po-soft); margin-top:2px; }

.po-cumwrap{ border:1px solid var(--po-line); border-radius:12px; padding:10px 14px; margin-bottom:12px; }
.po-cumt{ font-size:12.5px; font-weight:700; margin-bottom:4px; }

.po-gridwrap{ overflow-x:auto; border:1px solid var(--po-line); border-radius:12px; }
.po-grid{ border-collapse:collapse; font-size:11.5px; min-width:100%; }
.po-grid th, .po-grid td{ border-right:1px solid #F2F2F4; border-bottom:1px solid #F2F2F4; padding:0; text-align:center; white-space:nowrap; }
.po-grid thead th{ position:sticky; top:0; background:#FAFAFB; font-weight:700; color:var(--po-muted); height:28px; z-index:2; }
.po-grid th.po-wk{ background:#EEF2FE; color:var(--po-cobalt); font-size:10.5px; }
.po-nm{ position:sticky; left:0; background:#fff; text-align:left; padding:0 10px; min-width:200px; z-index:3; box-shadow:1px 0 0 var(--po-line); }
.po-grid thead .po-nm{ z-index:4; background:#FAFAFB; }
td.po-nm{ height:36px; } .po-onm{ font-weight:700; font-size:12px; } .po-meta{ font-size:10px; color:var(--po-soft); }
.po-grp{ background:#F4F4F5; font-weight:800; font-size:11px; letter-spacing:.02em; text-transform:uppercase; height:26px; }
.po-grp.cs{ color:var(--po-ink); } .po-grp.ca{ color:var(--po-amberD); }
.po-more{ background:#FAFAFB; color:var(--po-muted); font-size:11px; font-style:italic; height:24px; }
td.po-c{ width:40px; height:36px; font-weight:700; }
.cs-fc{ background:rgba(24,24,27,.86); color:#fff; }
.ca-add{ color:#CBD0DA; font-weight:600; cursor:pointer; } .ca-add:hover{ background:rgba(245,158,11,.14); color:var(--po-amberD); }
.po-we{ background:#FBFBFC; }
.po-tot{ position:sticky; right:0; background:#FAFAFB; font-weight:800; min-width:70px; box-shadow:-1px 0 0 var(--po-line); }
.po-grid tfoot td{ background:#FAFAFB; font-weight:800; height:30px; }
.po-recon{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; margin-top:10px; padding:9px 13px; background:#F8FAFF; border:1px solid #E4ECFD; border-radius:10px; }
.po-recon .ok{ color:var(--po-teal); font-weight:700; } .po-recon .bad{ color:var(--po-red); font-weight:700; }
.po-caform{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding:12px 14px; background:#FFFBF3; border:1px solid #FCE8C4; border-radius:10px; font-size:12.5px; }
.po-caform b{ font-weight:700; color:var(--po-amberD); }
.po-caform label{ display:flex; align-items:center; gap:5px; color:var(--po-muted); font-weight:600; }
.po-caform input{ height:30px; border:1px solid #E7E7EA; border-radius:7px; padding:0 9px; font-family:inherit; font-size:12.5px; font-variant-numeric:tabular-nums; }
.po-caform input#po-f-day{ width:54px; } .po-caform input#po-f-amt,.po-caform input#po-f-disc{ width:72px; } .po-caform input#po-f-out{ width:180px; } .po-caform input#po-f-prod{ width:160px; }
.po-caform button{ height:32px; padding:0 16px; border:none; border-radius:8px; background:var(--po-ink); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer; }
.po-caform button:hover{ background:#000; } .po-caform button:disabled{ opacity:.5; cursor:default; }
.po-msg{ font-weight:600; } .po-msg.bad{ color:var(--po-red); }
/* trang riêng */
#tab-plan-order .po-page{ padding:4px 2px; }
#tab-plan-order .po-pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
#tab-plan-order .po-pagehead h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0; }
#tab-plan-order .po-pagesub{ font-size:13px; color:var(--po-muted); margin-top:3px; max-width:680px; }
#tab-plan-order .po-controls{ display:flex; gap:12px; align-items:center; }
#tab-plan-order .po-controls label{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--po-muted); }
#tab-plan-order .po-controls select{ height:36px; border:1px solid #E3E3E7; border-radius:9px; padding:0 12px; font-family:inherit; font-size:13px; font-weight:600; color:var(--po-ink); background:#fff; cursor:pointer; }
#tab-plan-order .po-controls select:focus{ outline:none; border-color:var(--po-cobalt); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* cột Target/Gap */
.po-tg{ position:sticky; right:140px; background:#FAFAFB; font-weight:700; min-width:64px; color:var(--po-muted); box-shadow:-1px 0 0 var(--po-line); }
.po-gap{ position:sticky; right:0; background:#FAFAFB; font-weight:800; min-width:62px; box-shadow:-1px 0 0 var(--po-line); }
.po-tot{ right:62px; }
.po-gap.neg{ color:var(--po-red); } .po-gap.zero{ color:var(--po-teal); }
/* KPI gap */
.po-kpi.kgap::before{ background:var(--po-red); } .po-kpi.kok::before{ background:var(--po-teal); }
.po-kpi.kgap .po-kv{ color:var(--po-red); } .po-kpi.kok .po-kv{ color:var(--po-teal); }
/* ô editable */
.po-c.edit{ cursor:pointer; } .po-c.edit:hover{ outline:2px solid var(--po-cobalt); outline-offset:-2px; }
.po-c.prev{ opacity:.5; cursor:pointer; }
.po-c.prev:hover{ opacity:1; outline:2px solid var(--po-cobalt); outline-offset:-2px; }
.po-c.po-add{ cursor:pointer; color:#D4D4D8; } .po-c.po-add:hover{ background:rgba(37,99,235,.08); outline:2px dashed var(--po-cobalt); outline-offset:-2px; } .po-c.po-add:hover::after{ content:"+"; font-weight:700; color:var(--po-cobalt); }
/* nút tạo forecast */
.po-gen{ display:block; width:100%; margin:0 0 12px; padding:11px; border:1.5px dashed var(--po-cobalt); border-radius:11px; background:#EEF2FE; color:var(--po-cobalt); font-family:inherit; font-weight:700; font-size:13.5px; cursor:pointer; }
.po-gen:hover{ background:#E2E9FD; } .po-gen:disabled{ opacity:.6; }
@keyframes popemph{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02);background:#DCE6FD} }
.po-caform input#po-f-qty{ width:56px; }
/* modal sửa đơn */
.po-mbg{ position:fixed; inset:0; background:rgba(20,20,30,.42); display:flex; align-items:center; justify-content:center; z-index:9999; }
.po-mbox{ background:#fff; border-radius:16px; width:420px; max-width:92vw; box-shadow:0 24px 60px rgba(0,0,0,.3); overflow:hidden; }
.po-mh{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--po-line); font-weight:700; font-size:15px; }
.po-mh span{ color:var(--po-amberD); } .po-mx{ border:none; background:#F4F4F5; width:28px; height:28px; border-radius:7px; cursor:pointer; font-size:14px; }
.po-mrow{ display:flex; gap:12px; padding:10px 18px 0; }
.po-mrow label{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--po-muted); }
.po-mrow input{ height:34px; border:1px solid #E3E3E7; border-radius:8px; padding:0 10px; font-family:inherit; font-size:13.5px; font-variant-numeric:tabular-nums; }
.po-mfoot{ display:flex; align-items:center; gap:12px; padding:16px 18px; margin-top:8px; }
.po-del{ border:1px solid #FBD3D3; background:#FEE2E2; color:var(--po-red); height:34px; padding:0 14px; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }
.po-save{ margin-left:auto; border:none; background:var(--po-ink); color:#fff; height:34px; padding:0 20px; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }
.po-save:disabled{ opacity:.5; }