/* PHF HR · QTTH · Biến động nhân sự V1 — scoped to .phf-wf-root only.
   Corporate QTTH: Arial, PHF orange #F58220, square cards/buttons/inputs,
   no gradient, no glow. Reuses .phf-qtth-table/.phf-qtth-tablewrap. */
.phf-wf-root{--wf-orange:#F58220;--wf-orange-ink:#B8560A;--wf-orange-wash:#FEF3E8;--wf-ink:#1E2430;--wf-muted:#5C6672;--wf-line:#E3E6EB;--wf-line-strong:#CDD2D9;--wf-ok:#1B7B45;--wf-ok-wash:#E7F3EC;--wf-warn:#9A4A00;--wf-warn-wash:#FFF4E5;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;color:var(--wf-ink);border-radius:0;border-color:var(--wf-line-strong);}
.phf-wf-root *,.phf-wf-root button,.phf-wf-root input,.phf-wf-root select{font-family:inherit;}
.phf-wf-head{border-bottom:3px solid var(--wf-orange);padding-bottom:10px;margin-bottom:14px;}
.phf-wf-head h2{margin:0 0 4px;font-size:18px;font-weight:700;}
.phf-wf-head p{margin:0;font-size:12.5px;color:var(--wf-muted);}
.phf-wf-sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--wf-line);}
.phf-wf-sechead h3{margin:0;font-size:14px;font-weight:700;text-transform:none;}
.phf-wf-sechead span{font-size:12px;color:var(--wf-muted);}
.phf-wf-muted{color:var(--wf-muted);}

/* tables: square, centered headers/cells like QTTH reporting */
.phf-wf-root .phf-wf-tablewrap{border-radius:0;border-color:var(--wf-line-strong);}
.phf-wf-root .phf-wf-table{min-width:720px;font-size:13px;}
.phf-wf-root .phf-wf-table th{text-align:center;border-radius:0;font-size:11px;}
.phf-wf-root .phf-wf-table td{text-align:center;padding:9px 12px;}
.phf-wf-root .phf-wf-table td.c-name{text-align:left;}
.phf-wf-root .phf-wf-table .c-num{font-variant-numeric:tabular-nums;}
.phf-wf-root .phf-wf-table .c-strong{font-weight:700;}
.phf-wf-root .phf-wf-table .c-ctl{padding:6px 8px;}
.phf-wf-root .phf-wf-overview tbody tr{cursor:pointer;}
.phf-wf-root .phf-wf-overview tr.is-selected td{background:var(--wf-orange-wash);}
.phf-wf-root .phf-wf-overview tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--wf-orange);}
.phf-wf-root .phf-wf-overview tr.is-stale td.c-num{color:var(--wf-muted);}
.phf-wf-root .phf-wf-overview .c-period{font-weight:700;white-space:nowrap;}
.phf-wf-root .phf-wf-dept tr.is-missing td{color:var(--wf-warn);}
.phf-wf-root .phf-wf-dept tr.is-total td{font-weight:700;background:#F3F4F6;border-top:2px solid var(--wf-line-strong);}
.phf-wf-root .phf-wf-review-table tr.is-need td{background:var(--wf-warn-wash);}
.phf-wf-root .phf-wf-review-table tr.is-changed td{background:var(--wf-orange-wash);}


/* period bar */
.phf-wf-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:18px 0 4px;padding:12px 14px;border:1px solid var(--wf-line-strong);border-left:4px solid var(--wf-orange);background:#FFF;}
.phf-wf-state{display:flex;flex-direction:column;gap:2px;min-width:0;}
.phf-wf-state strong{font-size:15px;}
.phf-wf-state small{font-size:12px;color:var(--wf-muted);}
.phf-wf-bar-act{margin-left:auto;}
.phf-wf-hint{font-size:12.5px;color:var(--wf-muted);}
.phf-wf-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--wf-muted);}
.phf-wf-field.is-grow{flex:1 1 220px;}
.phf-wf-field select,.phf-wf-select,.phf-wf-input{border:1px solid var(--wf-line-strong);border-radius:0!important;padding:7px 9px;font-size:13px;color:var(--wf-ink);background:#FFF;min-height:36px;box-sizing:border-box;}
.phf-wf-select{width:100%;min-width:190px;}
.phf-wf-input{width:100%;min-width:160px;}
.phf-wf-select.is-required,.phf-wf-input.is-required{border-color:var(--wf-orange);box-shadow:inset 3px 0 0 var(--wf-orange);}
.phf-wf-field select:focus,.phf-wf-select:focus,.phf-wf-input:focus{outline:2px solid var(--wf-orange);outline-offset:0;}
.phf-wf-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--wf-ink);align-self:center;}
.phf-wf-check input{accent-color:var(--wf-orange);width:16px;height:16px;}

