/* ==================================================================
   THRESHOLD × DEVEXPRESS BLAZOR — theme override layer
   --------------------------------------------------------------------
   Load order (in _Host.cshtml / App.razor):

     <link rel="stylesheet" href="threshold-tokens.css" />
     <link rel="stylesheet" href="threshold-bootstrap.css" />
     <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/office-white.bs5.min.css" />
     <link rel="stylesheet" href="threshold-devexpress.css" />   ← this file

   Strategy:
   1. Override DevExpress's --dxbl-* variables to read from Threshold tokens.
   2. Layer selector-level fixes for components whose visual treatment
      isn't expressible as a token swap (hairline-vs-shadow, status pills,
      copper tab indicators, etc.).
   3. Dark mode flips inside [data-theme="dark"] / [data-bs-theme="dark"].

   Scope: this file assumes Threshold tokens are loaded globally on :root.
   ================================================================== */

/* ------------------------------------------------------------------
   1) DevExpress Blazor CSS variables → Threshold tokens
   ------------------------------------------------------------------ */
:root {
  /* — Core palette — */
  --dxbl-primary:                var(--th-advant);
  --dxbl-primary-rgb:            42, 111, 219;            /* sRGB of --advant for rgba() */
  --dxbl-primary-hover:          oklch(48% 0.16 245);
  --dxbl-primary-active:         var(--th-advant-deep);
  --dxbl-primary-text:           var(--th-advant-fg);

  --dxbl-secondary:              var(--th-ink-3);
  --dxbl-success:                var(--th-ok);
  --dxbl-warning:                var(--th-warn);
  --dxbl-danger:                 var(--th-risk);
  --dxbl-info:                   var(--th-advant);

  /* — Surface — */
  --dxbl-body-bg:                var(--th-paper);
  --dxbl-body-color:             var(--th-ink);
  --dxbl-component-bg:           var(--th-paper-sunk);
  --dxbl-component-color:        var(--th-ink);
  --dxbl-secondary-bg:           var(--th-paper-2);
  --dxbl-tertiary-bg:            var(--th-paper-3);

  /* — Borders — */
  --dxbl-border-color:           var(--th-line);
  --dxbl-border-color-secondary: var(--th-line-2);
  --dxbl-border-radius:          var(--th-radius-3);
  --dxbl-border-radius-sm:       var(--th-radius-2);
  --dxbl-border-radius-lg:       var(--th-radius-5);

  /* — Typography — */
  --dxbl-font-family-sans-serif: var(--th-font-sans);
  --dxbl-font-family-monospace:  var(--th-font-mono);
  --dxbl-font-size-base:         var(--th-size-14);
  --dxbl-line-height-base:       1.45;

  /* — State colors (used in row hover, focus rings, etc.) — */
  --dxbl-hover-bg:               var(--th-paper-2);
  --dxbl-hover-color:            var(--th-ink);
  --dxbl-focused-bg:             var(--th-advant-soft);
  --dxbl-focused-color:          var(--th-ink);
  --dxbl-focused-border-color:   var(--th-advant);
  --dxbl-selected-bg:            var(--th-advant-soft);
  --dxbl-selected-color:         var(--th-ink);
  --dxbl-disabled-color:         var(--th-ink-4);
  --dxbl-disabled-bg:            var(--th-paper-2);

  /* — Inputs — */
  --dxbl-input-bg:               var(--th-paper);
  --dxbl-input-color:            var(--th-ink);
  --dxbl-input-border-color:     var(--th-line-2);
  --dxbl-input-placeholder-color: var(--th-ink-4);

  /* — Validation — */
  --dxbl-valid-color:            var(--th-ok);
  --dxbl-invalid-color:          var(--th-risk);

  /* — Shadow → suppressed in favor of hairlines — */
  --dxbl-box-shadow:             0 0 0 0 transparent;
  --dxbl-box-shadow-sm:          0 0 0 0 transparent;
  --dxbl-box-shadow-lg:          0 8px 22px oklch(20% 0.01 255 / 0.10);   /* popups only */
}

