html, body {
  font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.auth-field {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.auth-field label {
  display: block;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.25rem;
}

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.auth-field input:focus {
  outline: 2px solid #1176c0;
  border-color: transparent;
}

.auth-error {
  color: #b00020;
  margin-bottom: 1rem;
}

.auth-button {
  width: 100%;
  padding: 0.6rem;
  font-size: 0.95rem;
  color: #fff;
  background: #1176c0;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.auth-button:hover {
  background: #0d5c98;
}

.validation-message {
  color: #b00020;
  font-size: 0.8rem;
}

.app-logo {
  height: 28px;
  width: auto;
  display: block;
}

.auth-header {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  background: #1176c0;
  color: #fff;
}

.auth-logo {
  height: 22px;
  width: auto;
  display: block;
}

/* The Security page (DEVPLAN:46): the QR code, the typed key and the recovery codes shown once. */
.auth-button-secondary {
  background: #6b7280;
}

.auth-button-secondary:hover {
  background: #4b5563;
}

.mfa-qr {
  display: flex;
  justify-content: center;
}

.mfa-qr svg {
  width: 200px;
  height: 200px;
  display: block;
}

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.auth-check input {
  margin-top: 0.2rem;
}

/* The button stays clickable so the browser can say the box must be ticked; it only looks disabled until then. */
.recovery-confirm:has(input:not(:checked)) .auth-button {
  opacity: 0.5;
}

.mfa-key {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}

.recovery-codes {
  columns: 2;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1rem;
  user-select: all;
}

.recovery-codes li {
  padding: 0.15rem 0;
}


/* Global search bar in the app bar (REQ:H7): a light field on the blue bar with its own dropdown. */
.global-search {
  position: relative;
  width: min(480px, 40vw);
  margin-left: 1.5rem;
}

.global-search .global-search-field {
  margin: 0;
}

.global-search .mud-input-outlined {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
}

.global-search .mud-input-outlined .mud-input-outlined-border {
  border-color: transparent;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1400;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem 0;
  color: var(--mud-palette-text-primary);
}

.global-search-status,
.global-search-group {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

.global-search-group {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.global-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.global-search-item:hover,
.global-search-item.active {
  background: var(--mud-palette-action-default-hover);
}

.global-search-code {
  font-family: Consolas, "Cascadia Mono", monospace;
  white-space: nowrap;
}

.global-search-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record screens */
.record-code {
  font-family: Consolas, "Cascadia Mono", monospace;
  white-space: nowrap;
}

.record-number {
  text-align: right;
}

.record-relations td,
.record-relations th {
  white-space: nowrap;
}

.record-relations td:nth-child(2) {
  white-space: normal;
}

.status-chooser {
  margin-bottom: 0.25rem;
}

/* "View as API": the JSON as the public API serves it. */
.api-json {
  margin: 0;
  padding: 0.75rem 1rem;
  max-height: 60vh;
  overflow: auto;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.8rem;
  background: var(--mud-palette-background-gray);
  border-radius: 4px;
}

.record-tabs .mud-tabs-panels {
  padding: 1rem;
}

/* Read-only field tables: label left, value right, copy button directly left of the value (source fields only). */
.readonly-table .readonly-label {
  width: 40%;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.readonly-table .readonly-value {
  overflow-wrap: anywhere;
}

.readonly-table .readonly-copy {
  margin: -4px 0.25rem -4px -8px;
  opacity: 0.35;
}

.readonly-field:hover .readonly-copy,
.readonly-copy:focus-visible {
  opacity: 1;
}

/* The two alternative lists of a part share one column layout, so they line up under each other. */
.alternatives-table table {
  table-layout: fixed;
  width: 100%;
}

.alternatives-table td,
.alternatives-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Instance name next to the logo (app bar and login card). */
.app-instance {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Rows that open something on a double-click: no text selection on the second click. */
tr.cursor-pointer,
.status-row {
  user-select: none;
}

/* Import wizard (DEVPLAN:18): the kind and mode radio groups stack. MudRadioGroup puts its Class on the outer
   .mud-input-control; the flex row is the .mud-radio-group inside it. */
.import-choice .mud-radio-group {
  flex-direction: column !important;
  align-items: inherit !important;
}

.import-choice .mud-icon-button {
  padding: 6px !important;
}

/* Breathing room between the app bar and the first menu item: half a dense menu item. Only the top-level menu; the nested
   menu of an expanded group is a .mud-navmenu too. */
.mud-drawer-content > .mud-navmenu {
  padding-top: 18px;
}

/* Image lists (DEVPLAN:22, drag to reorder since DEVPLAN:36): a grid row per image, a small thumbnail, the location in a mono font that may wrap. */
.image-row {
  display: grid;
  grid-template-columns: 32px 120px 90px minmax(120px, 1fr) 100px 80px minmax(160px, 1.2fr) 88px;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  font-size: 0.875rem;
}

.image-header {
  font-size: 0.75rem;
  font-weight: 500;
}

.image-handle-cell {
  display: flex;
  align-items: center;
  cursor: grab;
}

.image-thumb-cell {
  width: 120px;
}

.image-thumb {
  display: block;
  max-width: 96px;
  max-height: 64px;
  object-fit: contain;
  border-radius: 3px;
  background: var(--mud-palette-background-gray);
}

.image-primary {
  margin: 4px 0 0 0 !important;
}

/* A Source image the feed stopped delivering (DEVPLAN:30): kept but out of the API, so shown dimmed. */
.image-inactive > div {
  opacity: 0.55;
}

.image-location {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* Record count in a tab header (TabTitle): small and muted, so the user sees what a tab holds before opening it. */
.tab-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tab-count {
  line-height: 1;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 1.5px;
}

/* Query builder (DEVPLAN:23): a group is a bordered box, a negated group shows it, a drop zone keeps a minimum height so an empty group can receive a drop. */
.query-group {
    border-left: 3px solid var(--mud-palette-primary);
}

.query-group-not {
    border-left-color: var(--mud-palette-error);
}

.query-zone {
    min-height: 32px;
}

.query-condition {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The date value of a condition or a bulk change: a fixed width for the input only. A Style on a MudPicker lands on
   the popover paper as well and clipped the calendar (DEVPLAN:29); Class stays on the input root. */
.query-date-picker {
    max-width: 180px;
}

/* History screens (DEVPLAN:27): the field diff of an audit row and the history lists. */
.audit-changes {
    border-collapse: collapse;
    font-size: 0.8125rem;
    /* The full cell width, values left-aligned: the arrow sits right after the old value on every row, whatever the
       alignment of the list cell around it (correction round DEVPLAN:43). */
    width: 100%;
    text-align: left;
}

.audit-changes th {
    text-align: left;
    font-weight: 500;
    padding: 0 0.75rem 0.125rem 0;
    white-space: nowrap;
    vertical-align: top;
    color: var(--mud-palette-text-secondary);
}

.audit-changes td {
    padding: 0 0 0.125rem 0;
    vertical-align: top;
    text-align: left;
    width: 100%;
    word-break: break-word;
}

.audit-changes .audit-arrow {
    margin: 0 0.375rem;
    color: var(--mud-palette-text-secondary);
}

.audit-changes .audit-added,
.audit-changes .audit-removed {
    display: inline-block;
    margin-right: 0.5rem;
}

.audit-changes .audit-added {
    color: var(--mud-palette-success);
}

.audit-changes .audit-removed {
    color: var(--mud-palette-error);
    text-decoration: line-through;
}

.audit-changes details.audit-long summary {
    cursor: pointer;
    color: var(--mud-palette-primary);
}

.audit-changes details.audit-long pre {
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.75rem;
}

.audit-history .audit-when,
.audit-grid .audit-when {
    white-space: nowrap;
}

.audit-history td {
    vertical-align: top;
}

/* The time next to a day filter on the audit search: a fixed width for the input only. A Style on a MudPicker lands on
   the popover paper as well and would clip the clock face; Class stays on the input root. */
.audit-time-picker {
    flex: 0 0 9.5rem;
}

/* Category tree (DEVPLAN:36): one grid row per category, the subcategories of an expanded main category in a zone of
   their own, indented; a drop hint keeps an empty zone open for a drop. */
.category-row {
  display: grid;
  grid-template-columns: 32px 36px 56px minmax(200px, 1.4fr) minmax(160px, 1fr) 100px 110px 70px 130px 130px;
  align-items: center;
  column-gap: 8px;
  padding: 4px 8px;
  font-size: 0.875rem;
}

.category-header {
  font-size: 0.75rem;
  font-weight: 500;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.category-handle {
  display: flex;
  align-items: center;
  cursor: grab;
}

.category-subzone {
  min-height: 24px;
  background: var(--mud-palette-background-gray);
}

.category-sub .category-title {
  padding-left: 24px;
}

.category-drop-hint {
  padding: 4px 8px 4px 132px;
  font-size: 0.75rem;
  font-style: italic;
}

.category-count {
  text-align: right;
}

.category-subtotal {
  margin-left: 4px;
  font-size: 0.75rem;
}

.category-thumb {
  display: block;
  max-width: 48px;
  max-height: 36px;
  object-fit: contain;
  border-radius: 3px;
  background: var(--mud-palette-background-gray);
}

/* Dashboard work supply (DEVPLAN:36): a row per tree with the tree at the left and equal-width tiles, the whole tile a link. */
.kpi-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
}

.kpi-row + .kpi-row {
  border-top: 1px solid var(--mud-palette-lines-default);
}

.kpi-kind {
  display: flex;
  align-items: center;
  width: 110px;
  flex: none;
  padding-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}

.kpi-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kpi-tile {
  display: flex;
  flex-direction: column;
  width: 180px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

a.kpi-tile:hover {
  border-color: var(--mud-palette-primary);
  background: var(--mud-palette-primary-hover);
}

.kpi-count {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mud-palette-primary);
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
}

.kpi-tile-problem {
  border-color: var(--mud-palette-error);
}

/* In-app help (DEVPLAN:37, TU:9.2): the panel at the right, its grip, the full page and the rendered markdown. */
/* Above a dialog (DEVPLAN:39): a HelpLink in a dialog opens the panel, which must not vanish behind the modal overlay.
   The drawer is clipped under the app bar, so it never covers the bar; snackbars and tooltips stay above it. */
.mud-drawer.help-drawer {
  z-index: calc(var(--mud-zindex-dialog) + 1);
}

.help-drawer .mud-drawer-content {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 100%;
}

.help-grip {
  flex: none;
  width: 6px;
  cursor: col-resize;
  background: var(--mud-palette-lines-default);
  touch-action: none;
}

.help-grip:hover,
body.help-resizing .help-grip {
  background: var(--mud-palette-primary);
}

body.help-resizing {
  cursor: col-resize;
  user-select: none;
}

.help-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.help-panel-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.help-panel-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px 12px;
}

/* The table of contents (panel and page). */
.help-contents-section {
  margin-bottom: 12px;
}

.help-contents-title {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 2px;
}

.help-contents-item {
  display: block;
  padding: 3px 8px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
}

.help-contents-item:hover {
  background: var(--mud-palette-action-default-hover);
}

.help-contents-current {
  color: var(--mud-palette-primary);
  font-weight: 500;
}

/* The full page: contents at the left, topic at the right; under 960 px the contents fold behind a button. */
.help-page {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.help-page-toc {
  flex: none;
  width: 260px;
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.help-page-main {
  flex: 1;
  min-width: 0;
  max-width: 960px;
}

.help-page-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.help-page-toc-toggle {
  display: none !important;
}

.help-page-title {
  margin-bottom: 4px;
}

.help-page-footer {
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px solid var(--mud-palette-lines-default);
  font-size: 0.75rem;
}

@media (max-width: 959px) {
  .help-page-toc {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
  }

  .help-page {
    flex-direction: column;
  }

  .help-page-toc-open {
    display: block;
  }

  .help-page-toc-toggle {
    display: inline-flex !important;
  }
}

.help-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 8px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.help-result:hover {
  border-color: var(--mud-palette-primary);
}

.help-result-title {
  font-weight: 500;
}

.help-result-section {
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
}

.help-result-snippet {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
}

/* The rendered markdown of a topic: sized to the MudBlazor body text, tables and code in the theme's colours. */
.help-content {
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.help-content h1 {
  display: none;
}

.help-content h2,
.help-content h3,
.help-content h4 {
  margin: 1.25em 0 0.4em 0;
  font-weight: 500;
  line-height: 1.3;
  scroll-margin-top: 8px;
}

.help-content h2 {
  font-size: 1.125rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.help-content h3 {
  font-size: 1rem;
}

.help-content h4 {
  font-size: 0.875rem;
}

.help-content p,
.help-content ul,
.help-content ol {
  margin: 0 0 0.75em 0;
}

.help-content ul,
.help-content ol {
  padding-left: 1.5em;
}

.help-content li + li {
  margin-top: 0.2em;
}

.help-content a {
  color: var(--mud-palette-primary);
}

/* A code (a permission, a field name) never breaks inside the word; a table too wide for the panel scrolls sideways
   instead of squeezing its columns to letters. */
.help-content code {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.8125em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--mud-palette-background-gray);
  white-space: nowrap;
}

.help-content pre {
  margin: 0 0 0.75em 0;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--mud-palette-background-gray);
  overflow-x: auto;
}

.help-content pre code {
  padding: 0;
  background: none;
  font-size: 0.8125rem;
}

.help-content table {
  display: block;
  border-collapse: collapse;
  max-width: 100%;
  margin: 0 0 1em 0;
  font-size: 0.8125rem;
  overflow-x: auto;
}

.help-content th,
.help-content td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  min-width: 6em;
}

.help-content th {
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

/* The field tables (fields:model, fields:part; FieldsGenerator.CssClass): eight columns, so the widths are fixed
   with the description taking a third; the table keeps a minimum width and scrolls sideways in the panel. */
.help-content .help-fields {
  margin: 0 0 1em 0;
  overflow-x: auto;
}

.help-content .help-fields table {
  display: table;
  table-layout: fixed;
  width: 100%;
  min-width: 64rem;
  margin: 0;
  overflow: visible;
}

.help-content .help-fields th,
.help-content .help-fields td {
  min-width: 0;
}

.help-content .help-fields td code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.help-content .help-fields th:nth-child(1) { width: 15%; }
.help-content .help-fields th:nth-child(2) { width: 12%; }
.help-content .help-fields th:nth-child(3) { width: 8%; }
.help-content .help-fields th:nth-child(4) { width: 9%; }
.help-content .help-fields th:nth-child(5) { width: 7%; }
.help-content .help-fields th:nth-child(6) { width: 8%; }
.help-content .help-fields th:nth-child(7) { width: 6%; }
.help-content .help-fields th:nth-child(8) { width: 35%; }

.help-content blockquote {
  margin: 0 0 0.75em 0;
  padding: 4px 12px;
  border-left: 3px solid var(--mud-palette-lines-default);
  color: var(--mud-palette-text-secondary);
}

/* Markdig alert blocks: > [!NOTE], > [!TIP], > [!WARNING], > [!IMPORTANT], > [!CAUTION]. */
.help-content .markdown-alert {
  margin: 0 0 0.75em 0;
  padding: 6px 12px;
  border-left: 3px solid var(--mud-palette-info);
  border-radius: 0 4px 4px 0;
  background: var(--mud-palette-background-gray);
}

.help-content .markdown-alert p:last-child {
  margin-bottom: 0;
}

.help-content .markdown-alert-title {
  font-weight: 500;
  margin-bottom: 0.25em;
}

.help-content .markdown-alert-tip {
  border-left-color: var(--mud-palette-success);
}

.help-content .markdown-alert-warning,
.help-content .markdown-alert-caution {
  border-left-color: var(--mud-palette-warning);
}

.help-content .markdown-alert-important {
  border-left-color: var(--mud-palette-primary);
}

.help-figure {
  margin: 0 0 1em 0;
  max-width: 100%;
}

.help-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
}

/* The screens of the contents grouped like the app menu: a group title, its topics indented. */
.help-contents-group {
  margin-bottom: 6px;
}

.help-contents-group-title {
  padding: 3px 8px 1px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.help-contents-sub {
  padding-left: 20px;
}

/* The search box in the panel and on the page. */
.help-search-box .help-search {
  margin: 4px 0 0 0;
}

/* Icon buttons wrapped in a tooltip (row actions, HistoryButton): the whole button takes the click, not only the ring
   around the icon (DEVPLAN:41 correction): the tooltip root sizes to its child and the icon itself never catches the
   pointer. The permission checklist of the role dialog keeps one checkbox per line inside its tooltips. */
.mud-tooltip-root.mud-tooltip-inline {
  display: inline-flex;
  vertical-align: middle;
}

.mud-icon-button .mud-icon-root,
.mud-icon-button svg {
  pointer-events: none;
}

.role-permissions .mud-tooltip-root {
  display: flex;
}

/* The record grid (DEVPLAN:41): the table always fills its container, fixed layout so the header percentages alone
   decide the widths (never the content), and long text cut with an ellipsis (the full text sits in the title).
   A drag on the right edge of a header (partscape.recordGrid) trades width with the neighbouring column. */
.record-grid table {
  table-layout: fixed;
  width: 100%;
}

.record-grid th,
.record-grid td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-grid th.record-grid-resizing {
  border-right: 2px solid var(--mud-palette-primary);
}

body.record-grid-dragging {
  cursor: col-resize;
  user-select: none;
}

.record-grid .mud-table-cell .mud-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Documentation lists (DEVPLAN:45): a grid row per item; the content (link, path, first line of an FAQ) may wrap. */
.doc-row {
  display: grid;
  grid-template-columns: 32px minmax(120px, 1fr) 70px minmax(160px, 1.4fr) minmax(200px, 2fr) 150px 88px;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  font-size: 0.875rem;
}

.doc-header {
  font-size: 0.75rem;
  font-weight: 500;
}

.doc-handle-cell {
  display: flex;
  align-items: center;
  cursor: grab;
}

.doc-content {
  overflow-wrap: anywhere;
}

.doc-chip {
  margin: 0 0 0 4px !important;
}

/* An item of an inactive documentation type: kept but out of the API, so shown dimmed. */
.doc-inactive > div {
  opacity: 0.55;
}

/* The Documentation types screen: the same row layout as the statuses. */
.doc-type-row {
  min-height: 48px;
}

/* The copy menu of a list row (DEVPLAN:51): label and value side by side, a long value cut with an ellipsis. */
.copy-menu .copy-menu-row {
  display: flex;
  gap: 1rem;
  max-width: 36rem;
}

.copy-menu .copy-menu-label {
  flex: 0 0 auto;
  min-width: 8rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.copy-menu .copy-menu-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}