/* The shared report table — one look and one behaviour for every report in BridgeBI.
 *
 * Miguel: "el template y viewing table deberia ser lo mismo en marketing dashboard y by program
 * pero its not, that's weird, we need to centralize… maybe in the future i add another kind of
 * report here pues necesito poder hacer the same actions in all."
 *
 * So: By Program's look becomes THE look, because it is the one that reproduces the workbook he
 * reads every Monday. The Marketing Dashboard adopts it. A future report gets it by emitting the
 * same markup — no CSS of its own, and right-click colours plus Bueno/Malo/Ojo for free.
 *
 * The Marketing Dashboard genuinely needs two things By Program does not: a frozen first column
 * and up to 26 horizontally scrolled week blocks. Those are OPT-IN modifiers on this same layer
 * (`.is-frozen`), never a second stylesheet.
 *
 * ---------------------------------------------------------------- while the migration runs
 * Several rules below name a legacy `.bp-*` class alongside the new one. That is deliberate and
 * temporary: it lets By Program keep rendering byte-identically while its markup is migrated in
 * a later step, instead of a big-bang rename that would leave the page he depends on broken in
 * between. The aliases come out once bpreport.js emits the neutral classes.
 */

/* ============================================================================ shell ===== */

.bb-rt {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  /* Numeric is the DEFAULT here. `.bp-n` was a class every new column had to remember, and a
     column that forgot it silently lost its alignment — so the table opts IN to mono figures and
     the label cell opts out. */
  font: 500 12.5px/1.25 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.bb-rt th, .bb-rt td { padding: 6px 10px; }
.bb-rt tbody td { text-align: right; color: var(--bb-ink, var(--text, #1E1B16)); }

/* A frozen first column is three coupled changes and none of them is optional:
   (a) border-collapse must become `separate`, because a sticky cell drops its borders under
       `collapse` — so every hairline below is drawn by hand;
   (b) width:100% must go, or ~149 columns compress into the viewport and destroy the very
       horizontal scroll the freeze exists to serve;
   (c) the sticky label must be OPAQUE, or the week blocks scroll visibly through it — which is
       why every tier rule below repaints `> th` as well as `> td`. */
.bb-rt.is-frozen {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.bb-rt.is-frozen tbody td, .bb-rt.is-frozen tbody th {
  border-bottom: 1px solid var(--bb-line, var(--border, #E3DED4));
}

/* Only for a frozen or vertically-scrolled table. Everything else is left alone so
   responsive.js wrapWideTables() can supply .nb-tscroll and its right-edge "more this way" mask;
   pre-wrapping forfeits that affordance and you then own it yourself. */
.bb-rt-scroll { overflow-x: auto; }

/* ============================================================================ header ==== */

.bb-rt-hg th {
  font: 800 10px/1.3 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  background: var(--bb-inset, var(--off-white, #F7F4EE));
  border-bottom: 1px solid var(--bb-line, var(--border, #E3DED4));
}
.bb-rt-hm th {
  font: 700 10px/1.3 'Outfit', system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; text-align: right;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  background: var(--bb-page, var(--warm-white, #F5F3EE));
  border-bottom: 1px solid var(--bb-line, var(--border, #E3DED4));
}
.bb-rt-grp, .bp-hg-file {
  border-left: 1px solid var(--bb-line, var(--border, #E3DED4));
  font-weight: 800;
  color: var(--bb-ink, var(--text, #1E1B16));
}
/* A group of columns THIS APP computed, not the source's. The firewall's header half. */
.bb-rt-grp-calc, .bp-hg-bb {
  background: rgba(13, 42, 94, .07) !important;
  color: var(--bb-accent, var(--navy, #0D2A5E)) !important;
  border-left: 1px solid var(--bb-line, var(--border, #E3DED4));
}
.bb-rt-grp-quiet { color: transparent; }
.bb-rt-th-dim { color: var(--bb-ink-3, var(--text-muted, #8A8478)); }
/* No colour on the computed columns: colour would read as a judgment about the FIGURE instead of
   a note about where it came from. A hairline and a dotted underline say "not from the file". */
.bb-rt-th-calc, .bp-th-calc {
  border-left: 1px solid var(--bb-line, var(--border, #E3DED4));
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.bb-rt-hlbl { text-align: left !important; }

/* ====================================================== the frozen label column ========= */

.bb-rt.is-frozen .bb-rt-lbl,
.bb-rt.is-frozen .bb-rt-hlbl {
  position: sticky; left: 0; z-index: 3;
  min-width: var(--bb-rt-lblw, 210px);
  max-width: var(--bb-rt-lblw, 210px);
  overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--bb-line, var(--border, #E3DED4));
}
.bb-rt.is-frozen .bb-rt-hlbl { z-index: 4; }

/* ============================================================================ rows ====== */

/* ORDER IS THE CONTRACT — do not re-sort. Every tier rule below is specificity (0,2,1), so the
   later one wins; alphabetising them turns every gray subtotal band white. */

.bb-rt-x, .bp-e {
  cursor: pointer;
  border-top: 1px solid var(--bb-line, var(--border, #E3DED4));
}

/* Tier 1 — the lid of a group. Solid navy, white ink, the way the workbook draws it. */
.bb-rt tbody tr.bb-rt-banner > td, .bb-rt tbody tr.bb-rt-banner > th,
.bp-total td, .bp-school td {
  background: var(--bb-accent, var(--navy, #0D2A5E));
  color: #fff; font-weight: 700;
}
/* Tier 2 — a program between a school banner and its sources. */
.bb-rt tbody tr.bb-rt-sub > td, .bb-rt tbody tr.bb-rt-sub > th,
.bp-prog td {
  background: rgba(13, 42, 94, .10); font-weight: 600;
}
/* A soft stripe with no tier promotion. */
.bb-rt tbody tr.bb-rt-quiet > td, .bb-rt tbody tr.bb-rt-quiet > th {
  background: var(--bb-hover, #F2EFE8);
}
/* Tier 4 — a single source. White, italic, muted. */
.bb-rt tbody tr.bb-rt-leaf > td, .bb-rt tbody tr.bb-rt-leaf > th,
.bp-s td {
  background: var(--bb-surface, #fff);
  border-top: 1px solid rgba(0, 0, 0, .05);
}
/* Tier 3 — the workbook's gray subtotal band. LAST because it must beat `leaf`: these rows are
   both (a source row that is also a group subtotal), and the band is what makes the tree
   readable at a glance. */
.bb-rt tbody tr.bb-rt-band > td, .bb-rt tbody tr.bb-rt-band > th,
.bp-grp td {
  background: #DBD7D0; font-weight: 700;
  color: var(--bb-accent, var(--navy, #0D2A5E));
}
.bb-rt-bold > td, .bb-rt-bold > th { font-weight: 700; }

.bb-rt tbody tr:hover > td, .bb-rt tbody tr:hover > th { background: rgba(13, 42, 94, .03); }
.bb-rt tbody tr.bb-rt-banner:hover > td, .bb-rt tbody tr.bb-rt-banner:hover > th {
  background: var(--bb-accent-2, var(--navy-light, #17407F));
}
.bb-rt tbody tr.bb-rt-sub:hover > td, .bb-rt tbody tr.bb-rt-sub:hover > th {
  background: rgba(13, 42, 94, .16);
}

/* ==================================================================== the label cell ==== */

.bb-rt-lbl, .bp-lbl {
  text-align: left;
  /* The one opt-out from the table's mono default: a name is text, not a figure. */
  font: 500 12.5px/1.3 'Outfit', system-ui, sans-serif;
  color: var(--bb-accent, var(--navy, #0D2A5E));
  /* Indentation arrives as a variable set inline on the <tr>. That replaced two hand-rolled
     padding formulas and, more to the point, two `!important`s that were fighting each other. */
  padding-left: var(--bb-rt-ind, 10px) !important;
}
.bb-rt-lbl-q {
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  font-weight: 500; font-style: italic;
}
.bb-rt-band .bb-rt-lbl-q {
  color: var(--bb-accent, var(--navy, #0D2A5E));
  font-weight: 700; font-style: normal;
}
/* Must stay a <span>: highlight.js refuses any target inside button/a/select/input, so a caret
   built as a <button> would make its own row un-highlightable. */
.bb-rt-car, .bp-car {
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  font-size: 10px; margin-right: 6px;
}
.bb-rt-kids, .bp-kids {
  display: inline-block; margin-left: 7px;
  font: 600 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  background: var(--bb-inset, var(--off-white, #F7F4EE));
  border-radius: 5px; padding: 1px 5px;
}
.bb-rt-banner .bb-rt-car, .bb-rt-banner .bb-rt-lbl { color: #fff; }
.bb-rt-banner .bb-rt-car { color: rgba(255, 255, 255, .7); }
.bb-rt-banner .bb-rt-kids { background: rgba(255, 255, 255, .18); color: #fff; }

/* ========================================================================== figures ===== */

.bb-rt-dim { color: var(--bb-ink-3, var(--text-muted, #8A8478)); }
.bb-rt-neg { color: var(--bb-red, var(--red, #B23B3B)); font-weight: 600; }
.bb-rt-pos { color: var(--bb-green, var(--green, #2E7D5B)); font-weight: 600; }
.bb-rt-strong { font-weight: 700; background: var(--bb-inset, #F7F4EE); }
.bb-rt-calc { border-left: 1px solid var(--bb-line, var(--border, #E3DED4)); }

/* A NEGATIVE STAYS RED ON NAVY. --red is unreadable against #0D2A5E; #FF9A9A clears 6.8:1.
   Whitening the whole banner is what once made Business -44%, Culinary -21% and Technology -50%
   read exactly like gains — so the banner whitens dim and pos, and explicitly does NOT touch
   neg. Note the report tables never emit .bb-rt-pos at all: they reproduce a workbook that reds
   its losses and leaves gains in plain ink, so a green figure in the body means highlight.js
   painted it, not the data. */
.bb-rt-banner .bb-rt-dim, .bb-rt-banner .bb-rt-pos { color: #fff; }
.bb-rt-banner .bb-rt-neg { color: #FF9A9A; }

/* ============================================================================ marks ===== */

/* His mark has to out-read every ground under it — navy banner, gray band, white leaf — without
   repainting any of them. `background-image` (NOT background, NOT background-color) is what
   makes that one rule work on all four tiers: the tier keeps its own background, the mark
   washes over it.
   The default is the STRONG 42% wash and the light tiers step DOWN to 14%. A light default with
   a navy bump was tried and the tint vanished on navy — this ordering reproduces the fix, not
   the bug. Qualified to `.bb-rt tbody tr…` so it outranks the hover and header-row rules, which
   otherwise erase the tint the moment the cursor lands on a marked row. */
.bb-rt tbody tr.bb-rt-mk-bad  > :first-child { box-shadow: inset 6px 0 0 var(--bb-red, var(--red, #B23B3B)); }
.bb-rt tbody tr.bb-rt-mk-good > :first-child { box-shadow: inset 6px 0 0 var(--bb-green, var(--green, #2E7D5B)); }
.bb-rt tbody tr.bb-rt-mk-eh   > :first-child { box-shadow: inset 6px 0 0 #787878; }

.bb-rt tbody tr.bb-rt-mk-bad  > td, .bb-rt tbody tr.bb-rt-mk-bad  > th,
.bb-rt tbody tr.bb-rt-mk-bad:hover  > td, .bb-rt tbody tr.bb-rt-mk-bad:hover  > th {
  background-image: linear-gradient(rgba(178, 59, 59, .42), rgba(178, 59, 59, .42));
}
.bb-rt tbody tr.bb-rt-mk-good > td, .bb-rt tbody tr.bb-rt-mk-good > th,
.bb-rt tbody tr.bb-rt-mk-good:hover > td, .bb-rt tbody tr.bb-rt-mk-good:hover > th {
  background-image: linear-gradient(rgba(46, 125, 82, .42), rgba(46, 125, 82, .42));
}
.bb-rt tbody tr.bb-rt-mk-eh   > td, .bb-rt tbody tr.bb-rt-mk-eh   > th,
.bb-rt tbody tr.bb-rt-mk-eh:hover   > td, .bb-rt tbody tr.bb-rt-mk-eh:hover   > th {
  background-image: linear-gradient(rgba(120, 120, 120, .26), rgba(120, 120, 120, .26));
}
/* On the light tiers a 42% wash drowns the numbers; the bar carries it instead. */
.bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-bad  > td, .bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-bad  > th,
.bb-rt tbody tr.bb-rt-sub.bb-rt-mk-bad   > td, .bb-rt tbody tr.bb-rt-sub.bb-rt-mk-bad   > th {
  background-image: linear-gradient(rgba(178, 59, 59, .14), rgba(178, 59, 59, .14));
}
.bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-good > td, .bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-good > th,
.bb-rt tbody tr.bb-rt-sub.bb-rt-mk-good  > td, .bb-rt tbody tr.bb-rt-sub.bb-rt-mk-good  > th {
  background-image: linear-gradient(rgba(46, 125, 82, .14), rgba(46, 125, 82, .14));
}
.bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-eh   > td, .bb-rt tbody tr.bb-rt-leaf.bb-rt-mk-eh   > th,
.bb-rt tbody tr.bb-rt-sub.bb-rt-mk-eh    > td, .bb-rt tbody tr.bb-rt-sub.bb-rt-mk-eh    > th {
  background-image: linear-gradient(rgba(120, 120, 120, .10), rgba(120, 120, 120, .10));
}

/* ===================================================================== narrow widths ==== */

/* Keyed on content width, not viewport: the sidebar changes how much room the table actually
   has and a viewport query cannot see that. */
html[data-cw="s"]  .bb-rt.is-frozen { --bb-rt-lblw: 170px; }
html[data-cw="xs"] .bb-rt.is-frozen { --bb-rt-lblw: 140px; }
html[data-cw="xs"] .bb-rt { font-size: 11.5px; }
html[data-cw="xs"] .bb-rt th, html[data-cw="xs"] .bb-rt td { padding: 5px 7px; }