/* Detail lists (preferred presentation for tab content).
   Stacked grids use subgrid so all rows share the same column tracks
   (tabular alignment) while tracks still size to content.
   Non-stacked grids with explicit .erpel-detail-grid-row* children stack
   those rows vertically; column counts live on the row, not the parent. */
.erpel-detail-grid {
  display: grid;
  gap: 0.65rem 2.5rem;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
  margin: 0;
  max-width: 100%;
  min-width: 0;
}

.erpel-detail-grid:not(.erpel-detail-grid--stacked):has(> .erpel-detail-grid-row) {
  grid-template-columns: minmax(0, 1fr);
}

.erpel-detail-grid--stacked {
  display: grid;
  gap: 0.65rem 2.5rem;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
  margin-inline: auto;
  max-width: min(100%, 48rem);
  min-width: 0;
  width: 100%;
}

/* Shared equal tracks for tabular Allgemein (and similar) — no row-to-row offset. */
.erpel-detail-grid--stacked.erpel-detail-grid--cols-5 {
  gap: 0.65rem 1.25rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
}

.erpel-detail-grid--stacked.erpel-detail-grid--cols-4 {
  gap: 0.65rem 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
}

.erpel-detail-grid--stacked > .erpel-detail-grid-row,
.erpel-detail-grid--stacked > .erpel-detail-grid-row--2,
.erpel-detail-grid--stacked > .erpel-detail-grid-row--3,
.erpel-detail-grid--stacked > .erpel-detail-grid-row--4,
.erpel-detail-grid--stacked > .erpel-detail-grid-row--5 {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  max-width: none;
  min-width: 0;
  row-gap: 0.2rem;
  width: auto;
}

.erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row,
.erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--2,
.erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--3,
.erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4,
.erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
  grid-column: 1 / -1;
  width: 100%;
}

.erpel-detail-grid-row {
  align-items: stretch;
  display: grid;
  column-gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  justify-content: start;
  max-width: 100%;
  min-width: 0;
  row-gap: 0.2rem;
  width: 100%;
}

.erpel-detail-grid-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.erpel-detail-grid-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.erpel-detail-grid-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.erpel-detail-grid-row--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.part-detail-embed .erpel-detail-grid--stacked {
  max-width: 100%;
}

.part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-5 {
  grid-template-columns: minmax(0, 1fr);
}

.part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-4 {
  grid-template-columns: minmax(0, 1fr);
}

/* Embed panel width ≠ viewport: collapse grids by available panel space.
   Do NOT overflow-x:hidden the whole panel — that clipped nested data_table
   toolbars (Pro Seite select). Constrain field grids only. */
.part-detail-embed .erpel-detail-panel {
  container-name: erpel-embed-panel erpel-detail-panel;
  container-type: inline-size;
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
}

.part-detail-embed .erpel-detail-grid,
.part-detail-embed .erpel-detail-grid--stacked {
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  overflow-x: hidden;
}

.part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-5,
.part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-4 {
  grid-template-columns: minmax(0, 1fr);
}

/* Non-stacked rows outside a stacked parent still collapse alone. */
.part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row,
.part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--2,
.part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--3,
.part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4,
.part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
  grid-template-columns: minmax(0, 1fr);
}

/* Embed defaults to 1 column: never invent implicit tracks via span-N. */
.part-detail-embed .erpel-detail-field--span-2,
.part-detail-embed .erpel-detail-field--span-3,
.part-detail-embed .erpel-detail-field--span-4 {
  grid-column: 1 / -1;
}

