/* Palette extraite de images.png : bleu MISTRAS #0E4194 et orange #CB5417. */
html[data-theme="light"],
html[data-theme="auto"],
:root {
  --primary: #0e4194;
  --secondary: #003790;
  --accent: #cb5417;
  --primary-fg: #fff;
  --body-fg: #202a3a;
  --body-bg: #f4f6fa;
  --body-quiet-color: #596579;
  --body-medium-color: #354258;
  --body-loud-color: #101a2b;
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: #0e4194;
  --header-link-color: #fff;
  --breadcrumbs-fg: #596579;
  --breadcrumbs-link-fg: #0e4194;
  --breadcrumbs-bg: #fff;
  --link-fg: #0e4194;
  --link-hover-color: #a94312;
  --link-selected-fg: #003790;
  --hairline-color: #dce2eb;
  --border-color: #c8d1df;
  --darkened-bg: #e9eef6;
  --selected-bg: #dce8fa;
  --selected-row: #fbe9df;
  --button-fg: #fff;
  --button-bg: #0e4194;
  --button-hover-bg: #003790;
  --default-button-bg: #0e4194;
  --default-button-hover-bg: #003790;
  --close-button-bg: #596579;
  --close-button-hover-bg: #354258;
  --object-tools-bg: #0e4194;
  --object-tools-hover-bg: #003790;
}

html[data-theme="dark"] {
  --primary: #174b98;
  --secondary: #0e4194;
  --accent: #e37a3f;
  --primary-fg: #fff;
  --body-fg: #e8edf6;
  --body-bg: #111827;
  --body-quiet-color: #b6c1d2;
  --body-medium-color: #d1d9e6;
  --body-loud-color: #fff;
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: #0e4194;
  --header-link-color: #fff;
  --breadcrumbs-fg: #b6c1d2;
  --breadcrumbs-link-fg: #8db5ff;
  --breadcrumbs-bg: #161f2e;
  --link-fg: #8db5ff;
  --link-hover-color: #f09a68;
  --link-selected-fg: #b3ceff;
  --hairline-color: #303b4d;
  --border-color: #3b475b;
  --darkened-bg: #192437;
  --selected-bg: #223553;
  --selected-row: #462e23;
  --button-fg: #fff;
  --button-bg: #174b98;
  --button-hover-bg: #0e4194;
  --default-button-bg: #174b98;
  --default-button-hover-bg: #0e4194;
  --close-button-bg: #46536a;
  --close-button-hover-bg: #596982;
  --object-tools-bg: #2b5cad;
  --object-tools-hover-bg: #0e4194;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --primary: #174b98;
    --secondary: #0e4194;
    --accent: #e37a3f;
    --primary-fg: #fff;
    --body-fg: #e8edf6;
    --body-bg: #111827;
    --body-quiet-color: #b6c1d2;
    --body-medium-color: #d1d9e6;
    --body-loud-color: #fff;
    --header-color: #fff;
    --header-branding-color: #fff;
    --header-bg: #0e4194;
    --header-link-color: #fff;
    --breadcrumbs-fg: #b6c1d2;
    --breadcrumbs-link-fg: #8db5ff;
    --breadcrumbs-bg: #161f2e;
    --link-fg: #8db5ff;
    --link-hover-color: #f09a68;
    --link-selected-fg: #b3ceff;
    --hairline-color: #303b4d;
    --border-color: #3b475b;
    --darkened-bg: #192437;
    --selected-bg: #223553;
    --selected-row: #462e23;
    --button-fg: #fff;
    --button-bg: #174b98;
    --button-hover-bg: #0e4194;
    --default-button-bg: #174b98;
    --default-button-hover-bg: #0e4194;
    --close-button-bg: #46536a;
    --close-button-hover-bg: #596982;
    --object-tools-bg: #2b5cad;
    --object-tools-hover-bg: #0e4194;
  }
}

