/*
* Tech Dynamix UI kit 2.16.0
* One stylesheet for every internal web app: tokens, base, app shell
* (left sidebar), and components. Rules and usage: README.md.
*
* Load order in :
* td-theme.js (sync, before CSS: applies the saved theme before first paint)
* td-ui.css
* the app's own CSS (app specific rules only, never redefine tokens)
* td-shell.js (defer)
*/
/* ===== Fonts (bundled, never loaded from a third party) ===== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Variable.ttf") format("truetype"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Variable.ttf") format("truetype"); font-weight: 100 700; font-stretch: 85% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Italic-Variable.ttf") format("truetype"); font-weight: 100 700; font-stretch: 85% 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* Brand display faces with narrow, fixed uses. See README, Fonts. */
@font-face { font-family: "Audiowide"; src: url("../fonts/Audiowide-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
/* ===== Tokens ===== */
:root {
/* Brand */
--orange: #E87722;
--orange-hover: #F58C3E;
--orange-press: #CC6415;
--on-orange: #2A1B0C;
--peach: #FBEBDD;
--violet: #7566A0;
--teal: #1E7A8C;
--red: #E5484D;
--outerspace: #4A4947;
/* Chart series, in this fixed order (never cycled): teal, orange, violet. The brand hues stepped
to pass chart checks (lightness band, chroma, colorblind separation, 3:1 on the surface).
Each mode has its own validated steps. More than 3 series: fold the rest into "Other" (--chart-other). */
--chart-1: #02A2BC; --chart-2: #E6751E; --chart-3: #7661AB; --chart-other: #9AA2AD;
/* Surfaces and text (light) */
--page: #F6F7F8;
--panel: #FFFFFF;
--sunken: #F6F7F8;
--input: #FFFFFF;
--border: #D9DCE1;
--border-strong: #C3C8CF;
--text: #1E2024;
--text-2: #5E6670;
--sidebar: #FFFFFF;
--nav-hover: #F1F2F4;
--nav-active: #FBEBDD;
--shadow-sm: 0 1px 2px rgba(23, 25, 28, 0.06);
--shadow-md: 0 8px 24px rgba(23, 25, 28, 0.12);
/* Type */
--font-head: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
--font-body: "IBM Plex Sans", system-ui, sans-serif;
--font-num: "Inter", "IBM Plex Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--font-mark: "Audiowide", "Bricolage Grotesque", sans-serif; /* typed wordmark only */
/* Spacing (8px grid), radii, sizes */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
--r-btn: 6px; --r-card: 8px; --r-pill: 999px;
--sidebar-w: 264px;
--rail-w: 68px;
--pagehead-h: 64px;
--content-max: 1200px;
color-scheme: light;
}
/* Dark: follows the OS unless the user picked Light; [data-theme] is set by td-theme.js. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--page: #131519; --panel: #1E2024; --sunken: #17191C; --input: #2A2E34;
--border: #3A3F47; --border-strong: #4A505A;
--text: #F6F7F8; --text-2: #9AA2AD;
--violet: #A396CF; --teal: #5CC3D8; --peach: #3A2A1C;
--sidebar: #17191C; --nav-hover: #23262B; --nav-active: #3A2A1C;
--shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
--chart-1: #10A7BF; --chart-2: #E1721E; --chart-3: #9A86D5; --chart-other: #5E6670;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--page: #131519; --panel: #1E2024; --sunken: #17191C; --input: #2A2E34;
--border: #3A3F47; --border-strong: #4A505A;
--text: #F6F7F8; --text-2: #9AA2AD;
--violet: #A396CF; --teal: #5CC3D8; --peach: #3A2A1C;
--sidebar: #17191C; --nav-hover: #23262B; --nav-active: #3A2A1C;
--shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
--chart-1: #10A7BF; --chart-2: #E1721E; --chart-3: #9A86D5; --chart-other: #5E6670;
color-scheme: dark;
}
/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
background: var(--page);
color: var(--text);
font: 400 15px/1.5 var(--font-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 0.5em; color: var(--text); }
h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 19px; font-weight: 600; margin-top: 1.25em; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--violet); }
a:hover { text-decoration-thickness: 2px; }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* System IDs: job numbers, asset tags, certificate numbers (ITAD-2610001, ITAD-2610001-001).
IBM Plex Mono like .mono, kept on one line, with a large size for a single ID on a page. */
.code-id { font-family: var(--font-mono); font-weight: 500; font-size: 0.9em; white-space: nowrap; }
.code-id-lg { font-size: 22px; font-weight: 600; }
/* Typed wordmark, matching techdynamix.com. Only where a logo file cannot be used.
Markup: TechDynamix */
.wordmark { font-family: var(--font-mark); font-weight: 400; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: var(--outerspace); }
.wordmark .dx { color: var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark { color: #F6F7F8; } }
:root[data-theme="dark"] .wordmark { color: #F6F7F8; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* "Skip to content", added by td-shell.js as the first thing on the page; shows when focused. */
.skip-link {
position: absolute; left: var(--s2); top: -100px; z-index: 100;
padding: 10px 16px; border-radius: var(--r-btn);
background: var(--orange); color: var(--on-orange); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s2); }
main[tabindex="-1"]:focus { outline: none; }
/* Icons: solid Material Design Icons from td-icons.svg, filled with the text color. */
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; stroke: none; }
.icon-sm { width: 16px; height: 16px; }
/* Something running right now (loader-circle): turns once a second. Holds still for reduced motion. */
.icon-spin { animation: td-spin 1s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-spin { animation: none; } }
/* Brand marks (td-brands.svg): one color, solid, taking the text color like the icons.
Same sizes as icons. Only to name a product or integration, always next to its name. */
.brand-mark { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; stroke: none; vertical-align: -0.25em; }
.brand-mark-sm { width: 16px; height: 16px; vertical-align: -0.2em; }
/* US state outlines (td-states.svg): one solid shape in the text color, sized like the icons. */
.state-mark { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; stroke: none; vertical-align: -0.25em; }
.state-mark-sm { width: 16px; height: 16px; vertical-align: -0.2em; }
/* Inside a badge or status chip the mark matches the text: Gorelo */
.badge .brand-mark, .status .brand-mark { width: 1.15em; height: 1.15em; margin-right: 4px; vertical-align: -0.2em; }
/* Social links: a row of icon only links to Tech Dynamix profiles, each with an aria-label.
*/
.social-links { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.social-links a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-btn); color: var(--text-2); }
.social-links a:hover { background: var(--nav-hover); color: var(--text); }
/* Theme specific images: give both, CSS shows one. */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .only-light { display: none !important; }
:root:not([data-theme="light"]) .only-dark { display: revert !important; }
}
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: revert !important; }
/* ===== App shell: left sidebar + main ===== */
.shell { display: flex; min-height: 100vh; }
.sidebar {
position: sticky; top: 0;
width: var(--sidebar-w); height: 100vh; flex: 0 0 auto;
display: flex; flex-direction: column;
background: var(--sidebar);
border-right: 1px solid var(--border);
transition: width 160ms ease;
z-index: 30;
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
height: var(--pagehead-h); padding: 0 var(--s2);
border-bottom: 1px solid var(--border);
text-decoration: none; color: var(--text);
}
/* .brand-logo and .brand-icon are wrappers holding a light and a dark image (.only-light, .only-dark). */
.sidebar-brand .brand-logo { display: flex; flex: 0 0 auto; }
.sidebar-brand .brand-logo img { height: 20px; width: auto; display: block; }
.sidebar-brand .brand-icon { display: none; }
.sidebar-brand .brand-icon img { height: 32px; width: 32px; display: block; }
.sidebar-brand .brand-app {
font: 600 15px/1 var(--font-head); color: var(--text-2);
padding-left: 10px; border-left: 1px solid var(--border); white-space: nowrap;
min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.nav { flex: 1; overflow-y: auto; padding: var(--s2) 12px; }
.nav-group + .nav-group { margin-top: var(--s2); }
.nav-label {
font: 600 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-2); padding: 0 12px; margin: 0 0 6px;
}
.nav-item {
position: relative;
display: flex; align-items: center; gap: 12px;
height: 38px; padding: 0 12px; margin: 2px 0;
border-radius: var(--r-btn);
color: var(--text); text-decoration: none; font-weight: 500;
white-space: nowrap;
}
.nav-item .icon { color: var(--text-2); }
.nav-item:hover { background: var(--nav-hover); }
.nav-item[aria-current="page"] { background: var(--nav-active); font-weight: 600; }
.nav-item[aria-current="page"] .icon { color: var(--orange); }
.nav-item[aria-current="page"]::before {
content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--orange);
}
.nav-count {
margin-left: auto; font: 600 12px/1 var(--font-num);
padding: 3px 7px; border-radius: var(--r-pill);
background: var(--sunken); color: var(--text-2); border: 1px solid var(--border);
}
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
button.nav-item { width: 100%; border: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer; text-align: left; }
.collapse-btn .icon { color: var(--text-2); }
/* User menu: a details element, so it works before JS loads. */
.user-menu { position: relative; }
.user-menu > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: 10px;
padding: 8px; border-radius: var(--r-btn);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--nav-hover); }
.avatar {
width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
display: inline-grid; place-items: center;
background: var(--orange); color: var(--on-orange);
font: 700 13px/1 var(--font-body);
}
/* A profile photo in place of initials: 
. .avatar-sm for lists. */
img.avatar { object-fit: cover; background: var(--sunken); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; vertical-align: middle; margin-right: var(--s1); }
.user-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 12px; color: var(--text-2); text-transform: capitalize; }
.user-menu .chev { margin-left: auto; color: var(--text-2); }
.menu {
position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
min-width: 220px;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
box-shadow: var(--shadow-md); padding: 6px; z-index: 40;
}
.menu-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: 0; border-radius: var(--r-btn);
background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: var(--nav-hover); }
.menu-item .icon { color: var(--text-2); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.menu-label { font-size: 12px; color: var(--text-2); padding: 4px 10px; }
/* Theme picker: three segmented buttons. */
.theme-switch { display: flex; gap: 4px; padding: 2px 4px 4px; }
.theme-switch button {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 6px 4px; border: 1px solid var(--border); border-radius: var(--r-btn);
background: none; color: var(--text-2); font: 500 12px/1 var(--font-body); cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { border-color: var(--orange); color: var(--text); background: var(--nav-active); }
/* Main column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pagehead {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: var(--s2);
min-height: var(--pagehead-h); padding: 10px var(--s4);
background: color-mix(in srgb, var(--page) 88%, transparent);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.pagehead h1 { font-size: 20px; margin: 0; }
.pagehead .crumbs { font-size: 13px; color: var(--text-2); }
.pagehead .crumbs a { color: var(--text-2); text-decoration: none; }
.pagehead .crumbs a:hover { color: var(--text); text-decoration: underline; }
.pagehead-title { min-width: 0; }
.pagehead-actions { margin-left: auto; display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; }
.pagehead .menu-toggle { display: none; }
.content { width: 100%; max-width: var(--content-max); padding: var(--s4); }
.content > * + * { margin-top: var(--s3); }
/* Boards and other wide views use the whole width instead of stopping at 1200px. */
.content.content-wide { max-width: none; }
/* Collapsed rail (desktop only): icons only, labels as tooltips via title.
Scoped to wide screens so the phone drawer always shows full labels. */
@media (min-width: 901px) {
html.sidebar-collapsed .sidebar { width: var(--rail-w); }
html.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
html.sidebar-collapsed .sidebar-brand .brand-logo,
html.sidebar-collapsed .sidebar-brand .brand-app,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .nav-item span,
html.sidebar-collapsed .user-meta,
html.sidebar-collapsed .user-menu .chev { display: none; }
html.sidebar-collapsed .sidebar-brand .brand-icon { display: flex; }
html.sidebar-collapsed .nav { padding: var(--s2) 10px; }
html.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
html.sidebar-collapsed .nav-item[aria-current="page"]::before { left: -10px; }
html.sidebar-collapsed .user-menu > summary { justify-content: center; padding: 6px 0; }
html.sidebar-collapsed .menu { left: 0; right: auto; }
html.sidebar-collapsed .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: var(--s1); }
}
/* Phones and small tablets: sidebar becomes a slide out drawer. */
.scrim { display: none; }
@media (max-width: 900px) {
.sidebar {
position: fixed; left: 0; top: 0; bottom: 0;
width: min(300px, 86vw);
transform: translateX(-100%);
transition: transform 180ms ease;
box-shadow: var(--shadow-md);
}
html.nav-open .sidebar { transform: none; }
html.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 25; }
html.nav-open { overflow: hidden; }
.collapse-btn { display: none !important; }
.pagehead .menu-toggle { display: inline-grid; }
.pagehead { padding: 10px var(--s2); }
.content { padding: var(--s2); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
/* ===== Components ===== */
/* Buttons. One primary (orange) action per view. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
font: 600 14px/1 var(--font-body);
padding: 10px 18px; border-radius: var(--r-btn); border: 1px solid transparent;
cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* The icon overhangs the 1em line box evenly, so a button with an icon is as tall as one without. */
.btn .icon { width: 18px; height: 18px; margin-block: calc((1em - 18px) / 2); }
.btn-primary { background: var(--orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:active { background: var(--orange-press); }
.btn-secondary { background: transparent; color: var(--violet); border-color: var(--violet); }
.btn-secondary:hover { background: var(--nav-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--nav-hover); }
.btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--violet); text-decoration: underline; cursor: pointer; }
.icon-btn {
display: inline-grid; place-items: center; width: 36px; height: 36px;
border: 0; border-radius: var(--r-btn); background: none; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--nav-hover); color: var(--text); }
/* Cards */
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
padding: var(--s3); box-shadow: var(--shadow-sm);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-narrow { max-width: 480px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.card-head h2, .card-head h3 { margin: 0; }
.card-head h3 { display: inline-flex; align-items: center; gap: var(--s1); }
/* Footer row pinned to the bottom of a card. Cards in a .grid row stretch to the tallest one,
so footers (Settings, Open) line up across the row without a fixed height. */
.card:has(> .card-foot) { display: flex; flex-direction: column; }
/* Same 8px between buttons as .form-actions, so two small buttons fit side by side in a quarter width card. */
.card-foot { margin-top: auto; padding-top: var(--s2); display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Stat tile */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 13px; color: var(--text-2); }
.stat-value { font: 600 28px/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
/* A stat tile that links to the list behind it: */
a.card.stat { text-decoration: none; color: inherit; }
a.card.stat:hover { border-color: var(--orange); }
/* Forms */
.form { display: flex; flex-direction: column; gap: var(--s2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 500; font-size: 14px; }
.field small { color: var(--text-2); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 200px; }
/* Every text-like input, including date and time pickers, so all fields match. */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"],
[type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea {
font: inherit; color: var(--text);
background: var(--input); border: 1px solid var(--border-strong); border-radius: var(--r-btn);
padding: 9px 11px; width: 100%;
}
/* Date and time pickers: no extra inner padding, so they are the same height as text fields. */
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
/* Selects ignore line-height; match the text field height (1.5 lines + padding + border). */
select { min-height: calc(1.5em + 20px); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
input[readonly], textarea[readonly] { background: var(--sunken); color: var(--text-2); }
input:disabled, select:disabled, textarea:disabled { background: var(--sunken); color: var(--text-2); opacity: 0.7; cursor: not-allowed; }
/* Field level validation: set aria-invalid on the input, and put the message in .field-error (linked with aria-describedby). */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
.field-error, .field small.field-error { display: inline-flex; gap: 6px; align-items: center; color: var(--red); font-size: 13px; font-weight: 500; }
fieldset { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s2); margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
legend { font-family: var(--font-head); font-weight: 600; padding: 0 6px; }
.choice { display: flex; gap: 10px; align-items: flex-start; }
.choice input { margin-top: 4px; accent-color: var(--orange); }
.form-actions { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.form-actions + .form-actions { margin-top: 12px; }
/* A button placed directly in a form keeps its natural width (the form is a column). */
.form > .btn, .form > button { align-self: flex-start; }
.row.align-end { align-items: flex-end; }
/* A button beside fields takes the field height (15px text at 1.5 plus 20px padding and border), so tops and bottoms line up. */
.row > .btn:not(.btn-sm), .search-row > .btn:not(.btn-sm) { min-height: calc(15px * 1.5 + 20px); }
.inline { display: inline; margin: 0; }
/* Tables */
/* position: relative keeps absolutely placed children (a .visually-hidden "Actions" header) inside the scroll area,
so a wide table scrolls in its card instead of widening the page on phones. */
.table-wrap { overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.table tbody tr:hover { background: var(--nav-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
/* List page helpers: search and filter row above a table, row actions, and paging below it. */
.search-row { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: flex-end; }
.search-row .field { flex: 1 1 260px; }
.list-actions { display: flex; gap: var(--s1); justify-content: flex-end; white-space: nowrap; }
.pager { display: flex; gap: var(--s1); align-items: center; justify-content: flex-end; margin-top: var(--s2); }
/* Record details: label and value pairs in a . Stacks on phones. */
.details { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: 0; }
.details dt { color: var(--text-2); font-size: 14px; }
/* Long values with no spaces (hashes, tokens, URLs) break instead of widening the page. */
.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .details { grid-template-columns: 1fr; gap: 2px; } .details dd { margin-bottom: var(--s1); } }
/* Change table (audit log, edit history): field, old value struck through, new value. */
.diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.diff th, .diff td { text-align: left; padding: 4px var(--s1); border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.diff th { color: var(--text-2); font-weight: 500; width: 22%; }
.diff .was { color: var(--text-2); text-decoration: line-through; }
.diff .now { font-weight: 600; }
/* Photo grid (evidence photos, attachments) with a caption row under each. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: var(--s2); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-btn); border: 1px solid var(--border); display: block; background: var(--sunken); }
.photo-grid figcaption { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* Alerts. Color never carries meaning alone: every alert has a text label. */
.alert {
display: flex; gap: 10px; align-items: flex-start;
border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-btn);
padding: 10px 12px; margin: 12px 0; background: var(--panel);
}
.alert .icon { margin-top: 1px; }
.alert-label { font-weight: 700; margin-right: 4px; }
.alert-info { border-left-color: var(--violet); } .alert-info .icon { color: var(--violet); }
.alert-ok { border-left-color: var(--teal); } .alert-ok .icon { color: var(--teal); }
.alert-warn { border-left-color: var(--orange); } .alert-warn .icon { color: var(--orange); }
.alert-error { border-left-color: var(--red); } .alert-error .icon, .alert-error .alert-label { color: var(--red); }
/* Status chips. Always a text label; teal for good states, orange for attention, red for failure, neutral otherwise. */
.status {
display: inline-flex; align-items: center; gap: 6px;
font: 600 12px/1 var(--font-body); padding: 4px 9px; border-radius: var(--r-pill);
border: 1px solid var(--border); color: var(--text-2); white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* A chip with an icon shows the icon in place of the dot. */
.status:has(> .icon)::before { display: none; }
/* The icon overhangs the line evenly, so a chip with an icon is as tall as one without, and as a .badge. */
.status > .icon { margin-block: calc((1em - 16px) / 2); }
.status-warn > .icon { color: var(--orange); }
.status-ok { border-color: var(--teal); color: var(--teal); }
.status-warn { border-color: var(--orange); color: var(--text); }
.status-warn::before { background: var(--orange); }
.status-error { border-color: var(--red); color: var(--red); }
.status-info { border-color: var(--violet); color: var(--violet); }
.badge {
display: inline-block; font: 600 12px/1 var(--font-body);
padding: 4px 8px; border-radius: var(--r-pill);
background: var(--sunken); border: 1px solid var(--border); color: var(--text-2);
}
/* A one-time secret shown to the user (temporary password, token). */
.secret {
font: 500 20px/1.4 var(--font-mono); padding: 14px;
background: var(--sunken); border: 1px dashed var(--border-strong); border-radius: var(--r-btn);
word-break: break-all; user-select: all;
}
.log-box {
font-family: var(--font-mono); font-size: 13px;
background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-btn);
padding: 12px; overflow-x: auto; white-space: pre-wrap; margin: 12px 0;
}
.empty { text-align: center; padding: var(--s5) var(--s2); color: var(--text-2); }
.empty .icon { width: 32px; height: 32px; margin-bottom: var(--s1); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-2); margin: var(--s2) 0; font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* ===== Charts =====
Plain inline SVG, no library: examples/analytics.html shows each kind. Rules: README, Charts.
..
Show as a table
.. Response within SLA94%
94% */
meter.meter { display: block; width: 100%; height: 10px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--meter) 18%, var(--sunken)); -webkit-appearance: none; appearance: none; }
meter.meter::-webkit-meter-bar { background: color-mix(in srgb, var(--meter) 18%, var(--sunken)); border: 0; border-radius: var(--r-pill); height: 10px; }
meter.meter::-webkit-meter-optimum-value, meter.meter::-webkit-meter-suboptimum-value, meter.meter::-webkit-meter-even-less-good-value { background: var(--meter); border-radius: var(--r-pill); }
meter.meter::-moz-meter-bar { background: var(--meter); border-radius: var(--r-pill); }
.meter, .meter-ok { --meter: var(--teal); } .meter-warn { --meter: var(--orange); } .meter-error { --meter: var(--red); }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); margin-bottom: 6px; font-size: 14px; }
.meter-row + meter + .meter-row { margin-top: var(--s2); }
/* Stat tile extras: the change against a named period, and a 12 point sparkline in the quiet color. Up or down is not good or bad by itself: .good and .bad say which. */
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1.2 var(--font-num); color: var(--text); }
.stat-delta .icon { width: 16px; height: 16px; color: var(--text-2); }
.stat-delta.good .icon { color: var(--teal); }
.stat-delta.bad .icon { color: var(--red); }
.stat-delta span { font: 400 13px/1.2 var(--font-body); color: var(--text-2); }
.sparkline { display: block; width: 100%; height: 32px; margin-top: 4px; overflow: visible; }
.sparkline .line { fill: none; stroke: var(--chart-other); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Jump list: links to the sections of a long page (settings, a long record). Not tabs: every section stays on the page. */
.jump-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); }
.jump-list a { font-weight: 500; text-decoration: none; }
.jump-list a:hover { text-decoration: underline; }
.content > [id] { scroll-margin-top: calc(var(--pagehead-h) + var(--s2)); }
/* Bulk actions: a bar above a list while rows are selected, with the count and what can be done to them. */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 12px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--orange); border-radius: var(--r-card); background: var(--nav-active); }
.bulk-bar strong { margin-right: auto; font-size: 14px; }
.table .check { width: 1%; padding-right: 0; }
.table input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.table tr:has(input[type="checkbox"]:checked) td { background: var(--nav-active); }
/* ===== Copy and secrets ===== */
/* Copy button: any button with data-copy="text", or data-copy-from="id" to copy an element's value. td-shell.js copies,
swaps the icon to a check for 2 seconds, and says so in a toast. */
.copy-btn.is-copied { color: var(--teal); }
/* Beside an ID in a table row or a line of text: smaller than a normal square icon button. */
.icon-btn.copy-btn { width: 28px; height: 28px; vertical-align: middle; }
.icon-btn.copy-btn .icon { width: 16px; height: 16px; }
/* A secret shown in part: the first and last 4 characters around dots, as the server renders it. API keys and tokens
stay like this for good (the server keeps only their ends). Passwords the app may show get data-secret and a
Show button (data-reveal), and hide again by themselves after 30 seconds. */
.masked { font: 500 0.9em/1.4 var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; }
.masked .dots { color: var(--text-2); letter-spacing: 0.1em; }
.secret-field {
display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
padding: 2px 2px 2px 10px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--sunken);
}
.secret-field .masked { overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.secret-field .icon-btn { width: 30px; height: 30px; }
/* ===== Filter and sort tables =====
and