/* ============================================================
   UIPRO-CL — CL SYNERGY MIS DESIGN SYSTEM
   Emil Kowalski-inspired: restrained, typographic, motion-aware.
   v1.0  •  Built for monthly board-pack reports.
   ============================================================ */

/* ---------- 0. RESET & BASELINE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--uip-font-sans);
  font-feature-settings:"ss01","cv11";
  font-size:14px;
  line-height:1.55;
  color:var(--uip-fg);
  background:var(--uip-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* — type — */
  --uip-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --uip-font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --uip-font-display: "Geist", "Inter", system-ui, sans-serif;

  /* — neutrals (warm) — */
  --uip-bg:        #FAFAF7;     /* page parchment */
  --uip-surface:   #FFFFFF;     /* card */
  --uip-surface-2: #F4F4EF;     /* sunken / striped row */
  --uip-fg:        #0A0A0A;     /* primary ink */
  --uip-fg-muted:  #737373;     /* secondary */
  --uip-fg-subtle: #A3A3A3;     /* tertiary / disabled */
  --uip-border:    #E7E5DF;     /* hairline */
  --uip-border-strong:#C9C7C0;

  /* — brand (CL Synergy navy) — */
  --uip-brand:        #0B2545;
  --uip-brand-fg:     #FFFFFF;
  --uip-brand-soft:   #E6EAF1;
  --uip-brand-tint:   #13315C;

  /* — semantic / status — */
  --uip-favourable:   #15803D;  /* forest green */
  --uip-favourable-soft:#DCFCE7;
  --uip-adverse:      #991B1B;  /* burgundy */
  --uip-adverse-soft: #FEE2E2;
  --uip-warning:      #A16207;  /* amber */
  --uip-warning-soft: #FEF3C7;
  --uip-info:         #1E40AF;
  --uip-info-soft:    #DBEAFE;

  /* — chart palette (8 cat colors, board-pack-safe) — */
  --uip-c1:#0B2545; --uip-c2:#13315C; --uip-c3:#3E5C76;
  --uip-c4:#748CAB; --uip-c5:#8C1C13; --uip-c6:#A16207;
  --uip-c7:#1F5230; --uip-c8:#5E5E5E;

  /* — radii — */
  --uip-r-sm:4px; --uip-r:8px; --uip-r-lg:12px; --uip-r-xl:16px;

  /* — shadow (very restrained) — */
  --uip-shadow-1: 0 1px 0 rgba(0,0,0,.04);
  --uip-shadow-2: 0 1px 2px rgba(11,37,69,.05), 0 0 0 1px rgba(11,37,69,.04);
  --uip-shadow-3: 0 8px 24px -8px rgba(11,37,69,.10), 0 0 0 1px rgba(11,37,69,.05);

  /* — spacing scale (4px base) — */
  --uip-s1:4px; --uip-s2:8px; --uip-s3:12px; --uip-s4:16px; --uip-s5:20px;
  --uip-s6:24px; --uip-s7:32px; --uip-s8:40px; --uip-s9:48px; --uip-s10:64px; --uip-s11:96px;

  /* — motion — */
  --uip-ease-out:cubic-bezier(0.16,1,0.3,1);          /* Emil's signature out-expo */
  --uip-ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --uip-dur-fast:160ms; --uip-dur:240ms; --uip-dur-slow:480ms;
}

/* ---------- 2. TYPOGRAPHY ---------- */
.uip-display-1{font-family:var(--uip-font-display);font-weight:600;font-size:48px;line-height:1.05;letter-spacing:-0.035em}
.uip-display-2{font-family:var(--uip-font-display);font-weight:600;font-size:36px;line-height:1.1;letter-spacing:-0.03em}
.uip-h1{font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-0.025em}
.uip-h2{font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-0.015em}
.uip-h3{font-weight:600;font-size:16px;line-height:1.4;letter-spacing:-0.01em}
.uip-eyebrow{
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:0.12em;color:var(--uip-fg-muted);
}
.uip-label{font-size:12px;font-weight:500;color:var(--uip-fg-muted);letter-spacing:0.01em}
.uip-meta {font-size:11px;color:var(--uip-fg-subtle);letter-spacing:0.01em}
.uip-num  {font-family:var(--uip-font-mono);font-feature-settings:"tnum","ss01";font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.uip-page{
  max-width:1280px;margin:0 auto;
  padding:var(--uip-s8) var(--uip-s8) var(--uip-s11);
}
@media (max-width:900px){.uip-page{padding:var(--uip-s6)}}

.uip-section{margin-top:var(--uip-s10);scroll-margin-top:var(--uip-s8)}
.uip-section:first-of-type{margin-top:var(--uip-s8)}

.uip-section-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--uip-s4);margin-bottom:var(--uip-s5);
  padding-bottom:var(--uip-s4);
  border-bottom:1px solid var(--uip-border);
}
.uip-section-header .uip-eyebrow{margin-bottom:6px;display:block}

