/* Real P&L (2026-10-12) — assets/pnl.js. Satriya's confidential page: reads the v2 tokens from assets/lv2.css, controls use the shared --ctl-* classes, text the TYPE SCALE. KPI cards are lv2Kpi. Nothing here is a new control. */ #pnl-view .pnl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:4px 0 14px} #pnl-view .pnl-head__l{min-width:0} #pnl-view .pnl-eyebrow{font-size:13px;font-weight:600;color:var(--lv-muted);margin-bottom:2px} #pnl-view .pnl-lock{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#0F172A;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;margin-top:4px} #pnl-view .pnl-lock svg{width:13px;height:13px} #pnl-view .pnl-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0} #pnl-view .pnl-bar .ui-sel{max-width:170px} #pnl-view .pnl-q{width:200px} #pnl-view .pnl-sp{flex:1} :is(#pnl-view,#pnl-modal) .pnl-note{margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:600} :is(#pnl-view,#pnl-modal) .pnl-note--ok{background:#ECFDF5;color:#047857} :is(#pnl-view,#pnl-modal) .pnl-note--err{background:#FEF2F2;color:#B91C1C} :is(#pnl-view,#pnl-modal) .pnl-note--info{background:#EFF6FF;color:#1D4ED8} #pnl-view .pnl-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--lv-gap);margin-bottom:var(--lv-gap)} @media (max-width:1280px){ #pnl-view .pnl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:767px){ #pnl-view .pnl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } #pnl-view .pnl-msg{padding:22px 24px;font-size:12.5px;color:var(--lv-muted)} #pnl-view .pnl-rule{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px;padding:12px 16px;margin:0 0 var(--lv-gap);font-size:11.5px;color:var(--lv-body)} #pnl-view .pnl-rule b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lv-faint);margin-bottom:2px} #pnl-view .pnl-src{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:999px;vertical-align:middle;margin-left:4px} #pnl-view .pnl-src--mo{background:#E8F0FF;color:#1D4ED8} #pnl-view .pnl-src--index{background:#F1F5F9;color:#64748B} #pnl-view .pnl-tot td{font-weight:800;color:var(--lv-text);background:#F8FAFC;border-top:2px solid var(--lv-border)} /* The register is a form in a table: fixed columns, every input fills its cell at one height, numbers right-aligned under right-aligned heads, the computed figure in its own column so no row grows under an input. */ :is(#pnl-view,#pnl-modal) .pnl-reg{table-layout:fixed;width:100%;min-width:960px} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-team{width:19%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-role{width:21%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-name{width:18%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-heads{width:8%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-cost{width:13%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-share{width:9%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-month{width:12%} :is(#pnl-view,#pnl-modal) .pnl-reg col.c-del{width:36px} :is(#pnl-view,#pnl-modal) .pnl-reg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 20px 13px;flex-wrap:nowrap} :is(#pnl-view,#pnl-modal) .pnl-reg-head > div:first-child{min-width:0;flex:1 1 auto} :is(#pnl-view,#pnl-modal) .pnl-reg-head .pnl-acts{flex:0 0 auto;white-space:nowrap} :is(#pnl-view,#pnl-modal) .pnl-reg-head .pnl-from{width:150px} :is(#pnl-view,#pnl-modal) .pnl-reg th.r,:is(#pnl-view,#pnl-modal) .pnl-reg td.r{text-align:right} :is(#pnl-view,#pnl-modal) .pnl-reg td{vertical-align:middle;padding:7px 8px} :is(#pnl-view,#pnl-modal) .pnl-reg th{padding:8px 8px} :is(#pnl-view,#pnl-modal) .pnl-reg .pnl-th-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--lv-faint)} :is(#pnl-view,#pnl-modal) .pnl-reg .ui-inp{height:32px;font-size:12px;padding:0 9px;width:100%;box-sizing:border-box;min-width:0;display:block} :is(#pnl-view,#pnl-modal) .pnl-reg .ui-inp--n{text-align:right;font-variant-numeric:tabular-nums} :is(#pnl-view,#pnl-modal) .pnl-reg .pnl-pct{display:flex;align-items:center;gap:6px} :is(#pnl-view,#pnl-modal) .pnl-reg .pnl-pct span{font-size:11.5px;color:var(--lv-muted);font-weight:600} :is(#pnl-view,#pnl-modal) .pnl-reg td.r b{font-variant-numeric:tabular-nums;color:var(--lv-text)} :is(#pnl-view,#pnl-modal) .pnl-reg .pnl-del{border:0;background:none;color:var(--lv-faint);cursor:pointer;font-size:15px;line-height:1;padding:6px 8px;border-radius:6px} :is(#pnl-view,#pnl-modal) .pnl-reg .pnl-del:hover{color:#B91C1C;background:#FEF2F2} :is(#pnl-view,#pnl-modal) .pnl-reg tr.pnl-new td{background:#FFFBEB} :is(#pnl-view,#pnl-modal) .pnl-reg tr.pnl-tot td{font-weight:700} :is(#pnl-view,#pnl-modal) .pnl-unc{color:#B45309;font-weight:600} :is(#pnl-view,#pnl-modal) .pnl-neg{color:#DC2626} :is(#pnl-view,#pnl-modal) .pnl-pos{color:#059669} :is(#pnl-view,#pnl-modal) .pnl-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* The contracts table (his call, 2026-10-13): every column the same width, Project through Margin; Period → Margin centred; a long project name is cut with an ellipsis and the full name sits on the cell's title (hover). Fixed layout so the ten columns split the card evenly at any width. */ #pnl-view .pnl-tbl{table-layout:fixed;width:100%;min-width:1100px} #pnl-view .pnl-tbl th,#pnl-view .pnl-tbl td{width:calc((100% - 104px) / var(--pnl-n,14))} /* --pnl-n = the columns shown besides Status (hidden ones drop out) */ #pnl-view .pnl-tbl th.pnl-th-st{width:104px} #pnl-view .pnl-tbl th:not(.pnl-th-proj),#pnl-view .pnl-tbl td:not(.pnl-proj){text-align:center !important} #pnl-view .pnl-tbl td.pnl-proj{max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px} #pnl-view .pnl-tbl td.pnl-proj .pnl-pn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pnl-view .pnl-tbl td .tg-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* a larger minimum font (Safari setting) must not spill into the next column */ #pnl-view .pnl-tbl td.pnl-prod{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#475569;font-weight:600} #pnl-view .pnl-extra{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:999px;background:#FEF3C7;color:#B45309;vertical-align:middle;cursor:help} :is(#pnl-view,#pnl-modal) .pnl-reg-head .pnl-rate{width:64px} :is(#pnl-view,#pnl-modal) .pnl-regbtn{margin-left:auto} #pnl-view .pnl-bar .pnl-sp{display:none} #pnl-view .pnl-bar{width:100%} :is(#pnl-view,#pnl-modal) .pnl-regbtn{margin-left:auto} :is(#pnl-view,#pnl-modal) .pnl-sect{padding:16px 20px 10px;border-top:1px solid var(--lv-border-soft)} :is(#pnl-view,#pnl-modal) .pnl-sect .card-sub{margin-top:2px} :is(#pnl-view,#pnl-modal) .pnl-reg3 col.c-n{width:26%} :is(#pnl-view,#pnl-modal) .pnl-reg3 col.c-v{width:18%} :is(#pnl-view,#pnl-modal) .pnl-reg3 col.c-t{width:56%} :is(#pnl-view,#pnl-modal) .pnl-reg3 td:first-child{font-weight:700;color:var(--lv-text)} :is(#pnl-view,#pnl-modal) .pnl-reg3 td.pnl-reg-note{color:var(--lv-muted);font-size:11.5px;white-space:normal} :is(#pnl-view,#pnl-modal) .pnl-reg3 .ui-inp{width:100%} /* The register tables line up with their titles: the first column starts at the card's 20px, the last ends at it (the card-header and .pnl-sect pad). */ :is(#pnl-view,#pnl-modal) .pnl-reg th:first-child,:is(#pnl-view,#pnl-modal) .pnl-reg td:first-child{padding-left:20px} :is(#pnl-view,#pnl-modal) .pnl-reg th:last-child,:is(#pnl-view,#pnl-modal) .pnl-reg td:last-child{padding-right:20px} :is(#pnl-view,#pnl-modal) .pnl-sect{padding:16px 20px 18px} :is(#pnl-view,#pnl-modal) .pnl-rates-grid{display:grid;gap:12px 14px;margin-top:12px} :is(#pnl-view,#pnl-modal) .pnl-rate-f{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--lv-faint);cursor:help} :is(#pnl-view,#pnl-modal) .pnl-rate-f > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#pnl-view,#pnl-modal) .pnl-rate-f .ui-inp{width:100%;height:34px;font-size:12.5px;text-align:right} :is(#pnl-view,#pnl-modal) .pnl-rate-f .pnl-pct{display:flex;align-items:center;gap:6px;min-width:0} :is(#pnl-view,#pnl-modal) .pnl-rate-f .pnl-pct .ui-inp{flex:1 1 auto} :is(#pnl-view,#pnl-modal) .pnl-rate-f .pnl-pct span{font-size:11.5px;color:var(--lv-muted);font-weight:600;text-transform:none} /* the register popup: the card loses its own surface inside the dialog */ /* a dialog sized to its content: 1240px wide at most, never taller than the viewport minus a margin, its body scrolling inside (his call: the full-screen frame was far too big for three short blocks) */ .pnl-dlg{width:min(1240px, 94vw);max-width:none;height:auto;max-height:90vh;border-radius:18px} .pnl-dlg .modal-body{padding:0 0 8px} .pnl-dlg #pnl-register{box-shadow:none;border:0;border-radius:0;margin:0 !important} #pnl-modal .pnl-reg-head{padding-top:4px} #pnl-view .pnl-regbtn{margin-left:auto;display:inline-flex;align-items:center} #pnl-view .pnl-regbtn .pnl-lock{margin-top:0} /* inside Business Status the P&L takes the tab's own edges — no page padding */ #perf-pnl #pnl-view .page{padding:0;margin:0;max-width:none} /* The toolbar sits on the canvas, no card (his call, 2026-10-13 — Calibrations' pattern): every control the tab strip's 40px / radius 12, 14px to the KPIs. */ #pnl-view .pnl-bar--flat{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 var(--lv-gap)} #pnl-view .pnl-bar--flat .ui-sel,#pnl-view .pnl-bar--flat .ui-inp,#pnl-view .pnl-bar--flat .ui-btn{height:40px;border-radius:12px} #pnl-view .pnl-bar--flat .ui-ctl-lbl{margin-right:-2px} #pnl-view .pnl-note{margin:0 0 var(--lv-gap)} #pnl-view .pnl-bar--flat{--ctl-h:40px;--ctl-radius:12px} /* the contracts table reads at one size (his call, 2026-10-13): head, rows and Total all 12px — the head no longer smaller than what it labels */ #pnl-view .pnl-tbl{font-size:12px} #pnl-view .pnl-tbl thead th{font-size:12px !important;letter-spacing:.2px} #pnl-view .pnl-tbl tbody td,#pnl-view .pnl-tbl tbody td:first-child{font-size:12px} #pnl-view .pnl-tbl tr.pnl-tot td{font-size:12px} #pnl-view .pnl-tbl td .tg-sub{font-size:10.5px} #pnl-view .pnl-tblhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 20px 13px} #pnl-view .pnl-plseg{flex:0 0 auto} #pnl-view .pnl-plseg__n{font-size:10.5px;font-weight:700;color:var(--lv-faint);margin-left:4px} #pnl-view .pnl-plseg button.on .pnl-plseg__n{color:inherit;opacity:.75} /* head and Total are one pair of bands (his note, 2026-10-13): same size, weight, height and background; the Total label in the head's caps */ #pnl-view .pnl-tbl thead th,#pnl-view .pnl-tbl tr.pnl-tot td{font-size:12px !important;font-weight:700 !important;padding-top:9px !important;padding-bottom:9px !important;background:#F8FAFC !important;line-height:16px} #pnl-view .pnl-tbl thead th{letter-spacing:.3px} #pnl-view .pnl-tbl tr.pnl-tot td.pnl-proj{text-transform:uppercase;letter-spacing:.3px;color:var(--lv-muted)} /* Status column: the shared grid styles the first column as the identity column — undone here, the project column carries that now */ #pnl-view .pnl-tbl td.pnl-st{font-weight:500;max-width:none;overflow:visible;padding-left:12px;padding-right:8px} #pnl-view .pnl-tbl th.pnl-th-st{padding-left:12px} #pnl-view .pnl-status{-webkit-appearance:none;appearance:none;height:30px;width:100%;max-width:84px;padding:0 10px;border:1px solid #E2E8F3;border-radius:10px;background:#F8FAFC; font:inherit;font-size:12px;font-weight:700;color:#0F172A;text-align:center;text-align-last:center;cursor:pointer;transition:background .15s,border-color .15s} #pnl-view .pnl-status:hover{border-color:#CBD5E1} #pnl-view .pnl-status:focus{outline:none;border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.13)} #pnl-view .pnl-status:not(.pnl-status--keep):not(.pnl-status--stop):not(.pnl-status--organic){color:#94A3B8;font-weight:600} #pnl-view .pnl-status--keep{background:#ECFDF5;border-color:#A7F3D0;color:#047857} #pnl-view .pnl-status--stop{background:#FEF2F2;border-color:#FECACA;color:#B91C1C} #pnl-view .pnl-status--organic{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8} /* the Total row stays at the bottom of the screen while the rows scroll (his ask) */ #pnl-view .pnl-tbl tr.pnl-tot td{position:sticky;bottom:0;z-index:3;box-shadow:inset 0 1px 0 #E2E8F3} /* the row takes its status's colour (his call): Keep as is, Stop red, Organic blue */ #pnl-view .pnl-tbl tr.pnl-row--stop td{background:#FEF2F2} #pnl-view .pnl-tbl tr.pnl-row--organic td{background:#EFF6FF} #pnl-view .pnl-tbl tr.pnl-row--stop:hover td{background:#FEE2E2} #pnl-view .pnl-tbl tr.pnl-row--organic:hover td{background:#DBEAFE} #pnl-view .pnl-tbl td.pnl-kpi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* every column keeps a floor (his call): Status 104px, every other shown column 128px (Collected and KPI Type joined 2026-10-21; a hidden column drops out of --pnl-n) — below that the table scrolls sideways inside its card instead of squeezing a column */ #pnl-view .pnl-tbl{min-width:calc(104px + var(--pnl-n,14) * 128px)} #pnl-view span.pnl-status{display:inline-flex;align-items:center;justify-content:center;cursor:default;box-sizing:border-box} /* read-only status: a Finance account sees his decision, cannot change it */ #pnl-view .pnl-status--ended{display:inline-flex;align-items:center;justify-content:center;background:#F1F5F9;border-color:#E2E8F3;color:#94A3B8;font-weight:600;cursor:default;box-sizing:border-box} #pnl-view .pnl-status--keep{background:#F8FAFC;border-color:#E2E8F3;color:#0F172A} /* Column menus (2026-10-21) — the Project Index header button (.pif-h), on this table */ #pnl-view .pnl-tbl thead th .pif-h{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;min-width:0;white-space:nowrap;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;border-radius:6px;padding:2px 4px;margin:-2px -4px} #pnl-view .pnl-tbl thead th .pif-h__t{min-width:0;overflow:hidden;text-overflow:ellipsis} #pnl-view .pnl-tbl thead th .pif-h:hover{background:#EEF2F7;color:var(--lv-text,#0F172A)} #pnl-view .pnl-tbl thead th .pif-h:focus-visible{outline:2px solid #2563EB;outline-offset:1px} #pnl-view .pnl-tbl thead th.pif-th-on{color:#2563EB} #pnl-view .pnl-tbl thead th.pnl-th-proj .pif-h{justify-content:flex-start} #pnl-view .pnl-tblctl{display:flex;align-items:center;gap:10px;flex:0 0 auto} #pnl-view .pnl-tblctl .pif-vbtn{max-width:200px} /* pnl.css is not a source of scripts/generate-dark-mode.py — its dark rules for the column menus sit here, matching the Project Index's generated ones */ html[data-theme="dark"] #pnl-view .pnl-tbl thead th .pif-h:hover{background:#202023;color:var(--lv-text,#F0F0F2)} html[data-theme="dark"] #pnl-view .pnl-tbl thead th .pif-h:focus-visible{outline:2px solid #252A30} html[data-theme="dark"] #pnl-view .pnl-tbl thead th.pif-th-on{color:#A4B8CC}