/* ============================================================================
   Financial Summary — UI upgrade (design_handoff .fs-* / fee-summary.html)
   ----------------------------------------------------------------------------
   CONTENT IS UNCHANGED. Every figure, column, total and note stays exactly as
   the Financial Summary pane already computes it — this file only changes how
   it looks. No markup was edited: the whole thing hangs off #balance_sheet_summary,
   the tab pane id the dashboard already uses, so there is nothing to keep in
   step and nothing to revert but this file.

   What it brings from the handoff:
     · panels with a real border and one soft shadow instead of flat cards
     · mono tabular figures throughout — a money column that scans as a column
     · uppercase mono column headers on a tinted band
     · semantic colour per meaning: undue amber, advance violet, collections
       green, balance red, and the two figures that matter (Net Due, Balance)
       carried on tinted grounds
     · a heavier, separated total row — a conclusion, not another row

   Inside @media screen, so the printed report is byte-identical.
   ============================================================================ */

@media screen {

  /* ── Panels ───────────────────────────────────────────────────────────── */

  #balance_sheet_summary .card {
    background: var(--pt-surface, #fff);
    border: 1px solid var(--pt-border, #e8edf3);
    border-radius: var(--pt-r-md, 10px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  #balance_sheet_summary .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pt-border-2, #eef2f7);
    padding: 13px 16px;
  }
  #balance_sheet_summary .card-title {
    font: 600 13px var(--pt-font, inherit);
    color: var(--pt-text, #151a2d);
    letter-spacing: -.1px;
    margin: 0;
  }
  /* The "— August 2026" qualifier beside a title is metadata, so it is set as
     metadata rather than as smaller body text. */
  #balance_sheet_summary .card-title small,
  #balance_sheet_summary .card-title .text-muted {
    font: 400 10px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--pt-muted-2, #a3aabb);
  }

  /* ── Tables ───────────────────────────────────────────────────────────── */

  #balance_sheet_summary table.table {
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
  }

  /* Column heads: mono, uppercase, on the tinted band, hairline under. The
     grid lines between every header cell are dropped — with right-aligned
     figures the alignment already separates the columns, and the box drawing
     was the loudest thing on the screen. */
  #balance_sheet_summary table.table thead th {
    font: 500 9.5px var(--pt-mono, ui-monospace, monospace) !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pt-text-3, #6b7288) !important;
    background: var(--pt-surface-alt, #f8fafc) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border, #e8edf3) !important;
    padding: 8px 14px !important;
    vertical-align: bottom;
    white-space: nowrap;
  }

  #balance_sheet_summary table.table tbody td {
    font: 400 12px var(--pt-mono, ui-monospace, monospace);
    color: var(--pt-text, #151a2d);
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border-3, #f1f5f9) !important;
    vertical-align: middle;
  }

  /* The row label is prose, not a figure — proportional and left aligned. */
  #balance_sheet_summary table.table tbody td:first-child,
  #balance_sheet_summary table.table thead th:first-child,
  #balance_sheet_summary table.table tfoot td:first-child,
  #balance_sheet_summary table.table tfoot th:first-child {
    font-family: var(--pt-font, inherit) !important;
    font-weight: 500;
    text-align: left !important;
    text-transform: none;
    letter-spacing: 0;
  }

  #balance_sheet_summary table.table tbody tr:hover td { background: #fbfcfe; }

  /* Totals read as a conclusion. */
  #balance_sheet_summary table.table tfoot td,
  #balance_sheet_summary table.table tfoot th,
  #balance_sheet_summary table.table tr.fcs-total td,
  #balance_sheet_summary table.table tr.fcs-total th {
    font: 600 12.5px var(--pt-mono, ui-monospace, monospace) !important;
    color: var(--pt-text, #151a2d) !important;
    background: var(--pt-page, #f6f8fb) !important;
    border-top: 1px solid var(--pt-border, #e8edf3) !important;
    border-bottom: 1px solid var(--pt-border, #e8edf3) !important;
    padding: 11px 14px !important;
  }

  /* ── Meaning through colour ───────────────────────────────────────────── */
  /*
     Bootstrap utilities the view already emits are re-tinted to the handoff's
     palette. Nothing is recoloured that did not already carry that meaning:
     a green figure was already a collection, a red one already a balance.
  */
  #balance_sheet_summary .text-success { color: var(--pt-ok, #1f9d64) !important; font-weight: 500; }
  #balance_sheet_summary .text-danger  { color: var(--pt-danger, #d64545) !important; font-weight: 600; }
  #balance_sheet_summary .text-warning { color: var(--pt-warn-text, #8a5a1b) !important; }
  #balance_sheet_summary .text-primary { color: var(--pt-primary, #2f5fd0) !important; }

  /* A zero is information, but it is not news — it should not draw the eye the
     way a figure does. */
  #balance_sheet_summary table.table tbody td.text-right:not([class*="text-"]) { color: var(--pt-text, #151a2d); }

  /* ── Charts ───────────────────────────────────────────────────────────── */

  #balance_sheet_summary .chart-container {
    background: var(--pt-surface, #fff);
    border-radius: var(--pt-r-md, 10px);
  }

  /* ── The definitions block ────────────────────────────────────────────── */
  /*
     The pane closes with a dense paragraph defining Fee Receivable, Undue,
     Advance Adjusted, Net Due, Fee Waived, Fee Withdrawn, Balance Fee and New
     Advance. The handoff sets those as a quiet reference block rather than a
     wall of small print, so it is styled as one: readable line height, a
     surface of its own, and the defined TERMS picked out so the block can be
     scanned for the one you need instead of read.
  */
  #balance_sheet_summary .card-body > .text-muted:last-child,
  #balance_sheet_summary .fcs-defs {
    display: block;
    background: var(--pt-surface-alt, #f8fafc);
    border: 1px solid var(--pt-border-2, #eef2f7);
    border-radius: var(--pt-r, 8px);
    padding: 12px 14px;
    margin-top: 12px;
    font: 400 11px/1.6 var(--pt-font, inherit) !important;
    color: var(--pt-text-3, #6b7288) !important;
  }
  #balance_sheet_summary .card-body > .text-muted:last-child b,
  #balance_sheet_summary .fcs-defs b {
    font-weight: 600;
    color: var(--pt-text, #151a2d);
  }

  @media (max-width: 1180px) {
    #balance_sheet_summary table.table thead th,
    #balance_sheet_summary table.table tbody td { padding: 7px 10px !important; }
  }

}
/* end @media screen */

/* ============================================================================
   Financial Summary — the components from fee-summary.html
   KPI strip, waterfall, composition, insight. Markup is emitted by
   balance_sheet/fee_collection_summary_new.php from figures it already computes.
   ============================================================================ */

@media screen {

  /* ── KPI strip ────────────────────────────────────────────────────────── */
  /* 1px gap over a border-coloured ground: four panels sharing hairlines,
     without four separate borders doubling up where they meet. */
  .fcs-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--pt-border, #e8edf3);
    border: 1px solid var(--pt-border, #e8edf3);
    border-radius: var(--pt-r-md, 10px);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .fcs-kpi > div { background: var(--pt-surface, #fff); padding: 13px 16px 14px; position: relative; overflow: hidden; }
  .fcs-kpi__rule { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
  .fcs-kpi__val {
    font: 600 26px var(--pt-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--pt-text, #151a2d);
    letter-spacing: -.9px; margin-top: 6px; line-height: 1;
  }
  .fcs-kpi__note { font: 400 10.5px var(--pt-font, inherit); color: var(--pt-muted, #8d94a8); margin-top: 7px; }
  .fcs-kpi__pair { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
  .fcs-kpi__sub { font: 600 18px var(--pt-mono, ui-monospace, monospace); color: var(--pt-text, #151a2d); line-height: 1; }
  .fcs-kpi__subl { font: 400 10px var(--pt-font, inherit); color: var(--pt-muted, #8d94a8); margin-top: 3px; }

  .fcs-lbl {
    font: 500 9px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--pt-muted-2, #a3aabb);
  }

  .fcs-bar { height: 6px; border-radius: 3px; background: var(--pt-border-2, #eef2f7); margin-top: 9px; overflow: hidden; }
  .fcs-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--pt-ok, #1f9d64); }

  /* ── Masthead ─────────────────────────────────────────────────────────────
     The pane opened straight onto the KPI strip, so nothing stated which month the
     figures covered or when they were computed. The stamp on the right is the half
     that matters: the class-wise balance sheet already carries one specifically so
     the two screens can be compared, and its own note says the totals must match
     only when both stamps do. This is the screen those comparisons start from, so
     without a stamp here that mechanism was one-sided. */
  .fcs-mast { background: var(--pt-surface, #fff); border: 1px solid var(--pt-border, #e8edf3);
    border-radius: var(--pt-r-md, 10px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 12px 16px; margin-bottom: 14px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .fcs-mast__id { display: flex; align-items: center; gap: 11px; }
  .fcs-mast__badge { width: 38px; height: 38px; border-radius: 11px; background: #eff6ff; color: #2563eb;
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
  .fcs-mast h1 { font: 800 16.5px/1.2 var(--pt-font, inherit); color: var(--pt-text, #151a2d); margin: 0;
    letter-spacing: -.2px; }
  .fcs-mast small { display: block; font: 600 11.5px var(--pt-font, inherit); color: var(--pt-muted, #8d94a8);
    margin-top: 2px; }
  .fcs-mast__at { font: 700 10px var(--pt-mono, ui-monospace, monospace); letter-spacing: .5px;
    text-transform: uppercase; color: var(--pt-muted-2, #a3aabb); text-align: right; }
  .fcs-mast__at b { display: block; font: 600 12px var(--pt-mono, ui-monospace, monospace); letter-spacing: 0;
    text-transform: none; color: #475569; font-variant-numeric: tabular-nums; margin-top: 2px; }

  /* ── Layout ───────────────────────────────────────────────────────────── */
  .fcs-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 14px; }
  .fcs-side { display: flex; flex-direction: column; gap: 14px; }
  /* The balance panel absorbs the column's spare height so both cards in .fcs-two end level.
     .fcs-two already stretches its two grid ITEMS, but the right item is this wrapper, not the
     card — so the card kept sizing to its own content and fell short of the waterfall beside it
     whenever the conditional callout underneath did not render, which is most of the time. */
  .fcs-side > .fcs-panel { flex: 1 1 auto; }
  .fcs-panel {
    background: var(--pt-surface, #fff);
    border: 1px solid var(--pt-border, #e8edf3);
    border-radius: var(--pt-r-md, 10px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  .fcs-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
  .fcs-panel__title { font: 600 13px var(--pt-font, inherit); color: var(--pt-text, #151a2d); letter-spacing: -.1px; }
  .fcs-panel__meta {
    font: 400 10px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .5px; text-transform: uppercase; color: var(--pt-muted-2, #a3aabb);
  }
  .fcs-panel__lede { font: 400 11px var(--pt-font, inherit); color: var(--pt-muted, #8d94a8); margin-bottom: 16px; }
  .fcs-empty { font: 400 11.5px var(--pt-font, inherit); color: var(--pt-muted-2, #a3aabb); padding: 18px 0; text-align: center; }

  /* ── Waterfall ────────────────────────────────────────────────────────── */
  /* Definite pixel height on the track, so a bar can never be clamped by a
     percentage resolving against an auto-height parent. */
  .fcs-fall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .fcs-fall__col { display: flex; flex-direction: column; gap: 8px; }
  .fcs-fall__val { font: 600 11px var(--pt-mono, ui-monospace, monospace); text-align: center; }
  .fcs-fall__track { position: relative; height: 156px; }
  .fcs-fall__bar,
  .fcs-fall__cut,
  .fcs-fall__ghost { position: absolute; left: 0; right: 0; bottom: 0; }
  .fcs-fall__bar { border-radius: 5px 5px 0 0; }
  .fcs-fall__ghost { border-radius: 5px 5px 0 0; background: var(--pt-border-3, #f1f5f9); }
  .fcs-fall__cap { font: 500 10px var(--pt-font, inherit); color: var(--pt-text-2, #3c4257); text-align: center; line-height: 1.3; }
  .fcs-fall__cap span { color: var(--pt-muted-2, #a3aabb); font-weight: 400; }

  /* ── Composition ──────────────────────────────────────────────────────── */
  .fcs-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 1px; }
  .fcs-legend {
    display: grid; grid-template-columns: 12px 1fr auto 52px;
    align-items: center; gap: 9px; padding: 7px 0;
    border-bottom: 1px solid var(--pt-border-3, #f1f5f9);
  }
  .fcs-legend:last-child { border-bottom: 0; }
  .fcs-legend__dot { width: 8px; height: 8px; border-radius: 2px; }
  .fcs-legend__name { font: 400 11.5px var(--pt-font, inherit); color: var(--pt-text-2, #3c4257); }
  .fcs-legend__val {
    font: 500 11.5px var(--pt-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums; color: var(--pt-text, #151a2d);
  }
  .fcs-legend__pct { font: 400 10.5px var(--pt-mono, ui-monospace, monospace); color: var(--pt-muted-2, #a3aabb); text-align: right; }

  /* ── Insight ──────────────────────────────────────────────────────────── */
  .fcs-insight {
    background: var(--pt-surface, #fff);
    border: 1px solid var(--pt-warn-line, #f0d9b5);
    border-radius: var(--pt-r-md, 10px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 13px 16px 14px; position: relative; overflow: hidden;
  }
  .fcs-insight__rule { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pt-warn, #d08b2c); }
  .fcs-insight__body { font: 400 11.5px/1.55 var(--pt-font, inherit); color: var(--pt-text-2, #3c4257); margin-top: 7px; }
  .fcs-insight__body b { font-family: var(--pt-mono, ui-monospace, monospace); font-weight: 600; }
  .fcs-insight__acts { display: flex; gap: 8px; margin-top: 12px; }
  .fcs-btn {
    display: inline-flex; align-items: center; height: 29px; padding: 0 11px;
    border-radius: 7px; border: 1px solid var(--pt-border, #e8edf3);
    background: var(--pt-surface, #fff);
    font: 500 11.5px var(--pt-font, inherit); color: var(--pt-text-2, #3c4257);
    text-decoration: none;
  }
  .fcs-btn:hover { background: var(--pt-page, #f6f8fb); color: var(--pt-text, #151a2d); text-decoration: none; }

  @media (max-width: 1180px) {
    .fcs-two { grid-template-columns: 1fr; }
    .fcs-kpi { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .fcs-kpi { grid-template-columns: 1fr; }
    .fcs-fall { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  }

}

/* ============================================================================
   Fee Collection Summary — colour by the NATURE of each column
   ----------------------------------------------------------------------------
   Nine fixed columns, so they are addressed by position on .fcs-equal-cols (the
   class the summary table already carries). Three meanings, three colours:

     BLUE   what is expected — receivable, undue, advance adjusted, net due
     GREEN  what came in     — collections
     RED    what is lost or still owed — waived, withdrawn, balance

   The two figures a reader is actually hunting for, Net Due and Balance Fee, are
   also the only ones set in semibold, so weight and colour agree rather than
   competing.
   ============================================================================ */

@media screen {

  /* 2 Fee Receivable · 3 Undue · 4 Advance Adjusted · 5 Net Due — expected */
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(2),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(3),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(4),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(5),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(2),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(3),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(4),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(5) {
    color: var(--pt-primary, #2f5fd0) !important;
  }

  /* 6 Fee Collections — received */
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(6),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(6) {
    color: var(--pt-ok, #1f9d64) !important;
  }

  /* 7 Fee Waived · 8 Fee Withdrawn · 9 Balance Fee — lost or still owed */
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(7),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(8),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(9),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(7),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(8),
  #balance_sheet_summary table.fcs-equal-cols tfoot th:nth-child(9) {
    color: var(--pt-danger, #d64545) !important;
  }

  /* The two that matter carry the weight as well as the colour. */
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(5),
  #balance_sheet_summary table.fcs-equal-cols tbody td:nth-child(9) { font-weight: 600; }

  /* A zero is not a loss and an em-dash is not a figure — neither should be
     shouting in red or blue. */
  #balance_sheet_summary table.fcs-equal-cols tbody td.fcs-nil,
  #balance_sheet_summary table.fcs-equal-cols tbody td.text-muted {
    color: var(--pt-disabled, #c2c8d6) !important;
    font-weight: 400;
  }

  /* Column heads take the same three colours, so the header names the meaning
     rather than the reader having to infer it from the figures below. */
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(2),
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(3),
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(4),
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(5) { color: var(--pt-primary, #2f5fd0) !important; }
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(6) { color: var(--pt-ok, #1f9d64) !important; }
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(7),
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(8),
  #balance_sheet_summary table.fcs-equal-cols thead th:nth-child(9) { color: var(--pt-danger, #d64545) !important; }

}

/* ============================================================================
   Cash Flow — totals row (income-expenses.html)
   Scoped to #income_and_expense, the tab pane id the dashboard uses.
   ============================================================================ */

@media screen {

  #income_and_expense .ie-totals-card { overflow: hidden; }

  /* flex-direction:row is load-bearing — Bootstrap's .card sets column, which is
     what collapsed the previous strip into a 150px right-aligned stack. */
  #income_and_expense .ie-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 0;
  }
  #income_and_expense .ie-totals > div {
    padding: 12px 18px;
    border-right: 1px solid var(--pt-border-3, #f1f5f9);
  }
  #income_and_expense .ie-totals > div:last-child { border-right: 0; }

  #income_and_expense .ie-totals__key { display: flex; align-items: center; gap: 7px; }
  #income_and_expense .ie-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  #income_and_expense .ie-lbl {
    font: 500 9px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--pt-muted-2, #a3aabb);
  }
  #income_and_expense .ie-totals__val {
    font: 600 22px var(--pt-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--pt-text, #151a2d);
    letter-spacing: -.7px; margin-top: 6px; line-height: 1;
  }
  /* Best month: the NAME is the answer, so it is set in the text face at the
     value's size; the amount beside it is supporting detail. */
  #income_and_expense .ie-totals__best { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
  #income_and_expense .ie-totals__best > span:first-child {
    font: 600 22px var(--pt-font, inherit);
    color: var(--pt-text, #151a2d);
    letter-spacing: -.7px; line-height: 1;
  }
  #income_and_expense .ie-totals__best > span:last-child {
    font: 400 11.5px var(--pt-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--pt-muted, #8d94a8);
  }

  @media (max-width: 900px) {
    #income_and_expense .ie-totals { grid-template-columns: 1fr 1fr; }
    #income_and_expense .ie-totals > div:nth-child(2n) { border-right: 0; }
  }

}