/* ══════════════════════════════════════════════════════════════════════════
   BrandForcify — dashboard & chart system
   ══════════════════════════════════════════════════════════════════════════

   A SEPARATE STYLESHEET, loaded after brandforcify.css. The main sheet is
   171 KB and is shared by every screen in the application; adding a chart
   system to it would mean editing rules that twenty other pages depend on.
   Everything here is scoped under .bfd, so nothing can reach a page that has
   not opted in.

   THE PALETTE IS NOT A MATTER OF TASTE. The categorical hues below are the
   data-visualisation skill's documented set, in its fixed order, and they were
   validated with scripts/validate_palette.js against THIS application's card
   surface (#FFFFFF) rather than the script's default:

     8 slots, adjacent pairs  — lightness band PASS, chroma floor PASS,
                                CVD separation PASS (worst ΔE 9.1 protan,
                                target ≥8), normal-vision floor PASS
                                (worst ΔE 19.6, floor ≥15)
     slots 1-3, ALL pairs     — PASS on every gate (worst CVD ΔE 9.2,
                                normal-vision ΔE 24.0)

   Three hues (#1baf7a, #eda100, #e87ba4) fall below 3:1 contrast on white.
   That is a documented *relief*, not a pass: every chart using them ships
   visible direct labels or a table view. Do not remove those labels.

   Slot order is fixed and never cycled. A ninth series folds into "Other".
   ══════════════════════════════════════════════════════════════════════════ */