/* ------------------------------------------------------------------
   2) Dark mode
   ------------------------------------------------------------------ */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --dxbl-primary-rgb:            114, 168, 245;
  --dxbl-primary-hover:          oklch(74% 0.13 245);
  --dxbl-box-shadow-lg:          0 12px 28px oklch(0% 0 0 / 0.55);
}

/* ------------------------------------------------------------------
   3) Selector-level fixes — things that can't be expressed as token swaps
   ------------------------------------------------------------------ */

/* Global type baseline for DX widgets */
.dxbl-widget,
.dxbl-text-edit,
.dxbl-grid,
.dxbl-button {
  font-family: var(--th-font-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  color: var(--th-ink);
}

/* Buttons — match Threshold's .cc-btn */
.dxbl-btn {
  border-radius: var(--th-radius-3);
  padding: 5px 11px;
  font-size: var(--th-size-13);
  font-weight: 500;
  line-height: 1.4;
}
.dxbl-btn-primary {
  background: var(--th-advant-deep);
  border-color: var(--th-advant-deep);
  color: var(--th-advant-fg);
}
.dxbl-btn-primary:hover { background: oklch(32% 0.13 250); border-color: oklch(32% 0.13 250); }
.dxbl-btn-secondary {
  background: var(--th-paper-sunk);
  border-color: var(--th-line-2);
  color: var(--th-ink);
}
.dxbl-btn-secondary:hover { background: var(--th-paper-2); border-color: var(--th-ink-4); }

/* DataGrid — kept for completeness but charts are the primary use case.
   These rules are harmless if you don't use DxGrid, and they pick up
   QuickGrid (Microsoft's free Blazor grid) for free since QuickGrid
   renders plain <table> markup that benefits from the same vocabulary. */
.dxbl-grid {
  font-size: var(--th-size-13);
  border-color: var(--th-line);
  border-radius: var(--th-radius-3);
}
.dxbl-grid-header-row {
  background: var(--th-paper-2);
  border-bottom: 1px solid var(--th-line);
}
.dxbl-grid-header-cell {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-ink-3);
}
.dxbl-grid-data-row { border-bottom: 1px solid var(--th-line-soft); }
.dxbl-grid-data-row:hover { background: var(--th-paper-2); }
.dxbl-grid-data-row.dxbl-grid-row-focused,
.dxbl-grid-data-row.dxbl-grid-row-selected { background: var(--th-advant-soft); }
.dxbl-grid-data-cell { padding: 9px 12px; color: var(--th-ink); vertical-align: middle; }

/* ------------------------------------------------------------------
   Charts — DxChart, DxPieChart, DxPolarChart, DxSparkline
   --------------------------------------------------------------------
   Theming a chart is two jobs:

   1. CSS — chart background, axis labels, gridlines, tooltips, legend.
      All CSS-controllable, all driven below.

   2. Series colors — set programmatically (see threshold-chart-palette.js
      and the THRESHOLD_CHART_PALETTE constant in DEVEXPRESS_BLAZOR.md).
      DevExpress lets you set a custom palette on DxChart via the Palette
      attribute and PaletteCustomTheme on the application.

   The CSS layer below assumes a chart with serif italic title, ink
   axis labels, hairline gridlines, and JetBrains Mono tick labels.
   ------------------------------------------------------------------ */
.dxbl-chart {
  background: transparent;
  font-family: var(--th-font-sans);
}

/* Chart title — serif, italic-emphasis pattern matches Threshold's
   editorial moments. Set via <DxChartTitle Text="…" /> in Blazor. */
.dxbl-chart-title {
  font-family: var(--th-font-serif);
  font-size: var(--th-size-17);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.005em;
  fill: var(--th-ink);
  color: var(--th-ink);
}
.dxbl-chart-subtitle {
  font-family: var(--th-font-serif);
  font-size: var(--th-size-14);
  font-style: italic;
  fill: var(--th-ink-3);
  color: var(--th-ink-3);
}

/* Axis labels — tabular mono so numbers align */
.dxbl-chart-axis-label,
.dxbl-chart text.tick-label {
  font-family: var(--th-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--th-ink-3);
}

