/* ============================================================================
   DFC FACTORY HUB — POWER BI VISUAL STANDARD
   ----------------------------------------------------------------------------
   Applies the enterprise BI standard to the existing DASH chart kit. This is a
   DELTA, not a rewrite: the audit found the kit already conformant on padding
   (14px 16px), horizontal-only gridlines, top-left titles via dashCard(), and
   K/M/B axis abbreviation via DASH.fmtAxis -> DASH.fmtCompact.

   PALETTE IS CONSERVED. Every brand and series colour is left exactly as it is:
     brand       #1B4332  #2D6A4F  #F1E3C8
     categorical #7CC7E8 #1F4E79 #E8992B #A2C617 #C0392B #8E7CC3
                 #2f8f5b #E3A53C #6aa0d8 #b4b2a9 #d98cc0 #5bb0a8
     status      #166534  #b45309  #b91c1c  #1e40af
   Nothing below assigns a hue to data. The only colours introduced are the
   standard's neutral chrome - charcoal text, muted slate, faint gridline - and
   they touch axes, labels and rules only.

   HOW THE SVG IS REACHED WITHOUT TOUCHING JS
   The chart SVGs paint gridlines with stroke="var(--color-border)" and tick
   labels with fill="var(--color-faint)". Custom properties INHERIT, so
   redefining those two on .dash-card retargets them inside the chart and
   nowhere else. No attribute-selector guesswork, no global token change, and
   every chart in all 88 screens inherits it at once.

   TO REMOVE: delete the <link> to this file. No source file is modified.
   ========================================================================== */