.uip-grid{display:grid;gap:var(--uip-s4)}
.uip-grid-2{grid-template-columns:repeat(2,1fr)}
.uip-grid-3{grid-template-columns:repeat(3,1fr)}
.uip-grid-4{grid-template-columns:repeat(4,1fr)}
.uip-grid-5{grid-template-columns:repeat(5,1fr)}
.uip-grid-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){.uip-grid-6,.uip-grid-5{grid-template-columns:repeat(3,1fr)}.uip-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px) {.uip-grid-6,.uip-grid-5,.uip-grid-4,.uip-grid-3,.uip-grid-2{grid-template-columns:1fr}}

/* ---------- 4. CARD ---------- */
.uip-card{
  background:var(--uip-surface);
  border:1px solid var(--uip-border);
  border-radius:var(--uip-r-lg);
  padding:var(--uip-s5);
  transition:border-color var(--uip-dur) var(--uip-ease-out),
             transform var(--uip-dur) var(--uip-ease-out),
             box-shadow var(--uip-dur) var(--uip-ease-out);
}
.uip-card:hover{border-color:var(--uip-border-strong)}
.uip-card.is-elevated{box-shadow:var(--uip-shadow-2)}
.uip-card-title{display:flex;align-items:center;justify-content:space-between;gap:var(--uip-s3);margin-bottom:var(--uip-s4)}
.uip-card-body{display:block}
.uip-card-pad-lg{padding:var(--uip-s7)}

/* ---------- 5. KPI TILE ---------- */
.uip-kpi{
  background:var(--uip-surface);
  border:1px solid var(--uip-border);
  border-radius:var(--uip-r-lg);
  padding:var(--uip-s5);
  display:flex;flex-direction:column;gap:var(--uip-s2);
  position:relative;overflow:hidden;min-height:140px;
  transition:border-color var(--uip-dur) var(--uip-ease-out),
             transform var(--uip-dur) var(--uip-ease-out);
}
.uip-kpi:hover{border-color:var(--uip-border-strong);transform:translateY(-2px)}
.uip-kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--uip-brand);opacity:.0;
  transition:opacity var(--uip-dur) var(--uip-ease-out);
}
.uip-kpi:hover::before{opacity:1}
.uip-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:var(--uip-s2)}
.uip-kpi-label{
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--uip-fg-muted);
}
.uip-kpi-currency{
  font-size:10px;font-weight:500;letter-spacing:0.12em;
  color:var(--uip-fg-subtle);text-transform:uppercase;
  margin-bottom:-4px;
  min-height:14px;            /* reserves space even when content is   */
}
.uip-kpi-value{
  font-family:var(--uip-font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:500;font-size:26px;line-height:1.1;
  letter-spacing:-0.02em;color:var(--uip-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* The first child after .uip-kpi-value gets margin-top:auto so split (when
   present) sits at the bottom, otherwise foot sits at the bottom. */
.uip-kpi-value ~ .uip-kpi-split,
.uip-kpi-value + .uip-kpi-foot{margin-top:auto}
.uip-kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--uip-s2);flex-wrap:wrap}
.uip-kpi-sub {font-size:11px;color:var(--uip-fg-subtle)}
.uip-kpi-split{
  display:flex;flex-direction:column;gap:2px;
  padding-top:var(--uip-s2);margin-top:var(--uip-s2);
  border-top:1px dashed var(--uip-border);
}
.uip-kpi-split-item{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.uip-kpi-split-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--uip-fg-subtle)}
.uip-kpi-split-value{
  font-family:var(--uip-font-mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:500;color:var(--uip-fg-muted);
}

/* === KPI strip alignment === */
.uip-kpi-strip .uip-kpi{min-height:180px}
.uip-kpi-strip .uip-kpi-label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;
}
.uip-kpi-strip .uip-kpi-head{min-height:18px}