/* Axis titles (e.g. "Submissions" / "Week") — uppercase mono */
.dxbl-chart-axis-title {
  font-family: var(--th-font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  fill: var(--th-ink-3);
}

/* Gridlines — single hairline, no minor grid */
.dxbl-chart line.grid {
  stroke: var(--th-line);
  stroke-width: 1;
  stroke-dasharray: 0;
}
.dxbl-chart line.grid-minor { stroke: transparent; }

/* Axis line — match gridline weight */
.dxbl-chart line.axis,
.dxbl-chart path.domain {
  stroke: var(--th-line-2);
  stroke-width: 1;
}

/* Tooltip — graphite ink on paper-sunk, hairline border, no glow */
.dxbl-chart-tooltip {
  background: var(--th-ink);
  color: var(--th-paper);
  border-radius: var(--th-radius-3);
  padding: 7px 10px;
  font-size: var(--th-size-13);
  line-height: 1.35;
  box-shadow: 0 4px 14px oklch(20% 0.01 255 / 0.18);
  font-variant-numeric: tabular-nums;
}
.dxbl-chart-tooltip .series-name {
  font-family: var(--th-font-sans);
  font-size: 11px;
  color: var(--th-paper-3);
  margin-bottom: 2px;
}
.dxbl-chart-tooltip .value {
  font-family: var(--th-font-mono);
  font-size: var(--th-size-15);
  font-weight: 500;
}

/* Legend — small caps mono, single-row by default */
.dxbl-chart-legend {
  font-family: var(--th-font-sans);
  font-size: 11px;
  color: var(--th-ink-3);
}
.dxbl-chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 0;
}
.dxbl-chart-legend .legend-marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}

/* Crosshair / pointer guide — hairline dashed in advant */
.dxbl-chart-crosshair line {
  stroke: var(--th-advant);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}

/* Pie / donut center label — serif headline */
.dxbl-pie-center-label {
  font-family: var(--th-font-serif);
  font-size: var(--th-size-24);
  font-weight: 500;
  fill: var(--th-ink);
}
.dxbl-pie-center-sub {
  font-family: var(--th-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--th-ink-3);
}

/* Sparkline — inline, no chrome */
.dxbl-sparkline {
  display: inline-block;
  vertical-align: middle;
}
.dxbl-sparkline path.line { stroke: var(--th-advant); stroke-width: 1.5; fill: none; }
.dxbl-sparkline path.area { fill: var(--th-advant-soft); }

/* Bar / column chart bars — restrained edges, no border by default */
.dxbl-chart rect.bar { stroke: none; }

/* Polar chart axis (rare) */
.dxbl-polar-chart .axis-circle { stroke: var(--th-line); fill: none; }

/* Annotation labels (e.g. deadline marker, target line) */
.dxbl-chart-annotation-line {
  stroke: var(--th-marigold-deep);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.dxbl-chart-annotation-label {
  font-family: var(--th-font-serif);
  font-style: italic;
  font-size: 12px;
  fill: var(--th-marigold-deep);
}

/* Dark mode — chart axis text, gridlines, tooltip fill */
[data-theme="dark"] .dxbl-chart-tooltip {
  background: var(--th-paper-sunk);
  color: var(--th-ink);
  border: 1px solid var(--th-line);
}

/* Text inputs — hairline border, tight radius */
.dxbl-text-edit-input,
.dxbl-textbox,
.dxbl-combobox {
  border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-3);
  background: var(--th-paper);
  color: var(--th-ink);
  padding: 5px 10px;
  font-size: var(--th-size-13);
  transition: border-color .12s, box-shadow .12s;
}
.dxbl-text-edit-input:hover { border-color: var(--th-ink-4); }
.dxbl-text-edit-input:focus,
.dxbl-text-edit-input.dxbl-state-focused {
  border-color: var(--th-advant);
  box-shadow: 0 0 0 3px var(--th-advant-soft);
  outline: none;
}

/* Tabs — copper accent on active (Threshold's surface accent) */
.dxbl-tabs .dxbl-tab.dxbl-active {
  color: var(--th-marigold-deep);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 0 var(--th-marigold-deep);
}
.dxbl-tabs .dxbl-tab:hover { color: var(--th-ink); }

