/* pgl-finance-kit.css — PR-UI-1 (23/10/2026) · finance component kit for Tổng quan, direction A (copied from the approved mock's .kpi .queue .chip .card .bar .tbl .btn, classes mapped onto the LEGACY class names; nothing here renames or removes a legacy class). Ships media="not all"; the head bootstrap in index.html flips it to "all" only when localStorage.pgl_ui_v2 === '1'. EVERY rule starts with html[data-ui="v2"] (so the file is inert even if the media gate were ever lost — test G1 forces media="all" flag-off to prove it). Scope: #section-dashboard + the queue card + the search hint + the chat bubble (PR-UI-1); §12–§13 (PR-UI-2) add the four ledger tabs, the emoji wrapper and the UI-1 leftovers. Editors / modals / drawers / toasts are PR-UI-3. Text colours: only --f-ink / --f-ink2 / --f-ink3 and the *-ink tokens below (>= 4.5:1 on the surface they sit on — test G6 measures them); --f-ink4 (#8A8A90, 3.4:1) is never used for text here. Inline-hex attribute matches this file relies on (a legacy template that changes one of these hexes silently falls back to its legacy look, nothing breaks): chips #fecaca #fde68a #e0e7ff (#arCollectCardChips) · cash-card type chip #fef3c7 #f3f4f6 (+ default #dbeafe) · `letter-spacing:.7px` captions · `flex:1` info div of the two top cards · `dashed` kpi note border. */ html[data-ui="v2"]{ --k-neg-ink:#B4262B; /* 5.45:1 on --neg-bg (#D6353A is 4.0:1 there) */ --k-est-ink:#8A5504; /* 5.61:1 on --est-bg (#A66805 is 4.12:1 there) */ --k-pos-ink:#0E7F3F; /* 4.52:1 on --pos-bg */ --k-ico-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --k-ico-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); --k-ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); --k-ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } /* ───────── shared: Lucide icons placed beside legacy emoji (the emoji-only spans are hidden below) ───────── */ html[data-ui="v2"] .pv2-ico{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;stroke-width:1.75;margin-right:6px} html[data-ui="v2"] .pv2-ico--lg{width:22px;height:22px;margin-right:0} html[data-ui="v2"] .pv2-only{display:block} html[data-ui="v2"] #pglV2Queue[hidden]{display:none} /* legacy inline `color:var(--muted)` (placeholders «—», load-failed notes) is #8A8A90 = 3.4:1; inside the dashboard the variable is remapped to --f-ink3 (5.7:1) — safe-reskin rule: remap the variable, edit no markup */ html[data-ui="v2"] #section-dashboard{--muted:var(--f-ink3);--warn:var(--k-est-ink)} /* --warn (#A66805) is 4.12:1 on --warn-bg (#FFF2DA): the .badge-status-warn / cash-card notes use it as TEXT only (grep: no background/border use) ⇒ same remap, to the 5.61:1 ink (review C4) */ /* ───────── 1 · sub-navigation → segmented pills (mock .seg) ───────── */ html[data-ui="v2"] #section-dashboard .dash-subnav{display:flex;flex-wrap:nowrap;gap:2px;width:max-content;max-width:100%;overflow-x:auto;position:sticky;top:calc(var(--f-tb-h) + 8px);z-index:5; background:var(--f-card);border:1px solid var(--f-line);border-radius:999px;padding:3px;margin:0 0 var(--f-gap);box-shadow:var(--f-sh)} html[data-ui="v2"] #section-dashboard .dash-pill{flex:none;gap:7px;border:0;background:transparent;color:var(--f-ink2);font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1;padding:9px 14px;border-radius:999px;box-shadow:none;transition:background .12s,color .12s} html[data-ui="v2"] #section-dashboard .dash-pill:hover{background:var(--f-nav-100);border-color:transparent} html[data-ui="v2"] #section-dashboard .dash-pill.active{background:var(--f-navy);color:#fff;font-family:var(--font-display);font-weight:700;box-shadow:none} html[data-ui="v2"] #section-dashboard .dash-pill:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] #section-dashboard .dash-pill .pv2-ico{margin-right:0} html[data-ui="v2"] #section-dashboard .dash-pill-ico{display:none} html[data-ui="v2"] #section-dashboard .dash-pill-badge{background:var(--neg-bg);color:var(--k-neg-ink);font-family:var(--font-mono);font-weight:500;font-size:11px;min-width:20px;height:20px;line-height:20px;padding:0 6px} html[data-ui="v2"] #section-dashboard .dash-pill.active .dash-pill-badge{background:rgba(255,255,255,.18);color:#fff} /* ───────── 2 · the two big top cards: gradient → white card, coloured left rule ───────── */ html[data-ui="v2"] #arCollectCard,html[data-ui="v2"] #cfoReportCard{background:var(--f-card)!important;color:var(--f-ink2)!important;border:1px solid var(--f-line)!important;border-radius:var(--f-radius)!important;box-shadow:var(--f-sh)!important;padding:16px 18px!important;margin-bottom:var(--f-gap)!important} html[data-ui="v2"] #arCollectCard{border-left:4px solid var(--neg)!important} html[data-ui="v2"] #cfoReportCard{border-left:4px solid var(--f-navy)!important} /* the legacy 26px emoji span → hidden; its Lucide twin (.pv2-ico--lg) sits beside it */ html[data-ui="v2"] #arCollectCard>div>span:first-child,html[data-ui="v2"] #cfoReportCard>div>span:first-child{display:none!important} html[data-ui="v2"] #arCollectCard .pv2-ico--lg,html[data-ui="v2"] #cfoReportCard .pv2-ico--lg{width:36px;height:36px;padding:7px;border-radius:10px;flex:none} html[data-ui="v2"] #arCollectCard .pv2-ico--lg{background:var(--neg-bg);color:var(--k-neg-ink)} html[data-ui="v2"] #cfoReportCard .pv2-ico--lg{background:var(--ctl-bg);color:var(--ctl)} /* label line (inline colour #FECACA / #F5A623) */ html[data-ui="v2"] #arCollectCard>div>div[style*="flex:1"]>div:first-child,html[data-ui="v2"] #cfoReportCard>div>div[style*="flex:1"]>div:first-child{color:var(--f-ink3)!important;font-family:var(--font-display);font-weight:800;font-size:10.5px!important;letter-spacing:.14em!important} /* headline figure */ html[data-ui="v2"] #arCollectCardTitle,html[data-ui="v2"] #cfoReportCardTitle{color:var(--f-ink);font-family:var(--font-display);font-weight:800!important;font-size:var(--f-kpi)!important;letter-spacing:-.02em;line-height:1.2;margin-top:6px!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums} html[data-ui="v2"] #arCollectCardSub,html[data-ui="v2"] #cfoReportCardSub{color:var(--f-ink3);opacity:1!important;font-size:12.5px!important} /* chips built by JS (inline white-on-translucent) → status chips: icon + word, colour from the legacy inline background */ html[data-ui="v2"] #arCollectCardChips>span,html[data-ui="v2"] #cfoReportCardChips>span{display:inline-flex;align-items:center;gap:6px;background:var(--ctl-bg)!important;color:var(--ctl)!important;border:1px solid var(--ctl-bd)!important;font-family:var(--font-display);font-weight:800!important;font-size:10.5px!important;letter-spacing:.04em;padding:3px 9px!important;border-radius:999px!important} html[data-ui="v2"] #arCollectCardChips>span::before,html[data-ui="v2"] #cfoReportCardChips>span::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--k-ico-phone) center/contain no-repeat;mask:var(--k-ico-phone) center/contain no-repeat} html[data-ui="v2"] #arCollectCardChips>span[style*="#fecaca"]{background:var(--neg-bg)!important;color:var(--k-neg-ink)!important;border-color:var(--neg-bd)!important} html[data-ui="v2"] #arCollectCardChips>span[style*="#fecaca"]::before,html[data-ui="v2"] #arCollectCardChips>span[style*="#fde68a"]::before{-webkit-mask-image:var(--k-ico-alert);mask-image:var(--k-ico-alert)} html[data-ui="v2"] #arCollectCardChips>span[style*="#fde68a"]{background:var(--est-bg)!important;color:var(--k-est-ink)!important;border-color:var(--est-bd)!important} html[data-ui="v2"] #arCollectCardChips>span[style*="#e0e7ff"]{background:var(--cash-bg)!important;color:var(--cash)!important;border-color:var(--cash-bd)!important} html[data-ui="v2"] #arCollectCardChips>span[style*="#e0e7ff"]::before{-webkit-mask-image:var(--k-ico-info);mask-image:var(--k-ico-info)} /* buttons: white-on-red / white-on-navy / orange → navy outline; the ONE gold = «Đòi nợ» (switchTab('aging')) */ html[data-ui="v2"] #arCollectCard button,html[data-ui="v2"] #cfoReportCard button{font-size:0!important;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px!important;border-radius:var(--f-radius-sm)!important; background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-navy)!important;font-family:var(--font-display);font-weight:800!important;transition:background .12s,box-shadow .12s} html[data-ui="v2"] #arCollectCard button>span,html[data-ui="v2"] #cfoReportCard button>span{font-size:13px} /* the bare emoji text node is 0px; the bilingual spans stay 13px */ html[data-ui="v2"] #arCollectCard button:hover,html[data-ui="v2"] #cfoReportCard button:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] #arCollectCard button[onclick*="switchTab('aging')"]{background:var(--f-gold)!important;color:#0A1730!important;border-color:transparent!important} html[data-ui="v2"] #arCollectCard button[onclick*="switchTab('aging')"]:hover{background:var(--f-gold2)!important;box-shadow:0 6px 18px rgba(253,187,19,.34)} html[data-ui="v2"] #arCollectCard button:focus-visible,html[data-ui="v2"] #cfoReportCard button:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] #arCollectCard button .pv2-ico,html[data-ui="v2"] #cfoReportCard button .pv2-ico{margin-right:0} /* ───────── 3 · cash cards (.cash-pos-grid .cash-card) → KPI tile with an account-type chip ───────── */ html[data-ui="v2"] #section-dashboard .cash-pos-grid{gap:var(--f-gap)} html[data-ui="v2"] #section-dashboard .cash-card{background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-radius:var(--f-radius);box-shadow:var(--f-sh);padding:16px 18px;container-type:inline-size;overflow:hidden} html[data-ui="v2"] #section-dashboard .cash-card::before{height:3px;background:var(--cash)} html[data-ui="v2"] #section-dashboard .cash-card.total::before{background:var(--pos)} html[data-ui="v2"] #section-dashboard .cash-card.personal::before{background:var(--est)} html[data-ui="v2"] #section-dashboard .cash-card-label{color:var(--f-ink3)!important;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;gap:8px} html[data-ui="v2"] #section-dashboard .cash-card-value{color:var(--f-ink)!important;font-family:var(--font-mono);font-weight:500;font-size:clamp(15px,9.5cqi,var(--f-kpi));letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px;white-space:nowrap;font-variant-numeric:tabular-nums} html[data-ui="v2"] #section-dashboard .cash-card-sub{color:var(--f-ink3);font-size:12px} /* account-type chip written by JS with inline colours: CÔNG TY (#dbeafe) · CÁ NHÂN (#fef3c7) · TM (#f3f4f6) */ html[data-ui="v2"] #section-dashboard .cash-card-label>span:last-child:not(:first-child){display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:800!important;font-size:10px!important;letter-spacing:.06em;padding:2px 8px!important;border-radius:999px!important;background:var(--cash-bg)!important;color:var(--cash)!important} html[data-ui="v2"] #section-dashboard .cash-card-label>span[style*="#fef3c7"]{background:var(--est-bg)!important;color:var(--k-est-ink)!important} html[data-ui="v2"] #section-dashboard .cash-card-label>span[style*="#f3f4f6"]{background:var(--ctl-bg)!important;color:var(--f-ink2)!important} html[data-ui="v2"] #section-dashboard .cash-card-label>span:last-child:not(:first-child)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} /* ───────── 4 · KPI tiles (#dashKPIs, pipeline) — one style; colour only as a 3px top rule ───────── */ html[data-ui="v2"] #section-dashboard .kpi-grid{gap:var(--f-gap)} html[data-ui="v2"] #section-dashboard .kpi{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);padding:16px 18px} html[data-ui="v2"] #section-dashboard .kpi::before{height:3px;background:var(--ctl)} html[data-ui="v2"] #section-dashboard .kpi.green::before{background:var(--pos)} html[data-ui="v2"] #section-dashboard .kpi.blue::before,html[data-ui="v2"] #section-dashboard .kpi.cyan::before{background:var(--cash)} html[data-ui="v2"] #section-dashboard .kpi.red::before{background:var(--neg)} html[data-ui="v2"] #section-dashboard .kpi.yellow::before,html[data-ui="v2"] #section-dashboard .kpi.orange::before{background:var(--est)} html[data-ui="v2"] #section-dashboard .kpi.purple::before{background:var(--ctl)} html[data-ui="v2"] #section-dashboard .kpi-label{color:var(--f-ink3);font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;margin-bottom:6px} html[data-ui="v2"] #section-dashboard .kpi-grid .kpi-value{color:var(--f-ink);font-family:var(--font-display);font-weight:800;font-size:clamp(15px,10.5cqi,var(--f-kpi));letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px;font-variant-numeric:tabular-nums} html[data-ui="v2"] #section-dashboard .kpi-sub{color:var(--f-ink3);font-size:12px;line-height:1.4} html[data-ui="v2"] #section-dashboard .kpi-sub[style*="dashed"]{border-top-color:var(--f-line2)!important} html[data-ui="v2"] #costhubHoldLine{color:var(--k-est-ink)!important;background:var(--est-bg)!important;border:1px solid var(--est-bd)!important;border-left:4px solid var(--est)!important;border-radius:var(--f-radius-sm)!important} /* ───────── 5 · tables: .tcard + .tscroll table, .route-summary, .ccrd → mock .card / .tbl ───────── */ html[data-ui="v2"] #section-dashboard .tcard,html[data-ui="v2"] #section-dashboard .route-summary,html[data-ui="v2"] #section-dashboard .ccrd{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh)} html[data-ui="v2"] #section-dashboard .tcard-hdr,html[data-ui="v2"] #section-dashboard .route-summary .rs-hdr{padding:14px 18px;border-bottom:1px solid var(--f-line)} html[data-ui="v2"] #section-dashboard .tcard-hdr h3,html[data-ui="v2"] #section-dashboard .route-summary .rs-hdr,html[data-ui="v2"] #section-dashboard .ccrd h4{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--f-ink);letter-spacing:-.005em} /* the two pipeline card titles carry a bare emoji text node before the bilingual spans: 0px there only; the spans restore the size */ html[data-ui="v2"] #section-dashboard .dash-panel[data-sub="pipeline"] .tcard-hdr h3{font-size:0;display:flex;align-items:center} html[data-ui="v2"] #section-dashboard .dash-panel[data-sub="pipeline"] .tcard-hdr h3>span{font-size:15px} html[data-ui="v2"] #section-dashboard .tcard-hdr .sub{color:var(--f-ink3);font-size:12px} html[data-ui="v2"] #section-dashboard .tscroll table{font-size:var(--f-fs);font-variant-numeric:tabular-nums} html[data-ui="v2"] #section-dashboard .tscroll th{background:transparent;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.12em;color:var(--f-ink3);padding:0 10px;height:34px;border-bottom:1px solid var(--f-line2)} html[data-ui="v2"] #section-dashboard .tscroll td{padding:0 10px;height:var(--f-row);border-bottom:1px solid var(--f-line);color:var(--f-ink2)} html[data-ui="v2"] #section-dashboard .tscroll tr:hover td{background:var(--f-page)} html[data-ui="v2"] #section-dashboard .tscroll tr:hover{background:transparent} html[data-ui="v2"] #section-dashboard #pipARBody td:first-child,html[data-ui="v2"] #section-dashboard #pipAPBody td:first-child,html[data-ui="v2"] #section-dashboard #routeSummaryBody td:first-child{font-family:var(--font-mono);font-size:.93em;letter-spacing:.02em;color:var(--f-ink)} html[data-ui="v2"] #section-dashboard .empty .icon{display:none} /* emoji-only block ("No activity yet") */ /* ───────── 6 · alerts panel: accordions = card list; banners / ribbons = alert rows (left rule, no gradient) ───────── */ html[data-ui="v2"] #section-dashboard .dash-acc{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);margin-bottom:var(--f-gap)} html[data-ui="v2"] #section-dashboard .dash-acc-head{background:var(--f-card);gap:10px;padding:12px 16px;min-height:var(--f-row)} html[data-ui="v2"] #section-dashboard .dash-acc-head:hover{background:var(--f-nav-100)} html[data-ui="v2"] #section-dashboard .dash-acc-head:focus-visible{outline:2px solid var(--f-gold);outline-offset:-2px} html[data-ui="v2"] #section-dashboard .dash-acc-head>.pv2-ico{width:18px;height:18px;margin-right:0;color:var(--f-navy)} html[data-ui="v2"] #section-dashboard .dash-acc-title{font-size:0;font-family:var(--font-display);font-weight:800;color:var(--f-ink)} /* bare emoji text node first: 0px, children restore */ html[data-ui="v2"] #section-dashboard .dash-acc-title>*{font-size:14px} html[data-ui="v2"] #section-dashboard .dash-acc-count{background:var(--neg-bg);color:var(--k-neg-ink);font-family:var(--font-mono);font-weight:500;font-size:12px;padding:1px 9px} html[data-ui="v2"] #section-dashboard .dash-acc-caret{font-size:0;width:16px;height:16px;color:var(--f-ink3)} html[data-ui="v2"] #section-dashboard .dash-acc-caret::after{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--k-ico-chev) center/contain no-repeat;mask:var(--k-ico-chev) center/contain no-repeat} html[data-ui="v2"] #section-dashboard .dash-acc-body{padding:4px 16px 12px} html[data-ui="v2"] #section-dashboard .dash-empty-note{font-size:0;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);color:var(--f-ink3);padding:28px 20px} html[data-ui="v2"] #section-dashboard .dash-empty-note>span{font-size:13px} html[data-ui="v2"] #section-dashboard .dash-empty-note .pv2-ico{color:var(--pos);width:18px;height:18px;margin-right:0} html[data-ui="v2"] #pglAlertPeriodRibbon{background:var(--f-card)!important;color:var(--f-ink2)!important;border:1px solid var(--f-line)!important;border-left:4px solid var(--cash)!important;border-radius:var(--f-radius-sm)!important;font-size:12px!important} html[data-ui="v2"] #arCollectBanner{background:var(--f-card)!important;color:var(--f-ink2)!important;border:1px solid var(--f-line)!important;border-left:4px solid var(--neg)!important;border-radius:var(--f-radius-sm)!important;box-shadow:var(--f-sh)!important} html[data-ui="v2"] #dashTriageRow{gap:var(--f-gap)} /* section captions («Số Dư Tiền Mặt», «Tình Hình Phải Thu / Phải Trả», …): inline 10px uppercase labels with a bare emoji text node first */ html[data-ui="v2"] #section-dashboard .dash-panel>div[style*="letter-spacing:.7px"]{font-size:0!important;display:flex!important;align-items:center;gap:6px;color:var(--f-ink3)!important;font-family:var(--font-display);font-weight:800!important} html[data-ui="v2"] #section-dashboard .dash-panel>div[style*="letter-spacing:.7px"]>span:not(.badge-status):not(.sub){font-size:10.5px!important;letter-spacing:.14em!important} html[data-ui="v2"] #section-dashboard .dash-panel>div[style*="letter-spacing:.7px"]>.sub{font-size:11px!important;font-family:var(--font-body);font-weight:400!important} html[data-ui="v2"] #section-dashboard .dash-panel>div[style*="letter-spacing:.7px"]>.badge-status{font-size:10px!important} html[data-ui="v2"] #section-dashboard .dash-panel>div[style*="letter-spacing:.7px"]>.pv2-ico{margin-right:2px} /* ───────── 7 · «Việc cần xử lý» queue card (read-only mirror, built by /_shared/pgl-queue-v2.js) ───────── */ html[data-ui="v2"] #pglV2Queue{margin:0 0 var(--f-gap)} html[data-ui="v2"] .pv2-q__card{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);min-width:0} html[data-ui="v2"] .pv2-q__card[hidden],html[data-ui="v2"] .pv2-q__empty[hidden],html[data-ui="v2"] .pv2-q__load[hidden]{display:none} html[data-ui="v2"] .pv2-q__h{display:flex;align-items:center;gap:10px;padding:14px 18px 0} html[data-ui="v2"] .pv2-q__h h3{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--f-ink);margin:0} html[data-ui="v2"] .pv2-q__h .pv2-ico{width:18px;height:18px;margin-right:0;color:var(--f-navy)} html[data-ui="v2"] .pv2-q__sum{margin-left:auto;font-family:var(--font-body);font-size:12px;color:var(--f-ink3)} html[data-ui="v2"] .pv2-q__list{display:flex;flex-direction:column;padding:6px 18px 10px} html[data-ui="v2"] .pv2-q__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--f-line);font-size:13px;min-width:0} html[data-ui="v2"] .pv2-q__row:last-child{border-bottom:0} html[data-ui="v2"] .pv2-q__ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none} html[data-ui="v2"] .pv2-q__ic .pv2-ico{width:16px;height:16px;margin:0} html[data-ui="v2"] .pv2-q__ic--bad{background:var(--neg-bg);color:var(--k-neg-ink)} html[data-ui="v2"] .pv2-q__ic--warn{background:var(--est-bg);color:var(--k-est-ink)} html[data-ui="v2"] .pv2-q__ic--info{background:var(--cash-bg);color:var(--cash)} html[data-ui="v2"] .pv2-q__ic--ok{background:var(--pos-bg);color:var(--k-pos-ink)} html[data-ui="v2"] .pv2-q__t{min-width:0;flex:1;color:var(--f-ink);font-weight:500;overflow-wrap:anywhere} html[data-ui="v2"] .pv2-q__sub{display:block;font-weight:400;font-size:12px;color:var(--f-ink3);line-height:1.35} html[data-ui="v2"] .pv2-q__n{flex:none;font-family:var(--font-mono);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums;color:var(--f-ink);min-width:2ch;text-align:right} html[data-ui="v2"] .pv2-q__go{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:var(--f-radius-sm);border:1px solid var(--f-line2);background:var(--f-card);color:var(--f-navy);font-family:var(--font-display);font-weight:800;font-size:12px;cursor:pointer;transition:background .12s} html[data-ui="v2"] .pv2-q__go:hover{background:var(--f-nav-100)} html[data-ui="v2"] .pv2-q__go:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] .pv2-q__go .pv2-ico{width:14px;height:14px;margin:0} html[data-ui="v2"] .pv2-q__note{margin:8px 2px 0;font-size:12px;line-height:1.45;color:var(--f-ink3)} html[data-ui="v2"] .pv2-q__note[hidden]{display:none} html[data-ui="v2"] .pv2-q__empty,html[data-ui="v2"] .pv2-q__load{display:flex;align-items:center;gap:10px;background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);padding:16px 18px;color:var(--f-ink3);font-size:13px} html[data-ui="v2"] .pv2-q__empty .pv2-ico{color:var(--k-pos-ink);width:18px;height:18px;margin-right:0} /* ───────── 8 · topbar search routing hint (built by pgl-shell-v2.js) ───────── */ html[data-ui="v2"] #pglV2Hint{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--f-card);border:1px solid var(--f-line2);border-radius:var(--f-radius-sm);box-shadow:0 6px 16px rgba(15,32,68,.18);padding:4px;min-width:260px} html[data-ui="v2"] #pglV2Hint[hidden]{display:none} html[data-ui="v2"] .pv2-hint__i{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;border-radius:8px;color:var(--f-ink2);font-size:13px;cursor:pointer;overflow-wrap:anywhere} html[data-ui="v2"] .pv2-hint__i b{color:var(--f-ink);font-weight:500} html[data-ui="v2"] .pv2-hint__i[aria-selected="true"],html[data-ui="v2"] .pv2-hint__i:hover{background:var(--f-nav-100);color:var(--f-ink)} html[data-ui="v2"] .pv2-hint__i::after{content:"\21B5";margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--f-ink3);opacity:0} html[data-ui="v2"] .pv2-hint__i[aria-selected="true"]::after{opacity:1} /* (the chat bubble rule lives in pgl-shell-v2.css since PR-UI-F — not repeated here) */ /* ───────── 10 · compact density (values from the mock's .dir-b) ───────── */ html[data-ui="v2"][data-density="compact"] #section-dashboard .kpi{padding:12px 14px} html[data-ui="v2"][data-density="compact"] #section-dashboard .cash-card{padding:12px 14px} html[data-ui="v2"][data-density="compact"] #section-dashboard .tcard-hdr{padding:10px 14px} html[data-ui="v2"][data-density="compact"] #section-dashboard .tscroll td{height:var(--f-row)} /* --f-row is 36px under compact (pgl-tokens.css) */ html[data-ui="v2"][data-density="compact"] #section-dashboard .dash-acc-head{padding:8px 14px} html[data-ui="v2"][data-density="compact"] #section-dashboard .dash-acc-body{padding:2px 14px 10px} html[data-ui="v2"][data-density="compact"] #section-dashboard .dash-pill{padding:7px 12px;font-size:12px} html[data-ui="v2"][data-density="compact"] .pv2-q__h{padding:10px 14px 0} html[data-ui="v2"][data-density="compact"] .pv2-q__list{padding:4px 14px 8px} html[data-ui="v2"][data-density="compact"] .pv2-q__row{padding:7px 0} html[data-ui="v2"][data-density="compact"] #arCollectCard button,html[data-ui="v2"][data-density="compact"] #cfoReportCard button{height:32px} html[data-ui="v2"][data-density="compact"] #arCollectCard button>span,html[data-ui="v2"][data-density="compact"] #cfoReportCard button>span{font-size:12px} /* ───────── 11 · narrow screens ───────── */ @media (max-width:900px){ html[data-ui="v2"] #arCollectCardTitle,html[data-ui="v2"] #cfoReportCardTitle{font-size:20px!important} html[data-ui="v2"] #section-dashboard .dash-subnav{top:calc(var(--f-tb-h) + 4px)} } @media (max-width:420px){ /* the «Mở» button stays on the row as an icon (its words stay for screen readers) */ html[data-ui="v2"] .pv2-q__go{padding:0 8px} html[data-ui="v2"] .pv2-q__go>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } @media (prefers-reduced-motion:reduce){ html[data-ui="v2"] #section-dashboard .dash-pill,html[data-ui="v2"] .pv2-q__go,html[data-ui="v2"] #arCollectCard button,html[data-ui="v2"] #cfoReportCard button{transition:none} } /* ═════════════════════════════════════════════ 12 · LEDGERS (PR-UI-2, 24/10/2026) ═════════════════════════════════════════════ Phải thu · Phải trả · Đề nghị thanh toán (list) · Tạm ứng (list + trips list) on the finance kit + the emoji wrapper. Scope: #section-ar, #section-ap, #prListView, #advListView, #tpListView (the editor / detail views, modals, drawers and toasts are PR-UI-3). Every rule starts with html[data-ui="v2"]; the file stays inert flag-off (test G1c forces media="all"). Inline-hex / inline-style attribute matches this section relies on (a legacy template that changes one silently falls back to its legacy look): fbar buttons — NOT matched one by one: `.fbar .btn` is overridden with !important, which beats these inline backgrounds today: #dcfce7 (Tạm ứng) · #dbeafe (Nhập Thu Tiền) · #fae8ff (Gộp Đại Lý) · #fef9c3 (Sao kê) · #ede9fe (Co-load) · #eef2ff (AP Đối chiếu NCC) · var(--green-bg) (Import AR) · var(--orange-bg) (Import AP) AR 5th KPI tile `style*="#2563eb"` (border-left 4px + value colour) · row buttons `style*="#b91c1c"` / `#6b21a8` · summary rows `tr[style*="#f8fafc"]`, `tr[style*="#f0fdf4"]` alert blocks `#pglVarAlert #pglOverlimitAlert #pglReconStrip #apOwnerCard #prGdGapPanel #prAuditPanel` — border / background are inline, overridden with !important on the id. Numeric columns (right-aligned, tabular-nums), by position — read from each : AR `#arBody` 11 Amount · 12 Paid · 13 Balance (AWB = col 2 and Tracking = col 3 are mono; Invoice # = col 1 is mono) AP `#apBody` 7 Amount · 8 Paid · 9 Balance (Bill # = col 1 is mono) ĐNTT `#prListBody` 4 Dòng · 5 Tổng tiền (Số ĐNTT = col 1 is mono) Tạm ứng `#advListBody` 5 Tạm ứng · 6 Đã QT (Số TU = col 1 is mono) trips `#tpListBody` 5 Dự kiến (VND) (Số CT = col 1 is mono) (also AR «Outstanding by Sales» `#salesDebtBody`: 2–9, the mock has no answer for it; it gets the same rule so the figures line up) Emoji → Lucide wrapper: `⚠`; classic has NO rule for .pv2-emo (plain inline span, identical text); under v2 the glyph is font-size:0 and a CSS-mask icon takes its place. The wrapper takes the ONE space that follows its glyph («⚠ Words»): the glyph and its space then stay in the same text run as before, so classic renders the same pixels (PR-UI-0 G8 pixel gate), and under v2 the 6px margin replaces that space. Lucide names used (v0.454, stroke 1.75, paths copied from the vendored _shared/lucide.min.js): alarm-clock · arrow-left-right · arrow-right · ban · banknote · book · building-2 · calendar · chart-column · check · chevron-left · chevron-right · circle · circle-alert · circle-check · circle-dot · circle-help · circle-x · clipboard-list · clock · credit-card · diamond · download · droplet · eye · factory · file-pen · file-text · files · flag · flame · handshake · hourglass · house · info · landmark · link · lock · minus · package · paperclip · pen-line · pencil · phone · pin · plane · plane-takeoff · plus · receipt · refresh-cw · repeat · ruler · save · scale · search · shuffle · siren · store · tag · ticket · traffic-cone · trash-2 · trending-down · trending-up · triangle-alert · truck · undo-2 · upload · user · users · wrench · x · zap */ /* ───────── 12.0/12.1 · icon tokens + the emoji wrapper MOVED to _shared/pgl-icons.css (PR-UI-5a; generated by tools/ui5_icons_build.mjs; one source of truth, loaded by the shell and every sub-app) ───────── */ /* ───────── 12.2 · legacy variables remapped inside the four ledgers (safe-reskin rule: no cell markup edited) ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView){--red:var(--k-neg-ink);--green:var(--k-pos-ink);--blue:var(--f-navy);--navy:var(--f-ink);--muted:var(--f-ink3);--txt2:var(--f-ink2);--yellow:var(--k-est-ink);--orange:var(--k-est-ink);--warn:var(--k-est-ink)} /* ───────── 12.3 · filters: .fbar → mock .filters, .fbtn → .fchip, .search-box → 32px field ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--f-gap)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--f-line2);background:var(--f-card);color:var(--f-ink2);font-family:var(--font-body);font-size:12.5px;font-weight:500;line-height:1;transition:background .12s,color .12s} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn:hover{background:var(--f-nav-100);border-color:var(--f-line2);color:var(--f-ink)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn.active{background:var(--f-navy);border-color:var(--f-navy);color:#fff} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn .pv2-emo{color:var(--f-ink3)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn.active .pv2-emo{color:inherit} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .search-box{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--f-line2);background:var(--f-card);color:var(--f-ink2);font-family:var(--font-body);font-size:12.5px;outline:none} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .search-box:focus,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .search-box:focus-visible{border-color:var(--f-gold);outline:2px solid var(--f-gold);outline-offset:1px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .search-box::placeholder{color:var(--f-ink3);opacity:1} /* buttons in the list-view .fbar → navy outline (mock .btn-out); inline-coloured ones too (see the list in the header) */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn-sm{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px!important;border-radius:var(--f-radius-sm)!important;background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-line2)!important; font-family:var(--font-display);font-weight:800!important;font-size:12px!important;line-height:1;transition:background .12s,box-shadow .12s} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} /* the ONE gold per section: AR «Nhập Thu Tiền» · AP «+ New Bill» · ĐNTT «+ Tạo Đề Nghị» · Tạm ứng «+ Tạo Tạm Ứng» · trips «+ Tạo Đề Xuất Công Tác» */ html[data-ui="v2"] #section-ar .fbar button[onclick="openThuTienModal()"],html[data-ui="v2"] #section-ap .fbar .btn-danger,html[data-ui="v2"] #prListView .fbar .btn-danger,html[data-ui="v2"] #advListView .fbar .btn-danger,html[data-ui="v2"] #tpListView .fbar .btn-danger{ background:var(--f-gold)!important;color:#0A1730!important;border-color:transparent!important} html[data-ui="v2"] #section-ar .fbar button[onclick="openThuTienModal()"]:hover,html[data-ui="v2"] #section-ap .fbar .btn-danger:hover,html[data-ui="v2"] #prListView .fbar .btn-danger:hover,html[data-ui="v2"] #advListView .fbar .btn-danger:hover,html[data-ui="v2"] #tpListView .fbar .btn-danger:hover{ background:var(--f-gold2)!important;box-shadow:0 6px 18px rgba(253,187,19,.34)} html[data-ui="v2"] #section-ar .fbar .btn-primary{background:var(--f-navy)!important;color:#fff!important;border-color:var(--f-navy)!important} /* «+ New Invoice»: the only solid navy on the screen (mock .btn-navy) */ html[data-ui="v2"] #section-ar .fbar .btn-primary:hover{background:var(--navy-700)!important} html[data-ui="v2"] #apVendorClear{width:32px;justify-content:center} html[data-ui="v2"] #apVendorClear .pv2-emo,html[data-ui="v2"] #apSideChip .pv2-emo{margin-right:0} /* ───────── 12.4 · KPI tiles (kit :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView)4: one style, 3px top rule by colour class) ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:var(--f-gap)} /* inline repeat(5,1fr) / repeat(4,1fr) */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);padding:16px 18px;container-type:inline-size;min-width:0} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi[style*="border-left"]{border-left:1px solid var(--f-line)!important} /* AR 5th tile: inline 4px #2563eb rule → top rule --cash */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi::before{height:3px;background:var(--ctl)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.green::before{background:var(--pos)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.blue::before,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.cyan::before,html[data-ui="v2"] #section-ar .kpi[style*="#2563eb"]::before{background:var(--cash)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.red::before{background:var(--neg)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.yellow::before,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.orange::before{background:var(--est)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi.purple::before{background:var(--ctl)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-label{color:var(--f-ink3);font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;margin-bottom:6px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-value{color:var(--f-ink)!important;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,9.5cqi,var(--f-kpi));letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px;white-space:nowrap;font-variant-numeric:tabular-nums} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-label .pv2-emo{width:12px;height:12px;margin-right:2px;vertical-align:-1px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-sub{color:var(--f-ink3);font-size:12px;line-height:1.4} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-sub[style*="dashed"]{border-top-color:var(--f-line2)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-sub[style]:not([style*="dashed"]){color:var(--f-ink3)!important} /* ───────── 12.5 · table card: .tcard → .card, headers/rows from the mock .tbl ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);margin-bottom:var(--f-gap);overflow:hidden} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr{padding:14px 18px;border-bottom:1px solid var(--f-line);gap:10px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr h3{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--f-ink);letter-spacing:-.005em} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr h3>span[id$="Count"],html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr h3>span[style*="font-weight:400"]{font-family:var(--font-body);font-weight:400!important;font-size:12px!important;color:var(--f-ink3)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr .sub{color:var(--f-ink3);font-size:12px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll{overflow-x:auto} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll table{font-size:var(--f-fs);font-variant-numeric:tabular-nums} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll th{position:sticky;top:0;z-index:1;background:var(--f-card);font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.12em;color:var(--f-ink3);padding:0 10px;height:34px;border-bottom:1px solid var(--f-line2);white-space:nowrap} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll td{padding:0 10px;height:var(--f-row);border-bottom:1px solid var(--f-line);color:var(--f-ink2);white-space:nowrap;vertical-align:middle} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll tr:hover td{background:var(--f-page)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll tr:hover{background:transparent} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll tr:last-child td{border-bottom:0} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll td[colspan]{height:auto;padding:14px 10px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll tr[style*="#f8fafc"]>td{background:var(--f-page)!important} /* group / summary rows */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll tr[style*="#f0fdf4"]>td{background:var(--pos-bg)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll b,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll strong{color:var(--f-ink);font-weight:500} /* document numbers → Roboto Mono */ html[data-ui="v2"] #section-ar #arBody td:nth-child(-n+3),html[data-ui="v2"] #section-ap #apBody td:first-child,html[data-ui="v2"] #prListBody td:first-child,html[data-ui="v2"] #advListBody td:first-child,html[data-ui="v2"] #tpListBody td:first-child{font-family:var(--font-mono);font-size:.93em;letter-spacing:.02em;color:var(--f-ink)} html[data-ui="v2"] #arBody td span[style*="monospace"]{font-family:var(--font-mono)!important;font-size:inherit!important;color:inherit!important} /* numeric columns: right-aligned, tabular figures */ html[data-ui="v2"] #section-ar #arBody td:nth-child(n+11):nth-child(-n+13),html[data-ui="v2"] #section-ar table:has(#arBody) th:nth-child(n+11):nth-child(-n+13), html[data-ui="v2"] #section-ap #apBody td:nth-child(n+7):nth-child(-n+9),html[data-ui="v2"] #section-ap table:has(#apBody) th:nth-child(n+7):nth-child(-n+9), html[data-ui="v2"] #prListBody td:nth-child(n+4):nth-child(-n+5),html[data-ui="v2"] table:has(#prListBody) th:nth-child(n+4):nth-child(-n+5), html[data-ui="v2"] #advListBody td:nth-child(n+5):nth-child(-n+6),html[data-ui="v2"] table:has(#advListBody) th:nth-child(n+5):nth-child(-n+6), html[data-ui="v2"] #tpListBody td:nth-child(5),html[data-ui="v2"] table:has(#tpListBody) th:nth-child(5), html[data-ui="v2"] #salesDebtBody td:nth-child(n+2):nth-child(-n+9),html[data-ui="v2"] table:has(#salesDebtBody) th:nth-child(n+2):nth-child(-n+9){text-align:right!important;font-variant-numeric:tabular-nums} html[data-ui="v2"] #section-ar #arBody td:nth-child(n+11):nth-child(-n+13),html[data-ui="v2"] #section-ap #apBody td:nth-child(n+7):nth-child(-n+9){color:var(--f-ink)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll td[colspan]{text-align:center!important} /* row action buttons → compact outlines (the fbar holds the gold / navy) */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn{height:26px;padding:0 9px!important;display:inline-flex;align-items:center;gap:5px;border-radius:7px!important;background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-line2)!important; font-family:var(--font-display);font-weight:800!important;font-size:11px!important;line-height:1} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn.btn-success{color:var(--k-pos-ink)!important;border-color:var(--pos-bd)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn.btn-danger,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn[style*="#b91c1c"]{color:var(--k-neg-ink)!important;border-color:var(--neg-bd)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn.btn-ghost{border-color:transparent!important;color:var(--f-ink2)!important;padding:0 7px!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn-group{gap:6px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} /* ───────── 12.6 · status chips: .badge*, .badge-status*, .route-pill → mock .chip, ALWAYS icon + word (CSS-mask ::before) ───────── */ html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge,.badge-status,.route-pill){display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3; padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge,.badge-status,.route-pill)::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--k-ico-minus) center/contain no-repeat;mask:var(--k-ico-minus) center/contain no-repeat} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge,.badge-status,.route-pill) .pv2-emo{display:none} /* the chip's own icon replaces a glyph inside the label («Đã duyệt ✓») */ /* tone → colour (background + ink token, ≥ 4.5:1) and icon */ html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-paid,.badge-status-pos){background:var(--pos-bg);color:var(--k-pos-ink);border-color:var(--pos-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-paid,.badge-status-pos)::before{-webkit-mask-image:var(--k-ico-check);mask-image:var(--k-ico-check)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-partial,.badge-status-warn,.badge-status-est){background:var(--est-bg);color:var(--k-est-ink);border-color:var(--est-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-partial,.badge-status-warn,.badge-status-est)::before{-webkit-mask-image:var(--k-ico-circle-dot);mask-image:var(--k-ico-circle-dot)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-unpaid{background:var(--neg-bg);color:var(--k-neg-ink);border-color:var(--neg-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-unpaid::before{-webkit-mask-image:var(--k-ico-circle);mask-image:var(--k-ico-circle)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-overdue,.badge-status-neg){background:var(--neg-bg);color:var(--k-neg-ink);border-color:var(--neg-bd)} /* .badge-overdue was white on red: never colour alone */ html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-overdue,.badge-status-neg)::before{-webkit-mask-image:var(--k-ico-triangle-alert);mask-image:var(--k-ico-triangle-alert)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-status-muted{background:var(--ctl-bg);color:var(--f-ink2);border-color:var(--ctl-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-status-muted::before{-webkit-mask-image:var(--k-ico-minus);mask-image:var(--k-ico-minus)} /* channel / stage / route */ html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-route,.route-pill){background:var(--ctl-bg);color:var(--ctl);border-color:var(--ctl-bd);font-size:10.5px} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) :is(.badge-route,.route-pill)::before{-webkit-mask-image:var(--k-ico-plane);mask-image:var(--k-ico-plane)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .route-pill.route-US,html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .route-pill.route-AU,html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .route-pill.route-CA{background:var(--cash-bg);color:var(--cash);border-color:var(--cash-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .route-pill.route-USK{background:var(--est-bg);color:var(--k-est-ink);border-color:var(--est-bd)} /* was 4.51:1 */ html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .route-pill.route-EU{background:var(--pos-bg);color:var(--k-pos-ink);border-color:var(--pos-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-dai-ly{background:var(--cash-bg);color:var(--cash);border-color:var(--cash-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-dai-ly::before{-webkit-mask-image:var(--k-ico-users);mask-image:var(--k-ico-users)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-direct{background:var(--ctl-bg);color:var(--ctl);border-color:var(--ctl-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-direct::before{-webkit-mask-image:var(--k-ico-user);mask-image:var(--k-ico-user)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-epacket{background:var(--est-bg);color:var(--k-est-ink);border-color:var(--est-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-epacket::before{-webkit-mask-image:var(--k-ico-package);mask-image:var(--k-ico-package)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-firstmile{background:var(--est-bg);color:var(--k-est-ink);border-color:var(--est-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-firstmile::before{-webkit-mask-image:var(--k-ico-plane-takeoff);mask-image:var(--k-ico-plane-takeoff)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-lastmile{background:var(--cash-bg);color:var(--cash);border-color:var(--cash-bd)} html[data-ui="v2"] :is(:is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView),#section-dashboard .dash-acc-body,#settleBreakdown) .badge-lastmile::before{-webkit-mask-image:var(--k-ico-truck);mask-image:var(--k-ico-truck)} /* chips written with inline colours by the page */ html[data-ui="v2"] #apSideChip,html[data-ui="v2"] #tpNavBadge,html[data-ui="v2"] #prMineCount{font-family:var(--font-display);font-weight:800!important;font-size:10.5px!important;letter-spacing:.04em} html[data-ui="v2"] #apSideChip{background:var(--cash-bg)!important;color:var(--cash)!important;border:1px solid var(--cash-bd)!important;border-radius:999px!important;padding:3px 9px!important;gap:6px} html[data-ui="v2"] #tpNavBadge{background:var(--est-bg)!important;color:var(--k-est-ink)!important;border:1px solid var(--est-bd);border-radius:999px!important;padding:1px 8px!important} html[data-ui="v2"] #prMineCount{color:inherit;font-family:var(--font-mono);font-weight:500!important;font-size:11px!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-chip{border-radius:999px;font-family:var(--font-body)} /* needs-attention chips (arAttn / apAttn) */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-title{color:var(--f-ink3)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-chip .attn-sub{opacity:1} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-red{background:var(--neg-bg);border-color:var(--neg-bd);color:var(--k-neg-ink)}html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-red .attn-cnt{background:var(--k-neg-ink);color:#fff} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-amber{background:var(--est-bg);border-color:var(--est-bd);color:var(--k-est-ink)}html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-amber .attn-cnt{background:var(--k-est-ink);color:#fff} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-blue{background:var(--cash-bg);border-color:var(--cash-bd);color:var(--cash)}html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .attn-blue .attn-cnt{background:var(--cash);color:#fff} /* ───────── 12.7 · pager: .pgl-pager → mock .pager ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager{background:transparent;border:0;border-top:1px solid var(--f-line);border-radius:0;padding:10px 18px;font-size:12.5px;color:var(--f-ink3);gap:10px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-info,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-info b{color:var(--f-ink3);font-weight:500} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-info b{color:var(--f-ink)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-btn{min-width:28px;width:auto;height:28px;border:0;border-radius:7px;background:transparent;color:var(--f-ink2);font-weight:500} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-btn:hover:not(:disabled){background:var(--f-nav-100);border:0} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-btn:disabled{background:transparent;color:var(--f-ink3);cursor:not-allowed} /* no opacity: 5.7:1 stays */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-btn.pg-active{background:var(--f-navy);color:#fff} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager .pg-size select{height:28px;border:1px solid var(--f-line2);border-radius:7px;background:var(--f-card);color:var(--f-ink2)} /* ───────── 12.8 · folds: details.fold > summary.fold-sum → card header with a chevron mask ───────── */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);overflow:hidden} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary.fold-sum{padding:14px 18px;border-bottom:1px solid var(--f-line);gap:10px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold:not([open])>summary.fold-sum{border-bottom:0} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary .fold-arrow{display:none} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary.fold-sum::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background:var(--f-ink3);-webkit-mask:var(--k-ico-chev) center/contain no-repeat;mask:var(--k-ico-chev) center/contain no-repeat;transition:transform .15s} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold[open]>summary.fold-sum::after{transform:rotate(90deg)} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary.fold-sum:focus-visible{outline:2px solid var(--f-gold);outline-offset:-2px} /* ───────── 12.9 · alert blocks → mock alert row: white card, 4px left rule, ink text, navy-outline buttons ───────── */ html[data-ui="v2"] #pglVarAlert,html[data-ui="v2"] #pglOverlimitAlert,html[data-ui="v2"] #pglReconStrip,html[data-ui="v2"] #apOwnerCard,html[data-ui="v2"] #prGdGapPanel,html[data-ui="v2"] #prAuditPanel{background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:4px solid var(--est)!important;border-radius:var(--f-radius-sm)!important;box-shadow:var(--f-sh)!important;overflow:hidden} html[data-ui="v2"] #pglVarAlert{border-left-color:var(--neg)!important} html[data-ui="v2"] #prGdGapPanel{border-left-color:var(--cash)!important} html[data-ui="v2"] #pglVarAlert>div:first-child,html[data-ui="v2"] #pglOverlimitAlert>div:first-child,html[data-ui="v2"] #pglReconStripHead{background:transparent!important;color:var(--f-ink)!important;font-family:var(--font-display);font-weight:800!important} html[data-ui="v2"] #pglVarAlertBody,html[data-ui="v2"] #pglOverlimitBody,html[data-ui="v2"] #pglReconStripBody,html[data-ui="v2"] #pglReconStripDetail{background:transparent!important;color:var(--f-ink2)!important} html[data-ui="v2"] #pglVarAlert button,html[data-ui="v2"] #pglReconStrip button{height:30px;padding:0 12px!important;border-radius:var(--f-radius-sm)!important;background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-line2)!important;font-family:var(--font-display);font-weight:800!important;font-size:12px!important;display:inline-flex;align-items:center;gap:6px} html[data-ui="v2"] #pglVarAlert button:hover,html[data-ui="v2"] #pglReconStrip button:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] #pglVarAlert>div:first-child .pv2-emo,html[data-ui="v2"] #pglOverlimitAlert>div:first-child .pv2-emo,html[data-ui="v2"] #pglReconStripHead .pv2-emo{width:18px;height:18px;color:var(--k-neg-ink)} html[data-ui="v2"] #pglOverlimitAlert>div:first-child .pv2-emo,html[data-ui="v2"] #pglReconStripHead .pv2-emo{color:var(--k-est-ink)} html[data-ui="v2"] #pglVarAlert>div:first-child span[style*="font-size:20px"],html[data-ui="v2"] #pglReconStripHead span[style*="font-size:18px"]{font-size:0!important} /* the 20px / 18px emoji-only host spans: the icon inside is 18px */ html[data-ui="v2"] #prGdGapPanel>summary,html[data-ui="v2"] #prAuditPanel>summary{color:var(--f-ink)!important;font-family:var(--font-display);font-weight:800!important} html[data-ui="v2"] #prGdGapPanel>summary::after,html[data-ui="v2"] #prAuditPanel>summary::after{content:"";flex:none;width:16px;height:16px;background:var(--f-ink3);-webkit-mask:var(--k-ico-chev) center/contain no-repeat;mask:var(--k-ico-chev) center/contain no-repeat;transition:transform .15s} html[data-ui="v2"] #prGdGapPanel[open]>summary::after,html[data-ui="v2"] #prAuditPanel[open]>summary::after{transform:rotate(90deg)} html[data-ui="v2"] #prGdGapPanel>summary .pv2-emo,html[data-ui="v2"] #prAuditPanel>summary .pv2-emo{color:var(--f-navy)} html[data-ui="v2"] #prGdGapBadge{background:var(--neg-bg)!important;color:var(--k-neg-ink)!important;font-family:var(--font-mono);font-weight:500!important;font-size:11px!important;padding:1px 8px!important} html[data-ui="v2"] #apOwnerCard .card-h{border-bottom:0;font-family:var(--font-display);font-weight:800;color:var(--f-ink)} html[data-ui="v2"] #apOwnerCaret,html[data-ui="v2"] #apOwnerSum{color:var(--f-ink3)!important} html[data-ui="v2"] #section-ar #arSearchBanner:not(:empty),html[data-ui="v2"] #section-ar #arAttn,html[data-ui="v2"] #section-ap #apAttn{font-family:var(--font-body)} /* ───────── 12.10 · compact density (rows 36px, chips 28px, tile padding 12/14) ───────── */ html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi{padding:12px 14px} html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard-hdr,html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary.fold-sum{padding:10px 14px} html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll td{height:var(--f-row)} /* --f-row is 36px under compact */ html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn,html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .search-box{height:28px;font-size:12px} html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn{height:28px} html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tscroll .btn{height:24px} html[data-ui="v2"][data-density="compact"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .pgl-pager{padding:8px 14px} /* ───────── 12.11 · narrow screens: the table stays inside .tscroll (horizontal scroll INSIDE the card only, never the page) ───────── */ @media (max-width:1180px){ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar{gap:5px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn{padding:0 9px;font-size:12px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn-sm{padding:0 8px!important;font-size:11.5px!important;gap:4px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar select.search-box{width:92px!important;padding:0 8px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .search-box[type="text"]{width:110px!important} /* keeps the AR toolbar within 3 rows at 1040 */ } @media (max-width:900px){ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar{gap:6px} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn{flex:1 1 auto;justify-content:center} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .search-box{flex:1 1 100%;width:auto!important;min-width:0} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .tcard{max-width:100%} } @media (max-width:420px){ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .kpi-grid{grid-template-columns:minmax(0,1fr)!important} } @media (prefers-reduced-motion:reduce){ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbtn,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) .fbar .btn,html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView,#prEditView,#advEditView,#prDetailView,#advDetailView) details.fold>summary.fold-sum::after{transition:none} } /* ───────── 13 · UI-1 leftovers closed here (24/10/2026) ───────── */ /* legacy pipeline / gap spans written with inline hexes: #d97706 = 3.2:1 and #0891b2 = 3.7:1 on white → the kit's own ink tokens (attribute match on the inline colour; a template that changes the hex falls back to the legacy colour) */ html[data-ui="v2"] #section-dashboard [style*="color:#d97706"]{color:var(--k-est-ink)!important} html[data-ui="v2"] #section-dashboard [style*="color:#0891b2"]{color:var(--cash)!important} html[data-ui="v2"] #section-dashboard .route-pill.route-USK{color:var(--k-est-ink)} /* was 4.51:1 */ /* Alerts-panel accordion bodies + the settle strip: the same table / row rules as the ledgers (CSS only — their markup is JS-built with inline styles, which still win where they set a property) */ html[data-ui="v2"] #section-dashboard :is(.dash-acc-body,#settleBreakdown) table{font-size:var(--f-fs);font-variant-numeric:tabular-nums;border-collapse:collapse} html[data-ui="v2"] #section-dashboard :is(.dash-acc-body,#settleBreakdown) th{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--f-ink3);background:transparent;padding:0 10px;height:34px;border-bottom:1px solid var(--f-line2);white-space:nowrap} html[data-ui="v2"] #section-dashboard :is(.dash-acc-body,#settleBreakdown) td{padding:0 10px;color:var(--f-ink2);border-bottom:1px solid var(--f-line)} html[data-ui="v2"] #section-dashboard .dash-acc-body tr:hover td{background:var(--f-page)} html[data-ui="v2"] #section-dashboard .dash-acc-body .btn{height:26px;padding:0 9px!important;display:inline-flex;align-items:center;gap:5px;border-radius:7px!important;background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-line2)!important;font-family:var(--font-display);font-weight:800!important;font-size:11px!important} html[data-ui="v2"] #section-dashboard .dash-acc-body .btn:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] #settleBreakdown>div{gap:var(--f-gap)} html[data-ui="v2"] #settleBreakdown>div>div{background:var(--f-card)!important;border-radius:var(--f-radius-sm)!important;box-shadow:var(--f-sh)} html[data-ui="v2"] #settleBreakdown .pv2-emo{color:var(--f-navy)} /* week-table pager «◀ ▶» and the emoji wrapper inside the legacy 9–11px captions */ html[data-ui="v2"] #section-dashboard .pv2-emo{vertical-align:-2px} /* PR-0 header KPI strip captions (#pglV2Kpis, shell css) use --f-ink4 (3.4:1) as TEXT; overridden here so the kit owns the contrast (shell css untouched) */ html[data-ui="v2"] #pglV2Kpis .hdr-stat>div:first-child{color:var(--f-ink3)!important} html[data-ui="v2"] #section-dashboard #kpiCollectedPeriod{opacity:1!important} html[data-ui="v2"] #section-dashboard .pgl-axis-chip{color:var(--f-ink3)!important} /* #64748b on #f1f5f9 = 4.34:1 */ /* legacy inline TEXT colours that measure below 4.5:1 on white / tint (slate-400 2.5 · green-600 3.8 · orange-600 3.6 · cyan-600 3.7 · red-500 3.8 …) → the kit ink tokens; matched on the inline `color:#hex` declaration (a template that changes the hex falls back to its legacy colour) */ html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#94a3b8" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#94a3b8" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#94a3b8" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#9ca3af" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#9ca3af" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#9ca3af" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#6b7280" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#6b7280" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#6b7280" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#64748b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#64748b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#64748b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#a1a1aa" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#a1a1aa" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#a1a1aa" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#999999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#999999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#999999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#999" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#8a8a90" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#8a8a90" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#8a8a90" i]{color:var(--f-ink3)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#059669" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#059669" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#059669" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#10b981" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#10b981" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#10b981" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#16a34a" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#16a34a" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#16a34a" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#22c55e" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#22c55e" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#22c55e" i]{color:var(--k-pos-ink)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#d97706" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#d97706" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#d97706" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#ea580c" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#ea580c" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#ea580c" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#f59e0b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#f59e0b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#f59e0b" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#ca8a04" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#ca8a04" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#ca8a04" i]{color:var(--k-est-ink)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#0891b2" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#0891b2" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#0891b2" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#3b82f6" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#3b82f6" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#3b82f6" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#0ea5e9" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#0ea5e9" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#0ea5e9" i]{color:var(--cash)!important} html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#ef4444" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#ef4444" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#ef4444" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*=";color:#f87171" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style*="; color:#f87171" i], html[data-ui="v2"] :is(#section-ar,#section-ap,#section-collections,#section-ar_reminder,#prListView,#advListView,#tpListView) [style^="color:#f87171" i]{color:var(--k-neg-ink)!important} html[data-ui="v2"] #section-dashboard [style*=";color:#94a3b8" i], html[data-ui="v2"] #section-dashboard [style*="; color:#94a3b8" i], html[data-ui="v2"] #section-dashboard [style^="color:#94a3b8" i], html[data-ui="v2"] #section-dashboard [style*=";color:#9ca3af" i], html[data-ui="v2"] #section-dashboard [style*="; color:#9ca3af" i], html[data-ui="v2"] #section-dashboard [style^="color:#9ca3af" i], html[data-ui="v2"] #section-dashboard [style*=";color:#6b7280" i], html[data-ui="v2"] #section-dashboard [style*="; color:#6b7280" i], html[data-ui="v2"] #section-dashboard [style^="color:#6b7280" i], html[data-ui="v2"] #section-dashboard [style*=";color:#64748b" i], html[data-ui="v2"] #section-dashboard [style*="; color:#64748b" i], html[data-ui="v2"] #section-dashboard [style^="color:#64748b" i], html[data-ui="v2"] #section-dashboard [style*=";color:#a1a1aa" i], html[data-ui="v2"] #section-dashboard [style*="; color:#a1a1aa" i], html[data-ui="v2"] #section-dashboard [style^="color:#a1a1aa" i], html[data-ui="v2"] #section-dashboard [style*=";color:#999999" i], html[data-ui="v2"] #section-dashboard [style*="; color:#999999" i], html[data-ui="v2"] #section-dashboard [style^="color:#999999" i], html[data-ui="v2"] #section-dashboard [style*=";color:#999" i], html[data-ui="v2"] #section-dashboard [style*="; color:#999" i], html[data-ui="v2"] #section-dashboard [style^="color:#999" i], html[data-ui="v2"] #section-dashboard [style*=";color:#8a8a90" i], html[data-ui="v2"] #section-dashboard [style*="; color:#8a8a90" i], html[data-ui="v2"] #section-dashboard [style^="color:#8a8a90" i]{color:var(--f-ink3)!important} html[data-ui="v2"] #section-dashboard [style*=";color:#059669" i], html[data-ui="v2"] #section-dashboard [style*="; color:#059669" i], html[data-ui="v2"] #section-dashboard [style^="color:#059669" i], html[data-ui="v2"] #section-dashboard [style*=";color:#10b981" i], html[data-ui="v2"] #section-dashboard [style*="; color:#10b981" i], html[data-ui="v2"] #section-dashboard [style^="color:#10b981" i], html[data-ui="v2"] #section-dashboard [style*=";color:#16a34a" i], html[data-ui="v2"] #section-dashboard [style*="; color:#16a34a" i], html[data-ui="v2"] #section-dashboard [style^="color:#16a34a" i], html[data-ui="v2"] #section-dashboard [style*=";color:#22c55e" i], html[data-ui="v2"] #section-dashboard [style*="; color:#22c55e" i], html[data-ui="v2"] #section-dashboard [style^="color:#22c55e" i]{color:var(--k-pos-ink)!important} html[data-ui="v2"] #section-dashboard [style*=";color:#d97706" i], html[data-ui="v2"] #section-dashboard [style*="; color:#d97706" i], html[data-ui="v2"] #section-dashboard [style^="color:#d97706" i], html[data-ui="v2"] #section-dashboard [style*=";color:#ea580c" i], html[data-ui="v2"] #section-dashboard [style*="; color:#ea580c" i], html[data-ui="v2"] #section-dashboard [style^="color:#ea580c" i], html[data-ui="v2"] #section-dashboard [style*=";color:#f59e0b" i], html[data-ui="v2"] #section-dashboard [style*="; color:#f59e0b" i], html[data-ui="v2"] #section-dashboard [style^="color:#f59e0b" i], html[data-ui="v2"] #section-dashboard [style*=";color:#ca8a04" i], html[data-ui="v2"] #section-dashboard [style*="; color:#ca8a04" i], html[data-ui="v2"] #section-dashboard [style^="color:#ca8a04" i]{color:var(--k-est-ink)!important} html[data-ui="v2"] #section-dashboard [style*=";color:#0891b2" i], html[data-ui="v2"] #section-dashboard [style*="; color:#0891b2" i], html[data-ui="v2"] #section-dashboard [style^="color:#0891b2" i], html[data-ui="v2"] #section-dashboard [style*=";color:#3b82f6" i], html[data-ui="v2"] #section-dashboard [style*="; color:#3b82f6" i], html[data-ui="v2"] #section-dashboard [style^="color:#3b82f6" i], html[data-ui="v2"] #section-dashboard [style*=";color:#0ea5e9" i], html[data-ui="v2"] #section-dashboard [style*="; color:#0ea5e9" i], html[data-ui="v2"] #section-dashboard [style^="color:#0ea5e9" i]{color:var(--cash)!important} html[data-ui="v2"] #section-dashboard [style*=";color:#ef4444" i], html[data-ui="v2"] #section-dashboard [style*="; color:#ef4444" i], html[data-ui="v2"] #section-dashboard [style^="color:#ef4444" i], html[data-ui="v2"] #section-dashboard [style*=";color:#f87171" i], html[data-ui="v2"] #section-dashboard [style*="; color:#f87171" i], html[data-ui="v2"] #section-dashboard [style^="color:#f87171" i]{color:var(--k-neg-ink)!important} /* ═════════════════════════════════════════════ 14 · FORMS · MODALS · EDITOR / DETAIL VIEWS · DRAWERS · TOASTS (PR-UI-3, 24/10/2026) ═════════════════════════════════════════════ Scope: every .modal-overlay (static + JS-built), #prEditView #advEditView (editors), #prDetailView #advDetailView (detail views, body is JS-built), #arAwbGroupView #arAgentGroupView (inherit §12 through the :is() lists above), the two .comm-drawer, .toast. Classic untouched: every selector starts with html[data-ui="v2"]. §12/§13 :is(#section-ar,…,#tpListView) lists were EXTENDED (not rewritten) with #prEditView,#advEditView,#prDetailView,#advDetailView. Inline-style attribute matches this section relies on (a template that changes one silently falls back to its legacy look, nothing breaks): notice boxes — `div[style*="background:#hex"]` for amber #fffbeb #fef3c7 #fefce8 #fff7ed #fef9ec · red #fef2f2 #fee2e2 · green #f0fdf4 #ecfdf5 #d1fae5 #dcfce7 · blue #eff6ff #dbeafe #f0f9ff #ecfeff #eef2ff #e0e7ff · purple #faf5ff #ede9fe · neutral #f8fafc #f1f5f9 inline-gradient headers `#modalCfAudit .modal-hdr`, `#modalArChase .modal-hdr` and the inline-styled close buttons (!important on the id) · inline-coloured buttons (#dcfce7 #fee2e2 #7f1d1d …) are beaten by `.btn{…!important}` primary action by INTENT: the legacy code uses .btn-danger for Gửi duyệt / Duyệt / Đã trả / Chi / Chốt (45 buttons); only onclick*="elete" / "everse" are destructive — see 14.5 New Lucide names for this pass are in the generated icon block of 12.0 (same generator, same vendored lucide 0.454). */ html[data-ui="v2"]{--f-shadow-lg:0 16px 40px rgba(15,32,68,.14)} /* 14.1 · legacy variables remapped inside the surfaces (safe-reskin rule: no markup edited) */ html[data-ui="v2"] :is(.modal-overlay,#prEditView,#advEditView,#prDetailView,#advDetailView,.comm-drawer){--red:var(--k-neg-ink);--green:var(--k-pos-ink);--blue:var(--f-navy);--navy:var(--f-ink);--muted:var(--f-ink3);--txt2:var(--f-ink2);--yellow:var(--k-est-ink);--orange:var(--k-est-ink);--warn:var(--k-est-ink);--amber:var(--k-est-ink)} /* 14.2 · modal shell */ html[data-ui="v2"] .modal-overlay{background:rgba(10,23,48,.55)} html[data-ui="v2"] .modal{background:var(--f-card);border-radius:14px;box-shadow:var(--f-shadow-lg);color:var(--f-ink2)} html[data-ui="v2"] .modal-hdr{padding:16px 18px;border-bottom:1px solid var(--f-line);background:var(--f-card)} html[data-ui="v2"] .modal-hdr h3{font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.3;letter-spacing:-.005em;color:var(--f-ink)} html[data-ui="v2"] .modal-hdr h3 .pv2-emo{width:18px;height:18px;color:var(--f-navy);vertical-align:-3px} html[data-ui="v2"] .modal-body{padding:18px} html[data-ui="v2"] .modal-ftr{padding:12px 18px;border-top:1px solid var(--f-line);background:var(--f-card);justify-content:flex-end;flex-wrap:wrap;gap:8px;position:sticky;bottom:0} /* the two inline-gradient headers (CfAudit orange, ArChase red) and the inline-styled footer of CfAudit/VatCtl */ html[data-ui="v2"] :is(#modalCfAudit,#modalArChase,#modalCfAuditResolve) .modal-hdr{background:var(--f-card)!important;color:var(--f-ink)!important} html[data-ui="v2"] :is(#modalCfAudit,#modalArChase,#modalCfAuditResolve) .modal-hdr :is(h3,#cfAuditFileChip){color:var(--f-ink)!important} html[data-ui="v2"] :is(#modalCfAudit,#modalVatCtl) .modal-ftr{background:var(--f-card)!important;border-top:1px solid var(--f-line)!important} /* 14.3 · close buttons: 32px ghost square, Lucide x (the «×» / «✕» text node is size 0) */ html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close){font-size:0!important;width:32px!important;height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--f-ink3)!important; display:inline-grid;place-items:center;flex:none;line-height:1;cursor:pointer;transition:background .12s,color .12s} html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close)::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--k-ico-x) center/contain no-repeat;mask:var(--k-ico-x) center/contain no-repeat} html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close):hover{background:var(--f-nav-100)!important;color:var(--f-ink)!important} html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close):focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close) .pv2-emo{display:none} /* 14.4 · fields (mock .field / .in) */ html[data-ui="v2"] .fg label{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--f-ink2);text-transform:none;letter-spacing:0;margin-bottom:6px} html[data-ui="v2"] .fg .sub-label{font-size:12px;font-weight:400;color:var(--f-ink3);margin-bottom:6px} html[data-ui="v2"] .fg :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select,textarea){ border:1px solid var(--f-line2);border-radius:10px;background:var(--f-card);color:var(--f-ink);font-family:var(--font-body);font-size:13.5px;line-height:1.3;padding:0 12px;transition:border-color .12s,box-shadow .12s} html[data-ui="v2"] .fg :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select){height:40px} html[data-ui="v2"] .fg select{padding-right:32px} html[data-ui="v2"] .fg textarea{min-height:76px;padding:10px 12px} html[data-ui="v2"] .fg :is(input,select,textarea)::placeholder{color:var(--f-ink4);opacity:1} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView) :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select,textarea):focus{outline:none;border-color:var(--f-gold);box-shadow:0 0 0 3px rgba(253,187,19,.45)} html[data-ui="v2"] .fg :is(input[readonly],input:disabled,select:disabled,textarea[readonly],textarea:disabled){background:var(--f-page);cursor:default} html[data-ui="v2"] .frow,html[data-ui="v2"] .frow-3{gap:14px 16px} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,.perm-check-grid) input:is([type=checkbox],[type=radio]){accent-color:var(--f-navy)} /* 14.5 · buttons inside the surfaces → navy outline; the ONE gold by INTENT; red outline = destructive only */ html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px!important;border-radius:var(--f-radius-sm)!important; background:var(--f-card)!important;color:var(--f-navy)!important;border:1px solid var(--f-line2)!important;font-family:var(--font-display);font-weight:800!important;font-size:12.5px!important;line-height:1;box-shadow:none!important;transition:background .12s,box-shadow .12s} html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn.btn-sm{height:28px;padding:0 10px!important;font-size:11.5px!important} html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn:hover{background:var(--f-nav-100)!important} html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn:focus-visible{outline:2px solid var(--f-gold);outline-offset:2px} html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn:disabled{cursor:not-allowed;color:var(--f-ink3)!important} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn .pv2-emo{margin-right:0} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn.btn-ghost{border-color:transparent!important;color:var(--f-ink2)!important;padding:0 8px!important} /* the ONE gold. (a) a real .btn-primary; (b) legacy .btn-danger used as the main action (not delete/reverse): in a modal that has no .btn-primary, in the editors' bar, first one in a detail action bar; (c) .btn-success footer main action; (d) #modalAP «Save Bill» */ html[data-ui="v2"] :is(.modal,#prEditView) .btn.btn-primary, html[data-ui="v2"] :is(#modalAP) .modal-ftr .btn.btn-danger, html[data-ui="v2"] :is(#prEditView,#advEditView) .fbar .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]), html[data-ui="v2"] :is(#prDetailActions,#advDetailActions) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]){background:var(--f-gold)!important;color:#0A1730!important;border-color:transparent!important} /* the :has() selectors sit in their OWN rules: one unsupported selector drops a whole rule, and the gold above must not depend on :has(). :is(.modal,#k): the dummy id keeps id-level specificity (the generic .btn rule has ids in its :is()) while matching modals ONLY — the editors' gold comes from the .fbar rule; a :has() gold there made the in-body «+ Thêm dòng …» buttons gold next to «Gửi duyệt» (R2 N1) */ html[data-ui="v2"] :is(.modal,#k):not(:has(.btn-primary)) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]){background:var(--f-gold)!important;color:#0A1730!important;border-color:transparent!important} html[data-ui="v2"] :is(.modal,#k):not(:has(.btn-primary,.btn-danger)) .modal-ftr .btn.btn-success{background:var(--f-gold)!important;color:#0A1730!important;border-color:transparent!important} html[data-ui="v2"] #modalPayment .modal-ftr .btn.btn-success:disabled{background:var(--f-gold100)!important;color:var(--f-ink3)!important;border-color:var(--f-line)!important;cursor:not-allowed} /* F4 (Fable C1): the gold footer rule above outranks the generic :disabled rule — a blocked «Ghi nhận» must look disabled; scoped to #modalPayment only */ html[data-ui="v2"] :is(.modal,#prEditView) .btn.btn-primary:hover, html[data-ui="v2"] :is(#modalAP) .modal-ftr .btn.btn-danger:hover, html[data-ui="v2"] :is(#prEditView,#advEditView) .fbar .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]):hover, html[data-ui="v2"] :is(#prDetailActions,#advDetailActions) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]):hover{background:var(--f-gold2)!important;box-shadow:0 6px 18px rgba(253,187,19,.34)!important} html[data-ui="v2"] :is(.modal,#k):not(:has(.btn-primary)) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]):hover{background:var(--f-gold2)!important;box-shadow:0 6px 18px rgba(253,187,19,.34)!important} html[data-ui="v2"] :is(.modal,#k):not(:has(.btn-primary,.btn-danger)) .modal-ftr .btn.btn-success:hover{background:var(--f-gold2)!important;box-shadow:0 6px 18px rgba(253,187,19,.34)!important} /* never two golds in one bar: a second main-action button after the first goes back to the navy outline */ html[data-ui="v2"] :is(#prDetailActions,#advDetailActions) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]) ~ .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]){background:var(--f-card)!important;color:var(--f-navy)!important;border-color:var(--f-line2)!important;box-shadow:none!important} html[data-ui="v2"] :is(.modal,#k):not(:has(.btn-primary)) .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]) ~ .btn.btn-danger:not([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]){background:var(--f-card)!important;color:var(--f-navy)!important;border-color:var(--f-line2)!important;box-shadow:none!important} /* a disabled main action stays recognisable but is not gold (no opacity: its label keeps ≥ 4.5:1) */ html[data-ui="v2"] :is(.modal,#prEditView,#advEditView) .btn:is(.btn-primary,.btn-danger,.btn-success):disabled{background:var(--f-gold100)!important;color:var(--f-ink2)!important;border-color:var(--f-line2)!important;box-shadow:none!important} /* editors: nothing but the submit bar is gold (the in-body «+ Thêm …» .btn-danger buttons are navy outline) */ html[data-ui="v2"] :is(#prEditView,#advEditView) :not(.fbar) .btn.btn-danger{background:var(--f-card)!important;color:var(--f-navy)!important;border-color:var(--f-line2)!important} /* red outline = destructive BY INTENT: (a) a .btn-danger whose handler is …Delete/…Reverse/…Remove/…Clear, (b) a pglDupDialog danger option (handler is a property, no onclick attribute), (c) any button whose inline style carries a legacy red (what live shows today; the rgb() forms are what the style attribute becomes once the page's own JS touches style.display). Every other legacy .btn-danger is navy outline here, or gold when it is the main action (below). :not(#k) lifts this above every gold / second-one-navy rule, whose chains are class-heavy; it comes last on purpose */ html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn:not(#k):is(.btn-danger:is([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]),.btn-danger[data-pgl-dup-i],[style*="#b91c1c"],[style*="#dc2626"],[style*="#991b1b"],[style*="#7f1d1d"],[style*="var(--red)"],[style*="rgb(127, 29, 29)"],[style*="rgb(185, 28, 28)"],[style*="rgb(153, 27, 27)"],[style*="rgb(220, 38, 38)"]){background:var(--f-card)!important;color:var(--k-neg-ink)!important;border-color:var(--k-neg-ink)!important;box-shadow:none!important} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn.btn-ghost:not(#k):is([style*="#b91c1c"],[style*="var(--red)"]):not([style*="border"]){border-color:transparent!important} html[data-ui="v2"] :is(.modal,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn:not(#k):is(.btn-danger:is([onclick*="elete"],[onclick*="everse"],[onclick*="emove"],[onclick*="lear"]),.btn-danger[data-pgl-dup-i],[style*="#b91c1c"],[style*="#dc2626"],[style*="#991b1b"],[style*="#7f1d1d"],[style*="var(--red)"],[style*="rgb(127, 29, 29)"],[style*="rgb(185, 28, 28)"],[style*="rgb(153, 27, 27)"],[style*="rgb(220, 38, 38)"]):hover{background:var(--neg-bg)!important} html[data-ui="v2"] :is(#prDetailActions,#advDetailActions){display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center} /* 14.6 · notice boxes inside the surfaces → alert row: white card, 3px left rule by tone, ink text (div only: pills / buttons / cells keep their own look) */ html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#fffbeb" i],[style*="background:#fef3c7" i],[style*="background:#fefce8" i],[style*="background:#fff7ed" i],[style*="background:#fef9ec" i],[style*="background: #fffbeb" i],[style*="background: #fef3c7" i]){ background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:3px solid var(--est)!important;border-radius:var(--f-radius-sm)!important} html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#fef2f2" i],[style*="background:#fee2e2" i],[style*="background: #fef2f2" i]){ background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:3px solid var(--neg)!important;border-radius:var(--f-radius-sm)!important} html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#f0fdf4" i],[style*="background:#ecfdf5" i],[style*="background:#d1fae5" i],[style*="background:#dcfce7" i]){ background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:3px solid var(--pos)!important;border-radius:var(--f-radius-sm)!important} html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#eff6ff" i],[style*="background:#dbeafe" i],[style*="background:#f0f9ff" i],[style*="background:#ecfeff" i],[style*="background:#eef2ff" i],[style*="background:#e0e7ff" i]){ background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:3px solid var(--cash)!important;border-radius:var(--f-radius-sm)!important} html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#faf5ff" i],[style*="background:#ede9fe" i]){ background:var(--f-card)!important;border:1px solid var(--f-line)!important;border-left:3px solid var(--ctl)!important;border-radius:var(--f-radius-sm)!important} html[data-ui="v2"] :is(.modal-body,#prEditView,#advEditView,#prDetailBody,#advDetailBody,.comm-drawer-body) div:is([style*="background:#f8fafc" i],[style*="background:#f1f5f9" i]){background:var(--f-page)!important} /* 14.7 · editor / detail views: body cards, table header, section titles */ html[data-ui="v2"] :is(#prEditView,#advEditView) .tcard,html[data-ui="v2"] :is(#prDetailView,#advDetailView) .tcard{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);overflow:hidden} html[data-ui="v2"] :is(#prDetailBody,#advDetailBody) .modal-body{padding:18px} html[data-ui="v2"] :is(#prEditView,#advEditView) :is(.card-h,.sec-h,h3){font-family:var(--font-display);font-weight:800;color:var(--f-ink)} /* 14.8 · drawers (.comm-drawer: commission history, selling-rate history) */ html[data-ui="v2"] .comm-drawer-overlay{background:rgba(10,23,48,.55)} html[data-ui="v2"] .comm-drawer{background:var(--f-card);box-shadow:var(--f-shadow-lg)} html[data-ui="v2"] .comm-drawer-hdr{background:var(--f-card);padding:16px 18px;border-bottom:1px solid var(--f-line)} html[data-ui="v2"] .comm-drawer-hdr h3{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--f-ink)} html[data-ui="v2"] .comm-drawer-hdr h3 .pv2-emo{width:18px;height:18px;color:var(--f-navy);vertical-align:-3px} html[data-ui="v2"] .comm-drawer-body{padding:14px 18px;font-size:12.5px;color:var(--f-ink2)} html[data-ui="v2"] .comm-drawer-row{background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius-sm)} html[data-ui="v2"] .comm-drawer-row.active-ver{background:var(--pos-bg);border-color:var(--pos-bd);border-left:3px solid var(--pos)} html[data-ui="v2"] .comm-drawer-row .v-label{color:var(--f-ink);font-weight:500} html[data-ui="v2"] .comm-drawer-row.active-ver .v-label::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;background:var(--k-pos-ink);-webkit-mask:var(--k-ico-check) center/contain no-repeat;mask:var(--k-ico-check) center/contain no-repeat} html[data-ui="v2"] .comm-drawer-row .v-dates{color:var(--f-ink3)} html[data-ui="v2"] .comm-drawer-row .v-actions button{border-radius:var(--f-radius-sm)} /* 14.9 · toasts: white card, ink text, 3px rule by tone (position / timing untouched; the sink is textContent ⇒ a toast emoji stays by design) */ html[data-ui="v2"] .toast{background:var(--f-card);color:var(--f-ink);border:1px solid var(--f-line);border-left:3px solid var(--f-navy);border-radius:var(--f-radius-sm);box-shadow:var(--f-shadow-lg);font-weight:500} html[data-ui="v2"] .toast.success{background:var(--f-card);color:var(--f-ink);border-left-color:var(--k-pos-ink)} html[data-ui="v2"] .toast.error{background:var(--f-card);color:var(--f-ink);border-left-color:var(--k-neg-ink)} html[data-ui="v2"] .toast.warning{background:var(--f-card);color:var(--f-ink);border-left-color:var(--k-est-ink)} html[data-ui="v2"] .toast.info{background:var(--f-card);color:var(--f-ink);border-left-color:var(--f-navy)} /* 14.12 · legacy inline TEXT colours that measure < 4.5:1 on white / tint inside modals, drawers, editors, detail views → the kit ink tokens (matched on `;color:#hex`, `; color:#hex` or a style attribute that STARTS with it: background-color / border-color never match) */ html[data-ui="v2"] :is(.modal-overlay,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) :is([style*=";color:#94a3b8" i],[style*="; color:#94a3b8" i],[style^="color:#94a3b8" i],[style*=";color:#9ca3af" i],[style*="; color:#9ca3af" i],[style^="color:#9ca3af" i],[style*=";color:#6b7280" i],[style*="; color:#6b7280" i],[style^="color:#6b7280" i],[style*=";color:#64748b" i],[style*="; color:#64748b" i],[style^="color:#64748b" i],[style*=";color:#a1a1aa" i],[style*="; color:#a1a1aa" i],[style^="color:#a1a1aa" i],[style*=";color:#999999" i],[style*="; color:#999999" i],[style^="color:#999999" i],[style*=";color:#999" i],[style*="; color:#999" i],[style^="color:#999" i],[style*=";color:#8a8a90" i],[style*="; color:#8a8a90" i],[style^="color:#8a8a90" i],[style*=";color:#aaa" i],[style*="; color:#aaa" i],[style^="color:#aaa" i],[style*=";color:#bbb" i],[style*="; color:#bbb" i],[style^="color:#bbb" i]){color:var(--f-ink3)!important} html[data-ui="v2"] :is(.modal-overlay,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) :is([style*=";color:#059669" i],[style*="; color:#059669" i],[style^="color:#059669" i],[style*=";color:#10b981" i],[style*="; color:#10b981" i],[style^="color:#10b981" i],[style*=";color:#16a34a" i],[style*="; color:#16a34a" i],[style^="color:#16a34a" i],[style*=";color:#22c55e" i],[style*="; color:#22c55e" i],[style^="color:#22c55e" i]){color:var(--k-pos-ink)!important} html[data-ui="v2"] :is(.modal-overlay,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) :is([style*=";color:#d97706" i],[style*="; color:#d97706" i],[style^="color:#d97706" i],[style*=";color:#ea580c" i],[style*="; color:#ea580c" i],[style^="color:#ea580c" i],[style*=";color:#f59e0b" i],[style*="; color:#f59e0b" i],[style^="color:#f59e0b" i],[style*=";color:#ca8a04" i],[style*="; color:#ca8a04" i],[style^="color:#ca8a04" i],[style*=";color:#b45309" i],[style*="; color:#b45309" i],[style^="color:#b45309" i]){color:var(--k-est-ink)!important} html[data-ui="v2"] :is(.modal-overlay,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) :is([style*=";color:#0891b2" i],[style*="; color:#0891b2" i],[style^="color:#0891b2" i],[style*=";color:#3b82f6" i],[style*="; color:#3b82f6" i],[style^="color:#3b82f6" i],[style*=";color:#0ea5e9" i],[style*="; color:#0ea5e9" i],[style^="color:#0ea5e9" i],[style*=";color:#6366f1" i],[style*="; color:#6366f1" i],[style^="color:#6366f1" i]){color:var(--cash)!important} html[data-ui="v2"] :is(.modal-overlay,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) :is([style*=";color:#ef4444" i],[style*="; color:#ef4444" i],[style^="color:#ef4444" i],[style*=";color:#f87171" i],[style*="; color:#f87171" i],[style^="color:#f87171" i]){color:var(--k-neg-ink)!important} /* 14.10 · compact density */ html[data-ui="v2"][data-density="compact"] .modal-body{padding:14px} html[data-ui="v2"][data-density="compact"] .modal-hdr{padding:12px 14px} html[data-ui="v2"][data-density="compact"] .modal-hdr h3,html[data-ui="v2"][data-density="compact"] .comm-drawer-hdr h3{font-size:15px} html[data-ui="v2"][data-density="compact"] .modal-ftr{padding:10px 14px} html[data-ui="v2"][data-density="compact"] .fg :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[type=button],[type=submit]),select){height:34px;font-size:13px} html[data-ui="v2"][data-density="compact"] .fg textarea{min-height:64px} html[data-ui="v2"][data-density="compact"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn{height:30px} html[data-ui="v2"][data-density="compact"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn.btn-sm{height:26px} html[data-ui="v2"][data-density="compact"] .comm-drawer-hdr{padding:12px 14px} html[data-ui="v2"][data-density="compact"] .comm-drawer-body{padding:10px 14px} /* 14.11 · narrow screens */ @media (max-width:508px){ html[data-ui="v2"] .modal{width:96%;max-height:94vh} html[data-ui="v2"] .modal-ftr .btn{flex:1 1 auto} html[data-ui="v2"] .frow-3{grid-template-columns:1fr} html[data-ui="v2"] .modal-body{padding:14px} } @media (prefers-reduced-motion:reduce){ html[data-ui="v2"] :is(.modal-close,.comm-drawer-hdr .drawer-close),html[data-ui="v2"] .fg :is(input,select,textarea),html[data-ui="v2"] :is(.modal,.comm-drawer,#prEditView,#advEditView,#prDetailView,#advDetailView) .btn{transition:none} } /* ───────── 15 · ar_reminder (27/10/2026): tab «Nhắc Nợ». Everything else comes from the section-scoped lists above (#section-ar_reminder was added to them, and #section-collections with it). Only what the kit did not have: two glyphs (lucide megaphone / pause) and three small layout rules. Every selector is prefixed html[data-ui="v2"] #section-ar_reminder. ───────── */ html[data-ui="v2"] #section-ar_reminder{--k-ico-megaphone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");--k-ico-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E")} html[data-ui="v2"] #section-ar_reminder .pv2-emo[data-ico="megaphone"]{-webkit-mask-image:var(--k-ico-megaphone);mask-image:var(--k-ico-megaphone)} html[data-ui="v2"] #section-ar_reminder .pv2-emo[data-ico="pause"]{-webkit-mask-image:var(--k-ico-pause);mask-image:var(--k-ico-pause)} html[data-ui="v2"] #section-ar_reminder .nn-seg{margin:0;flex-wrap:nowrap} html[data-ui="v2"] #section-ar_reminder .sub{font-size:11px;color:var(--muted);margin-top:2px;min-height:14px} html[data-ui="v2"] #section-ar_reminder .fg{margin:0} html[data-ui="v2"] #section-ar_reminder .tbl td.nn-name{overflow-wrap:anywhere;white-space:normal} html[data-ui="v2"] #section-ar_reminder .nn-tiles-count{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px} html[data-ui="v2"] #section-ar_reminder .nn-tiles-money{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:12px} html[data-ui="v2"] #section-ar_reminder .tbl :is(td,th){padding-left:6px;padding-right:6px} html[data-ui="v2"] #section-ar_reminder .tbl th{letter-spacing:.04em} html[data-ui="v2"] #section-ar_reminder .tbl{font-size:12px} html[data-ui="v2"] #section-ar_reminder .tbl th{font-size:10px} html[data-ui="v2"] #section-ar_reminder .tbl td.nn-rep{max-width:80px;overflow-wrap:anywhere;white-space:normal} html[data-ui="v2"] #section-ar_reminder .nn-by{margin:2px 0 0;min-height:0} html[data-ui="v2"] #section-ar_reminder .tbl th:first-child,html[data-ui="v2"] #section-ar_reminder .tbl td:first-child{width:30px;padding-left:6px;padding-right:2px} html[data-ui="v2"] #section-ar_reminder .tbl td.nn-age{white-space:nowrap} html[data-ui="v2"] #section-ar_reminder .nn-age :is(.badge-status,.badge-unpaid){white-space:nowrap;line-height:1.2;font-size:10px;padding:2px 8px;text-align:left;border-radius:8px;text-transform:none;letter-spacing:0} html[data-ui="v2"] #section-ar_reminder .nn-name .badge-status{display:block;width:fit-content;margin:3px 0 0;white-space:normal;line-height:1.2;font-size:10px;padding:2px 8px;border-radius:8px;text-transform:none;letter-spacing:0} html[data-ui="v2"] #section-ar_reminder .tbl td.nn-note-cell{width:176px;max-width:190px} html[data-ui="v2"] #section-ar_reminder .nn-note{min-width:130px} html[data-ui="v2"] #section-ar_reminder .nn-hint{white-space:normal;overflow-wrap:anywhere;max-width:176px} html[data-ui="v2"] #section-ar_reminder .nn-seg{gap:3px} html[data-ui="v2"] #section-ar_reminder .nn-seg-btn{flex-direction:column;justify-content:center;white-space:normal;line-height:1.15;text-align:center;height:auto;min-width:60px;padding:4px 5px;gap:2px;font-size:10.5px} html[data-ui="v2"] #section-ar_reminder .tbl td.nn-name{max-width:170px} /* ═════════════════════════════════════════════ 16 · SHELL CHROME + SMALL TABS (PR-UI-6a, 29/10/2026) ═════════════════════════════════════════════ Scope: the chrome that shows on EVERY tab (month chip, period caption, bell/logout/period glyph wrappers) and the eight small tabs fixed_costs · canhdoi · boithuong · pnl_close · commission · export · settings · shared_config. Classic untouched: every selector starts with html[data-ui="v2"]. Colour fixes are VARIABLE remaps where the legacy markup already says `var(--muted)` (safe-reskin rule) and anchored inline-hex attribute matches elsewhere: inline-hex attribute matches this section relies on (a template that changes one silently falls back to its legacy look, nothing breaks): `color:#94a3b8` (fixed_costs caption, #pnlc-checklist, #pnlc-history and its JS-built rows) · canhdoi + fixed_costs `color:#64748b` (no-data row, «/tháng» captions) · shared_config h4 `color:#059669 #0284c7 #0d9488 #d97706` · `#ccUploadBtn` / `#creditSaveBtn` inline backgrounds (!important on the id). Emoji wrappers () that sit next to a Lucide twin the shell already draws are HIDDEN here, never doubled: `.pv2-ico + .pv2-emo`, `.dash-acc-title>.pv2-emo` (title is font-size:0 + children 14px, UI-1), and the three shell glyphs PR-UI-0 turned into CSS masks (`.user-chip-logout`, `.hdr-bell`, the period caption). Wrapper sizes where the legacy glyph was larger than 14px: export card icon, empty-state icon, reports nudge, as-of ribbon. */ html[data-ui="v2"] :is(.pv2-ico + .pv2-emo,.dash-acc-title>.pv2-emo,.user-chip-logout>.pv2-emo,.hdr-bell>.pv2-emo,.hdr-period>span:first-child>.pv2-emo){display:none} html[data-ui="v2"] :is(#section-export .icon,.empty .icon) .pv2-emo{width:28px;height:28px;margin-right:0} html[data-ui="v2"] #reportsNudgeIcon .pv2-emo{width:20px;height:20px;margin-right:0} html[data-ui="v2"] #pglAsOfRibbon>span:first-child .pv2-emo{width:16px;height:16px;margin-right:0} /* chrome colours: month chip #D2870A on #FFF6E0 2.71 → amber-as-text; period caption + as-of label #8A8A90 3.43 → ink3 (the shell sets them with !important, so the id chain here is one class longer) */ html[data-ui="v2"] .pv2-env{color:#8A5000} html[data-ui="v2"] #pglTopV2 .hdr-period>span:first-child>span{color:var(--f-ink3)} html[data-ui="v2"] #pglTopV2 .hdr-period #pglPeriodLabel,html[data-ui="v2"] #pglTopV2 .hdr-period #pglBookAge{color:var(--f-ink3)!important} /* small tabs: legacy `var(--muted)` is #8A8A90 (3.15–3.43:1 on the page / card greys) */ html[data-ui="v2"] :is(#section-fixed_costs,#section-canhdoi,#section-boithuong,#section-pnl_close,#section-commission,#section-export,#section-settings,#section-shared_config){--muted:var(--f-ink3)} html[data-ui="v2"] :is(#section-fixed_costs,#section-pnl_close) :is([style^="color:#94a3b8"],[style*=";color:#94a3b8"],[style*=" color:#94a3b8"]){color:var(--f-ink3)!important} /* shared_config: four coloured section titles (3.2–4.1:1 on white) → the nearest AA step of the same hue; the two inline-coloured action buttons → the navy button (this tab then has no gold surface) */ html[data-ui="v2"] #section-shared_config h4:is([style^="color:#059669"],[style*=";color:#059669"]){color:#0B6B33!important} html[data-ui="v2"] #section-shared_config h4:is([style^="color:#0284c7"],[style*=";color:#0284c7"]){color:#0369A1!important} html[data-ui="v2"] #section-shared_config h4:is([style^="color:#0d9488"],[style*=";color:#0d9488"]){color:#0F6B63!important} html[data-ui="v2"] #section-shared_config h4:is([style^="color:#d97706"],[style*=";color:#d97706"]){color:#8A5000!important} html[data-ui="v2"] #section-shared_config :is(#ccUploadBtn,#creditSaveBtn){background:var(--f-navy)!important;border-color:var(--f-navy)!important;color:#fff!important} html[data-ui="v2"] #section-shared_config :is(#ccUploadBtn,#creditSaveBtn):disabled{background:#D9DBE1!important;border-color:#D9DBE1!important;color:#4A4A50!important;opacity:1} html[data-ui="v2"] :is(#section-canhdoi,#section-fixed_costs) :is([style^="color:#64748b"],[style*=";color:#64748b"],[style*=" color:#64748b"]){color:var(--f-ink3)!important} /* 16.b · Fable look R1 (29/10/2026), conditions C1–C5 + N1 — all measured on real rows */ /* C1 shared_config «Bảng Giá Vốn NCC»: superseded rows are dimmed with opacity:.55 (130 text nodes at 3.06) and the OLD badge is 9px #475569 on #E2E8F0 (2.39): keep the "old" look with a tint, raise the ink */ html[data-ui="v2"] #ccTableBody tr[style*="opacity:.55"]{opacity:1!important;color:var(--f-ink3);background:var(--f-page)} html[data-ui="v2"] #ccTableBody span[style*="background:#e2e8f0"]{color:#3B3B3F!important} /* C3 commission «Đối chiếu» chip .cmd-tie.na (#64748B on #F1F5F9 = 4.34; the rule lives in _shared/pgl_commission_report.js, shared with dashboard/) */ html[data-ui="v2"] #section-commission .cmd-tie.na{color:var(--f-ink3)} /* C4 dashboard «ước tính» chip: #A66805 on #FFF2DA at 10.5px = 4.12 → amber-as-text */ html[data-ui="v2"] #section-dashboard .chip-est{color:#8A5000} /* C5 bell count: white on #E0393E at 10px = 4.35 on every tab → #B42328 (6.54) */ html[data-ui="v2"] #pglTopV2 .hdr-bell-count{background:#B42328} /* N1 «Nạp lại» while the checklist loads: opacity .3 = 2:1 → the standard disabled look */ html[data-ui="v2"] #pnlc-btn-reload:disabled{opacity:1!important;background:#D9DBE1!important;border-color:#D9DBE1!important;color:#4A4A50!important} /* the button carries an inline background:#fff;border:… (L4897) — Opus R3-1 / Fable N1b */ /* 16.c · Fable look R2 (29/10/2026) C7 + N2: the landing view (Tổng Quan) shows the collect banner */ html[data-ui="v2"] #arCollectBanner>span .pv2-emo{width:22px;height:22px;margin-right:0} /* the legacy 22 px 📞 (was a bare emoji on the landing view) */ html[data-ui="v2"] :is(#arCollectBanner,#reportsNudgeBanner) button[onclick^="dismiss"]{opacity:1!important} /* ✕ #7F1D1D / #7C2D12 at opacity .6 = 3.61:1 */ html[data-ui="v2"] .btn :is(.t-vi,.t-en)>.pv2-emo[data-ico="arrow-up-right"]{margin-right:0;margin-left:3px} /* trailing glyph («Mở Tách HĐ ↗») */ /* ═════════════════════════════════════════════ 17 · GIAO DỊCH (PR-UI-6b, 29/10/2026) ═════════════════════════════════════════════ Scope: #section-giaodich (bank transactions: KPI strip, register rows, opening balances, VAT door, bank-reconciliation door, cash book). Classic untouched: every selector starts with html[data-ui="v2"]. Measured on the REAL signed-in tab (admin, 562 rows, 50 on the page): 373 text nodes < AA in 33 groups. Fixes are variable remaps (safe-reskin: the legacy rules/templates say var(--muted|--red|--green|--yellow)) + the few hard-coded classes: --muted #8A8A90 (3.15–3.43) → ink3 · --red #D6353A on the #FCEBDD row tint (4.08) → --k-neg-ink · --green #0E7F3F on the tint (4.41) → #0B6B33 · --yellow #A66805 on #F8EFD9 (3.99) → --k-est-ink .attn-amber counter white on #D97706 (3.19) → #8A5000 (this tab then has no gold surface: the counter is a count, not the action) · .pg-btn:disabled (#8A8A90 on #F1F5F9, 3.13) · inline `color:#94a3b8` («— đã đóng», 2.56) */ html[data-ui="v2"] #section-giaodich{--muted:var(--f-ink3);--red:var(--k-neg-ink);--green:#0B6B33;--yellow:var(--k-est-ink)} html[data-ui="v2"] #section-giaodich .attn-amber .attn-cnt{background:#8A5000} html[data-ui="v2"] #section-giaodich .pgl-pager .pg-btn:disabled{color:var(--f-ink3)} html[data-ui="v2"] #section-giaodich :is([style^="color:#94a3b8"],[style*=";color:#94a3b8"],[style*=" color:#94a3b8"]){color:var(--f-ink3)!important} /* 17.b · Fable look R1 (29/10/2026) C2 + Opus R3 C4: inline colours of the bank-reconciliation DETAIL (renderGdRecDetail writes into #gdRecDoorDetail, a sibling
of the matrix table — NOT #gdRecDoorBody; the two background rules are plain substring matches) — «✓ Đã sửa» white on #10b981 2.54, «👁 Đã xem» white on #0ea5e9 2.77, credit amounts #059669 bold 3.77, «mốc = sao kê» #64748b on #F1F5F9 4.34 */ html[data-ui="v2"] #gdRecDoorDetail [style*="background:#10b981"]{background:#0B6B33!important} html[data-ui="v2"] #gdRecDoorDetail [style*="background:#0ea5e9"]{background:#0369A1!important} html[data-ui="v2"] #gdRecDoorDetail :is([style^="color:#059669"],[style*=";color:#059669"],[style*=" color:#059669"]){color:#0B6B33!important} html[data-ui="v2"] #gdRecDoorDetail :is([style^="color:#64748b"],[style*=";color:#64748b"],[style*=" color:#64748b"]){color:var(--f-ink3)!important} /* ═════════════════════════════════════════════ 18 · AGING · CASHFLOW · ADMIN · AP leftovers (PR-UI-6c, 29/10/2026) ═════════════════════════════════════════════ Measured on the REAL signed-in tabs (admin, real DB) — text nodes < AA: aging 630 (7,408 nodes), cashflow 290 (685), ap 226 (1,603), admin 290 (600), collections 0. Classic untouched: every selector starts with html[data-ui="v2"]. Variable remaps (the legacy templates say var(--muted|--red|--orange)): --muted #8A8A90 → ink3 · --orange #D2870A (aging «88d» numbers, 2.91:1 ×203) → --k-est-ink · --red #D6353A on the tint (badge-unpaid 4.22 ×132) → --k-neg-ink. Inline-hex attribute matches this section relies on: aging dunning tiers `background:#d97706 #ea580c` (white 3.19 / 3.56) and `color:#d97706 #ea580c`; admin `color:#059669 #94a3b8`. Dimmed rows (opacity .55–.65 ⇒ 1.8–3.1:1): v2 keeps the "dimmed" meaning with a tint + grey ink instead of opacity (5b method): cashflow zero cells and disabled bills, admin disabled users, AP disputed groups. */ html[data-ui="v2"] #section-aging{--muted:var(--f-ink3);--orange:var(--k-est-ink);--red:var(--k-neg-ink)} html[data-ui="v2"] #section-aging [style*="background:#d97706"]{background:#8A5000!important} html[data-ui="v2"] #section-aging [style*="background:#ea580c"]{background:#C2410C!important} html[data-ui="v2"] #section-aging :is([style^="color:#d97706"],[style*=";color:#d97706"],[style*=" color:#d97706"]){color:#8A5000!important} html[data-ui="v2"] #section-aging :is([style^="color:#ea580c"],[style*=";color:#ea580c"],[style*=" color:#ea580c"]){color:#C2410C!important} html[data-ui="v2"] :is(#section-cashflow,#section-admin){--muted:var(--f-ink3)} html[data-ui="v2"] #section-cashflow :is(.cfw td.cfw-zero,.cfw-bills tr.cfw-bdis td){opacity:1;color:var(--f-ink3)} html[data-ui="v2"] #admin-users-body tr[style*="opacity:.55"]{opacity:1!important;background:var(--f-page)} html[data-ui="v2"] #section-admin :is([style^="color:#059669"],[style*=";color:#059669"],[style*=" color:#059669"]){color:#0B6B33!important} html[data-ui="v2"] #section-admin :is([style^="color:#94a3b8"],[style*=";color:#94a3b8"],[style*=" color:#94a3b8"]){color:var(--f-ink3)!important} html[data-ui="v2"] #apReconBody details.apr-grp[style*="opacity:.65"]{opacity:1!important;background:var(--f-page)} html[data-ui="v2"] #section-ap .btn-success{background:#0B6B33} /* 18.b · cashflow «Nhập dữ liệu vào Cashflow» card: an inline linear-gradient (no gradients in the system; the probe cannot see them and reads white-on-#F4F5F7) → flat navy; the two white-on-#10b981 / #f97316 import buttons (2.54 / 2.80) → darker steps of the same hues */ html[data-ui="v2"] #cashflowImportCard{background:var(--f-navy)!important} html[data-ui="v2"] #cashflowImportCard [style*="background:#10b981"]{background:#0B6B33!important} html[data-ui="v2"] #cashflowImportCard [style*="background:#f97316"]{background:#B03A09!important} /* 18.c · admin: the amber audit badge / staff-edit counters (#d97706: white-on-amber 3.19, amber text 3.19 ×26), and every DISABLED button of the tab (pager «‹ Trước» at opacity .4 = 1.29, «Xóa & Đồng Bộ» white-on-red at opacity .5 = 2.11) → the standard disabled look */ html[data-ui="v2"] #section-admin :is(#adminSubAuditBadge,[style*="background:#d97706"]){background:#8A5000!important} html[data-ui="v2"] #section-admin :is([style^="color:#d97706"],[style*=";color:#d97706"],[style*=" color:#d97706"]){color:#8A5000!important} html[data-ui="v2"] #section-admin :is(button,.btn):disabled{opacity:1!important;background:#D9DBE1!important;border-color:#D9DBE1!important;color:#4A4A50!important} /* 18.d · cashflow KPI captions «(Tháng này)» are printed at inline opacity .75 = 3.35:1 */ html[data-ui="v2"] :is(#cfPeriodTagIn,#cfPeriodTagOut){opacity:1!important} /* 18.e · Fable look C1: the chase-list modal opened from aging prints the same _dunBadge ladder (white on #d97706 = 3.19, on #ea580c = 3.56) */ html[data-ui="v2"] #modalArChase [style*="background:#d97706"]{background:#8A5000!important} html[data-ui="v2"] #modalArChase [style*="background:#ea580c"]{background:#C2410C!important} /* 18.f · C2: cash-fund audit history (zero cells #94a3b8 12 px, green #059669, amber #d97706, one #64748b) */ html[data-ui="v2"] :is(#cfAuditHistoryBody,#cfAuditStatusCard) :is([style^="color:#94a3b8"],[style*=";color:#94a3b8"],[style*=" color:#94a3b8"],[style^="color:#64748b"],[style*=";color:#64748b"],[style*=" color:#64748b"]){color:var(--f-ink3)!important} html[data-ui="v2"] :is(#cfAuditHistoryBody,#cfAuditStatusCard) :is([style^="color:#059669"],[style*=";color:#059669"],[style*=" color:#059669"]){color:#0B6B33!important} html[data-ui="v2"] :is(#cfAuditHistoryBody,#cfAuditStatusCard) :is([style^="color:#d97706"],[style*=";color:#d97706"],[style*=" color:#d97706"]){color:#8A5000!important} /* 18.g · C3: cashflow «Lịch sử» badges (green text on the green tint 3.6 / red text) and the white-on-#059669 «Verify» button (3.76) */ html[data-ui="v2"] #section-cashflow .badge-paid{color:#0B6B33} html[data-ui="v2"] #payHistBody button[style*="background:#059669"]{background:#0B6B33!important} html[data-ui="v2"] #section-cashflow .badge-unpaid{color:var(--k-neg-ink)} /* 18.h · N2: admin disabled-user rows keep ink3 like cashflow/AP */ html[data-ui="v2"] #admin-users-body tr[style*="opacity:.55"] td{color:var(--f-ink3)} /* 18.i · UI-6d → UI-6e: every .chip-neg site (base L926, leak chip, parcel/ghost chips, decision-queue count badge, #dashVatCard «N») is red #D6353A on the same solid #FCE7E7 tint = 4.0:1 at 10.5 px (probe 30/10, re-measured 6e at all 6 sites) ⇒ one unscoped rule, #B4262B 5.45:1 */ html[data-ui="v2"] .chip-neg{color:var(--k-neg-ink)}