.erpel-config-layout.erpel-detail-body {
  /* Panel fills the row; the rail sizes to its content (detail.css). */
  align-items: stretch;
}
.erpel-orders-layout.erpel-detail-body {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

.erpel-orders {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.erpel-orders-panel.erpel-detail-panel {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.erpel-orders-panel .box .level {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.erpel-orders-panel .box .level .level-left,
.erpel-orders-panel .box .level .level-right {
  flex-shrink: 1;
  min-width: 0;
}

.erpel-orders-panel .box .buttons {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.erpel-order-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1rem;
}

.erpel-order-facts div {
  min-width: 5.5rem;
}

.erpel-order-facts span {
  display: block;
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.erpel-order-facts strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.erpel-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.erpel-icon-button {
  min-height: 2.5rem;
  padding-left: 0.85rem;
  padding-right: 0.95rem;
  gap: 0.4rem;
}

.erpel-icon-button .icon {
  margin: 0;
}

.erpel-icon-button--solo {
  min-height: 2rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.erpel-cal-bar--phase-pcb {
  --erpel-cal-phase: var(--erpel-chart-1);
}

.erpel-cal-bar--phase-stencil {
  --erpel-cal-phase: var(--erpel-chart-2);
}

.erpel-cal-bar--phase-parts {
  --erpel-cal-phase: var(--erpel-chart-3);
}

.erpel-cal-bar--phase-receipt {
  --erpel-cal-phase: var(--erpel-chart-4);
}

.erpel-cal-bar--phase-setup {
  --erpel-cal-phase: var(--erpel-chart-5);
}

.erpel-cal-bar--phase-smd {
  --erpel-cal-phase: var(--erpel-chart-6);
}

.erpel-cal-bar--phase-pretest {
  --erpel-cal-phase: var(--erpel-chart-7);
}

.erpel-cal-bar--phase-tht {
  --erpel-cal-phase: var(--erpel-chart-8);
}

.erpel-cal-bar--phase-ems_data {
  --erpel-cal-phase: var(--erpel-chart-5);
}

.erpel-cal-bar--phase-ems_consign {
  --erpel-cal-phase: var(--erpel-chart-2);
}

.erpel-cal-bar--phase-ems_build {
  --erpel-cal-phase: var(--erpel-chart-8);
}

.erpel-cal-bar--phase-ems_return {
  --erpel-cal-phase: var(--erpel-chart-2);
}

.erpel-cal-bar--phase-montage {
  --erpel-cal-phase: var(--erpel-chart-1);
}

.erpel-cal-id {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  min-width: 0;
  align-items: baseline;
  overflow: hidden;
}

.erpel-cal-num {
  flex: 0 0 auto;
  min-width: 3.25rem;
  white-space: nowrap;
  font-family: var(--erpel-font-role-id, inherit);
}

.erpel-phase-editor__row,
.erpel-bom-line-edit,
.erpel-qty-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.erpel-phase-editor__duration .input,
.erpel-qty-form .input {
  width: 5.5rem;
}

.erpel-bom-line-edit .input {
  width: auto;
  min-width: 6rem;
}

.erpel-order-phases {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.erpel-phase-block {
  display: flex;
  flex: 0 0 10.5rem;
  flex-direction: column;
  gap: 0.35rem;
  height: auto;
  margin: 0;
  max-width: none;
  min-width: 10.5rem;
  padding: 0.45rem 0.55rem;
  white-space: normal;
}

.erpel-phase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.erpel-queue-row {
  padding: 0.1rem 0.5rem;
}

.erpel-queue-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  margin-bottom: 0.55rem;
}

.erpel-queue-qty {
  margin-left: auto;
  font-weight: 600;
}

.erpel-queue-row.is-dragging {
  opacity: 0.65;
}

.erpel-drag-handle {
  cursor: grab;
}

/*
 * Horizontal scroll for wide order tables on narrow viewports.
 * Must beat `.erpel-detail-panel .erpel-table-frame .table-container`
 * (tables.css: overflow-x:visible for sticky thead) — orders list has no
 * sticky thead, and without overflow-x:auto the 59rem min-width table is
 * clipped with no scrollbar.
 */
.erpel-orders-panel .table-container,
.erpel-orders-panel .erpel-table-frame .table-container {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.erpel-orders-panel .table-container > .table {
  min-width: 44rem;
}

/* Tags/buttons are taller than plain text; center all cells so rows don't look top-heavy. */
.erpel-orders-panel .table-container > .table > :is(thead, tbody) > tr > :is(th, td) {
  vertical-align: middle;
}

/* Headers stay on one line; table scrolls horizontally before wrapping. */
.erpel-orders-panel .table-container > .table > thead > tr > th {
  white-space: nowrap;
}

.erpel-orders-panel .table-container > .table .tag,
.erpel-orders-panel .table-container > .table .button {
  margin-bottom: 0;
  vertical-align: middle;
}

.erpel-order-wip-mini {
  display: flex;
  align-items: center;
  gap: var(--erpel-space-2);
  max-width: 9rem;
}

.erpel-order-wip-mini__bar {
  flex: 1;
  min-width: 0;
  height: 0.55rem;
  background: var(--erpel-border-subtle);
  border: 1px solid var(--erpel-border);
  border-radius: var(--erpel-radius);
  overflow: hidden;
}

.erpel-orders-panel a.erpel-order-external-id,
.erpel-orders-panel .erpel-order-tracking-no {
  font-family: var(--erpel-font-role-id);
}

.erpel-orders-panel .erpel-order-line-mpn {
  font-family: var(--erpel-font-role-mpn);
}

.erpel-orders-panel .erpel-order-detail-id {
  font-family: var(--erpel-font-role-id);
}

/* Order line items table in the tracking detail (MPN, Supplier-PN, CntxPN, qty columns).
   Scoped to its own class: a panel-wide rule turned every order table monospace. */
.erpel-order-lines-table tbody tr > td:nth-child(2),
.erpel-order-lines-table tbody tr > td:nth-child(3) {
  font-family: var(--erpel-font-role-mpn);
}

.erpel-order-lines-table tbody tr > td:nth-child(4),
.erpel-order-lines-table tbody tr > td:nth-child(4) a {
  font-family: var(--erpel-font-role-id);
}

.erpel-order-lines-table tbody tr > td:nth-child(n + 5):nth-child(-n + 9) {
  font-family: var(--erpel-font-role-metric);
}

.erpel-order-wip-mini__fill {
  display: block;
  width: var(--erpel-wip-pct, 0%);
  height: 100%;
  background: var(--bulma-link);
}

.erpel-order-wip-mini__pct {
  flex-shrink: 0;
  line-height: 1;
}

/*
 * Order tracking list: fixed column widths so filter selects (distributor,
 * tracking, status) do not reflow the table when values change.
 *
 * width must be ≥ min-width (not plain 100%): with table-layout:fixed the
 * browser otherwise lays columns out against the narrow scrollport and
 * crushes the trailing "Zuletzt Sync" column into ellipsis.
 *
 * --erpel-ot-col-* fix the filter selects so value changes do not reflow columns.
 */
.erpel-order-tracking-table {
  --erpel-ot-col-origin: 6rem;
  --erpel-ot-col-distributor: 9rem;
  --erpel-ot-col-external: 7rem;
  --erpel-ot-col-customer-po: 6.5rem;
  --erpel-ot-col-ordered-at: 10rem;
  --erpel-ot-col-status: 8rem;
  --erpel-ot-col-lines: 3.75rem;
  --erpel-ot-col-total: 6.5rem;
  --erpel-ot-col-tracking: 5.5rem;
  --erpel-ot-col-synced: 10rem;
}

.erpel-order-tracking-table .erpel-data-table {
  /* Sum of fixed columns (origin…last_synced) ≈ 72.5rem. */
  max-width: none;
  min-width: 72.5rem;
  table-layout: fixed;
  width: max(100%, 72.5rem);
}

.erpel-order-tracking-table .erpel-data-table > thead > tr:first-child > th,
.erpel-order-tracking-table .erpel-data-table > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Beat the cell rule above (same specificity + later) — datetimes must not ellipsize. */
.erpel-order-tracking-table
  .erpel-data-table
  > :is(thead, tbody)
  > tr
  > :is(th, td).erpel-col-ordered_at,
.erpel-order-tracking-table
  .erpel-data-table
  > :is(thead, tbody)
  > tr
  > :is(th, td).erpel-col-last_synced_at {
  text-overflow: clip;
  width: var(--erpel-ot-col-ordered-at);
}

.erpel-order-tracking-table
  .erpel-data-table
  > :is(thead, tbody)
  > tr
  > :is(th, td).erpel-col-last_synced_at {
  width: var(--erpel-ot-col-synced);
}

.erpel-order-tracking-table .erpel-data-table > thead > tr:first-child > th {
  font-size: var(--erpel-font-md);
}

.erpel-order-tracking-table .erpel-col-distributor {
  width: var(--erpel-ot-col-distributor);
}

.erpel-order-tracking-table .erpel-jlc-order-type {
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;
}

.erpel-order-tracking-table .erpel-col-external_order_id {
  width: var(--erpel-ot-col-external);
}

.erpel-order-tracking-table .erpel-col-customer_po {
  width: var(--erpel-ot-col-customer-po);
}

.erpel-order-tracking-table .erpel-col-ordered_at {
  width: var(--erpel-ot-col-ordered-at);
}

/*
 * Zeitraum dropdown stays in the filter header row and lines up with the
 * other column filters. Custom dates sit under that dropdown in the same
 * header row, so the row (and its bottom border) grows. The first body row
 * stays its normal height — extra padding there made the hover band too tall.
 */
.erpel-orders-panel .erpel-order-tracking-table .erpel-data-table > thead > tr.erpel-filter-row > th {
  overflow: visible;
  vertical-align: middle;
  white-space: normal;
}

.erpel-orders-layout.erpel-detail-body:has(> .erpel-rail)
  .erpel-orders-panel
  .erpel-order-tracking-table:has(.erpel-order-period-dates)
  .erpel-data-table
  > thead
  > tr.erpel-filter-row
  > th {
  vertical-align: top;
}

/* Beat detail.css sticky `top` (same cells, higher specificity). `top` only
   shifts a non-static box — this cell is position:relative for the date
   popover, so the sticky offset would drop Zeitraum by one header row. */
.erpel-orders-layout.erpel-detail-body:has(> .erpel-rail)
  .erpel-orders-panel
  .erpel-order-tracking-table
  .erpel-data-table
  > thead
  > tr.erpel-filter-row
  > th.erpel-col-ordered_at {
  overflow: visible;
  position: relative;
  top: auto;
  vertical-align: middle;
  width: var(--erpel-ot-col-ordered-at);
  z-index: 4;
}

.erpel-orders-layout.erpel-detail-body:has(> .erpel-rail)
  .erpel-orders-panel
  .erpel-order-tracking-table:has(.erpel-order-period-dates)
  .erpel-data-table
  > thead
  > tr.erpel-filter-row
  > th.erpel-col-ordered_at {
  vertical-align: top;
}

.erpel-order-period-filter {
  display: block;
  position: relative;
  width: 100%;
}

.erpel-order-period-filter .erpel-order-period-preset,
.erpel-order-period-filter .erpel-column-filter {
  height: 1.85rem;
  max-width: 100%;
  min-height: 1.85rem;
  position: relative;
  width: 100%;
}

.erpel-order-period-dates {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 0.35rem;
  position: static;
  width: 100%;
}

.erpel-order-period-sep {
  flex: 0 0 auto;
  line-height: 1;
}

.erpel-order-period-date {
  flex: 1 1 0;
  font-size: var(--erpel-font-xs, 0.7rem);
  max-width: 100%;
  min-height: 1.75rem;
  min-width: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  width: auto;
}

.erpel-order-tracking-table .erpel-col-status_normalized {
  width: var(--erpel-ot-col-status);
  white-space: normal;
}

.erpel-order-tracking-table .erpel-filter-row .erpel-col-status_normalized {
  white-space: normal;
}

.erpel-order-tracking-table .erpel-col-line_count {
  text-align: center;
  width: var(--erpel-ot-col-lines);
}

.erpel-order-tracking-table .erpel-order-line-count-badge {
  font-size: 0.65rem;
  height: 1.35rem;
  min-width: 1.35rem;
  padding-left: 0.35em;
  padding-right: 0.35em;
}

/* Compact: header «Gesamtwert» + sort; values like «1.414,02 €» / «kostenlos». */
.erpel-order-tracking-table .erpel-col-total_amount {
  max-width: var(--erpel-ot-col-total);
  min-width: var(--erpel-ot-col-total);
  width: var(--erpel-ot-col-total);
}

.erpel-order-tracking-table .erpel-col-tracking {
  text-align: center;
  width: var(--erpel-ot-col-tracking);
}

.erpel-order-tracking-table .erpel-filter-row .erpel-col-tracking {
  width: var(--erpel-ot-col-tracking);
}

.erpel-order-tracking-table .erpel-order-tracking-flag {
  align-items: center;
  display: inline-flex;
  gap: 0.1rem;
  justify-content: center;
  vertical-align: middle;
}

.erpel-order-tracking-table .erpel-order-tracking-multi {
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-left: 0.05rem;
}

.erpel-order-tracking-table .erpel-order-tracking-flag .icon,
.erpel-order-tracking-table .erpel-order-origin-icon .icon {
  align-items: center;
  display: inline-flex;
  font-size: 1.25rem;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

.erpel-order-tracking-table .erpel-filter-row .erpel-col-tracking,
.erpel-order-tracking-table .erpel-filter-row .erpel-col-distributor,
:is(.erpel-order-tracking-table, .erpel-production-orders-table) .erpel-filter-row .erpel-col-origin,
.erpel-order-tracking-table .erpel-filter-row .erpel-col-status_normalized {
  overflow: visible;
}

.erpel-order-tracking-table .erpel-col-last_synced_at {
  width: var(--erpel-ot-col-synced);
}

/* Herkunft: icon cells stay centered; width fits Alle/Shop/PO select + clear. */
.erpel-order-tracking-table .erpel-col-origin {
  overflow: visible;
  text-align: center;
  width: var(--erpel-ot-col-origin);
}

:is(.erpel-order-tracking-table, .erpel-production-orders-table) .erpel-order-origin-filter {
  align-items: center;
  display: flex;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
}

:is(.erpel-order-tracking-table, .erpel-production-orders-table) .erpel-order-origin-filter .erpel-column-filter {
  flex: 1 1 auto;
  min-width: 0;
}

:is(.erpel-order-tracking-table, .erpel-production-orders-table)
  .erpel-order-origin-filter
  :is(.erpel-filter-input, .erpel-searchable-select__input) {
  font-size: var(--erpel-font-xs);
  padding-left: 0.35rem;
  padding-right: 1.35rem;
}

:is(.erpel-order-tracking-table, .erpel-production-orders-table) .erpel-order-origin-clear {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1;
  padding: 0 0.15rem;
  text-decoration: none;
}

:is(.erpel-order-tracking-table, .erpel-production-orders-table) tbody .erpel-clickable-row {
  cursor: pointer;
}

/* HTMX sync indicators / busy buttons (list + detail). */
#erpel-order-tracking-sync-indicator.htmx-indicator,
#erpel-order-history-sync-indicator.htmx-indicator,
#erpel-order-detail-sync-indicator.htmx-indicator,
#erpel-shipment-sync-indicator.htmx-indicator {
  display: none;
}

#erpel-order-tracking-sync-indicator.htmx-indicator.htmx-request,
#erpel-order-history-sync-indicator.htmx-indicator.htmx-request,
#erpel-order-detail-sync-indicator.htmx-indicator.htmx-request,
#erpel-shipment-sync-indicator.htmx-indicator.htmx-request,
#erpel-order-tracking-sync-indicator.erpel-order-sync-indicator.is-active,
#erpel-order-history-sync-indicator.erpel-order-sync-indicator.is-active,
#erpel-order-detail-sync-indicator.erpel-order-sync-indicator.is-active,
#erpel-shipment-sync-indicator.erpel-order-sync-indicator.is-active {
  display: block;
}

.erpel-order-sync-indicator .erpel-sourcing-provider-activity-tags {
  justify-content: center;
  gap: 0.75rem;
}

.erpel-order-sync-indicator.is-active .erpel-order-sync-indicator-spinner {
  margin-bottom: 0.35rem;
}

#order-history-sync-modal:has(#erpel-order-history-sync-btn.htmx-request) .modal-card-head .delete,
#order-history-sync-modal:has(#erpel-order-history-sync-btn.htmx-request) #erpel-order-history-sync-cancel {
  pointer-events: none;
  opacity: 0.5;
}

.erpel-orders .button .htmx-indicator {
  display: none;
}

.erpel-orders .button.htmx-request .htmx-indicator {
  display: inline-flex;
}

.erpel-orders .button.htmx-request .icon:not(.htmx-indicator) {
  display: none;
}

#erpel-order-sync-all-btn.htmx-request,
#erpel-order-history-sync-btn.htmx-request,
#erpel-order-live-sync-btn.htmx-request,
#erpel-order-carrier-sync-btn.htmx-request,
[id^='erpel-shipment-carrier-sync-'].htmx-request {
  pointer-events: none;
  opacity: 0.75;
}

.erpel-orders-sync-all-form {
  display: inline;
}

.erpel-orders-modal-actions {
  width: 100%;
  gap: 0.5rem;
}

.erpel-order-detail-title {
  gap: 0.35rem;
  flex-wrap: wrap;
}

.erpel-order-provider-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.35rem;
}

.erpel-order-detail-distributor {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.erpel-order-detail-distributor .erpel-order-provider-logo {
  margin-right: 0;
}

.erpel-order-carrier-cell .erpel-order-provider-logo {
  margin-right: 0.35rem;
}

.erpel-order-meta-tag {
  border: 1px solid var(--erpel-black-a8);
  cursor: default;
  font-weight: 500;
}

.erpel-order-tracking-url {
  max-width: 18rem;
  overflow-wrap: anywhere;
}

.erpel-order-line-actions-cell {
  white-space: nowrap;
  vertical-align: middle;
}

.erpel-order-line-actions {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.erpel-order-line-actions > .button,
.erpel-order-line-action-form {
  flex: 0 0 auto;
}

.erpel-order-header-title-row {
  display: flex;
  flex-wrap: wrap;
  /* Title + (N/M fertig) share a text baseline; icons are centered separately. */
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  overflow: visible;
}

.erpel-order-header-sync-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 0.35rem 0.55rem;
  margin-left: 0.15rem;
  /* Room for status corners outside the tag box (does not affect title baseline). */
  padding-right: 0.35rem;
  padding-bottom: 0.35rem;
  margin-bottom: -0.35rem;
  overflow: visible;
}

.erpel-order-header-sync-badges .erpel-sourcing-provider-activity {
  margin-top: 0;
  overflow: visible;
}

/*
 * Favicon tiles: no sourcing strip bottom padding (that pulled icons down).
 * Status corners stay absolute on the tile after alignment.
 */
.erpel-order-header-sync-badges .erpel-sourcing-provider-activity-tags {
  gap: 0.75rem;
  padding: 0 0.85rem 0 0;
  align-items: center;
  overflow: visible;
}

.erpel-order-header-sync-badges .erpel-sourcing-provider-tag {
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.2rem 0.3rem !important;
}

/* Sibling of the icon strip — baseline matches the h1 title text. */
.erpel-order-header-title-row > .erpel-sourcing-progress {
  font-size: var(--bulma-size-7);
  line-height: 1.25;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* P09.9.5 — Mini-Stepper in der Auftragsliste (keine Balken, nur Punkte je Phase). */
.erpel-mini-stepper {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.erpel-mini-stepper__step {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid var(--erpel-info-text);
  background: transparent;
}

.erpel-mini-stepper__step.is-started {
  background: linear-gradient(90deg, var(--erpel-info-text) 50%, transparent 50%);
}

.erpel-mini-stepper__step.is-finished {
  background: var(--erpel-info-text);
}

/* P09.9.5 — Abschnitts-Tabs im Arbeitsraum und Auftragskontext in Kreuzansichten. */
.erpel-workspace-tabs.tabs {
  margin-bottom: 1rem;
}

.erpel-order-context-bar .tag .delete {
  margin-left: 0.4rem;
}

.erpel-order-create-page.modal-card {
  width: auto;
  max-width: 48rem;
  margin: 0;
}

.erpel-queue-row.is-context-order {
  outline: 2px solid var(--erpel-info-text);
  outline-offset: -2px;
  border-radius: 4px;
}

/* P09.9 GUI — Auftragsdetail: kompakter Kopf, Faktenzeile, Phasen-Chips, Leiste „Als Nächstes“. */
.erpel-ws-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.erpel-ws-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 0;
}

.erpel-ws-title .title {
  line-height: 1.25;
}

.erpel-ws-back {
  color: var(--erpel-text-muted, #7a7a7a);
}

.erpel-ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.erpel-ws-actions form {
  display: inline-flex;
}

.erpel-ws-actions .erpel-icon-button--solo {
  min-height: 2rem;
}

.erpel-ws-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.erpel-ws-fact {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.erpel-ws-fact > span {
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.erpel-ws-fact strong {
  font-weight: 600;
  white-space: nowrap;
}

.erpel-ws-fact--wide strong {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erpel-ws-qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.erpel-ws-qty .input {
  width: 4.5rem;
}


.erpel-ws-flow {
  padding: 0.75rem 1rem;
}

.erpel-phase-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.erpel-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--erpel-border-subtle);
  border-radius: 999px;
  white-space: nowrap;
}

.erpel-phase-chip.is-next {
  border-color: var(--erpel-info-text);
}

.erpel-phase-chip__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid var(--erpel-info-text);
}

.erpel-phase-chip.is-started .erpel-phase-chip__dot {
  background: linear-gradient(90deg, var(--erpel-info-text) 50%, transparent 50%);
}

.erpel-phase-chip.is-finished .erpel-phase-chip__dot {
  background: var(--erpel-info-text);
}

.erpel-phase-chip.is-finished .erpel-phase-chip__name {
  color: var(--erpel-text-muted, #7a7a7a);
}

.erpel-phase-chip__edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--erpel-text-muted, #7a7a7a);
  cursor: pointer;
  line-height: 1;
}

.erpel-phase-chip__edit:hover {
  color: var(--erpel-info-text);
}

.erpel-ws-flow .erpel-phase-editor {
  margin-top: 0.5rem;
}

.erpel-ws-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--erpel-border-subtle);
  font-size: 0.85rem;
}

.erpel-ws-next .erpel-icon-button {
  min-height: 1.9rem;
}

/* P09.9 GUI — Material-Tabelle: eine Zeile je Bauteil, Aktionen als Icons mit Tooltip. */
.erpel-material-table td {
  vertical-align: middle;
}

.erpel-cell-ellipsis {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-nowrap {
  white-space: nowrap;
}

.erpel-inline-qty,
.erpel-inline-actions,
.erpel-inline-add {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
}

.erpel-inline-qty .input {
  width: 4.25rem;
}

.erpel-inline-add .input {
  width: 7rem;
}

.erpel-inline-qty .erpel-icon-button--solo,
.erpel-inline-actions .erpel-icon-button--solo,
.erpel-inline-add .erpel-icon-button--solo {
  min-height: 1.75rem;
  height: 1.75rem;
}

/* P09.9 GUI — Materialkalkulation: Anteil wie in der Typ-Rangliste der Stückliste. */
.erpel-costing-share {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 8rem;
}

/* Auftragsbereich (außer Orderverfolgung): flache Abschnitte statt Kästen, wie die Orderverfolgung. */
.erpel-flat-section {
  margin-bottom: 1.25rem;
}

.erpel-flat-section + .erpel-flat-section {
  padding-top: 1rem;
  border-top: 1px solid var(--erpel-border-subtle);
}

.erpel-flat-section > .title.is-6:first-child,
.erpel-flat-section > h2:first-child,
.erpel-flat-section > h3:first-child {
  margin-bottom: 0.5rem;
}

.erpel-ws-flow.erpel-flat-section {
  padding: 0;
}

/* Auftragsliste (Muster Orderverfolgung): Spaltenbreiten, Ablauf-Zelle. */
.erpel-production-orders-table .erpel-col-origin {
  overflow: visible;
  text-align: center;
  width: 6.5rem;
}

.erpel-production-orders-table .erpel-filter-row th {
  overflow: visible;
}

.erpel-production-orders-table .erpel-col-number {
  width: 5rem;
  white-space: nowrap;
}

.erpel-production-orders-table .erpel-col-title {
  max-width: 22rem;
}

.erpel-production-orders-table td.erpel-col-boards,
.erpel-production-orders-table td.erpel-col-pos,
.erpel-production-orders-table td.erpel-col-due_date,
.erpel-production-orders-table td.erpel-col-status,
.erpel-production-orders-table td.erpel-col-material {
  white-space: nowrap;
}

.erpel-phases-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Stückzahl: Wert wie die anderen Fakten, Bearbeiten über Stift (Formular als kleines Overlay). */
.erpel-ws-qty {
  position: relative;
}

.erpel-ws-qty > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}

.erpel-ws-qty > summary::-webkit-details-marker {
  display: none;
}

.erpel-ws-qty__pen {
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.8rem;
}

.erpel-ws-qty__form {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
  padding: 0.35rem;
  border: 1px solid var(--erpel-border);
  border-radius: var(--erpel-radius, 4px);
  background: var(--erpel-surface, #fff);
}

/* Feste Höhe: Eingabe und quadratischer Speichern-Button gleich hoch, unabhängig von der
   Schriftgröße der Faktenzeile. */
.erpel-ws-qty__form .input {
  width: 5rem;
  height: 2rem;
  font-size: 0.875rem;
}

.erpel-ws-qty__form .erpel-icon-button--solo {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  flex: 0 0 2rem;
}

.erpel-ws-qty__form .erpel-icon-button--solo .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  font-size: 1.2rem;
}

/* Phasen-Editor: eine kompakte Zeile, Status als Icon-Buttons, Dauer mit Speichern-Button. */
.erpel-phase-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--erpel-border-subtle);
  border-radius: var(--erpel-radius, 4px);
  font-size: 0.8rem;
}

.erpel-phase-editor[hidden] {
  display: none;
}

.erpel-phase-editor__name {
  font-weight: 600;
  min-width: 6.5rem;
}

.erpel-phase-editor__group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.erpel-phase-editor__group .erpel-icon-button--solo {
  min-height: 1.75rem;
  height: 1.75rem;
}

.erpel-phase-editor__duration {
  width: 4.5rem;
}

.erpel-phase-editor__reason {
  width: 12rem;
}

.erpel-phase-editor__label,
.erpel-phase-editor__unit {
  color: var(--erpel-text-muted, #7a7a7a);
}

/* P09.9 Planungsmodell — Gantt im Einzelauftrag. */
.erpel-gantt {
  position: relative;
  font-size: 0.75rem;
}

.erpel-gantt__row,
.erpel-gantt__overlay {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0 0.5rem;
  align-items: center;
}

.erpel-gantt__row {
  min-height: 1.45rem;
}

.erpel-gantt__row--head {
  min-height: 1.1rem;
}

.erpel-gantt__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--erpel-text, #363636);
}

.erpel-gantt__row.is-sub .erpel-gantt__label {
  padding-left: 0.9rem;
  color: var(--erpel-text-muted, #7a7a7a);
}

.erpel-gantt__track {
  position: relative;
  height: 1.2rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--erpel-border-subtle) 0,
    var(--erpel-border-subtle) 1px,
    transparent 1px,
    transparent calc(100% / var(--erpel-gantt-days, 14))
  );
}

.erpel-gantt__weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--erpel-border-subtle) 70%, transparent);
}

