/* Colour highlighting for the report tables — shared by Marketing Dashboard, By Program and the
 * Weekly Review.
 *
 * Two rules the palette has to satisfy at once: the fills must be readable behind black tabular
 * figures in both themes, and none of them may be confusable with the semantic green/red/amber
 * a MARK paints. So the neutral slots are cool and desaturated, and the warm end of the spectrum
 * is left to the marks.
 */

/* ------------------------------------------------------------------- the palette ------ */

:root {
  --bb-hl-yellow: #FDF0BC;
  --bb-hl-blue:   #D6E6F7;
  --bb-hl-purple: #E3DAF5;
  --bb-hl-pink:   #F8DAE8;
  --bb-hl-teal:   #CFEBE4;
  --bb-hl-gray:   #E2E0DA;
  --bb-hl-edge:   rgba(30, 27, 22, .22);
}
/* Dark mode gets its own set rather than an opacity trick: a translucent pastel over a dark
   surface turns muddy and stops being distinguishable from its neighbour. Defined for BOTH the
   explicit toggle and the system preference so neither can win by accident. */
:root[data-theme="dark"] {
  --bb-hl-yellow: #4A4322;
  --bb-hl-blue:   #23394F;
  --bb-hl-purple: #382F55;
  --bb-hl-pink:   #4C2B3C;
  --bb-hl-teal:   #1F4340;
  --bb-hl-gray:   #37352F;
  --bb-hl-edge:   rgba(240, 236, 228, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-hl-yellow: #4A4322;
    --bb-hl-blue:   #23394F;
    --bb-hl-purple: #382F55;
    --bb-hl-pink:   #4C2B3C;
    --bb-hl-teal:   #1F4340;
    --bb-hl-gray:   #37352F;
    --bb-hl-edge:   rgba(240, 236, 228, .28);
  }
}

/* ------------------------------------------------------- the fills, on rows and cells -- */

/* !important is load-bearing here, not laziness. Every one of these tables already paints its
   own row banding, its own hover, and (on By Program) conditional colours on the value cells —
   all at equal or higher specificity. A highlight he applied by hand must out-read every one of
   them, for the same reason his mark out-reads the auto stripe. */
.bb-hl-yellow.bb-hl-on { background: var(--bb-hl-yellow) !important; }
.bb-hl-blue.bb-hl-on   { background: var(--bb-hl-blue) !important; }
.bb-hl-purple.bb-hl-on { background: var(--bb-hl-purple) !important; }
.bb-hl-pink.bb-hl-on   { background: var(--bb-hl-pink) !important; }
.bb-hl-teal.bb-hl-on   { background: var(--bb-hl-teal) !important; }
.bb-hl-gray.bb-hl-on   { background: var(--bb-hl-gray) !important; }

/* A highlighted ROW must carry its fill through the sticky label and every cell, or the frozen
   first column stays white and the row looks half-painted while it scrolls. */
tr.bb-hl-on > th, tr.bb-hl-on > td { background: inherit !important; }

/* A CELL highlight gets an outline as well as a fill: at one cell wide, a pastel alone is easy
   to mistake for the table's own banding. */
td.bb-hl-on { box-shadow: inset 0 0 0 1px var(--bb-hl-edge); }

/* ------------------------------------------------------------------- the popover ------- */

