/* ============================================================================
   Balance sheet by Class — UI upgrade (design_handoff .bs-* / balance-sheet.html)
   ----------------------------------------------------------------------------
   CONTENT IS UNCHANGED. Every column, figure and total is what
   admin/dashboard/class_wise_balance_sheet.php already computes. Only the KPI
   strip is new markup, and it reads keys of $monthly_log_sum that the table
   below already uses — so the two foot to the same numbers by construction.

   Scoped to #balance_sheet_class_wise, the tab pane id the dashboard already
   uses, so nothing outside that pane can be touched.

   Inside @media screen. This sheet is printed regularly and the view carries its
   own carefully tuned @media print block — none of this may reach it.
   ============================================================================ */

@media screen {

  /* ── KPI strip ────────────────────────────────────────────────────────── */

  #balance_sheet_class_wise .bs-kpi {
    display: grid;
    grid-template-columns: repeat(5, 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;
  }
  #balance_sheet_class_wise .bs-kpi > div {
    background: var(--pt-surface, #fff);
    padding: 12px 15px 13px;
    position: relative;
    overflow: hidden;
  }
  #balance_sheet_class_wise .bs-kpi__rule { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
  #balance_sheet_class_wise .bs-kpi__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: 5px; line-height: 1;
  }
  #balance_sheet_class_wise .bs-kpi__note {
    font: 400 10.5px var(--pt-font, inherit);
    color: var(--pt-muted, #8d94a8);
    margin-top: 6px;
  }
  #balance_sheet_class_wise .bs-lbl {
    font: 500 9px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--pt-muted-2, #a3aabb);
  }
  #balance_sheet_class_wise .bs-bar {
    height: 6px; border-radius: 3px;
    background: var(--pt-border-2, #eef2f7);
    margin-top: 8px; overflow: hidden;
  }
  #balance_sheet_class_wise .bs-bar > span {
    display: block; height: 100%; border-radius: 3px;
    background: var(--pt-ok, #1f9d64);
  }

  /* ── The ledger ───────────────────────────────────────────────────────── */

  #balance_sheet_class_wise #balance_sheet_table {
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* FROZEN FIRST COLUMN. This table runs past thirty columns and is read by
     scrolling sideways; without it the class name leaves the screen and every
     figure becomes anonymous. The single most useful change on this sheet. */
  #balance_sheet_class_wise #balance_sheet_table tbody tr > *:first-child,
  #balance_sheet_class_wise #balance_sheet_table tfoot tr > *:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pt-surface, #fff);
    box-shadow: 1px 0 0 var(--pt-border-2, #eef2f7);
  }
  #balance_sheet_class_wise #balance_sheet_table thead tr > *:first-child {
    position: sticky;
    left: 0;
    z-index: 4;                       /* above its own row AND the body column */
    box-shadow: 1px 0 0 var(--pt-border-2, #eef2f7);
  }
  #balance_sheet_class_wise #balance_sheet_table tbody tr:hover > *:first-child { background: #fbfcfe; }

  /* Group header band (Fee Status / Arrears / Fine / Advance / Other). The view
     paints these with .bg-purple and .bg-indigo — solid saturated blocks that
     dominate a screen otherwise made of figures. The handoff sets them as quiet
     mono labels over the band, which is what a group header is for. */
  #balance_sheet_class_wise #balance_sheet_table thead th {
    font: 500 9.5px var(--pt-mono, ui-monospace, monospace) !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: var(--pt-surface-alt, #f8fafc) !important;
    color: var(--pt-text-3, #6b7288) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border, #e8edf3) !important;
    padding: 6px 13px !important;
    vertical-align: bottom;
  }
  #balance_sheet_class_wise #balance_sheet_table thead th[colspan] {
    color: var(--pt-muted-2, #a3aabb) !important;
    font-size: 9px !important;
    letter-spacing: .7px;
    text-align: center;
    border-bottom: 0 !important;
  }
  /* A group's first column carries the divider, so the bands read as bands
     without needing a fill. */
  #balance_sheet_class_wise #balance_sheet_table thead th[colspan] + th[colspan] { border-left: 1px solid #eef1f7 !important; }

  #balance_sheet_class_wise #balance_sheet_table tbody td {
    font: 400 12px var(--pt-mono, ui-monospace, monospace);
    color: var(--pt-text, #151a2d);
    padding: 8px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border-3, #f1f5f9) !important;
    vertical-align: middle;
  }
  #balance_sheet_class_wise #balance_sheet_table tbody tr > *:first-child {
    font-family: var(--pt-font, inherit) !important;
    font-weight: 500;
    text-align: left;
  }
  #balance_sheet_class_wise #balance_sheet_table tbody tr:hover td { background: #fbfcfe; }

  /* The grand-total row is a conclusion. */
  #balance_sheet_class_wise #balance_sheet_table tfoot td,
  #balance_sheet_class_wise #balance_sheet_table tfoot th {
    font: 600 12px 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: 10px 13px !important;
  }

  /* Meaning through colour, on the utilities the view already emits. */
  #balance_sheet_class_wise .text-success { color: var(--pt-ok, #1f9d64) !important; font-weight: 500; }
  #balance_sheet_class_wise .text-danger  { color: var(--pt-danger, #d64545) !important; font-weight: 600; }
  #balance_sheet_class_wise .text-warning { color: var(--pt-warn-text, #8a5a1b) !important; }

  /* The highlighted-column tint the view applies (bg-light / bg-pink-100) is
     replaced by a far quieter ground — a saturated fill down a whole column
     competes with the figures it is meant to frame. */
  #balance_sheet_class_wise #balance_sheet_table .bg-pink-100,
  #balance_sheet_class_wise #balance_sheet_table td.bg-light,
  #balance_sheet_class_wise #balance_sheet_table th.bg-light { background: #fcfdfe !important; }

  #balance_sheet_class_wise .table-responsive { border-radius: var(--pt-r-md, 10px); }

  @media (max-width: 1180px) {
    #balance_sheet_class_wise .bs-kpi { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    #balance_sheet_class_wise .bs-kpi { grid-template-columns: 1fr; }
  }

}
/* end @media screen */