.erpel-gantt__axis {
  position: relative;
  height: 1rem;
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.7rem;
  white-space: nowrap;
}

.erpel-gantt__axis > span {
  position: absolute;
  top: 0;
  padding-left: 0.2rem;
  border-left: 1px solid var(--erpel-border);
}

.erpel-gantt__row.is-sub .erpel-gantt__track {
  height: 0.85rem;
}

.erpel-gantt__bar {
  --erpel-cal-phase: var(--erpel-chart-2);
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 0.3rem;
  border: 1px solid var(--erpel-cal-phase);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--erpel-cal-phase) 22%, white);
  white-space: nowrap;
  font-size: 0.68rem;
}

.erpel-gantt__bar {
  min-width: 1.1rem;
}

.erpel-gantt__bar.is-finished {
  justify-content: center;
  padding: 0 0.1rem;
}

.erpel-gantt__bar > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.erpel-gantt__bar.is-pending {
  background: transparent;
  border-style: dashed;
}

.erpel-gantt__bar.is-finished {
  border-color: color-mix(in srgb, var(--erpel-cal-phase) 45%, var(--erpel-border-subtle, #dbdbdb));
  background: color-mix(in srgb, var(--erpel-surface-muted, #f5f5f5) 85%, var(--erpel-cal-phase));
  color: var(--erpel-text-muted, #7a7a7a);
}

/* Läuft: kräftiger Rand, bis heute vergangener Anteil voll gefüllt, Rest hell. */
.erpel-gantt__bar.is-started {
  border-width: 2px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--erpel-cal-phase) 70%, white) var(--erpel-bar-progress, 0%),
    color-mix(in srgb, var(--erpel-cal-phase) 15%, white) var(--erpel-bar-progress, 0%)
  );
  font-weight: 600;
}

.erpel-gantt__done {
  flex: 0 0 auto;
  color: var(--erpel-text, #363636);
  font-size: 0.8rem;
  line-height: 1;
}

.erpel-gantt__legend-bar {
  --erpel-cal-phase: var(--erpel-chart-2);
  display: inline-block;
  width: 1.4rem;
  height: 0.6rem;
  margin: 0 0.2rem 0 0.6rem;
  border: 1px solid var(--erpel-cal-phase);
  border-radius: 0.15rem;
  vertical-align: middle;
}

.erpel-gantt__legend-bar:first-child {
  margin-left: 0;
}

.erpel-gantt__legend-bar.is-pending {
  border-style: dashed;
}

.erpel-gantt__legend-bar.is-started {
  border-width: 2px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--erpel-cal-phase) 70%, white) 50%,
    color-mix(in srgb, var(--erpel-cal-phase) 15%, white) 50%
  );
}