/* Dropdowns / Popovers — hairline border, popup shadow */
.dxbl-popup,
.dxbl-dropdown-window {
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  box-shadow: var(--dxbl-box-shadow-lg);
}

/* Calendar / date picker — match the working surface */
.dxbl-calendar-cell.dxbl-selected {
  background: var(--th-advant);
  color: var(--th-advant-fg);
  border-radius: var(--th-radius-3);
}
.dxbl-calendar-cell.dxbl-today {
  border: 1px solid var(--th-marigold-deep);
  color: var(--th-marigold-deep);
}

/* ------------------------------------------------------------------
   Scheduler — match Threshold's editorial + working-surface vocabulary
   --------------------------------------------------------------------
   The scheduler has more visual surface than any other DX component.
   Goals:
   - Time grid uses Threshold's hairline rhythm, no heavy chrome
   - "Today" indicator uses copper (--marigold-deep), matching the
     dashboard's cycle-timeline today marker
   - Event appointments default to advant-soft fills with advant-deep
     left bar — they read as "data" not "marketing chrome"
   - Tone classes (.is-ok/.is-warn/.is-risk) for event categories
   - All-day band has a slightly cooler paper-2 background
   - Headers (day-of-week, hour gutter) use the same uppercase mono
     treatment as table headers
   ------------------------------------------------------------------ */
.dxbl-scheduler {
  font-family: var(--th-font-sans);
  font-size: var(--th-size-13);
  color: var(--th-ink);
  background: var(--th-paper);
}

/* Toolbar above the scheduler — view switcher, today, navigation */
.dxbl-scheduler-toolbar {
  background: var(--th-paper);
  border-bottom: 1px solid var(--th-line);
  padding: 10px 16px;
}
.dxbl-scheduler-toolbar .dxbl-btn { font-size: var(--th-size-13); }
.dxbl-scheduler-toolbar .dxbl-btn.dxbl-active {
  background: var(--th-advant-soft);
  color: var(--th-advant-deep);
  border-color: transparent;
}

