/* ==========================================================================
DataBridge UI — design system (phase 1)
Implements the locked "Cockpit Familiar" direction, with the spacing polish
of "Cockpit Pro": an ERP cockpit — attention first, command bar with
labeled groups, saved views, dense grids, and a real status bar.
Contract
* Every class is prefixed `db-` so nothing collides with MudBlazor or the
legacy stylesheets.
* Color is spent on state (ok / warn / crit) and on ONE accent used only
for interaction (links, focus, selection, the primary command).
* Five type sizes: 19 / 15 / 13 / 12 / 11. Nothing else.
* 8px spacing rhythm, 4px half-steps inside controls.
* No framework assumptions: this file is plain CSS and is reusable by the
Blazor WASM browser edition unchanged.
Sections
1 Tokens (light / dark)
2 Base + utilities
3 Tooltip
4 Shell: top bar, nav, record tabs, command bar, rail, status bar
5 Primitives: buttons, pills, chips, help dot
6 Blocks: panels, attention queue, module strip, grid, record header,
run strip, empty state
7 MudBlazor bridge — maps Mud's components onto these tokens so pages
that were not touched in phase 1 still inherit the look
8 Responsive
========================================================================== */
/* ============================================================ 1 TOKENS === */
:root {
/* neutrals — paper-gray, never pure white */
--db-app: #e9ecf0;
--db-surface: #f4f6f8;
--db-surface-2: #eceff3;
--db-surface-3: #e3e7ec;
--db-band: #eceff3;
--db-band-2: #e3e7ec;
--db-line: #cfd5dc;
--db-line-soft: #dde2e8;
--db-line-strong: #b6bec8;
--db-ink: #1b2128;
--db-ink-2: #3d4650;
/* --db-muted and --db-faint carry small text everywhere in the product, and
every size in this system (19/15/13/12/11) is "small text" to WCAG. The
original pair measured 3.80:1 and 2.10:1 against --db-band-2, the darkest
background either of them sits on, so neither cleared AA's 4.5:1.
Re-derived on the palette's own hue ramp (hue/saturation held, value moved
until it clears): --db-faint is the lightest value that passes, and
--db-muted is kept a clear step darker so the two are still telling
different things. Worst cases now 5.35:1 and 4.53:1.
tools/contrast.py prints the full grid from these values. */
--db-muted: #565d68;
--db-faint: #626870;
/* accent — interaction only */
--db-accent: #1f5fa8;
--db-accent-deep: #17497f;
--db-accent-soft: #e4edf7;
--db-accent-line: #b9d0e8;
--db-brand-violet: #6d4aa6;
--db-on-accent: #ffffff;
/* palette tokens — Meridian values; databridge-palettes.css overrides them per palette */
--db-layer-2: #eceff3;
--db-primary: #1f5fa8;
--db-secondary: #0f8a8a;
--db-selection: #e4edf7;
--db-shell: #e3e7ec;
--db-shell-ink: #1b2128;
--db-shell-muted: #565d68;
--db-shell-line: #cfd5dc;
--db-shell-hover: #eceff3;
--db-viz-1: #1f5fa8;
--db-viz-2: #0f8a8a;
--db-viz-3: #6a5acd;
--db-viz-4: #c47a2c;
--db-viz-5: #7a8ea6;
--db-viz-6: #b0457e;
/* semantic — state only */
--db-ok: #17694a;
--db-ok-bg: #e2f0e9;
--db-ok-line: #a9cfbe;
--db-warn: #8a5a08;
--db-warn-bg: #f8eeda;
--db-warn-line: #ddc590;
--db-crit: #a32b1e;
--db-crit-bg: #f9e5e1;
--db-crit-line: #e8b6ac;
--db-idle: #5f6874;
--db-idle-bg: #e9ebef;
--db-idle-line: #ccd2da;
--db-shadow-1: 0 1px 2px rgba(22, 28, 36, 0.07);
--db-shadow-2: 0 2px 4px rgba(22, 28, 36, 0.08), 0 10px 24px rgba(22, 28, 36, 0.10);
--db-radius: 3px;
--db-radius-lg: 4px;
--db-font-ui: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
--db-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;
/* geometry — the shell is a fixed grid, these are its only knobs */
--db-topbar-h: 44px;
--db-status-h: 26px;
--db-nav-w: 244px;
--db-rail-w: 296px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--db-app: #101418;
--db-surface: #171c22;
--db-surface-2: #1d232a;
--db-surface-3: #242b33;
--db-band: #1c222a;
--db-band-2: #232a34;
--db-line: #2b333d;
--db-line-soft: #262d37;
--db-line-strong: #3b4551;
--db-ink: #e9edf2;
--db-ink-2: #c2c9d3;
/* Same re-derivation as the light block; worst cases were 4.72:1 and
2.69:1 against --db-surface-3, now 5.34:1 and 4.53:1. */
--db-muted: #959fae;
--db-faint: #8592a5;
--db-accent: #79ade3;
--db-accent-deep: #9cc4ee;
--db-accent-soft: #1b2a3b;
--db-accent-line: #2f4a68;
--db-brand-violet: #b79ee8;
--db-on-accent: #0b1219;
/* palette tokens — Meridian values; databridge-palettes.css overrides them per palette */
--db-layer-2: #1d232a;
--db-primary: #79ade3;
--db-secondary: #3cc2bd;
--db-selection: #1b2a3b;
--db-shell: #232a34;
--db-shell-ink: #e9edf2;
--db-shell-muted: #959fae;
--db-shell-line: #2b333d;
--db-shell-hover: #2b333d;
--db-viz-1: #6fa8ea;
--db-viz-2: #3cc2bd;
--db-viz-3: #a397f0;
--db-viz-4: #e3a25a;
--db-viz-5: #9fb2c8;
--db-viz-6: #e07fb1;
--db-ok: #63c391;
--db-ok-bg: #162c24;
--db-ok-line: #2c5844;
--db-warn: #d9a84d;
--db-warn-bg: #2e2617;
--db-warn-line: #5f4c26;
--db-crit: #e07b68;
--db-crit-bg: #351f1c;
--db-crit-line: #6d4038;
--db-idle: #929cab;
--db-idle-bg: #222932;
--db-idle-line: #39414d;
--db-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--db-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}
}
:root[data-theme="dark"] {
--db-app: #101418;
--db-surface: #171c22;
--db-surface-2: #1d232a;
--db-surface-3: #242b33;
--db-band: #1c222a;
--db-band-2: #232a34;
--db-line: #2b333d;
--db-line-soft: #262d37;
--db-line-strong: #3b4551;
--db-ink: #e9edf2;
--db-ink-2: #c2c9d3;
--db-muted: #959fae;
--db-faint: #8592a5;
--db-accent: #79ade3;
--db-accent-deep: #9cc4ee;
--db-accent-soft: #1b2a3b;
--db-accent-line: #2f4a68;
--db-brand-violet: #b79ee8;
--db-on-accent: #0b1219;
/* palette tokens — Meridian values; databridge-palettes.css overrides them per palette */
--db-layer-2: #1d232a;
--db-primary: #79ade3;
--db-secondary: #3cc2bd;
--db-selection: #1b2a3b;
--db-shell: #232a34;
--db-shell-ink: #e9edf2;
--db-shell-muted: #959fae;
--db-shell-line: #2b333d;
--db-shell-hover: #2b333d;
--db-viz-1: #6fa8ea;
--db-viz-2: #3cc2bd;
--db-viz-3: #a397f0;
--db-viz-4: #e3a25a;
--db-viz-5: #9fb2c8;
--db-viz-6: #e07fb1;
--db-ok: #63c391;
--db-ok-bg: #162c24;
--db-ok-line: #2c5844;
--db-warn: #d9a84d;
--db-warn-bg: #2e2617;
--db-warn-line: #5f4c26;
--db-crit: #e07b68;
--db-crit-bg: #351f1c;
--db-crit-line: #6d4038;
--db-idle: #929cab;
--db-idle-bg: #222932;
--db-idle-line: #39414d;
--db-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--db-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ================================================ 2 BASE + UTILITIES ==== */
html {
color-scheme: light dark;
}
body {
margin: 0;
background: var(--db-app);
color: var(--db-ink);
font-family: var(--db-font-ui);
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
.db-num, .db-mono {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.db-mono {
font-family: var(--db-font-mono);
letter-spacing: -0.01em;
}
.db-muted { color: var(--db-muted); }
/* Feedback / request-access review: labeled rows, one quiet "also sent" line, raw text behind a disclosure. */
.db-review { margin: 0 0 8px; }
.db-review > div {
display: grid;
grid-template-columns: 8.5rem 1fr;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--db-line-soft);
}
.db-review dt { color: var(--db-muted); }
.db-review dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.db-review-also { font-size: 12px; }
.db-review-raw > summary { cursor: pointer; color: var(--db-muted); font-size: 12.5px; }
.db-nowrap { white-space: nowrap; }
.db-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-spacer { flex: 1 1 auto; min-width: 8px; }
.db-ok-text { color: var(--db-ok); }
.db-warn-text { color: var(--db-warn); }
.db-crit-text { color: var(--db-crit); }
/* the recurring uppercase caption — 11px, the smallest of the five sizes */
.db-caplabel {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex: none;
}
.db-icon svg { width: 100%; height: 100%; display: block; }
.db-icon.db-sm { width: 14px; height: 14px; }
.db-icon.db-xs { width: 12px; height: 12px; }
.db-icon.db-lg { width: 18px; height: 18px; }
.db-shell :focus { outline: none; }
.db-shell :focus-visible {
outline: 2px solid var(--db-accent);
outline-offset: 1px;
border-radius: 2px;
}
/* ============================================================ 3 TOOLTIP = */
/* Short strings only — never a paragraph. Newlines with
. */
[data-db-tip] { position: relative; }
[data-db-tip]:hover::after,
[data-db-tip]:focus-visible::after {
content: attr(data-db-tip);
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 400;
background: var(--db-ink);
color: var(--db-app);
font-family: var(--db-font-mono);
font-size: 11px;
line-height: 1.5;
padding: 5px 8px;
border-radius: var(--db-radius);
white-space: pre;
box-shadow: var(--db-shadow-2);
pointer-events: none;
}
[data-db-tip].db-tip-left:hover::after,
[data-db-tip].db-tip-left:focus-visible::after { left: auto; right: 0; }
[data-db-tip].db-tip-up:hover::after,
[data-db-tip].db-tip-up:focus-visible::after { top: auto; bottom: calc(100% + 6px); }
:root[data-theme="dark"] [data-db-tip]:hover::after,
:root[data-theme="dark"] [data-db-tip]:focus-visible::after {
background: var(--db-surface-3);
color: var(--db-ink);
border: 1px solid var(--db-line);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-db-tip]:hover::after,
:root:not([data-theme="light"]) [data-db-tip]:focus-visible::after {
background: var(--db-surface-3);
color: var(--db-ink);
border: 1px solid var(--db-line);
}
}
/* ============================================================== 4 SHELL = */
/* The shell owns the viewport. Exactly one region scrolls (`.db-screen-body`, and the nav on its
own); nothing else may. `overflow: hidden` alone is not enough: a hidden box can still be scrolled
by focus or scrollIntoView, and the document can be scrolled by anything that overhangs it (a
fixed popup, a tooltip, 100vh on a browser whose toolbar changes the viewport), which drags the
whole shell up and strands the status bar mid-screen. The commonest overhang is an absolutely
positioned element with no positioned ancestor (a visually hidden file input or checkbox): its
containing block is the page, not the shell, so the shell's overflow does not clip it and a long
module page grows the document by that element's offset down the page. So the document does not scroll when the
shell is present, the shell is `overflow: clip` (clipped, and not scrollable at all), and scrolling
inside a region never chains out to the page. */
html:has(.db-shell),
html:has(.db-shell) body {
height: 100%;
overflow: hidden;
}
.db-shell {
display: grid;
grid-template-columns: var(--db-nav-w) minmax(0, 1fr);
grid-template-rows: var(--db-topbar-h) minmax(0, 1fr) var(--db-status-h);
grid-template-areas:
"topbar topbar"
"nav main"
"status status";
height: 100vh;
height: 100dvh;
overflow: hidden;
overflow: clip;
position: relative; /* containing block for stray absolutes (see above), so they are clipped here */
}
.db-shell *, .db-shell *::before, .db-shell *::after { box-sizing: border-box; }
.db-shell button { font: inherit; color: inherit; cursor: pointer; }
.db-shell a { color: var(--db-accent); text-decoration: none; }
.db-shell a:hover { text-decoration: underline; }
.db-shell h1, .db-shell h2, .db-shell h3 { margin: 0; font-weight: 600; }
/* ---------------------------------------------------------------- top bar */
.db-topbar {
grid-area: topbar;
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px 0 14px;
background: var(--db-shell);
color: var(--db-shell-ink);
border-bottom: 1px solid var(--db-shell-line);
min-width: 0;
/* The shell is its own surface: everything inside reads the shell's ink, not the page's. */
--db-ink: var(--db-shell-ink);
--db-ink-2: var(--db-shell-ink);
--db-muted: var(--db-shell-muted);
--db-faint: var(--db-shell-muted);
--db-accent: var(--db-shell-ink);
--db-on-accent: var(--db-shell);
--db-line: var(--db-shell-line);
--db-line-soft: var(--db-shell-line);
--db-line-strong: var(--db-shell-line);
--db-surface: var(--db-shell-hover);
--db-surface-2: var(--db-shell-hover);
--db-surface-3: var(--db-shell-line);
}
/* Icon stand-in for `.db-search` below 1024px — hidden above it. */
.db-search-toggle {
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--db-radius);
background: transparent;
color: var(--db-muted);
}
.db-search-toggle:hover, .db-search-toggle:focus-visible { background: var(--db-surface-2); color: var(--db-ink); }
.db-brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: inherit; }
.db-brand:hover { text-decoration: none; }
/* Brand marks (docs/brand/, approved 2026-09-27) are inline SVG drawn in currentColor. */
.db-mark { display: block; flex: none; }
.db-mark-databridge, .db-mark-extensibilityco { color: var(--db-accent); }
.db-mark-perpetual { color: var(--db-brand-violet); }
.db-brand-name {
/* Wordmark spec: IBM Plex Sans 600, -2% tracking, set beside the mark. */
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--db-ink);
}
.db-env-chip {
font-family: var(--db-font-mono);
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface);
color: var(--db-ink-2);
white-space: nowrap;
}
.db-env-chip .db-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--db-ok);
margin-right: 6px;
vertical-align: 1px;
}
.db-search {
position: relative;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface);
color: var(--db-muted);
padding: 0 9px;
height: 26px;
width: 300px;
}
.db-search:focus-within { border-color: var(--db-accent); }
.db-search input {
border: 0;
background: transparent;
outline: none;
font: inherit;
font-size: 12px;
color: var(--db-ink);
width: 100%;
}
.db-search input::placeholder { color: var(--db-faint); }
.db-search kbd {
font-family: var(--db-font-mono);
font-size: 10px;
color: var(--db-faint);
border: 1px solid var(--db-line);
border-radius: 2px;
padding: 0 4px;
background: var(--db-surface-2);
}
/* result list for the global search — a plain route list, no server round-trip */
.db-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 320px;
z-index: 500;
padding: 4px;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
box-shadow: var(--db-shadow-2);
max-height: 340px;
overflow-y: auto;
}
.db-search-results button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
padding: 5px 8px;
border: 0;
border-radius: 2px;
background: transparent;
font-size: 13px;
color: var(--db-ink-2);
}
.db-search-results button:hover,
.db-search-results button:focus-visible {
background: var(--db-accent-soft);
color: var(--db-accent-deep);
}
.db-search-results .db-grp {
margin-left: auto;
font-family: var(--db-font-mono);
font-size: 11px;
color: var(--db-faint);
}
.db-search-empty { padding: 8px; font-size: 12px; color: var(--db-muted); }
.db-health-chip {
display: flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 9px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--db-ok-line);
background: var(--db-ok-bg);
color: var(--db-ok);
border-radius: var(--db-radius);
white-space: nowrap;
}
.db-health-chip .db-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.db-health-chip.db-is-warn { border-color: var(--db-warn-line); background: var(--db-warn-bg); color: var(--db-warn); }
.db-health-chip.db-is-crit { border-color: var(--db-crit-line); background: var(--db-crit-bg); color: var(--db-crit); }
.db-health-chip.db-is-idle { border-color: var(--db-idle-line); background: var(--db-idle-bg); color: var(--db-idle); }
.db-licence-chip {
height: 26px;
display: flex;
align-items: center;
padding: 0 9px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface);
color: var(--db-ink-2);
white-space: nowrap;
}
.db-user-btn {
display: flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 7px 0 5px;
border: 1px solid transparent;
border-radius: var(--db-radius);
background: transparent;
font-size: 12.5px;
color: var(--db-ink);
}
.db-user-btn { cursor: pointer; }
.db-user-btn:hover { background: var(--db-surface); border-color: var(--db-line); }
.db-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--db-accent-soft);
border: 1px solid var(--db-accent-line);
color: var(--db-accent-deep);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
/* ------------------------------------------------------------- left nav -- */
.db-nav {
grid-area: nav;
background: var(--db-band);
border-right: 1px solid var(--db-line);
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 0 24px;
min-width: 0;
}
.db-nav-section { padding: 0 0 4px; }
.db-nav-group-head {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
text-align: left;
padding: 10px 12px 4px 14px;
background: transparent;
border: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-nav-group-head:hover { color: var(--db-muted); }
.db-nav-group-head .db-chev { margin-left: auto; transition: transform 120ms ease; }
.db-nav-section.db-collapsed .db-chev { transform: rotate(-90deg); }
.db-nav-section.db-collapsed .db-nav-item { display: none; }
.db-nav-item, .db-nav-solo {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
padding: 0 12px 0 14px;
height: 28px;
border: 0;
border-left: 3px solid transparent;
background: transparent;
font-size: 13px;
font-weight: 500;
color: var(--db-ink-2);
text-decoration: none;
}
.db-nav-item { padding-left: 30px; }
.db-nav-solo { font-weight: 600; color: var(--db-ink); }
.db-nav-item:hover, .db-nav-solo:hover {
background: var(--db-surface-3);
color: var(--db-ink);
text-decoration: none;
}
.db-nav-item .db-icon, .db-nav-solo .db-icon { color: var(--db-muted); }
/* Blazor's NavLink stamps `active`; the mockup's current-item treatment */
.db-nav-item.active, .db-nav-solo.active {
background: var(--db-selection);
border-left-color: var(--db-secondary);
color: var(--db-ink);
font-weight: 600;
box-shadow: inset -1px 0 0 var(--db-line);
}
.db-nav-item.active .db-icon, .db-nav-solo.active .db-icon { color: var(--db-accent); }
/* u3 review #5: this is the substantive "why is this locked" explanation, not
decoration, so it takes the stronger of the two quiet tokens. (Both clear AA
now — see the token block — but the emphasis order still holds.) */
.db-nav-item.db-locked, .db-nav-solo.db-locked { color: var(--db-muted); cursor: pointer; text-decoration: none; }
.db-nav-item.db-locked:hover, .db-nav-solo.db-locked:hover { background: var(--db-surface-3); color: var(--db-muted); }
.db-nav-count {
margin-left: auto;
font-family: var(--db-font-mono);
font-size: 10.5px;
color: var(--db-muted);
}
.db-nav-count.db-crit {
color: var(--db-crit);
background: var(--db-crit-bg);
border: 1px solid var(--db-crit-line);
border-radius: 8px;
padding: 0 5px;
}
.db-nav-rule { border: 0; border-top: 1px solid var(--db-line); margin: 8px 12px; }
/* ------------------------------------------------------------ main region */
.db-main {
grid-area: main;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
min-width: 0;
min-height: 0;
background: var(--db-app);
overflow: hidden;
overflow: clip;
}
/* ---- open-record tabs --------------------------------------------------- */
.db-rectabs {
display: flex;
align-items: stretch;
gap: 2px;
padding: 5px 12px 0;
background: var(--db-band);
border-bottom: 1px solid var(--db-line);
overflow-x: auto;
}
.db-rectab {
display: flex;
align-items: center;
gap: 7px;
height: 29px;
padding: 0 9px 0 10px;
max-width: 300px;
border: 1px solid var(--db-line);
border-bottom: 0;
border-radius: var(--db-radius) var(--db-radius) 0 0;
background: var(--db-surface-3);
color: var(--db-muted);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
margin-bottom: -1px;
text-decoration: none;
}
.db-rectab:hover { background: var(--db-surface-2); color: var(--db-ink-2); text-decoration: none; }
.db-rectab.db-active {
background: var(--db-app);
color: var(--db-ink);
font-weight: 600;
border-bottom: 1px solid var(--db-app);
}
.db-rectab .db-label { overflow: hidden; text-overflow: ellipsis; color: inherit; min-width: 0; flex: 1 1 auto; }
.db-rectab .db-label:hover { text-decoration: none; }
.db-rectab .db-x {
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 2px;
border: 0;
background: transparent;
color: var(--db-faint);
padding: 0;
}
.db-rectab .db-x:hover { background: var(--db-band-2); color: var(--db-ink); }
/* ---- command bar -------------------------------------------------------- */
/* Always-present slot the page's command bar is rendered into. Empty on pages
that publish none, which keeps the shell grid's three rows intact. */
.db-cmdslot { min-width: 0; }
.db-cmdbar {
display: flex;
align-items: center;
gap: 0;
padding: 0 14px;
height: 42px;
background: var(--db-surface);
border-bottom: 1px solid var(--db-line);
overflow-x: auto;
flex: none;
}
.db-cmdgroup { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.db-cmdgroup:first-child { padding-left: 0; }
.db-cmdgroup-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--db-faint);
margin-right: 8px;
white-space: nowrap;
}
.db-cmdsep {
width: 1px;
align-self: stretch;
margin: 8px 2px;
background: var(--db-line);
flex: none;
}
/* Groups separate themselves, so a page never has to place separators by hand.
Nothing is drawn after the spacer, because the spacer is not a group. */
.db-cmdgroup + .db-cmdgroup::before {
content: "";
width: 1px;
align-self: stretch;
margin: 8px 10px 8px 0;
background: var(--db-line);
flex: none;
}
.db-cmd {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
/* Outlined and filled at rest (2026-09 redesign): a command has to look like a button
before the pointer finds it. They used to be flat text until hovered. */
border: 1px solid var(--db-line-strong);
border-radius: var(--db-radius);
background: var(--db-surface-2);
color: var(--db-ink);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
}
.db-cmd .db-icon { color: var(--db-ink-2); }
.db-cmd:hover {
background: var(--db-accent-soft);
border-color: var(--db-accent-line);
color: var(--db-accent-deep);
text-decoration: none;
}
.db-cmd:hover .db-icon { color: var(--db-accent); }
.db-cmd.db-strong {
background: var(--db-accent);
border-color: var(--db-accent);
color: var(--db-on-accent);
font-weight: 600;
}
.db-cmd.db-strong .db-icon { color: var(--db-on-accent); }
.db-cmd.db-strong:hover {
background: var(--db-accent-deep);
border-color: var(--db-accent-deep);
color: var(--db-on-accent);
}
/* Destructive commands are red at rest, not only on hover, and always sit last in their group. */
.db-cmd.db-danger {
border-color: var(--db-crit-line);
color: var(--db-crit);
}
.db-cmd.db-danger .db-icon { color: var(--db-crit); }
.db-cmd.db-danger:hover {
background: var(--db-crit-bg);
border-color: var(--db-crit);
color: var(--db-crit);
}
.db-cmd.db-danger:hover .db-icon { color: var(--db-crit); }
.db-cmd[disabled] { opacity: 0.42; cursor: not-allowed; }
/* A disabled command has to read as disabled AT REST, not only once the pointer is over it.
Opacity alone was never enough for the bar's one Strong command: a dimmed accent fill is still
a solid filled button sitting beside flat text buttons, so it reads as the live one. The
browser then swallows the click, because the element really is disabled — so the button looks
clickable, does nothing, and reports nothing. Strong gives up the fill entirely when disabled,
which leaves the bar with no filled button at all and makes the state obvious without a hover. */
.db-cmd.db-strong[disabled] {
background: transparent;
border-color: var(--db-line);
color: var(--db-ink-2);
font-weight: 500;
}
.db-cmd.db-strong[disabled] .db-icon { color: var(--db-muted); }
.db-cmd[disabled]:hover {
background: var(--db-surface-2);
border-color: var(--db-line-strong);
color: var(--db-ink);
}
.db-cmd.db-danger[disabled]:hover {
border-color: var(--db-crit-line);
color: var(--db-crit);
}
.db-cmd[disabled]:hover .db-icon { color: var(--db-muted); }
.db-cmdbar-spacer { flex: 1 1 auto; min-width: 12px; }
/* "Related" line under the command bar: links to other pages, which used to sit in the bar
between Save and Delete. Hidden entirely on a page that publishes none. */
.db-related {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
padding: 5px 14px;
background: var(--db-surface);
border-bottom: 1px solid var(--db-line-soft);
font-size: 12.5px;
}
.db-related:not(:has(.db-related-link)) { display: none; }
.db-related::before {
content: "Related";
font-weight: 600;
color: var(--db-faint);
}
.db-related-link {
color: var(--db-accent);
text-decoration: none;
border-bottom: 1px solid var(--db-accent-line);
}
.db-related-link:hover { border-bottom-color: var(--db-accent); text-decoration: none; }
.db-related-link:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }
/* ---- screen body + guided rail ------------------------------------------ */
.db-screen-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
position: relative; /* an absolutely positioned child with no positioned ancestor must scroll with, and be clipped by, this region */
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 20px 32px;
}
.db-content { flex: 1 1 auto; min-width: 0; }
.db-content > * + * { margin-top: 16px; }
.db-rail {
width: var(--db-rail-w);
flex: none;
position: sticky;
top: 0;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
}
.db-rail-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--db-line);
background: var(--db-surface-2);
border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
}
.db-rail-head h2 { font-size: 13px; font-weight: 700; color: var(--db-ink); }
.db-rail-head .db-icon { color: var(--db-accent); }
.db-rail-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.db-rail-item {
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface-2);
padding: 9px 10px;
}
.db-rail-item.db-lead { background: var(--db-accent-soft); border-color: var(--db-accent-line); }
.db-rail-item .db-rank {
font-family: var(--db-font-mono);
font-size: 10.5px;
color: var(--db-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.db-rail-item.db-lead .db-rank { color: var(--db-accent-deep); }
.db-rail-item .db-t { font-size: 13px; font-weight: 600; color: var(--db-ink); }
.db-rail-item .db-d { font-size: 12px; color: var(--db-muted); margin-top: 2px; }
.db-rail-item .db-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.db-rail-foot {
border-top: 1px solid var(--db-line);
padding: 8px 12px;
font-size: 12px;
color: var(--db-muted);
display: flex;
align-items: center;
justify-content: space-between;
}
.db-rail-toggle {
position: sticky;
top: 0;
width: 30px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 8px 0;
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
background: var(--db-surface);
color: var(--db-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.db-rail-toggle:hover { color: var(--db-accent); border-color: var(--db-accent-line); }
.db-rail-toggle .db-vtext { writing-mode: vertical-rl; }
.db-rail-toggle .db-badge {
font-family: var(--db-font-mono);
font-size: 10px;
letter-spacing: 0;
color: var(--db-crit);
background: var(--db-crit-bg);
border: 1px solid var(--db-crit-line);
border-radius: 8px;
padding: 0 4px;
}
/* ---- page head ---------------------------------------------------------- */
.db-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.db-page-title { font-size: 19px; font-weight: 700; letter-spacing: 0.005em; color: var(--db-ink); }
/* gives the heading tabindex="-1" and focuses it on
every route change. :focus-visible is not strictly keyboard-only: when script moves
focus and the browser cannot tell the user last used a mouse (first load, hard
refresh) it still matches and draws a ring on a non-interactive heading. Focus still
moves - screen readers announce the new page - only the ring is suppressed.
Same fix as the marketing site: ExtensibilityCo.Web/wwwroot/css/site.css, h1[tabindex].
Matching on [tabindex] keeps this to headings that script focuses; interactive
controls keep their rings. */
h1[tabindex]:focus,
h1[tabindex]:focus-visible { outline: none; }
.db-page-sub { font-size: 12px; color: var(--db-muted); margin-top: 2px; }
.db-page-sub .db-sep { color: var(--db-line-strong); margin: 0 6px; }
/* ---- status bar --------------------------------------------------------- */
.db-statusbar {
grid-area: status;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
background: var(--db-band-2);
border-top: 1px solid var(--db-line);
font-size: 12px;
color: var(--db-ink-2);
white-space: nowrap;
overflow: hidden;
}
.db-statusbar .db-seg { display: flex; align-items: center; gap: 6px; }
.db-statusbar .db-vr { width: 1px; height: 14px; background: var(--db-line); }
.db-statusbar .db-k { color: var(--db-muted); }
.db-statusbar .db-mono { font-size: 11.5px; }
.db-statusbar .db-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--db-ok);
}
.db-statusbar .db-dot.db-warn { background: var(--db-warn); }
.db-statusbar .db-dot.db-crit { background: var(--db-crit); }
.db-statusbar .db-dot.db-idle { background: var(--db-idle-line); }
/* ======================================================= 5 PRIMITIVES === */
.db-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface);
color: var(--db-ink-2);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
.db-btn:hover {
background: var(--db-surface-3);
color: var(--db-ink);
border-color: var(--db-line-strong);
text-decoration: none;
}
.db-btn.db-primary {
background: var(--db-accent);
border-color: var(--db-accent);
color: var(--db-on-accent);
}
.db-btn.db-primary:hover {
background: var(--db-accent-deep);
border-color: var(--db-accent-deep);
color: var(--db-on-accent);
}
.db-btn.db-tiny { height: 22px; padding: 0 8px; font-size: 12px; }
.db-btn.db-quiet { background: transparent; border-color: transparent; color: var(--db-muted); }
.db-btn.db-quiet:hover { background: var(--db-surface-3); border-color: var(--db-line); color: var(--db-ink); }
.db-btn[disabled] { opacity: 0.42; cursor: default; }
.db-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 1px solid transparent;
border-radius: var(--db-radius);
background: transparent;
color: var(--db-muted);
padding: 0;
}
.db-iconbtn:hover { background: var(--db-surface-3); border-color: var(--db-line); color: var(--db-ink); }
.db-iconbtn.db-danger:hover { background: var(--db-crit-bg); border-color: var(--db-crit-line); color: var(--db-crit); }
.db-iconbtn[disabled] { opacity: 0.35; cursor: default; }
.db-iconbtn[disabled]:hover { background: transparent; border-color: transparent; color: var(--db-muted); }
/* status pill — the only place color means anything */
.db-pill {
display: inline-flex;
align-items: center;
gap: 5px;
height: 20px;
padding: 0 8px 0 6px;
border: 1px solid var(--db-idle-line);
border-radius: 10px;
background: var(--db-idle-bg);
color: var(--db-idle);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.db-pill .db-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.db-pill.db-ok { color: var(--db-ok); background: var(--db-ok-bg); border-color: var(--db-ok-line); }
.db-pill.db-warn { color: var(--db-warn); background: var(--db-warn-bg); border-color: var(--db-warn-line); }
.db-pill.db-crit { color: var(--db-crit); background: var(--db-crit-bg); border-color: var(--db-crit-line); }
.db-pill.db-info { color: var(--db-accent-deep); background: var(--db-accent-soft); border-color: var(--db-accent-line); }
/* filter chip */
.db-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.db-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
border: 1px solid var(--db-line);
border-radius: 12px;
background: var(--db-surface-2);
color: var(--db-ink-2);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
.db-chip:hover { border-color: var(--db-line-strong); color: var(--db-ink); }
.db-chip.db-on { background: var(--db-accent); border-color: var(--db-accent); color: var(--db-on-accent); }
.db-chip .db-c { font-family: var(--db-font-mono); font-size: 11px; opacity: 0.75; }
/* the guided (i) marker */
.db-helpdot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid var(--db-line-strong);
background: transparent;
color: var(--db-muted);
font-size: 10px;
font-weight: 700;
line-height: 1;
vertical-align: 1px;
padding: 0;
}
.db-helpdot:hover { border-color: var(--db-accent); color: var(--db-accent); }
/* =========================================================== 6 BLOCKS === */
.db-panel {
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
overflow: hidden;
}
.db-panel-head {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
background: var(--db-surface-2);
border-bottom: 1px solid var(--db-line);
}
.db-panel-head h2 { font-size: 13px; font-weight: 700; color: var(--db-ink); letter-spacing: 0.01em; }
.db-panel-head .db-icon { color: var(--db-muted); }
.db-panel-head .db-right { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.db-panel-body { padding: 12px 13px; }
.db-panel-body.db-flush { padding: 0; }
.db-cols-2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: start; }
.db-stack { display: flex; flex-direction: column; gap: 16px; }
/* ---- attention queue ---------------------------------------------------- */
.db-attn {
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
overflow: hidden;
}
.db-attn-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--db-line);
background: var(--db-surface-2);
}
.db-attn-head h2 { font-size: 15px; font-weight: 700; color: var(--db-ink); }
.db-attn-head .db-icon { color: var(--db-crit); }
.db-attn-head .db-tally { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--db-muted); }
.db-attn-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px 12px 11px;
border-top: 1px solid var(--db-line-soft);
border-left: 3px solid transparent;
}
.db-attn-row:first-of-type { border-top: 0; }
.db-attn-row:hover { background: var(--db-surface-2); }
.db-attn-row.db-crit { border-left-color: var(--db-crit); }
.db-attn-row.db-warn { border-left-color: var(--db-warn); }
.db-attn-badge {
width: 28px;
height: 28px;
border-radius: var(--db-radius);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--db-idle-line);
background: var(--db-idle-bg);
color: var(--db-idle);
}
.db-attn-row.db-crit .db-attn-badge { border-color: var(--db-crit-line); background: var(--db-crit-bg); color: var(--db-crit); }
.db-attn-row.db-warn .db-attn-badge { border-color: var(--db-warn-line); background: var(--db-warn-bg); color: var(--db-warn); }
.db-attn-t { font-size: 13px; font-weight: 600; color: var(--db-ink); }
.db-attn-d { font-size: 12px; color: var(--db-ink-2); margin-top: 2px; }
.db-attn-d .db-mono { font-size: 11.5px; }
.db-attn-row.db-crit .db-attn-d .db-mono { color: var(--db-crit); }
.db-attn-d .db-when { color: var(--db-muted); }
.db-attn-acts { display: flex; gap: 6px; flex: none; }
/* ---- module health strip ------------------------------------------------ */
.db-modstrip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--db-line-soft);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
overflow: hidden;
}
.db-modtile {
background: var(--db-surface);
padding: 9px 12px 10px;
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
border: 0;
min-width: 0;
text-decoration: none;
}
.db-modtile:hover { background: var(--db-surface-2); text-decoration: none; }
.db-modtile .db-top { display: flex; align-items: center; gap: 7px; }
.db-modtile .db-name { font-size: 12px; font-weight: 600; color: var(--db-ink-2); }
.db-modtile .db-top .db-icon { color: var(--db-muted); }
.db-modtile .db-st {
margin-left: auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--db-ok);
flex: none;
}
.db-modtile .db-st.db-warn { background: var(--db-warn); }
.db-modtile .db-st.db-info { background: var(--db-accent); }
.db-modtile .db-st.db-crit { background: var(--db-crit); }
.db-modtile .db-st.db-idle { background: var(--db-idle-line); }
.db-modtile .db-val { display: block; font-size: 15px; font-weight: 700; color: var(--db-ink); letter-spacing: -0.01em; }
.db-modtile .db-val small { font-size: 12px; font-weight: 500; color: var(--db-muted); margin-left: 4px; }
/* ---- tables / the grid -------------------------------------------------- */
.db-table { width: 100%; border-collapse: collapse; }
.db-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-muted);
background: var(--db-surface-2);
padding: 7px 12px;
border-bottom: 1px solid var(--db-line);
white-space: nowrap;
}
.db-table tbody td {
padding: 7px 12px;
border-bottom: 1px solid var(--db-line-soft);
font-size: 13px;
color: var(--db-ink-2);
vertical-align: middle;
}
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table tbody tr:hover td { background: var(--db-surface-2); }
.db-table td.db-name { color: var(--db-ink); font-weight: 600; }
.db-table td.db-n, .db-table th.db-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-table td.db-n { font-family: var(--db-font-mono); }
/* ---- Previous versions (download cards) ----------------------------------
Version, date and the shortened hash stay on one line; Notes takes the rest in the
proportional UI font and wraps. Below ~560px of card width each row stacks into a
labeled block (a container query, so it follows the card, not the window). */
.db-prev { container-type: inline-size; margin-top: 8px; }
.db-prev-scroll { overflow-x: auto; }
.db-prev-table { table-layout: auto; }
.db-prev-table td.db-prev-ver,
.db-prev-table td.db-prev-rel,
.db-prev-table td.db-prev-sha,
.db-prev-table td.db-prev-dl { white-space: nowrap; }
.db-prev-table td.db-prev-notes { width: 100%; min-width: 12em; font-family: var(--db-font-ui); overflow-wrap: anywhere; }
.db-prev-table td.db-prev-notes,
.db-prev-table td.db-prev-ver,
.db-prev-table td.db-prev-rel,
.db-prev-table td.db-prev-sha,
.db-prev-table td.db-prev-dl { vertical-align: top; }
.db-prev-hash { font-size: 12px; margin-right: 6px; }
.db-prev-notes-btn, .db-prev-copy { font-size: 12.5px; }
.db-prev-notes-btn { display: inline-block; margin-top: 2px; }
.db-prev-notes-row td { background: var(--db-surface-2); padding: 10px 16px; }
.db-prev-md { font-family: var(--db-font-ui); font-size: 13px; line-height: 1.5; color: var(--db-ink-2); max-width: 72ch; overflow-wrap: anywhere; }
.db-prev-md > :first-child { margin-top: 0; }
.db-prev-md > :last-child { margin-bottom: 0; }
.db-prev-md p { margin: 0 0 6px; }
.db-prev-md h1, .db-prev-md h2, .db-prev-md h3, .db-prev-md h4 { font-size: 13px; font-weight: 700; margin: 10px 0 4px; color: var(--db-ink); }
.db-prev-md ul, .db-prev-md ol { margin: 0 0 6px; padding-left: 20px; }
.db-prev-md li { margin: 2px 0; }
.db-prev-md code { font-family: var(--db-font-mono); font-size: 12px; }
@container (max-width: 560px) {
.db-prev-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.db-prev-table, .db-prev-table tbody, .db-prev-table tr, .db-prev-table td { display: block; width: auto; }
.db-prev-table tbody tr { padding: 8px 12px; border-bottom: 1px solid var(--db-line-soft); }
.db-prev-table tbody td { padding: 2px 0; border: 0; white-space: normal; }
.db-prev-table td.db-prev-notes { min-width: 0; }
.db-prev-table td[data-label]::before {
content: attr(data-label);
display: inline-block;
min-width: 84px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-muted);
}
.db-prev-table td.db-prev-notes > .db-prev-summary { display: inline-block; vertical-align: top; max-width: calc(100% - 92px); }
.db-prev-table tbody tr.db-prev-notes-row { padding: 0; }
.db-prev-notes-row td { padding: 10px 12px; }
}
/* views bar sits directly on top of the grid and shares its border */
.db-viewbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 9px 13px;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
border-bottom: 0;
}
.db-viewsel-wrap { position: relative; }
.db-viewsel {
display: inline-flex;
align-items: center;
gap: 8px;
height: 28px;
padding: 0 8px 0 10px;
border: 1px solid var(--db-line-strong);
border-radius: var(--db-radius);
background: var(--db-surface-2);
color: var(--db-ink);
font-size: 13px;
font-weight: 600;
}
.db-viewsel:hover { border-color: var(--db-accent); }
.db-viewsel .db-vk {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-viewsel .db-icon { color: var(--db-muted); }
.db-viewmenu {
position: absolute;
z-index: 300;
margin-top: 2px;
min-width: 240px;
padding: 4px;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
box-shadow: var(--db-shadow-2);
}
.db-viewmenu button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
padding: 5px 8px;
border: 0;
border-radius: 2px;
background: transparent;
font-size: 13px;
color: var(--db-ink-2);
}
.db-viewmenu button:hover { background: var(--db-accent-soft); color: var(--db-accent-deep); }
.db-viewmenu button .db-c { margin-left: auto; font-family: var(--db-font-mono); font-size: 11px; color: var(--db-faint); }
.db-viewmenu .db-sep { height: 1px; background: var(--db-line); margin: 4px 2px; }
.db-viewmenu .db-cap {
padding: 6px 8px 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-searchbox {
display: flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 9px;
width: 250px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface);
color: var(--db-muted);
}
.db-searchbox:focus-within { border-color: var(--db-accent); }
.db-searchbox input {
border: 0;
background: transparent;
outline: none;
font: inherit;
font-size: 12.5px;
color: var(--db-ink);
width: 100%;
}
.db-searchbox input::placeholder { color: var(--db-faint); }
.db-gridwrap {
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 0 0 var(--db-radius-lg) var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
overflow-x: auto;
}
.db-grid { table-layout: fixed; min-width: 1080px; }
.db-grid th { position: relative; }
.db-grid th .db-thin {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
user-select: none;
}
.db-grid th .db-thin:hover { color: var(--db-ink); }
.db-grid th .db-sortmark { color: var(--db-accent); font-size: 10px; }
.db-grid th.db-check, .db-grid td.db-check { width: 34px; padding-left: 12px; padding-right: 0; }
.db-shell input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--db-accent); margin: 0; }
/* Excel-style column filter row */
.db-grid tr.db-filterrow th {
background: var(--db-surface);
border-bottom: 1px solid var(--db-line);
padding: 5px 8px;
text-transform: none;
letter-spacing: 0;
}
.db-colfilter {
width: 100%;
height: 24px;
border: 1px solid var(--db-line);
border-radius: 2px;
background: var(--db-surface-2);
color: var(--db-ink);
font: inherit;
font-size: 12px;
padding: 0 6px;
outline: none;
}
.db-colfilter::placeholder { color: var(--db-faint); }
.db-colfilter:focus { border-color: var(--db-accent); background: var(--db-surface); }
select.db-colfilter { padding: 0 4px; }
.db-grid tr.db-filterrow .db-fx { display: flex; align-items: center; justify-content: center; color: var(--db-faint); }
/* rows */
.db-grid tbody tr.db-row td { height: 34px; }
.db-grid tbody tr.db-row.db-sel td { background: var(--db-selection); }
.db-grid tbody tr.db-row .db-rowacts { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; }
.db-grid tbody tr.db-row:hover .db-rowacts,
.db-grid tbody tr.db-row:focus-within .db-rowacts { opacity: 1; }
.db-jobname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-jobname .db-nm { font-weight: 600; color: var(--db-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* name + a badge that qualifies it (e.g. "Example"), on one line */
.db-jobname .db-nmline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.db-pill.db-mini { height: 17px; padding: 0 6px; font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; }
.db-jobname .db-sub { font-size: 11.5px; color: var(--db-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sched .db-h { display: block; }
.db-sched .db-c { display: block; font-family: var(--db-font-mono); font-size: 11px; color: var(--db-muted); }
.db-lastrun { display: flex; align-items: center; gap: 7px; }
.db-lastrun-meta { font-size: 11.5px; color: var(--db-muted); font-family: var(--db-font-mono); }
.db-sf { font-family: var(--db-font-mono); font-size: 12px; white-space: nowrap; }
.db-sf .db-s { color: var(--db-ok); }
.db-sf .db-f { color: var(--db-crit); }
.db-sf .db-slash { color: var(--db-faint); margin: 0 2px; }
/* inline error reveal row */
.db-grid tr.db-errrow td {
background: var(--db-crit-bg);
border-bottom: 1px solid var(--db-crit-line);
padding: 8px 12px 10px 46px;
font-size: 12px;
color: var(--db-crit);
height: auto;
}
.db-grid tr.db-errrow.db-is-warn td { background: var(--db-warn-bg); border-bottom-color: var(--db-warn-line); color: var(--db-warn); }
.db-errline { display: flex; align-items: flex-start; gap: 8px; }
.db-errline .db-icon { margin-top: 1px; }
.db-errline .db-mono { font-size: 11.5px; }
.db-errline .db-acts { margin-left: auto; display: flex; gap: 6px; }
/* Result lines used OUTSIDE a grid row - an editor panel reporting a connection test. Unlike
.db-errline above, which takes its color from the .db-errrow it sits in, these carry their own. */
.db-okline { display: flex; align-items: flex-start; gap: 8px; color: var(--db-ok); }
/* A sample of fetched content (source preview). Scrolls rather than stretching the page, and wraps
rather than forcing the whole layout wide on one long JSON line. */
.db-pre {
margin: 8px 0 0;
padding: 10px 12px;
max-height: 320px;
overflow: auto;
background: var(--db-surface-2);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
font-family: var(--db-font-mono);
font-size: 11.5px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
color: var(--db-ink-2);
}
/* bulk selection bar */
.db-bulkbar {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 13px;
background: var(--db-accent-soft);
border: 1px solid var(--db-accent-line);
border-radius: var(--db-radius);
font-size: 12.5px;
color: var(--db-accent-deep);
}
.db-bulkbar strong { font-weight: 700; font-family: var(--db-font-mono); }
/* ---- record header ------------------------------------------------------ */
.db-record-head {
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
overflow: hidden;
}
.db-rh-top { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px 12px; }
.db-rh-title { min-width: 0; }
.db-rh-title h1 { font-size: 19px; font-weight: 700; color: var(--db-ink); }
.db-rh-title .db-idline {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 5px;
font-size: 12px;
color: var(--db-muted);
}
.db-rh-title .db-idline .db-mono { font-size: 11.5px; }
.db-rh-badges { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.db-rh-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--db-line);
background: var(--db-surface-2);
}
.db-fact { padding: 9px 16px; border-right: 1px solid var(--db-line-soft); min-width: 0; }
.db-fact:last-child { border-right: 0; }
.db-fact .db-k {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-fact .db-v { font-size: 13px; font-weight: 600; color: var(--db-ink); margin-top: 2px; }
.db-fact .db-v .db-mono { font-weight: 500; font-size: 12px; color: var(--db-ink-2); }
.db-fact .db-v.db-ok { color: var(--db-ok); }
.db-fact .db-v.db-crit { color: var(--db-crit); }
.db-rh-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-top: 1px solid var(--db-line);
background: var(--db-accent-soft);
font-size: 13px;
color: var(--db-accent-deep);
}
/* ---- run history strip -------------------------------------------------- */
.db-runhist-wrap { display: flex; align-items: flex-end; gap: 20px; }
.db-runhist { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.db-runbar {
width: 26px;
border-radius: 2px 2px 0 0;
background: var(--db-ok);
opacity: 0.85;
border: 0;
padding: 0;
display: block;
min-height: 3px;
}
.db-runbar:hover { opacity: 1; }
.db-runbar.db-fail { background: var(--db-crit); opacity: 1; }
.db-runbar.db-warnrun { background: var(--db-warn); opacity: 1; }
.db-runbar.db-idlerun { background: var(--db-idle-line); }
.db-runhist-scale {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 56px;
font-family: var(--db-font-mono);
font-size: 10.5px;
color: var(--db-faint);
}
.db-runhist-legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--db-muted); }
.db-runhist-legend .db-row { display: flex; align-items: center; gap: 7px; }
.db-runhist-legend .db-sw { width: 9px; height: 9px; border-radius: 2px; }
/* ---- empty state -------------------------------------------------------- */
.db-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 22px 16px 24px;
border: 1px dashed var(--db-line-strong);
border-radius: var(--db-radius-lg);
background: var(--db-surface-2);
}
.db-empty .db-icon { color: var(--db-faint); }
.db-empty h3 { font-size: 13px; font-weight: 700; color: var(--db-ink); }
.db-empty p { margin: 0; font-size: 12px; color: var(--db-muted); max-width: 62ch; }
.db-empty .db-acts { display: flex; gap: 8px; margin-top: 6px; }
/* ---- locked feature preview --------------------------------------------- */
.db-locked:not(.db-nav-item):not(.db-nav-solo) { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px 20px; border: 1px dashed var(--db-line-strong); border-radius: var(--db-radius-lg); background: var(--db-surface-2); }
.db-locked-head { display: flex; gap: 12px; align-items: flex-start; }
.db-locked-head .db-icon { color: var(--db-faint); flex: none; }
.db-locked-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--db-ink); }
.db-locked-head p { margin: 4px 0 0; font-size: 12px; color: var(--db-muted); max-width: 72ch; }
.db-locked-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.db-locked-ex { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.db-locked-ex figcaption { font-size: 11px; color: var(--db-muted); }
.db-locked-pic { border: 1px solid var(--db-line); border-radius: var(--db-radius-lg); background: var(--db-surface); padding: 8px 10px; opacity: .85; user-select: none; }
.db-locked-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--db-line-soft); }
.db-locked-line:last-child { border-bottom: 0; }
.db-locked-k { flex: none; width: 82px; color: var(--db-muted); }
.db-locked-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--db-font-mono); color: var(--db-ink); }
.db-locked-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
/* ================================================ 7 MUDBLAZOR BRIDGE ==== */
/* Pages not touched in phase 1 keep their MudBlazor markup and inherit the
system through these rules. Declaring the Mud palette variables on `body`
(not :root) lets them win over MudThemeProvider's own :root block without
!important, and keeps them in step with the tokens above in both themes. */
body {
--mud-palette-primary: var(--db-accent);
--mud-palette-primary-darken: var(--db-accent-deep);
--mud-palette-primary-lighten: var(--db-accent);
--mud-palette-primary-text: var(--db-on-accent);
--mud-palette-secondary: var(--db-accent);
--mud-palette-info: var(--db-accent);
--mud-palette-success: var(--db-ok);
--mud-palette-warning: var(--db-warn);
--mud-palette-error: var(--db-crit);
--mud-palette-background: var(--db-app);
--mud-palette-background-gray: var(--db-app);
--mud-palette-surface: var(--db-surface);
--mud-palette-text-primary: var(--db-ink);
--mud-palette-text-secondary: var(--db-muted);
--mud-palette-text-disabled: var(--db-faint);
--mud-palette-action-default: var(--db-muted);
--mud-palette-divider: var(--db-line);
--mud-palette-divider-light: var(--db-line-soft);
--mud-palette-lines-default: var(--db-line);
--mud-palette-lines-inputs: var(--db-line);
--mud-palette-table-lines: var(--db-line-soft);
--mud-palette-table-striped: var(--db-surface-2);
--mud-palette-table-hover: var(--db-surface-2);
--mud-palette-drawer-background: var(--db-band);
--mud-palette-drawer-text: var(--db-ink-2);
--mud-palette-drawer-icon: var(--db-muted);
--mud-palette-appbar-background: var(--db-band-2);
--mud-palette-appbar-text: var(--db-ink);
--mud-default-borderradius: var(--db-radius-lg);
--mud-typography-default-family: var(--db-font-ui);
--mud-typography-body1-size: 13px;
--mud-typography-body2-size: 12px;
}
.mud-typography, .mud-input, .mud-button-root, .mud-table {
font-family: var(--db-font-ui);
}
/* Type: bring Material's display scale back to the five sizes */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
font-size: 19px;
font-weight: 700;
letter-spacing: 0.005em;
line-height: 1.35;
}
.mud-typography-h5, .mud-typography-h6 { font-size: 15px; font-weight: 700; line-height: 1.4; }
.mud-typography-subtitle1, .mud-typography-subtitle2 { font-size: 13px; font-weight: 600; }
.mud-typography-body1 { font-size: 13px; }
.mud-typography-body2, .mud-typography-caption { font-size: 12px; }
.mud-typography-overline {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--db-faint);
}
/* Surfaces */
.mud-paper {
background-color: var(--db-surface);
color: var(--db-ink);
border-radius: var(--db-radius-lg);
border: 1px solid var(--db-line);
box-shadow: var(--db-shadow-1) !important;
}
.mud-paper-outlined { border: 1px solid var(--db-line); }
.mud-card { border-radius: var(--db-radius-lg); border: 1px solid var(--db-line); box-shadow: var(--db-shadow-1) !important; }
.mud-card-header { border-bottom: 1px solid var(--db-line-soft); background: var(--db-surface-2); }
/* Buttons — flatter, 26/28px tall, one accent */
.mud-button-root {
border-radius: var(--db-radius);
text-transform: none;
letter-spacing: 0;
font-size: 12.5px;
font-weight: 600;
min-width: 0;
}
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-primary { background-color: var(--db-accent); color: var(--db-on-accent); }
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--db-accent-deep); }
.mud-button-outlined { border-color: var(--db-line); color: var(--db-ink-2); background: var(--db-surface); }
.mud-button-outlined:hover { border-color: var(--db-line-strong); background: var(--db-surface-3); color: var(--db-ink); }
/* Inputs */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--db-line); border-radius: var(--db-radius); }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--db-line-strong); }
.mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--db-accent); border-width: 1px; }
.mud-input-root { font-size: 13px; color: var(--db-ink); }
.mud-input-label { font-size: 12px; color: var(--db-muted); }
/* Tables */
.mud-table {
background-color: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow-1) !important;
}
.mud-table .mud-table-head .mud-table-cell {
background: var(--db-surface-2);
color: var(--db-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid var(--db-line);
white-space: nowrap;
}
.mud-table .mud-table-cell { font-size: 13px; color: var(--db-ink-2); border-bottom: 1px solid var(--db-line-soft); }
.mud-table .mud-table-row:hover .mud-table-cell { background: var(--db-surface-2); }
.mud-table-dense .mud-table-cell { padding: 7px 12px; }
.mud-table-toolbar { border-bottom: 1px solid var(--db-line); background: var(--db-surface-2); }
/* Data grid shares the table conventions */
.mud-data-grid .mud-table-head .mud-table-cell { background: var(--db-surface-2); }
.mud-data-grid .mud-table-cell { font-size: 13px; }
/* Tabs */
.mud-tabs .mud-tabs-toolbar { background: transparent; border-bottom: 1px solid var(--db-line); min-height: 32px; }
.mud-tabs .mud-tab {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 600;
color: var(--db-muted);
min-height: 32px;
min-width: 0;
padding: 0 14px;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--db-accent-deep); }
.mud-tabs .mud-tab-slider { background-color: var(--db-accent); height: 2px; }
/* Chips — state colors only, pill geometry from the system */
.mud-chip {
border-radius: 10px;
font-size: 12px;
font-weight: 600;
height: 20px;
letter-spacing: 0;
}
.mud-chip.mud-chip-filled.mud-chip-color-success { background-color: var(--db-ok-bg); color: var(--db-ok); border: 1px solid var(--db-ok-line); }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background-color: var(--db-warn-bg); color: var(--db-warn); border: 1px solid var(--db-warn-line); }
.mud-chip.mud-chip-filled.mud-chip-color-error { background-color: var(--db-crit-bg); color: var(--db-crit); border: 1px solid var(--db-crit-line); }
.mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-chip.mud-chip-filled.mud-chip-color-primary { background-color: var(--db-accent-soft); color: var(--db-accent-deep); border: 1px solid var(--db-accent-line); }
.mud-chip.mud-chip-filled.mud-chip-color-default { background-color: var(--db-idle-bg); color: var(--db-idle); border: 1px solid var(--db-idle-line); }
/* Alerts — a hairline block, not a slab of color */
.mud-alert { border-radius: var(--db-radius); font-size: 12.5px; box-shadow: none !important; }
.mud-alert.mud-alert-filled-success, .mud-alert.mud-alert-text-success { background-color: var(--db-ok-bg); color: var(--db-ok); border: 1px solid var(--db-ok-line); }
.mud-alert.mud-alert-filled-warning, .mud-alert.mud-alert-text-warning { background-color: var(--db-warn-bg); color: var(--db-warn); border: 1px solid var(--db-warn-line); }
.mud-alert.mud-alert-filled-error, .mud-alert.mud-alert-text-error { background-color: var(--db-crit-bg); color: var(--db-crit); border: 1px solid var(--db-crit-line); }
.mud-alert.mud-alert-filled-info, .mud-alert.mud-alert-text-info { background-color: var(--db-accent-soft); color: var(--db-accent-deep); border: 1px solid var(--db-accent-line); }
.mud-alert .mud-alert-icon { color: currentColor; }
/* Drawer / app bar — used by the auth layout and any secondary layout */
.mud-drawer { background-color: var(--db-band); border-right: 1px solid var(--db-line); }
.mud-appbar { background-color: var(--db-band-2) !important; color: var(--db-ink) !important; box-shadow: none !important; border-bottom: 1px solid var(--db-line); }
.mud-nav-link { font-size: 13px; color: var(--db-ink-2); }
.mud-nav-link:hover { background: var(--db-surface-3); color: var(--db-ink); }
.mud-nav-link.active { background: var(--db-surface); color: var(--db-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--db-accent); }
/* Dialogs, popovers, snackbars */
.mud-dialog { border-radius: var(--db-radius-lg); border: 1px solid var(--db-line); }
.mud-dialog-title { font-size: 15px; font-weight: 700; }
.mud-popover-paper { background: var(--db-surface); border: 1px solid var(--db-line); border-radius: var(--db-radius); box-shadow: var(--db-shadow-2) !important; }
.mud-snackbar { border-radius: var(--db-radius); font-size: 12.5px; }
.mud-progress-linear .mud-progress-linear-bar { background-color: var(--db-accent); }
/* Pages written before the redesign wrap themselves in MudContainer; keep
them inside the new content column instead of re-centering on the viewport. */
.db-content > .mud-container, .db-content .mud-main-content > .mud-container { max-width: 100%; padding-left: 0; padding-right: 0; }
/* ======================================================= 8 RESPONSIVE === */
@media (max-width: 1360px) {
:root { --db-rail-w: 264px; }
}
@media (max-width: 1160px) {
:root { --db-nav-w: 212px; }
.db-search { width: 190px; }
.db-cols-2 { grid-template-columns: minmax(0, 1fr); }
.db-rh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-fact:nth-child(2) { border-right: 0; }
}
@media (max-width: 1024px) {
.db-rail, .db-rail-toggle { display: none; }
.db-modstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-screen-body { padding: 12px 12px 24px; }
/* Search moves into an icon-triggered overlay below this breakpoint
(see .db-search-toggle / .db-search-mobile-open) rather than
disappearing outright — u3 review #1. */
.db-search { display: none; }
.db-search-toggle { display: flex; }
.db-search.db-search-mobile-open {
display: flex;
position: absolute;
top: calc(100% + 6px);
left: 12px;
right: 12px;
width: auto;
height: 34px;
z-index: 40;
background: var(--db-surface);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
}
/* ================================== 9 RECORD SCREENS (PHASE 2) ========== */
/* Everything below is new in phase 2: the tab strip a record screen owns, the
step master/detail, the workbench (list + inspector) the job monitor uses,
the mono log panel, and the marketplace list. Anything a phase-1 page had
already solved (panels, pills, grid, record header) is reused as-is. */
/* ---- record tab strip --------------------------------------------------- */
.db-tabs {
display: flex;
align-items: flex-end;
gap: 2px;
border-bottom: 1px solid var(--db-line);
background: var(--db-band);
padding: 0 6px;
border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
overflow-x: auto;
}
.db-tabs .db-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 13px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: var(--db-radius) var(--db-radius) 0 0;
background: transparent;
color: var(--db-muted);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
position: relative;
}
.db-tabs .db-tab:hover { color: var(--db-ink); background: var(--db-surface-3); }
.db-tabs .db-tab.db-on {
background: var(--db-surface);
border-color: var(--db-line);
color: var(--db-ink);
margin-bottom: -1px;
padding-bottom: 1px;
}
/* the 2px accent slider, drawn on the active tab only */
.db-tabs .db-tab.db-on::after {
content: "";
position: absolute;
left: -1px;
right: -1px;
top: -1px;
height: 2px;
background: var(--db-accent);
border-radius: 2px 2px 0 0;
}
.db-tabs .db-tab .db-c {
font-family: var(--db-font-mono);
font-size: 11px;
color: var(--db-faint);
font-variant-numeric: tabular-nums;
}
.db-tabs .db-tab.db-on .db-c { color: var(--db-accent-deep); }
.db-tabs .db-tab .db-icon { color: currentColor; }
/* the panel under the strip — one surface, joined to the tabs by the hairline */
.db-tabpanel {
background: var(--db-surface);
border: 1px solid var(--db-line);
border-top: 0;
border-radius: 0 0 var(--db-radius-lg) var(--db-radius-lg);
box-shadow: var(--db-shadow-1);
padding: 14px 16px 16px;
}
.db-tabpanel.db-flush { padding: 0; }
/* ---- forms -------------------------------------------------------------- */
/* MudBlazor keeps the widgets; this only lays them out on the 8px rhythm. */
.db-form {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px 16px;
align-items: start;
}
.db-field { grid-column: span 6; min-width: 0; }
.db-field.db-span-2 { grid-column: span 2; }
.db-field.db-span-3 { grid-column: span 3; }
.db-field.db-span-6 { grid-column: span 6; }
.db-field.db-span-4 { grid-column: span 4; }
.db-field.db-span-8 { grid-column: span 8; }
.db-field.db-span-12 { grid-column: span 12; }
.db-field > .db-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
margin-bottom: 4px;
}
/* a single-line text field with buttons beside it: the field is a plain flex item, never given a height */
.db-pathrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.db-pathrow-input { flex: 1 1 280px; min-width: 0; }
.db-pathrow-input .mud-input-control { margin: 0; width: 100%; }
.db-field .db-fhint { margin-top: 3px; font-size: 11.5px; color: var(--db-muted); }
.db-field .db-fhint .db-mono { font-size: 11px; }
/* a labeled divider between groups of fields inside a tab panel */
.db-formsec {
grid-column: span 12;
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--db-line-soft);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-formsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* plain checkbox/switch row, for the notification toggles */
.db-checkrow {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--db-ink-2);
}
.db-checkrow input[type="checkbox"] { margin-top: 2px; }
.db-checkrow .db-sub { display: block; font-size: 11.5px; color: var(--db-muted); margin-top: 2px; }
/* ---- master / detail (job steps) ---------------------------------------- */
.db-md {
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
min-height: 340px;
}
.db-md-list { border-right: 1px solid var(--db-line); background: var(--db-surface-2); min-width: 0; }
.db-md-detail { min-width: 0; padding: 12px 16px 16px; }
.db-md-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 12px;
border-bottom: 1px solid var(--db-line);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-md-head .db-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.db-steplist { display: flex; flex-direction: column; }
.db-stepitem {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 8px 7px 10px;
border: 0;
border-bottom: 1px solid var(--db-line-soft);
border-left: 3px solid transparent;
background: transparent;
text-align: left;
color: var(--db-ink-2);
}
.db-stepitem:hover { background: var(--db-surface); }
.db-stepitem.db-on {
background: var(--db-surface);
border-left-color: var(--db-accent);
color: var(--db-ink);
}
.db-stepitem.db-off .db-t { color: var(--db-muted); text-decoration: line-through; }
.db-stepitem .db-no {
font-family: var(--db-font-mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--db-faint);
text-align: right;
}
.db-stepitem .db-t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.db-stepitem .db-t .db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-stepitem .db-t .db-icon { color: var(--db-muted); flex: none; }
.db-stepitem.db-on .db-t .db-icon { color: var(--db-accent); }
.db-stepitem .db-d { grid-column: 2 / 4; font-size: 11.5px; color: var(--db-muted); display: flex; align-items: center; gap: 6px; }
.db-stepitem .db-stepacts { display: flex; gap: 1px; opacity: 0; }
.db-stepitem:hover .db-stepacts, .db-stepitem:focus-within .db-stepacts, .db-stepitem.db-on .db-stepacts { opacity: 1; }
/* the small on-failure badge under a step name */
.db-badge-soft {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
border-radius: 2px;
border: 1px solid var(--db-line);
background: var(--db-surface-2);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--db-muted);
}
.db-badge-soft.db-crit { color: var(--db-crit); background: var(--db-crit-bg); border-color: var(--db-crit-line); }
.db-badge-soft.db-warn { color: var(--db-warn); background: var(--db-warn-bg); border-color: var(--db-warn-line); }
.db-badge-soft.db-ok { color: var(--db-ok); background: var(--db-ok-bg); border-color: var(--db-ok-line); }
.db-md-detail .db-dhead {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid var(--db-line-soft);
}
.db-md-detail .db-dhead h3 { font-size: 13px; font-weight: 700; color: var(--db-ink); }
.db-md-detail .db-dhead .db-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* ---- workbench: list left, inspector right ------------------------------ */
.db-wb { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.db-wb-list, .db-wb-insp { min-width: 0; }
.db-exlist { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; }
.db-exrow {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px 8px 9px;
border: 0;
border-bottom: 1px solid var(--db-line-soft);
border-left: 3px solid transparent;
background: transparent;
text-align: left;
}
.db-exrow:hover { background: var(--db-surface-2); }
.db-exrow.db-on { background: var(--db-accent-soft); border-left-color: var(--db-accent); }
.db-exrow .db-st { width: 8px; height: 8px; border-radius: 50%; background: var(--db-idle-line); }
.db-exrow .db-st.db-ok { background: var(--db-ok); }
.db-exrow .db-st.db-warn { background: var(--db-warn); }
.db-exrow .db-st.db-crit { background: var(--db-crit); }
.db-exrow .db-st.db-info { background: var(--db-accent); }
.db-exrow .db-t { display: block; font-size: 13px; font-weight: 600; color: var(--db-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-exrow .db-d { display: block; margin-top: 1px; font-size: 11.5px; color: var(--db-muted); font-family: var(--db-font-mono); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-exrow .db-right { text-align: right; font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-muted); font-variant-numeric: tabular-nums; }
/* inspector facts — the same key/value rhythm as the record header band */
.db-inspfacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--db-line-soft);
border-left: 1px solid var(--db-line-soft);
}
.db-inspfacts .db-fact {
border-right: 1px solid var(--db-line-soft);
border-bottom: 1px solid var(--db-line-soft);
padding: 7px 12px;
}
.db-inspfacts .db-fact:last-child { border-right: 1px solid var(--db-line-soft); }
/* ---- step timeline (an execution's steps, in order) --------------------- */
.db-steptl { display: flex; flex-direction: column; }
.db-steptl .db-tlrow {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 7px 12px 7px 10px;
border-bottom: 1px solid var(--db-line-soft);
}
.db-steptl .db-tlrow:last-child { border-bottom: 0; }
.db-steptl .db-no { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-muted); text-align: right; }
.db-steptl .db-t { font-size: 13px; color: var(--db-ink-2); display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-steptl .db-t .db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--db-ink); }
.db-steptl .db-right { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- log / error panel -------------------------------------------------- */
.db-log {
margin: 0;
padding: 10px 12px;
max-height: 260px;
overflow: auto;
background: var(--db-surface-2);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
font-family: var(--db-font-mono);
font-size: 11.5px;
line-height: 1.55;
color: var(--db-ink-2);
white-space: pre-wrap;
word-break: break-word;
}
.db-log.db-crit { background: var(--db-crit-bg); border-color: var(--db-crit-line); color: var(--db-crit); }
.db-log.db-warn { background: var(--db-warn-bg); border-color: var(--db-warn-line); color: var(--db-warn); }
/* Marketplace's row list is gone (R2): the catalog now uses the shared
.db-cardgrid/.db-card (section 17) for its Cards view and a plain .db-grid
table for its Table view, the same as every other list page. */
/* ---- phase-2 responsive ------------------------------------------------- */
@media (max-width: 1160px) {
.db-wb { grid-template-columns: minmax(0, 1fr); }
.db-md { grid-template-columns: minmax(0, 1fr); }
.db-md-list { border-right: 0; border-bottom: 1px solid var(--db-line); }
.db-field { grid-column: span 12; }
.db-field.db-span-2, .db-field.db-span-3, .db-field.db-span-4,
.db-field.db-span-6, .db-field.db-span-8 { grid-column: span 12; }
}
/* ============================== 10 SYNC PAGES (PHASE 3, GROUP A) ========= */
/* Appended by the Sync group: file templates, field mappings, upload & parse
and transform. Self-contained — every rule here is new, none overrides an
existing selector except by adding a class of its own. */
/* ---- a file picker wearing the command-bar geometry ---------------------- */
/* MudFileUpload cannot live inside the command bar, so the label is the
command and the input is hidden inside it. */
.db-cmd-file { position: relative; overflow: hidden; }
.db-cmd-file input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* ---- a grid name rendered as a button (read-only records open a dialog) -- */
.db-linkbtn {
padding: 0;
border: 0;
background: none;
text-align: left;
color: var(--db-accent);
font: inherit;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-linkbtn:hover { text-decoration: underline; }
/* ---- inline reveal, informational variant -------------------------------- */
/* The error row's calm sibling: the same band, in the accent, for "here is
what is inside this record" rather than "here is what went wrong". */
.db-grid tr.db-errrow.db-is-info td {
background: var(--db-accent-soft);
border-bottom-color: var(--db-accent-line);
color: var(--db-accent-deep);
}
/* ---- row tints for rules and rows that need attention -------------------- */
.db-grid tbody tr.db-row.db-row-warn td { background: var(--db-warn-bg); }
.db-grid tbody tr.db-row.db-row-crit td { background: var(--db-crit-bg); }
/* The third one exists for a diff, where "this row is new" is as much a state as
"this row is a problem" — added rows on the ok tint, removed on the crit one. */
.db-grid tbody tr.db-row.db-row-ok td { background: var(--db-ok-bg); }
/* ---- grids narrower or wider than the 1080px default --------------------- */
/* Long names (schema.table, index) in a fixed-layout grid: clip with an ellipsis; the cell carries a title tooltip. */
.db-grid td.db-clip, .db-grid th.db-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-grid td.db-clip > .db-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A menu that opens from a button at the right edge of a grid row grows leftwards, never past the grid. */
.db-viewmenu.db-menu-right { right: 0; left: auto; }
/* A grid inside a narrow panel (a half-width column): no 1080px floor, or the value columns are pushed out of view. */
.db-grid.db-grid-fit { min-width: 0; width: 100%; }
/* A value cell whose text may be a sentence: wraps instead of clipping, still right-aligned. */
.db-table td.db-n.db-wrapcell { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.db-grid.db-grid-narrow { min-width: 640px; }
.db-grid.db-grid-wide { min-width: 1180px; }
/* Editor grids hold real inputs: the 34px row is a floor, not a ceiling. */
.db-grid.db-grid-narrow tbody tr.db-row td,
.db-grid.db-grid-wide tbody tr.db-row td {
height: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.db-grid.db-grid-narrow .mud-input-control,
.db-grid.db-grid-wide .mud-input-control { margin: 0; }
/* Row actions that are part of the form, not a hover affordance. */
.db-grid tbody tr.db-row .db-rowacts.db-always { opacity: 1; }
/* the small chevron used as a reorder control */
.db-rot-up { transform: rotate(90deg); }
.db-rot-down { transform: rotate(-90deg); }
/* ---- source → target on one line ---------------------------------------- */
.db-flow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-flow .db-ellipsis { max-width: 46%; }
.db-flow .db-icon { color: var(--db-faint); flex: none; }
.db-grid td.db-arrow { text-align: center; color: var(--db-faint); padding: 0; }
/* ---- drop zone ----------------------------------------------------------- */
/* The input covers the whole box, so a drop anywhere in it lands on the file
input and a click anywhere opens the picker. */
.db-drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 132px;
padding: 16px;
text-align: center;
border: 1px dashed var(--db-line-strong);
border-radius: var(--db-radius-lg);
background: var(--db-surface-2);
cursor: pointer;
}
.db-drop:hover, .db-drop:focus-within { border-color: var(--db-accent); background: var(--db-accent-soft); }
.db-drop.db-has-file { border-style: solid; border-color: var(--db-ok-line); background: var(--db-ok-bg); }
.db-drop .db-icon { color: var(--db-muted); }
.db-drop .db-t { font-size: 13px; font-weight: 600; color: var(--db-ink); }
.db-drop .db-d { font-size: 12px; color: var(--db-muted); max-width: 68ch; }
.db-drop input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* ---- data preview grid --------------------------------------------------- */
/* Parsed and transformed rows have no fixed column set, so this grid sizes
itself to its content and scrolls inside its wrapper like every other. */
.db-grid.db-datagrid {
table-layout: auto;
min-width: 100%;
}
.db-grid.db-datagrid th { white-space: nowrap; }
.db-grid.db-datagrid td.db-cell {
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--db-font-mono);
font-size: 11.5px;
color: var(--db-ink-2);
}
.db-gridwrap.db-scrolly { max-height: 460px; overflow-y: auto; }
.db-gridwrap.db-scrolly thead th { position: sticky; top: 0; z-index: 1; }
.db-log.db-tall { max-height: 420px; }
/* ============================ 11 PULL + PUSH PAGES (PHASE 3, GROUP B) ==== */
/* Appended by the Pull/Push group: database connections, saved queries, the
query workspace and destinations. Self-contained — every selector below is
new, and nothing here overrides an existing rule except by adding a class
of its own. */
/* ---- a views bar that is not glued to a grid ---------------------------- */
/* The workspace uses the viewbar as its query picker, with a panel rather
than a grid underneath, so it needs its own bottom edge back. */
.db-viewbar.db-standalone {
border-bottom: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
}
/* The saved-query picker inside that bar: wide enough for "connection · name". */
.db-wsselect { min-width: 320px; max-width: 460px; flex: 1 1 320px; }
.db-wsselect .mud-input-control { margin: 0; }
/* ---- result grids -------------------------------------------------------- */
/* A result set has no fixed column list, so this grid sizes itself to its
content and scrolls inside its wrapper — the page never scrolls sideways. */
.db-grid.db-resultgrid {
table-layout: auto;
min-width: 100%;
}
.db-grid.db-resultgrid th { white-space: nowrap; }
.db-grid.db-resultgrid td.db-cell {
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--db-font-mono);
font-size: 11.5px;
color: var(--db-ink-2);
}
/* Row numbers stay narrow and quiet — they are an index, not data. */
.db-grid.db-resultgrid td.db-n { width: 52px; color: var(--db-faint); }
/* Two heights of scrolling result pane: one for a dialog or an inline
preview, one for the workspace, where the grid is the screen. */
.db-gridwrap.db-scrollmax { max-height: 420px; overflow-y: auto; }
.db-gridwrap.db-scrolltall { max-height: calc(100vh - 380px); min-height: 220px; overflow-y: auto; }
.db-gridwrap.db-scrollmax thead th,
.db-gridwrap.db-scrolltall thead th { position: sticky; top: 0; z-index: 1; }
/* ---- SQL ----------------------------------------------------------------- */
/* The statement, formatted server-side. Reads as a document, not a control:
no border of its own inside the panel, just the quiet surface. */
.db-sql {
margin: 0;
padding: 10px 12px;
background: var(--db-surface-2);
border: 1px solid var(--db-line-soft);
border-radius: var(--db-radius);
font-family: var(--db-font-mono);
font-size: 12.5px;
line-height: 1.65;
color: var(--db-ink-2);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
/* Keyword highlighting is the one place the accent appears in a body of text.
It carries meaning (this token is SQL syntax) and reads in both themes. */
.db-sqlkw { color: var(--db-accent); font-weight: 600; }
/* A SQL editing field: the same monospace as the rendered statement, so what
is typed and what is read look identical. */
.db-sqlfield .mud-input-slot,
.db-sqlfield textarea {
font-family: var(--db-font-mono);
font-size: 12.5px;
line-height: 1.6;
}
/* ================ 12 EXTRACT + CROSS-PRODUCT + MARKETPLACE (PHASE 3, GROUP C) ==== */
/* Appended by the Extract/Cross-product/Marketplace group: document templates,
extraction and its history, pipelines, batch operations and the addon detail
screen. Self-contained — every selector below is new, and nothing here
overrides an existing rule except by adding a class of its own. */
/* ---- a grid nested inside a panel body ---------------------------------- */
/* The panel already draws the border, the radius and the shadow, so the grid
wrapper inside it must not draw them a second time. */
.db-panel-body > .db-gridwrap.db-inpanel,
.db-panel > .db-panel-body.db-flush > .db-gridwrap.db-inpanel {
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ---- step timeline: a step that will be skipped -------------------------- */
/* The grid's row tints are scoped to table rows; the timeline needs its own. */
.db-steptl .db-tlrow.db-is-off { background: var(--db-warn-bg); }
.db-steptl .db-tlrow.db-is-off .db-t .db-nm { color: var(--db-warn); }
/* The timeline's own row actions: visible, because a step list is edited, not
scanned — there is no hover-reveal to discover here. */
.db-steptl .db-tlrow .db-right { display: flex; align-items: center; gap: 2px; }
/* A nested step is indented by depth; the guide keeps the nesting readable
when several levels stack up. */
.db-steptl .db-tlrow .db-t { position: relative; }
/* ---- row actions that are part of the form, not a hover affordance ------- */
/* Group A declares .db-always inside the grid; this is the same idea for the
handful of grids here whose single action must always be reachable. */
.db-grid tbody tr.db-row .db-rowacts.db-always { opacity: 1; }
/* ---- a pill used as the label of a button -------------------------------- */
/* On the batch and pipeline lists the status pill opens the failure message,
so it lives inside a quiet button. The button must add no geometry of its
own — the pill is the whole control. */
.db-btn.db-quiet .db-pill { cursor: inherit; }
.db-btn.db-quiet:has(.db-pill) { padding: 0; height: auto; background: transparent; border-color: transparent; }
.db-btn.db-quiet:has(.db-pill):hover .db-pill { border-color: var(--db-line-strong); }
/* ---- extraction confidence figures --------------------------------------- */
/* Confidence is a figure that carries state, so it is set in the mono face and
colored by the same three states as everything else. */
.db-grid td .db-ok-text,
.db-grid td .db-warn-text,
.db-grid td .db-crit-text { font-family: var(--db-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
/* ---- a checkbox row used as a panel-head control -------------------------- */
.db-panel-head .db-checkrow { font-size: 12px; color: var(--db-muted); align-items: center; }
.db-panel-head .db-checkrow input[type="checkbox"] { margin-top: 0; }
/* ---- group / child rows in the extraction history ------------------------ */
/* The parent row is a source PDF, its children are the forms that came out of
it. The chevron sits with the name; the indent does the rest. */
.db-grid tbody tr.db-row .db-jobname .db-nm .db-icon { color: var(--db-muted); vertical-align: -2px; margin-right: 4px; }
/* ================================ 13 DBA PAGES (PHASE 4, GROUP D) ======== */
/* The DBA modules (SQL Modules, Backup Manager, Health, Space, Index, Query,
Security) reuse the panels, grids, workbench and module strip as they are.
The only shape they add is the inline meter: a share of something — a drive,
a buffer pool, an index's fragmentation — drawn next to the figure itself so
the number stays readable and the bar only ranks it at a glance. */
.db-meter {
display: inline-block;
vertical-align: -1px;
width: 54px;
height: 6px;
margin-right: 7px;
border-radius: 2px;
background: var(--db-surface-3);
border: 1px solid var(--db-line-soft);
overflow: hidden;
}
.db-meter .db-meter-fill { display: block; height: 100%; background: var(--db-idle-line); }
.db-meter .db-meter-fill.db-ok { background: var(--db-ok); }
.db-meter .db-meter-fill.db-warn { background: var(--db-warn); }
.db-meter .db-meter-fill.db-crit { background: var(--db-crit); }
.db-meter .db-meter-fill.db-info { background: var(--db-accent); }
/* a meter inside a fact cell sits above its figure rather than beside it */
.db-inspfacts .db-fact .db-v .db-meter { width: 100%; margin: 2px 0 4px; display: block; }
/* ---- role and permission badges in a grid cell --------------------------- */
/* Server and database roles are a list, not a state, so they stay neutral —
only sysadmin and db_owner take a color, and they take it from the pill
palette through .db-crit / .db-warn on the badge itself. */
.db-grid td .db-badge-soft { margin: 0 3px 2px 0; font-family: var(--db-font-mono); text-transform: none; letter-spacing: 0; }
/* ---- a select used as a list filter in a panel bar ----------------------- */
/* The backup file list filters by database from the panel's own bar; the
control borrows the search box's geometry so the two never disagree. */
.db-searchbox > select {
border: 0;
background: transparent;
color: var(--db-ink);
font: inherit;
font-size: 12.5px;
min-width: 150px;
outline: none;
}
/* ---- a destructive plain button ------------------------------------------ */
/* The command bar and the icon button already have a danger state; the inline
button in the backup inspector needs the same one — red on hover only, so a
panel is never a wall of red. */
.db-btn.db-danger:hover {
background: var(--db-crit-bg);
border-color: var(--db-crit-line);
color: var(--db-crit);
}
/* ===================== 14 REPLICATE · FLOW · WELCOME · HELP (PHASE 4, GROUP E) ==== */
/* Data Sync and the Data Flow Map reuse the workbench, the panels and the grid
as they are. The shapes added here are the three the flow map needs (a pane
that scrolls inside itself, the canvas it draws on, its legend), the numbered
step head the walkthrough needs, and the two-column reference list Help uses
instead of a sidebar. Every rule below is new and carries its own class. */
/* ---- data flow map: rail · canvas · inspector ---------------------------- */
/* The map is a workbench: three columns that fill the content area, each its own
scroller, so the page never grows a second scrollbar and the three heads stay
in line. Color in this block is state and selection only; the graph itself is
drawn in SVG by the page and reads the same tokens. */
.db-fm {
display: grid;
grid-template-columns: 280px minmax(0, 1fr) 340px;
gap: 16px;
align-items: stretch;
}
/* Collapsing the rail is a command, not a breakpoint: the canvas takes the width. */
.db-fm.db-fm-narrow { grid-template-columns: minmax(0, 1fr) 340px; }
/* Hiding the details pane is the same idea on the right: the canvas takes that width too,
and with both hidden the canvas owns the whole row. */
.db-fm.db-fm-noinsp { grid-template-columns: 280px minmax(0, 1fr); }
.db-fm.db-fm-narrow.db-fm-noinsp { grid-template-columns: minmax(0, 1fr); }
.db-fm > .db-panel {
display: flex;
flex-direction: column;
height: calc(100vh - 300px);
min-height: 460px;
min-width: 0;
overflow: hidden;
}
.db-fm > .db-panel > .db-panel-body { overflow: auto; }
.db-fm .db-exlist { max-height: none; }
/* ---- left rail ----------------------------------------------------------- */
.db-fm-filters {
padding: 8px 12px 10px;
border-bottom: 1px solid var(--db-line-soft);
background: var(--db-surface-2);
}
.db-fm-filters .db-chips { gap: 4px; }
/* a kind heading inside the flows list */
.db-flowgrp {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 12px 5px;
background: var(--db-surface-2);
border-bottom: 1px solid var(--db-line-soft);
position: sticky;
top: 0;
z-index: 1;
}
/* ---- the canvas ---------------------------------------------------------- */
.db-fm-canvas {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
background: var(--db-surface);
border-top: 1px solid var(--db-line-soft);
outline: none;
user-select: none; /* a double-click opens a node; it must not select canvas text */
-webkit-user-select: none;
}
.db-fm-canvas:focus-visible { outline: 2px solid var(--db-accent); outline-offset: -2px; }
.db-fm-canvas svg { display: block; width: 100%; height: 100%; cursor: grab; }
.db-fm-canvas.db-fm-dragging svg { cursor: grabbing; }
.db-fm-canvas .db-fm-node { cursor: pointer; }
.db-fm-canvas .db-fm-node:hover > rect:first-of-type { stroke: var(--db-line-strong); }
.db-fm-canvas .db-fm-node text { pointer-events: none; user-select: none; }
/* Trace: the selected node's path stays lit, everything else recedes. Opacity,
not color, so a dimmed node still says what state it is in. */
.db-fm-canvas .db-dim { opacity: 0.22; }
.db-fm-canvas .db-fm-node.db-sel > rect:first-of-type { filter: none; }
.db-fm-canvas .db-fm-group text { user-select: none; }
/* ---- lanes --------------------------------------------------------------- */
/* The horizontal axis is the only fixed thing on this canvas: a kind always draws
in its own lane (FlowLayout.LaneOrder). The band and its title are what make
that readable — otherwise the operator has to read boxes to know where they
are. Both are behind the drawing and take no pointer events. */
.db-fm-lane { pointer-events: none; }
.db-fm-lane rect {
fill: var(--db-surface-2);
stroke: var(--db-line-soft);
stroke-width: 1;
opacity: 0.55;
}
/* The frozen lane header strip. Positioned by dataflowmap.js, one tag per lane. A title
is never cut with an ellipsis: dataflowmap.js measures it and sets data-mode to full
(one line), wrap (whole words on two lines) or short (the kind letter, with the full
name in the tooltip) according to how wide the lane is on screen. */
.db-fm-lanebar {
position: absolute;
inset: 0 0 auto 0;
height: 38px;
box-sizing: border-box;
background: var(--db-surface-2);
border-bottom: 1px solid var(--db-line-soft);
pointer-events: none;
z-index: 2;
}
.db-fm-lanetag {
position: absolute;
top: 0;
height: 38px;
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
padding: 3px 8px;
border-right: 1px solid var(--db-line-soft);
background: var(--db-surface-2);
color: var(--db-ink-2);
font-size: 11px;
font-weight: 600;
line-height: 14px;
white-space: normal;
pointer-events: auto;
user-select: none;
}
.db-fm-lanetag .db-mono { color: var(--db-muted); font-weight: 400; }
.db-fm-lanetag[data-mode="full"] { white-space: nowrap; }
.db-fm-lanetag .db-fm-lt-short { display: none; }
.db-fm-lanetag[data-mode="short"] { justify-content: center; padding: 3px 0; }
.db-fm-lanetag[data-mode="short"] .db-fm-lt-full { display: none; }
.db-fm-lanetag[data-mode="short"] .db-fm-lt-short { display: inline; }
/* The Flows view: one row per flow. The caption names the flow, a failing flow carries
a critical edge, and an object shared with other flows wears a "used by N" tab. */
.db-fm-band rect { fill: var(--db-surface); stroke: var(--db-line); stroke-width: 1; }
.db-fm-band.db-bad rect { stroke: var(--db-crit); }
.db-fm-canvas[data-lod="none"] .db-fm-band text { display: none; }
/* A reference stub: a shared object is drawn once, in the first row that uses it; every
other row that links to it holds one of these, dashed so it reads as a pointer. */
.db-fm-stub rect { fill: var(--db-surface-2); fill-opacity: 0.6; stroke: var(--db-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.db-fm-canvas .db-fm-stub:hover > rect:first-of-type { stroke: var(--db-accent); }
.db-fm-canvas[data-lod="none"] .db-fm-stub text { display: none; }.db-fm-used rect { fill: var(--db-accent-soft); stroke: var(--db-accent); stroke-width: 1; }
.db-fm-canvas[data-lod="none"] .db-fm-used text { display: none; }
/* ---- level of detail ----------------------------------------------------- */
/* dataflowmap.js stamps data-lod on the canvas as the zoom crosses its thresholds.
Everything below is a repaint, not a Blazor re-render: zooming out over a large
environment must not cost a round trip or a diff of ten thousand elements.
The state dot always survives — a zoomed-out map whose only job is "what is
red" is exactly the triage view, and text at 2px was never part of it. The lane
headers are unaffected because they are HTML outside the transform. */
.db-fm-canvas[data-lod="name"] .db-fm-t2 { display: none; }
.db-fm-canvas[data-lod="none"] .db-fm-t1,
.db-fm-canvas[data-lod="none"] .db-fm-t2 { display: none; }
.db-fm-canvas[data-lod="none"] .db-fm-group text { display: none; }
/* A right-to-left edge is a real thing (a sync profile writing back to its target
connection), so it is drawn as a bowed dashed return rather than hidden. */
.db-fm-canvas .db-fm-edge.db-back path { opacity: 0.75; }
/* The focus banner: focus removes most of the map, so the canvas has to say so
and offer the way back without a trip to the command bar. */
.db-fm-focustag {
position: absolute;
left: 10px;
top: 46px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 20px);
padding: 5px 8px;
border: 1px solid var(--db-accent);
border-radius: var(--db-radius);
background: var(--db-accent-soft);
color: var(--db-ink);
font-size: 11.5px;
}
.db-fm-focustag strong { font-weight: 600; }
/* The Flows-view note sits at the bottom, clear of the first row's caption. */
.db-fm-focustag.db-fm-viewtag { top: auto; bottom: 10px; left: 72px; }
.db-zoomtag {
position: absolute;
left: 10px;
bottom: 10px;
padding: 2px 7px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface-2);
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--db-muted);
}
/* On-canvas controls: zoom, fit and fullscreen, stacked at the far corner from the zoom
badge, so the map carries its own controls instead of only the command bar far above. */
.db-fm-controls {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface-2);
box-shadow: var(--db-shadow-2);
}
.db-fm-ctl {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: var(--db-radius);
background: transparent;
color: var(--db-ink);
cursor: pointer;
}
.db-fm-ctl:hover { background: var(--db-surface); border-color: var(--db-line); }
.db-fm-ctl:focus-visible { outline: 2px solid var(--db-accent); outline-offset: -2px; }
.db-fm-ctl:disabled { opacity: 0.4; cursor: default; }
/* An on-state for a toggle control (zoom lock): reads as pressed, in accent. */
.db-fm-ctl.db-on { background: var(--db-accent-soft); border-color: var(--db-accent); color: var(--db-accent); }
/* Fullscreen: the whole workbench fills the browser window. The grid is unchanged; only its
height and the panels' normal calc(100vh - 300px) height give way so the columns fill the
screen. The map pane grows with them and the view controller refits the lane headers. */
.db-fm:fullscreen {
height: 100vh;
box-sizing: border-box;
padding: 12px;
gap: 12px;
background: var(--db-bg, var(--db-surface));
grid-template-rows: minmax(0, 1fr);
}
.db-fm:fullscreen > .db-panel { height: auto; min-height: 0; }
.db-flowempty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.db-flowempty > * { max-width: 460px; }
/* ---- inspector ----------------------------------------------------------- */
.db-fm-title {
padding: 8px 12px;
border-bottom: 1px solid var(--db-line-soft);
background: var(--db-surface-2);
}
.db-fm-title .db-t { display: block; font-size: 13px; font-weight: 600; color: var(--db-ink); }
.db-fm-title .db-d { display: block; font-size: 11px; color: var(--db-muted); }
/* The commands are the point of the inspector, so they sit above the facts and
wrap rather than scroll out of reach. */
.db-fm-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.db-fm-unused .db-row,
.db-fm-next .db-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 4px 0;
border-bottom: 1px solid var(--db-line-soft);
font-size: 12px;
color: var(--db-ink-2);
}
.db-fm-next .db-row { border-bottom: 0; }
.db-fm-unused .db-row .db-right { margin-left: auto; }
/* ---- the legend ---------------------------------------------------------- */
.db-flowlegend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
}
.db-flowlegend .db-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--db-ink-2);
}
.db-flowlegend .db-legend-key {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
background: var(--db-surface-2);
font-size: 11px;
font-weight: 700;
color: var(--db-ink-2);
}
.db-flowlegend .db-st {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--db-idle-line);
}
.db-flowlegend .db-st.db-ok { background: var(--db-ok); }
.db-flowlegend .db-st.db-warn { background: var(--db-warn); }
.db-flowlegend .db-st.db-crit { background: var(--db-crit); }
/* ---- the numbered head of a walkthrough step ---------------------------- */
/* Get Started is a list of panels, not a wizard: the number is the only
ornament, and it fills in once that step has real data behind it. */
.db-stepno {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
border: 1px solid var(--db-line);
border-radius: 50%;
background: var(--db-surface-2);
font-family: var(--db-font-mono);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--db-muted);
}
.db-stepno.db-on {
border-color: var(--db-accent-line);
background: var(--db-accent-soft);
color: var(--db-accent);
}
/* ---- help: the reference index ------------------------------------------ */
/* Two columns — the section and its slug — so the whole manual reads as one
dense list instead of a sidebar that has to be scrolled to be understood. */
.db-doclist { display: flex; flex-direction: column; }
.db-doclist .db-docgroup {
padding: 8px 12px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
border-bottom: 1px solid var(--db-line-soft);
}
.db-doclist .db-docitem {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-bottom: 1px solid var(--db-line-soft);
border-left: 3px solid transparent;
font-size: 13px;
color: var(--db-ink-2);
text-decoration: none;
}
.db-doclist .db-docitem:hover { background: var(--db-surface); color: var(--db-ink); }
.db-doclist .db-docitem.db-on {
background: var(--db-surface);
border-left-color: var(--db-accent);
color: var(--db-ink);
font-weight: 600;
}
.db-doclist .db-docitem .db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-doclist .db-docitem .db-k { font-size: 11px; color: var(--db-faint); }
/* on-this-page, as one row of chips rather than a third column */
.db-doctoc {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0 10px;
border-bottom: 1px solid var(--db-line-soft);
margin-bottom: 12px;
}
.db-doctoc .db-toc-l3 { color: var(--db-muted); }
.db-docpager {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid var(--db-line-soft);
font-size: 12px;
}
/* ---- group E responsive -------------------------------------------------- */
@media (max-width: 1280px) {
/* The inspector drops under the canvas before the rail does: the rail is how the
operator finds a flow, the inspector is what they do once they have it. */
.db-fm, .db-fm.db-fm-narrow { grid-template-columns: 260px minmax(0, 1fr); }
.db-fm > .db-panel:last-child { grid-column: 1 / -1; height: auto; min-height: 0; }
}
@media (max-width: 900px) {
.db-fm, .db-fm.db-fm-narrow { grid-template-columns: minmax(0, 1fr); }
.db-fm > .db-panel { height: auto; min-height: 0; }
.db-fm .db-fm-canvas { height: 60vh; }
}
/* ============================ 15 ADMIN + ACCOUNT (PHASE 4, GROUP F) ====== */
/* The admin console, users, environments, the audit log and the three account
screens reuse the list, record and panel shapes as they are. Four things had
no rule yet: a grid name that opens a dialog instead of navigating, a whole
list living inside a tab panel, badges in a record page's plain table, and a
grid that carries a form control in a cell. */
/* ---- a name cell whose link is a button --------------------------------- */
/* Users, licenses, environments and test files have no page of their own: the
name opens a dialog. It is still the record's link, so it keeps the accent —
.db-jobname .db-nm would otherwise win on specificity and paint it as ink. */
.db-jobname .db-linkbtn { color: var(--db-accent); }
.db-jobname .db-linkbtn:hover { color: var(--db-accent-deep); }
/* ---- a list inside a tab panel ------------------------------------------- */
/* The admin console puts a full list (views bar + grid) inside a tab panel,
which already draws the border and the radius. Without this the two frames
sit one inside the other and the corners disagree. */
.db-tabpanel.db-flush > .db-viewbar,
.db-tabpanel.db-flush > .db-gridwrap {
border-left: 0;
border-right: 0;
border-radius: 0;
box-shadow: none;
}
.db-tabpanel.db-flush > .db-viewbar { border-top: 0; }
.db-tabpanel.db-flush > .db-gridwrap { border-bottom: 0; }
.db-tabpanel.db-flush > .db-gridwrap:last-child { border-bottom: 1px solid var(--db-line); border-radius: 0 0 var(--db-radius-lg) var(--db-radius-lg); }
/* Loose blocks in a flush tab panel take the padding the panel gave up. */
.db-tabpanel.db-flush > .db-cols-2 { padding: 14px 16px 16px; }
/* ---- badges in a record page's own table --------------------------------- */
/* Group D scoped the soft badge's grid treatment to .db-grid; the account and
audit screens show the same badges in a plain .db-table. */
.db-table td .db-badge-soft {
margin: 0 3px 2px 0;
text-transform: none;
letter-spacing: 0;
}
/* ---- a plain button standing in a grid cell ------------------------------ */
/* The catalog grid's Subscribe sits in the row rather than on hover, so the
action column needs the row's own height, not the icon strip's. */
.db-grid td > .db-rowacts.db-always { justify-content: flex-end; }
/* Grant dialog module picker: a compact wrap of checkrows. */
.db-checkgrid { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.db-checkgrid .db-checkrow { min-width: 120px; }
/* ============================================================ 16 RESPONSIVE
Mobile pass (GROUP M1). Everything above this line is untouched except where
a rule needed a media-query override — noted at each such spot.
Breakpoints
>=1280 full three-pane layout (nav 244 / content / optional rail)
1024-1279 rail becomes a toggled overlay; nav stays as-is
768-1023 nav collapses to a 56px icon rail with hover/focus fly-out
labels; the hamburger opens the full nav as an overlay drawer
<768 phone: reduced top bar, nav is an overlay drawer, workbenches
(.db-wb and the Data Flow Map's .db-fm, prefixed db-fm) stack
========================================================================== */
/* ---- BETA badge ----------------------------------------------------------- */
.db-tag {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
border: 1px solid var(--db-warn-line);
border-radius: var(--db-radius);
background: var(--db-warn-bg);
color: var(--db-warn);
font-family: var(--db-font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
cursor: default;
}
/* ---- hamburger + drawer scrim (built, hidden until a breakpoint needs them) */
.db-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid transparent;
border-radius: var(--db-radius);
background: transparent;
color: var(--db-ink);
flex: none;
}
.db-hamburger:hover { background: var(--db-surface); border-color: var(--db-line); }
/* ---- desktop nav collapse (icon rail) -------------------------------------
The hamburger is a desktop control too: it collapses the full nav to a 56px
icon rail so a wide canvas — the Data Flow Map above all — gets the room.
The treatment mirrors the <=1023px icon rail exactly (centered icons; labels
that fly out on hover/focus), but here it is opt-in via `.db-nav-mini` on the
shell and persisted per viewer, where the responsive rail is forced by width.
Scoped to >=1024px so it never collides with the mobile rules below. */
@media (min-width: 1024px) {
.db-hamburger { display: inline-flex; }
.db-shell.db-nav-mini { --db-nav-w: 56px; }
.db-shell.db-nav-mini .db-nav { overflow: visible; }
.db-shell.db-nav-mini .db-nav-item,
.db-shell.db-nav-mini .db-nav-solo,
.db-shell.db-nav-mini .db-nav-group-head {
justify-content: center;
padding-left: 0;
position: relative;
min-height: 40px;
}
/* Labels fly out on hover/focus instead of sitting beside the icon. */
.db-shell.db-nav-mini .db-nav-item span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-solo span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-group-head span:not(.db-icon) {
position: absolute;
left: calc(100% + 6px);
top: 50%;
transform: translateY(-50%);
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--db-ink);
white-space: nowrap;
box-shadow: var(--db-shadow-2);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
z-index: 30;
}
.db-shell.db-nav-mini .db-nav-item:hover span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-item:focus-within span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-solo:hover span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-solo:focus-within span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-group-head:hover span:not(.db-icon),
.db-shell.db-nav-mini .db-nav-group-head:focus-within span:not(.db-icon) {
opacity: 1;
}
/* Group headers carry only a chevron, which has nowhere to sit in a 56px rail. */
.db-shell.db-nav-mini .db-nav-group-head .db-chev { display: none; }
.db-shell.db-nav-mini .db-nav-rule { margin-left: 8px; margin-right: 8px; }
}
.db-scrim {
display: none;
position: fixed;
top: var(--db-topbar-h);
left: 0;
right: 0;
bottom: var(--db-status-h);
background: rgba(10, 14, 20, 0.45);
z-index: 39;
}
@media (max-width: 1279px) {
/* Guided rail: overlay panel toggled by its own existing toggle button,
instead of the ~1024px rule below that removes both from the page
entirely. Same treatment covers the <768 "hidden behind a button" case. */
.db-rail-toggle { display: inline-flex; }
.db-rail {
display: flex;
position: fixed;
top: var(--db-topbar-h);
right: 0;
bottom: var(--db-status-h);
width: min(88vw, var(--db-rail-w));
z-index: 45;
box-shadow: var(--db-shadow-2);
}
}
@media (max-width: 1023px) {
.db-hamburger { display: inline-flex; }
/* Icon rail: the shell's grid column shrinks with it. */
:root { --db-nav-w: 56px; }
.db-nav { overflow: visible; }
.db-nav-item, .db-nav-solo, .db-nav-group-head {
justify-content: center;
padding-left: 0;
position: relative;
min-height: 40px;
}
/* Labels fly out on hover/focus instead of sitting beside the icon. */
.db-nav:not(.db-nav-open) .db-nav-item span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-solo span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-group-head span:not(.db-icon) {
position: absolute;
left: calc(100% + 6px);
top: 50%;
transform: translateY(-50%);
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius);
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--db-ink);
white-space: nowrap;
box-shadow: var(--db-shadow-2);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
z-index: 30;
}
.db-nav:not(.db-nav-open) .db-nav-item:hover span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-item:focus-within span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-solo:hover span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-solo:focus-within span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-group-head:hover span:not(.db-icon),
.db-nav:not(.db-nav-open) .db-nav-group-head:focus-within span:not(.db-icon) {
opacity: 1;
}
/* Group headers have no leading icon of their own — only the chevron,
which has nowhere sensible to sit in a 56px rail. */
.db-nav:not(.db-nav-open) .db-nav-group-head .db-chev { display: none; }
/* The hamburger's full overlay drawer, on top of the icon rail. */
.db-nav.db-nav-open {
position: fixed;
top: var(--db-topbar-h);
left: 0;
bottom: var(--db-status-h);
width: min(84vw, 244px);
/* Above the guided rail overlay (45), which is open by default on a phone and otherwise covers the menu. */
z-index: 46;
box-shadow: var(--db-shadow-2);
overflow-y: auto;
}
.db-nav.db-nav-open .db-nav-item,
.db-nav.db-nav-open .db-nav-solo,
.db-nav.db-nav-open .db-nav-group-head { justify-content: flex-start; padding-left: 12px; }
.db-nav.db-nav-open .db-nav-item { padding-left: 30px; }
/* ONLY while the drawer is actually open. This used to be an unconditional
`.db-scrim { display: block; }`, which put a fixed, opaque-ish, pointer-events:auto
layer over the entire viewport on every screen under 1024px whether the drawer was
open or not — so every tap on a phone hit the scrim instead of the page, and the
scrim's own @onclick="CloseNav" closed an already-closed drawer and changed nothing.
There was no way out of it. The scrim is the next element after the nav in all three
layouts, so one sibling selector ties it to the real state. */
.db-nav.db-nav-open ~ .db-scrim { display: block; }
/* Row actions can't rely on hover on a touch device. */
.db-grid tbody tr.db-row .db-rowacts { opacity: 1; }
}
@media (max-width: 767px) {
.db-shell { overflow-x: hidden; } /* last-resort net; the real fixes are below */
/* ---- top bar: hamburger · mark · status dot · avatar ------------------ */
.db-topbar { gap: 8px; padding: 0 8px; }
.db-brand-name { display: none; }
.db-env-chip .db-chiptext,
.db-health-chip .db-chiptext,
.db-user-btn .db-chiptext,
.db-user-btn .db-userchev { display: none; }
.db-env-chip, .db-health-chip { padding: 2px 5px; }
.db-licence-chip { display: none; }
.db-user-btn { gap: 0; padding: 2px; }
/* ---- nav: fully off-canvas; the hamburger's drawer is the only way in - */
:root { --db-nav-w: 0px; }
.db-nav {
position: fixed;
top: var(--db-topbar-h);
left: 0;
bottom: var(--db-status-h);
width: min(86vw, 288px);
z-index: 40;
transform: translateX(-100%);
transition: transform 160ms ease;
overflow-y: auto;
box-shadow: var(--db-shadow-2);
}
.db-nav.db-nav-open { transform: translateX(0); }
.db-nav .db-nav-item, .db-nav .db-nav-solo, .db-nav .db-nav-group-head {
justify-content: flex-start;
padding-left: 12px;
min-height: 44px;
}
.db-nav .db-nav-item { padding-left: 30px; }
/* Full labels, not the icon-rail fly-out — the drawer has the room. */
.db-nav span:not(.db-icon) {
position: static;
opacity: 1;
pointer-events: auto;
box-shadow: none;
border: 0;
background: transparent;
padding: 0;
transform: none;
}
.db-nav .db-nav-group-head .db-chev { display: inline-flex; }
/* ---- command bar: scrollable, no group labels -------------------------- */
.db-cmdbar { height: 48px; }
.db-cmdgroup-label { display: none; }
.db-cmd { min-height: 44px; }
/* ---- open-record tabs already scroll horizontally; just size for touch */
.db-rectabs { min-height: 44px; }
.db-rectab .db-x { width: 30px; height: 30px; }
.db-screen-body { padding: 10px 10px 24px; }
/* ---- 2-column layouts and 12-col forms are already 1-column by 1160px - */
/* ---- record header facts: one per row ---------------------------------- */
.db-rh-facts { grid-template-columns: minmax(0, 1fr); }
.db-rh-facts .db-fact { border-right: 0; border-bottom: 1px solid var(--db-line-soft); }
.db-rh-facts .db-fact:last-child { border-bottom: 0; }
/* ---- workbenches: list over inspector, as a panel below (not a modal) - */
/* .db-wb (Job Monitor, Backup Manager, Sync Dashboard) has no responsive
rule below 1160px yet; the Data Flow Map's own .db-fm already collapses
to one column at <=900px via its section-9 rules, so it needs nothing
more here — restated for the same phone-width guarantee. */
.db-wb { grid-template-columns: minmax(0, 1fr); }
.db-fm, .db-fm.db-fm-narrow { grid-template-columns: minmax(0, 1fr); }
.db-fm > .db-panel { height: auto; min-height: 0; }
/* ---- guided rail: a full-width sheet, not a 264px sliver ---------------- */
/* From 1279px down the rail is already a fixed overlay pinned right at
min(88vw, --db-rail-w). On a 412px phone that resolves to 264px — 64% of the
screen — sitting on top of the page with the content still trying to lay out
underneath it. At phone width an opened panel should own the width and be
closed again with its own header button, which it already has. */
.db-rail { left: 0; width: auto; }
/* ---- attention rows: text first, actions under it ---------------------- */
/* `28px minmax(0, 1fr) auto` gives the auto actions column whatever it wants and
leaves the text the remainder — measured at 93px of a 390px row, which wraps
the message one word per line. Actions move to their own line under the text. */
.db-attn-row {
grid-template-columns: 28px minmax(0, 1fr);
align-items: start;
row-gap: 8px;
}
.db-attn-acts { grid-column: 2; flex-wrap: wrap; }
/* ---- touch targets ------------------------------------------------------ */
.db-nav-count { display: none; } /* the fly-out badge has no room on a 44px row */
.db-hamburger { width: 44px; height: 44px; }
.db-btn:not(.db-tiny) { min-height: 44px; }
.db-iconbtn { min-height: 40px; min-width: 40px; }
/* ---- status bar: environment / time / license only --------------------- */
/* StatusBar.razor is not part of this group's file set, so this is done
structurally rather than by a component change: the edition/env segment
is always first, the clock lives in #db-clock, and License is the only
segment after the spacer that still carries a .db-k label (a bare
.db-seg after the spacer, with no .db-k, is the Web edition's user-name
cell). Depends on :has() support (Chrome/Edge/Safari/Firefox current). */
.db-statusbar { gap: 8px; padding: 0 10px; overflow: hidden; }
.db-statusbar .db-seg,
.db-statusbar .db-vr { display: none; }
.db-statusbar .db-seg:first-of-type { display: flex; }
.db-statusbar .db-seg:has(#db-clock) { display: flex; }
.db-statusbar .db-spacer ~ .db-seg:has(.db-k) { display: flex; }
}
/* ==================== 17 LIST VIEWS: MODE SWITCH, CARDS, GROUPS (R2) ===== */
/* Every dense list page (File Templates, Connections, Destinations, Marketplace)
keeps its table as the default and adds a Cards view plus optional grouping by
a real field, through the shared ViewModeSwitch component. Both controls sit in
the page's existing .db-viewbar next to search — no second toolbar. Grouping
renders as a divider row inside the same table, or a heading above each
section's own card grid, so nothing about filtering, sorting or row actions
changes underneath it. */
.db-viewmode {
display: inline-flex;
align-items: stretch;
height: 28px;
border: 1px solid var(--db-line-strong);
border-radius: var(--db-radius);
overflow: hidden;
flex: none;
}
.db-viewmode-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
border: 0;
border-right: 1px solid var(--db-line-strong);
background: var(--db-surface-2);
color: var(--db-muted);
}
.db-viewmode-btn:last-child { border-right: 0; }
.db-viewmode-btn:hover { color: var(--db-ink); background: var(--db-surface-3); }
.db-viewmode-btn.db-on { background: var(--db-accent); color: var(--db-on-accent); }
/* Group divider row inside a table body — one row, spans every column. */
.db-grid tr.db-grouprow td {
height: 27px;
padding: 0 12px;
background: var(--db-surface-2);
border-bottom: 1px solid var(--db-line);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-grid tr.db-grouprow td .db-c {
margin-left: 6px;
font-family: var(--db-font-mono);
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--db-muted);
}
/* Card grid — the alternative to the table, inside the same content frame. */
.db-gridwrap.db-cardwrap { padding: 12px; overflow-x: hidden; }
.db-cardgroup + .db-cardgroup { margin-top: 18px; }
.db-cardgroup-head {
display: flex;
align-items: baseline;
gap: 6px;
padding: 0 2px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--db-faint);
}
.db-cardgroup-head .db-c {
font-family: var(--db-font-mono);
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--db-muted);
}
.db-cardgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
gap: 10px;
align-items: stretch;
}
.db-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px 11px;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: var(--db-radius-lg);
text-decoration: none;
min-width: 0;
color: inherit;
}
a.db-card:hover { background: var(--db-surface-2); border-color: var(--db-line-strong); text-decoration: none; }
.db-card:focus-within { border-color: var(--db-accent); }
.db-card.db-sel { background: var(--db-selection); border-color: var(--db-accent-line); }
.db-card-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.db-card-check { flex: none; margin-top: 2px; }
.db-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex: none;
border-radius: var(--db-radius);
background: var(--db-surface-2);
border: 1px solid var(--db-line-soft);
color: var(--db-muted);
}
.db-card-titles { min-width: 0; flex: 1 1 auto; }
.db-card-titles .db-nm {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--db-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-card-titles .db-sub {
display: block;
font-size: 11.5px;
color: var(--db-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-card-state { flex: none; margin-left: auto; display: flex; align-items: center; gap: 4px; padding-top: 1px; }
.db-card-meta { font-size: 11.5px; color: var(--db-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-card-desc {
font-size: 12px;
color: var(--db-ink-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.db-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.db-card-tags .db-tag {
display: inline-flex;
align-items: center;
height: 16px;
line-height: 14px;
padding: 0 5px;
border: 1px solid var(--db-line-soft);
border-radius: 2px;
background: var(--db-surface-2);
color: var(--db-muted);
font-family: var(--db-font-mono);
font-size: 10.5px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
}
a.db-card:hover .db-card-tags .db-tag { background: var(--db-surface); }
/* Tags and data series take the palette's six viz colors. Color is a second cue only: a tag
always carries its text, and a series always carries a label or legend entry. */
.db-viz-1 { --db-viz: var(--db-viz-1); }
.db-viz-2 { --db-viz: var(--db-viz-2); }
.db-viz-3 { --db-viz: var(--db-viz-3); }
.db-viz-4 { --db-viz: var(--db-viz-4); }
.db-viz-5 { --db-viz: var(--db-viz-5); }
.db-viz-6 { --db-viz: var(--db-viz-6); }
.db-card-tags .db-tag { border-left: 3px solid var(--db-viz, var(--db-line-soft)); }
.db-card-tags .db-tag:nth-child(6n+1) { --db-viz: var(--db-viz-1); }
.db-card-tags .db-tag:nth-child(6n+2) { --db-viz: var(--db-viz-2); }
.db-card-tags .db-tag:nth-child(6n+3) { --db-viz: var(--db-viz-3); }
.db-card-tags .db-tag:nth-child(6n+4) { --db-viz: var(--db-viz-4); }
.db-card-tags .db-tag:nth-child(6n+5) { --db-viz: var(--db-viz-5); }
.db-card-tags .db-tag:nth-child(6n) { --db-viz: var(--db-viz-6); }
.db-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 2px; }
.db-card-foot .db-spacer { flex: 1 1 auto; }
.db-card-acts { display: flex; gap: 2px; flex: none; }
@media (max-width: 480px) {
.db-cardgrid { grid-template-columns: minmax(0, 1fr); }
}
/* ============================= 18 INLINE NOTE (DESKTOP EDITION) ========== */
/* One shape the system did not have and every edition needed: a sentence in a
form or a panel that explains a constraint the customer cannot change —
"this destination type is a DataBridge Server feature", "passwords cannot be
stored until the device key is readable", "this edition has no scheduler
while the window is closed".
It is not an alert. Nothing has gone wrong, nothing needs dismissing, and it
is not transient — so it is a band, in the state colors, and it never grows
an icon button or a close control. MudAlert was doing this job on the Desktop
pages, at Material's size and radius, which is why those pages read as a
different product.
Self-contained: every selector below is new and overrides nothing. */
.db-note {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 9px 12px;
border: 1px solid var(--db-line);
border-left-width: 3px;
border-radius: var(--db-radius);
background: var(--db-surface-2);
color: var(--db-ink-2);
font-size: 12.5px;
line-height: 1.5;
}
.db-note > .db-icon { flex: none; margin-top: 1px; color: var(--db-muted); }
.db-note b { color: var(--db-ink); }
.db-note .db-mono { font-size: 11.5px; }
.db-note.db-info { background: var(--db-accent-soft); border-color: var(--db-accent-line); }
.db-note.db-info > .db-icon { color: var(--db-accent); }
.db-note.db-ok { background: var(--db-ok-bg); border-color: var(--db-ok-line); }
.db-note.db-ok > .db-icon { color: var(--db-ok); }
.db-note.db-warn { background: var(--db-warn-bg); border-color: var(--db-warn-line); }
.db-note.db-warn > .db-icon { color: var(--db-warn); }
.db-note.db-crit { background: var(--db-crit-bg); border-color: var(--db-crit-line); }
.db-note.db-crit > .db-icon { color: var(--db-crit); }
/* A note whose body is a list of findings — a job's validation errors, say. The
bullets are the system's own quiet marker, not the browser's default disc. */
.db-note .db-notelist { margin: 4px 0 0; padding-left: 16px; }
.db-note .db-notelist li { margin-top: 2px; }
.db-note .db-notelist li::marker { color: var(--db-faint); }
/* A note that is a whole panel body rather than one field of a form. */
.db-panel-body > .db-note:first-child:last-child { margin: 0; }
/* ---- what something includes -------------------------------------------- */
/* A plan's modules, a step's effects: a short list of facts inside a table cell
or a panel body, where a bulleted would be too loud and a comma-separated
sentence too dense to scan. The marker is the system's own tick, drawn in the
OK state because every line is something you get. */
.db-ticklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.db-ticklist li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
color: var(--db-ink-2);
}
.db-ticklist li::before {
content: "";
position: absolute;
left: 2px;
top: 6px;
width: 7px;
height: 4px;
border-left: 1.5px solid var(--db-ok);
border-bottom: 1.5px solid var(--db-ok);
transform: rotate(-45deg);
}
.db-ticklist.db-quiet li::before { border-color: var(--db-faint); }
/* ---- palette picker rows (PaletteMenuItems) ------------------------------- */
.db-pal-row { display: inline-flex; align-items: center; gap: 8px; }
.db-pal-swatch { display: inline-flex; border: 1px solid var(--db-line-strong); border-radius: 2px; overflow: hidden; }
.db-pal-swatch i { display: block; width: 8px; height: 14px; }
.db-pal-on { font-weight: 700; }
/* ---- Index Advisor: fragmentation heat map and maintenance ------------------ */
.db-heat-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 8px 0 12px; }
.db-heat-filters .db-field { grid-column: auto; flex: 1 1 140px; max-width: 260px; }
.db-heat-input {
width: 100%; height: 28px; padding: 0 8px; box-sizing: border-box;
border: 1px solid var(--db-line-strong); border-radius: 3px;
background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13px;
}
.db-heat-input:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 1px; }
.db-heat-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0; }
.db-heat-legend { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.db-heat-cap { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--db-muted); margin: 8px 0 4px; }
.db-heat-fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.db-heat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.db-chip:has(.db-heat-sr:focus-visible) { outline: 2px solid var(--db-accent); outline-offset: 1px; }
.db-heat { display: grid; gap: 8px; }
.db-heat-table { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 4px 12px; align-items: stretch; }
.db-heat-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.db-heat-cells { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.db-heat-cell {
flex: var(--w, 1) 1 0; min-width: 84px; box-sizing: border-box;
display: flex; flex-direction: column; gap: 1px; padding: 4px 8px;
border: 1px solid var(--db-ok-line); border-radius: 3px;
background: var(--db-ok-bg); color: var(--db-ok); font-size: 12px; line-height: 1.25;
}
.db-heat-cell.db-h-warn { background: var(--db-warn-bg); border-color: var(--db-warn-line); color: var(--db-warn); }
.db-heat-cell.db-h-crit { background: var(--db-crit-bg); border-color: var(--db-crit-line); color: var(--db-crit); }
.db-heat-idx { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-heat-pct { font-weight: 700; }
.db-heat-sz { color: inherit; opacity: 0.85; font-size: 11px; }
@media (max-width: 720px) {
.db-heat-table { grid-template-columns: minmax(0, 1fr); }
}
/* ---- trend charts (TrendChart.razor): inline SVG on the design system's viz colors ----------- */
.db-chart { margin: 8px 0 16px; min-width: 0; }
.db-chart-svg { display: block; width: 100%; height: auto; max-width: 760px; overflow: visible; }
.db-chart-grid { stroke: var(--db-line-soft); stroke-width: 1; }
.db-chart-tick { fill: var(--db-muted); font-size: 11px; font-family: inherit; }
.db-chart-threshold { stroke: var(--db-crit); stroke-width: 1; stroke-dasharray: 4 3; }
.db-chart-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.db-chart-dash { stroke-dasharray: 5 4; }
.db-chart-c1.db-chart-line { stroke: var(--db-viz-1); } .db-chart-c1.db-chart-dot, .db-chart-c1.db-chart-fill { fill: var(--db-viz-1); }
.db-chart-c2.db-chart-line { stroke: var(--db-viz-2); } .db-chart-c2.db-chart-dot, .db-chart-c2.db-chart-fill { fill: var(--db-viz-2); }
.db-chart-c3.db-chart-line { stroke: var(--db-viz-3); } .db-chart-c3.db-chart-dot, .db-chart-c3.db-chart-fill { fill: var(--db-viz-3); }
.db-chart-c4.db-chart-line { stroke: var(--db-viz-4); } .db-chart-c4.db-chart-dot, .db-chart-c4.db-chart-fill { fill: var(--db-viz-4); }
.db-chart-c5.db-chart-line { stroke: var(--db-viz-5); } .db-chart-c5.db-chart-dot, .db-chart-c5.db-chart-fill { fill: var(--db-viz-5); }
.db-chart-c6.db-chart-line { stroke: var(--db-viz-6); } .db-chart-c6.db-chart-dot, .db-chart-c6.db-chart-fill { fill: var(--db-viz-6); }
.db-chart-t-crit.db-chart-line { stroke: var(--db-crit); } .db-chart-t-crit.db-chart-dot, .db-chart-t-crit.db-chart-fill { fill: var(--db-crit); }
.db-chart-t-warn.db-chart-line { stroke: var(--db-warn); } .db-chart-t-warn.db-chart-dot, .db-chart-t-warn.db-chart-fill { fill: var(--db-warn); }
.db-chart-t-ok.db-chart-line { stroke: var(--db-ok); } .db-chart-t-ok.db-chart-dot, .db-chart-t-ok.db-chart-fill { fill: var(--db-ok); }
.db-chart-t-info.db-chart-line { stroke: var(--db-accent); } .db-chart-t-info.db-chart-dot, .db-chart-t-info.db-chart-fill { fill: var(--db-accent); }
.db-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 12px; color: var(--db-muted); }
.db-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.db-chart-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.db-chart-empty { padding: 12px 0; }
.db-trend-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 8px; }
.db-trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px 24px; }
.db-trend-h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--db-muted); margin: 12px 0 2px; }
.db-compl-strip { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.db-compl-cell { display: inline-block; width: 10px; height: 18px; border-radius: 2px; background: var(--db-line-soft); }
.db-compl-cell.db-ok { background: var(--db-ok); }
.db-compl-cell.db-crit { background: var(--db-crit); }
.db-compl-cell.db-info { background: var(--db-line-soft); border: 1px dashed var(--db-muted); box-sizing: border-box; }
/* ---- Roadmap and ideas (Chrome/RoadmapIdeas.razor) ------------------------------------------------------------------- */
.db-ideas { display: grid; gap: 14px; }
.db-ideas .db-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.db-ideas-lane { display: block; }
.db-ideas-lane-title { font-size: 15px; margin: 6px 0 8px; }
.db-ideas-lane-title .db-muted { font-weight: 400; font-size: 12.5px; margin-left: 8px; }
.db-ideas-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.db-ideas-card { padding: 12px; display: grid; gap: 6px; align-content: start; }
.db-ideas-card p { margin: 0; }
.db-ideas-card-top { display: flex; justify-content: space-between; gap: 8px; }
.db-ideas-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.db-ideas-search { display: flex; gap: 6px; flex: 1 1 240px; }
.db-ideas-search .db-ideas-input { flex: 1; }
.db-ideas-input { font: inherit; color: var(--db-ink); background: var(--db-surface); border: 1px solid var(--db-line-strong); border-radius: var(--db-radius); padding: 7px 10px; width: auto; max-width: 100%; }
textarea.db-ideas-input, .db-panel-body input.db-ideas-input { width: 100%; box-sizing: border-box; display: block; margin: 4px 0 10px; }
.db-ideas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.db-ideas-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--db-line); border-radius: var(--db-radius); background: var(--db-surface); }
.db-ideas-vote { display: grid; justify-items: center; min-width: 64px; gap: 0; }
.db-ideas-main { min-width: 0; display: grid; gap: 4px; }
.db-ideas-title { font-weight: 600; text-align: left; }
.db-ideas-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.db-ideas-detail { margin-top: 10px; }
.db-ideas-detail-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.db-ideas-h { margin: 0 0 6px; font-size: 18px; }
.db-ideas-sub { font-size: 14px; margin: 16px 0 6px; }
.db-ideas-comment { padding: 8px 0; border-top: 1px solid var(--db-line); }
.db-ideas-staff { background: var(--db-accent-soft); padding: 8px 10px; border-radius: var(--db-radius); border-top: 0; margin: 4px 0; }
.db-ideas-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.db-ideas-check { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
/* Roadmap timeline (RoadmapTimelineView.razor): a month grid with one bar per item, a today marker and a table for screen readers. */
.db-tl-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; align-items: center; }
.db-tl-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; border: 1px solid transparent; }
.db-tl-key-today { width: 2px; height: 12px; background: var(--db-crit); border: 0; }
.db-tl-s-progress { background: var(--db-accent); color: var(--db-on-accent); border-color: var(--db-accent-deep); }
.db-tl-s-planned { background: var(--db-accent-soft); color: var(--db-accent-deep); border-color: var(--db-accent-line); }
.db-tl-s-shipped { background: var(--db-ok-bg); color: var(--db-ok); border-color: var(--db-ok-line); }
.db-tl-scroll { overflow-x: auto; border: 1px solid var(--db-line); border-radius: var(--db-radius); background: var(--db-surface); }
.db-tl-body { position: relative; min-width: calc(11rem + var(--db-tl-months) * 4.75rem); }
.db-tl-grid { display: grid; grid-template-columns: 11rem repeat(var(--db-tl-months), minmax(0, 1fr)); align-items: center; position: relative; }
.db-tl-over { position: absolute; top: 0; bottom: 0; left: 11rem; right: 0; pointer-events: none; z-index: 1; }
.db-tl-gridlines { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, var(--db-line-soft) 0, var(--db-line-soft) 1px, transparent 1px, transparent calc(100% / var(--db-tl-months))); }
.db-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--db-crit); }
.db-tl-today > span { position: absolute; top: 3px; left: 4px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--db-crit); background: var(--db-surface); padding: 0 3px; border-radius: 2px; white-space: nowrap; }
.db-tl-today.db-tl-today-end > span { left: auto; right: 4px; }
/* The first grid row is empty so the "Today" label never sits on the quarter or month headings; the headings are opaque and above the today line, so the line never cuts through their text. */
.db-tl-todayrow { height: 22px; }
.db-tl-q, .db-tl-m { position: relative; z-index: 2; background: var(--db-surface); font-size: 11.5px; color: var(--db-muted); padding: 4px 6px; border-bottom: 1px solid var(--db-line-soft); }
.db-tl-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--db-muted); }
.db-tl-q { font-weight: 600; color: var(--db-ink); }
.db-tl-area { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px 4px; color: var(--db-muted); position: sticky; left: 0; }
.db-tl-label { display: grid; padding: 4px 8px; position: sticky; left: 0; background: var(--db-surface); z-index: 2; min-width: 0; font-size: 12.5px; line-height: 1.25; }
.db-tl-label a { color: var(--db-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.db-tl-label a:hover { text-decoration: underline; }
.db-tl-bar { display: block; margin: 6px 2px; padding: 3px 8px; border: 1px solid transparent; border-radius: var(--db-radius); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; z-index: 0; }
.db-tl-bar:hover { filter: brightness(.95); }
.db-tl-undated { margin-top: 12px; }
.db-tl-undated-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Roadmap item page and idea detail extras (RoadmapIdeas.razor). */
.db-ideas-viewbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.db-ideas-order { display: inline-flex; gap: 6px; margin-left: 8px; }
.db-ideas-merged { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.db-ideas-card a.db-ideas-title { color: var(--db-accent); text-decoration: none; }
.db-ideas-card a.db-ideas-title:hover, .db-ideas-row a.db-ideas-title:hover { text-decoration: underline; }
.db-ideas-row a.db-ideas-title { color: var(--db-accent); text-decoration: none; }
.db-rich p { margin: 0 0 8px; } .db-rich ul, .db-rich ol { margin: 0 0 8px; padding-left: 20px; }
a.db-btn { text-decoration: none; display: inline-flex; align-items: center; }
.db-tl-corner { border-bottom: 1px solid var(--db-line-soft); }
.db-tl { display: block; min-width: 0; }