/* Quick-link cards on Overview footer */
.uip-quick-link{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--uip-fg);
  transition:transform var(--uip-dur) var(--uip-ease-out),
             border-color var(--uip-dur) var(--uip-ease-out);
}
.uip-quick-link:hover{transform:translateY(-2px);border-color:var(--uip-brand)}
.uip-quick-link .uip-eyebrow{color:var(--uip-brand);font-weight:600}

/* Nested-row indents in P&L summary */
.uip-pnl-summary tbody tr.is-level-1 td:nth-child(2){padding-left:48px;font-weight:500;color:var(--uip-fg)}
.uip-pnl-summary tbody tr.is-level-2 td:nth-child(2){padding-left:72px;font-weight:400;color:var(--uip-fg-muted)}
.uip-pnl-summary tbody tr.is-level-1.is-expandable td:nth-child(2)::before{
  content:"▸ ";color:var(--uip-fg-subtle);margin-right:4px;font-size:11px;
}

/* ---------- 6. CHIP / VARIANCE PILL ---------- */
.uip-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:500;letter-spacing:0;
  background:var(--uip-surface-2);color:var(--uip-fg-muted);
  border:1px solid transparent;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.uip-chip-fav{background:var(--uip-favourable-soft);color:var(--uip-favourable)}
.uip-chip-adv{background:var(--uip-adverse-soft);color:var(--uip-adverse)}
.uip-chip-warn{background:var(--uip-warning-soft);color:var(--uip-warning)}
.uip-chip-neutral{background:var(--uip-surface-2);color:var(--uip-fg-muted)}
.uip-chip svg{width:10px;height:10px}

/* Traffic-light dot */
.uip-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--uip-fg-subtle)}
.uip-dot-fav{background:var(--uip-favourable)}
.uip-dot-adv{background:var(--uip-adverse)}
.uip-dot-warn{background:var(--uip-warning)}

