/* pgl-shell-v2.css — PR-UI-0 (23/10/2026) Paramount shell components, direction A (copied from the approved mock's .frame/.dir-a, classes prefixed pv2-).
   Ships media="not all"; the head bootstrap in index.html flips it to "all" unless localStorage.pgl_ui_v2 === '0' (PR-UI-F: v2 is the default). Every rule is also guarded by html[data-ui="v2"] or an id that exists only in the v2 markup. */
html[data-ui="v2"]{scroll-padding-top:calc(var(--f-tb-h) + 8px)}
html[data-ui="v2"] body{font-family:var(--font-body);background:var(--f-page);color:var(--f-ink2);font-size:var(--f-fs)}
html[data-ui="v2"] #app-wrapper{margin-left:var(--f-sb-w);min-width:0}
html[data-ui="v2"] .main{padding:var(--f-pad)}
html[data-ui="v2"] .section.iframe-section{height:calc(100vh - var(--f-tb-h) - 48px)}
html[data-ui="v2"] .dash-subnav{top:var(--f-tb-h)}

/* --- sidebar (mock .sb / .ng / .ni) --- */
html[data-ui="v2"] #pglSideV2{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:var(--f-sb-w);z-index:40;background:var(--f-sb-bg);color:var(--f-sb-ink);border-right:1px solid var(--f-sb-line)}
.pv2-sb__logo{height:var(--f-tb-h);display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--f-sb-line);flex:none}
.pv2-sb__logo img{height:34px;width:auto;max-width:100%;object-fit:contain}
.pv2-sb__ws{display:flex;align-items:center;gap:10px;padding:12px 18px 6px;font-size:12px;color:var(--f-sb-ink);flex:none}
.pv2-sb__ws b{display:inline-flex;font-family:var(--font-display);font-weight:800;color:var(--f-sb-ink-strong);font-size:12px;letter-spacing:.02em}
.pv2-env{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--f-gold100);color:var(--f-gold3);margin-left:auto;white-space:nowrap}
#pglSideV2 nav{padding:6px 12px 12px;overflow:auto;flex:1}
.pv2-ng{margin-top:8px}
.pv2-ng[hidden]{display:none}
.pv2-ng__h{display:flex;align-items:center;gap:8px;width:100%;appearance:none;border:0;background:transparent;color:var(--f-sb-ink);font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 8px 4px;cursor:pointer;text-align:left}
.pv2-ng__h svg{margin-left:auto;opacity:.7;width:14px;height:14px;transition:transform .12s}
.pv2-ng[data-open="0"] .pv2-ni{display:none}
.pv2-ng[data-open="0"] .pv2-ng__h svg{transform:rotate(-90deg)}
.pv2-ni{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;border-radius:var(--f-radius-sm);color:var(--f-sb-ink);font-weight:500;font-size:13.5px;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.pv2-ni[hidden]{display:none}
.pv2-ni>span:not(.pv2-bd){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* a long label truncates instead of wrapping beside its badge */
.pv2-ni svg{width:18px;height:18px;flex:none}
.pv2-ni:hover{background:var(--f-sb-hover);color:var(--f-sb-ink-strong);text-decoration:none}
.pv2-ni[aria-current="page"]{background:var(--f-sb-active-bg);color:var(--f-sb-active-ink);font-family:var(--font-display);font-weight:700;font-size:13px}   /* Montserrat 700 is wider than Roboto 500 */
.pv2-ni .pv2-bd{flex:none;margin-left:auto;font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--f-sb-ink-strong)}
.pv2-ni .pv2-bd[hidden]{display:none}
.pv2-ni[aria-current="page"] .pv2-bd{background:rgba(10,23,48,.14);color:#0A1730}
.pv2-sb__foot{border-top:1px solid var(--f-sb-line);padding:10px 12px;display:flex;align-items:center;gap:6px;flex:none;position:relative}
.pv2-gear{width:34px;height:34px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--f-sb-ink);display:grid;place-items:center;cursor:pointer}
.pv2-gear:hover{background:var(--f-sb-hover);color:var(--f-sb-ink-strong)}
.pv2-gear svg{width:18px;height:18px}
#pglV2Opts{display:none;position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);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:6px;z-index:5}
#pglV2Opts.is-open{display:block}
#pglV2Opts .nav-opt{color:var(--f-ink2)}
#pglV2Opts .nav-opt:hover{background:var(--f-nav-100)}
/* moved legacy user chip (kept as the SAME node: ids + onclick intact) */
html[data-ui="v2"] #pglSideV2 .user-chip{flex:1;min-width:0;background:transparent;border:0;padding:4px 4px 4px 2px;color:var(--f-sb-ink-strong);gap:10px}
html[data-ui="v2"] #pglSideV2 .user-chip-avatar{width:30px;height:30px;background:var(--f-gold);color:#0A1730;font-family:var(--font-display);font-weight:800;font-size:11px;flex:none}
html[data-ui="v2"] #pglSideV2 .user-chip-meta{min-width:0}
html[data-ui="v2"] #pglSideV2 .user-chip-name{font-weight:500;font-size:13px;max-width:104px;color:var(--f-sb-ink-strong)}
html[data-ui="v2"] #pglSideV2 .user-chip-role{font-size:10px;color:var(--f-sb-ink)}
html[data-ui="v2"] #pglSideV2 .user-chip-logout{font-size:0;width:30px;height:30px;padding:0;margin-left:auto;flex:none;color:var(--f-sb-ink);display:grid;place-items:center}
html[data-ui="v2"] #pglSideV2 .user-chip-logout::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--pv2-ic-logout) center/contain no-repeat;mask:var(--pv2-ic-logout) center/contain no-repeat}
html[data-ui="v2"] #pglSideV2 .user-chip-logout:hover{background:rgba(224,57,62,.2);color:#fff}

/* --- topbar (mock .tb) --- */
html[data-ui="v2"] #pglTopV2{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;height:var(--f-tb-h);padding:0 var(--f-pad);background:var(--f-tb-bg);color:var(--f-tb-ink);border-bottom:1px solid var(--f-tb-line)}
.pv2-srch{position:relative;flex:1 1 220px;max-width:420px;min-width:120px;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:10px;background:var(--f-page);border:1px solid var(--f-line2);color:var(--f-ink3);font-size:13px}
.pv2-srch svg{width:16px;height:16px;flex:none}
.pv2-srch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;color:var(--f-ink);order:2}
.pv2-srch:focus-within{border-color:var(--f-gold);box-shadow:0 0 0 3px rgba(253,187,19,.45)}
.pv2-srch__ph{position:absolute;left:38px;right:56px;top:50%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.pv2-srch input:not(:placeholder-shown)~.pv2-srch__ph{display:none}
.pv2-srch kbd{order:3;margin-left:auto;font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid currentColor;opacity:.7}
.pv2-srch kbd::after{content:"Ctrl K"}
.pv2-srch.is-mac kbd::after{content:"\2318K"}
.pv2-tb__r{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.pv2-ib{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:none}
.pv2-ib:hover{background:var(--f-nav-100)}
.pv2-ib svg{width:18px;height:18px}
.pv2-ib.pv2-burger{display:none}
/* moved legacy nodes, restyled for the white topbar */
html[data-ui="v2"] #pglTopV2 .hdr-period{gap:6px!important;flex-wrap:nowrap;min-width:0}
html[data-ui="v2"] #pglTopV2 .hdr-period>span:first-child{font-size:0!important}
html[data-ui="v2"] #pglTopV2 .hdr-period>span:first-child>span{font-size:11px;font-family:var(--font-display);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--f-ink4)}
html[data-ui="v2"] #pglTopV2 .hdr-period select,html[data-ui="v2"] #pglTopV2 .hdr-period input,html[data-ui="v2"] #pglTopV2 #pglReloadBook{background:var(--f-card)!important;color:var(--f-ink2)!important;border:1px solid var(--f-line2)!important;border-radius:10px!important;height:34px;font-family:var(--font-body)!important;font-size:12.5px!important;padding:0 10px!important}
html[data-ui="v2"] #pglTopV2 #pglReloadBook:hover{background:var(--f-nav-100)!important}
html[data-ui="v2"] #pglTopV2 #pglPeriodLabel,html[data-ui="v2"] #pglTopV2 #pglBookAge{color:var(--f-ink4)!important;font-size:11px!important}
html[data-ui="v2"] #pglTopV2 #pglPeriodLabel:empty,html[data-ui="v2"] #pglTopV2 #pglBookAge:empty{display:none}
html[data-ui="v2"] #pglTopV2 #pglPeriodLabel{white-space:nowrap}
html[data-ui="v2"] #pglTopV2 .lang-toggle{margin:0;background:transparent;border:1px solid currentColor;border-radius:999px;font-family:var(--font-display)}
html[data-ui="v2"] #pglTopV2 .lang-toggle button{color:var(--f-ink3);font-weight:800;font-size:11px;padding:4px 9px}
html[data-ui="v2"] #pglTopV2 .lang-toggle button:hover{color:var(--f-ink)}
html[data-ui="v2"] #pglTopV2 .lang-toggle button.active{background:var(--f-tb-ink);color:var(--f-tb-bg)}
html[data-ui="v2"] #pglTopV2 .hdr-bell{background:transparent;border:0;color:var(--f-ink2);font-size:0;width:36px;height:36px;padding:0;justify-content:center;border-radius:10px}
html[data-ui="v2"] #pglTopV2 .hdr-bell:hover{background:var(--f-nav-100)}
html[data-ui="v2"] #pglTopV2 .hdr-bell::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--pv2-ic-bell) center/contain no-repeat;mask:var(--pv2-ic-bell) center/contain no-repeat}
html[data-ui="v2"] #pglTopV2 .hdr-bell-count{position:absolute;top:2px;right:0;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px;background:#E0393E;border:2px solid var(--f-tb-bg);box-sizing:content-box}
html[data-ui="v2"] #pglTopV2 .hdr-sync-badge{background:var(--f-warn-bg);border-color:var(--f-warn);color:var(--f-warn)}
html[data-ui="v2"] #pglTopV2 .hdr-sync-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--f-warn)}
:root{--pv2-ic-bell: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='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");--pv2-ic-logout: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 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")}

/* --- header KPI strip → Tổng quan (same .hdr-stat nodes, moved not re-rendered; mock .kpi tiles) --- */
html[data-ui="v2"] #pglV2Kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--f-gap);margin-bottom:var(--f-gap)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat{min-width:0;white-space:normal;background:var(--f-card);border:1px solid var(--f-line);border-radius:var(--f-radius);box-shadow:var(--f-sh);padding:16px 18px;overflow:visible}
html[data-ui="v2"] #pglV2Kpis .hdr-stat::before{display:none}
html[data-ui="v2"] #pglV2Kpis .hdr-stat#hdrStatAR{box-shadow:inset 0 3px 0 var(--f-gold),var(--f-sh)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat:hover{background:var(--f-card);border-color:var(--f-line2)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat>div:first-child{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;color:var(--f-ink4)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat{container-type:inline-size}
html[data-ui="v2"] #pglV2Kpis .hdr-stat .val{white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,10.4cqi,var(--f-kpi));letter-spacing:-.02em;line-height:1.15;margin-top:6px;color:var(--f-ink)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat .val.red{color:var(--f-bad)}
html[data-ui="v2"] #pglV2Kpis .hdr-stat .val.amber{color:var(--f-warn)}
html[data-ui="v2"] #pglV2Kpis .hdr-asof,html[data-ui="v2"] #pglV2Kpis .hdr-src{color:var(--f-warn)!important;font-size:11px;letter-spacing:0;line-height:1.35;white-space:normal}
html[data-ui="v2"] #pglV2Kpis .hdr-apside{color:var(--f-ink3);font-size:11.5px;white-space:normal;overflow-wrap:anywhere}
html[data-ui="v2"] #pglV2Kpis .hdr-apside .as-row>span:first-child{flex:1 1 0;min-width:0}
html[data-ui="v2"] #pglV2Kpis .hdr-apside .as-v{flex:none;white-space:nowrap}
html[data-ui="v2"] #pglV2Kpis .hdr-apside .as-note{color:var(--f-warn)}
html[data-ui="v2"] #pglV2Kpis .hdr-apside .as-warn{color:var(--f-bad)}
html[data-ui="v2"] #pglV2Kpis .hdr-src#hdrARbridge{max-width:none}

/* --- body KPI tiles (.kpi-grid > .kpi: Phải thu / Phải trả / ĐNTT …): keep figure + ₫ on one line. Each tile is a size container; the figure can only SHRINK (22px = the legacy size) and never below 15px; columns drop instead (see the grid rules below). --- */
html[data-ui="v2"] .kpi-grid>.kpi{container-type:inline-size}
html[data-ui="v2"] .kpi-grid .kpi-value{white-space:nowrap;font-size:clamp(15px,10.5cqi,22px)}
/* the figure keeps a 15px floor; narrow screens drop COLUMNS instead of shrinking it (1040px = a 1280 laptop at 125% zoom). !important: AR / ĐNTT set a fixed column count inline. */
html[data-ui="v2"] .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
html[data-ui="v2"] #section-ar .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}

/* --- login card (restyle only; no auth code touched) --- */
html[data-ui="v2"] #auth-overlay{background:var(--f-sb-bg)}
html[data-ui="v2"] .login-card{border-radius:20px;box-shadow:0 16px 40px rgba(10,23,48,.45);font-family:var(--font-body)}
html[data-ui="v2"] .login-card .logo-icon{background:var(--f-sb-bg);box-shadow:none;border-radius:16px}
html[data-ui="v2"] .login-card h2{font-family:var(--font-display);font-weight:800;color:var(--f-navy);letter-spacing:-.01em}
html[data-ui="v2"] .login-card .subtitle{color:var(--f-ink3);margin-bottom:6px}
html[data-ui="v2"] .pv2-login-tag{display:block;font-size:12px;color:var(--f-ink4);margin-bottom:20px;text-align:center}
html[data-ui="v2"] .login-card .form-group label{font-family:var(--font-display);font-weight:800;letter-spacing:.12em;color:var(--f-ink3)}
html[data-ui="v2"] .login-card .form-group input{border-radius:10px;border-color:var(--f-line2);background:var(--f-card);font-family:var(--font-body)}
html[data-ui="v2"] .login-card .form-group input:focus{border-color:var(--f-gold);box-shadow:0 0 0 3px rgba(253,187,19,.45)}
html[data-ui="v2"] .login-card .login-btn{background:var(--f-gold);color:#0A1730;font-family:var(--font-display);font-weight:800;border-radius:10px}
html[data-ui="v2"] .login-card .login-btn:hover{background:var(--f-gold2);box-shadow:0 6px 18px rgba(253,187,19,.34)}
html[data-ui="v2"] .login-card .login-btn:disabled{background:var(--f-gold);opacity:.6}
html[data-ui="v2"] .btn-gold{background:var(--f-gold);color:#0A1730;border-color:transparent}

/* --- ≤900px: sidebar becomes a drawer, burger appears (375px look) --- */
/* ≤1180px (a 1280 laptop at 110–125% zoom): moved KPI tiles 2-up, and the period range label + book age leave the topbar (they already go ≤900px) so it stays 64px high */
@media (max-width:1180px){
  html[data-ui="v2"] #pglV2Kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-ui="v2"] #pglTopV2 #pglPeriodLabel,html[data-ui="v2"] #pglTopV2 #pglBookAge{display:none}
}
@media (max-width:900px){
  html[data-ui="v2"] #app-wrapper{margin-left:0}
  html[data-ui="v2"] #pglSideV2{transform:translateX(-100%);transition:transform .2s;box-shadow:none}
  html[data-ui="v2"] #pglSideV2.is-open{transform:none;box-shadow:0 16px 40px rgba(10,23,48,.45)}
  html[data-ui="v2"] #pglV2Scrim.is-open{display:block;position:fixed;inset:0;z-index:35;background:var(--scrim)}
  html[data-ui="v2"] .pv2-ib.pv2-burger{display:grid}
  html[data-ui="v2"] #pglTopV2{padding:0 12px;gap:8px}
  html[data-ui="v2"] .pv2-srch{display:none}
  html[data-ui="v2"] .pv2-tb__r{margin-left:0;flex:1;justify-content:flex-end;overflow-x:auto}
  html[data-ui="v2"] #pglTopV2 .hdr-period>span:first-child,html[data-ui="v2"] #pglTopV2 #pglBookAge,html[data-ui="v2"] #pglTopV2 #pglPeriodLabel,html[data-ui="v2"] #pglTopV2 #pglReloadBook{display:none!important}
  html[data-ui="v2"] #pglTopV2 .hdr-period select{max-width:150px}
  html[data-ui="v2"] .pv2-tb__r{gap:6px;flex-wrap:nowrap}
  html[data-ui="v2"] #pglV2Kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-ui="v2"] .main{padding:12px}
}
@media (max-width:520px){html[data-ui="v2"] #pglV2Kpis{grid-template-columns:minmax(0,1fr)}html[data-ui="v2"] .pv2-help{display:none}html[data-ui="v2"] #pglTopV2 .hdr-period select{max-width:120px}}
@media (prefers-reduced-motion:reduce){html[data-ui="v2"] #pglSideV2{transition:none}}

/* --- chat bubble (chat_widget.js sets inline left:18px;bottom:18px, 52px round + «99+» badge): off the sidebar user foot, to the right of the sidebar. bottom unchanged;
   the IT help bubble is right:18px;bottom:18px, so the two never meet at >900px. ≤900px (drawer): back to the widget's own corner. --- */
html[data-ui="v2"] #__pglChatBtn{left:calc(var(--f-sb-w) + 16px)!important}
@media (max-width:900px){html[data-ui="v2"] #__pglChatBtn{left:18px!important}
  html[data-ui="v2"] body:has(#pglSideV2.is-open) #__pglChatBtn{display:none!important}}   /* drawer open: the bubble would sit on the drawer's user foot (review N4) */
/* UI-D D-0 · theme switch row inside the gear popover (new control, no colour change elsewhere) */
#pglV2Opts .nav-theme{cursor:default;flex-wrap:wrap}
#pglV2Opts .nav-theme:hover{background:transparent}
#pglV2Opts .theme-seg{margin-left:auto;display:inline-flex;border:1px solid var(--f-line2);border-radius:999px;overflow:hidden}
#pglV2Opts .theme-seg button{border:0;background:transparent;color:var(--f-ink2);font:inherit;font-size:11px;font-weight:600;padding:3px 9px;cursor:pointer}
#pglV2Opts .theme-seg button[aria-pressed="true"]{background:var(--f-nav-100);color:var(--f-ink);font-weight:800}
#pglV2Opts .theme-seg button:focus-visible{outline:2px solid var(--focus-ring,currentColor);outline-offset:-2px}