/* ===================================================================
   pnl-matrix.css — scoped styles for the Project P&L matrix component.

   Everything lives under `.pnl-matrix`. Structural styles (sticky first
   column + sticky header rows, horizontal scroll, z-index layering) are
   ported from the React prototype's inline styles. The band-tone palette
   is hard-coded from primitives.jsx (TONE_LIGHT / TONE_DARK). Density
   classes mirror the DENSITY map. Where a Phoenix variable maps cleanly
   we use it (border colour, body bg, secondary text).
   =================================================================== */

/* -----------------------------------------------------------------
   Root: theme-neutral structural tokens. Light values here; the dark
   overrides live in the [data-bs-theme="dark"] block further down.
   ----------------------------------------------------------------- */
.pnl-matrix {
  --pnl-bg:          var(--phoenix-body-bg, #ffffff);
  --pnl-head-bg:     #ffffff;
  --pnl-head2-bg:    #f8fafc;
  --pnl-head-text:   var(--phoenix-emphasis-color, #0a0a0a);
  --pnl-foot-text:   var(--phoenix-secondary-color, #525252);
  --pnl-border:      var(--phoenix-border-color, #e5e7eb);
  --pnl-border-mid:  #d4d4d4;
  --pnl-stripe:      #fafafa;
  --pnl-dim:         #a3a3a3;
  --pnl-shadow:      rgba(0, 0, 0, 0.04);

  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--pnl-head-text);
}

/* -----------------------------------------------------------------
   Toolbar — segmented controls. Phoenix .btn-group gets us most of
   the way; these rules tighten the segmented "pill" look + label caps.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.pnl-matrix .pnl-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pnl-matrix .pnl-toolbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pnl-foot-text);
  font-family: var(--phoenix-font-sans-serif, system-ui, sans-serif);
}
/* Segmented control: a bordered .btn-group of small soft buttons. The
   active button reads as "pressed" via Phoenix's secondary fill. */
.pnl-matrix .pnl-seg.btn-group .btn {
  font-size: 11px;
  padding: 0.2rem 0.6rem;
  font-family: var(--phoenix-font-sans-serif, system-ui, sans-serif);
}
.pnl-matrix .pnl-seg.btn-group .btn.active {
  font-weight: 600;
}
.pnl-matrix .pnl-seg .btn:disabled,
.pnl-matrix .pnl-seg .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------
   Card / scroll container
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-card {
  border: 1px solid var(--pnl-border);
  border-radius: 10px;
  background: var(--pnl-bg);
  overflow: hidden;
  box-shadow: 0 1px 2px var(--pnl-shadow);
}
.pnl-matrix .pnl-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
}

/* -----------------------------------------------------------------
   Table base — fixed layout, collapsed spacing. Width is set inline on
   the element (depends on FY count + density), the rest lives here.
   ----------------------------------------------------------------- */
.pnl-matrix table.pnl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.pnl-matrix .pnl-table th,
.pnl-matrix .pnl-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Numeric cells use tabular figures + the monospace stack. */
.pnl-matrix .pnl-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pnl-matrix .pnl-dim-cell {
  color: var(--pnl-dim);
}
.pnl-matrix .pnl-center { text-align: center; }
.pnl-matrix .pnl-bold   { font-weight: 700; }

/* -----------------------------------------------------------------
   Sticky frozen first column. zIndex layering:
     corner header cells (sticky left + top)        : 6 (banner) / 5 (period row)
     row-label <th> (sticky left, body)             : 3
     FY-total / period header cells (sticky top)    : 4 (banner) / 3 (period row)
   The corner must always sit above everything else.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-rowlabel {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  border-right: 2px solid var(--pnl-border-mid);
  box-shadow: 4px 0 6px -4px var(--pnl-shadow);
  background: var(--pnl-bg);
}

/* The two sticky header rows. Banner row sits at top:0; the period row
   sits just below it (offset set inline because it depends on density). */
.pnl-matrix .pnl-th-corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 6;
  background: var(--pnl-head-bg);
  border-right: 2px solid var(--pnl-border-mid);
  box-shadow: 4px 0 6px -4px var(--pnl-shadow);
}
.pnl-matrix .pnl-th-corner2 {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--pnl-head-bg);
  text-align: left;
  font-size: 11px;
  color: var(--pnl-head-text);
  font-weight: 600;
  border-bottom: 1px solid var(--pnl-border);
  border-right: 2px solid var(--pnl-border-mid);
  box-shadow: 4px 0 6px -4px var(--pnl-shadow);
}
.pnl-matrix .pnl-banner {
  position: sticky;
  top: 0;
  z-index: 4;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  font-family: var(--phoenix-font-sans-serif, system-ui, sans-serif);
}
.pnl-matrix .pnl-banner-tag {
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pnl-matrix .pnl-ph {            /* period header cell */
  position: sticky;
  z-index: 3;
  background: var(--pnl-head-bg);
  text-align: right;
  color: var(--pnl-head-text);
  border-bottom: 1px solid var(--pnl-border);
  font-variant-numeric: tabular-nums;
}
.pnl-matrix .pnl-ph-total {      /* "FY Total" header cell */
  position: sticky;
  z-index: 3;
  background: var(--pnl-head2-bg);
  text-align: right;
  font-weight: 700;
  color: var(--pnl-head-text);
  border-bottom: 1px solid var(--pnl-border);
  border-left: 2px solid #9ca3af;
}
.pnl-matrix .pnl-ph-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--pnl-foot-text);
  margin-top: 2px;
  font-variant-numeric: normal;
}

