/* ===================== PP v2 (Project Planning beta) style layer =====================
   Reverse-engineered from staging.uprince.com/CU/COM-0001/project/P0037/project-planning-beta (16/09/2026):
   two-row filter/toolbar band (11px labels above 24px inputs), dense full-width grid (23px rows, 11.5px font,
   orange item links, status circle, Actions icon column), large popup (title lines, toolbar, tabs, numbered
   1.1/1.2 sections with edit pencils, Geschiedenis footer). Loaded after einstein.css. */
.pp{display:flex;flex-direction:column;flex:1;min-height:0;font-size:13px;min-width:0;background:#fff}
.pp-filters{display:flex;gap:8px;padding:6px 16px 8px 36px;align-items:flex-end;border-bottom:1px solid #d1d1d1;position:relative;background:#fafafa;flex-wrap:wrap}
.pp-filters .add{position:absolute;left:12px;bottom:12px;color:#424242;font-size:18px;line-height:1}
.pp-filters .f{display:flex;flex-direction:column;gap:2px;min-width:110px}
.pp-filters .f label{font-size:12px;color:#242424;font-weight:600}
.pp-filters .f label .cnt{display:inline-block;background:#323130;color:#fff;border-radius:8px;font-size:9px;padding:0 5px;margin-left:4px;line-height:13px}
.pp-filters .f .in{height:32px;font-size:13px;padding:0 8px;border:1px solid #d1d1d1;border-bottom-color:#616161;border-radius:4px;display:flex;align-items:center;color:#242424;background:#fff;white-space:nowrap;overflow:hidden}
.pp-filters .f .in.ph{color:var(--ein-ink-4)}
.pp-filters .f .in.dd:after{content:"\2304";margin-left:auto;color:var(--ein-ink-2);font-size:14px;line-height:0;padding-bottom:5px;padding-left:6px}
.pp-filters .f .in.search:before{content:"\2315";margin-right:6px;color:var(--ein-ink-2);font-size:13px}
.pp-filters .f .in.dt:before{content:"\25A6";margin-right:6px;color:var(--ein-ink-2);font-size:12px}
.pp-filters .f.w{min-width:150px}.pp-filters .f.xw{min-width:190px}
.pp-filters .clr{width:20px;height:32px;display:flex;align-items:center;color:#424242;font-size:14px}
.pp-tools{display:flex;gap:6px;align-items:center;padding:4px 16px 6px;border-bottom:1px solid #d1d1d1;white-space:nowrap;background:#fafafa}
.pp-tools .lbl{font-size:11px;color:var(--ein-ink);margin-right:2px}
.pp-tools .ib{width:28px;height:28px;border:1px solid transparent;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;color:var(--ein-ink);cursor:pointer;font-size:12px}
.pp-tools .ib svg{width:15px;height:15px;fill:currentColor}
.pp-tools .ib.on{background:#323130;color:#fff}
.pp-tools .sep{width:1px;height:16px;background:var(--ein-line-2);margin:0 4px}
.pp-tools .tb{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid #d1d1d1;border-radius:4px;background:#fff;font-size:12px;cursor:pointer}
.pp-tools .tb .ic{width:12px;height:12px;color:var(--ein-ink-2)}
.pp-tools .tb.dark{background:#323130;color:#fff;border-color:#323130}.pp-tools .tb.dark .ic{color:#fff}
.pp-tools .tb.ghost{border-color:transparent}
.pp-tools .seg{display:inline-flex;border:1px solid #e0e0e0;border-radius:999px;overflow:hidden;height:32px;background:#f0f0f0;padding:2px;gap:2px}
.pp-tools .seg span{padding:0 10px;display:inline-flex;align-items:center;font-size:12px;cursor:pointer;border-radius:999px;color:#424242}
.pp-tools .seg span.on{background:#323130;color:#fff;font-weight:600}
.pp-tools .build{font-size:9px;color:var(--ein-ink-3);margin-left:4px}
.pp-tools .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.pp-grid{flex:1;overflow:auto;min-height:0}
table.pg{width:100%;border-collapse:collapse;font-size:13px}
table.pg th{position:sticky;top:0;background:#f5f5f5;z-index:1;text-align:left;font-weight:600;font-size:12px;height:50px;padding:0 6px;border-bottom:1px solid #e0e0e0;white-space:nowrap;color:#242424}
table.pg th.num{text-align:right}
table.pg th .sort{font-size:10px;color:var(--ein-ink-3);margin-left:3px}
table.pg th + th{border-left:1px solid #d1d1d1}
table.pg td{height:40px;padding:0 6px;border-bottom:1px solid #e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px;vertical-align:middle;font-size:12px;color:#616161}
table.pg td + td{border-left:1px solid #f0f0f0}
table.pg td.name{color:#242424;font-size:13px}
table.pg td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
table.pg td.dim{color:var(--ein-ink-3);font-weight:400}
table.pg tbody tr:hover td{background:var(--ein-hover)}
table.pg tbody tr.sel td{background:rgba(0,120,212,.12)}
table.pg tr.l2 td.name{padding-left:34px}
table.pg tr.l2 td{background:var(--ein-bg-2)}
table.pg tr.l2:hover td{background:var(--ein-hover)}
table.pg .tw{display:inline-block;width:14px;font-size:10px;color:#616161;margin-right:4px;vertical-align:middle}
table.pg .sc{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--ein-ink-3);margin-right:6px;vertical-align:middle;background:#fff}
table.pg .sc.green{background:#7fba00;border-color:#7fba00}
table.pg .sc.amber{background:#ffb900;border-color:#ffb900}
table.pg .sc.red{background:#d13438;border-color:#d13438}
table.pg .sc.grey{background:#c8c6c4;border-color:#c8c6c4}
table.pg .sc.blue{background:#0078d4;border-color:#0078d4}
table.pg .ti{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:middle;color:var(--ein-ink-2)}
table.pg .ti svg{width:11px;height:11px;fill:currentColor}
table.pg a.item{color:#242424;font-weight:400}
table.pg .sub{display:block;font-size:10px;color:#999;line-height:13px}
table.pg .nm{display:inline-block;vertical-align:middle;line-height:16px}
table.pg a.item:hover{text-decoration:underline}
table.pg tr.l2 a.item{color:#424242}
table.pg .acts{display:inline-flex;gap:9px;align-items:center;color:var(--ein-ink-2)}
table.pg .acts span{width:24px;height:24px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ein-ink-2)}
table.pg .acts span svg{width:16px;height:16px;fill:currentColor}
table.pg .acts span:hover{background:#f5f5f5}
table.pg .acts span:hover{color:var(--ein-orange-text)}
table.pg .d2{line-height:15px;font-size:11px;text-align:center}
table.pg .d2 .b{color:var(--ein-red)}
table.pg .pillx{display:inline-block;padding:0 10px;border-radius:10px;font-size:11px;font-weight:500;line-height:20px}
table.pg .pillx.green{background:var(--ein-green-bg);color:var(--ein-green)}
table.pg .pillx.amber{background:var(--ein-amber-bg);color:var(--ein-amber)}
table.pg .pillx.grey{background:var(--ein-grey-bg);color:var(--ein-ink-2)}
table.pg .pillx.blue{background:var(--ein-blue-bg);color:#004578}
table.pg .pillx.red{background:var(--ein-red-bg);color:var(--ein-red)}
.pp-foot{border-top:1px solid var(--ein-line);padding:3px 10px;font-size:10.5px;color:var(--ein-ink-3);display:flex;gap:18px}

/* ---- popup (PbsReviewModal / PrDialog pattern) ---- */
.ppd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center}
.ppd-overlay.hidden{display:none}
.ppd{background:#fff;width:95vw;height:95vh;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;font-size:12px}
.ppd-title{padding:10px 14px 4px;display:flex;flex-direction:column;gap:6px;position:relative}
.ppd-title .t1{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.ppd-title .t1 .sc{width:10px;height:10px;border-radius:50%;border:1px solid var(--ein-ink-3);display:inline-block}
.ppd-title .t1 .sc.green{background:#7fba00;border-color:#7fba00}
.ppd-title .t1 .sc.amber{background:#ffb900;border-color:#ffb900}
.ppd-title .t1 .sc.grey{background:#c8c6c4;border-color:#c8c6c4}
.ppd-title .t1 .sc.blue{background:#0078d4;border-color:#0078d4}
.ppd-title .t2{font-size:12px;font-weight:400;color:#616161}
.ppd-title .x{position:absolute;right:14px;top:8px;font-size:16px;color:var(--ein-ink-2);cursor:pointer}
.ppd-title .x2{font-size:12px;color:var(--ein-ink-3);cursor:pointer;width:14px}
.ppd-bar{display:flex;gap:18px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--ein-line)}
.ppd-bar .cmd{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ein-ink);cursor:pointer}
.ppd-bar .cmd .ic{width:13px;height:13px;color:var(--ein-ink-2)}
.ppd-bar .cmd.disabled{color:var(--ein-ink-4)}.ppd-bar .cmd.disabled .ic{color:var(--ein-ink-4)}
.ppd-bar .cmd.primary{background:#323130;color:#fff;padding:3px 10px;border-radius:2px}.ppd-bar .cmd.primary .ic{color:#fff}
.ppd-bar .right{margin-left:auto;display:flex;gap:18px}
.ppd-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--ein-line)}
.ppd-tabs span{padding:8px 10px 6px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;color:var(--ein-ink)}
.ppd-tabs span.on{border-bottom-color:#323130;font-weight:600}
.ppd-tabs span .cnt{background:var(--ein-bg-3);border-radius:8px;padding:0 5px;font-size:10px;margin-left:5px;color:var(--ein-ink-2)}
.ppd-body{flex:1;overflow:auto;padding:12px 14px}
.ppd-tab{display:none}
.ppd-tab.on{display:block}
.ppd-sec{border:1px solid var(--ein-line);border-radius:2px;margin:0 0 12px;background:#fff}
.ppd-sec .h{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--ein-bg-2);border-bottom:1px solid var(--ein-line);font-size:11.5px;font-weight:600}
.ppd-sec .h .n{font-weight:400;color:var(--ein-ink-2);font-size:10.5px}
.ppd-sec .h .edit{margin-left:auto;color:var(--ein-ink-2);font-size:12px;cursor:pointer;display:inline-flex;gap:14px;font-weight:400}
.ppd-sec .h .edit a{color:var(--ein-ink);display:inline-flex;align-items:center;gap:4px}
.ppd-sec .h .edit a .ic{width:12px;height:12px;color:var(--ein-ink-2)}
.ppd-sec .b{padding:10px 8px}
.ppd .grid2,.ppd .grid3,.ppd .grid4{gap:10px 14px}
.ppd .field label{font-size:11px;font-weight:400}
.ppd .field .in{height:26px;font-size:11.5px;padding:0 6px;border-color:var(--ein-line-3)}
.ppd .field .in.ro{background:var(--ein-bg-3);border-color:var(--ein-line-2)}
.ppd .field .in .chip{font-size:11px}
.ppd .field .in .chip .av{width:18px;height:18px;font-size:9px}
.ppd .field .hint{font-size:10px}
.ppd .field .ta{font-size:11.5px;min-height:50px}
.ppd table.st{font-size:11.5px}
.ppd table.st th{padding:5px 6px;background:var(--ein-bg-2)}
.ppd table.st td{padding:5px 6px}
.ppd .msg{font-size:11.5px;padding:6px 10px}
.ppd .pill{font-size:10px;line-height:15px;padding:1px 6px}
.ppd .kpis{grid-template-columns:repeat(4,1fr);gap:8px}
.ppd .kpi .v{font-size:16px}.ppd .kpi .l,.ppd .kpi .s{font-size:10.5px}
.ppd .btn{height:26px;font-size:11.5px;padding:0 10px}
.ppd .btn.primary{background:#323130;border-color:#323130}
.ppd .toggle{font-size:11.5px}
.ppd-foot{border-top:1px solid var(--ein-line);background:var(--ein-bg-2);padding:8px 14px;font-size:10.5px}
.ppd-foot .hh{font-weight:600;font-size:11.5px;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ppd-foot .row{display:flex;gap:40px}
.ppd-foot .row span b{font-weight:600;margin-right:4px}
.ppd .sub-toolbar{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.ppd .sub-toolbar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.ppd .sub-toolbar .in{height:26px;font-size:11.5px;padding:0 6px;border:1px solid var(--ein-line-3);border-radius:2px;display:inline-flex;align-items:center;min-width:130px;background:#fff}
.ppd .sub-toolbar .in.dd:after{content:"\2304";margin-left:auto;padding-left:8px;color:var(--ein-ink-2)}
.ppd .link{color:#e8710a;font-weight:600;cursor:pointer}
.ppd .toggles{display:flex;gap:4px;margin-left:auto}
.ppd .toggles span{padding:2px 8px;border:1px solid var(--ein-line-3);border-radius:2px;font-size:11px;cursor:pointer}
.ppd .toggles span.on{background:#323130;color:#fff;border-color:#323130}

/* Harvey ball (tree/HarveyBall.tsx): 16px; pendingDevelopment #999 0 - inDevelopment #0078d4 .25 - inReview #f7a93b .5 - approved #107c10 .75 - handedOver #d13438 1 */
.hb{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:8px;vertical-align:middle;box-sizing:border-box}
.hb.p0{border:1.5px solid #999;background:#fff}
.hb.p25{border:1.5px solid #0078d4;background:conic-gradient(#0078d4 0 25%,#fff 25% 100%)}
.hb.p50{border:1.5px solid #f7a93b;background:conic-gradient(#f7a93b 0 50%,#fff 50% 100%)}
.hb.p75{border:1.5px solid #107c10;background:conic-gradient(#107c10 0 75%,#fff 75% 100%)}
.hb.p100{border:1.5px solid #d13438;background:#d13438}
/* timeline right of the grid (gantt/constants.ts colours) */
.pp-split{display:flex;flex:1;min-height:0}
.pp-split .pp-grid{flex:1 1 auto;min-width:0}
.pp-split .pp-grid + .tl{flex:0 0 38%}
.tl{flex:1;overflow:auto;position:relative;background:#fff}
.tl .hd{height:50px;display:flex;flex-direction:column;border-bottom:1px solid #e0e0e0;position:sticky;top:0;background:#fff;z-index:1}
.tl .hd .t{height:25px;font-size:12px;font-weight:600;display:flex;align-items:center;padding-left:8px;border-bottom:1px solid #e0e0e0}
.tl .hd .q{display:flex;height:25px}
.tl .hd .q span{flex:1;font-size:10px;display:flex;align-items:center;justify-content:center;border-left:1px solid #f0f0f0}
.tl .r{height:41px;border-bottom:1px solid #e0e0e0;position:relative}
.tl .r.l2{background:#fafafa}
.tl .bar{position:absolute;top:7px;height:26px;border-radius:3px;font-size:10px;color:#fff;display:flex;align-items:center;padding:0 6px;white-space:nowrap;overflow:hidden;background:#2b579a;border:1px solid #1e3f6f}
.tl .bar.parent{background:#B7950B;border-color:#9A7D09}
.tl .bar.child{background:#D68910;border-color:#B8740D}
.tl .bar.grey{background:#BDBDBD;border-color:#9e9e9e;color:#333}
.tl .bar.v{top:12px;height:16px;font-size:9px}
.tl .today{position:absolute;top:0;bottom:0;width:2px;background:#ff9800;z-index:0}
.tl .today:before{content:"";position:absolute;top:50px;left:-4px;width:10px;height:10px;border-radius:50%;background:#ff9800}
.tl .grid{position:absolute;inset:0;background-image:linear-gradient(to right,#f0f0f0 1px,transparent 1px);background-size:20% 100%;pointer-events:none}