.erpel-gantt__legend-bar.is-finished {
  border-color: color-mix(in srgb, var(--erpel-cal-phase) 45%, var(--erpel-border-subtle, #dbdbdb));
  background: color-mix(in srgb, var(--erpel-surface-muted, #f5f5f5) 85%, var(--erpel-cal-phase));
}

.erpel-gantt__bar.erpel-cal-bar--phase-po {
  --erpel-cal-phase: var(--erpel-chart-3);
}

.erpel-gantt__marker {
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  transform: translateY(-50%) rotate(45deg);
  background: var(--erpel-chart-4);
  border: 1px solid var(--erpel-surface, #fff);
}

.erpel-gantt__overlay {
  position: absolute;
  inset: 1.1rem 0 1.4rem 0;
  pointer-events: none;
}

.erpel-gantt__lines {
  position: relative;
  height: 100%;
}

.erpel-gantt__today,
.erpel-gantt__milestone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
}

.erpel-gantt__today {
  border-left: 1px dotted var(--erpel-text-muted, #7a7a7a);
}

.erpel-gantt__milestone {
  border-left: 2px solid var(--erpel-chart-6);
}

.erpel-gantt__legend {
  margin: 0.35rem 0 0;
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.7rem;
}

.erpel-gantt__legend-milestone,
.erpel-gantt__legend-marker {
  display: inline-block;
  margin: 0 0.2rem 0 0.6rem;
  vertical-align: middle;
}

.erpel-gantt__legend-milestone {
  width: 0;
  height: 0.75rem;
  border-left: 2px solid var(--erpel-chart-6);
}

.erpel-gantt__legend-marker {
  width: 0.45rem;
  height: 0.45rem;
  transform: rotate(45deg);
  background: var(--erpel-chart-4);
}

/* Warteschlange (P09.9 Planungsmodell): Tagesraster, Beschaffungslinie bis „Material bereit“,
   Wartestrecke, ein Fertigungsblock je Auftrag. Kopf, Zeilen und Raster teilen ein Grid. */
.erpel-q-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 20rem) 4.5rem 6.5rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: center;
  padding: 0 0.5rem;
}

.erpel-q-head {
  padding-bottom: 0.25rem;
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.75rem;
}

.erpel-q-days {
  display: grid;
  grid-template-columns: repeat(var(--erpel-q-days, 14), minmax(0, 1fr));
  font-size: 0.68rem;
  white-space: nowrap;
}

.erpel-q-days > span {
  overflow: visible;
  padding-left: 0.15rem;
  border-left: 1px solid var(--erpel-border-subtle);
}

.erpel-q-days > .is-weekend {
  color: var(--erpel-border);
}

.erpel-q-days > .is-today {
  color: var(--erpel-danger-text);
  font-weight: 600;
}

.erpel-q-body {
  position: relative;
}

.erpel-q-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.erpel-q-lines {
  position: relative;
  align-self: stretch;
  background-image: repeating-linear-gradient(
    to right,
    var(--erpel-border-subtle) 0,
    var(--erpel-border-subtle) 1px,
    transparent 1px,
    transparent calc(100% / var(--erpel-q-days, 14))
  );
}

.erpel-q-weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--erpel-surface-subtle, #f7f7f7);
  opacity: 0.8;
}

.erpel-q-today {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1.5px dotted var(--erpel-danger-text);
}

#erpel-queue-rows {
  position: relative;
}

.erpel-queue-row {
  padding: 0;
  border-top: 1px solid var(--erpel-border-subtle);
}

.erpel-q-row {
  min-height: 2.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.erpel-q-order {
  min-width: 0;
}

.erpel-q-title {
  overflow: hidden;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-q-sub {
  overflow: hidden;
  padding-left: 1.75rem;
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-q-date {
  font-size: 0.8rem;
  white-space: nowrap;
}

.erpel-q-date.is-done {
  color: var(--erpel-chart-3);
}

.erpel-q-track {
  position: relative;
  height: 1.4rem;
}

.erpel-q-proc,
.erpel-q-wait {
  position: absolute;
  top: 50%;
  height: 0;
}

.erpel-q-proc {
  border-top: 2px solid var(--erpel-chart-7);
  transform: translateY(-1px);
}

.erpel-q-proc.is-done {
  border-top-color: var(--erpel-border);
}

.erpel-q-wait {
  border-top: 2px dotted var(--erpel-chart-6);
  transform: translateY(-1px);
}

.erpel-q-milestone {
  position: absolute;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  transform: translateY(-50%) rotate(45deg);
  border: 2px solid var(--erpel-chart-6);
  background: var(--erpel-surface, #fff);
}

.erpel-q-milestone.is-done {
  background: var(--erpel-chart-6);
}

.erpel-q-block {
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  display: flex;
  gap: 1px;
  overflow: hidden;
  border-radius: 0.2rem;
}

.erpel-q-seg {
  --erpel-cal-phase: var(--erpel-chart-2);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--erpel-cal-phase);
  background: color-mix(in srgb, var(--erpel-cal-phase) 15%, white);
  font-size: 0.65rem;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  align-content: center;
}

.erpel-q-seg:first-child {
  border-radius: 0.2rem 0 0 0.2rem;
}

.erpel-q-seg:last-child {
  border-radius: 0 0.2rem 0.2rem 0;
}

.erpel-q-seg:only-child {
  border-radius: 0.2rem;
}

.erpel-q-seg.is-pending {
  border-style: dashed;
}

.erpel-q-seg.is-started {
  border-width: 2px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--erpel-cal-phase) 70%, white) var(--erpel-bar-progress, 0%),
    color-mix(in srgb, var(--erpel-cal-phase) 15%, white) var(--erpel-bar-progress, 0%)
  );
  font-weight: 600;
}

.erpel-q-seg.is-finished {
  border-color: color-mix(in srgb, var(--erpel-cal-phase) 45%, var(--erpel-border-subtle, #dbdbdb));
  background: color-mix(in srgb, var(--erpel-surface-muted, #f5f5f5) 85%, var(--erpel-cal-phase));
  color: var(--erpel-text-muted, #7a7a7a);
}

.erpel-q-section {
  margin: 0;
  padding: 0.6rem 0.5rem 0.2rem;
  border-top: 1px solid var(--erpel-border-subtle);
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.75rem;
  font-weight: 600;
}

.erpel-q-legend {
  padding: 0 0.5rem;
}

.erpel-q-legend-proc,
.erpel-q-legend-wait {
  display: inline-block;
  width: 1.4rem;
  height: 0;
  margin: 0 0.2rem 0 0.6rem;
  vertical-align: middle;
}

.erpel-q-legend-proc {
  margin-left: 0;
  border-top: 2px solid var(--erpel-chart-7);
}

.erpel-q-legend-wait {
  border-top: 2px dotted var(--erpel-chart-6);
}

.erpel-gantt__legend-milestone.erpel-q-legend-milestone {
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--erpel-chart-6);
  transform: rotate(45deg);
}

/* Auftrags-Gantt: Wartezeit auf die Werkstatt und die Aufträge, die sie solange belegen. */
.erpel-gantt__wait {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 2px dotted var(--erpel-chart-6);
  transform: translateY(-1px);
}

.erpel-gantt__bar.is-blocked {
  border-color: var(--erpel-border);
  background: repeating-linear-gradient(
    135deg,
    var(--erpel-surface-subtle, #f7f7f7) 0,
    var(--erpel-surface-subtle, #f7f7f7) 4px,
    var(--erpel-border-subtle) 4px,
    var(--erpel-border-subtle) 8px
  );
  color: var(--erpel-text-muted, #7a7a7a);
}

/* Bedarfsliste: Ampel-Zusammenfassung links, Gesamtreservierung rechts. */
.erpel-material-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.erpel-material-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

/* „Zeile nur für diesen Auftrag“: eine Zeile, Felder in Toolbar-Höhe. */
.erpel-material-add {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.erpel-material-add__label {
  color: var(--erpel-text-muted, #7a7a7a);
  font-size: 0.75rem;
  white-space: nowrap;
}

.erpel-material-add .input,
.erpel-material-add .erpel-searchable-select input {
  height: 2rem;
}

.erpel-material-add__pn {
  width: 18rem;
}

.erpel-material-add__qty {
  width: 4rem;
}

.erpel-material-add .erpel-icon-button--solo {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
}

.erpel-material-add__pn .erpel-searchable-select {
  width: 100%;
}

/* Bedarfsliste: Gruppen „Nur für diesen Auftrag“ / „Aus der Stückliste“. */
.erpel-material-table .erpel-material-group > th {
  padding-top: 0.6rem;
  border-bottom: 1px solid var(--erpel-border);
  background: var(--erpel-surface);
  color: var(--erpel-text, #363636);
  font-size: 0.75rem;
  font-weight: 600;
}

.erpel-material-table tr.is-order-line > td:first-child {
  box-shadow: inset 3px 0 0 var(--erpel-chart-6);
}

/* Bestückung: Buchungszeile kompakt, Tabelle schmal. */
.erpel-build-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.erpel-build-bar__qty {
  width: 6rem;
}

.erpel-build-bar__note {
  width: 16rem;
}

.erpel-build-bar__progress {
  margin-left: auto;
}

.erpel-build-table__extra {
  width: 5rem;
  height: 1.75rem;
}

.erpel-build-history {
  margin: 0 0 1rem;
}

.erpel-build-history > li {
  padding: 0.2rem 0;
  border-top: 1px solid var(--erpel-border-subtle);
}

.erpel-build-history summary {
  cursor: pointer;
}

.erpel-build-history__lines {
  margin: 0.25rem 0 0.25rem 1.25rem;
  columns: 3 14rem;
}

/* Arbeitsraum Bestellungen: Ablauf in drei Schritten. */
.erpel-flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.erpel-flow-steps > li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  border-top: 3px solid var(--erpel-border-subtle);
}

.erpel-flow-steps > li > div {
  display: flex;
  flex-direction: column;
}

.erpel-flow-steps > li.is-active {
  border-top-color: var(--erpel-info-text, #3273dc);
}

.erpel-flow-steps > li.is-done {
  border-top-color: var(--erpel-chart-3);
  color: var(--erpel-text-muted, #7a7a7a);
}

.erpel-flow-steps__n {
  display: inline-flex;
  flex: 0 0 1.4rem;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--erpel-border-subtle);
  font-weight: 600;
}

.erpel-flow-steps > li.is-active .erpel-flow-steps__n {
  background: var(--erpel-info-text, #3273dc);
  color: var(--erpel-surface, #fff);
}

/* Wareneingang: offene Bestellungen, gewählte Zeile markiert. */
.erpel-receivable-table tr.is-selected-row > td {
  background: var(--erpel-info-bg, #eef6fc);
}

.erpel-receivable-table .erpel-filter-row .input,
.erpel-receivable-table .erpel-filter-row .erpel-searchable-select {
  min-width: 9rem;
}

/* Auftragskopf entzerrt: Chips und „Als Nächstes“ in einer Zeile, Legende als Aufklapper. */
.erpel-ws-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
}

.erpel-ws-status-row > .erpel-phase-steps {
  flex: 1 1 auto;
  margin: 0;
}

.erpel-ws-status-row > .erpel-ws-next {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.erpel-ws-fact--note strong {
  font-size: 0.8rem;
  font-weight: 400;
}

.erpel-gantt__legend-pop {
  position: relative;
  font-size: 0.7rem;
}

.erpel-gantt__legend-pop > summary {
  color: var(--erpel-text-muted, #7a7a7a);
  cursor: pointer;
  list-style: none;
}

.erpel-gantt__legend-pop > summary::-webkit-details-marker {
  display: none;
}

.erpel-gantt__legend-pop[open] > .erpel-gantt__legend {
  position: absolute;
  z-index: 6;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 32rem;
  margin: 0.2rem 0 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--erpel-border);
  border-radius: 0.25rem;
  background: var(--erpel-surface, #fff);
  white-space: normal;
}

.erpel-gantt__row--head > .erpel-gantt__label {
  overflow: visible;
}