.bfd {
  /* ── Categorical: identity. Fixed order, assigned by slot, never by rank. ── */
  --c1: #2a78d6;  /* blue    */
  --c2: #eb6834;  /* orange  */
  --c3: #1baf7a;  /* aqua    — sub-3:1, needs labels */
  --c4: #eda100;  /* yellow  — sub-3:1, needs labels */
  --c5: #e87ba4;  /* magenta — sub-3:1, needs labels */
  --c6: #008300;  /* green   */
  --c7: #4a3aa7;  /* violet  */
  --c8: #e34948;  /* red     */

  /* ── Sequential: magnitude. One hue, light→dark. Validated --ordinal:
        monotone L PASS, adjacent ΔL PASS, light-end contrast 2.11:1 PASS. ── */
  --s1: #86b6ef;
  --s2: #5598e7;
  --s3: #256abf;
  --s4: #104281;

  /* ── Status: reserved. Never reused as "series 5". Always shipped with an
        icon and a word, so state is never carried by colour alone. ── */
  --st-good:     #0F9A6A;
  --st-warning:  #D2860B;
  --st-serious:  #eb6834;
  --st-critical: #E24C4C;

  /* ── Surfaces & ink ──
     Taken from the application theme, so the dashboard follows whichever theme is chosen instead
     of carrying a second, fixed set of greys that stopped matching the rest of the app the moment
     the theme changed. The fallbacks are the old values. Every theme's card surface is white or
     near it, which is the surface the chart palette above was validated against. */
  --d-canvas:  var(--bf-surface-sunk, #F4F5F7);
  --d-surface: var(--bf-surface, #FFFFFF);
  --d-line:    var(--bf-border, #E6E8EC);
  --d-line-soft: var(--bf-border-soft, #F0F1F4);
  --d-ink:     var(--bf-ink, #1F2430);
  --d-ink-2:   var(--bf-text-muted, #5A6274);
  --d-ink-3:   var(--bf-text-light, #8A93A6);

  --d-radius: 14px;
  --d-shadow: 0 1px 2px rgba(23, 28, 43, .04), 0 4px 16px -10px rgba(23, 28, 43, .14);
  --d-gap: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Page shell
   ───────────────────────────────────────────────────────────────────────── */

.bfd { color: var(--d-ink); }


/* ── Slicer bar. Filters live in ONE row above the charts, never scattered
      across the cards they affect. ── */
.bfd-slicers {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: var(--d-gap);
  background: var(--d-surface); border: 1px solid var(--d-line);
  border-radius: var(--d-radius); box-shadow: var(--d-shadow);
}
.bfd-slicers__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--d-ink-3); margin-right: 2px;
}
.bfd-seg { display: inline-flex; background: var(--d-canvas); border-radius: 9px; padding: 3px; }
.bfd-seg button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--d-ink-2);
  padding: 5px 12px; border-radius: 7px; transition: background .12s, color .12s;
}
.bfd-seg button:hover { color: var(--d-ink); }
.bfd-seg button[aria-pressed="true"] {
  background: var(--d-surface); color: var(--d-ink);
  box-shadow: 0 1px 2px rgba(23, 28, 43, .10);
}
.bfd-slicers__spacer { flex: 1 1 auto; }

/* ── Explicit from/to range ── */
.bfd-range { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bfd-range__l { font-size: 11.5px; font-weight: 500; color: var(--d-ink-3); }
.bfd-date {
  font: inherit; font-size: 12px; color: var(--d-ink);
  padding: 5px 9px; border: 1px solid var(--d-line); border-radius: 8px;
  background: var(--d-surface); cursor: pointer;
}
.bfd-date:focus-visible { outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px rgba(42, 120, 214, .15); }
.bfd-range__err { font-size: 11.5px; font-weight: 600; color: var(--st-critical); }

/* The window in words. It is the caption for every figure on the page, so it sits
   in the filter row rather than being repeated on each card. */
.bfd-range__now { font-size: 11.5px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .bfd-range__now { display: none; }   /* the controls above already say it */
}

/* ─────────────────────────────────────────────────────────────────────────
   KPI tiles — a hero number is a *form*, chosen when the job is one value.
   No sparkline where there is no series to draw; an empty plot is noise.
   ───────────────────────────────────────────────────────────────────────── */

.bfd-kpis {
  display: grid; gap: var(--d-gap); margin-bottom: var(--d-gap);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.bfd-kpi {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px 16px; overflow: hidden;
  background: var(--d-surface); border: 1px solid var(--d-line);
  border-radius: var(--d-radius); box-shadow: var(--d-shadow);
  text-decoration: none; color: inherit; min-width: 0;
}
a.bfd-kpi { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.bfd-kpi:hover {
  border-color: color-mix(in srgb, var(--kpi-accent, var(--c1)) 35%, var(--d-line)); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 28, 43, .05), 0 12px 24px -14px rgba(23, 28, 43, .22);
}
a.bfd-kpi:focus-visible { outline: 2px solid var(--kpi-accent, var(--c1)); outline-offset: 2px; }

.bfd-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Sentence case, at reading size: a label is read, not scanned as a code. */
.bfd-kpi__label { font-size: 13px; font-weight: 500; color: var(--d-ink-2); }

/* The accent lives in the icon chip — a tint, not a flooded card, so the tile never competes with
   the charts that are actually encoding data. */
.bfd-kpi__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: var(--kpi-accent, var(--c1));
  background: color-mix(in srgb, var(--kpi-accent, var(--c1)) 12%, var(--d-surface));
}

/* Proportional figures at display size — tabular digits give every figure the width of a 0 and
   look loose this large. Tables keep tabular figures, where columns must align. */
.bfd-kpi__value {
  font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em;
  color: var(--d-ink); margin-top: 2px;
}
.bfd-kpi__value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--d-ink-3); margin-left: 2px; }
.bfd-kpi__sub { font-size: 12px; color: var(--d-ink-3); }

/* Trend: a quiet tint of the accent, the latest point in the accent itself. */
.bfd-kpi__spark { position: relative; display: block; height: 30px; margin-top: 8px; }
.bfd-kpi__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bfd-kpi__spark-area { fill: color-mix(in srgb, var(--kpi-accent, var(--c1)) 10%, transparent); }
.bfd-kpi__spark-line {
  fill: none; stroke: color-mix(in srgb, var(--kpi-accent, var(--c1)) 55%, var(--d-surface));
  stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round;
}
.bfd-kpi__spark-dot {
  position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--kpi-accent, var(--c1)); box-shadow: 0 0 0 2px var(--d-surface);
}

/* Delta. Carries an arrow as well as a colour — the arrow is the encoding that
   survives greyscale, print and colour blindness. */
.bfd-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.bfd-delta--up   { color: var(--st-good); }
.bfd-delta--down { color: var(--st-critical); }
.bfd-delta--flat { color: var(--d-ink-3); }

/* ─────────────────────────────────────────────────────────────────────────
   Cards & grid
   ───────────────────────────────────────────────────────────────────────── */

.bfd-grid { display: grid; gap: var(--d-gap); margin-bottom: var(--d-gap); }
.bfd-grid--2  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.bfd-grid--3  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* minmax(0,·) on both tracks: at the default min-width:auto a wide table forces
   its own track past the available width and rides over the panel beside it. */
.bfd-grid--wide-narrow { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .bfd-grid--wide-narrow { grid-template-columns: minmax(0, 1fr); } }

.bfd-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--d-surface); border: 1px solid var(--d-line);
  border-radius: var(--d-radius); box-shadow: var(--d-shadow);
}
.bfd-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px 0;
}
.bfd-card__title { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; color: var(--d-ink); }
.bfd-card__sub { font-size: 12.5px; color: var(--d-ink-3); margin: 3px 0 0; }
.bfd-card__tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bfd-card__body { padding: 14px 18px 18px; flex: 1 1 auto; min-width: 0; }
.bfd-card__foot {
  padding: 11px 18px; border-top: 1px solid var(--d-line-soft);
  font-size: 12px; color: var(--d-ink-3);
  background: color-mix(in srgb, var(--d-canvas) 45%, var(--d-surface));
  border-radius: 0 0 var(--d-radius) var(--d-radius);
}

