/* HRS SQL Admin UI.
   Colours come from the DriveWorks site's own appearance stylesheet (/ui/appearance, loaded by shell.mjs), which defines
   --color-* tokens for :root.light and :root.dark. The site's Custom overlay and its per-company themes set the same
   tokens, so whatever the site looks like, these pages follow. The literals are fallbacks for the sandbox. */
:root {
  --am-bg: var(--color-body-background, #f3f5f8);
  --am-surface: var(--color-content-background, #ffffff);
  --am-surface-2: var(--color-content-background-stacked, #eef1f5);
  --am-line: var(--color-content-border, #d5dbe3);
  --am-text: var(--color-body-text, #1b2430);
  --am-muted: #5d6b7c;
  --am-accent: var(--color-button-primary-background, var(--color-link, #0f5f8c));
  --am-accent-hover: var(--color-button-primary-background-hover, var(--color-link-hover, #0b4a6e));
  --am-on-accent: var(--color-button-primary-text, #ffffff);
  --am-accent-soft: color-mix(in srgb, var(--am-accent) 14%, transparent);
  --am-nav-bg: var(--color-navigation-background, #ffffff);
  --am-nav-text: var(--color-navigation-text, #1b2430);
  --am-nav-item-hover: var(--color-navigation-item-background-hover, #eef1f5);
  --am-nav-item-current: var(--color-navigation-item-background-current, #e0eef6);
  --am-nav-item-text-current: var(--color-navigation-item-text-current, var(--am-accent));
  --am-input-bg: var(--color-input-background, var(--am-surface));
  --am-input-border: var(--color-input-border, var(--am-line));
  --am-good: #1f7a4d; --am-good-soft: #dff3e8;
  --am-warn: #9a6200; --am-warn-soft: #fff1d6;
  --am-bad: #b3261e;  --am-bad-soft: #fbe2e0;
  --am-info: #3a4fa3; --am-info-soft: #e4e8f8;
  --am-shadow: 0 8px 24px rgba(20,35,50,.12);
  --am-radius: 6px;
  --am-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;   /* Roboto when the machine has it; nothing is fetched from the internet for a customer page */
  --am-mono: "Roboto Mono", ui-monospace, Consolas, monospace;
}
html.dark {
  --am-bg: var(--color-body-background, #12171d); --am-surface: var(--color-content-background, #1b222b); --am-surface-2: var(--color-content-background-stacked, #232c37); --am-line: var(--color-content-border, #33404d); --am-text: var(--color-body-text, #e6ebf1); --am-muted: #98a6b7;
  --am-accent: var(--color-button-primary-background, var(--color-link, #5fb3e0)); --am-accent-hover: var(--color-button-primary-background-hover, var(--color-link-hover, #86c7ea)); --am-on-accent: var(--color-button-primary-text, #0c1620);
  --am-nav-bg: var(--color-navigation-background, #1b222b); --am-nav-text: var(--color-navigation-text, #e6ebf1);
  --am-good: #6fd39a; --am-good-soft: #17352a; --am-warn: #f1c069; --am-warn-soft: #3c2f12; --am-bad: #f28b84; --am-bad-soft: #40201e; --am-info: #a3b1f0; --am-info-soft: #232b4a;
  --am-shadow: 0 8px 24px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--am-bg); color: var(--am-text); font: 14px/1.5 var(--am-font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--am-accent); }
h1, h2, h3 { margin: 0; font-weight: 500; }
h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--am-muted); font-weight: 500; }
.hint { font-size: 12px; color: var(--am-muted); }
.mono { font-family: var(--am-mono); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
[hidden] { display: none !important; }

/* shell */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--am-nav-bg); color: var(--am-nav-text); border-right: 1px solid var(--am-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.side .eyebrow { color: var(--am-nav-text); opacity: .65; padding: 12px 10px 4px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 8px 14px; text-decoration: none; color: inherit; }
.brand .groupname { font-size: 12px; opacity: .75; }
.brand .logo { width: 30px; height: 30px; border-radius: 6px; background: var(--am-accent); color: var(--am-on-accent); display: grid; place-items: center; font-weight: 700; }
.brand .sitelogo { max-width: 170px; max-height: 44px; object-fit: contain; }
.side .nav { color: var(--am-nav-text); }
.side .nav:hover { background: var(--am-nav-item-hover); }
.side .nav.active { background: var(--am-nav-item-current); color: var(--am-nav-item-text-current); }
.side .nav.back { margin-bottom: 8px; border: 1px solid var(--am-nav-item-current); }
.side .user a { color: var(--am-nav-text); }
.nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--am-radius); border: 0; background: transparent; text-align: left; cursor: pointer; width: 100%; color: inherit; text-decoration: none; }
.side .user { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--am-line); font-size: 13px; }
.side .user .name { font-weight: 500; word-break: break-all; }
.side .user .teams { color: var(--am-muted); font-size: 12px; }
main { padding: 24px 32px 32px; width: 100%; min-width: 0; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.pagehead p { margin: 4px 0 0; color: var(--am-muted); max-width: 62ch; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* filter controls that sit among buttons (Logins page): same box as a toolbar input */
.actions input, .actions select { border: 1px solid var(--am-line); background: var(--am-surface); border-radius: var(--am-radius); padding: 6px 10px; color: var(--am-text); }

/* controls */
.btn { border: 1px solid var(--am-line); background: var(--am-surface); border-radius: var(--am-radius); padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.btn:hover { background: var(--am-surface-2); }
.btn:focus-visible, .nav:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--am-accent); outline-offset: 2px; }
.btn.primary { background: var(--am-accent); border-color: var(--am-accent); color: var(--am-on-accent); font-weight: 500; }
.btn.primary:hover { background: var(--am-accent-hover); border-color: var(--am-accent-hover); }
.btn.danger { color: var(--am-bad); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: 12px 14px; cursor: pointer; text-align: left; color: inherit; }
.tile:hover { border-color: var(--am-accent); }
.tile .n { font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile .l { color: var(--am-muted); font-size: 12px; margin-top: 2px; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input[type=search], .toolbar select { border: 1px solid var(--am-line); background: var(--am-surface); border-radius: var(--am-radius); padding: 7px 10px; min-width: 200px; }
.toolbar .spacer { flex: 1; }
.card { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-radius); }
.card + .card { margin-top: 16px; }
.card .hd { padding: 12px 16px; border-bottom: 1px solid var(--am-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card .bd { padding: 16px; }
/* tables: full width, scroll inside the space left on screen (max-height is set by fitTables in ui.mjs), header stays put */
.tablewrap { overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--am-muted); font-size: 12px; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--am-line); white-space: nowrap; position: sticky; top: 0; background: var(--am-surface); z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--am-text); }
th.sortable::after { content: "↕"; opacity: .35; margin-left: 6px; font-size: 11px; }
th.sort-asc::after { content: "↑"; opacity: 1; color: var(--am-accent); }
th.sort-desc::after { content: "↓"; opacity: 1; color: var(--am-accent); }
td { padding: 9px 12px; border-bottom: 1px solid var(--am-line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--am-surface-2); }
td .sub { color: var(--am-muted); font-size: 12px; }
td .rowact { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--am-good-soft); color: var(--am-good); }
.pill.warn { background: var(--am-warn-soft); color: var(--am-warn); }
.pill.bad { background: var(--am-bad-soft); color: var(--am-bad); }
.pill.info { background: var(--am-info-soft); color: var(--am-info); }
.pill.muted { background: var(--am-surface-2); color: var(--am-muted); }
.chip { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--am-surface-2); font-size: 12px; margin: 1px 2px 1px 0; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--am-muted); font-size: 12px; border-top: 1px solid var(--am-line); }
.pager .spacer { flex: 1; }
.empty { padding: 28px; text-align: center; color: var(--am-muted); }

/* forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form .full { grid-column: 1 / -1; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--am-muted); }
label.f > span.req::after { content: " *"; color: var(--am-bad); }
label.f input, label.f select, label.f textarea { border: 1px solid var(--am-input-border); background: var(--am-input-bg); border-radius: var(--am-radius); padding: 8px 10px; font-size: 14px; color: var(--color-input-text, var(--am-text)); }
/* read-only and disabled fields: plainly not editable (no text cursor, muted, dashed edge, lock in the label) */
label.f input[readonly], label.f select[disabled], label.f textarea[readonly], label.f textarea[disabled], label.f input[disabled], input[readonly], select[disabled] {
  background: var(--am-surface-2); color: var(--am-muted); border-style: dashed; cursor: default; user-select: text; box-shadow: none;
}
label.f input[readonly]:focus, label.f textarea[readonly]:focus { outline: none; border-color: var(--am-line); }
label.f:has(> input[readonly]) > span::after, label.f:has(> select[disabled]) > span::after, label.f:has(> input[disabled]) > span::after, label.f:has(> textarea[disabled]) > span::after { content: " (read-only)"; font-weight: 400; opacity: .7; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--am-accent); }
.banner { border-radius: var(--am-radius); padding: 12px 14px; margin-bottom: 16px; font-size: 13px; }
.banner.good { background: var(--am-good-soft); color: var(--am-good); }
.banner.bad { background: var(--am-bad-soft); color: var(--am-bad); }
.banner.warn { background: var(--am-warn-soft); color: var(--am-warn); }
.banner.info { background: var(--am-info-soft); color: var(--am-info); }

/* modal / toast */
.modal { position: fixed; inset: 0; background: rgba(10,16,24,.45); display: grid; place-items: center; z-index: 20; padding: 24px; }
.dialog { background: var(--am-surface); border-radius: 8px; box-shadow: var(--am-shadow); width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.dialog .hd { padding: 14px 20px; border-bottom: 1px solid var(--am-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog .bd { padding: 20px; }
.dialog .ft { padding: 12px 20px; border-top: 1px solid var(--am-line); display: flex; justify-content: flex-end; gap: 8px; }
/* the error dialog: selectable text, a Copy button, closed by the user */
.dialog.errdialog { max-width: 640px; }
.errlist { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.errtext { margin: 0; white-space: pre-wrap; word-break: break-word; user-select: text; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--am-bad-soft); color: var(--am-bad); padding: 10px 12px; border-radius: 6px; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--am-text); color: var(--am-bg); padding: 10px 14px; border-radius: 6px; box-shadow: var(--am-shadow); font-size: 13px; opacity: 0; transform: translateY(8px); transition: .2s; z-index: 60; pointer-events: none; max-width: 420px; }
.toast.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* anonymous pages */
.anon { min-height: 100vh; display: grid; place-items: start center; padding: 48px 16px; }
.anon .panel { width: min(540px, 100%); background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 8px; padding: 28px 32px; }
.anon .panel h1 { font-size: 20px; margin-bottom: 4px; }
.anon .panel > p { color: var(--am-muted); margin: 0 0 20px; }

/* field validation */
label.f input.invalid, label.f select.invalid, label.f textarea.invalid, input.invalid { border-color: var(--am-bad); box-shadow: 0 0 0 3px var(--am-bad-soft); }
.fielderr { color: var(--am-bad); font-size: 12px; }
.banner.formerr { grid-column: 1 / -1; margin-bottom: 4px; }

/* help page: documentation rendered from docs/*.md */
.doc .bd { max-width: 880px; }
.doc h1 { font-size: 20px; margin: 0 0 12px; }
.doc h2 { font-size: 16px; margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid var(--am-line); }
.doc h3 { font-size: 14px; margin: 20px 0 6px; }
.doc p, .doc li { max-width: 72ch; }
.doc table { margin: 8px 0 16px; }
.doc th { position: static; }
/* the Help page's layer figure: group > editable databases > tables, teams beneath */
.layers .layer { border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: 10px 12px; background: var(--am-surface); }
.layers .layer.group { background: var(--am-surface-2); }
.layers .layer-title { font-weight: 600; margin-bottom: 8px; }
.layers .layer-title small { font-weight: 400; color: var(--am-muted); margin-left: 6px; }
.layers .layer-row { display: flex; flex-wrap: wrap; gap: 10px; }
.layers .layer.db { flex: 1 1 260px; }
.layers .layer.table { padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.layers .teams { margin-top: 12px; }
.layers .layer.team { flex: 1 1 220px; font-size: 13px; border-style: dashed; }
.doc code { font-family: var(--am-mono); font-size: 12px; background: var(--am-surface-2); padding: 1px 5px; border-radius: 4px; }
.doc pre { background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: 10px 12px; overflow: auto; }
.doc pre code { background: none; padding: 0; }
.doc a { color: var(--am-accent); }

/* tab strip (settings, help, clean-up dialog) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--am-line); margin-bottom: 16px; flex-wrap: wrap; }
.tab { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--am-muted); }
.tab.active { color: var(--am-accent); border-bottom-color: var(--am-accent); font-weight: 500; }
/* permission matrices: the team takes the width, each right column is a narrow centred column with its header centred over its checkboxes */
.matrix { width: auto; }   /* only as wide as its columns: the checkboxes sit beside the team names, not spread to the far edge */
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 110px; min-width: 90px; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { width: auto; min-width: 200px; white-space: nowrap; padding-right: 24px; }
.matrix td.hint[colspan] { text-align: left; padding-left: 24px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.log { font-family: var(--am-mono); font-size: 12px; margin: 0; padding: 12px 16px; white-space: pre-wrap; background: var(--am-surface-2); border-radius: var(--am-radius); max-height: 320px; overflow: auto; }
.loading { opacity: .5; pointer-events: none; }

/* the expand/collapse control and its backdrop: base is hidden; the media query below shows them on narrow screens.
   These come BEFORE the media query so the media query's display:flex wins (media queries add no specificity). */
.navtoggle { display: none; align-items: center; gap: 10px; width: 100%; padding: 10px; margin-bottom: 4px; border: 0; border-radius: var(--am-radius); background: transparent; color: var(--am-nav-text); cursor: pointer; text-align: left; }
.navtoggle:hover { background: var(--am-nav-item-hover); }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 55; border: 0; }

@media (max-width: 768px) {
  .shell { grid-template-columns: 56px 1fr; }
  .navtoggle { display: flex; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .form, .grid2 { grid-template-columns: 1fr; }
  main { padding: 16px; }
  /* collapsed: an icon-only rail, the words hidden */
  body:not(.side-expanded) .side { padding: 10px 6px; }
  body:not(.side-expanded) .side .nav span,
  body:not(.side-expanded) .navtoggle span,
  body:not(.side-expanded) .side .brand .groupname,
  body:not(.side-expanded) .side .user,
  body:not(.side-expanded) .side .ver,
  body:not(.side-expanded) .side .setup-warn,
  body:not(.side-expanded) .side .eyebrow { display: none; }
  body:not(.side-expanded) .side .nav,
  body:not(.side-expanded) .navtoggle { justify-content: center; gap: 0; padding: 10px 0; }
  body:not(.side-expanded) .side .brand { align-items: center; padding: 4px 0 8px; }
  body:not(.side-expanded) .side .brand .sitelogo { max-width: 40px; max-height: 32px; }
  /* expanded: the full menu slides over the content with a backdrop */
  body.side-expanded .side { position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 60; overflow-y: auto; box-shadow: 2px 0 16px rgba(0, 0, 0, .25); }
  body.side-expanded .nav-backdrop { display: block; }
}

/* version badge at the top of the sidebar (administrators and security admins): green current, yellow behind, red a major behind */
.side .ver { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 8px 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; line-height: 1.4; }
.side .ver .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.side .ver.ok { background: var(--am-good-soft); color: var(--am-good); }
.side .ver.warn { background: var(--am-warn-soft); color: var(--am-warn); }
.side .ver.bad { background: var(--am-bad-soft); color: var(--am-bad); }
.side .ver.unknown { background: var(--am-nav-item-hover); color: var(--am-nav-text); }
.side .ver .latest { font-weight: 400; opacity: .85; }
.side .ver:hover { filter: brightness(.95); }
.side .setup-warn { display: block; margin: 0 8px 8px; padding: 5px 10px; border-radius: 8px; background: var(--am-bad-soft); color: var(--am-bad); font-size: 11px; font-weight: 600; text-decoration: none; line-height: 1.35; }
.side .setup-warn span { display: block; font-weight: 400; opacity: .9; }
.side .setup-warn:hover { filter: brightness(.95); }
/* licence caps reached: a notice, not a set-up error */
.side .setup-warn.cap-warn { background: var(--am-warn-soft); color: var(--am-warn); }
.health td.ok { color: var(--am-good); font-weight: 600; } .health td.bad { color: var(--am-bad); font-weight: 600; }

/* label/value list (About) */
table.kv { border-collapse: collapse; }
table.kv th { text-align: left; padding: 6px 18px 6px 0; color: var(--am-muted); font-weight: 500; white-space: nowrap; vertical-align: top; }
table.kv td { padding: 6px 0; vertical-align: top; }

/* ---------- SQL Admin pages ---------- */
body.embed .shell { grid-template-columns: 1fr; }
body.embed main { padding: 12px 16px; }
.pickers label.f { min-width: 220px; }
.pickers label.f > span::after, .filters label.f > span::after { content: none !important; }
.daterange { display: inline-flex; gap: 6px; align-items: center; }
.pickers select, .filters select { max-width: 320px; }
label.f.inline { flex-direction: row; align-items: center; gap: 6px; }
label.f.inline input { width: auto; }
.filters { gap: 10px; }
.filters input[type=search] { min-width: 220px; }
.datagrid table th { white-space: nowrap; cursor: pointer; user-select: none; }
.datagrid table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datagrid table td:last-child { overflow: visible; }
.fkpick { display: flex; gap: 4px; align-items: center; }
.fkpick select { flex: 1; min-width: 0; }
.fkpick .fkfilter { width: 110px; flex: 0 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tile.bad { border-color: var(--am-bad); }
.tile.bad .n { color: var(--am-bad); }
.ft .spacer { flex: 1; }
.matrix input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--am-accent); }

/* the Data page: an action bar down the left (pick a row, then act), as the DriveWorks product had */
.gridwrap { display: flex; gap: 10px; align-items: flex-start; }
.gridwrap .gridcard { flex: 1; min-width: 0; }
.actionbar { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; flex: 0 0 auto; }
.actionbar button { width: 60px; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; font: inherit; font-size: 10px; line-height: 1.1; text-align: center; color: inherit; border: 1px solid var(--am-line); background: var(--am-surface); border-radius: 8px; cursor: pointer; }
.actionbar button svg { width: 18px; height: 18px; }
.actionbar button:hover:not(:disabled) { border-color: var(--am-accent); color: var(--am-accent); }
.actionbar button.danger:hover:not(:disabled) { border-color: var(--am-bad); color: var(--am-bad); }
.actionbar button:disabled { opacity: .35; cursor: default; }
.actionbar button.primary { border-color: var(--am-accent); color: var(--am-accent); font-weight: 600; }
/* edit as table: the cells are inputs; a changed cell is amber, a refused one red, a new row tinted */
.editbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--am-line); font-size: 12.5px; color: var(--am-muted); }
.editbar b { color: var(--am-text, inherit); }
.datagrid.editing td { padding: 2px 4px; max-width: none; overflow: visible; }
.datagrid.editing td.ro { color: var(--am-muted); padding: 2px 10px; }
.datagrid.editing td .cellwrap { display: flex; gap: 4px; align-items: center; }
.datagrid.editing td input, .datagrid.editing td select { width: 100%; min-width: 90px; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--am-line); border-radius: 4px; background: var(--am-surface); color: inherit; }
.datagrid.editing td input:focus, .datagrid.editing td select:focus { outline: none; border-color: var(--am-accent); box-shadow: 0 0 0 2px var(--am-accent-soft); }
.datagrid.editing td.dirty { background: var(--am-warn-soft); }
.datagrid.editing td.dirty input, .datagrid.editing td.dirty select { border-color: var(--am-warn); }
.datagrid.editing td.cellerr input, .datagrid.editing td.cellerr select { border-color: var(--am-bad); box-shadow: 0 0 0 2px var(--am-bad-soft); }
.datagrid.editing tr.rowerr td:first-child { box-shadow: inset 3px 0 var(--am-bad); }
.datagrid.editing tr.newrow td { background: var(--am-accent-soft); }
.datagrid.editing tr.newrow td.dirty { background: var(--am-warn-soft); }
.locked { opacity: .55; }   /* the elements are also made inert while the grid is edited */
.datagrid tbody tr[data-key] { cursor: pointer; }
/* a parent's name in the grid: a link to its record; a red note beside it when that parent is archived */
a.fklink { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
a.fklink:hover { color: var(--am-accent); }
.archived-parent { color: var(--am-bad); font-size: 11px; font-weight: 600; white-space: nowrap; }
.datagrid tbody tr.selected td { background: var(--am-accent-soft); }
.filters #searchCol { max-width: 200px; }
/* the record editor: a wider dialog, three columns on a wide screen, roomier fields */
.dialog.wide { width: min(1120px, 100%); }
.form.editor { gap: 16px 24px; }
.form.editor label.f > span { font-size: 13px; }
.form.editor input, .form.editor select, .form.editor textarea { padding: 9px 11px; font-size: 14px; }
@media (min-width: 1000px) { .form.editor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tabs.sub { margin: 6px 0 12px; }
.panelhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; }
.panelhead p { margin: 0; color: var(--am-muted); font-size: 13px; max-width: 70ch; }
.viewwarn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
tr.conflict td { background: var(--am-bad-soft, rgba(220, 60, 60, .08)); }
.viewwarn .btn { margin-left: auto; }