/* PHF HR — QTTH · MANAGEMENT REPORTING V1 · additive styles only.
* Reuses phf-qtth.css tokens (--qt-surface/--qt-line/--qt-orange/...) and
* base classes (.phf-qtth-card/.phf-qtth-table/.phf-qtth-btn/...). This file
* only adds the KPI-tile / tab / comparison-badge / matrix classes those
* don't already provide. No gradients, no glow, no pastel-heavy language —
* moderately squared cards with clear borders (locked IA, §13).
*/
.phf-qr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0;}
.phf-qr-kpi{border:1px solid var(--qt-line-strong);border-radius:8px;padding:14px 16px;background:var(--qt-surface);}
.phf-qr-kpi-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#6B7280;margin-bottom:6px;}
.phf-qr-kpi-value{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:#1F2430;}
.phf-qr-kpi-value.is-na{font-size:14px;font-weight:600;color:var(--qt-muted);}
.phf-qr-tabs{display:flex;gap:6px;border-bottom:1px solid var(--qt-line-strong);margin-bottom:14px;}
.phf-qr-tab{border:0;background:none;padding:9px 4px;margin-right:14px;font-size:13.5px;font-weight:700;color:var(--qt-muted);cursor:pointer;border-bottom:2px solid transparent;}
.phf-qr-tab:hover{color:#1F2430;}
.phf-qr-tab.is-on{color:var(--qt-orange-ink,#B4530A);border-bottom-color:var(--qt-orange,#E08A2C);}
.phf-qr-cmp{font-size:12px;font-weight:700;white-space:nowrap;color:#48505C;}
.phf-qr-cmp.is-na{color:var(--qt-muted);font-weight:600;}
.phf-qr-cmp.is-none{color:var(--qt-muted);font-weight:600;}
.phf-qr-cmp.is-new{color:#1B7B45;}
/* Arrow direction only — UP and DOWN intentionally share the SAME neutral
* ink (never green/red "good/bad" semantics), per the locked comparison
* contract. Only the glyph (▲/▼) conveys direction. */
.phf-qr-cmp.is-up,.phf-qr-cmp.is-down,.phf-qr-cmp.is-flat{color:#3A4150;}
.phf-qr-share{display:inline-block;margin-left:6px;font-size:11px;color:var(--qt-muted);font-weight:600;}
.phf-qr-chart-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin:16px 0;}
.phf-qr-chart{border:1px solid var(--qt-line-strong);padding:12px;background:var(--qt-surface);overflow-x:auto;}
.phf-qr-chart-title{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.2px;}
.phf-qr-late-root .phf-qr-late-chart svg text{stroke:none!important;paint-order:normal;}
.phf-qr-late-root .phf-qr-late-daily{width:100%;max-width:none;overflow:hidden;}
.phf-qr-late-root .phf-qr-late-daily svg{display:block;width:100%!important;max-width:none;}
@media(max-width:760px){.phf-qr-chart-row{grid-template-columns:1fr;}.phf-qr-late-daily svg{min-width:680px;}}
.phf-qr-subrow td{background:#FAFAFB;color:#4B5563;font-size:12.5px;}
.phf-qr-compare-row{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 16px;}
.phf-qr-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;}
.phf-qr-toolbar{background:var(--qt-surface);border:1px solid var(--qt-line-strong);border-radius:4px;padding:12px 14px;display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;}
.phf-qr-scope{margin-left:auto;align-self:center;font-size:12px;color:var(--qt-muted);}.phf-qr-scope b{color:var(--qt-ink);}
.phf-qr-money-detail{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0 4px;font-size:13px;}
.phf-qr-money-detail b{font-weight:800;}
/* Chi phí nhân sự sub-nav (Tăng ca / Đi trễ / BHXH) — router glue in
* phf-qtth-app.js's renderChiPhiNhanSu(). */
.phf-qtth-nav-children{margin:-2px 0 8px 38px;display:grid;gap:2px;}
/* "Chi phí nhân sự" group heading: same row geometry/typography as the
* sibling QTTH items, but not a link and never active — only the child
* report carries the active state. */
.phf-qtth-nav .phf-qtth-nav-group{display:flex;align-items:center;gap:9px;padding:9px 10px 5px;border-left:3px solid transparent;color:var(--qt-ink);font-weight:700;font-size:13.5px;cursor:default;}
.phf-qtth-nav .phf-qtth-nav-group svg{width:17px;height:17px;flex:0 0 auto;color:var(--qt-muted);}
.phf-qtth-nav .phf-qtth-nav-child{min-height:30px;padding:6px 10px;border-left:2px solid var(--qt-line-strong);font-size:12.5px;font-weight:650;color:var(--qt-muted);}
.phf-qtth-nav .phf-qtth-nav-child:hover{color:#1F2430;background:#FFF7F0;}
.phf-qtth-nav .phf-qtth-nav-child.is-active{color:var(--qt-orange-ink,#B4530A);border-left-color:var(--qt-orange,#E08A2C);background:#FFF7F0;}
.phf-qr-local-demo{display:inline-block;margin:0 0 10px;padding:3px 8px;border:1px solid var(--qt-line-strong);border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.35px;color:#7A4B11;background:#FFF7F0;}
.phf-qr-section-title{margin:18px 0 8px;font-size:14px;font-weight:800;padding-top:12px;border-top:1px solid var(--qt-line);}
.phf-qtth-table th.c-num,.phf-qtth-table td.c-num{ text-align:center; }
@media(max-width:900px){.phf-qr-toolbar{align-items:flex-start;flex-direction:column}.phf-qr-scope{margin-left:0;}}
/* BHXH — dual-metric (NLĐ / CP DN) KPI cards + block numbering. Additive
* only; scoped to BHXH-specific classes so Tăng ca/Đi trễ are unaffected. */
.phf-qr-kpi.is-nld{border-top:4px solid var(--qt-orange,#E08A2C);}
.phf-qr-kpi.is-dn{border-top:4px solid #245f88;}
.phf-qr-kpi-compare{margin-top:6px;display:flex;flex-direction:column;gap:2px;}
.phf-qr-kpi-source{margin-top:9px;padding-top:8px;border-top:1px solid var(--qt-line);color:#59665f;font-size:11px;}
.phf-qr-block-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:6px;border-radius:4px;background:var(--qt-orange,#E08A2C);color:#fff;font-size:11px;font-weight:800;vertical-align:middle;}
.phf-qr-block-no.is-blue{background:#245f88;}
.phf-qr-footnote{font-size:11px;color:#75817b;margin-top:7px;}
/* BHXH ranking + dual org-comparison tables: guarantee ALL columns stay
* reachable via horizontal scroll (never silently clipped) rather than
* being squeezed unreadably narrow. .phf-qtth-table-compact normally drops
* min-width to 0 (letting columns shrink); these two wraps restore an
* explicit min-width sized to their column count so overflow-x:auto on the
* shared .phf-qtth-tablewrap (phf-qtth.css) reliably kicks in instead. */
.phf-qr-ranking-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.phf-qr-ranking-wrap .phf-qtth-table{min-width:920px;}
.phf-qr-org-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.phf-qr-org-cmp-wrap .phf-qtth-table{min-width:1180px;}
/* Overtime HTML-fidelity corrective: the overview is deliberately a four-card
* desktop management row, while its wide ranking remains scroll-contained. */
.phf-qr-root .phf-ot-overview-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
.phf-qr-root .phf-ot-trend-chart{width:100%;overflow:hidden;}
.phf-qr-root .phf-ot-trend-chart svg{width:100%;max-width:none;fill:currentColor;stroke:none;}
.phf-qr-root .phf-ot-trend-chart svg line{fill:none;stroke:currentColor;stroke-width:1;}
.phf-qr-root .phf-ot-trend-chart svg text{stroke:none;paint-order:normal;}
.phf-qr-root .phf-ot-ranking-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.phf-qr-root .phf-ot-ranking-wrap .phf-qtth-table{min-width:1040px;}
@media(max-width:900px){.phf-qr-root .phf-ot-overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.phf-qr-root .phf-ot-overview-kpis{grid-template-columns:1fr;}}
.phf-ot-root .phf-ot-period-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
.phf-ot-analysis{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin:14px 0;}
.phf-ot-panel{border:1px solid var(--qt-line-strong);padding:12px;min-width:0;}
.phf-ot-panel h3,.phf-ot-overview-section h3,.phf-ot-overview-section h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;}
.phf-ot-hbar{display:grid;grid-template-columns:minmax(100px,1fr) minmax(70px,2fr) auto;gap:8px;align-items:center;margin:9px 0;font-size:12px;}
.phf-ot-hbar i{height:14px;background:var(--qt-orange,#e08a2c);display:block;}
.phf-ot-hbar b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.phf-ot-donut{display:flex;align-items:center;gap:12px;}.phf-ot-donut svg{width:125px;flex:0 0 125px;transform:rotate(-90deg);}.phf-ot-donut ul{margin:0;padding-left:16px;font-size:12px;}.phf-ot-donut li{margin:5px 0;}
.phf-ot-share{display:block;height:4px;background:#e5e7eb;margin-top:4px;}.phf-ot-share i{display:block;height:100%;background:var(--qt-orange,#e08a2c);}
.phf-ot-org-wrap .phf-qtth-table{min-width:980px;}.phf-ot-overview-section{margin-top:20px;padding-top:14px;border-top:1px solid var(--qt-line);}
.phf-ot-overview-section h4{margin-top:16px;color:#48505c;}.phf-ot-heat{display:inline-block;min-width:55px;padding:2px 4px;}
@media(max-width:900px){.phf-ot-root .phf-ot-period-kpis{grid-template-columns:1fr;}.phf-ot-analysis{grid-template-columns:1fr;}}
/* ==========================================================================
* GLOBAL VISUAL CONTRACT (2026-09-23 final BHXH alignment pass) — HARD RULE.
* Applies to BHXH now; will extend to Tăng ca/Đi trễ in a LATER pass (not
* this one). Scoped entirely to .phf-qr-root (the shared Reporting wrapper
* div added by phf-qtth-app.js's renderChiPhiNhanSu(), router glue only —
* no Tăng ca/Đi trễ business logic touched) so nothing outside the 3
* Reporting screens is affected, and no shared non-Reporting QTTH screen
* (Truth Data admin, Phân quyền, dictionaries, ...) is touched either.
*
* A. SQUARE/CORPORATE — firm, not harsh: small (2–4px) radii, no pill/
* capsule shapes, no gradients/glow, no heavy shadow.
* B. CENTERING — hard data rule: every quantitative/reporting column
* (money, count, percentage, period, comparison, total, hours/minutes,
* "Mới"/"—"/unavailable, short actions like "Chi tiết") is centered via
* the existing structural .c-num class on BOTH and (already
* enforced repo-wide by the .phf-qtth-table th.c-num/td.c-num rule
* above) — never a margin/padding hack. Identity/org/descriptive columns
* (Nhân sự, Tổ chức, Khối, Phòng ban, Nhóm) stay left/default-aligned via
* .c-name or plain , never centered.
* ========================================================================== */
.phf-qr-root .phf-qtth-card{border-radius:0;box-shadow:none;}
.phf-qr-root .phf-qtth-tablewrap{border-radius:0;}
.phf-qr-root .phf-qtth-btn{border-radius:0;}
.phf-qr-root .phf-qtth-warn-inline{border-radius:0;}
.phf-qr-root .phf-qtth-field input,
.phf-qr-root .phf-qtth-field select,
.phf-qr-root .phf-qtth-select,
.phf-qr-root .phf-qtth-search{border-radius:0;}
.phf-qr-root .phf-qr-kpi{border-radius:0;}
.phf-qr-root .phf-qr-toolbar{border-radius:0;}
.phf-qr-root .phf-qr-local-demo{border-radius:0;}
.phf-qr-root .phf-qr-block-no{border-radius:0;}
/* CORRECTIVE PASS 04D: the main "Theo kỳ/Tổng quan" tab control (same
* .phf-qr-tab button as the ranking sort tabs) still rendered with a visibly
* curved active indicator in the browser despite this border-radius:0 rule
* (PASS 02) and the native-appearance reset (PASS 03) below. Root cause
* traced to assets/css/phf-ui-polish.css's SITE-WIDE bare-tag rule
* `button,.btn,.primary,...{border-radius:12px!important;...}` — it matches
* every element in the app, INCLUDING .phf-qr-tab, and its
* `!important` unconditionally beats every non-!important border-radius:0
* rule this file sets, regardless of selector specificity or file load
* order. No ::before/::after indicator, no box-shadow pill and no clipping
* ancestor exist for this control (confirmed by inspection) — the curve was
* purely the 12px corner radius from that global button rule leaking
* through. Only an !important scoped to this control's own selector can
* override it without touching the shared global rule. */
.phf-qr-root .phf-qr-tab{border-radius:0!important;} /* no pill active state — square underline only */
.phf-qr-root .phf-qr-chart{border-radius:0;}
.phf-qr-root .phf-qtth-link{border-radius:0;}
/* CORRECTIVE PASS 03 (item 3/5): the main "Theo kỳ/Tổng quan" tabs and the
* "CP Doanh nghiệp ↓/NLĐ đóng ↓" ranking sort tabs (both render through the
* SAME .phf-qr-tab button) still showed a soft curve in the browser despite
* the zero radius set above for that class — the remaining curve comes from
* the browser's own native appearance (WebKit/Blink keep a default
* rounded "button" appearance even with background:none/border:0 unless
* appearance is reset explicitly). Reset native appearance on every
* button-like/input-like Reporting control so a zero radius is the ONLY
* shape rule that applies. */
.phf-qr-root button,
.phf-qr-root input,
.phf-qr-root select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;}
/* KPI cards — hard centering rule (item 9): label + main value share the
* same visual center axis via flex, not a margin/padding hack. The compare
* badges / source footnote stay left/default-aligned so long prose is never
* force-centered. */
.phf-qr-root .phf-qr-kpi{display:flex;flex-direction:column;align-items:center;text-align:center;}
.phf-qr-root .phf-qr-kpi-compare,.phf-qr-root .phf-qr-kpi-source{align-self:stretch;text-align:left;}
/* ---- BHXH theo tổ chức — two vertical single-metric regions ------------ */
.phf-qr-region{margin-top:16px;padding-top:14px;border-top:1px solid var(--qt-line);}
.phf-qr-region:first-of-type{border-top:0;padding-top:0;margin-top:10px;}
.phf-qr-region-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.phf-qr-region-title{margin:0;font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.phf-qr-region-blocked{background:#FCFCFD;}
.phf-qr-block-no.is-blocked{background:#8A93A0;}
/* ---- Tổng quan hierarchy sub-blocks (Khối×tháng / Phòng ban×tháng /
* Đơn vị×tháng / Nhân sự×tháng) inside each financial region ------------- */
.phf-qr-hierarchy-block{margin-top:12px;}
.phf-qr-hierarchy-title{margin:0 0 6px;font-size:12px;font-weight:800;color:#48505C;text-transform:uppercase;letter-spacing:.3px;}
/* Groups the 3 independent organization axes (Khối/Phòng ban/Đơn vị) under
* one label — deliberately NOT "hierarchy"/"cấp bậc" wording (no enforced
* nesting exists in the canonical model; each axis reconciles to the same
* company total independently). Nhân sự × tháng gets its own plain title
* (already rendered via hierarchyRegionHtml's own ), outside this group. */
.phf-qr-hierarchy-group-title{margin:16px 0 4px;font-size:11.5px;font-weight:800;color:#75817b;text-transform:uppercase;letter-spacing:.4px;}
/* ---- CORRECTIVE PASS 02 additions ---------------------------------------- */
/* TOTAL rows (org comparison table's TỔNG row + matrixTableHtml's TỔNG row):
* visually distinct but restrained — a top border + subtle tint + bold text,
* never a loud highlight color. */
.phf-qr-total-row td{border-top:2px solid var(--qt-line-strong);background:#F7F7F5;font-weight:700;}
/* Compact P1/P2 period-context line shown once near the period selector
* (item 1) instead of repeating the period per comparison cell. */
.phf-qr-period-context{margin:-6px 0 12px;font-size:12px;}
.phf-qr-period-context b{color:var(--qt-ink);}
/* Lightweight native-SVG trend charts (item 6) — square/corporate, no card
* gradient/glow; scoped colors per metric so NLĐ/DN/participation stay
* visually distinct without ever combining into one chart. */
.phf-qr-chart{border:1px solid var(--qt-line-strong);padding:10px 12px 4px;margin:10px 0 14px;background:var(--qt-surface);color:#48505C;}
.phf-qr-chart-title{font-size:11.5px;font-weight:800;color:#48505C;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;}
.phf-qr-chart.is-nld{color:var(--qt-orange-ink,#B4530A);}
.phf-qr-chart.is-dn{color:#245f88;}
.phf-qr-chart.is-participation{color:#3A7350;padding:8px 10px 2px;margin:8px 0 12px;}
.phf-qr-chart svg{display:block;}
.phf-qr-block-no.is-demo-participation{background:#3A7350;}
/* ==========================================================================
* CORRECTIVE PASS 03 (2026-09-23, browser review) additions.
* ========================================================================== */
/* Item 6: 2 wider Overview summary KPI cards instead of a leftover 4-slot
* grid — deliberate width use, still square + centered (inherits .phf-qr-kpi). */
.phf-qr-kpis.is-2col{grid-template-columns:repeat(2,minmax(240px,1fr));}
@media(max-width:520px){.phf-qr-kpis.is-2col{grid-template-columns:1fr;}}
/* Item 7: movement cells (value + ▲/▼ delta vs the previous CALENDAR month)
* used by every NLĐ/DN/participation matrix. Direction glyph only — never
* green=good/red=bad (same neutral-ink contract as .phf-qr-cmp above). */
.phf-qr-move-cell{display:flex;flex-direction:column;align-items:center;line-height:1.3;}
.phf-qr-move-val{font-variant-numeric:tabular-nums;}
.phf-qr-move-delta{font-size:11px;font-weight:700;color:#48505C;white-space:nowrap;}
.phf-qr-move{font-weight:700;}
.phf-qr-move.is-up,.phf-qr-move.is-down,.phf-qr-move.is-flat{color:#48505C;}
/* Item 9: progressive disclosure ("Xem thêm"/"Thu gọn") for employee lists —
* the extra rows live in a second , toggled by a row
* spanning the full table width. UI-only: never re-renders/re-fetches, so
* totals stay sourced from the FULL dataset regardless of toggle state. */
.phf-qr-pd-row td{text-align:center;border-top:1px solid var(--qt-line);background:var(--qt-surface);padding:8px;}
.phf-qr-pd-toggle{font-size:12.5px;}
/* Item 4: "Chi tiết" (and any other action link inside a centered .c-act
* cell) must center as a BLOCK, not rely on inline default flow — a bare
* inline can end up hugging one edge of a wide cell on some
* browsers/zoom levels even under text-align:center. */
.phf-qr-root .phf-qtth-table .c-act .phf-qtth-link{display:inline-block;}
/* ==========================================================================
* CORRECTIVE PASS 04B (2026-09-23) — Region 00 (BIẾN ĐỘNG NHÂN SỰ THAM GIA
* BHXH) quick-summary + two-chart row. Additive only, scoped to the new
* classes below — the ACCEPTED movement matrix's own classes are untouched.
* ========================================================================== */
/* A. Compact quick-summary line — a single small line, never a card/tile,
* so it reads as a lightweight header line above the (already compact)
* local-demo disclaimer, not a competing block. */
.phf-qr-quick-summary{margin:0 0 4px;font-size:13px;font-weight:700;color:#1F2430;font-variant-numeric:tabular-nums;}
/* Compact variant of the existing .phf-qr-footnote demo disclaimer — same
* restrained 11px ink, just tighter vertical rhythm so it reads as a single
* short line under the quick summary instead of a large paragraph block. */
.phf-qr-footnote-compact{margin-top:2px;margin-bottom:10px;}
/* B. Two-chart row — desktop ~55% (headcount bar) / ~45% (salary-base
* distribution), same top/bottom alignment via the shared min-height on
* .phf-qr-chart-panel. Stacks under 900px, the SAME breakpoint convention
* already used by .phf-qr-toolbar/.phf-qr-org-cmp-wrap elsewhere in this
* file. Square/no-gradient — both panels already inherit the existing
* .phf-qr-chart bordered-box look (no new visual language introduced). */
.phf-qr-charts-row{display:flex;gap:14px;align-items:stretch;margin:10px 0 4px;}
.phf-qr-chart-col{display:flex;min-width:0;}
.phf-qr-chart-col-headcount{flex:0 0 55%;max-width:55%;}
.phf-qr-chart-col-salary{flex:1 1 45%;min-width:0;}
.phf-qr-chart-col .phf-qr-chart-panel{flex:1;display:flex;flex-direction:column;min-height:220px;margin:0;width:100%;}
@media(max-width:820px){
.phf-qr-charts-row{flex-direction:column;}
.phf-qr-chart-col-headcount,.phf-qr-chart-col-salary{flex:1 1 auto;max-width:100%;}
}
/* ==========================================================================
* CORRECTIVE PASS 04B.1 (2026-09-23) — headcount bar chart label-duplication
* fix. ROOT CAUSE (traced from the actual rendered DOM, not guessed): every
* QTTH screen mounts inside the single shared app shell `#phfHrRoot.phf-hr-
* root` (index.html), and phf-hr-home.css — loaded BEFORE this stylesheet —
* declares a global icon-outline reset:
* .phf-hr-root svg{fill:none;stroke:currentColor;stroke-width:1.8;
* stroke-linecap:round;stroke-linejoin:round}
* That rule is a CSS author-stylesheet declaration, which in SVG always
* beats a presentation ATTRIBUTE (fill="currentColor" on our /
* elements) regardless of selector specificity vs. the attribute. Nothing in
* this module ever reset it back, so every this chart draws (the
* numeric value label above each bar AND the Txx/YYYY month label on the
* X axis) was forced to fill:none + stroke:currentColor + a 1.8px stroke —
* i.e. rendered as a thick HOLLOW OUTLINE instead of solid fill. At this
* chart's 10px font-size a 1.8px stroke is wide enough relative to the
* glyph strokes that each character self-overlaps and reads as visually
* doubled/overprinted — this was never two nodes (there is exactly
* one per bar and one per month in the generated markup; see
* svgBarChartHtml in phf-qtth-reporting.js), it only LOOKED duplicated. The
* same leak also turned the bar fills hollow. Fixed here by resetting
* fill/stroke back to the chart's own intent, scoped ONLY to this chart's
* own class (is-participation-bar) — never touching the generic
* `.phf-qr-chart svg` selector Region 01/02's existing line charts share, so
* their (pre-existing, out-of-scope) appearance is byte-for-byte unchanged. */
.phf-qr-chart.is-participation-bar svg{fill:currentColor;stroke:none;}
.phf-qr-chart.is-participation-bar svg line{fill:none;stroke:currentColor;stroke-width:1;}
/* ==========================================================================
* CORRECTIVE PASS 04C (2026-09-23) — Region 01 (NLĐ) / Region 02 (CP DN)
* trend charts replaced (svgLineChartHtml -> svgBarChartHtml, same grammar
* as Region 00's is-participation-bar above). SAME root cause as 04B.1 (the
* global `.phf-hr-root svg{fill:none;stroke:currentColor;...}` icon-outline
* reset), so each new bar chart needs the SAME fill/stroke reset — but kept
* as its OWN narrowly-scoped class per chart (is-nld-bar / is-dn-bar), never
* folded into one shared/generic rule, so a future change to one chart's
* scoping can never ripple into the other, into Region 00's chart, or into
* any other screen's charts (Tăng ca/Đi trễ use their own separate chart
* classes — verified: neither references is-nld-bar/is-dn-bar/is-participation-bar). */
.phf-qr-chart.is-nld-bar svg{fill:currentColor;stroke:none;}
.phf-qr-chart.is-nld-bar svg line{fill:none;stroke:currentColor;stroke-width:1;}
.phf-qr-chart.is-dn-bar svg{fill:currentColor;stroke:none;}
.phf-qr-chart.is-dn-bar svg line{fill:none;stroke:currentColor;stroke-width:1;}
/* C. Salary-base distribution — horizontal bar rows (plain HTML/CSS, not
* SVG; a simple management-reading list of bucket/headcount bars). Square,
* no gradient, single neutral fill color (no red/green good/bad semantics —
* same restrained-ink contract as every other Reporting chart on this
* screen). */
.phf-qr-hbars{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.phf-qr-hbar-row{display:flex;align-items:center;gap:8px;font-size:11.5px;}
.phf-qr-hbar-label{flex:0 0 74px;text-align:right;color:#48505C;font-variant-numeric:tabular-nums;white-space:nowrap;}
.phf-qr-hbar-track{position:relative;flex:1;height:16px;background:#F1F1EF;border:1px solid var(--qt-line);min-width:0;}
.phf-qr-hbar-fill{position:absolute;left:0;top:0;bottom:0;background:#245f88;}
.phf-qr-hbar-value{flex:0 0 28px;font-weight:700;color:#1F2430;font-variant-numeric:tabular-nums;}
/* ======================================================================
* BHXH FINAL VISUAL POLISH — deliberately scoped to the BHXH renderer.
* No shared Reporting, Đi trễ, or Tăng ca visual contract is changed.
* ====================================================================== */
.phf-qr-bhxh-root{font-family:inherit;}
.phf-qr-bhxh-root .phf-qtth-head h2,
.phf-qr-bhxh-root .phf-qr-section-title,
.phf-qr-bhxh-root .phf-qr-region-title,
.phf-qr-bhxh-root .phf-qr-hierarchy-title,
.phf-qr-bhxh-root .phf-qr-hierarchy-group-title,
.phf-qr-bhxh-root .phf-qr-chart-title{font-family:inherit;color:#202833;}
.phf-qr-bhxh-root .phf-qr-section-title{font-size:14px;font-weight:800;letter-spacing:.25px;}
.phf-qr-bhxh-root .phf-qr-region-title{font-size:13px;font-weight:800;letter-spacing:.35px;}
.phf-qr-bhxh-root .phf-qr-hierarchy-title,
.phf-qr-bhxh-root .phf-qr-chart-title{font-size:12px;font-weight:800;letter-spacing:.3px;}
.phf-qr-bhxh-root .phf-qtth-field>span{display:block;margin-bottom:5px;color:#303946;font-size:12px;font-weight:800;}
.phf-qr-bhxh-root .phf-qtth-field input::placeholder{color:#7A8490;opacity:1;}
.phf-qr-bhxh-root .phf-qtth-field input,
.phf-qr-bhxh-root .phf-qtth-field select{color:#202833;font-weight:600;border-color:#9AA3AD;}
/* Filled, square KPI identities. White typography is deliberately kept at
* full opacity so the value remains the dominant management signal. */
.phf-qr-bhxh-root .phf-qr-kpi{min-height:132px;justify-content:center;border:1px solid transparent;padding:16px 18px;box-shadow:none;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld{background:#F58A1F;border-color:#D96F08;}
.phf-qr-bhxh-root .phf-qr-kpi.is-dn{background:#0F7A43;border-color:#0A6436;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld .phf-qr-kpi-label{color:#FFF;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-kpi.is-dn .phf-qr-kpi-label{color:#FFF;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld .phf-qr-kpi-value{color:#FFF;font-size:27px;font-weight:800;letter-spacing:-.25px;}
.phf-qr-bhxh-root .phf-qr-kpi.is-dn .phf-qr-kpi-value{color:#FFF;font-size:27px;font-weight:800;letter-spacing:-.25px;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld .phf-qr-kpi-value.is-na,
.phf-qr-bhxh-root .phf-qr-kpi.is-dn .phf-qr-kpi-value.is-na{font-size:14px;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld .phf-qr-kpi-value.is-na{color:#FFF;}
.phf-qr-bhxh-root .phf-qr-kpi.is-dn .phf-qr-kpi-value.is-na{color:#FFF;}
.phf-qr-bhxh-root .phf-qr-kpi .phf-qr-kpi-compare{margin-top:8px;align-self:stretch;text-align:left;}
.phf-qr-bhxh-root .phf-qr-kpi .phf-qr-cmp{font-weight:800;}
/* Direction means increase/decrease throughout BHXH: red / blue, never a
* positive/negative judgement. New and unavailable remain intentionally
* separate from the directional convention. */
.phf-qr-bhxh-root .phf-qr-cmp.is-up,
.phf-qr-bhxh-root .phf-qr-move.is-up,
.phf-qr-bhxh-root .phf-qr-bhxh-increase{color:#C62828;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-cmp.is-down,
.phf-qr-bhxh-root .phf-qr-move.is-down,
.phf-qr-bhxh-root .phf-qr-bhxh-decrease{color:#1565C0;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-cmp.is-new{color:#7A4B11;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-cmp.is-flat,
.phf-qr-bhxh-root .phf-qr-bhxh-neutral{color:#48505C;font-weight:700;}
.phf-qr-bhxh-root .phf-qr-cmp.is-na,
.phf-qr-bhxh-root .phf-qr-kpi-value.is-na{color:#5E6975;}
/* Theo kỳ alone adds .phf-qr-kpi-compare. The generic neutral/is-na rules
* above were declared later and darkened this supporting KPI text in the
* browser; restore solid white only in those comparison-bearing KPI cards.
* Directional UP/DOWN selectors remain intentionally untouched. */
.phf-qr-bhxh-root .phf-qr-kpi .phf-qr-kpi-compare .phf-qr-cmp.is-flat,
.phf-qr-bhxh-root .phf-qr-kpi .phf-qr-kpi-compare .phf-qr-cmp.is-none,
.phf-qr-bhxh-root .phf-qr-kpi .phf-qr-kpi-compare .phf-qr-cmp.is-na{color:#FFF;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-kpi:has(.phf-qr-kpi-compare) .phf-qr-kpi-value.is-na{color:#FFF;}
/* The green DN KPI is the only filled KPI whose Theo kỳ increase text needs
* a brighter red. :has(.phf-qr-kpi-compare) excludes Tổng quan KPI cards;
* no global/table/matrix increase color is affected. */
.phf-qr-bhxh-root .phf-qr-kpi.is-dn:has(.phf-qr-kpi-compare) .phf-qr-cmp.is-up{color:#FF6B6B;font-weight:800;}
.phf-qr-bhxh-root .phf-qtth-table thead th{color:#27313D;font-weight:800;}
.phf-qr-bhxh-root .phf-qtth-table td.c-num{font-variant-numeric:tabular-nums;}
.phf-qr-bhxh-root .phf-qr-chart svg,
.phf-qr-bhxh-root .phf-qr-chart svg text{font-family:inherit;font-weight:600;}
.phf-qr-bhxh-root .phf-qr-chart svg text{stroke:none;paint-order:normal;}
.phf-qr-bhxh-root .phf-qr-trend-summary{font-weight:600;color:#48505C;}
/* ======================================================================
* ĐI TRỄ UI POLISH — scoped to .phf-qr-late-root (the Late renderer's own
* root) only. BHXH / Tăng ca never carry this class, so nothing below can
* reach them. One token set drives Theo kỳ AND Tổng quan: the three KPI
* identities (minutes / people / occurrences) and one fresh-orange bar color
* shared by the daily chart and both monthly charts.
* ====================================================================== */
.phf-qr-late-root{
--qr-late-ink:#202833;
--qr-late-orange:#F58A1F;--qr-late-orange-edge:#DE7410;
--qr-late-blue:#2F6FDE;--qr-late-blue-edge:#1F5BC4;
--qr-late-teal:#0E9E8E;--qr-late-teal-edge:#0A8577;
--qr-late-bar:var(--qr-late-orange);
--qr-late-up:#D32F2F;--qr-late-down:#1565C0;--qr-late-neutral:#5E6975;
}
/* Typography — one family (inherited), firm headings/labels/table heads. */
.phf-qr-late-root .phf-qtth-head h2,
.phf-qr-late-root .phf-qr-section-title,
.phf-qr-late-root .phf-qr-chart-title{font-family:inherit;color:var(--qr-late-ink);}
.phf-qr-late-root .phf-qr-section-title{font-size:14px;font-weight:800;letter-spacing:.25px;}
.phf-qr-late-root .phf-qr-chart-title{font-size:12px;font-weight:800;letter-spacing:.3px;}
.phf-qr-late-root .phf-qtth-field>span{display:block;margin-bottom:5px;color:#303946;font-size:12px;font-weight:800;}
.phf-qr-late-root .phf-qtth-field input,
.phf-qr-late-root .phf-qtth-field select{color:var(--qr-late-ink);font-weight:600;border-color:#9AA3AD;}
.phf-qr-late-root .phf-qtth-table thead th{color:#27313D;font-weight:800;}
.phf-qr-late-root .phf-qtth-table td.c-num{font-variant-numeric:tabular-nums;}
/* Filled KPI cards — same box dimensions as the base .phf-qr-kpi; solid
* fills, no gradient/glow; white full-opacity text. */
.phf-qr-late-root .phf-qr-kpi.is-late-kpi{border:1px solid transparent;box-shadow:none;}
.phf-qr-late-root .phf-qr-kpi.is-late-minutes{background:var(--qr-late-orange);border-color:var(--qr-late-orange-edge);}
.phf-qr-late-root .phf-qr-kpi.is-late-people{background:var(--qr-late-blue);border-color:var(--qr-late-blue-edge);}
.phf-qr-late-root .phf-qr-kpi.is-late-occurrences{background:var(--qr-late-teal);border-color:var(--qr-late-teal-edge);}
.phf-qr-late-root .phf-qr-kpi.is-late-kpi .phf-qr-kpi-label{color:#FFF;font-size:12px;font-weight:800;}
.phf-qr-late-root .phf-qr-kpi.is-late-kpi .phf-qr-kpi-value{color:#FFF;font-weight:800;}
/* Bar charts (daily + both monthly). The app-wide
* `.phf-hr-root svg{fill:none;stroke:currentColor;stroke-width:1.8}` icon
* reset otherwise leaves the bars gray with an outline; author rules on the
* elements themselves set the intended fill/stroke. */
.phf-qr-late-root .phf-qr-late-chart{color:#48505C;}
.phf-qr-late-root .phf-qr-late-chart svg{stroke:none;font-family:inherit;}
.phf-qr-late-root .phf-qr-late-chart svg rect{fill:var(--qr-late-bar);stroke:none;}
.phf-qr-late-root .phf-qr-late-chart svg line{fill:none;stroke:currentColor;stroke-width:1;}
.phf-qr-late-root .phf-qr-late-chart svg text{fill:var(--qr-late-ink);font-family:inherit;font-weight:600;}
/* Direction for Đi trễ: more lateness = red, less = blue. Arrow + absolute
* + percentage share the span's color; the row itself is never colored.
* Unchanged / no data stay neutral. */
.phf-qr-late-root .phf-qr-cmp.is-up,
.phf-qr-late-root .phf-qr-cmp.is-new{color:var(--qr-late-up);font-weight:800;}
.phf-qr-late-root .phf-qr-cmp.is-down{color:var(--qr-late-down);font-weight:800;}
.phf-qr-late-root .phf-qr-cmp.is-flat,
.phf-qr-late-root .phf-qr-cmp.is-none,
.phf-qr-late-root .phf-qr-cmp.is-na{color:var(--qr-late-neutral);font-weight:700;}
/* ======================================================================
* TĂNG CA FINAL UI POLISH — scoped to .phf-ot-root (the Tăng ca renderer's
* own root) only; BHXH / Đi trễ never carry it. One token set for both tabs:
* KPI identities, one fresh-orange bar color, donut categories, the orange
* heat scale and the increase/decrease direction colors.
* ====================================================================== */
.phf-ot-root{
--qr-ot-ink:#202833;
--qr-ot-orange:#F58A1F;--qr-ot-orange-edge:#DE7410;
--qr-ot-blue:#2F6FDE;--qr-ot-blue-edge:#1F5BC4;
--qr-ot-green:#16A34A;--qr-ot-green-edge:#12893E;
--qr-ot-teal:#0E9E8E;--qr-ot-teal-edge:#0A8577;
--qr-ot-bar:var(--qr-ot-orange);
--qr-ot-up:#D32F2F;--qr-ot-down:#1565C0;--qr-ot-neutral:#5E6975;
--qr-ot-cat-0:var(--qr-ot-orange);--qr-ot-cat-1:var(--qr-ot-blue);--qr-ot-cat-2:var(--qr-ot-green);
--qr-ot-cat-3:var(--qr-ot-teal);--qr-ot-cat-4:#7B4FD6;--qr-ot-cat-5:#F2A900;--qr-ot-cat-na:#8E98A6;
--qr-ot-heat-1:#FFF0E0;--qr-ot-heat-2:#FFD8AD;--qr-ot-heat-3:#FDB468;--qr-ot-heat-4:#F7952F;--qr-ot-heat-5:#EE6F0C;
}
/* One font system: form controls and SVG text otherwise fall back to
* browser defaults instead of the report font. */
.phf-ot-root button,.phf-ot-root input,.phf-ot-root select,
.phf-ot-root svg,.phf-ot-root svg text{font-family:inherit;}
/* Hierarchy: page + major sections + subsection/chart titles bold; filter
* labels and table heads firm; table cells keep their normal weight. */
.phf-ot-root .phf-qtth-head h2,
.phf-ot-root .phf-ot-overview-section h3,
.phf-ot-root .phf-ot-overview-section h4,
.phf-ot-root .phf-ot-panel h3,
.phf-ot-root .phf-qr-section-title,
.phf-ot-root .phf-qr-chart-title{color:var(--qr-ot-ink);font-weight:800;}
.phf-ot-root .phf-ot-overview-section h3{font-size:14px;letter-spacing:.25px;}
.phf-ot-root .phf-ot-panel h3,.phf-ot-root .phf-ot-overview-section h4,
.phf-ot-root .phf-qr-chart-title{font-size:12px;letter-spacing:.3px;}
.phf-ot-root .phf-qtth-field>span{display:block;margin-bottom:5px;color:#303946;font-size:12px;font-weight:800;}
.phf-ot-root .phf-qtth-field input,
.phf-ot-root .phf-qtth-field select{color:var(--qr-ot-ink);font-weight:600;border-color:#9AA3AD;}
.phf-ot-root .phf-qtth-table thead th{color:#27313D;font-weight:800;}
.phf-ot-root .phf-qtth-table td.c-num{font-variant-numeric:tabular-nums;}
/* Filled KPI cards (both tabs) — base card size kept; white full-opacity text. */
.phf-ot-root .phf-qr-kpi.is-ot-kpi{border:1px solid transparent;box-shadow:none;}
.phf-ot-root .phf-qr-kpi.is-ot-hours{background:var(--qr-ot-orange);border-color:var(--qr-ot-orange-edge);}
.phf-ot-root .phf-qr-kpi.is-ot-people{background:var(--qr-ot-blue);border-color:var(--qr-ot-blue-edge);}
.phf-ot-root .phf-qr-kpi.is-ot-cost{background:var(--qr-ot-green);border-color:var(--qr-ot-green-edge);}
.phf-ot-root .phf-qr-kpi.is-ot-average{background:var(--qr-ot-teal);border-color:var(--qr-ot-teal-edge);}
.phf-ot-root .phf-qr-kpi.is-ot-kpi .phf-qr-kpi-label,
.phf-ot-root .phf-qr-kpi.is-ot-kpi .phf-qr-kpi-value,
.phf-ot-root .phf-qr-kpi.is-ot-kpi .phf-qr-kpi-value.is-na{color:#FFF;font-weight:800;}
.phf-ot-root .phf-qr-kpi.is-ot-kpi .phf-qr-kpi-label{font-size:12px;}
/* Supporting comparison text inside a filled card stays solid white (the
* ▲/▼ glyph carries direction); red/blue apply outside the cards. */
.phf-ot-root .phf-qr-kpi.is-ot-kpi .phf-qr-cmp{color:#FFF;font-weight:800;}
/* Bars: department bars, share bar, and both overview trend charts share
* one fresh orange. Unavailable months still draw no bar (renderer gap). */
.phf-ot-root .phf-ot-hbar i,
.phf-ot-root .phf-ot-share i{background:var(--qr-ot-bar);}
.phf-ot-root .phf-ot-trend-chart{color:#48505C;}
.phf-ot-root .phf-ot-trend-chart svg rect{fill:var(--qr-ot-bar);stroke:none;}
.phf-ot-root .phf-ot-trend-chart svg text{fill:var(--qr-ot-ink);font-weight:600;}
/* Donut = categories (never direction): fresh, distinct, no red; the
* unresolved organization is neutral gray. Legend swatch matches its slice. */
.phf-ot-root .phf-ot-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;}
.phf-ot-root .phf-ot-seg.is-cat-0{stroke:var(--qr-ot-cat-0);}.phf-ot-root .phf-ot-swatch.is-cat-0{background:var(--qr-ot-cat-0);}
.phf-ot-root .phf-ot-seg.is-cat-1{stroke:var(--qr-ot-cat-1);}.phf-ot-root .phf-ot-swatch.is-cat-1{background:var(--qr-ot-cat-1);}
.phf-ot-root .phf-ot-seg.is-cat-2{stroke:var(--qr-ot-cat-2);}.phf-ot-root .phf-ot-swatch.is-cat-2{background:var(--qr-ot-cat-2);}
.phf-ot-root .phf-ot-seg.is-cat-3{stroke:var(--qr-ot-cat-3);}.phf-ot-root .phf-ot-swatch.is-cat-3{background:var(--qr-ot-cat-3);}
.phf-ot-root .phf-ot-seg.is-cat-4{stroke:var(--qr-ot-cat-4);}.phf-ot-root .phf-ot-swatch.is-cat-4{background:var(--qr-ot-cat-4);}
.phf-ot-root .phf-ot-seg.is-cat-5{stroke:var(--qr-ot-cat-5);}.phf-ot-root .phf-ot-swatch.is-cat-5{background:var(--qr-ot-cat-5);}
.phf-ot-root .phf-ot-seg.is-cat-na{stroke:var(--qr-ot-cat-na);}.phf-ot-root .phf-ot-swatch.is-cat-na{background:var(--qr-ot-cat-na);}
.phf-ot-root .phf-ot-donut ul{list-style:none;padding-left:0;}
.phf-ot-root .phf-ot-donut li{color:var(--qr-ot-ink);}
/* Heatmap — one grammar for org/employee × hours/cost. Levels come from the
* matrix's OWN max (renderer); light cells dark text, top level white text.
* Real 0 = plain white cell; "—" (unavailable) = neutral, never heat. */
.phf-ot-root .phf-ot-heat{color:var(--qr-ot-ink);font-weight:500;}
.phf-ot-root .phf-ot-heat.is-zero{background:#FFF;}
.phf-ot-root .phf-ot-heat.is-na{background:transparent;color:#8A93A0;}
.phf-ot-root .phf-ot-heat.is-l1{background:var(--qr-ot-heat-1);}
.phf-ot-root .phf-ot-heat.is-l2{background:var(--qr-ot-heat-2);}
.phf-ot-root .phf-ot-heat.is-l3{background:var(--qr-ot-heat-3);font-weight:600;}
.phf-ot-root .phf-ot-heat.is-l4{background:var(--qr-ot-heat-4);font-weight:700;}
.phf-ot-root .phf-ot-heat.is-l5{background:var(--qr-ot-heat-5);color:#FFF;font-weight:800;}
/* TỔNG is a range total, not another month: separated, un-heated, bold. */
.phf-ot-root .phf-ot-heatwrap td.c-final,
.phf-ot-root .phf-ot-heatwrap thead th:last-child{border-left:2px solid #9AA3AD;background:#F7F7F5;}
.phf-ot-root .phf-ot-heatwrap td.c-final .phf-ot-heat{background:transparent;color:var(--qr-ot-ink);font-weight:800;}
.phf-ot-root .phf-ot-heatwrap td.c-final .phf-ot-heat.is-na{color:#8A93A0;font-weight:500;}
/* Comparison direction (org table): more overtime = red, less = blue; the
* arrow, amount and % share the span color; rows are never colored. */
.phf-ot-root .phf-qr-cmp.is-up,.phf-ot-root .phf-qr-cmp.is-new{color:var(--qr-ot-up);font-weight:800;}
.phf-ot-root .phf-qr-cmp.is-down{color:var(--qr-ot-down);font-weight:800;}
.phf-ot-root .phf-qr-cmp.is-flat,.phf-ot-root .phf-qr-cmp.is-na{color:var(--qr-ot-neutral);font-weight:700;}
/* ======================================================================
* REPORTING TYPOGRAPHY — shared by BHXH / Đi trễ / Tăng ca (.phf-qr-root).
* TYPOGRAPHY ONLY: font-family + font-weight; never color/fill/stroke/size/
* geometry. Root cause: legacy global rules in phf-training-hub.css force
* `p,li,span,small,td,label{font-weight:400!important}`, `th{650!important}`
* and h1–h6 to 650, so any Reporting role rendered as a span/label (KPI
* title/value, filter label, comparison, heat cell) lost its weight while
* SVG (not in that list) kept 600 — charts read bolder than the text
* around them. The canonical family is the app's own --phf-font-main.
* !important is required only to out-rank those legacy !important rules.
* ====================================================================== */
.phf-qr-root,
.phf-qr-root button,.phf-qr-root input,.phf-qr-root select,.phf-qr-root textarea,
.phf-qr-root svg,.phf-qr-root svg text{font-family:var(--phf-font-main,Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif)!important;}
/* Titles (major + subsection/chart/table) — bold. */
.phf-qr-root h2,.phf-qr-root h3,.phf-qr-root h4,.phf-qr-root h5,
.phf-qr-root .phf-qr-section-title,.phf-qr-root .phf-qr-chart-title,
.phf-qr-root .phf-qr-region-title,.phf-qr-root .phf-qr-hierarchy-title,
.phf-qr-root .phf-qr-hierarchy-group-title{font-weight:700!important;}
/* Filter labels + table headers — firm. Table cells stay regular. */
.phf-qr-root .phf-qtth-field>span,
.phf-qr-root .phf-qtth-table th{font-weight:700!important;}
/* KPI: title bold, value strongest. */
.phf-qr-root .phf-qr-kpi-label{font-weight:700!important;}
.phf-qr-root .phf-qr-kpi-value{font-weight:800!important;}
.phf-qr-root .phf-qr-kpi-value.is-na{font-weight:700!important;}
/* Comparison / movement / key figures — semibold-bold signal text. */
.phf-qr-root .phf-qr-cmp,.phf-qr-root .phf-qr-move,.phf-qr-root .phf-qr-move-delta,
.phf-qr-root .phf-qr-bhxh-increase,.phf-qr-root .phf-qr-bhxh-decrease,
.phf-qr-root .phf-qr-hbar-value,.phf-qr-root .phf-qr-quick-summary,
.phf-qr-root .phf-qr-block-no{font-weight:700!important;}
.phf-qr-root .phf-qr-share,.phf-qr-root .phf-qr-trend-summary{font-weight:600!important;}
/* Heat cells keep their approved adaptive weights (colors untouched). */
.phf-qr-root .phf-ot-heat.is-l3{font-weight:600!important;}
.phf-qr-root .phf-ot-heat.is-l4{font-weight:700!important;}
.phf-qr-root .phf-ot-heat.is-l5,
.phf-qr-root .phf-ot-heatwrap td.c-final .phf-ot-heat{font-weight:800!important;}
.phf-qr-root .phf-ot-heatwrap td.c-final .phf-ot-heat.is-na{font-weight:400!important;}
/* Charts: axis labels regular/medium, data labels semibold. */
.phf-qr-root svg text,.phf-qr-root svg .phf-qr-svg-axis{font-weight:500!important;}
.phf-qr-root svg .phf-qr-svg-value{font-weight:600!important;}
/* BHXH employee detail — right-side sheet. Reuses the QTTH drawer
* (phf-qtth.css .phf-qtth-drawer) without its backdrop: the fixed host lets
* clicks through so the ranking behind stays usable (click another row to
* switch the sheet); only the drawer itself takes pointer events. */
.phf-qr-emp-sheet-host{pointer-events:none;}
.phf-qr-emp-sheet-host .phf-qtth-drawer{pointer-events:auto;}
.phf-qr-emp-sheet-host .phf-qtth-drawer header button{font-size:13px;font-weight:700;line-height:1.4;color:var(--qt-orange-ink,#B4530A);white-space:nowrap;}
.phf-qr-bhxh-root tr[data-qr-emp-row]{cursor:pointer;}
.phf-qr-bhxh-root tr[data-qr-emp-row].is-selected td{background:#FFF4E8;}
/* ======================================================================
* PROD FEEDBACK FINAL CORRECTIVE PASS — appended only (the approved rules
* above stay an untouched prefix; these override by specificity/order).
* ====================================================================== */
/* Item 3 — decrease (blue) INSIDE the filled BHXH KPI cards only. #1565C0
* measured 1.06:1 on the green card and 2.34:1 on the orange one. Same blue
* meaning, the variant each card can carry: light blue on green (4.6:1),
* deep navy on orange (5.3:1). Card fills, the increase red and every
* table/matrix comparison color are unchanged. */
.phf-qr-bhxh-root .phf-qr-kpi.is-dn .phf-qr-kpi-compare .phf-qr-cmp.is-down{color:#DCEFFF;font-weight:800;}
.phf-qr-bhxh-root .phf-qr-kpi.is-nld .phf-qr-kpi-compare .phf-qr-cmp.is-down{color:#0B2E6B;font-weight:800;}
/* Item 2 — Đi trễ ranking row opens the right-side sheet (same as BHXH). */
.phf-qr-late-root tr[data-late-row]{cursor:pointer;}
.phf-qr-late-root tr[data-late-row].is-selected td{background:#FFF4E8;}
/* Items 4/5 — drill-down triggers (BHXH ▲/▼ money, ▲ Vào / ▼ Ra). The
* number keeps its own direction color; the button only adds a square
* hover/focus frame and a dotted underline so it reads as clickable. */
.phf-qr-root .phf-qr-drill{background:none;border:1px solid transparent;border-radius:0;padding:1px 3px;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
.phf-qr-root .phf-qr-drill:hover,.phf-qr-root .phf-qr-drill:focus-visible{border-color:#9AA3AD;background:#F4F6F8;outline:none;}
.phf-qr-root .phf-qr-drill.is-selected{border-color:#E08A2C;background:#FFF4E8;}
/* Item 6 — visible filtered population; drawer details (white sheet, so
* the standard red/blue direction colors apply there). */
.phf-qr-root .phf-qr-filter-count{margin:4px 0 8px;font-size:12px;color:#48505C;}
.phf-qr-emp-sheet .phf-qr-drill-summary{margin:0;font-size:13px;color:#202833;}
.phf-qr-emp-sheet .phf-qr-org-move{font-size:12px;font-weight:700;color:#1F4E79;}
/* Tăng ca Theo kỳ: one square, full-width department panel. The bars retain
* the existing reporting orange; labels wrap instead of being truncated. */
.phf-ot-root .phf-ot-analysis{grid-template-columns:minmax(0,1fr);}
.phf-ot-root .phf-ot-hbar{grid-template-columns:minmax(220px,1fr) minmax(120px,3fr) auto;gap:10px;}
.phf-ot-root .phf-ot-hbar-label{overflow-wrap:anywhere;}
@media(max-width:900px){.phf-ot-root .phf-ot-hbar{grid-template-columns:minmax(160px,1fr) minmax(80px,2fr) auto;}}
.phf-qr-emp-sheet .phf-qr-same-day{display:inline-block;margin-left:4px;padding:0 4px;border:1px solid #9AA3AD;font-size:11px;color:#303946;}
.phf-qr-emp-sheet .phf-qr-move{font-weight:800;white-space:nowrap;}
.phf-qr-emp-sheet .phf-qr-move.is-up{color:#C62828;}
.phf-qr-emp-sheet .phf-qr-move.is-down{color:#1565C0;}
.phf-qr-emp-sheet .phf-qr-move.is-flat{color:#48505C;}
.phf-qr-emp-sheet .phf-qtth-table td.c-num{font-variant-numeric:tabular-nums;white-space:nowrap;}
/* ======================================================================
* HQCV MANAGEMENT REPORTING — FINAL LOCAL POLISH (appended only; scoped to
* .phf-qr-hqcv-root). Visual grammar taken from the Tăng ca screen
* (.phf-ot-root): same ink, filled square KPI cards with white text, firm
* field labels / table heads, square controls, PHF orange for the current
* period and selection. Performance status stays text-only (no
* traffic-light cells, no heat, no arrows).
* ====================================================================== */
.phf-qr-hqcv-root{
--qr-hq-ink:#202833;
--qr-hq-orange:#F58A1F;--qr-hq-orange-edge:#DE7410;
--qr-hq-blue:#2F6FDE;--qr-hq-blue-edge:#1F5BC4;
--qr-hq-green:#16A34A;--qr-hq-green-edge:#12893E;
--qr-hq-slate:#4B5563;--qr-hq-slate-edge:#374151;
--qr-hq-head:#F4F6F8;--qr-hq-row-hover:#FAFBFC;--qr-hq-select:#FFF4E8;
}
.phf-qr-hqcv-root .phf-qtth-head h2,
.phf-qr-hqcv-root .phf-qr-section-title{color:var(--qr-hq-ink);font-weight:800;}
.phf-qr-hqcv-root .phf-qtth-field>span{display:block;margin-bottom:5px;color:#303946;font-size:12px;font-weight:800;}
.phf-qr-hqcv-root .phf-qtth-field input,
.phf-qr-hqcv-root .phf-qtth-field select{color:var(--qr-hq-ink);font-weight:600;border-color:#9AA3AD;}
/* Global filter bar: one square panel directly under the period toolbar. */
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar{border:1px solid var(--qt-line-strong);border-left:3px solid var(--qr-hq-orange);background:#FBFBFA;padding:12px 14px 4px;margin:0 0 4px;}
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qr-filters{margin-bottom:8px;}
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qtth-field{flex:1 1 170px;min-width:150px;}
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qtth-field select,
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qtth-field input{width:100%;box-sizing:border-box;}
.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qr-hqcv-search{flex:1.4 1 220px;}
.phf-qr-hqcv-root .phf-qr-hqcv-reset{flex:0 0 auto;border-radius:0;min-height:38px;}
.phf-qr-hqcv-root .phf-qr-hqcv-reset:disabled{opacity:.45;cursor:default;}
/* KPI: four filled square cards (Tăng ca grammar). Đạt = PHF green,
* Dưới = neutral slate — a restrained distinction, never red. */
.phf-qr-hqcv-root .phf-qr-hqcv-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0 6px;}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-kpi{border:1px solid transparent;box-shadow:none;padding:16px;}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-people{background:var(--qr-hq-blue);border-color:var(--qr-hq-blue-edge);}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-average{background:var(--qr-hq-orange);border-color:var(--qr-hq-orange-edge);}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-achieved{background:var(--qr-hq-green);border-color:var(--qr-hq-green-edge);}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-below{background:var(--qr-hq-slate);border-color:var(--qr-hq-slate-edge);}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-kpi .phf-qr-kpi-label{color:#FFF;font-size:12px;letter-spacing:.4px;}
.phf-qr-hqcv-root .phf-qr-kpi.is-hqcv-kpi .phf-qr-kpi-value{color:#FFF;font-size:26px;line-height:1.15;}
/* Section heads: title + a muted scope note on the same line. */
.phf-qr-hqcv-root .phf-qr-hqcv-sechead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:22px;padding-top:12px;border-top:1px solid var(--qt-line-strong);}
.phf-qr-hqcv-root .phf-qr-hqcv-sechead .phf-qr-section-title{margin:0 0 8px;padding:0;border:0;font-size:14px;text-transform:uppercase;letter-spacing:.3px;}
.phf-qr-hqcv-root .phf-qr-hqcv-note{margin:0 0 8px;font-size:12px;color:#5E6975;}
/* Tables: firm head band, row separation, tabular numbers, hover. */
.phf-qr-hqcv-root .phf-qr-hqcv-table thead th{background:var(--qr-hq-head);color:#27313D;font-weight:800;border-bottom:2px solid #9AA3AD;white-space:nowrap;}
.phf-qr-hqcv-root .phf-qr-hqcv-table tbody td{border-bottom:1px solid var(--qt-line);}
.phf-qr-hqcv-root .phf-qr-hqcv-table td.c-num{font-variant-numeric:tabular-nums;}
.phf-qr-hqcv-root .phf-qr-hqcv-table tbody tr:hover td{background:var(--qr-hq-row-hover);}
/* Current period: history row + matrix column — orange edge, bold, no fill color. */
.phf-qr-hqcv-root .phf-qr-hqcv-history tr.is-current td{font-weight:700;}
.phf-qr-hqcv-root .phf-qr-hqcv-history tr.is-current td:first-child{box-shadow:inset 3px 0 0 var(--qr-hq-orange);}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix th.is-current{border-bottom-color:var(--qr-hq-orange);color:var(--qt-orange-ink,#B23C05);}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix td.is-current{font-weight:700;}
/* Status: text only, restrained ink (no cell fill). */
.phf-qr-hqcv-root .phf-qr-hqcv-status{font-weight:700;color:#5E6975;}
.phf-qr-hqcv-root .phf-qr-hqcv-status.is-achieved{color:#12893E;}
.phf-qr-hqcv-root .phf-qr-hqcv-status.is-below{color:#374151;}
/* Employee rows open the right-side sheet (same as Đi trễ / BHXH). */
.phf-qr-hqcv-root tr[data-hqcv-row]{cursor:pointer;}
.phf-qr-hqcv-root tr[data-hqcv-row].is-selected td{background:var(--qr-hq-select);}
.phf-qr-hqcv-root .phf-qr-hqcv-tablebar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.phf-qr-hqcv-root .phf-qr-hqcv-tablebar .phf-qr-filter-count{margin:0 0 4px;}
/* Matrix: controlled horizontal overflow; name column stays pinned. */
.phf-qr-hqcv-root .phf-qr-hqcv-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix{min-width:720px;}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix th:first-child,
.phf-qr-hqcv-root .phf-qr-hqcv-matrix td:first-child{position:sticky;left:0;z-index:1;background:#FFF;box-shadow:inset -1px 0 0 var(--qt-line-strong);}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix thead th:first-child{background:var(--qr-hq-head);z-index:2;}
.phf-qr-hqcv-root .phf-qr-hqcv-matrix tbody tr:hover td:first-child{background:var(--qr-hq-row-hover);}
.phf-qr-hqcv-root .phf-qr-hqcv-emp{min-width:760px;}
.phf-qr-hqcv-root .phf-qtth-tablewrap{overflow-x:auto;max-width:100%;}
@media(max-width:1100px){.phf-qr-hqcv-root .phf-qr-hqcv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.phf-qr-hqcv-root .phf-qr-hqcv-kpis{grid-template-columns:1fr;}.phf-qr-hqcv-root .phf-qr-hqcv-filterbar .phf-qtth-field{flex-basis:100%;}}
/* Payroll period grid: wide by design for a 13-column operational review. */
.phf-payroll-period{border-radius:0;box-shadow:none;}
.phf-payroll-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px;}.phf-payroll-head h2{margin:2px 0 6px;font-size:20px;}.phf-qr-eyebrow{margin:0;color:var(--qt-orange-ink,#B4530A);font-size:11px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;}.phf-qr-field{display:grid;gap:5px;font-size:12px;font-weight:700;white-space:nowrap;}.phf-qr-field input{font:inherit;padding:7px 8px;border:1px solid var(--qt-line-strong);border-radius:2px;background:#fff;}.phf-payroll-meta{margin:0 0 10px;font-size:12px;color:var(--qt-muted);}.phf-payroll-tablewrap{overflow-x:auto;}.phf-payroll-table{min-width:1740px;font-size:12px;}.phf-payroll-table th{white-space:normal;min-width:100px;}.phf-payroll-table td{white-space:nowrap;font-variant-numeric:tabular-nums;}.phf-payroll-table th:first-child,.phf-payroll-table td:first-child{min-width:170px;}.phf-payroll-table th:nth-child(3),.phf-payroll-table td:nth-child(3){min-width:150px;}.phf-payroll-net{font-weight:800;color:#1F2430;}.phf-payroll-missing{font-size:11px;color:#9A6700;font-weight:700;}.phf-payroll-period .phf-qtth-error{margin:8px 0;color:#b42318;font-size:13px;}@media(max-width:700px){.phf-payroll-head{display:block;}.phf-qr-field{margin-top:12px;width:max-content;}}
/* Payroll period table: layered sticky header/summary and frozen identity block. */
.phf-payroll-tablewrap{max-height:calc(100vh - 230px);overflow:auto;isolation:isolate;}
.phf-payroll-table{border-collapse:separate;border-spacing:0;table-layout:auto;}
.phf-payroll-table .c-payroll-col-name{width:190px;}.phf-payroll-table .c-payroll-col-code{width:102px;}.phf-payroll-table .c-payroll-col-dept{width:160px;}.phf-payroll-table .c-payroll-col-grade{width:105px;}.phf-payroll-table .c-payroll-col-agreed{width:220px;}
.phf-payroll-table th,.phf-payroll-table td{border-right:1px solid #E3E6E9;border-bottom:1px solid #E0E3E7;background:#FFF;box-sizing:border-box;}
.phf-payroll-table thead th{position:sticky;z-index:10;background:#F3F4F6;text-align:center!important;vertical-align:middle;line-height:1.3;border-top:0;border-bottom:1px solid #C9CED4;}
.phf-payroll-table thead tr:first-child th{top:0;}.phf-payroll-table thead tr:nth-child(2) th{top:var(--payroll-head-row-1,42px);}
.phf-payroll-table thead th[rowspan="2"]{top:0;z-index:12;}
.phf-payroll-table .c-payroll-money{text-align:right;font-variant-numeric:tabular-nums;}
.phf-payroll-table .c-payroll-total{color:#B42318;font-weight:700;}
.phf-payroll-table .c-payroll-net{color:#9F1C14;font-weight:800;}
.phf-payroll-table .c-payroll-sticky{position:sticky;z-index:4;background:#FFF;box-shadow:inset -1px 0 0 #C9CED4;}
.phf-payroll-table .c-payroll-sticky-1{left:0;min-width:190px;}.phf-payroll-table .c-payroll-sticky-2{left:var(--payroll-name-width,190px);min-width:102px;}
.phf-payroll-table thead .c-payroll-sticky{z-index:14;background:#F3F4F6;}
.phf-payroll-table .phf-payroll-period-total td{position:sticky;top:var(--payroll-head-height,84px);z-index:6;background:#F8F9FA;font-weight:700;border-bottom:2px solid #AEB6BF;}
.phf-payroll-table .phf-payroll-period-total .c-payroll-sticky{z-index:8;background:#F8F9FA;}
.phf-payroll-table .phf-payroll-period-total .c-payroll-total{color:#B42318;font-weight:700;}
.phf-payroll-table tbody tr:hover td{background:#FFF7F0;}.phf-payroll-table tbody tr:hover .c-payroll-sticky{background:#FFF7F0;}.phf-payroll-table tbody tr.phf-payroll-period-total:hover td,.phf-payroll-table tbody tr.phf-payroll-period-total:hover .c-payroll-sticky{background:#F8F9FA;}
/* Payroll period grid: final visual hierarchy. These selectors use renderer
* metadata (component / total / group-start), never physical column indexes. */
/* Keep one continuous 1px grid: the preceding cell's standard right edge is
* the group boundary. Adding a left edge here created double/thick joins. */
.phf-payroll-period .phf-payroll-table .c-payroll-group-start{border-left:0;}
.phf-payroll-period .phf-payroll-table .c-payroll-total{color:#B42318;font-weight:700;}
.phf-payroll-period .phf-payroll-table .c-payroll-net{color:#991B1B;font-weight:800;background:#FFF8F6;}
.phf-payroll-period .phf-payroll-table thead .c-payroll-net{background:#FFF5F2;}
/* Frozen identity remains readable through the same 1px grid, without a
* raised/shadowed divider. */
.phf-payroll-period .phf-payroll-table .c-payroll-sticky{box-shadow:none;}
.phf-payroll-period .phf-payroll-table .c-payroll-sticky-2{border-right:1px solid #E3E6E9;}
.phf-payroll-period .phf-payroll-table .phf-payroll-period-total td{background:#F1F8F3;font-weight:700;border-bottom:1px solid #E0E3E7;}
.phf-payroll-period .phf-payroll-table .phf-payroll-period-total .c-payroll-sticky{background:#F1F8F3;}
.phf-payroll-period .phf-payroll-table .phf-payroll-period-total .c-payroll-money{font-weight:700;}
.phf-payroll-period .phf-payroll-table .phf-payroll-period-total .c-payroll-net{background:#FBEFEB;font-weight:800;}
.phf-payroll-period .phf-payroll-table tbody tr:not(.phf-payroll-period-total):hover td{background:#F7FAF8;}
.phf-payroll-period .phf-payroll-table tbody tr:not(.phf-payroll-period-total):hover .c-payroll-sticky{background:#F7FAF8;}
.phf-payroll-period .phf-payroll-table tbody tr:not(.phf-payroll-period-total):hover .c-payroll-net{background:#FFF1ED;}
.phf-payroll-subnav{margin:0 0 12px;border-radius:0;}.phf-payroll-subnav .phf-qr-tab{font-family:Arial,sans-serif;border-radius:0!important;appearance:none;background:none!important;box-shadow:none!important;}.phf-payroll-subnav .phf-qr-tab:disabled{opacity:.5;cursor:default;}.phf-payslip-find{display:flex;gap:8px;margin:12px 0;}.phf-payslip-find input{min-width:280px;padding:7px 9px;border:1px solid var(--qt-line-strong);font:inherit;}.phf-payslip-table{min-width:680px;max-width:900px;}.phf-payslip-table td{padding:8px 10px;}.phf-payslip-delta{font-size:12px;color:var(--qt-muted);}.phf-payslip-table tr.is-selected td{font-weight:800;color:#991B1B;}
.phf-payslip-find{position:relative;display:block;max-width:460px;}.phf-payslip-find input{box-sizing:border-box;width:100%;}.phf-payslip-options{position:absolute;z-index:20;left:0;right:0;top:100%;border:1px solid var(--qt-line-strong);background:#fff;max-height:260px;overflow:auto;}.phf-payslip-options button{display:block;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--qt-line);background:#fff;text-align:left;font:inherit;cursor:pointer;}.phf-payslip-options button:hover{background:#F7FAF8;}.phf-payslip-options b,.phf-payslip-options span{display:block;}.phf-payslip-options span{margin-top:2px;font-size:12px;color:var(--qt-muted);}
/* Full-width single-column payslip. */
.phf-payslip{font-family:Arial,sans-serif}.phf-slip-identity{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;margin-bottom:8px;border:1px solid #D9E3DD}.phf-slip-identity h2{margin:2px 0 7px;color:#102B55;font-size:20px}.phf-slip-identity p{margin:0;color:#536273;font-size:13px}.phf-slip-identity aside{min-width:390px;padding:10px 16px;background:#E9F7EF;border-left:4px solid #08783F;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;color:#075E33}.phf-slip-identity aside span{font-size:11px;font-weight:800}.phf-slip-identity aside strong{grid-row:2;font-size:25px}.phf-slip-identity aside b{text-align:right}.phf-slip-identity aside em{grid-column:2;font-size:11px;font-style:normal;text-align:right;color:#536273}.phf-slip-section{margin:9px 0;border:1px solid var(--slip-edge);border-radius:5px;overflow:hidden}.phf-slip-section header{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--slip-band)}.phf-slip-section h3{margin:0;color:var(--slip-ink);font-size:14px;font-weight:800}.phf-slip-section p{margin:1px 0 0;color:#536273;font-size:12px}.phf-slip-no{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;background:var(--slip-ink);color:#fff;font-weight:800}.phf-slip-section table{width:100%;table-layout:fixed;border-collapse:collapse}.phf-slip-section th,.phf-slip-section td{padding:5px 12px;border-right:1px solid #DCE2E8;border-bottom:1px solid #E1E6EB;font-size:13px}.phf-slip-section th{background:#F1F3F5;color:#536273;font-size:12px;font-weight:800;text-align:center}.phf-slip-section th:first-child,.phf-slip-section td:first-child{width:35%;text-align:left}.phf-slip-section td.c-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}.phf-slip-previous{color:#40526B;font-weight:500!important}.phf-slip-total td{background:var(--slip-total);color:var(--slip-ink);font-weight:800!important}.phf-slip-empty{text-align:center!important;color:#6B7280}.phf-slip-cmp{font-weight:800;white-space:nowrap}.phf-slip-cmp.is-up{color:#C62828}.phf-slip-cmp.is-down{color:#1565C0}.phf-slip-cmp.is-flat,.phf-slip-cmp.is-na{color:#667085}.phf-slip-agreement{--slip-band:#FFF2E5;--slip-edge:#F3C89B;--slip-total:#FFF0E3;--slip-ink:#B54708}.phf-slip-salary{--slip-band:#EAF3FF;--slip-edge:#A9D0FA;--slip-total:#E1F0FF;--slip-ink:#075FC5}.phf-slip-allowance{--slip-band:#EAF8EF;--slip-edge:#B6E1C3;--slip-total:#E0F5E7;--slip-ink:#08783F}.phf-slip-bonus{--slip-band:#FFECEF;--slip-edge:#F3BCC5;--slip-total:#FFE3E8;--slip-ink:#C6283D}.phf-slip-internal{--slip-band:#F3ECFF;--slip-edge:#D8C1F6;--slip-total:#EEE4FE;--slip-ink:#6D28D9}.phf-slip-statutory{--slip-band:#EAF5FF;--slip-edge:#ACD6F8;--slip-total:#E2F1FF;--slip-ink:#0969C7}.phf-slip-tax{--slip-band:#FFF6DB;--slip-edge:#F4D992;--slip-total:#FFF0C7;--slip-ink:#A15C00}.phf-slip-result{--slip-band:#E4F6EC;--slip-edge:#A7D9B9;--slip-total:#D9F0E2;--slip-ink:#08783F}.phf-slip-net td{background:#08783F;color:#fff;font-size:15px;font-weight:800!important;border-color:#08783F}.phf-slip-net .phf-slip-cmp{color:#fff!important}@media(max-width:760px){.phf-slip-identity{display:block}.phf-slip-identity aside{min-width:0;margin-top:10px}.phf-slip-section{overflow-x:auto}.phf-slip-section table{min-width:620px}}
/* Delta #2: selected-period is the report primary, comparison stays secondary. */
.phf-slip-section th.phf-slip-current,.phf-slip-section td.phf-slip-current{background:#EDF8F1!important;color:#075E33;font-weight:800!important}.phf-slip-section thead th small{display:block;margin-top:2px;font-size:10px;font-weight:700;color:#62706A}.phf-slip-section td:nth-child(2){background:#F8FCF9;font-weight:800}.phf-slip-section td:nth-child(3){background:#FCFCFD;color:#526176}.phf-slip-period-indicator{display:block;width:max-content;margin-top:8px;padding:3px 6px;border-left:3px solid #08783F;background:#EDF8F1;color:#075E33;font-size:10px;font-weight:800;letter-spacing:.25px}.phf-slip-period-indicator b{margin-left:6px;font-size:11px}
.phf-slip-agreement td.phf-slip-delta-up{color:#C62828;font-weight:800}.phf-slip-agreement td.phf-slip-delta-down{color:#1565C0;font-weight:800}
/* Final visual simplification: one restrained PHF-green payroll system. */
.phf-slip-section{--slip-band:#F4F6F7!important;--slip-edge:#DCE3E6!important;--slip-total:#EEF3F1!important;--slip-ink:#075E33!important;margin:7px 0;border-radius:4px}.phf-slip-section header{background:#F4F6F7!important}.phf-slip-no{background:#075E33!important;border-radius:2px}.phf-slip-section th,.phf-slip-section td{border-color:#E0E5E8;padding:5px 12px}.phf-slip-section th:first-child,.phf-slip-section td:first-child{width:44%}.phf-slip-section th:nth-child(2),.phf-slip-section td:nth-child(2){width:18%}.phf-slip-section th:nth-child(3),.phf-slip-section td:nth-child(3){width:18%}.phf-slip-section th:nth-child(4),.phf-slip-section td:nth-child(4){width:20%}.phf-slip-section th.phf-slip-current,.phf-slip-section td.phf-slip-current,.phf-slip-section td:nth-child(2){background:#EAF8EF!important;color:#075E33!important;font-weight:800!important}.phf-slip-section td:nth-child(3){background:#FFF!important;color:#536273}.phf-slip-total td{background:#EEF3F1!important;color:#075E33!important;font-weight:800!important}.phf-slip-result .phf-slip-net td{background:#08783F!important;color:#FFF!important}.phf-slip-identity aside{background:#EDF8F1;border-left-color:#08783F}.phf-slip-section h3{color:#075E33!important}.phf-slip-agreement,.phf-slip-salary,.phf-slip-allowance,.phf-slip-bonus,.phf-slip-internal,.phf-slip-statutory,.phf-slip-tax,.phf-slip-result{background:#FFF}
/* Final micro pass: ordinary rows are quiet; total labels use heading weight. */
.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:first-child{background:#FFF!important;color:inherit!important;font-weight:400!important}.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(2){font-weight:500!important}.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(3){font-weight:400!important}.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(4){font-weight:400!important}.phf-slip-total td:first-child,.phf-slip-net td:first-child{font-family:Arial,sans-serif!important;font-weight:700!important;letter-spacing:0!important}.phf-slip-total td:not(:first-child){font-weight:800!important}.phf-slip-net td:not(:first-child){font-weight:800!important}
/* Functional delta: detail rows are entirely white; only totals retain emphasis. */
.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td,.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(2),.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(3),.phf-slip-section tbody tr:not(.phf-slip-total):not(.phf-slip-net) td:nth-child(4){background:#FFF!important;color:inherit!important;font-weight:400!important}.phf-work-result{--slip-band:#F4F6F7!important;--slip-edge:#DCE3E6!important;--slip-total:#EEF3F1!important;--slip-ink:#075E33!important}
.phf-payroll-note-btn{margin-left:5px;padding:0;border:0;background:transparent;font-size:12px;line-height:1;opacity:.48;cursor:pointer}.c-payroll-component:hover .phf-payroll-note-btn,.phf-payslip td:first-child:hover .phf-payroll-note-btn,.phf-payroll-note-btn.has-note{opacity:1}.phf-payroll-note-btn.has-note{color:#9a3412}
.phf-payroll-note-btn{opacity:.72}
.phf-payroll-note-modal{position:fixed;z-index:10050;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.36)}.phf-payroll-note-dialog{width:min(520px,100%);padding:20px;border:1px solid #cbd5d1;border-radius:3px;background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.22)}.phf-payroll-note-dialog h3{margin:0 0 5px;color:#075e33;font-size:18px}.phf-payroll-note-dialog p{margin:0 0 14px;color:#526176;font-size:13px;font-weight:700}.phf-payroll-note-dialog p.is-error{color:#b42318}.phf-payroll-note-dialog textarea{box-sizing:border-box;display:block;width:100%;min-height:130px;resize:vertical;padding:10px;border:1px solid #b9c5bd;border-radius:2px;background:#fff;color:#172b20;font:14px/1.45 Arial,sans-serif}.phf-payroll-note-dialog textarea:focus{outline:2px solid #8fc5a5;outline-offset:1px;border-color:#08783f}.phf-payroll-note-dialog>div{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.phf-payroll-note-dialog button{padding:8px 12px;border:1px solid #aebbb2;border-radius:2px;background:#fff;color:#274534;font:700 13px/1 Arial,sans-serif;cursor:pointer}.phf-payroll-note-dialog button.is-save{border-color:#08783f;background:#08783f;color:#fff}.phf-payroll-note-dialog button.is-clear{margin-right:auto;border-color:#b45309;color:#92400e}.phf-payroll-note-dialog button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.phf-payroll-note-modal{padding:14px}.phf-payroll-note-dialog{padding:16px}}
.phf-payroll-note-mode{margin-left:auto;padding:7px 10px;border:1px solid var(--qt-line-strong,#cbd5d1);border-radius:3px;background:#fff;color:#24533a;font:700 12px/1 inherit;cursor:pointer}.phf-payroll-note-mode.is-active{background:#24533a;color:#fff;border-color:#24533a}.phf-payroll-note-btn{margin-left:6px;vertical-align:middle;font:800 10px/1 inherit;letter-spacing:.2px;opacity:1}.phf-payroll-note-btn.has-note{padding:3px 5px;border:1px solid #b45309;border-radius:2px;background:#fff4df;color:#92400e}.phf-payroll-note-btn.add-note{padding:1px 4px;border:1px dashed #9ca3af;border-radius:2px;background:#fff;color:#4b5563;font-size:12px}.phf-payroll-note-btn.add-note:hover{border-color:#24533a;color:#24533a}
.phf-payroll-note-dialog>.phf-payroll-note-content{display:block;margin:0;white-space:pre-wrap;color:#172b20;font:14px/1.5 Arial,sans-serif;}
/* Payroll cost reporting 2A-2C: compact, square, horizontally scrollable. */
.phf-payroll-cost-report{margin-top:14px;font-family:Arial,sans-serif}.phf-payroll-cost-head{padding-bottom:10px;border-bottom:2px solid var(--qt-line-strong,#9aa3ad)}.phf-payroll-cost-head h2{margin:2px 0 5px;color:#202833;font-size:20px}.phf-payroll-cost-section{margin-top:18px}.phf-payroll-cost-section h3{margin:0 0 8px;color:#27313d;font-size:14px;font-weight:800;text-transform:uppercase}.phf-payroll-cost-table{min-width:1450px}.phf-payroll-cost-table thead th,.phf-payroll-composition thead th{background:#f1f3f5;color:#27313d;font-size:12px;font-weight:800;white-space:nowrap}.phf-payroll-cost-table td.c-num,.phf-payroll-composition td.c-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.phf-payroll-cost-table tbody tr:last-child td{background:#eef3f1;color:#075e33;font-weight:800}.phf-payroll-composition{width:min(720px,100%)}.phf-payroll-composition td:first-child{font-weight:600}.phf-payroll-comparison-report{margin-top:14px;font-family:Arial,sans-serif}.phf-payroll-comparison table{min-width:760px}.phf-payroll-comparison .is-up{color:#b42318;font-weight:700}.phf-payroll-comparison .is-down{color:#175cd3;font-weight:700}.phf-payroll-comparison small{display:block;color:#667085;font-weight:400}.phf-payroll-comparison .phf-payroll-period-total td{background:#eef3f1;font-weight:800}