#erp-branding { display: flex; align-items: center; gap: 16px; }
#erp-branding img { display: block; width: 148px; height: auto; }
#erp-branding span { padding-left: 15px; border-left: 1px solid rgb(255 255 255 / 45%); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }
#site-name { margin: 0; }
#content a:hover, #content a:focus { text-decoration-color: #cb5417; }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline-color: #cb5417; }
.validation-summary { margin: 0 0 16px; padding: 14px 18px; border: 1px solid #ba2121; border-radius: 4px; background: var(--darkened-bg); color: var(--body-fg); }
.validation-summary > strong { display: block; margin-bottom: 6px; color: #ba2121; }
.validation-summary ul { margin: 0; padding-left: 20px; }
.validation-summary li + li { margin-top: 4px; }
.validation-summary a { color: var(--link-fg); font-weight: 600; }
.validation-summary a:focus { outline: 2px solid #cb5417; outline-offset: 2px; }
html[data-theme="dark"] .validation-summary > strong { color: #ff7373; }
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { color: var(--body-loud-color); font-weight: 700; }
/* Two-column layout for the main record forms throughout the admin. */
body.change-form #content-main > form > div > fieldset.module.aligned {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 0 14px;
}
body.change-form #content-main > form > div > fieldset.module.aligned > .fieldset-heading,
body.change-form #content-main > form > div > fieldset.module.aligned > .description,
body.change-form #content-main > form > div > fieldset.module.aligned > details { grid-column: 1 / -1; }
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
}
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row.form-multiline { grid-column: 1 / -1; }
/* Dual-list pickers (groups, permissions) and multiple selects need the full width of the form. */
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row:has(.selector, select[multiple]) { grid-column: 1 / -1; }
/* Equipment events: photo upload and departure / return comparison use the full width. */
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row:is(.field-photos, .field-photo_gallery) { grid-column: 1 / -1; }
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row .flex-container,
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row .fieldBox { min-width: 0; }
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row input:not([type=checkbox]):not([type=radio]),
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row select,
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row textarea {
  box-sizing: border-box;
  max-width: 100%;
}
body.change-form #content-main > form > div > fieldset.module.aligned > .form-row textarea { min-height: 4em; }
body.change-form .inline-group .tabular th,
body.change-form .inline-group .tabular td { padding: 5px 7px; font-size: .8rem; }
body.change-form .inline-group .tabular div.wrapper { max-width: 100%; overflow-x: auto; }
@media (max-width: 767px) {
  body.change-form #content-main > form > div > fieldset.module.aligned { grid-template-columns: 1fr; }
  body.change-form #content-main > form > div > fieldset.module.aligned > .fieldset-heading,
  body.change-form #content-main > form > div > fieldset.module.aligned > .description,
  body.change-form #content-main > form > div > fieldset.module.aligned > details,
  body.change-form #content-main > form > div > fieldset.module.aligned > .form-row.form-multiline { grid-column: auto; }
  #header { padding: 10px 16px; }
  #erp-branding img { width: 112px; }
  #erp-branding { gap: 10px; }
  #erp-branding span { padding-left: 10px; font-size: .9rem; }
}

.language-switcher { display: inline; margin: 0; }
.language-switcher select { padding: 1px 4px; font-size: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; }
.language-switcher option { color: initial; }

/* Equipment event fields that do not apply to the selected event type (equipment-loan-fields.js). */
.event-field-inactive { visibility: hidden; }

/* Status badges (core.utils.status_pill and dashboard): ok, warning, danger, muted. */
.status-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-ok { background: #e2f3e6; color: #1d6a32; }
.status-warning { background: #fde9d7; color: #9a4609; }
.status-danger { background: #f9dfdf; color: #a12622; }
.status-muted { background: #eceff3; color: #596579; }
html[data-theme="dark"] .status-ok { background: #1d3a26; color: #9be0ad; }
html[data-theme="dark"] .status-warning { background: #4a3220; color: #ffbf8a; }
html[data-theme="dark"] .status-danger { background: #4a2424; color: #ff9f9f; }
html[data-theme="dark"] .status-muted { background: #2a3342; color: #b6c1d2; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .status-ok { background: #1d3a26; color: #9be0ad; }
  html[data-theme="auto"] .status-warning { background: #4a3220; color: #ffbf8a; }
  html[data-theme="auto"] .status-danger { background: #4a2424; color: #ff9f9f; }
  html[data-theme="auto"] .status-muted { background: #2a3342; color: #b6c1d2; }
}

/* Read-only document history: the version is already its first column. */
#versions-group td.original p, #revisions-group td.original p { display: none; }

/* « Ma signature » page: preview on a white sheet whatever the theme. */
.signature-preview { display: inline-block; margin: 0 0 12px; padding: 12px 18px; border: 1px solid var(--border-color); border-radius: 6px; background: #fff; }
.signature-preview img { display: block; max-width: 360px; max-height: 140px; }

/* Equipment loans: departure and return photos side by side. */
.loan-photos { display: flex; flex-wrap: wrap; gap: 14px; }
.loan-photos figure { margin: 0; }
.loan-photos figcaption { margin-bottom: 4px; color: var(--body-quiet-color); font-size: .8rem; font-weight: 600; }
.loan-photos .photo-row, .loan-photos figure:only-child { display: flex; flex-wrap: wrap; gap: 6px; }
.loan-photos img, .event-photo-thumbnail { display: block; max-width: 180px; max-height: 130px; border: 1px solid var(--border-color); border-radius: 4px; object-fit: contain; background: #fff; }
.loan-photos figure + figure { padding-left: 14px; border-left: 2px solid var(--hairline-color); }

/* Changing a recorded equipment event: the confirmation must not go unnoticed. */
fieldset.change-confirmation { border: 2px solid var(--accent); border-radius: 6px; }
fieldset.change-confirmation .fieldset-heading, fieldset.change-confirmation h2 { background: var(--accent); }
/* Side menu sections folded by default (sidebar-sections.js). */
#nav-sidebar .module caption { position: relative; cursor: pointer; padding-right: 34px; }
#nav-sidebar .sidebar-section-toggle {
  position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin: 0; padding: 0; transform: translateY(-50%);
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
#nav-sidebar .sidebar-section-toggle::before {
  content: ""; display: block; width: 7px; height: 7px; margin: 3px auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s;
}
#nav-sidebar .sidebar-collapsed .sidebar-section-toggle::before { margin-top: 6px; transform: rotate(-45deg); }
#nav-sidebar:not(.sidebar-filtering) .module.sidebar-collapsed tr { display: none; }
#nav-sidebar:not(.sidebar-filtering) .module.sidebar-collapsed { margin-bottom: 6px; }

/* ===== Visual refresh (2026-11): company identity from images.png — blue field #0E4194, orange edge #CB5417. ===== */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-sans-latin-400-italic.ac3e6cdbce96.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-sans-latin-700-normal.c277d7b83f8a.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/ibm-plex-5.3.0/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }
:root {
  --font-family-primary: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --brand-blue: #0e4194;
  --brand-orange: #cb5417;
}

/* One blue bar at the top, with the orange edge of the logo on its left; identical in light and dark. */
#header { padding: 8px 28px 8px 24px; background: var(--brand-blue); border-left: 7px solid var(--brand-orange); }
/* The logo has its own orange edge: hidden, the bar carries it. */
#erp-branding img { width: 132px; clip-path: inset(0 0 0 2.8%); margin-left: -4px; }
.object-tools a.workflow-action:link, .object-tools a.workflow-action:visited { background: var(--brand-orange); }
.object-tools a.workflow-action:hover, .object-tools a.workflow-action:focus { background: #a94312; }
#user-tools { font-size: .8rem; letter-spacing: .02em; text-transform: none; }
#user-tools a, #logout-form button { border-bottom: 0; color: rgb(255 255 255 / 85%); }
#user-tools a:hover, #user-tools a:focus, #logout-form button:hover, #logout-form button:focus { color: #fff; text-decoration: underline; }
.language-switcher select { border-color: rgb(255 255 255 / 45%); }
/* Breadcrumbs: a quiet strip, no second blue band. */
div.breadcrumbs { padding: 9px 28px; border-bottom: 1px solid var(--hairline-color); font-size: .82rem; }
div.breadcrumbs a { font-weight: 500; }

/* Section and block titles: light heading with the orange edge, instead of blue bands. */
/* forms.css is loaded after this file on change forms: the #content prefix wins over it. */
.module h2, .module caption, .inline-group h2,
#content fieldset .fieldset-heading, #content fieldset .inline-heading, #content :not(.inline-related) .collapse summary {
  padding: 10px 12px; background: var(--darkened-bg); color: var(--body-loud-color);
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: none;
  border-bottom: 1px solid var(--hairline-color); box-shadow: inset 3px 0 0 var(--brand-orange);
}
.module h2 a, .module caption a { color: inherit; }
#content fieldset .fieldset-heading, #content fieldset .inline-heading { border: 0; border-bottom: 1px solid var(--hairline-color); }
fieldset.module { border: 1px solid var(--hairline-color); border-radius: 6px; overflow: hidden; }
.inline-group { border-radius: 6px; overflow: hidden; }

/* Side menu: icons, quiet section titles, current page marked with the orange edge. */
#nav-sidebar { background: var(--body-bg); border-right: 1px solid var(--hairline-color); }
#nav-sidebar .module { margin-bottom: 2px; }
#nav-sidebar .module caption {
  padding: 9px 34px 9px 14px; background: transparent; box-shadow: none; border-bottom: 0;
  color: var(--body-medium-color); font-size: .85rem; font-weight: 600; letter-spacing: 0;
}
#nav-sidebar .module caption .section { display: flex; align-items: center; gap: 10px; color: var(--body-medium-color); }
#nav-sidebar .module caption .section::before {
  content: ""; flex: none; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: var(--section-icon, none) center / contain no-repeat; mask: var(--section-icon, none) center / contain no-repeat;
}
#nav-sidebar .current-app caption .section:link, #nav-sidebar .current-app caption .section:visited { color: var(--link-fg); font-weight: 700; }
#nav-sidebar .module th { padding: 0 0 0 41px; border: 0; }
#nav-sidebar .module td { border: 0; }
#nav-sidebar .module th a { display: block; padding: 6px 8px; border-radius: 0 4px 4px 0; color: var(--body-fg); font-size: .85rem; }
#nav-sidebar .module tr { background: transparent; }
#nav-sidebar .current-model { background: transparent; border-left: 0; }
#nav-sidebar .current-model th a { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--brand-orange); color: var(--link-fg); font-weight: 600; }
#nav-sidebar .module td a.addlink { font-size: .75rem; opacity: .75; }
#nav-sidebar .module tr:hover td a.addlink, #nav-sidebar .module td a.addlink:focus { opacity: 1; }
#nav-filter { margin: 10px 12px 8px; width: calc(100% - 24px); padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--darkened-bg); }
#nav-sidebar .app-projects { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16v12H4zM9 7V5h6v2'/></svg>"); }
#nav-sidebar .app-reports { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l4 4v14H7zM14 3v4h4M10 12h5M10 16h5'/></svg>"); }
#nav-sidebar .app-planning { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v14H4zM4 10h16M9 3v5M15 3v5'/></svg>"); }
#nav-sidebar .app-sales { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6'/></svg>"); }
#nav-sidebar .app-clients { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V8l8-4 8 4v12M9 20v-6h6v6'/></svg>"); }
#nav-sidebar .app-equipment { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4l6 6-9 9H5v-6zM12 6l6 6'/></svg>"); }
#nav-sidebar .app-technicians { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1-4 4-6 8-6s7 2 8 6'/></svg>"); }
#nav-sidebar .app-quality { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/><path d='M8.5 12l2.5 2.5 4.5-5'/></svg>"); }
#nav-sidebar .app-accounts { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20c.8-3.5 3.3-5.5 6.5-5.5s5.7 2 6.5 5.5M16 4.5a3.5 3.5 0 010 7M18 14.5c2 .6 3.2 2.4 3.6 5.5'/></svg>"); }
#nav-sidebar .app-core { --section-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2'/></svg>"); }

/* References in lists (projects, quotes, reports, batches) read as codes. */
#changelist td.field-reference, #changelist th.field-reference, #changelist td.field-number, #changelist th.field-number,
#changelist td.field-batch_number, .readonly .mono { font-family: var(--font-family-monospace); font-size: .82rem; }
#changelist table thead th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }

/* Status badges with a dot, the same everywhere. */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }


/* List filters: a bar of drop-down chips above the table instead of a column on the right (changelist-filters.js).
   #content: changelists.css is loaded after this file. */
#content #changelist .changelist-form-container:has(#changelist-filter) { flex-direction: column; align-items: stretch; }
#content #changelist .changelist-form-container:has(#changelist-filter) > div { max-width: 100%; }
#content #changelist #changelist-filter {
  order: -1; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px;
  background: transparent; border: 0;
}
#content #changelist-filter h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#content #changelist-filter details { position: relative; }
#content #changelist-filter details > summary {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 999px;
  background: var(--body-bg); color: var(--body-medium-color); font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
#content #changelist-filter details > summary::before { content: none; }
#content #changelist-filter details > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
#content #changelist-filter details > summary:hover, #content #changelist-filter details[open] > summary { border-color: var(--link-fg); }
#content #changelist-filter details.filter-active > summary { border-color: var(--link-fg); background: var(--selected-bg); color: var(--link-fg); font-weight: 600; }
#content #changelist-filter .filter-value { font-weight: 600; }
#content #changelist-filter details > ul {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 210px; max-height: 340px; overflow-y: auto; margin: 0; padding: 6px;
  border: 1px solid var(--border-color); border-radius: 6px; background: var(--body-bg); box-shadow: 0 10px 28px rgb(15 25 45 / 18%);
}
#content #changelist-filter details > ul li { margin: 0; padding: 0; list-style: none; }
#content #changelist-filter details > ul li a { display: block; padding: 6px 10px; border-radius: 4px; color: var(--body-fg); text-decoration: none; white-space: nowrap; }
#content #changelist-filter details > ul li a:hover, #content #changelist-filter details > ul li a:focus { background: var(--darkened-bg); }
#content #changelist-filter details > ul li.selected a { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--brand-orange); color: var(--link-fg); font-weight: 600; }
#content #changelist-filter #changelist-filter-extra-actions { display: contents; }
#content #changelist-filter #changelist-filter-extra-actions h3 { order: 99; margin: 0 0 0 4px; padding: 0; border: 0; font-size: .8rem; font-weight: 500; }

/* Signature path at the top of reports and procedures: done, expected now, later. */
.signature-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.signature-step { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border: 1px solid var(--hairline-color); border-radius: 6px; background: var(--body-bg); }
.signature-step-dot { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border: 2px solid var(--border-color); border-radius: 50%; color: var(--body-quiet-color); font-size: .75rem; font-weight: 700; }
.signature-step-text { display: grid; min-width: 0; }
.signature-step-text strong { color: var(--body-loud-color); font-size: .85rem; }
.signature-step-text small { overflow: hidden; color: var(--body-quiet-color); text-overflow: ellipsis; white-space: nowrap; }
.signature-step-done .signature-step-dot { border-color: #1f7a3d; background: #1f7a3d; color: #fff; }
.signature-step-now { border-color: color-mix(in srgb, var(--brand-orange) 55%, var(--hairline-color)); box-shadow: inset 3px 0 0 var(--brand-orange); }
.signature-step-now .signature-step-dot { border-color: var(--brand-orange); color: var(--brand-orange); }

/* Server status page (superusers). */
.server-status { display: grid; gap: 14px; max-width: 1100px; }
.server-status-ok { margin: 0; padding: 12px 16px; border: 1px solid #1f7a3d; border-radius: 6px; background: var(--darkened-bg); color: var(--body-fg); box-shadow: inset 3px 0 0 #1f7a3d; }
.server-status-table { width: 100%; border: 1px solid var(--hairline-color); border-radius: 6px; }
.server-status-table th[scope=row] { white-space: nowrap; font-weight: 600; }
.server-status-time { color: var(--body-quiet-color); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Equipment and product records: inspection reports that used them (traceability). */
.related-reports { width: 100%; max-width: 900px; border: 1px solid var(--hairline-color); }
.related-reports td, .related-reports th { padding: 6px 10px; }
.related-report-number { margin-right: 8px; font-family: var(--font-family-monospace); font-size: .82rem; }