.bb-hl-pop {
  position: absolute; z-index: 9999;
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, var(--border, #E3DED4));
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(30, 27, 22, .18);
  font: 500 12px/1.3 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink, var(--text, #1E1B16));
}
/* Names what was right-clicked. A cell shows its column too, so there is never a question
   about which number the colour is landing on — which is what the CELDA|FILA switch used to
   ask, badly. */
.bb-hl-scope {
  display: flex; flex-direction: column; gap: 1px;
  max-width: 230px;
}
.bb-hl-scope b {
  font: 600 12px/1.25 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink, var(--text, #1E1B16));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-hl-scope span {
  font: 500 10.5px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-hl-row { display: flex; align-items: center; gap: 5px; }
.bb-hl-cap {
  font: 600 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
  margin-right: 2px;
}
.bb-hl-sep { height: 1px; background: var(--bb-line, var(--border, #E3DED4)); }

/* Explicit box metrics: a bare `button { padding: 10px 16px }` lives in this app's global CSS
   and would blow a 22px swatch out to a rectangle. */
.bb-hl-sw {
  width: 22px; height: 22px; padding: 0; flex: none;
  border: 1px solid var(--bb-hl-edge);
  border-radius: 5px; cursor: pointer;
}
.bb-hl-sw.bb-hl-yellow { background: var(--bb-hl-yellow); }
.bb-hl-sw.bb-hl-blue   { background: var(--bb-hl-blue); }
.bb-hl-sw.bb-hl-purple { background: var(--bb-hl-purple); }
.bb-hl-sw.bb-hl-pink   { background: var(--bb-hl-pink); }
.bb-hl-sw.bb-hl-teal   { background: var(--bb-hl-teal); }
.bb-hl-sw.bb-hl-gray   { background: var(--bb-hl-gray); }
.bb-hl-sw:hover { transform: scale(1.09); }
.bb-hl-sw.on {
  box-shadow: 0 0 0 2px var(--bb-surface, #fff), 0 0 0 3.5px var(--bb-accent, var(--navy, #0D2A5E));
}

.bb-hl-pencil, .bb-hl-mk, .bb-hl-clear, .bb-hl-save {
  padding: 3px 8px; flex: none;
  font: 600 11px/1.4 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-2, var(--text-muted, #6A6459));
  background: var(--bb-inset, #F7F4EE);
  border: 1px solid var(--bb-line, var(--border, #E3DED4));
  border-radius: 5px; cursor: pointer;
}
.bb-hl-pencil { margin-left: 3px; }
.bb-hl-pencil:hover, .bb-hl-mk:hover, .bb-hl-clear:hover, .bb-hl-save:hover {
  background: var(--bb-hover, #F0ECE4);
}
.bb-hl-marks { gap: 4px; }
/* Labelled, not bare glyphs: these three are the call that reaches the Weekly Review, and a
   lone triangle next to six colour chips read as a seventh colour. */
.bb-hl-mk {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 6px; text-align: center;
}
.bb-hl-mk i { font: 600 10px/1 'Outfit', system-ui, sans-serif; font-style: normal; }
/* The marks keep the semantic colours the rest of the app uses for them, precisely so the
   neutral swatches above cannot be mistaken for a judgment. */
.bb-hl-mk-good.on { color: #fff; background: var(--bb-green, #2E7D5B); border-color: var(--bb-green, #2E7D5B); }
.bb-hl-mk-bad.on  { color: #fff; background: var(--bb-red, #B3261E);   border-color: var(--bb-red, #B3261E); }
.bb-hl-mk-eh.on   { color: #fff; background: var(--bb-orange, #B0700F); border-color: var(--bb-orange, #B0700F); }
.bb-hl-clear { width: 100%; text-align: center; }

/* ---------------------------------------------------------------- renaming the colours - */

.bb-hl-names { display: flex; flex-direction: column; gap: 5px; }
.bb-hl-name { display: flex; align-items: center; gap: 7px; }
.bb-hl-name i { display: block; }
.bb-hl-name input {
  flex: 1 1 auto; min-width: 0; width: 150px;
  padding: 4px 7px;
  font: 500 12px/1.3 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink, var(--text, #1E1B16));
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, var(--border, #E3DED4));
  border-radius: 5px;
}
.bb-hl-name input:focus {
  outline: none;
  border-color: var(--bb-accent, var(--navy, #0D2A5E));
}
.bb-hl-save { width: 100%; margin-top: 2px; text-align: center; }

/* The palette opens on RIGHT-click, so the cursor says context-menu — pointer would promise
   that a left click does something, which is exactly the mistake this replaced. */
[data-col]:hover { cursor: context-menu; }


/* ------------------------------------------------------------------ multi-select ------- */

/* Cmd/Ctrl-click adds a target, Shift-click extends a rectangle. The outline has to survive on
   top of an existing highlight fill AND on By Program's navy banner rows, so it is a ring rather
   than a background — a second fill would hide the colour already there. */
.bb-hl-sel {
  outline: 2px solid var(--bb-accent, var(--navy, #0D2A5E));
  outline-offset: -2px;
  position: relative;
}
tr.bb-hl-sel > td, tr.bb-hl-sel > th {
  border-top: 1px solid var(--bb-accent, var(--navy, #0D2A5E));
  border-bottom: 1px solid var(--bb-accent, var(--navy, #0D2A5E));
}
/* While a selection is live the whole table stops showing a text cursor, so it reads as being in
   a picking mode rather than as text that failed to select. */
.bb-hl-picking, .bb-hl-picking * { user-select: none; }

/* The count replaces the row/column name in the popover header when a selection is being
   applied, because naming one of six rows would be a lie about what is about to change. */
.bb-hl-scope b.bb-hl-count { color: var(--bb-accent, var(--navy, #0D2A5E)); }
.bb-hl-hint {
  font: 500 10px/1.35 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-3, var(--text-muted, #8A8478));
}