.phf-wf-btn{background:var(--wf-orange);color:#FFF;border:1px solid var(--wf-orange);border-radius:0!important;padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer;min-height:36px;white-space:nowrap;}
.phf-wf-btn:hover{background:var(--wf-orange-ink);border-color:var(--wf-orange-ink);}
.phf-wf-btn:disabled{opacity:.5;cursor:default;background:var(--wf-orange);border-color:var(--wf-orange);}
.phf-wf-btn.ghost{background:#FFF;color:var(--wf-orange-ink);border-color:var(--wf-line-strong);}
.phf-wf-btn.ghost:hover{border-color:var(--wf-orange);background:var(--wf-orange-wash);}
.phf-wf-btn.ghost:disabled{background:#FFF;}
.phf-wf-btn.sm{padding:5px 10px;min-height:30px;font-size:12px;}

/* KPI tiles — square */
.phf-wf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin:14px 0 4px;border:1px solid var(--wf-line-strong);}
.phf-wf-kpi{padding:12px 14px;border-right:1px solid var(--wf-line);background:#FFF;display:flex;flex-direction:column;gap:4px;}
.phf-wf-kpi:last-child{border-right:0;}
.phf-wf-kpi span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--wf-muted);}
.phf-wf-kpi b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
.phf-wf-kpi.is-key{background:var(--wf-orange-wash);box-shadow:inset 0 3px 0 var(--wf-orange);}
.phf-wf-kpis.is-preview{border-style:dashed;}

/* V1.1 — two separate charts (never one mixed-scale chart):
   "Nhân sự cuối kỳ" = one orange line; "Biến động trong kỳ" = Tăng above /
   Giảm (Nghỉ việc + Giảm chưa rõ lý do) below a zero axis. Flat, square. */
.phf-wf-root{--wf-s-inc:#1B7B45;--wf-s-dep:#B42318;--wf-s-unk:#B9AC96;--wf-s-hist:#8A6D3B;}
.phf-wf-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:900px){.phf-wf-charts{grid-template-columns:minmax(0,1fr);}}
.phf-wf-chart-panel{min-width:0;}
.phf-wf-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:0 0 6px;}
.phf-wf-chart-head h4{margin:0;font-size:13px;font-weight:700;color:var(--wf-ink);}
.phf-wf-chart-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--wf-muted);}
.phf-wf-chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.phf-wf-chart-legend span:before{content:"";display:inline-block;width:10px;height:10px;}
.phf-wf-chart-legend .is-dot:before{width:8px;height:8px;border-radius:50%;background:var(--wf-orange);}
.phf-wf-chart-legend .is-dot-hist:before{width:6px;height:6px;border-radius:50%;background:#FFF;border:2px solid var(--wf-orange);}
.phf-wf-chart-legend .is-inc:before{background:var(--wf-s-inc);}
.phf-wf-chart-legend .is-dep:before{background:var(--wf-s-dep);}
.phf-wf-chart-legend .is-unk:before{background:var(--wf-s-unk);}
.phf-wf-chart-wrap{position:relative;border:1px solid var(--wf-line-strong);background:#FFF;overflow-x:auto;overflow-y:hidden;min-height:200px;}
.phf-wf-chart{display:block;max-width:none;}
.phf-wf-chart-foot{margin:6px 0 0;font-size:11.5px;color:var(--wf-muted);}
.phf-wf-chart-axis{stroke:var(--wf-line-strong);stroke-width:1;}
.phf-wf-chart-grid{stroke:#EEF0F3;stroke-width:1;}
.phf-wf-chart-x{fill:var(--wf-muted);font:11px Arial,"Helvetica Neue",Helvetica,sans-serif;text-anchor:middle;}
.phf-wf-chart-y{fill:var(--wf-muted);font:10.5px Arial,"Helvetica Neue",Helvetica,sans-serif;text-anchor:end;}
.phf-wf-chart-value{fill:var(--wf-ink);font:700 11px Arial,"Helvetica Neue",Helvetica,sans-serif;text-anchor:middle;}
.phf-wf-chart-value.is-inc{fill:var(--wf-s-inc);}
.phf-wf-chart-value.is-dec{fill:var(--wf-s-dep);}
.phf-wf-chart-pending-label{fill:var(--wf-muted);font:700 10px Arial,"Helvetica Neue",Helvetica,sans-serif;text-anchor:middle;}
/* The HR shell's icon SVG reset strokes every glyph, which makes one SVG
   text node look doubled. These charts are data SVG, not icons. */
#phfHrRoot .phf-wf-chart text{stroke:none!important;paint-order:normal;text-shadow:none!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-line,.phf-wf-chart-line{fill:none!important;stroke:var(--wf-orange)!important;stroke-width:2!important;stroke-linejoin:miter;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-dot,.phf-wf-chart-dot{fill:var(--wf-orange)!important;stroke:#FFF!important;stroke-width:1.5!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-dot.is-hist,.phf-wf-chart-dot.is-hist{fill:#FFF!important;stroke:var(--wf-orange)!important;stroke-width:2!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-bar,.phf-wf-chart-bar{stroke:none!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-bar.is-inc,.phf-wf-chart-bar.is-inc{fill:var(--wf-s-inc)!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-bar.is-dep,.phf-wf-chart-bar.is-dep{fill:var(--wf-s-dep)!important;}
#phfHrRoot .phf-wf-chart .phf-wf-chart-bar.is-unk,.phf-wf-chart-bar.is-unk{fill:var(--wf-s-unk)!important;}
.phf-wf-chart-bar,.phf-wf-chart-line,.phf-wf-chart-dot,.phf-wf-chart text,.phf-wf-chart-grid,.phf-wf-chart-axis{pointer-events:none;}
.phf-wf-chart .phf-wf-chart-hit{fill:#1E2430!important;fill-opacity:0!important;stroke:none!important;pointer-events:all;cursor:default;outline:none;}
.phf-wf-chart .phf-wf-chart-hit.is-hover,.phf-wf-chart .phf-wf-chart-hit:focus{fill-opacity:.045!important;}
/* V1.1 review: previous workforce with no Payroll this period (quick pick). */
.phf-wf-gap{margin:0 0 10px;padding:10px 12px;border:1px solid var(--wf-line-strong);border-left:4px solid var(--wf-s-unk);background:#FBF9F6;font-size:12.5px;}
.phf-wf-gap p{margin:0 0 8px;}
.phf-wf-gap-list{display:flex;flex-wrap:wrap;gap:6px;}
.phf-wf-root .phf-wf-overview tr.is-hist td{color:#3D4652;}
.phf-wf-banner.is-info{border-color:var(--wf-line-strong);border-left-color:var(--wf-s-hist);background:#FBF8F3;color:var(--wf-ink);}
.phf-wf-chart-pending,.phf-wf-chart-pending-label{pointer-events:none;}
.phf-wf-chart-tip{position:absolute;z-index:2;min-width:178px;padding:8px 10px;background:#FFF;border:1px solid var(--wf-line-strong);border-top:3px solid var(--wf-orange);box-shadow:0 2px 6px rgba(30,36,48,.12);font-size:12px;color:var(--wf-ink);pointer-events:none;}
.phf-wf-chart-tip[hidden]{display:none;}
.phf-wf-chart-tip b{display:block;font-size:12.5px;margin-bottom:4px;}
.phf-wf-chart-tip span{display:flex;justify-content:space-between;gap:16px;line-height:1.55;}
.phf-wf-chart-tip i{font-style:normal;color:var(--wf-muted);}
.phf-wf-chart-tip em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;}
.phf-wf-chart-tip small{display:block;margin-top:4px;padding-top:4px;border-top:1px solid var(--wf-line);color:var(--wf-muted);font-size:11px;}

/* Kết quả: one read-only group — fixed sign column + label on one baseline. */
.phf-wf-result{display:inline-grid;grid-template-columns:24px auto;column-gap:8px;align-items:baseline;width:196px;text-align:left;white-space:nowrap;font-size:13px;line-height:1.3;}
.phf-wf-result-sign{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:#98A2B3;}
.phf-wf-result-label{color:var(--wf-ink);}
.phf-wf-result.is-plus .phf-wf-result-sign{color:var(--wf-ok);}
.phf-wf-result.is-minus .phf-wf-result-sign{color:var(--wf-s-departure);}
.phf-wf-result.is-plus .phf-wf-result-label,.phf-wf-result.is-minus .phf-wf-result-label{font-weight:700;}
.phf-wf-result.is-zero .phf-wf-result-label{color:var(--wf-muted);}
.phf-wf-result.is-neutral .phf-wf-result-sign{color:var(--wf-muted);}
.phf-wf-result.is-neutral .phf-wf-result-label{font-weight:400;color:var(--wf-ink);}
.phf-wf-table td.c-result{text-align:center;vertical-align:middle;}
.phf-wf-table td.c-result .phf-wf-evi{text-align:center;}
.phf-wf-table td.c-note{text-align:left;min-width:180px;vertical-align:middle;}
.phf-wf-note,.phf-wf-evi{display:block;font-size:11.5px;color:var(--wf-muted);margin-top:3px;font-weight:400;}
.phf-wf-evi.is-bad{color:#B42318;}

.phf-wf-banner{padding:10px 12px;margin:12px 0;border:1px solid #F2C28B;border-left:4px solid var(--wf-orange);background:var(--wf-warn-wash);color:var(--wf-warn);font-size:13px;}
.phf-wf-empty-state{padding:22px 16px;margin:14px 0;border:1px dashed var(--wf-line-strong);color:var(--wf-muted);text-align:center;font-size:13.5px;background:#FCFCFD;}
.phf-wf-empty-state.is-error{color:#B42318;border-color:#F3B8B2;}
.phf-wf-count{font-size:12px;color:var(--wf-muted);margin:6px 0;}

/* inline review */
.phf-wf-review{margin-top:14px;border-top:3px solid var(--wf-orange);padding-top:10px;}
.phf-wf-review-head h3{margin:4px 0 6px;font-size:16px;font-weight:700;}
.phf-wf-review-head p{margin:0 0 4px;font-size:13px;}
.phf-wf-filter{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin-bottom:6px;}
.phf-wf-add{margin-top:10px;}
.phf-wf-add-form{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;padding:12px;border:1px solid var(--wf-line-strong);background:#FCFCFD;}
.phf-wf-add-form[hidden]{display:none;}
.phf-wf-add-form.is-inline{margin-top:10px;}
.phf-wf-add-form .phf-wf-field{min-width:200px;}
.phf-wf-add-act{display:flex;gap:8px;}
/* In-flow (not sticky): the HR shell makes <body> a non-scrolling overflow
   container, so position:sticky could never engage here. */
.phf-wf-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:18px;padding:12px 14px;background:#FFF;border:1px solid var(--wf-line-strong);border-top:3px solid var(--wf-orange);}
.phf-wf-footer-msg{font-size:13px;}
.phf-wf-footer-msg.is-warn{color:var(--wf-warn);font-weight:700;}
.phf-wf-err{color:#B42318;}
.phf-wf-footer-act{display:flex;gap:8px;margin-left:auto;}

/* Management drilldown: a clickable count opens the exact employees (read-only
   drawer = shared .phf-qtth-drawer). Square, orange ink, no pill. */
.phf-wf-drill{background:none;border:0;border-bottom:1px dotted var(--wf-orange-ink);border-radius:0!important;min-height:0;box-shadow:none;padding:0 2px;margin:0;font:inherit;font-weight:700;color:var(--wf-orange-ink);cursor:pointer;font-variant-numeric:tabular-nums;}
.phf-wf-drill:hover,.phf-wf-drill:focus{background:var(--wf-orange-wash);outline:none;border-bottom-style:solid;}
.phf-wf-kpi b .phf-wf-drill{font-size:inherit;}
.phf-wf-root .phf-wf-table td.c-scope{white-space:nowrap;color:var(--wf-muted);}
.phf-wf-recon{margin:6px 0 0;font-size:12px;color:var(--wf-muted);}
.phf-wf-drawer{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;border-radius:0;}
.phf-wf-drawer .phf-wf-table{min-width:0;}
.phf-wf-root .phf-wf-people td.c-type{font-weight:700;white-space:nowrap;}

@media (max-width:760px){
  .phf-wf-bar{flex-direction:column;align-items:stretch;}
  .phf-wf-bar-act{margin-left:0;}
  .phf-wf-bar-act .phf-wf-btn{width:100%;}
  .phf-wf-kpis{grid-template-columns:repeat(2,1fr);}
  .phf-wf-kpi{border-bottom:1px solid var(--wf-line);}
  .phf-wf-kpi b{font-size:19px;}
  .phf-wf-footer{flex-direction:column;align-items:stretch;}
  .phf-wf-footer-act{margin-left:0;}
  .phf-wf-footer-act .phf-wf-btn{flex:1;}
  .phf-wf-add-form .phf-wf-field{min-width:0;width:100%;}
}