/* -----------------------------------------------------------------
   Carets (band toggles + drill-down rows)
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-caret {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  margin-right: 6px;
  display: inline-block;
  width: 12px;
  transition: transform 120ms ease;
}
.pnl-matrix .pnl-caret.pnl-closed { transform: rotate(-90deg); }
.pnl-matrix .pnl-caret.pnl-open   { transform: rotate(0deg); }

/* Info "ⓘ" trigger — a small round glyph that opens a Bootstrap popover. */
.pnl-matrix .pnl-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--pnl-border-mid);
  background: var(--pnl-head-bg);
  color: var(--pnl-foot-text);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  font-family: var(--phoenix-font-sans-serif, system-ui, sans-serif);
}

/* Drill-down "↳" lead glyph + freelance role styling */
.pnl-matrix .pnl-lead { color: var(--pnl-dim); }
.pnl-matrix .pnl-res-role { color: var(--pnl-dim); }
.pnl-matrix .pnl-res-role.pnl-freelance { font-style: italic; }

/* -----------------------------------------------------------------
   RAG + note dots, invoice links
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.pnl-matrix .pnl-dot-red   { background: #dc2626; }
.pnl-matrix .pnl-dot-amber { background: #ca8a04; }
.pnl-matrix .pnl-dot-green { background: #16a34a; }
.pnl-matrix .pnl-dot-note  { background: #3b82f6; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); }
.pnl-matrix .pnl-inv-link {
  color: #854d0e;
  text-decoration: underline;
  margin-right: 4px;
  display: inline-block;
  cursor: pointer;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-inv-link { color: #fcd34d; }

/* -----------------------------------------------------------------
   Inline-editable stream cells. A read-only-looking number cell with a
   subtle "click to type" affordance: text cursor + a faint dashed
   underline + a barely-there warm highlight. Clicking swaps the cell
   content for a borderless right-aligned <input>.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-cell-editable {
  cursor: text;
  border-bottom: 1px dashed #fde68a;
  background: rgba(254, 252, 232, 0.5);   /* faint amber wash */
}
.pnl-matrix .pnl-cell-editable:hover {
  background: #fefce8;
}
/* The in-place editor input. Fills the cell, right-aligned, tabular. */
.pnl-matrix .pnl-cell-editing { padding: 0 !important; background: #fffbeb; }
.pnl-matrix .pnl-cell-input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #3b82f6;
  border-radius: 0;
  padding: 5px 6px;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
  background: #fffbeb;
  color: var(--pnl-head-text);
}
[data-bs-theme="dark"] .pnl-matrix .pnl-cell-editable {
  border-bottom-color: #92710b;
  background: rgba(66, 32, 6, 0.4);
}
[data-bs-theme="dark"] .pnl-matrix .pnl-cell-editable:hover { background: #422006; }
[data-bs-theme="dark"] .pnl-matrix .pnl-cell-editing { background: #2c1a00; }
[data-bs-theme="dark"] .pnl-matrix .pnl-cell-input { background: #2c1a00; }

/* -----------------------------------------------------------------
   Dirty (staged, unsaved) cell — a clear amber highlight with a
   bottom accent so it stands out from the faint editable wash above.
   Overrides .pnl-cell-editable's subtle background.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-cell-dirty {
  background: #fef3c7 !important;            /* amber */
  border-bottom: 2px solid #f59e0b !important;
  font-weight: 600;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-cell-dirty {
  background: #4a2f06 !important;
  border-bottom-color: #f59e0b !important;
  color: #fde68a;
}

/* -----------------------------------------------------------------
   Editable REPORTING cells — RAG dot + note cell affordances. Mirror
   the faint "click me" wash used by editable number cells.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-rag-editable,
.pnl-matrix .pnl-note-editable { cursor: pointer; }
.pnl-matrix .pnl-rag-editable:hover,
.pnl-matrix .pnl-note-editable:hover { background: #fefce8; }
[data-bs-theme="dark"] .pnl-matrix .pnl-rag-editable:hover,
[data-bs-theme="dark"] .pnl-matrix .pnl-note-editable:hover { background: #422006; }
/* Faint "+" add-note affordance shown on empty editable note cells. */
.pnl-matrix .pnl-note-add {
  color: #9ca3af;
  font-weight: 700;
  line-height: 1;
}
.pnl-matrix .pnl-note-editable:hover .pnl-note-add { color: #3b82f6; }
[data-bs-theme="dark"] .pnl-matrix .pnl-note-add { color: #6b7280; }

/* -----------------------------------------------------------------
   Popovers (RAG picker + note editor). Appended to <body>, positioned
   absolutely against the clicked cell. Phoenix-toned card look.
   ----------------------------------------------------------------- */
.pnl-pop {
  z-index: 1080;
  background: #fff;
  border: 1px solid #e3e6ed;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
  font-size: 0.8125rem;
}
[data-bs-theme="dark"] .pnl-pop {
  background: #1e2129;
  border-color: #31343c;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
}

/* RAG picker — a small vertical menu of choices. */
.pnl-rag-menu { display: flex; flex-direction: column; min-width: 9rem; }
.pnl-rag-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 0;
  background: transparent;
  border-radius: 0.375rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.pnl-rag-item:hover { background: #f5f7fa; }
[data-bs-theme="dark"] .pnl-rag-item:hover { background: #2b2f38; }
.pnl-rag-menu .pnl-dot-clear {
  background: transparent;
  border: 1px solid #9ca3af;
  box-shadow: none;
}
[data-bs-theme="dark"] .pnl-rag-menu .pnl-dot-clear { border-color: #6b7280; }

/* Note editor — textarea + Save / Clear actions. */
.pnl-note-editor { width: 16rem; padding: 0.25rem; }
.pnl-note-ta { resize: vertical; width: 100%; }
.pnl-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

/* -----------------------------------------------------------------
   Save bar — slim flex bar shown while there are staged edits. Count
   text on the left, Save / Discard buttons pushed to the right.
   ----------------------------------------------------------------- */
.pnl-matrix .pnl-savebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #fffbeb;                       /* subtle amber tint */
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
}
.pnl-matrix .pnl-savebar-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #92400e;
}
.pnl-matrix .pnl-savebar-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f59e0b;
}
.pnl-matrix .pnl-savebar-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;                         /* push buttons to the right */
}
[data-bs-theme="dark"] .pnl-matrix .pnl-savebar {
  background: #2c1a00;
  border-color: #92710b;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-savebar-info { color: #fcd34d; }

/* Number colour hints */
.pnl-matrix .pnl-neg     { color: #dc2626; }   /* negative accrued */
.pnl-matrix .pnl-low-po  { color: #b45309; }   /* low PO remaining */
.pnl-matrix .pnl-warn    { color: #ca8a04; margin-right: 3px; }
.pnl-matrix .pnl-kpi-good { color: #15803d; }
.pnl-matrix .pnl-kpi-bad  { color: #b91c1c; }

/* =================================================================
   BAND TONES — ported from primitives.jsx TONE_LIGHT.
   Each band has: header (label + band row), sub (collapsible sub-label),
   and FY-cell tints. Selectors:
     .pnl-tone-<band>            → band header row cells (dark-ish header bg)
     .pnl-tone-<band>.pnl-fy     → the FY-total column tint for data cells
     .pnl-tone-<band>.pnl-sublabel → collapsible sub-row label bg
   ================================================================= */

/* ACTUAL (blue) */
.pnl-matrix .pnl-tone-actual.pnl-bandhdr {
  background: #dbeafe; color: #1e3a8a;
  border-top: 1px solid #93c5fd; border-bottom: 1px solid #93c5fd;
}
.pnl-matrix .pnl-tone-actual.pnl-bandfy {
  background: #bfdbfe; color: #1e3a8a;
  border-top: 1px solid #93c5fd; border-bottom: 1px solid #93c5fd;
  border-left: 2px solid #60a5fa;
}
.pnl-matrix .pnl-tone-actual.pnl-fy {
  background: #dbeafe; border-left: 2px solid #60a5fa;
}
.pnl-matrix .pnl-tone-actual.pnl-sublabel { background: #eff6ff; color: #1e40af; }
.pnl-matrix .pnl-tone-actual.pnl-bandlabel { background: #dbeafe; color: #1e3a8a; }

/* FORECAST (violet) */
.pnl-matrix .pnl-tone-forecast.pnl-bandhdr {
  background: #ede9fe; color: #5b21b6;
  border-top: 1px solid #ddd6fe; border-bottom: 1px solid #ddd6fe;
}
.pnl-matrix .pnl-tone-forecast.pnl-bandfy {
  background: #ddd6fe; color: #5b21b6;
  border-top: 1px solid #ddd6fe; border-bottom: 1px solid #ddd6fe;
  border-left: 2px solid #c4b5fd;
}
.pnl-matrix .pnl-tone-forecast.pnl-fy {
  background: #ede9fe; border-left: 2px solid #c4b5fd;
}
.pnl-matrix .pnl-tone-forecast.pnl-sublabel { background: #ede9fe; color: #5b21b6; }
.pnl-matrix .pnl-tone-forecast.pnl-bandlabel { background: #ede9fe; color: #5b21b6; }

/* FINANCE (amber) */
.pnl-matrix .pnl-tone-finance.pnl-bandhdr {
  background: #fef3c7; color: #854d0e;
  border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a;
}
.pnl-matrix .pnl-tone-finance.pnl-bandfy {
  background: #fde68a; color: #854d0e;
  border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a;
  border-left: 2px solid #fcd34d;
}
.pnl-matrix .pnl-tone-finance.pnl-fy {
  background: #fef3c7; border-left: 2px solid #fcd34d;
}
.pnl-matrix .pnl-tone-finance.pnl-sublabel { background: #fef3c7; color: #854d0e; }
.pnl-matrix .pnl-tone-finance.pnl-bandlabel { background: #fef3c7; color: #854d0e; }

/* REPORTING (slate) */
.pnl-matrix .pnl-tone-reporting.pnl-bandhdr {
  background: #f1f5f9; color: #334155;
  border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
}
.pnl-matrix .pnl-tone-reporting.pnl-bandfy {
  background: #e2e8f0; color: #334155;
  border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  border-left: 2px solid #cbd5e1;
}
.pnl-matrix .pnl-tone-reporting.pnl-fy {
  background: #f1f5f9; border-left: 2px solid #cbd5e1;
}
.pnl-matrix .pnl-tone-reporting.pnl-sublabel { background: #f1f5f9; color: #334155; }
.pnl-matrix .pnl-tone-reporting.pnl-bandlabel { background: #f1f5f9; color: #334155; }

/* KPI (grey) */
.pnl-matrix .pnl-tone-kpi.pnl-bandhdr {
  background: #e5e7eb; color: #111827;
  border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db;
}
.pnl-matrix .pnl-tone-kpi.pnl-bandfy {
  background: #d1d5db; color: #111827;
  border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db;
  border-left: 2px solid #9ca3af;
}
.pnl-matrix .pnl-tone-kpi.pnl-fy {
  background: #e5e7eb; border-left: 2px solid #9ca3af;
}
.pnl-matrix .pnl-tone-kpi.pnl-sublabel { background: #f3f4f6; color: #111827; }
.pnl-matrix .pnl-tone-kpi.pnl-bandlabel { background: #e5e7eb; color: #111827; }

/* Band label cells (sticky left) share the rowlabel sticky behaviour.
   They override the neutral rowlabel background with their band tone. */
.pnl-matrix .pnl-bandlabel {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  font-weight: 700;
  border-right: 2px solid var(--pnl-border-mid);
  box-shadow: 4px 0 6px -4px var(--pnl-shadow);
}

/* Last-FY hard right border, applied to the rightmost period cell. */
.pnl-matrix .pnl-last { border-right: 2px solid var(--pnl-border-mid); }

/* Body row hairline */
.pnl-matrix tbody tr { border-bottom: 1px solid var(--pnl-stripe); }

/* =================================================================
   DENSITY — padding + font from the DENSITY map in primitives.jsx.
   compact / standard / full. Row cells use rowPy; band header cells
   use hdrPy. Font sizes from .font.
   ================================================================= */
.pnl-matrix.pnl-density-compact  .pnl-cell      { padding: 4px 6px; font-size: 11px; }
.pnl-matrix.pnl-density-compact  .pnl-rowlabel,
.pnl-matrix.pnl-density-compact  .pnl-rowlabelpad { padding-top: 4px; padding-bottom: 4px; font-size: 11px; }
.pnl-matrix.pnl-density-compact  .pnl-bandcell  { padding: 7px 6px; font-size: 11px; }
.pnl-matrix.pnl-density-compact  .pnl-bandlabel { padding: 7px 12px; font-size: 11px; }

.pnl-matrix.pnl-density-standard .pnl-cell      { padding: 6px 6px; font-size: 12px; }
.pnl-matrix.pnl-density-standard .pnl-rowlabel,
.pnl-matrix.pnl-density-standard .pnl-rowlabelpad { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.pnl-matrix.pnl-density-standard .pnl-bandcell  { padding: 9px 6px; font-size: 12px; }
.pnl-matrix.pnl-density-standard .pnl-bandlabel { padding: 9px 12px; font-size: 12px; }

.pnl-matrix.pnl-density-full     .pnl-cell      { padding: 9px 6px; font-size: 13px; }
.pnl-matrix.pnl-density-full     .pnl-rowlabel,
.pnl-matrix.pnl-density-full     .pnl-rowlabelpad { padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.pnl-matrix.pnl-density-full     .pnl-bandcell  { padding: 12px 6px; font-size: 13px; }
.pnl-matrix.pnl-density-full     .pnl-bandlabel { padding: 12px 12px; font-size: 13px; }

/* Small-label variant (Margin %, invoice cells) uses the fontSmall sizes. */
.pnl-matrix.pnl-density-compact  .pnl-small { font-size: 10px; }
.pnl-matrix.pnl-density-standard .pnl-small { font-size: 10px; }
.pnl-matrix.pnl-density-full     .pnl-small { font-size: 11px; }

/* Header rows (banner + period) keep a fixed comfortable padding. */
.pnl-matrix .pnl-banner    { padding: 8px 14px; }
.pnl-matrix .pnl-ph        { padding: 8px 4px; }
.pnl-matrix .pnl-ph-total  { padding: 8px 6px; }
.pnl-matrix .pnl-th-corner2 { padding: 8px 12px; }

/* =================================================================
   DARK THEME — ported from primitives.jsx TONE_DARK, plus structural
   token overrides. Driven by Bootstrap's [data-bs-theme="dark"].
   ================================================================= */
[data-bs-theme="dark"] .pnl-matrix {
  --pnl-bg:          var(--phoenix-body-bg, #0a0a0a);
  --pnl-head-bg:     #171717;
  --pnl-head2-bg:    #1f1f1f;
  --pnl-head-text:   var(--phoenix-emphasis-color, #e5e5e5);
  --pnl-foot-text:   var(--phoenix-secondary-color, #a3a3a3);
  --pnl-border:      var(--phoenix-border-color, #404040);
  --pnl-border-mid:  #525252;
  --pnl-stripe:      #1a1a1a;
  --pnl-dim:         #737373;
  --pnl-shadow:      rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .pnl-matrix .pnl-banner-tag { background: rgba(255, 255, 255, 0.06); }

/* ACTUAL dark */
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-actual.pnl-bandhdr {
  background: #1e3a5f; color: #93c5fd; border-color: #2563eb;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-actual.pnl-bandfy {
  background: #1d4ed8; color: #93c5fd; border-color: #2563eb; border-left-color: #3b82f6;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-actual.pnl-fy { background: #1e3a5f; border-left-color: #3b82f6; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-actual.pnl-sublabel { background: #172554; color: #bfdbfe; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-actual.pnl-bandlabel { background: #1e3a5f; color: #93c5fd; }

/* FORECAST dark */
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-forecast.pnl-bandhdr {
  background: #2e1065; color: #c4b5fd; border-color: #7c3aed;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-forecast.pnl-bandfy {
  background: #6d28d9; color: #c4b5fd; border-color: #7c3aed; border-left-color: #8b5cf6;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-forecast.pnl-fy { background: #2e1065; border-left-color: #8b5cf6; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-forecast.pnl-sublabel { background: #2e1065; color: #ddd6fe; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-forecast.pnl-bandlabel { background: #2e1065; color: #c4b5fd; }

/* FINANCE dark */
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-finance.pnl-bandhdr {
  background: #422006; color: #fcd34d; border-color: #d97706;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-finance.pnl-bandfy {
  background: #b45309; color: #fcd34d; border-color: #d97706; border-left-color: #f59e0b;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-finance.pnl-fy { background: #422006; border-left-color: #f59e0b; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-finance.pnl-sublabel { background: #422006; color: #fde68a; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-finance.pnl-bandlabel { background: #422006; color: #fcd34d; }

/* REPORTING dark */
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-reporting.pnl-bandhdr {
  background: #1e293b; color: #94a3b8; border-color: #334155;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-reporting.pnl-bandfy {
  background: #334155; color: #94a3b8; border-color: #334155; border-left-color: #64748b;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-reporting.pnl-fy { background: #1e293b; border-left-color: #64748b; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-reporting.pnl-sublabel { background: #1e293b; color: #cbd5e1; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-reporting.pnl-bandlabel { background: #1e293b; color: #94a3b8; }

/* KPI dark */
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-kpi.pnl-bandhdr {
  background: #262626; color: #e5e5e5; border-color: #404040;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-kpi.pnl-bandfy {
  background: #404040; color: #e5e5e5; border-color: #404040; border-left-color: #737373;
}
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-kpi.pnl-fy { background: #262626; border-left-color: #737373; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-kpi.pnl-sublabel { background: #1f1f1f; color: #d4d4d4; }
[data-bs-theme="dark"] .pnl-matrix .pnl-tone-kpi.pnl-bandlabel { background: #262626; color: #e5e5e5; }

/* Banner state colours (active / closed / future) — light + dark. */
.pnl-matrix .pnl-banner-active { background: #eff6ff; color: #1d4ed8; border-bottom: 2px solid #3b82f6; }
.pnl-matrix .pnl-banner-closed { background: #fafafa; color: #525252; border-bottom: 2px solid #a3a3a3; }
.pnl-matrix .pnl-banner-future { background: #faf5ff; color: #5b21b6; border-bottom: 2px solid #a78bfa; }
[data-bs-theme="dark"] .pnl-matrix .pnl-banner-active { background: #172554; color: #93c5fd; border-bottom-color: #3b82f6; }
[data-bs-theme="dark"] .pnl-matrix .pnl-banner-closed { background: #171717; color: #a3a3a3; border-bottom-color: #525252; }
[data-bs-theme="dark"] .pnl-matrix .pnl-banner-future { background: #2e1065; color: #c4b5fd; border-bottom-color: #a78bfa; }