/* ---------- 7. TABLE ---------- */
.uip-table{
  width:100%;border-collapse:collapse;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.uip-table thead th{
  text-align:left;font-weight:500;color:var(--uip-fg-muted);
  font-size:11px;text-transform:uppercase;letter-spacing:0.08em;
  padding:10px 12px;border-bottom:1px solid var(--uip-border);
  background:var(--uip-surface);
  position:sticky;top:0;
}
.uip-table td{padding:10px 12px;border-bottom:1px solid var(--uip-border);vertical-align:top}
.uip-table tbody tr:hover{background:var(--uip-surface-2)}
.uip-table .num{text-align:right;font-family:var(--uip-font-mono);font-variant-numeric:tabular-nums}
.uip-table .neg{color:var(--uip-adverse)}
.uip-table .pos{color:var(--uip-favourable)}
.uip-table tr.is-subtotal td{font-weight:600;background:var(--uip-surface-2);border-top:1px solid var(--uip-border-strong)}
.uip-table tr.is-total td{font-weight:600;background:var(--uip-brand);color:var(--uip-brand-fg);border:0}
.uip-table tr.is-section td{padding-top:var(--uip-s5);font-weight:600;color:var(--uip-fg);font-size:12px;text-transform:uppercase;letter-spacing:0.06em}
.uip-table .indent-1{padding-left:24px;color:var(--uip-fg-muted)}
.uip-table .indent-2{padding-left:40px;color:var(--uip-fg-muted)}

/* Heatmap cells (ageing) */
.uip-heat{position:relative}
.uip-heat td.bucket{
  font-family:var(--uip-font-mono);font-variant-numeric:tabular-nums;
  text-align:right;color:var(--uip-fg);
  padding:8px 10px;
  white-space:nowrap;
}
.uip-heat td.num{white-space:nowrap}
.uip-heat td.bucket[data-intensity="0"]{background:transparent;color:var(--uip-fg-subtle)}
.uip-heat td.bucket[data-intensity="1"]{background:#FFF8E1}
.uip-heat td.bucket[data-intensity="2"]{background:#FEEBC8}
.uip-heat td.bucket[data-intensity="3"]{background:#FED7AA}
.uip-heat td.bucket[data-intensity="4"]{background:#FDBA74}
.uip-heat td.bucket[data-intensity="5"]{background:#FB923C;color:#fff}

/* ---------- 8. CHART CANVAS ---------- */
.uip-chart{width:100%;min-height:260px}
.uip-chart-sm{min-height:180px}
.uip-chart-lg{min-height:380px}

/* ---------- 9. NAV / STICKY HEADER ---------- */
.uip-nav{
  position:sticky;top:0;z-index:10;
  background:rgba(250,250,247,0.85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--uip-border);
}
.uip-nav-inner{
  max-width:1280px;margin:0 auto;
  padding:var(--uip-s3) var(--uip-s8);
  display:flex;align-items:center;justify-content:space-between;gap:var(--uip-s5);
}
.uip-nav-brand{display:flex;align-items:center;gap:var(--uip-s2);font-weight:600;letter-spacing:-0.01em}
.uip-nav-brand .mark{
  width:24px;height:24px;border-radius:6px;
  background:var(--uip-brand);color:var(--uip-brand-fg);
  display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:0;
}
.uip-nav-links{display:flex;gap:var(--uip-s5);align-items:center}
.uip-nav-link{
  font-size:13px;color:var(--uip-fg-muted);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color var(--uip-dur) var(--uip-ease-out),
             border-color var(--uip-dur) var(--uip-ease-out);
}
.uip-nav-link:hover{color:var(--uip-fg);border-bottom-color:var(--uip-fg)}
@media print{.uip-nav{display:none}}

/* ---------- 10. COVER / HERO ---------- */
.uip-cover{
  background:linear-gradient(180deg,#fff 0%,var(--uip-bg) 100%);
  border:1px solid var(--uip-border);
  border-radius:var(--uip-r-xl);
  padding:var(--uip-s10) var(--uip-s8);
  margin-bottom:var(--uip-s8);
  position:relative;overflow:hidden;
}
.uip-cover::after{
  content:"";position:absolute;right:-20%;top:-30%;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,37,69,0.06),transparent 70%);
  pointer-events:none;
}
.uip-cover-eyebrow{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--uip-fg-muted)}
.uip-cover-title{font-family:var(--uip-font-display);font-weight:600;font-size:56px;line-height:1.02;letter-spacing:-0.04em;margin-top:var(--uip-s4)}
.uip-cover-sub{font-size:18px;color:var(--uip-fg-muted);margin-top:var(--uip-s3);max-width:54ch}
.uip-cover-meta{display:flex;gap:var(--uip-s7);margin-top:var(--uip-s7);flex-wrap:wrap}
.uip-cover-meta div span{display:block}
.uip-cover-meta .uip-eyebrow{margin-bottom:4px}

/* ---------- 11. CALLOUT / INSIGHT BOX ---------- */
.uip-callout{
  border:1px solid var(--uip-border);
  border-left:3px solid var(--uip-brand);
  border-radius:var(--uip-r);
  padding:var(--uip-s4) var(--uip-s5);
  background:var(--uip-surface);
  display:flex;gap:var(--uip-s4);align-items:flex-start;
}
.uip-callout-adv{border-left-color:var(--uip-adverse)}
.uip-callout-fav{border-left-color:var(--uip-favourable)}
.uip-callout-warn{border-left-color:var(--uip-warning)}
.uip-callout-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:6px;
  background:var(--uip-brand-soft);color:var(--uip-brand);
  display:grid;place-items:center;font-weight:600;
}
.uip-callout-title{font-weight:600;font-size:13px;margin-bottom:2px}
.uip-callout-body{font-size:13px;color:var(--uip-fg-muted);line-height:1.5}

/* ---------- 12. MOTION (initial-state classes; JS reveals) ---------- */
.uip-anim-init{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){
  .uip-anim-init{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- 13. PRINT (A4 landscape) ---------- */
@page{size:A4 landscape;margin:14mm}
@media print{
  :root{--uip-bg:#fff}
  body{background:#fff;font-size:11px}
  .uip-page{max-width:none;padding:0}
  .uip-cover,.uip-card,.uip-kpi{box-shadow:none;break-inside:avoid}
  .uip-section{margin-top:18mm;page-break-inside:avoid}
  .uip-section.is-page-break{page-break-before:always}
  .uip-cover-title{font-size:32px}
  .uip-kpi-value{font-size:22px}
  .uip-h1{font-size:20px}
  .uip-h2{font-size:15px}
  .uip-table{font-size:10px}
  .uip-chart{min-height:200px}
  .no-print{display:none!important}
  .uip-nav{display:none}
}

/* ---------- 14. UTILITIES ---------- */
.uip-flex{display:flex} .uip-items-center{align-items:center} .uip-justify-between{justify-content:space-between}
.uip-gap-1{gap:var(--uip-s1)} .uip-gap-2{gap:var(--uip-s2)} .uip-gap-3{gap:var(--uip-s3)} .uip-gap-4{gap:var(--uip-s4)} .uip-gap-5{gap:var(--uip-s5)}
.uip-mt-2{margin-top:var(--uip-s2)} .uip-mt-3{margin-top:var(--uip-s3)} .uip-mt-4{margin-top:var(--uip-s4)} .uip-mt-5{margin-top:var(--uip-s5)} .uip-mt-6{margin-top:var(--uip-s6)} .uip-mt-7{margin-top:var(--uip-s7)}
.uip-text-muted{color:var(--uip-fg-muted)} .uip-text-subtle{color:var(--uip-fg-subtle)}
.uip-text-fav{color:var(--uip-favourable)} .uip-text-adv{color:var(--uip-adverse)}
.uip-text-right{text-align:right} .uip-text-center{text-align:center}
.uip-divider{height:1px;background:var(--uip-border);margin:var(--uip-s5) 0}
.uip-pill{display:inline-block;padding:2px 8px;background:var(--uip-surface-2);border-radius:999px;font-size:11px;color:var(--uip-fg-muted)}
.uip-pill--nav{margin-left:var(--uip-s2)}
.uip-num{font-variant-numeric:tabular-nums}

/* ---------- 15. UTILITY CLASSES (replace inline styles) ---------- */
.uip-clickable{cursor:pointer}
.uip-cover-title-sub{color:var(--uip-fg-muted);font-weight:400}
.uip-section--kpi{margin-top:var(--uip-s5)}
.uip-col-span-2{grid-column:span 2}
.uip-headline-num{font-size:18px;font-weight:600}
.uip-headline-num--neg{color:var(--uip-adverse)}
.uip-headline-num--pos{color:var(--uip-favourable)}
.uip-table-wrap{overflow-x:auto}
.uip-th-ref{width:40px}
.uip-th-narrow{width:32px}
.uip-th-amount{width:140px}
.uip-th-status{width:80px;text-align:center}
.uip-td-status{text-align:center}
.uip-list-clean{font-size:13px;color:var(--uip-fg-muted);line-height:1.7;list-style:none;padding-left:0}
.uip-list-clean li{margin-bottom:4px}
.uip-defs{font-size:13px;color:var(--uip-fg-muted);line-height:1.6}
.uip-defs b{color:var(--uip-fg)}
.uip-mt-8{margin-top:var(--uip-s8)}
.uip-mini-row{
  display:flex;justify-content:space-between;
  padding:4px 0;border-bottom:1px solid var(--uip-border);
  font-size:12px;
}
.uip-mini-row:last-child{border-bottom:0}
.uip-mini-row .uip-text-subtle{margin-left:6px}

/* PNL table refinements */
.uip-table .num.is-budget-on-dark{opacity:.85}
.uip-table td.is-l2-label{font-weight:500;color:var(--uip-fg)}

/* === P&L Summary table (collapsible MD view) === */
.uip-pnl-summary tbody tr td{padding:14px 12px;font-size:13px}
.uip-pnl-summary tbody tr.is-top td{font-weight:600;font-size:14px}
.uip-pnl-summary tbody tr.is-subtotal td{
  background:var(--uip-surface-2);font-weight:600;
  border-top:1px solid var(--uip-border-strong);
  border-bottom:1px solid var(--uip-border-strong);
}
.uip-pnl-summary tbody tr.is-total td{
  background:var(--uip-brand);color:var(--uip-brand-fg);font-weight:600;
  border:0;font-size:14px;
}
.uip-pnl-summary tbody tr.is-child td{
  background:#FBFAF5;font-size:12px;padding:8px 12px;font-weight:400;
}
.uip-pnl-summary tbody tr.is-child.is-expandable td{
  background:#F2EEDF;font-weight:500;
}
.uip-pnl-summary tbody tr.is-child:hover td{background:var(--uip-brand-soft)}
.uip-pnl-summary tbody tr.is-child.is-expandable:hover td{background:var(--uip-brand-soft)}
.uip-pnl-summary tbody tr.is-child td:nth-child(2){padding-left:36px;color:var(--uip-fg-muted)}
.uip-pnl-summary tbody tr.is-child.is-clickable td:nth-child(2){color:var(--uip-fg)}

.uip-toggle{
  width:24px;text-align:center;cursor:pointer;
  color:var(--uip-fg-subtle);font-size:10px;
  -webkit-user-select:none;
  user-select:none;
  transition:transform var(--uip-dur) var(--uip-ease-out), color var(--uip-dur) var(--uip-ease-out);
}
.uip-toggle.is-expanded{transform:rotate(90deg);color:var(--uip-brand)}
.uip-pnl-summary tr.is-clickable:hover .uip-toggle{color:var(--uip-brand)}
.uip-pnl-summary tr.is-clickable:hover td{background:var(--uip-brand-soft)}
.uip-pnl-summary tr.is-clickable.is-total:hover td{background:var(--uip-brand-tint)}
.uip-pnl-summary tr.is-clickable.is-subtotal:hover td{background:#E8E5DA}

/* ---------- 16. CLICKABLE / DRILL-DOWN ROWS ---------- */
.uip-table tr.is-clickable{cursor:pointer;position:relative}
.uip-table tr.is-clickable td:first-child::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--uip-brand);margin-right:6px;opacity:0;transform:translateX(-4px);
  transition:opacity var(--uip-dur) var(--uip-ease-out), transform var(--uip-dur) var(--uip-ease-out);
}
.uip-table tr.is-clickable:hover td:first-child::before{opacity:1;transform:translateX(0)}
.uip-table tr.is-clickable:hover{background:var(--uip-brand-soft)}
.uip-row-hint{
  display:inline-block;width:14px;height:14px;border-radius:3px;
  background:var(--uip-surface-2);color:var(--uip-fg-subtle);
  font-size:10px;line-height:14px;text-align:center;
  margin-left:6px;opacity:0;transition:opacity var(--uip-dur) var(--uip-ease-out);
}
.uip-table tr.is-clickable:hover .uip-row-hint{opacity:1;color:var(--uip-brand)}

/* ---------- 17. SIDE PANEL (drill-down) ---------- */
.uip-panel-overlay{
  position:fixed;inset:0;background:rgba(11,37,69,0.18);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity var(--uip-dur) var(--uip-ease-out);
  z-index:50;
}
.uip-panel-overlay.is-open{opacity:1;pointer-events:auto}

.uip-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(720px,90vw);
  background:var(--uip-surface);
  border-left:1px solid var(--uip-border);
  box-shadow:-8px 0 32px -12px rgba(11,37,69,0.18);
  transform:translateX(100%);
  transition:transform var(--uip-dur-slow) var(--uip-ease-out);
  z-index:60;display:flex;flex-direction:column;
}
.uip-panel.is-open{transform:translateX(0)}
.uip-panel-l2{
  width:min(820px,95vw);
  box-shadow:-12px 0 40px -12px rgba(11,37,69,0.22);
}
.uip-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:var(--uip-s6) var(--uip-s7) var(--uip-s4);
  border-bottom:1px solid var(--uip-border);
  gap:var(--uip-s4);flex-shrink:0;
}
.uip-panel-eyebrow{
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--uip-fg-muted);margin-bottom:6px;
}
.uip-panel-title{font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-0.015em}
.uip-panel-sub{font-size:13px;color:var(--uip-fg-muted);margin-top:6px}
.uip-panel-close{
  width:32px;height:32px;border-radius:8px;
  background:var(--uip-surface-2);border:1px solid var(--uip-border);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  font-size:14px;color:var(--uip-fg-muted);
  transition:background var(--uip-dur) var(--uip-ease-out), color var(--uip-dur) var(--uip-ease-out);
}
.uip-panel-close:hover{background:var(--uip-brand);color:#fff}
.uip-panel-body{
  flex:1;overflow-y:auto;
  padding:var(--uip-s5) var(--uip-s7) var(--uip-s7);
}
.uip-panel-stat{
  display:flex;align-items:baseline;gap:var(--uip-s5);
  padding:var(--uip-s4) 0;
  border-bottom:1px solid var(--uip-border);margin-bottom:var(--uip-s5);
}
.uip-panel-stat-item{flex:1}
.uip-panel-stat-label{
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--uip-fg-muted);margin-bottom:4px;
}
.uip-panel-stat-value{
  font-family:var(--uip-font-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:18px;color:var(--uip-fg);letter-spacing:-0.01em;
}
.uip-panel-section-title{
  font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--uip-fg);
  margin:var(--uip-s5) 0 var(--uip-s3);
}
.uip-panel-empty{
  padding:var(--uip-s8) 0;text-align:center;
  color:var(--uip-fg-subtle);font-size:13px;
}

/* ---------- 18. PAGE NAV (multi-page portal) ---------- */
.uip-nav-link.is-active{color:var(--uip-fg);border-bottom-color:var(--uip-brand)}

/* ---------- 19. PRINT — hide panels ---------- */
@media print{
  .uip-panel,.uip-panel-overlay{display:none!important}
}