.bfd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--d-line); background: var(--d-surface); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--d-ink-2); text-decoration: none;
  padding: 5px 11px; border-radius: 8px; transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.bfd-btn:hover { background: var(--d-canvas); color: var(--d-ink); border-color: var(--bf-border-strong, #D7DBE3); }
.bfd-btn:focus-visible { outline: 2px solid var(--bf-thread, var(--c1)); outline-offset: 2px; }
.bfd-btn[aria-pressed="true"] { background: var(--d-ink); color: var(--d-surface); border-color: var(--d-ink); }
.bfd-btn--lg { font-size: 13px; padding: 8px 15px; border-radius: 10px; box-shadow: 0 1px 2px rgba(23, 28, 43, .05); }
.bfd-btn--primary {
  background: var(--bf-thread, #F59248); border-color: var(--bf-thread, #F59248); color: #fff; font-weight: 600;
}
.bfd-btn--primary:hover { background: var(--bf-thread-dark, #D27D3D); border-color: var(--bf-thread-dark, #D27D3D); color: #fff; }

.bfd-select {
  font: inherit; font-size: 12px; color: var(--d-ink);
  padding: 5px 9px; border: 1px solid var(--d-line); border-radius: 5px;
  background: var(--d-surface); cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   Charts
   Grid and axes are RECESSIVE — they orient the eye, they are not the data.
   ───────────────────────────────────────────────────────────────────────── */

.bfd-chart { width: 100%; display: block; overflow: visible; }
.bfd-chart text { font-family: inherit; }

.bfd-grid-line { stroke: var(--d-line-soft); stroke-width: 1; }
.bfd-axis-line { stroke: var(--d-line); stroke-width: 1; }
.bfd-axis-text { font-size: 10px; fill: var(--d-ink-3); }
.bfd-axis-text--y { text-anchor: end; }
.bfd-axis-text--x { text-anchor: middle; }

/* Marks. Thin, with 4px rounded data-ends anchored to the baseline. */
.bfd-bar { rx: 3; transition: opacity .12s; }
.bfd-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bfd-area { stroke: none; }
.bfd-dot { r: 4; stroke: var(--d-surface); stroke-width: 2; }

/* A 2px surface gap between adjacent fills, so stacked segments and paired
   bars read as separate marks rather than one continuous block. */
.bfd-seg-gap { stroke: var(--d-surface); stroke-width: 2; }

/* Hover layer. An HTML/SVG chart IS interactive; the tooltip ships by default.
   Pure CSS — the application has no charting library and deliberately keeps
   JavaScript off the first-paint path, so hover is done with :hover on a
   group rather than with pointer listeners. */
.bfd-hit { fill: transparent; cursor: default; }
.bfd-tip { opacity: 0; pointer-events: none; transition: opacity .1s; }
.bfd-hover:hover .bfd-tip { opacity: 1; }
.bfd-hover:hover .bfd-crosshair { opacity: 1; }
.bfd-hover:hover .bfd-bar { opacity: .82; }
.bfd-crosshair { stroke: var(--d-ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .1s; }
.bfd-tip__bg { fill: #1F2430; rx: 5; }
.bfd-tip__t  { fill: #FFFFFF; font-size: 10.5px; font-weight: 600; }
.bfd-tip__r  { fill: #C8CEDB; font-size: 10px; }
.bfd-tip__v  { fill: #FFFFFF; font-size: 10px; font-weight: 600; }

/* Direct labels — selective, never a number on every point. */
.bfd-label { font-size: 10.5px; font-weight: 600; fill: var(--d-ink); font-variant-numeric: tabular-nums; }
.bfd-label--muted { fill: var(--d-ink-3); font-weight: 500; }

/* Legend. Always present for ≥2 series; a single series is named by the title. */
.bfd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.bfd-legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--d-ink-2); }
.bfd-legend__sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.bfd-legend__sw--line { height: 3px; border-radius: 2px; width: 14px; }
.bfd-legend__v { font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }

/* ── Ranked horizontal bars. The form for "which are biggest" when the
      category labels are words — a column chart would rotate them. ── */
.bfd-ranked { display: flex; flex-direction: column; gap: 9px; }
.bfd-rank { display: grid; grid-template-columns: minmax(84px, 33%) 1fr auto; gap: 10px; align-items: center; }
.bfd-rank__l { font-size: 12px; color: var(--d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfd-rank__track { height: 9px; background: var(--d-canvas); border-radius: 4px; overflow: hidden; }
.bfd-rank__fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.bfd-rank__v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ── Meter / quota bar ── */
.bfd-meter { display: flex; flex-direction: column; gap: 6px; }
.bfd-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bfd-meter__v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bfd-meter__v small { font-size: 13px; font-weight: 500; color: var(--d-ink-3); }
.bfd-meter__pct { font-size: 12px; font-weight: 600; color: var(--d-ink-2); font-variant-numeric: tabular-nums; }
.bfd-meter__track { height: 8px; background: var(--d-canvas); border-radius: 4px; overflow: hidden; }
.bfd-meter__fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.bfd-meter__l { font-size: 11.5px; color: var(--d-ink-3); }

/* ─────────────────────────────────────────────────────────────────────────
   Status pills — icon + word, never colour alone
   ───────────────────────────────────────────────────────────────────────── */

.bfd-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  border: 1px solid transparent; white-space: nowrap;
}
.bfd-pill__g { font-size: 10px; line-height: 1; }
.bfd-pill--good     { color: #0a6b4a; background: #E4F6EE; border-color: #BFE7D6; }
.bfd-pill--warning  { color: #8a5905; background: #FDF3DF; border-color: #F2DFB4; }
.bfd-pill--serious  { color: #9c3d16; background: #FDEDE6; border-color: #F7D3C2; }
.bfd-pill--critical { color: #972828; background: #FDECEC; border-color: #F6CACA; }
.bfd-pill--neutral  { color: var(--d-ink-2); background: var(--d-canvas); border-color: var(--d-line); }
button.bfd-pill, a.bfd-pill { cursor: pointer; text-decoration: none; }
button.bfd-pill:hover, a.bfd-pill:hover { filter: brightness(.97); }

/* ── Allowance alert panel ────────────────────────────────────────────────
   A tinted left edge rather than a tinted card. A panel washed in red or amber
   makes the table inside it hard to read and shouts the same volume whether one
   client is close to a limit or twelve have stopped — the severity is already
   carried by the pills and the per-row bars, which is where it belongs. */
.bfd-quota { margin-bottom: var(--d-gap); border-left: 3px solid var(--d-line); }
.bfd-quota.is-warning  { border-left-color: var(--st-warning); }
.bfd-quota.is-blocked  { border-left-color: var(--st-critical); }
.bfd-quota .bfd-meter__track { height: 6px; }
.bfd-quota__pct {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: var(--d-ink-3); font-variant-numeric: tabular-nums;
}

/* ── Enforcement action strip ─────────────────────────────────────────────
   One row, read left to right as the stage a matter is at. The arrows are the
   whole point: without them this is five numbers in a line and the reader has to
   work out that they are sequential. */
.bfd-actions { margin-bottom: var(--d-gap); }
.bfd-actions__head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px 0;
}
.bfd-actions__title { font-size: 13.5px; font-weight: 600; }
.bfd-actions__sub { font-size: 11.5px; color: var(--d-ink-3); }
.bfd-actions__err { padding: 0 16px 12px; font-size: 11.5px; color: var(--st-critical); }

.bfd-actions__row {
  display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap;
  padding: 10px 16px 14px;
}

.bfd-action {
  flex: 1 1 130px; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 6px;
  text-decoration: none; color: inherit;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.bfd-action:hover { background: var(--d-canvas); border-color: var(--d-line); }

.bfd-action__n {
  font-size: 22px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--d-ink);
}
.bfd-action__l { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.bfd-action__s { font-size: 10.5px; color: var(--d-ink-3); }

/* Colour only where the count means something needs doing, and only on the figure —
   a whole tile tinted amber shouts as loudly at 1 as at 300. */
.bfd-action.is-warn  .bfd-action__n { color: var(--st-warning); }
.bfd-action.is-alert .bfd-action__n { color: var(--st-serious); }
.bfd-action.is-bad   .bfd-action__n { color: var(--st-critical); }
.bfd-action.is-good  .bfd-action__n { color: var(--st-good); }

.bfd-action__arrow {
  flex: 0 0 auto; align-self: center;
  color: var(--d-ink-3); font-size: 13px; opacity: .55; user-select: none;
}
@media (max-width: 860px) {
  /* Stacked, so the arrows would point the wrong way. */
  .bfd-action__arrow { display: none; }
  .bfd-action { flex: 1 1 120px; }
}

.bfd-attention { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; }
.bfd-attention__t {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--d-ink-3); margin-right: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Table view — the relief for sub-3:1 hues, and the accessible equivalent
   of every chart on the page.
   ───────────────────────────────────────────────────────────────────────── */

.bfd-tablewrap {
  overflow-x: auto;
  margin: 0 -18px -18px; padding: 0 18px 18px;
  /* Momentum scrolling on iOS; the bar itself is styled in brandforcify.css
     alongside .table-wrapper, so the two scroll areas look the same. */
  -webkit-overflow-scrolling: touch;
}
.bfd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bfd-table th {
  text-align: left; font-size: 12px; font-weight: 500;
  color: var(--d-ink-3); padding: 9px 12px;
  border-bottom: 1px solid var(--d-line); white-space: nowrap;
}
.bfd-table td { padding: 11px 12px; border-bottom: 1px solid var(--d-line-soft); vertical-align: middle; }
.bfd-table tbody tr:last-child td { border-bottom: 0; }
.bfd-table tbody tr { transition: background-color .1s; }
.bfd-table tbody tr:hover { background: color-mix(in srgb, var(--d-canvas) 55%, var(--d-surface)); }
.bfd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bfd-table .strong { font-weight: 600; }
.bfd-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: baseline; }

/* ─────────────────────────────────────────────────────────────────────────
   Empty & loading states — honest, never a fake chart
   ───────────────────────────────────────────────────────────────────────── */

.bfd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 28px 16px; text-align: center; color: var(--d-ink-3);
  min-height: 120px;
}
.bfd-empty__g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%;
  background: var(--d-canvas); color: var(--d-ink-3);
}
.bfd-empty__t { font-size: 13px; font-weight: 600; color: var(--d-ink-2); }
.bfd-empty__s { font-size: 12px; max-width: 280px; line-height: 1.5; }

.bfd-skel {
  background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 50%, #EEF0F3 75%);
  background-size: 200% 100%; animation: bfd-sk 1.3s ease-in-out infinite; border-radius: 5px;
}
@keyframes bfd-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─────────────────────────────────────────────────────────────────────────
   Forced colours / print / reduced motion
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bfd *, .bfd *::before { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .bfd-card, .bfd-kpi, .bfd-slicers { border: 1px solid CanvasText; }
  .bfd-tip__bg { fill: Canvas; stroke: CanvasText; }
  .bfd-tip__t, .bfd-tip__v { fill: CanvasText; }
}
@media print {
  .bfd-slicers, .bfd-card__tools { display: none; }
  .bfd-card, .bfd-kpi { box-shadow: none; break-inside: avoid; }
  .bfd-tip { display: none; }
}

@media (max-width: 620px) {


  .ph__actions .bfd-btn { flex: 1 1 auto; justify-content: center; }
  .bfd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .bfd-kpi__value { font-size: 22px; }
  .bfd-rank { grid-template-columns: minmax(70px, 40%) 1fr auto; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Enforcement pipeline — every open matter on the stage it is at.
   Stage colours are the reserved status set, and each column also carries its
   step number and its name, so a stage is never identified by colour alone.
   ───────────────────────────────────────────────────────────────────────── */
.bfd-pipe { margin-bottom: var(--d-gap); }
.bfd-pipe__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 0;
}
.bfd-pipe__err { margin: 12px 18px 16px; font-size: 12.5px; color: var(--st-critical); }

.bfd-pipe__board {
  display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 10px;
  padding: 14px 18px 18px; overflow-x: auto;
}
.bfd-pipe__col {
  --stage: var(--d-ink-3);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px; border-radius: 12px; background: var(--d-canvas);
  border-top: 3px solid var(--stage);
}
.bfd-pipe__col.is-awaiting  { --stage: var(--c1); }
.bfd-pipe__col.is-followup  { --stage: var(--st-warning); }
.bfd-pipe__col.is-review    { --stage: var(--st-warning); }
.bfd-pipe__col.is-action    { --stage: var(--st-critical); }
.bfd-pipe__col.is-escalated { --stage: var(--c7); }
.bfd-pipe__col.is-resolved  { --stage: var(--st-good); }
.bfd-pipe__col.is-empty { opacity: .75; }

.bfd-pipe__colhead {
  display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--d-ink);
}
.bfd-pipe__colhead:hover .bfd-pipe__label { text-decoration: underline; }
.bfd-pipe__step {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; background: var(--stage); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.bfd-pipe__label { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfd-pipe__count { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.bfd-pipe__hint { margin: 0; font-size: 11px; line-height: 1.4; color: var(--d-ink-3); }
.bfd-pipe__none { margin: 6px 0 2px; font-size: 11.5px; color: var(--d-ink-3); }

.bfd-pipe__items { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bfd-pipe__item {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 8px;
  background: var(--d-surface); border: 1px solid var(--d-line); text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.bfd-pipe__item:hover { border-color: var(--stage); box-shadow: 0 2px 8px -4px rgba(23, 28, 43, .2); }
.bfd-pipe__item:focus-visible { outline: 2px solid var(--stage); outline-offset: 1px; }
.bfd-pipe__fileno { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--d-ink); }
.bfd-pipe__what { font-size: 11.5px; color: var(--d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfd-pipe__detail {
  font-size: 11px; line-height: 1.4; color: var(--d-ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bfd-pipe__col.is-action .bfd-pipe__detail,
.bfd-pipe__col.is-followup .bfd-pipe__detail { color: var(--d-ink-2); font-weight: 500; }
.bfd-pipe__more { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); text-decoration: none; padding: 2px 2px 0; }
.bfd-pipe__more:hover { color: var(--d-ink); text-decoration: underline; }

/* ── The dashboards now use the shared PageHeader band (title + actions), like every page.
      Its buttons are restyled for the coloured band, as the band does for the main button set:
      translucent white for the secondary action, solid white for the primary one — a primary
      button in the theme colour would vanish into a band of the same colour. ── */
.bfd > .ph { margin-bottom: 20px; }
.ph__actions .bfd-btn {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none;
}
.ph__actions .bfd-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff; }
.ph__actions .bfd-btn--primary {
  background: #fff; color: var(--bf-thread-dark, #D27D3D); border-color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .35);
}
.ph__actions .bfd-btn--primary:hover { background: #fff; color: var(--bf-ink, #333); border-color: #fff; }

/* ── Responsive polish ──────────────────────────────────────────────────────
   The pipeline forced six columns of at least 190px, so on a laptop the last stage
   (Resolved) was cut off at the card's edge. Six across only where they fit, three
   across on a laptop, and a swipeable row on a phone. */
.bfd-pipe__board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .bfd-pipe__board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bfd-pipe__board {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 82%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  }
  .bfd-pipe__col { scroll-snap-align: start; }
}
.bfd-pipe__head .bfd-btn { flex: none; white-space: nowrap; }

/* Period presets: "7 days" broke over two lines on a phone. */
.bfd-seg button { white-space: nowrap; }
@media (max-width: 640px) {
  .bfd-seg { max-width: 100%; overflow-x: auto; }
  .bfd-slicers { gap: 10px; }
}