@container erpel-embed-panel (min-width: 28rem) {
  /* Default stacked (3-col family): 2 parent tracks. cols-4/5 stay 1 until 36rem. */
  .part-detail-embed .erpel-detail-grid--stacked:not(.erpel-detail-grid--cols-5):not(.erpel-detail-grid--cols-4) {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked):not(:has(> .erpel-detail-grid-row)) {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--2,
  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4,
  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-field--span-2 {
    grid-column: span 2;
  }

  .part-detail-embed .erpel-detail-field--span-3,
  .part-detail-embed .erpel-detail-field--span-4 {
    grid-column: 1 / -1;
  }
}

@container erpel-embed-panel (min-width: 36rem) {
  .part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-5 .erpel-detail-field--span-2,
  .part-detail-embed .erpel-detail-grid--stacked.erpel-detail-grid--cols-4 .erpel-detail-field--span-2 {
    grid-column: span 2;
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@container erpel-embed-panel (min-width: 40rem) {
  .part-detail-embed .erpel-detail-grid--stacked:not(.erpel-detail-grid--cols-5):not(.erpel-detail-grid--cols-4) {
    grid-template-columns: repeat(3, minmax(0, max-content));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked):not(:has(> .erpel-detail-grid-row)) {
    grid-template-columns: repeat(3, minmax(0, max-content));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .part-detail-embed .erpel-detail-field--span-2 {
    grid-column: span 2;
  }

  .part-detail-embed .erpel-detail-field--span-3,
  .part-detail-embed .erpel-detail-field--span-4 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .erpel-detail-grid,
  .erpel-detail-grid--stacked {
    grid-template-columns: minmax(0, 1fr);
  }

  .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row,
  .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--2,
  .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--3,
  .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--4,
  .erpel-detail-grid:not(.erpel-detail-grid--stacked) > .erpel-detail-grid-row--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .erpel-detail-field--span-2,
  .erpel-detail-field--span-3,
  .erpel-detail-field--span-4 {
    grid-column: 1 / -1;
  }
}

.erpel-detail-grid > .erpel-detail-field {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.erpel-detail-grid-row > .erpel-detail-field {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.erpel-detail-field {
  min-width: 0;
}

.erpel-detail-field dt {
  color: var(--erpel-text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 0;
}

/* Vertical centering only inside row-subgrid (block axis). On flex
   columns align-self would center labels horizontally — avoid that. */
.erpel-detail-grid-row > .erpel-detail-field > dt {
  align-self: center;
}

.erpel-detail-grid > .erpel-detail-field > dt {
  margin-bottom: 0.2rem;
}

.erpel-detail-field dd {
  color: var(--erpel-text-strong);
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-detail-field dd a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-detail-field--wide {
  grid-column: 1 / -1;
}

.erpel-detail-field--span-2 {
  grid-column: span 2;
}

.erpel-detail-field--span-3 {
  grid-column: 1 / -1;
}

.erpel-detail-field--span-4 {
  grid-column: 1 / -1;
}

.erpel-detail-field--wrap {
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.erpel-detail-field--wrap dd {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}

.erpel-detail-field--actions dt {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
}

.erpel-detail-field--actions .erpel-detail-field-actions {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.erpel-detail-field--actions .erpel-rfid-btn {
  width: 1.7rem;
  height: 1.7rem;
}

.erpel-detail-field--actions .erpel-rfid-btn .mdi {
  font-size: 1.05rem;
}

.erpel-detail-table th {
  width: 12rem;
  color: var(--erpel-gray-700);
  font-weight: 600;
}

/*
 * Create-wizard sticky chrome (title + step strip): seals main pad-top like
 * search list chrome so the band does not nudge when the viewport is short.
 */
.erpel-create-wizard-chrome {
  background-color: var(--erpel-surface);
  box-shadow: 0 1px 0 var(--erpel-surface);
  margin-bottom: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

main.erpel-main
  > .container.is-fluid.erpel-page
  > .erpel-detail-layout
  > .erpel-detail-stack
  > .erpel-create-wizard-chrome:first-child {
  margin-top: calc(-1 * var(--erpel-main-pad-top));
  padding-top: var(--erpel-main-pad-top);
}

.erpel-create-wizard-chrome > .erpel-detail-toolbar {
  /* Chrome is sticky; toolbar itself must not double-stick. */
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  position: static;
  top: auto;
  z-index: auto;
}

/* Title | meta (Recherche) | nav — must beat .erpel-detail-toolbar { display:flex }
   (later in this file); otherwise nav sits on top of Recherche after the type step. */
.erpel-detail-toolbar.erpel-create-wizard-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.erpel-detail-toolbar.erpel-create-wizard-toolbar > .erpel-detail-toolbar-meta {
  min-width: 0;
  position: relative;
  z-index: 2;
}

.erpel-detail-toolbar.erpel-create-wizard-toolbar > .erpel-wizard-nav-actions {
  flex-shrink: 0;
  justify-self: end;
  margin-left: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 48rem) {
  .erpel-detail-toolbar.erpel-create-wizard-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .erpel-detail-toolbar.erpel-create-wizard-toolbar > .erpel-detail-title-row {
    grid-column: 1 / -1;
  }
}

.erpel-create-wizard-chrome > .erpel-create-wizard {
  margin-bottom: 0;
  padding-bottom: 0.35rem;
}

.erpel-create-wizard {
  align-items: center;
  color: var(--erpel-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1rem;
}

.erpel-create-wizard-step.is-active {
  color: var(--erpel-brand);
  font-weight: 700;
}

.erpel-create-wizard-step.is-done {
  color: var(--erpel-gray-700);
}

a.erpel-create-wizard-step {
  text-decoration: none;
}

a.erpel-create-wizard-step:hover {
  color: var(--erpel-brand);
  text-decoration: underline;
}

.erpel-create-wizard-sep {
  color: var(--erpel-gray-400);
}

/* Assembly BOM add forms (wizard + edit): one row, wide selects, icon + */
.erpel-bom-add-form .heading.mb-1 {
  margin-bottom: 0.25rem;
}

.erpel-bom-add-form .erpel-bom-add-hint {
  margin-top: 0;
}

.erpel-bom-add-fields {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.erpel-bom-add-fields__child {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.erpel-bom-add-fields__qty {
  flex: 0 0 4.5rem;
}

.erpel-bom-add-fields__qty .input {
  max-width: 4.5rem;
}

.erpel-bom-add-fields__variant {
  flex: 1 1 10rem;
  min-width: 8rem;
}

/* Collapsed until a PCB child exposes the variant <select>. */
.erpel-bom-add-fields__variant:not(:has(select)) {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

.erpel-bom-add-fields__action {
  flex: 0 0 auto;
  padding-bottom: 1px;
}

.erpel-bom-select-col .select.is-fullwidth,
.erpel-bom-select-col .erpel-searchable-select {
  min-width: min(100%, 22rem);
  width: 100%;
}

.erpel-bom-select-col .erpel-searchable-select__input {
  min-width: 0;
  width: 100%;
}

.erpel-create-bom-table td .is-size-7 {
  margin-top: 0.15rem;
}

.erpel-detail-section-title {
  align-items: center;
  color: var(--erpel-gray-700);
  display: flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 0.35rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.erpel-detail-section-title .icon {
  color: var(--erpel-brand);
  height: 1.1rem;
  width: 1.1rem;
}

.erpel-detail-section-title .mdi {
  font-size: 1.1rem;
  line-height: 1;
}

.erpel-detail-section {
  margin-top: 1.25rem;
}

/* Part detail — quiet key-value layout (Allgemein tab) */

.erpel-detail-quiet-section + .erpel-detail-quiet-section {
  margin-top: 0.85rem;
}

/* .erpel-detail-quiet-heading — see .erpel-kv-heading in primitives.css */

/* Group titles inside the documentation section (Lokale Dokumente / Externe Links). */
.erpel-detail-quiet-subheading {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

.erpel-detail-quiet-fields {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.erpel-detail-frame--compact .erpel-detail-quiet-section + .erpel-detail-quiet-section {
  margin-top: 0.55rem;
}

.erpel-detail-frame--compact .erpel-detail-quiet-heading {
  font-size: 0.7rem;
  margin: 0 0 0.25rem;
  padding-bottom: 0.15rem;
}

.erpel-detail-frame--compact .erpel-detail-quiet-fields {
  gap: 0.25rem 0.65rem;
}

.erpel-detail-frame--compact .erpel-detail-quiet-field {
  gap: 0.1rem 0.35rem;
  grid-template-columns: minmax(4.25rem, max-content) minmax(0, 1fr);
}

.erpel-detail-frame--compact .erpel-detail-quiet-label {
  font-size: 0.72rem;
}

.erpel-detail-frame--compact .erpel-detail-quiet-value {
  font-size: 0.78rem;
}

@container erpel-detail-panel (max-width: 26rem) {
  .erpel-detail-quiet-fields,
  .erpel-detail-frame--compact .erpel-detail-quiet-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container erpel-detail-panel (min-width: 26.01rem) and (max-width: 40rem) {
  .erpel-detail-quiet-fields,
  .erpel-detail-frame--compact .erpel-detail-quiet-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container erpel-detail-panel (min-width: 40.01rem) {
  .erpel-detail-quiet-fields,
  .erpel-detail-frame--compact .erpel-detail-quiet-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.erpel-detail-quiet-field {
  align-items: baseline;
  display: grid;
  gap: 0 0.5rem;
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
  margin: 0;
  min-width: 0;
}

.erpel-detail-quiet-field--full {
  grid-column: 1 / -1;
}

.erpel-detail-quiet-label {
  align-self: baseline;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
  margin: 0;
  text-transform: none;
}

.erpel-detail-quiet-value {
  align-self: baseline;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  margin-inline-start: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erpel-detail-quiet-field--full .erpel-detail-quiet-value {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}

.erpel-detail-quiet-value a.erpel-part-link {
  font-weight: 600;
}

.erpel-detail-quiet-field--actions {
  align-items: baseline;
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr) auto;
}

.erpel-detail-quiet-field-actions {
  align-self: baseline;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.35rem;
}

.erpel-detail-quiet-field--actions .erpel-rfid-btn {
  height: 1.55rem;
  width: 1.55rem;
}

.erpel-detail-quiet-field--actions .erpel-rfid-btn .mdi {
  font-size: 1rem;
}

.erpel-detail-frame--compact .erpel-detail-quiet-field--actions {
  grid-template-columns: minmax(4.25rem, max-content) minmax(0, 1fr) auto;
}

/*
 * Detail page toolbar mirrors rail + content: CntxPN above the rail,
 * Lager/actions at the content column start, Recherche at the right edge.
 */
.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end) {
  display: grid;
  grid-template-columns: var(--erpel-rail-width) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem; /* match .erpel-detail-body */
  width: 100%;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end) > .erpel-detail-title-row {
  box-sizing: border-box;
  grid-column: 1;
  /* Match rail label start: border + rail pad + tab pad + icon + gap. */
  justify-self: stretch;
  max-width: none;
  padding-left: calc(1px + 0.35rem + 0.65rem + 1.5rem + 0.55rem);
  width: 100%;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end)
  > .erpel-detail-title-row:has(> .erpel-detail-title-id) {
  width: 100%;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end)
  > .erpel-detail-title-row
  > .erpel-detail-title-id {
  justify-content: flex-start;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end)
  > .erpel-detail-title-row
  > .erpel-detail-title-id
  > .erpel-detail-title {
  text-align: left;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end) > .erpel-detail-toolbar-meta {
  grid-column: 2;
  justify-self: start;
  min-width: 0;
}

.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end)
  > .erpel-detail-toolbar-end {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

/* Edit: Recherche stays in the same right slot; the mode chip centers in the gap. */
.erpel-detail-toolbar:has(> .erpel-detail-toolbar-end):has(> .erpel-edit-mode-badge) {
  grid-template-columns: var(--erpel-rail-width) auto minmax(0, 1fr) auto;
}

.erpel-detail-toolbar:has(> .erpel-edit-mode-badge) > .erpel-detail-toolbar-meta {
  grid-column: 2;
  justify-self: start;
}

.erpel-detail-toolbar:has(> .erpel-edit-mode-badge) > .erpel-edit-mode-badge {
  grid-column: 3;
  justify-self: center;
  margin-inline: 0;
}

.erpel-detail-toolbar:has(> .erpel-edit-mode-badge) > .erpel-detail-toolbar-end {
  grid-column: 4;
}

.erpel-part-link {
  color: var(--erpel-brand);
  cursor: pointer;
  font-family: var(--erpel-font-role-id);
  font-weight: 600;
}

.erpel-part-link:hover {
  text-decoration: underline;
}

.erpel-detail-quiet-field--actions .erpel-detail-quiet-value {
  font-family: var(--erpel-font-role-id);
}

/* Tabs (ERPelWeb style.scss) */

.tabs.is-toggle li.is-active a {
  background-color: var(--erpel-brand);
  border-color: var(--erpel-brand);
}

.tabs li.is-disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

tr.obsolete td {
  color: var(--erpel-gray-400);
  text-decoration: line-through;
}

tr.special td {
  background-color: var(--erpel-warning-bg);
}

.erpel-special-cntxpn {
  background-color: var(--erpel-warning-bg);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.htmx-request #search-results {
  opacity: 0.55;
}

/* Detail frame: stable full width so tabs/content do not jump when switching tabs */

.erpel-detail-toolbar {
  align-items: center;
  background-color: var(--erpel-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  /* No margin-bottom: sticky margins scroll away and nudge the rail. */
  margin-bottom: 0;
  padding-bottom: 0.65rem;
  position: sticky;
  /* Scrollport is main — chrome is outside. */
  top: 0;
  width: 100%;
  z-index: 30;
}

/* Space below toolbar on the panel (not a margin on the sticky toolbar). */
.erpel-detail-stack:has(> .erpel-detail-toolbar) .erpel-detail-panel {
  padding-top: 1.25rem;
}

.erpel-detail-toolbar.is-stuck {
  box-shadow: 0 1px 0 var(--erpel-ink-a8);
}

.erpel-detail-footer {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--erpel-border-subtle);
}

/* Same column as the edit panel (beside rail); form-wide, not full toolbar. */
.erpel-detail-main {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.erpel-more-actions-form {
  margin: 0;
}

/* Open menu: lift the toolbar above the panel (with rail the toolbar is only z-index 2,
   select chevrons in the panel would paint over the menu). */
.erpel-detail-toolbar:has(.erpel-more-actions.is-active) {
  z-index: 60;
}

/* Rail layout makes the toolbar position:static (z-index ignored) — anchor it while open. */
main.erpel-main:has(.erpel-detail-body > .erpel-rail)
  .erpel-detail-toolbar:has(.erpel-more-actions.is-active) {
  position: relative;
  z-index: 60;
}

.erpel-more-actions-menu {
  min-width: 16rem;
  z-index: 60;
}

.erpel-more-actions-menu .dropdown-content {
  border-top: 3px solid var(--erpel-danger);
  padding-block: 0.35rem;
}

.erpel-more-actions-heading {
  color: var(--erpel-danger-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 1rem 0.35rem;
  text-transform: uppercase;
}

.erpel-more-actions-item {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.5rem;
  text-align: left;
  width: 100%;
}

.erpel-more-actions-item.is-warning {
  color: var(--erpel-warning-text);
}

.erpel-more-actions-item.is-warning:not([disabled]):hover,
.erpel-more-actions-item.is-warning:not([disabled]):focus-visible {
  background-color: var(--erpel-warning-tint);
  color: var(--erpel-warning-text-strong);
}

.erpel-more-actions-item.is-danger {
  color: var(--erpel-danger-text);
}

.erpel-more-actions-item.is-danger:not([disabled]):hover,
.erpel-more-actions-item.is-danger:not([disabled]):focus-visible {
  background-color: var(--erpel-danger-tint-auth);
  color: var(--erpel-danger-text);
}

/* Disabled: plain grey label instead of a translucent red one. */
.erpel-more-actions-item[disabled] {
  color: var(--erpel-gray-500);
  cursor: not-allowed;
}

.erpel-more-actions-note {
  align-items: flex-start;
  background-color: var(--erpel-gray-30);
  border-top: 1px solid var(--erpel-gray-170);
  color: var(--erpel-gray-600);
  display: flex;
  font-size: 0.75rem;
  gap: 0.4rem;
  line-height: 1.35;
  margin: 0.25rem 0 -0.35rem;
  max-width: 16rem;
  padding: 0.5rem 1rem;
}

.erpel-more-actions-note .icon {
  flex-shrink: 0;
  height: 1.05rem;
}

.erpel-part-delete-modal .modal-card {
  width: min(32rem, 96vw);
}

.erpel-back-link {
  font-size: 0.95rem;
}

.erpel-detail-title-row {
  align-items: center;
  display: inline-flex;
  gap: 0.15rem;
  min-width: 0;
}

/* Fixed outer slot (CNTXPN_MAX_LENGTH=15) — keeps meta/actions from shifting. */
.erpel-detail-title-row:has(> .erpel-detail-title-id) {
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(15ch + 3.45rem);
}

/* CntxPN + copy hug each other; group centered like the old title-only slot. */
.erpel-detail-title-id {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  flex: 1 1 auto;
  gap: 0.15rem;
  justify-content: center;
  min-width: 0;
}

.erpel-detail-title-id > .erpel-detail-title {
  flex: 0 1 auto;
  max-width: 15ch;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-part-health-icon {
  flex-shrink: 0;
  height: 1.5rem;
  line-height: 1;
  width: 1.5rem;
}

.erpel-part-health-icon .mdi {
  font-size: 1.35rem;
}

.erpel-detail-toolbar-meta .erpel-part-health-icon {
  margin-left: 0.1rem;
}

.erpel-detail-tab-menu .erpel-part-health-icon {
  margin-left: 0.1rem;
}

.erpel-detail-status-cluster {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.erpel-edit-health {
  align-items: center;
  display: inline-flex;
}

/* Same gap the pencil used to have after the Recherche button (mr-2 + actions gap). */
.erpel-detail-embed-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.85rem;
}

.erpel-detail-tab-menu .erpel-detail-embed-edit.button {
  height: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  width: 1.5rem;
}

.erpel-detail-tab-menu .erpel-detail-embed-edit .icon {
  height: 1rem;
  width: 1rem;
}

.erpel-detail-tab-menu .erpel-detail-embed-edit .mdi {
  font-size: 1rem;
}

.erpel-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

a.erpel-detail-title {
  text-decoration: none;
}

a.erpel-detail-title:hover {
  text-decoration: underline;
}

.erpel-copy-btn {
  flex-shrink: 0;
  height: 1.75rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  width: 1.75rem;
}

.erpel-copy-btn .icon {
  height: 1rem;
  width: 1rem;
}

.erpel-copy-btn .mdi {
  font-size: 1rem;
}

/* Second icon: cancel one button padding so glyph gap matches text-to-copy. */
.erpel-detail-title-id > .erpel-copy-btn + .erpel-copy-btn {
  margin-left: -0.35rem;
}

.erpel-detail-toolbar .tags {
  margin-bottom: 0;
}

/* Icon actions next to status/stock tags — match Bulma tag height (~2em @ 0.75rem). */
.erpel-detail-toolbar .erpel-detail-action-btn.button {
  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  height: 2em;
  justify-content: center;
  min-height: 2em;
  padding: 0;
  width: 2em;
}

.erpel-detail-toolbar .erpel-detail-action-btn .icon {
  height: 1.1em;
  width: 1.1em;
}

.erpel-detail-toolbar .erpel-detail-action-btn .mdi {
  font-size: 1.1em;
  line-height: 1;
}

/* Badges + action icons stay in one cluster (no jump view↔edit). */
.erpel-detail-toolbar-meta {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  min-width: 0;
}

.erpel-wizard-btn {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  height: 2.25rem;
  justify-content: center;
  min-height: 2.25rem;
}

.erpel-wizard-btn.is-icon-only {
  min-width: 2.25rem;
  padding: 0;
  width: 2.25rem;
}

.erpel-wizard-btn .icon {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.erpel-wizard-btn .icon .mdi {
  font-size: 1.25rem;
}

/* Weiter first in DOM (implicit Enter submit); Zurück visually left via order. */
.erpel-wizard-nav-actions {
  display: flex;
  flex-wrap: wrap;
}

.erpel-wizard-nav-actions .erpel-wizard-nav-back {
  order: -2;
}

.erpel-wizard-nav-actions .erpel-wizard-nav-forward {
  order: -1;
}

.erpel-detail-toolbar-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.35rem;
}

/* Edit-mode marker between the view action and Recherche — status chip, not a button. */
.erpel-detail-toolbar > .erpel-edit-mode-badge.tag {
  background-color: var(--erpel-warning-tint);
  border: none;
  color: var(--erpel-warning-text);
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  height: 1.85em;
  letter-spacing: 0.01em;
  padding-left: 0.65em;
  padding-right: 0.65em;
}

.erpel-detail-tab-select .select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.erpel-lookup-fk-actions {
  /* Participate in parent .field.has-addons flex row as sibling .controls. */
  display: contents;
}

/* Same control height as .input.is-small / .select.is-small (2.5em of size-small). */
.field.has-addons:has([data-erpel-lookup-fk-actions]) {
  --erpel-lookup-addon-height: calc(2.5 * var(--bulma-size-small));
  align-items: stretch;
  flex-wrap: nowrap;
}

.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .select,
.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .select select,
.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .erpel-searchable-select,
.field.has-addons:has([data-erpel-lookup-fk-actions])
  > .control
  .erpel-searchable-select
  .erpel-searchable-select__input,
.field.has-addons .erpel-lookup-fk-actions .control .button {
  font-size: var(--bulma-size-small);
  height: var(--erpel-lookup-addon-height);
}

.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .select,
.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .erpel-searchable-select {
  width: 100%;
}

.field.has-addons:has([data-erpel-lookup-fk-actions]) > .control .select select {
  width: 100%;
}

.erpel-copy-template-panel {
  border: 1px solid var(--erpel-border-subtle);
  border-radius: var(--erpel-radius);
  background: var(--erpel-surface-muted);
  box-shadow: none !important;
}