/* ── Chart container ──────────────────────────────────────────────────────── */
.dash-card {
  /* Standard chrome, scoped. These two lines are what reach into the SVG. */
  --color-border: #E1E1E1;   /* gridlines + the card's own hairline */
  --color-faint:  #605E5C;   /* axis tick labels (muted slate) */

  background: #FFFFFF;
  color: #252423;                       /* charcoal, never pitch black */
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  padding: 16px;                        /* mandated 12-16px inner padding */
  /* !important because the industrial skin strips shadows app-wide with
     !important of its own; this is the one place the BI standard overrides it. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
}

/* ── Type scale — Power BI UI hierarchy ───────────────────────────────────── */
/* dashCard() emits the title as the card's first heading and always emits the
   subtitle div (blank when absent) so sibling cards in a 2-up row stay aligned. */
.dash-card > h3,
.dash-card > h4,
.dash-card > .dash-h {
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #252423;
  text-align: left;
  margin: 0 0 2px;
}
.dash-card .dash-sub {
  font-size: 11px;
  font-weight: 400;
  color: #605E5C;                       /* muted charcoal, directly below title */
  margin: 0 0 12px;
  text-align: left;
}

/* Axis tick labels and legend text: 9-10pt, regular.

   ONLY WHERE THE CHART DID NOT SAY. This read `.dash-card svg text`, and a font-size on an SVG
   element is a PRESENTATION ATTRIBUTE - any CSS rule beats it - so this one quietly overrode every
   size the chart kit computed. Measured 13 Oct 2026: 1,182 of the app's 1,473 chart labels painted
   at a flat 10px whatever they asked for. A gauge centre sized to fill a 114-unit hole asked for 44
   and rendered the same 10px as an axis tick, which is why the donut readings could not be read.
   :not([font-size]) keeps the normalisation for labels that express no preference and gets out of
   the way of the ones that do. */
.dash-card svg text:not([font-size]) { font-size: 10px; font-weight: 400; }
.dash-legend, .dash-legend span,
.dash-split .dash-legend, .dash-split .dash-legend span,
.dash-card .dash-legend, .dash-card .dash-legend span { font-size: 10px; color: #605E5C; }

/* Data labels: 9pt bold. The kit marks value text with these classes. */
.dash-bh-val, .dash-lg-val, .dash-bv-val, .dash-card svg text.dash-val {
  font-size: 9px;
  font-weight: 700;
  fill: #252423;
  color: #252423;
}
/* Smart contrast: a label sitting INSIDE a filled bar goes white. */
.dash-card svg text.dash-val-in, .dash-bh-fill .dash-bh-val { fill: #FFFFFF; color: #FFFFFF; }

/* ── Gridlines & axes ─────────────────────────────────────────────────────── */
/* Gridlines are the dashed lines; axis lines are solid 0.8. Only the dashed
   ones are touched, so the axis keeps its weight. Vertical gridlines are not
   drawn by this kit at all - nothing to strip. */
/* The industrial skin forces chart lines to var(--rule-faint) (#eef0f3) with
   !important, which outranks the scoped --color-border retarget above. Measured,
   not assumed: the gridline came out #eef0f3 until this rule was added. */
/* :not([class]):not([stroke*="status"]) matters. A bare line[stroke-dasharray]
   also matched the TRENDLINE (class="dash-trendline") and the TARGET line
   (stroke="var(--status-warning)") - both dashed - and forced them to the
   gridline grey. The trendline went nearly invisible and a target line would
   have lost its warning colour entirely. Gridlines carry no class and use the
   border token, so excluding those two shapes is exact. */
.dash-card svg line[stroke-dasharray]:not([class]):not([stroke*="status"]) {
  stroke: #E1E1E1 !important; stroke-width: .5;
}
/* The trendline is a stated finding, not chrome: muted slate, above the grid. */
.dash-card svg line.dash-trendline { stroke: #605E5C !important; stroke-width: 1.4; opacity: .9; }

/* ── Legend — tight top-left, never floating or centred ───────────────────── */
/* The kit lays the legend out as repeat(auto-fit, minmax(140px,1fr)), which
   spreads swatches across the full card width and reads as centred. An inline
   row that starts at the left edge is the standard. */
.dash-card .dash-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px 16px;
  margin: 0 0 10px;
}
.dash-card .dash-legend > span { flex: 0 0 auto; min-width: 0; }
/* The split layout stacks its legend beside the chart - that one is already
   left-aligned and column-flowed, so it keeps its own rules. */
.dash-split .dash-legend { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Bars — substantial, intentional ──────────────────────────────────────── */
/* Square caps: a bar is a measurement, not a lozenge. Gap width is set by the
   renderer's geometry, which the audit found already in the 20-30% band. */
.dash-card svg.dash-bv rect, .dash-card svg.dash-bars rect { rx: 0; ry: 0; }
.dash-bh-track { background: #F8F9FA; }
.dash-bh-fill, .dash-bh-stack { border-radius: 2px; }

/* ── Lines — 2-2.5px stroke, micro markers ────────────────────────────────── */
.dash-card svg.dash-trend polyline,
.dash-card svg.dash-trend path[fill="none"],
.dash-card svg.dash-lines polyline { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dash-card svg.dash-trend circle { r: 2; }

/* ── KPI cards — large callout, tiny muted label ──────────────────────────── */
.dfc-kpi-value { font-size: 28px; font-weight: 700; color: #252423; line-height: 1.1; }
/* A name is not a figure. 28px in the mono face that industrial.css gives figures wrapped
   "Warehouse & Logistics" over three lines, and grid rows share a height, so one long section
   name set the height of every tile beside it. Text values step down and take the text face. */
.dfc-kpi-value.is-text {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 6.2cqi, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: normal;
}
.dfc-kpi-label { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #605E5C; }
.dfc-kpi-sub   { font-size: 10px; color: #605E5C; }
/* Variance arrows stay neutral geometry, not loud colour blocks. */
.dfc-kpi-delta { font-size: 10px; font-weight: 600; }

/* ── Print / export fidelity ──────────────────────────────────────────────── */
@media print {
  .dash-card { box-shadow: none; border-color: #E1E1E1; break-inside: avoid; }
}

/* ── Status-coloured chart lines keep their meaning ───────────────────────── */
/* The industrial skin flattens chart strokes to var(--rule-faint) with
   !important. That is right for a gridline and wrong for a TARGET line: the
   amber reference line on every trend chart was rendering at #eef0f3, which is
   invisible against white. A line that encodes a threshold is data, not chrome.
   Registered status hexes, so the palette is conserved exactly. */
.dash-card svg [stroke*="status-warning"] { stroke: #b45309 !important; }
.dash-card svg [stroke*="status-danger"]  { stroke: #b91c1c !important; }
.dash-card svg [stroke*="status-success"] { stroke: #166534 !important; }
.dash-card svg [fill*="status-warning"]   { fill:   #b45309 !important; }
.dash-card svg [fill*="status-danger"]    { fill:   #b91c1c !important; }
.dash-card svg [fill*="status-success"]   { fill:   #166534 !important; }

/* ── barsH: the two elements it was missing ───────────────────────────────── */
/* Legend sits above the rows, tight left, inline — never floating over data. */
.dash-bh-legend {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: 4px 16px; margin: 0 0 8px; font-size: 10px; color: #605E5C;
}
.dash-bh-legend i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  margin-right: 5px; vertical-align: -1px;
}
/* Value-axis title, centred under the tick row it describes. */
.dash-bh-axtitle {
  text-align: center; font-size: 10px; font-weight: 600; color: #605E5C;
  margin-top: 2px; letter-spacing: .01em;
}


/* Chart export. Quiet until the card is hovered or the button is focused, so 291 cards do not
   each grow a permanent piece of chrome - but always reachable from the keyboard. */
.dash-card { position: relative; }
.dash-card .dash-dl {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface, #fff); color: var(--color-muted, #605E5C);
  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.dash-card:hover .dash-dl, .dash-card .dash-dl:focus-visible { opacity: 1; }
.dash-card .dash-dl:hover { color: var(--color-text, #252423); border-color: var(--color-muted, #605E5C); }
@media print { .dash-card .dash-dl { display: none; } }


/* The per-line row multiplier sits immediately before that line's + button. Narrow enough not to
   widen the control column, and the spinners are kept because the common use is nudging 1 to 2. */
.pr-rowmult {
  width: 44px;
  font-size: 12px;
  padding: 2px 4px;
  margin-right: 4px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
}
.pr-rowmult:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }