/* datahub.css (V1.60): Filon app (Client\Apps\DataHub: Overview, Feeds, a batch, Model, Data, Import, Settings, API) and
   Filon Management (Client\Apps\DataHubAdmin). Prefix dh-. Colours only through the tokens of :root (app.css) and the
   Filon's own below, each with its dark value:
     --dh-k-<kind>-h / -s   the fill and stroke of a table kind (the owner's diagram colours: dimension blue, fact pink,
                            bridge purple, lookup grey, configuration yellow, log grey, report aggregate green)
     --dh-heat-1..5         the heat map's one hue, light to dark (rows per hour); refused rows use --bad
     --dh-canvas            the diagram's stage
   The Reports (dhr-, datahub-reports.css) and the AI (dha-, datahub-ai.css) have their own files.
   Debugging: F12 > Elements on a dh- class; a light patch in the dark theme is a fixed colour (there should be none). */

:root {
  --dh-k-dim-h: #dae8fc; --dh-k-dim-s: #6c8ebf;
  --dh-k-fact-h: #f8cecc; --dh-k-fact-s: #b85450;
  --dh-k-link-h: #e1d5e7; --dh-k-link-s: #9673a6;
  --dh-k-lookup-h: #eeeeee; --dh-k-lookup-s: #8c8c8c;
  --dh-k-config-h: #fff2cc; --dh-k-config-s: #c9a43c;
  --dh-k-log-h: #e3e3e3; --dh-k-log-s: #7a7a7a;
  --dh-k-agg-h: #d5e8d4; --dh-k-agg-s: #82b366;
  --dh-heat-1: #e9e4d3; --dh-heat-2: #d3c8a3; --dh-heat-3: #b6a576; --dh-heat-4: #8d7f56; --dh-heat-5: #5c5236;
  --dh-canvas: #fbfaf7;
  --dh-canvas-grid: #ece9e1;
  --dh-enc: #9a4a12;
  --dh-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}
:root[data-theme="dark"] {
  --dh-k-dim-h: #26364d; --dh-k-dim-s: #7ea2d6;
  --dh-k-fact-h: #4a2a2a; --dh-k-fact-s: #d98a86;
  --dh-k-link-h: #3a2e45; --dh-k-link-s: #b79bcb;
  --dh-k-lookup-h: #2d2f33; --dh-k-lookup-s: #9a9a9a;
  --dh-k-config-h: #403820; --dh-k-config-s: #d9bc62;
  --dh-k-log-h: #2c2c2c; --dh-k-log-s: #9a9a9a;
  --dh-k-agg-h: #23382a; --dh-k-agg-s: #8cc08a;
  --dh-heat-1: #3a3528; --dh-heat-2: #5a5139; --dh-heat-3: #7f7351; --dh-heat-4: #a99a6c; --dh-heat-5: #d6c590;
  --dh-canvas: #1b1915;
  --dh-canvas-grid: #29251f;
  --dh-enc: #eda866;
}

/* ---- The page and its title ---- */
.dh-page { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: none; margin: 0; min-width: 0; }
.dh-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 4px 2px 0; }
.dh-title h1 { margin: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; }
.dh-title p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.dh-title-tools { display: flex; align-items: center; gap: 8px; }
.dh-title-tools .btn { text-decoration: none; }
.dh-back { display: inline-block; margin-bottom: 2px; color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.dh-back:hover { color: var(--text); }
.dh-link { color: var(--accent-strong); font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.dh-link:hover { text-decoration: underline; }
.dh-link-btn { padding: 2px 4px; border: 0; background: none; color: var(--accent-strong); cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 700; }
.dh-link-btn:hover { text-decoration: underline; }
.dh-link-btn.bad { color: var(--bad); }
.dh-mono { font-family: var(--dh-mono); font-size: 0.84em; }
.dh-bad { color: var(--bad); font-weight: 700; }
.dh-notice { display: flex; align-items: center; gap: 8px; }
.dh-ok { display: flex; align-items: center; gap: 6px; margin: 6px 0; color: var(--good-text); font-weight: 600; }

/* ---- The scope bar (Client section) and its tools: the site picker, the freshness chip ---- */
.dh-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel-2); font-size: 0.88rem; }
.dh-scope > .mud-icon-root { color: var(--accent); }
.dh-scope-text { flex: 1 1 240px; min-width: 0; }
.dh-scope-text b { font-weight: 900; }
.dh-sep { margin: 0 4px; color: var(--faint); }
.dh-site { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); }
.dh-site .mud-icon-root { color: var(--accent); }
.dh-site select { max-width: 220px; padding: 3px 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.dh-site select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.dh-site select option { background: var(--panel); color: var(--text); }
.dh-site-one { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.dh-site-one .mud-icon-root { color: var(--accent); }
.dh-fresh { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.dh-fresh .dh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.dh-fresh.good { background: var(--good-soft); color: var(--good-text); }
.dh-fresh.good .dh-dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.dh-fresh.warn { background: var(--warn-soft); color: var(--warn); }
.dh-fresh.warn .dh-dot { background: var(--warn); }
.dh-fresh-ago { font-weight: 500; opacity: 0.85; }

/* ---- Chips ---- */
.dh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--chip-text);
  font-size: 0.76rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.dh-chip.good { background: var(--good-soft); color: var(--good-text); }
.dh-chip.warn { background: var(--warn-soft); color: var(--warn); }
.dh-chip.bad { background: var(--bad-soft); color: var(--bad); }
.dh-chip.info { background: var(--info-soft); color: var(--info); }

/* The site profile (Settings): one switch per part of the model (DataHubParts) */
.dh-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.dh-part { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); cursor: pointer; }
.dh-part input { margin-top: 3px; flex: none; }
.dh-part b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dh-part small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.35; }
.dh-part.off b, .dh-part.off small { opacity: 0.6; }
.dh-chip.big { padding: 5px 12px; font-size: 0.84rem; }
.dh-chip.big b { font-size: 1rem; }
.dh-chip button { padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 900; }
a.dh-chip:hover { filter: brightness(0.96); }
.dh-code { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--bad-soft); color: var(--bad); font-family: var(--dh-mono); font-size: 0.76rem; font-weight: 700; }

/* ---- Figures ---- */
.dh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dh-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.dh-kpi.good { border-top-color: var(--good); }
.dh-kpi.warn { border-top-color: var(--warn); }
.dh-kpi.bad { border-top-color: var(--bad); }
.dh-kpi-label { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.dh-kpi-value { font-size: 1.85rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dh-kpi-value.small { font-size: 1.3rem; line-height: 1.55; }
.dh-kpi-value small { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.dh-kpi-sub { overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.dh-kpis.small .dh-kpi { padding: 8px 12px; box-shadow: none; }
.dh-kpis.small .dh-kpi-value { font-size: 1.4rem; }

/* ---- Two columns ---- */
.dh-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dh-split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dh-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---- Overview: the domains, the next steps ---- */
.dh-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.dh-domain { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-left: 5px solid var(--dh-c); border-radius: 8px;
  background: var(--panel); color: var(--text); text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.dh-domain:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.dh-domain.quiet { background: var(--panel-2); }
.dh-domain.quiet b { color: var(--muted); }
.dh-domain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.dh-domain-head b { font-size: 0.92rem; font-weight: 800; }
.dh-domain-n { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.dh-domain-foot { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.dh-bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.dh-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--dh-c, var(--accent)); }
.dh-bar.wide { flex: 1; height: 8px; }
.dh-steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.dh-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); counter-increment: step; }
.dh-steps li::before { position: absolute; top: 12px; left: 12px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%;
  background: var(--os-accent); color: var(--os-on-accent); content: counter(step); font-size: 0.8rem; font-weight: 900; }
.dh-steps li.done::before { background: var(--good); color: var(--os-on-good); content: "\2713"; }
.dh-steps li span { color: var(--muted); font-size: 0.84rem; }
.dh-steps li .btn { align-self: flex-start; text-decoration: none; }
.dh-none { display: flex; gap: 16px; align-items: flex-start; }
.dh-none > .mud-icon-root { flex: none; width: 40px; height: 40px; color: var(--accent); }
.dh-issues { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dh-issues li { display: flex; align-items: flex-start; gap: 8px; }
.dh-issue-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.86rem; }
.dh-issue-text small { color: var(--muted); }
.dh-issue-text a { color: var(--accent-strong); }

/* ---- The heat map (DhHeat): 7 days x 24 hours in Feeds (8 px cells, scrolls sideways), today in Overview (cells fill the width) ---- */
.dh-heat { overflow-x: auto; padding-bottom: 2px; }
.dh-heat-grid { display: flex; flex-direction: column; gap: 2px; min-width: calc(180px + var(--dh-hours) * 6px); }
.dh-heat.compact .dh-heat-grid { min-width: 0; }
.dh-heat-row { display: flex; align-items: center; gap: 8px; }
.dh-heat-label { flex: 0 0 170px; overflow: hidden; color: var(--muted); font-family: var(--dh-mono); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.dh-heat.compact .dh-heat-label { flex-basis: 150px; }
.dh-heat-cells { display: grid; flex: 1; grid-template-columns: repeat(var(--dh-hours), minmax(4px, 1fr)); gap: 1px; }
.dh-heat.compact .dh-heat-cells { grid-template-columns: repeat(var(--dh-hours), minmax(8px, 1fr)); gap: 2px; }
.dh-cell { display: block; height: 14px; border-radius: 2px; background: var(--chip); }
.dh-cell.s1 { background: var(--dh-heat-1); }
.dh-cell.s2 { background: var(--dh-heat-2); }
.dh-cell.s3 { background: var(--dh-heat-3); }
.dh-cell.s4 { background: var(--dh-heat-4); }
.dh-cell.s5 { background: var(--dh-heat-5); }
.dh-cell.bad { background: var(--bad); }
.dh-heat-axis .dh-heat-cells { height: 16px; }
.dh-tick { overflow: visible; color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.dh-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; color: var(--muted); font-size: 0.76rem; }
.dh-heat-legend .dh-cell { width: 12px; height: 12px; }
.dh-heat-legend span:first-child { margin-right: 4px; font-weight: 700; }
.dh-heat-empty { padding: 18px; color: var(--muted); text-align: center; }

/* ---- Tables ---- */
.dh-table td { font-size: 0.86rem; }
.dh-table th { white-space: nowrap; }
.dh-table tr.dh-current td { background: var(--accent-soft); }
.dh-table tr.dh-ended td { color: var(--muted); }
.dh-table a { color: var(--accent-strong); }
.dh-dotc { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 3px; background: var(--dh-c); }
.dh-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-filters select, .dh-field select, .dh-field input, .dh-search, .dh-paste textarea, .dh-map select, .dh-filter-row input {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--field); color: var(--text); font: inherit; font-size: 0.86rem; }
.dh-health-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dh-health-sum .hint { margin-left: 4px; }
.dh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.dh-facts div { min-width: 0; }
.dh-facts dt { color: var(--muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.dh-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.dh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.dh-payload { margin-top: 4px; }
.dh-payload summary { color: var(--accent-strong); cursor: pointer; font-size: 0.8rem; font-weight: 700; }
.dh-payload pre, pre.dh-code { max-height: 360px; margin: 6px 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--code-bg); color: var(--text); font: 0.78rem/1.5 var(--dh-mono); white-space: pre; }
pre.dh-code { display: block; font-weight: 400; }
pre.dh-code.tall { max-height: 520px; }
.dh-ai { display: flex; gap: 10px; margin: 8px 0 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px;
  background: var(--accent-soft); font-size: 0.88rem; }
.dh-ai > .mud-icon-root { flex: none; color: var(--accent); }
.dh-ai p { margin: 0 0 6px; }

/* ---- Model: the workbench (domains, diagram, table sheet) ---- */
.dh-bench { display: grid; grid-template-columns: 250px minmax(0, 1fr) 400px; height: calc(100vh - 250px); min-height: 560px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.dh-side { display: flex; flex-direction: column; min-height: 0; padding: 12px; overflow-y: auto; border-right: 1px solid var(--border); }
.dh-search { width: 100%; }
.dh-side h4 { margin: 16px 2px 6px; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.dh-dom { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--text);
  cursor: pointer; font: inherit; font-size: 0.88rem; text-align: left; }
.dh-dom:hover { background: var(--panel-2); }
.dh-dom.on { background: var(--accent-soft); font-weight: 800; }
.dh-dom i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.dh-dom small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.dh-tlist { display: flex; flex-direction: column; }
.dh-tlist button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 8px; border: 0; border-radius: 5px; background: none; color: var(--text);
  cursor: pointer; font: 0.8rem/1.4 var(--dh-mono); text-align: left; }
.dh-tlist button:hover { background: var(--panel-2); }
.dh-tlist button.on { background: var(--accent-soft); font-weight: 700; }
.dh-tlist button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-tlist button small { color: var(--muted); font-family: inherit; font-size: 0.72rem; }
.dh-tlist i { flex: none; width: 9px; height: 9px; border: 1px solid; border-radius: 2px; }
.dh-stage { position: relative; min-width: 0; overflow: hidden; background-color: var(--dh-canvas);
  background-image: radial-gradient(var(--dh-canvas-grid) 1px, transparent 1px); background-size: 18px 18px; }
.dh-erd { display: block; width: 100%; height: 100%; color: var(--text); cursor: grab; touch-action: none; user-select: none;
  font-family: "Segoe UI", Roboto, Arial, sans-serif; }
.dh-erd.drag { cursor: grabbing; }
.dh-stage-title { position: absolute; top: 10px; left: 12px; max-width: min(62%, 720px); padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); box-shadow: var(--shadow); font-size: 0.8rem; }
.dh-stage-title b { margin-right: 4px; font-size: 0.98rem; font-weight: 900; }
.dh-stage-title span { color: var(--muted); }
.dh-stage-title span:last-child { display: block; margin-top: 2px; }
.dh-stage-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.dh-stage-tools button { min-width: 32px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text);
  cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 700; box-shadow: var(--shadow); }
.dh-stage-tools button:hover { border-color: var(--accent); }
.dh-legend { position: absolute; bottom: 10px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; max-width: calc(100% - 24px); padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 0.74rem; }
.dh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dh-legend i { width: 14px; height: 10px; border: 1px solid; border-radius: 2px; }
/* the diagram's marks */
.dh-ov { cursor: pointer; }
.dh-ov-box { fill: var(--panel); }
.dh-ov:hover .dh-ov-box { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18)); }
.dh-ov-line { stroke: currentColor; stroke-opacity: 0.28; }
.dh-ov-n { fill: currentColor; opacity: 0.6; font-size: 11px; text-anchor: middle; }
.dh-ov-name { fill: currentColor; font-size: 16px; font-weight: 700; }
.dh-ov-name.big { font-size: 19px; }
.dh-ov-count { fill: currentColor; opacity: 0.65; font-size: 12px; }
.dh-ov-fr { fill: currentColor; opacity: 0.7; font-size: 11.5px; }
.dh-e { fill: none; stroke-opacity: 0.5; stroke-width: 1.3; transition: stroke-opacity 0.12s ease; }
.dh-erd.dh-hl .dh-e { stroke-opacity: 0.12; }
.dh-erd.dh-hl .dh-e.on { stroke-opacity: 0.95; stroke-width: 2.2; }
.dh-box { cursor: pointer; }
.dh-box-frame { fill: var(--panel); stroke-width: 1.2; }
.dh-box:hover .dh-box-frame { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16)); }
.dh-box.sel .dh-box-frame { stroke: var(--accent); stroke-width: 3; }
.dh-box.ghost { opacity: 0.72; }
.dh-box.ghost .dh-box-frame { stroke-dasharray: 4 3; }
.dh-box-name { fill: currentColor; font-size: 12px; font-weight: 700; }
.dh-box-key { fill: var(--accent-strong); font-family: var(--dh-mono); font-size: 9.5px; font-weight: 700; }
.dh-box-key.enc { fill: var(--dh-enc); }
.dh-box-col { fill: currentColor; font-family: var(--dh-mono); font-size: 11.5px; }
.dh-box-col.added { opacity: 0.55; }
.dh-box-col.pk { text-decoration: underline; }
.dh-box-type { fill: currentColor; opacity: 0.5; font-family: var(--dh-mono); font-size: 10px; }
/* the table sheet */
.dh-sheet { min-height: 0; padding: 16px; overflow-y: auto; border-left: 1px solid var(--border); }
.dh-empty-sheet { color: var(--muted); }
.dh-sheet-body h3 { margin: 8px 0 4px; font: 700 1.1rem/1.25 var(--dh-mono); overflow-wrap: anywhere; }
.dh-sheet-body > p { margin: 4px 0; font-size: 0.88rem; }
.dh-sheet-body h4 { margin: 16px 0 4px; font-size: 0.88rem; font-weight: 800; }
.dh-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-kind { display: inline-block; padding: 2px 8px; border: 1px solid; border-radius: 4px; color: var(--text); font-size: 0.74rem; font-weight: 700; }
.dh-kind.temporal { border-color: var(--accent); }
.dh-kind.plain { border-color: var(--border); color: var(--muted); }
.dh-origin { margin: 10px 0; padding: 9px 11px; border-radius: 8px; background: var(--accent-soft); font-size: 0.84rem; }
.dh-origin b { display: block; margin-bottom: 2px; color: var(--accent-strong); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.dh-sheet-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 0.86rem; }
.dh-sheet-rows .btn { margin-left: auto; padding: 4px 10px; text-decoration: none; }
.dh-cols { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.dh-cols td { padding: 5px 4px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dh-cols-key { width: 34px; color: var(--accent-strong); font: 700 0.68rem var(--dh-mono); }
.dh-cn { font-family: var(--dh-mono); font-weight: 600; }
.dh-ct { color: var(--muted); font-family: var(--dh-mono); font-size: 0.74rem; }
.dh-cd { color: var(--muted); font-size: 0.8rem; }
.dh-cols tr.added .dh-cn { color: var(--muted); font-weight: 400; }
.dh-lock { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: var(--dh-enc); }
.dh-lock .mud-icon-root { width: 14px; height: 14px; }
.dh-fkl { padding: 0; border: 0; background: none; color: var(--accent-strong); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dh-refs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 0.82rem; }
.dh-copyrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.dh-copyrow h4 { margin: 0; }
.dh-copyrow .btn { padding: 3px 10px; }

/* ---- Data: the grid ---- */
.dh-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dh-toolbar .spacer { flex: 1; }
.dh-toolbar .btn { text-decoration: none; }
.dh-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dh-field > span { color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.dh-field.grow { flex: 1 1 220px; }
.dh-field.inline { flex-direction: row; align-items: center; gap: 8px; }
.dh-table-desc { margin: 10px 0 6px; color: var(--muted); font-size: 0.86rem; }
.dh-table-desc b { color: var(--text); font-family: var(--dh-mono); }
.dh-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.dh-grid-wrap { max-height: calc(100vh - 380px); min-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.dh-grid-wrap.small { max-height: 320px; min-height: 0; }
.dh-grid { font-size: 0.8rem; }
.dh-grid th, .dh-grid td { padding: 5px 9px; white-space: nowrap; }
.dh-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--head-bg); }
.dh-grid thead tr.dh-filter-row th { top: 31px; padding: 3px 5px 6px; }
.dh-grid tbody tr:nth-child(even) td { background: var(--panel-2); }
.dh-grid tbody tr:hover td { background: var(--accent-soft); }
.dh-grid a { color: var(--accent-strong); font-weight: 600; }
.dh-filter-row input { width: 100%; min-width: 70px; padding: 3px 6px; font-size: 0.78rem; }
.dh-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; font-weight: 800; }
.dh-sort:disabled { cursor: default; }
.dh-sort.on { color: var(--accent-strong); }
.dh-key { padding: 0 4px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--dh-mono); font-size: 0.64rem; }
.dh-lock-i { width: 14px !important; height: 14px !important; color: var(--dh-enc); }
.dh-null { color: var(--faint); font-style: italic; }
.dh-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.84rem; }
.dh-pager .spacer { flex: 1; }

/* ---- Import ---- */
.dh-step h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dh-step-n { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--os-accent); color: var(--os-on-accent); font-size: 0.8rem; font-weight: 900; }
.dh-source { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 12px; }
.dh-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 130px; padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background: var(--panel-2); color: var(--muted); cursor: pointer; text-align: center; font-weight: 700; }
.dh-drop:hover { border-color: var(--accent); color: var(--text); }
.dh-drop > .mud-icon-root { width: 34px; height: 34px; color: var(--accent); }
.dh-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dh-paste { display: flex; flex-direction: column; gap: 8px; }
.dh-paste textarea { width: 100%; min-height: 96px; font-family: var(--dh-mono); font-size: 0.8rem; resize: vertical; }
.dh-paste .btn { align-self: flex-start; }
.dh-map select { min-width: 260px; }
.dh-sample { max-width: 420px; overflow: hidden; color: var(--muted); font-family: var(--dh-mono); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
tr.dh-unmapped td, th.dh-unmapped, td.dh-unmapped { color: var(--faint); }
.dh-warn-line { padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.dh-result.done { border-left: 4px solid var(--good); }
.dh-result.partial { border-left: 4px solid var(--warn); }
.dh-result .dh-chip { margin-right: 6px; }

/* ---- Settings ---- */
.dh-form { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.dh-form h3 { margin: 0 0 10px; }
.dh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.dh-form-grid .dh-field input, .dh-form-grid .dh-field select { width: 100%; }
.dh-check { display: flex; align-items: center; gap: 6px; padding-top: 22px; font-size: 0.88rem; font-weight: 600; }
.dh-err { color: var(--bad); font-size: 0.76rem; font-weight: 600; }
.dh-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.dh-roster { margin: 6px 0 14px; }
.dh-roster-bar { position: relative; height: 34px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--chip) 0 6px, var(--panel-2) 6px 12px); }
.dh-roster-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; overflow: hidden; border-right: 2px solid var(--panel);
  color: var(--on-accent); font-size: 0.8rem; white-space: nowrap; }
.dh-roster-seg.s0 { background: var(--dh-heat-4); }
.dh-roster-seg.s1 { background: var(--dh-heat-5); }
.dh-roster-seg.s2 { background: var(--dh-heat-3); color: var(--text); }
.dh-roster-seg.s3 { background: var(--accent-strong); }
.dh-roster-axis { position: relative; height: 18px; margin: 3px 0 0; color: var(--muted); font-size: 0.7rem; }
.dh-roster-axis span { position: absolute; transform: translateX(-50%); }
.dh-roster-axis span:first-child { transform: none; }
.dh-roster-axis span:last-child { transform: translateX(-100%); }

/* ---- API ---- */
.dh-defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 8px 0 0; font-size: 0.88rem; }
.dh-defs dt { color: var(--muted); font-weight: 800; }
.dh-defs dd { margin: 0; }
.dh-defs code { font-family: var(--dh-mono); overflow-wrap: anywhere; }
.dh-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.dh-tabs button { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--chip); color: var(--text); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; }
.dh-tabs button.on { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.dh-list { margin: 6px 0; padding-left: 20px; font-size: 0.88rem; }
.dh-list li { margin: 3px 0; }
.dh-fields td { vertical-align: top; }

/* ---- Filon Management ---- */
.dh-size { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; font-variant-numeric: tabular-nums; }
.dh-size .dh-bar { width: 70px; }
.dh-model-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 12px; font-size: 0.88rem; }
.dh-model-sum b { font-size: 1.25rem; font-weight: 900; }
.dh-schema-bars { display: flex; flex-direction: column; gap: 6px; }
.dh-schema-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; align-items: center; gap: 10px; font-size: 0.82rem; }
.dh-schema-name { font-weight: 700; }
.dh-schema-n { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Narrow windows and phones ---- */
@media (max-width: 1280px) {
  .dh-bench { grid-template-columns: 220px minmax(0, 1fr); height: auto; }
  .dh-bench .dh-stage { height: 68vh; min-height: 460px; }
  .dh-sheet { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0; }
  .dh-side { max-height: 68vh; }
}
@media (max-width: 1000px) {
  .dh-split, .dh-split.even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .dh-bench { grid-template-columns: minmax(0, 1fr); }
  .dh-side { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); }
  .dh-bench .dh-stage { height: 60vh; min-height: 360px; }
  .dh-stage-title { max-width: calc(100% - 130px); font-size: 0.74rem; }
  .dh-legend { display: none; }
  .dh-source { grid-template-columns: minmax(0, 1fr); }
  .dh-title h1 { font-size: 1.25rem; }
  .dh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dh-kpi { padding: 10px 12px; }
  .dh-kpi-value { font-size: 1.4rem; }
  .dh-heat-label { flex-basis: 110px; }
  .dh-heat.compact .dh-heat-label { flex-basis: 96px; }
  .dh-heat.compact .dh-heat-cells { grid-template-columns: repeat(var(--dh-hours), minmax(6px, 1fr)); }
  .dh-schema-bar { grid-template-columns: 90px minmax(0, 1fr); }
  .dh-schema-n { display: none; }
  .dh-defs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dh-defs dd { margin-bottom: 8px; }
  .dh-map select { min-width: 160px; }
  .dh-grid-wrap { max-height: 60vh; }
}
@media print {
  .dh-stage-tools, .dh-legend { display: none; }
}
.dh-rejects td { vertical-align: top; }
.dh-grid td a { text-decoration: underline dotted; text-underline-offset: 3px; }
:root[data-theme="dark"] .dh-e { stroke-opacity: 0.7; }
.dh-page .panel-head { flex-wrap: wrap; }
.dh-table td:first-child { white-space: nowrap; }

/* V1.61: Filon > Reports (ReportsPage.razor): the library of the reports by area, and a report with the list beside it */
.dh-lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dh-lib-search { max-width: 380px; }
.dh-lib-mine { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 700; }
.dh-lib { display: flex; flex-direction: column; gap: 18px; }
.dh-lib-group h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 1.05rem; }
.dh-lib-group h2 .mud-icon-root { color: var(--accent); }
.dh-lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dh-lib-card { display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--panel); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.dh-lib-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.dh-lib-card.off { opacity: 0.55; }
.dh-lib-card-title { font-weight: 800; }
.dh-lib-card-text { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 0.86rem; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dh-lib-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; color: var(--faint); font-size: 0.78rem; }
.dh-rep { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; }
.dh-rep.rail-closed { grid-template-columns: minmax(0, 1fr); }
.dh-rep.rail-closed .dh-rep-rail { display: none; }
.dh-rep-rail { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 130px);
  overflow-y: auto; padding: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.dh-rep-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dh-rep-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.dh-rep-fold, .dh-rep-unfold { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule); border-radius: 8px; background: transparent;
  color: inherit; font: inherit; cursor: pointer; }
.dh-rep-fold { padding: 2px; }
.dh-rep-unfold { align-self: flex-start; margin-bottom: 8px; padding: 4px 10px; font-weight: 700; }
.dh-rep-filter { margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.dh-rep-cat { margin: 8px 0 2px; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.dh-rep-link { padding: 4px 8px; border-radius: 6px; color: inherit; font-size: 0.86rem; text-decoration: none; }
.dh-rep-link:hover { background: var(--chip); }
.dh-rep-link.active { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); font-weight: 800; }
.dh-rep-link.off { opacity: 0.5; }
.dh-rep-main { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 1000px) { .dh-rep { grid-template-columns: minmax(0, 1fr); } .dh-rep-rail { position: static; max-height: 260px; } }
@media print { .dh-rep { grid-template-columns: minmax(0, 1fr); } }

/* V1.61: Filon > API explorer (ExplorerPage.razor): the operations, the Swagger way, and Try it */
.dh-x-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--info-soft); color: var(--info); font-size: 0.88rem; }
.dh-x { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; min-width: 0; }
.dh-x-list { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 130px); overflow-y: auto;
  padding: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.dh-x-op { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit;
  font-size: 0.84rem; text-align: left; cursor: pointer; }
.dh-x-op:hover { background: var(--chip); }
.dh-x-op.active { background: var(--accent-soft); font-weight: 800; }
.dh-x-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-x-method { flex: 0 0 auto; min-width: 42px; padding: 1px 6px; border-radius: 4px; color: #fff; font-size: 0.7rem; font-weight: 800; text-align: center; }
.dh-x-method.get { background: #2f7cc0; }
.dh-x-method.put { background: #c58a18; }
.dh-x-method.post { background: #2f9a5d; }
.dh-x-method.delete { background: #b8443c; }
.dh-x-method.big { padding: 4px 10px; font-size: 0.85rem; }
.dh-x-detail { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.dh-x-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dh-x-url { overflow-wrap: anywhere; font-size: 0.92rem; }
.dh-x-summary { margin: 2px 0 0; font-size: 1.1rem; }
.dh-x-desc { margin: 0; color: var(--muted); line-height: 1.45; }
.dh-x-h3 { margin: 10px 0 4px; font-size: 0.92rem; font-weight: 800; cursor: default; }
.dh-x-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.dh-x-param { display: flex; flex-direction: column; gap: 3px; font-size: 0.84rem; }
.dh-x-param-name { font-weight: 700; }
.dh-x-param-name .hint { margin-left: 6px; font-weight: 400; }
.dh-x-req { color: var(--bad, #b8443c); }
.dh-x-body { width: 100%; min-height: 180px; padding: 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--code-bg, transparent); color: inherit;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; resize: vertical; }
.dh-x-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dh-x-answer, .dh-x-curl { display: flex; flex-direction: column; gap: 4px; }
.dh-x-curl { flex-direction: row; align-items: flex-start; }
.dh-x-curl .dh-x-pre { flex: 1 1 auto; }
.dh-x-answer-head { display: flex; align-items: center; gap: 8px; }
.dh-x-status { padding: 1px 8px; border-radius: 999px; background: var(--chip); font-weight: 800; font-size: 0.8rem; }
.dh-x-status.ok { background: var(--good-soft); color: var(--good-text); }
.dh-x-status.warn { background: var(--warn-soft); color: var(--warn); }
.dh-x-status.bad { background: var(--bad-soft, #f6dcd9); color: var(--bad, #b8443c); }
.dh-x-pre { max-height: 420px; margin: 0; overflow: auto; padding: 10px; border-radius: 8px; background: var(--code-bg, rgba(0, 0, 0, 0.04)); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dh-x-responses { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; }
@media (max-width: 1000px) { .dh-x { grid-template-columns: minmax(0, 1fr); } .dh-x-list { position: static; max-height: 280px; } }

/* ---- Overview: "How Filon works" (V1.66, DhHowItWorks.razor): four columns with an arrow between them; one column on a phone ---- */
.dh-how-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--os-space-8); margin: 0; padding: 0; list-style: none; }
.dh-how-col { position: relative; display: flex; flex-direction: column; gap: var(--os-space-2); min-width: 0; }
/* The arrow between two columns: a chevron drawn with two borders (no glyph) */
.dh-how-col + .dh-how-col::before { position: absolute; top: 8px; left: calc(-1 * var(--os-space-8) / 2 - 6px); width: 9px; height: 9px;
  border-top: 2px solid var(--os-text-3); border-right: 2px solid var(--os-text-3); content: ""; transform: rotate(45deg); }
.dh-how-col h3 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.dh-how-step { display: grid; width: 24px; height: 24px; place-items: center; border-radius: var(--os-radius-pill); background: var(--os-accent); color: var(--os-on-accent);
  font-size: 0.8rem; font-weight: 600; }
.dh-how-box { display: flex; flex-direction: column; gap: var(--os-space-1); padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md);
  background: var(--os-surface-sunken); font-size: 0.84rem; }
.dh-how-box > span { color: var(--os-text-2); }
.dh-how-box.outside { border-style: dashed; background: var(--os-surface); }
.dh-how-box.hub { flex: 1; border-color: var(--os-accent); background: var(--os-accent-soft); }
.dh-how-chips { display: flex; flex-wrap: wrap; gap: var(--os-space-1); margin: var(--os-space-1) 0 0; padding: 0; list-style: none; }
.dh-how-chips li { padding: 2px var(--os-space-2); border-radius: var(--os-radius-pill); background: var(--os-neutral-soft); color: var(--os-neutral-text); font-size: 0.76rem; font-weight: 600; }
.dh-how-code { overflow-wrap: anywhere; color: var(--os-text); font: 0.76rem var(--os-font-mono); }
@media (max-width: 1000px) {
  .dh-how-flow { grid-template-columns: minmax(0, 1fr); gap: var(--os-space-6); }
  .dh-how-col + .dh-how-col::before { top: calc(-1 * var(--os-space-6) / 2 - 8px); left: 8px; transform: rotate(135deg); }
}