/* Column headers — day-of-week strip */
.dxbl-scheduler-header-cell,
.dxbl-scheduler-time-cell {
  background: var(--th-paper-2);
  border-bottom: 1px solid var(--th-line);
  border-right: 1px solid var(--th-line-soft);
  font-family: var(--th-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-ink-3);
  padding: 8px 10px;
}
/* "Today" column header — copper accent, matches Threshold's surface accent */
.dxbl-scheduler-header-cell.dxbl-today {
  color: var(--th-marigold-deep);
  background: var(--th-marigold-soft);
}
.dxbl-scheduler-header-cell .day-number {
  font-family: var(--th-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--th-size-15);
  color: var(--th-ink);
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.dxbl-scheduler-header-cell.dxbl-today .day-number { color: var(--th-marigold-deep); }

/* Time gutter on the left — uppercase mono hours */
.dxbl-scheduler-time-cell {
  font-family: var(--th-font-mono);
  font-size: 11px;
  color: var(--th-ink-3);
  text-align: right;
  padding-right: 8px;
}

/* Grid cells — hairline separators, no heavy chrome */
.dxbl-scheduler-cell {
  border-right: 1px solid var(--th-line-soft);
  border-bottom: 1px solid var(--th-line-soft);
  background: var(--th-paper);
  transition: background .12s;
}
.dxbl-scheduler-cell.dxbl-today-column { background: var(--th-marigold-soft); }
.dxbl-scheduler-cell:hover { background: var(--th-paper-2); }
.dxbl-scheduler-cell.dxbl-selected { background: var(--th-advant-soft); }

/* The 30-minute horizontal rule inside an hour — softer than the hour rule */
.dxbl-scheduler-cell.dxbl-half-hour { border-bottom-style: dashed; border-bottom-color: var(--th-line-soft); }

/* "Now" indicator (current time line) — copper, hairline */
.dxbl-scheduler-now-indicator {
  background: var(--th-marigold-deep);
  height: 1.5px;
  box-shadow: 0 0 0 0 transparent;
}
.dxbl-scheduler-now-indicator::before {
  content: "";
  position: absolute; left: -3px; top: -3px;
  width: 8px; height: 8px;
  background: var(--th-marigold-deep);
  border-radius: 50%;
}

/* All-day band — slightly cooler than the time grid */
.dxbl-scheduler-all-day-band {
  background: var(--th-paper-2);
  border-bottom: 1px solid var(--th-line);
  font-size: 11px;
  padding: 4px 8px;
  color: var(--th-ink-3);
}

/* Appointments / events — advant-soft default, left bar in advant-deep */
.dxbl-scheduler-appointment {
  background: var(--th-advant-soft);
  color: var(--th-ink);
  border-left: 3px solid var(--th-advant);
  border-radius: var(--th-radius-3);
  padding: 4px 8px 4px 10px;
  font-size: var(--th-size-13);
  line-height: 1.3;
  box-shadow: none;
  transition: background .12s;
}
.dxbl-scheduler-appointment:hover { background: oklch(91% 0.04 245); }
.dxbl-scheduler-appointment .dxbl-scheduler-appointment-title {
  font-weight: 500;
  color: var(--th-ink);
}
.dxbl-scheduler-appointment .dxbl-scheduler-appointment-time {
  font-family: var(--th-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--th-ink-3);
}

/* Tone variants — set via the .dxbl-state-* class your code applies, OR
   via [data-event-tone] which you can add in the appointment template.
   Use the same status palette as Threshold's pills. */
.dxbl-scheduler-appointment[data-tone="ok"],
.dxbl-scheduler-appointment.tone-ok {
  background: var(--th-ok-soft);
  border-left-color: var(--th-ok);
}
.dxbl-scheduler-appointment[data-tone="warn"],
.dxbl-scheduler-appointment.tone-warn {
  background: var(--th-warn-soft);
  border-left-color: var(--th-warn);
}
.dxbl-scheduler-appointment[data-tone="risk"],
.dxbl-scheduler-appointment.tone-risk {
  background: var(--th-risk-soft);
  border-left-color: var(--th-risk);
}
.dxbl-scheduler-appointment[data-tone="copper"],
.dxbl-scheduler-appointment.tone-copper {
  background: var(--th-marigold-soft);
  border-left-color: var(--th-marigold-deep);
}

/* Recurrence + reminder glyphs — single ink color, no decorative tints */
.dxbl-scheduler-appointment .dxbl-icon-recurrence,
.dxbl-scheduler-appointment .dxbl-icon-reminder {
  color: var(--th-ink-3);
  opacity: 0.8;
}

/* Drag-to-resize handles + drag chrome — restrained */
.dxbl-scheduler-appointment.dxbl-dragging {
  background: var(--th-advant-soft);
  outline: 1px dashed var(--th-advant);
  outline-offset: 1px;
}
.dxbl-scheduler-resize-handle { background: var(--th-advant); }

/* The appointment popover (click an event → tooltip with details) */
.dxbl-scheduler-popup {
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  box-shadow: var(--dxbl-box-shadow-lg);
  padding: 14px 16px;
}
.dxbl-scheduler-popup .dxbl-scheduler-popup-title {
  font-family: var(--th-font-serif);
  font-size: var(--th-size-17);
  font-weight: 500;
  color: var(--th-ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.dxbl-scheduler-popup .dxbl-scheduler-popup-meta {
  font-family: var(--th-font-mono);
  font-size: 11px;
  color: var(--th-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Timeline view — denser, more like a Gantt strip */
.dxbl-scheduler-timeline .dxbl-scheduler-cell { border-right-color: var(--th-line); }
.dxbl-scheduler-timeline .dxbl-scheduler-appointment {
  border-left-width: 0;
  border-top: 2px solid var(--th-advant);
  border-radius: var(--th-radius-2);
}

/* Month view — appointments are compact chips inside day cells */
.dxbl-scheduler-month .dxbl-scheduler-appointment {
  border-left: none;
  border-radius: var(--th-radius-2);
  padding: 1px 6px;
  font-size: 11.5px;
}
.dxbl-scheduler-month .dxbl-scheduler-day-cell {
  border-right: 1px solid var(--th-line-soft);
  border-bottom: 1px solid var(--th-line-soft);
}
.dxbl-scheduler-month .dxbl-scheduler-day-cell .day-header {
  font-family: var(--th-font-mono);
  font-size: 11px;
  color: var(--th-ink-3);
  padding: 4px 8px;
}
.dxbl-scheduler-month .dxbl-scheduler-day-cell.dxbl-other-month .day-header { color: var(--th-ink-4); }
.dxbl-scheduler-month .dxbl-scheduler-day-cell.dxbl-today .day-header {
  color: var(--th-marigold-deep);
  font-weight: 600;
}

/* Resource grouping (e.g. by reviewer / by interviewer) — header strip */
.dxbl-scheduler-resource-header {
  background: var(--th-paper-3);
  border-bottom: 1px solid var(--th-line);
  font-family: var(--th-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-ink-3);
  padding: 8px 12px;
}

/* Edit appointment form (when the user creates/edits an event) */
.dxbl-scheduler-form {
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  padding: 16px 18px;
}
.dxbl-scheduler-form .dxbl-form-layout-item-caption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-ink-3);
}

/* Dense modifier — when <html class="dense"> is set */
html.dense .dxbl-scheduler-appointment { padding: 2px 6px 2px 9px; font-size: 12px; }
html.dense .dxbl-scheduler-header-cell  { padding: 6px 10px; }

/* Pager — tabular mono numbers */
.dxbl-pager { font-family: var(--th-font-mono); font-size: 12px; color: var(--th-ink-3); }
.dxbl-pager .dxbl-page-number.dxbl-selected {
  background: var(--th-advant-soft);
  color: var(--th-advant-deep);
  border-radius: var(--th-radius-3);
}

/* Scrollbars — let the OS render them; don't impose DX styling */
.dxbl-scroll-viewer { scrollbar-color: var(--th-ink-4) transparent; }

/* Toolbar (action buttons above grids) */
.dxbl-toolbar {
  background: var(--th-paper);
  border-bottom: 1px solid var(--th-line);
  padding: 8px 12px;
}

/* Tooltip — graphite ink on paper-sunk, never glossy black */
.dxbl-tooltip {
  background: var(--th-ink);
  color: var(--th-paper);
  font-size: var(--th-size-13);
  border-radius: var(--th-radius-3);
  padding: 5px 9px;
}

/* Loading panel — restrained spinner color */
.dxbl-loading-panel { background: rgba(20, 22, 30, 0.08); }
.dxbl-loading-panel .dxbl-loading-indicator { color: var(--th-advant); }

/* Form layout — strip background, use hairlines */
.dxbl-form-layout {
  background: transparent;
}
.dxbl-form-layout-item-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-ink-3);
  margin-bottom: 4px;
}

/* Validation summary / message */
.dxbl-validation-message,
.dxbl-validation-summary {
  color: var(--th-risk);
  font-size: var(--th-size-13);
  font-family: var(--th-font-sans);
}

/* ------------------------------------------------------------------
   4) Things to NOT use DevExpress for (build with Threshold custom)
   ------------------------------------------------------------------ */
/*
   - Sidenav / topbar / footer — use Threshold's chrome
   - CrossroadsLockup, ArchMark — bespoke
   - AppDef switcher — bespoke (.adsw-*)
   - Status pills (.cc-pill) — bespoke
   - Cycle timeline on dashboard — bespoke
   - Banners (cross-tenant, impersonation) — bespoke
   - Section editorial rules (the serif italic moments) — bespoke

   Use DevExpress for:
   - DxGrid (submissions list)
   - DxScheduler if applicable
   - DxPivotGrid for analytics
   - DxComboBox / DxTagBox for high-cardinality pickers (the small switcher
     popover is bespoke; DX is for "pick a country from 195")
   - DxCharts
   - DxDateEdit / DxDateRangeEdit
   - DxFileInput / DxUpload for transcript/document upload UI
   - DxValidationSummary for form-level errors
*/