/* Server tables (P04.9) */

/* Body-only font roles (thead stays UI sans via primitives.css). */
.erpel-data-table tbody td.erpel-col-font-id,
.erpel-detail-table tbody td.erpel-col-font-id,
table.results tbody td.erpel-col-font-id {
  font-family: var(--erpel-font-role-id);
}

.erpel-data-table tbody td.erpel-col-font-mpn,
.erpel-detail-table tbody td.erpel-col-font-mpn,
table.results tbody td.erpel-col-font-mpn {
  font-family: var(--erpel-font-role-mpn);
}

.erpel-data-table tbody td.erpel-col-font-metric,
.erpel-detail-table tbody td.erpel-col-font-metric,
table.results tbody td.erpel-col-font-metric {
  font-family: var(--erpel-font-role-metric);
}

.erpel-data-table tbody td.erpel-col-font-hash,
.erpel-detail-table tbody td.erpel-col-font-hash,
table.results tbody td.erpel-col-font-hash {
  font-family: var(--erpel-font-role-hash);
}

.erpel-data-table tbody td.erpel-col-font-code,
.erpel-detail-table tbody td.erpel-col-font-code,
table.results tbody td.erpel-col-font-code {
  font-family: var(--erpel-font-role-code);
}

/* Bulma .is-striped targets tbody tr; separate border-collapse + transparent td hides stripes. */
.erpel-data-table.is-striped tbody tr:nth-child(even) > td,
.erpel-detail-table.is-striped tbody tr:nth-child(even) > td,
.erpel-config-table.is-striped tbody tr:nth-child(even) > td {
  background-color: var(--bulma-table-striped-row-even-background-color);
}

.is-hoverable.erpel-data-table.is-striped tbody tr:nth-child(even):hover > td,
.is-hoverable.erpel-detail-table.is-striped tbody tr:nth-child(even):hover > td,
.is-hoverable.erpel-config-table.is-striped tbody tr:nth-child(even):hover > td {
  background-color: var(--bulma-table-striped-row-even-hover-background-color);
}

/*
 * Search expand sits on --erpel-surface-muted (#fafafa). Odd cells stay transparent
 * elsewhere so the panel shows through; here that muted grey ≈ Bulma even-stripe
 * (scheme-main-bis ~98%), so zebra vanishes. Opaque surface on odd rows + thead.
 */
.part-detail-embed .erpel-detail-table.is-striped > thead > tr > th,
.erpel-detail-row .erpel-detail-table.is-striped > thead > tr > th,
.part-detail-embed .erpel-detail-table.is-striped > tbody > tr:nth-child(odd) > td,
.erpel-detail-row .erpel-detail-table.is-striped > tbody > tr:nth-child(odd) > td {
  background-color: var(--erpel-surface);
}

/* data_table thead borders — kill Bulma 2px; one line with or without filter row. */
.erpel-table-frame .erpel-data-table,
.erpel-config-panel .erpel-data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.erpel-table-frame .erpel-data-table > thead > tr > th,
.erpel-config-panel .erpel-data-table > thead > tr > th {
  border-bottom: none;
}

.erpel-table-frame .erpel-data-table > thead > tr:first-child > th,
.erpel-config-panel .erpel-data-table > thead > tr:first-child > th {
  /* Opaque: sticky/scroll must not show tbody through the header. */
  background-color: var(--erpel-table-head-bg);
  border-bottom: 1px solid var(--erpel-black-a8);
  box-shadow: none;
}

.erpel-table-frame .erpel-data-table > thead > tr:first-child:last-child > th,
.erpel-config-panel .erpel-data-table > thead > tr:first-child:last-child > th {
  border-bottom: 1px solid var(--erpel-black-a12);
}

.erpel-table-frame .erpel-data-table > thead > tr.erpel-filter-row > th,
.erpel-config-panel .erpel-data-table > thead > tr.erpel-filter-row > th {
  background-color: var(--erpel-table-head-bg);
  border-bottom: 1px solid var(--erpel-black-a12);
  box-shadow: none;
  max-width: none;
  overflow: visible;
  white-space: normal;
}

.search-results-table {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 0;
  /* No overflow-x clip on the frame — it hid the "Pro Seite" select when the
     toolbar sat at the right edge. Expand width is constrained via expand cells. */
}

.search-results-table:has(> .erpel-search-scroll) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Title + Bemerkung + actions stay outside the scrollport.
 * relative + z-index above sticky thead so Check/Typ/Pro-Seite dropdowns
 * are not covered by the table header (thead z-index: 4–5). */
.search-results-table > .erpel-search-list-chrome {
  position: relative;
  flex: 0 0 auto;
  z-index: 30;
  align-items: flex-start;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  /* Match scroll content inset (pad + scrollbar gutter). */
  padding-inline-end: calc(1.25rem + 0.85rem);
  background-color: var(--erpel-surface);
  overflow: visible;
}

.erpel-search-scroll {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-inline-end: 1.25rem;
  padding-bottom: 2rem;
}

.search-results-table > .erpel-search-list-chrome .erpel-search-list-chrome__actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.search-results-table > .erpel-search-list-chrome .erpel-per-page {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.4rem;
  height: var(--erpel-table-toolbar-control-h, 2rem);
}

.search-results-table > .erpel-search-list-chrome .erpel-per-page__label {
  color: var(--erpel-text-muted);
  flex: 0 0 auto;
  font-size: var(--erpel-font-sm);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* Legacy bar toolbar (embeds / other tables): stay sticky under chrome if present. */
.search-results-table > .erpel-table-toolbar {
  position: sticky;
  top: var(--erpel-search-chrome-sticky-h, var(--erpel-search-title-sticky-h, 0px));
  z-index: 20;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  background-color: var(--erpel-surface);
  box-shadow: 0 1px 0 var(--erpel-surface);
}

/* Shared table toolbar — one row; meta + Pro Seite share the same 2rem band. */
.erpel-table-toolbar {
  --erpel-table-toolbar-control-h: 2rem;
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  max-width: 100%;
  min-height: var(--erpel-table-toolbar-control-h);
}

.erpel-table-toolbar__meta {
  align-items: center;
  color: var(--erpel-text-muted);
  display: flex;
  flex: 1 1 auto;
  font-size: var(--erpel-font-sm);
  height: var(--erpel-table-toolbar-control-h);
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpel-table-toolbar__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.5rem;
  height: var(--erpel-table-toolbar-control-h);
  justify-content: flex-end;
  max-width: none;
}

/* Native select + label — Bulma has-addons/select wrappers clipped to 0 in embeds. */
.erpel-table-toolbar .erpel-per-page {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.4rem;
  height: var(--erpel-table-toolbar-control-h);
  max-width: none;
}

.erpel-table-toolbar .erpel-per-page__label {
  color: var(--erpel-text-muted);
  flex: 0 0 auto;
  font-size: var(--erpel-font-sm);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* Chrome only for the unenhanced native select (not the clipped native under combobox). */
.erpel-table-toolbar .erpel-per-page__select:not(.erpel-searchable-select__native),
.erpel-search-list-chrome .erpel-per-page__select:not(.erpel-searchable-select__native) {
  appearance: none;
  background-color: var(--erpel-surface);
  border: 1px solid var(--erpel-border);
  border-radius: var(--erpel-radius);
  box-sizing: border-box;
  color: var(--erpel-text);
  flex: 0 0 4.75rem;
  font-size: var(--erpel-font-sm);
  height: var(--erpel-table-toolbar-control-h, 2rem);
  max-width: 4.75rem;
  min-width: 4.75rem;
  padding: 0 0.35rem;
  width: 4.75rem;
}

/* Search expand: same single-row toolbar as the main results table. */
.part-detail-embed .erpel-table-toolbar,
.erpel-detail-row .erpel-table-toolbar {
  align-items: center;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 100%;
  width: 100%;
}

.part-detail-embed .erpel-table-toolbar__actions,
.erpel-detail-row .erpel-table-toolbar__actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  max-width: none;
  min-width: auto;
  width: auto;
}

.search-results-table .table-container,
.erpel-table-frame .table-container {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

/* Sticky thead needs a non-scrolling overflow ancestor on wide viewports. */
.search-results-table .table-container,
.erpel-detail-panel .erpel-table-frame .table-container {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

/*
 * Narrow detail panel (rail + panel or search embed): horizontal scroll beats
 * crushed/clipped columns. Sticky thead cannot coexist with overflow-x scroll.
 */
@container erpel-detail-panel (max-width: 56rem) {
  .erpel-detail-panel .erpel-table-frame .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .erpel-detail-panel .erpel-detail-table {
    max-width: none;
    min-width: 44rem;
    width: 100%;
  }

  .erpel-detail-panel .erpel-detail-table > thead > tr:first-child > th,
  .erpel-detail-panel .erpel-detail-table > thead > tr.erpel-filter-row > th {
    position: static;
    top: auto;
  }
}

.search-results-table table.results {
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
  margin-inline: 0;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.search-results-table table.results > thead > tr > th {
  /* Bulma defaults to a heavy 2px bottom border on every th. */
  border-bottom: none;
}

.search-results-table table.results > thead > tr:first-child > th {
  background-color: var(--erpel-table-head-bg);
  border-bottom: 1px solid var(--erpel-black-a8);
  /* box-shadow would be clipped by overflow:hidden on th */
  box-shadow: none;
  position: sticky;
  /* Title lives outside .erpel-search-scroll — thead sticks to that port. */
  top: 0;
  z-index: 5;
}

.search-results-table table.results > thead > tr.erpel-filter-row > th {
  background-color: var(--erpel-table-head-bg);
  border-bottom: 1px solid var(--erpel-black-a12);
  box-shadow: none;
  overflow: visible;
  position: sticky;
  top: var(--erpel-thead-sort-h, 2.5rem);
  z-index: 4;
}

/* Lookup lists: toolbar still sits in the scrollport, above the thead. */
.search-results-table:has(> .erpel-table-toolbar) table.results > thead > tr:first-child > th {
  top: var(--erpel-search-toolbar-sticky-h, 2.5rem);
}

.search-results-table:has(> .erpel-table-toolbar) table.results > thead > tr.erpel-filter-row > th {
  top: calc(
    var(--erpel-search-toolbar-sticky-h, 2.5rem) + var(--erpel-thead-sort-h, 2.5rem)
  );
}

/* Opaque thead row backplane — reduces subpixel flash while sticky. */
.search-results-table table.results > thead > tr:first-child,
.search-results-table table.results > thead > tr.erpel-filter-row {
  background-color: var(--erpel-table-head-bg);
}

/*
 * Below ~56rem: horizontal scroll beats crushed/clipped columns.
 * Sticky thead cannot coexist with overflow-x scroll — disable it here.
 * Must follow the sticky rules above so position:static wins.
 */
@media (max-width: 56rem) {
  .search-results-table .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .search-results-table table.results {
    max-width: none;
    /* Compact metric columns (stock, Res., Wert) must stay readable when scrolling. */
    min-width: 54rem;
    width: 54rem;
  }

  .search-results-table table.results > thead > tr:first-child > th,
  .search-results-table table.results > thead > tr.erpel-filter-row > th {
    position: static;
    top: auto;
  }
}

/* Child combinators: do not style cells inside expanded part-detail embeds. */
.erpel-table-frame table.results > :is(thead, tbody) > tr > th,
.erpel-table-frame table.results > :is(thead, tbody) > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.erpel-table-frame table.results > tbody > tr.erpel-detail-row > td {
  /*
   * Lock expand cell to the table's fixed layout width. width/max-width:0 with
   * colspan is the standard trick: cell still spans all columns, but content
   * cannot inflate the table. overflow-x:visible — horizontal clip previously
   * hid the nested Pro Seite select at the right edge; embed toolbar stays
   * nowrap with a visible Pro-Seite select.
   */
  box-sizing: border-box;
  max-width: 0;
  overflow-x: visible;
  overflow-y: visible;
  text-overflow: unset;
  white-space: normal;
  vertical-align: top;
  width: 0;
}

.erpel-table-frame table.results > tbody > tr > td > a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.erpel-row-toggle-th,
.erpel-row-toggle-cell {
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* Column widths: keep id/qty columns usable; text columns share the rest. */
.erpel-col-cntxpn {
  width: 7.5rem;
  min-width: 5.5rem;
  max-width: 10rem;
  white-space: nowrap;
}

/* Compact columns: fixed rem widths sized for label + sort icon + cell padding.
   Prefer width over min-width so medium viewports can shrink slightly instead of
   crushing MPN/Manufacturer/Beschreibung; overflow still ellipsizes long values.
   Extra table space goes to text columns (mpn/description/…). */
.erpel-col-footprint {
  width: 9.5rem;
  white-space: nowrap;
}

.erpel-col-price {
  width: 8.5rem;
  white-space: nowrap;
}

.erpel-col-stock {
  width: 5.5rem;
  white-space: nowrap;
}

.erpel-col-reserved {
  width: 5.5rem;
  white-space: nowrap;
}

.erpel-col-stock_value {
  width: 9.5rem;
  white-space: nowrap;
}

.erpel-col-percent {
  /* "Projektanteil" + sort icon — wider than Stock. */
  width: 9.5rem;
  white-space: nowrap;
}

.erpel-col-mpn,
.erpel-col-manufacturer,
.erpel-col-customer,
.erpel-col-project,
.erpel-col-project_part,
.erpel-col-design_item_id {
  /* No max-width: it crushed the 1%-width columns to ~0 in narrow viewports. */
  min-width: 0;
  width: auto;
}

/* Mono roles on data cells only — thead stays uniform UI sans (see primitives). */
.search-results-table tbody .erpel-col-mpn {
  font-family: var(--erpel-font-role-mpn);
}

.search-results-table tbody .erpel-col-price,
.search-results-table tbody .erpel-col-stock,
.search-results-table tbody .erpel-col-percent,
.search-results-table tbody .erpel-col-reserved,
.search-results-table tbody .erpel-col-stock_value {
  font-family: var(--erpel-font-role-metric);
}

tbody .erpel-col-design_item_id {
  font-family: var(--erpel-font-role-id);
}

.erpel-bom-table tbody .erpel-col-revision {
  font-family: var(--erpel-font-role-hash);
}

.erpel-col-description {
  min-width: 0;
  width: auto;
}

/* Stückliste (BOM): Cntx P/N and Revision are short; design + description use the rest. */
.erpel-bom-table {
  /* Fixed metric cols + room for Design Item Id / Beschreibung (detail + embed). */
  min-width: 54rem;
}

.erpel-bom-table .erpel-col-cntxpn {
  max-width: 8rem;
  min-width: 0;
  width: 7.5rem;
}

.erpel-bom-table .erpel-col-design_item_id {
  min-width: 8rem;
  width: 12%;
}

.erpel-bom-table .erpel-col-description {
  min-width: 10rem;
  width: auto;
}

.erpel-bom-table .erpel-col-qty_per_board {
  /* Header "Anz./PCB" (8ch) + gap + sort icon; qty never wider. */
  box-sizing: border-box;
  max-width: calc(8ch + 1.5rem);
  min-width: calc(8ch + 1.5rem);
  overflow: visible;
  white-space: nowrap;
  width: calc(8ch + 1.5rem);
}

.erpel-bom-table .erpel-col-unit_price,
.erpel-bom-table .erpel-col-board_price {
  /* Room for formatted currency (same ballpark as search Preis). */
  box-sizing: border-box;
  max-width: 8.5rem;
  min-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 8.5rem;
}

.erpel-bom-table .erpel-col-revision {
  max-width: 6rem;
  min-width: 0;
  white-space: nowrap;
  width: 5.5rem;
}

.erpel-bom-table > thead .erpel-th-sort.erpel-col-cntxpn {
  max-width: 8rem;
}

.erpel-bom-table > thead .erpel-th-sort.erpel-col-qty_per_board {
  max-width: calc(8ch + 1.5rem);
  min-width: calc(8ch + 1.5rem);
  overflow: visible;
  white-space: nowrap;
  width: calc(8ch + 1.5rem);
}

.erpel-bom-table > thead .erpel-th-sort.erpel-col-unit_price,
.erpel-bom-table > thead .erpel-th-sort.erpel-col-board_price {
  max-width: 8.5rem;
  min-width: 8.5rem;
  white-space: nowrap;
  width: 8.5rem;
}

.erpel-bom-table > thead .erpel-th-sort.erpel-col-revision {
  max-width: 6rem;
}

.erpel-bom-table .erpel-filter-row .erpel-col-qty_per_board .erpel-column-filter,
.erpel-bom-table .erpel-filter-row .erpel-col-qty_per_board .erpel-filter-input,
.erpel-bom-table .erpel-filter-row .erpel-col-unit_price .erpel-column-filter,
.erpel-bom-table .erpel-filter-row .erpel-col-unit_price .erpel-filter-input,
.erpel-bom-table .erpel-filter-row .erpel-col-board_price .erpel-column-filter,
.erpel-bom-table .erpel-filter-row .erpel-col-board_price .erpel-filter-input,
.erpel-bom-table .erpel-filter-row .erpel-col-revision .erpel-column-filter,
.erpel-bom-table .erpel-filter-row .erpel-col-revision .erpel-filter-input {
  max-width: 100%;
  width: 100%;
}

/* Progressive disclosure: extra search columns only when the viewport is wide enough.
   Collapse to zero width instead of display:none — removed cells shrink the column
   model while the detail row's colspan still counts them, and table-layout:fixed
   then adds phantom columns that squeeze the visible ones on expand. */
@media (max-width: 1099.98px) {
  .search-results-table table.results :is(th, td).erpel-col-description:not(.erpel-col-pinned) {
    border-left-width: 0;
    border-right-width: 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    visibility: hidden;
    width: 0;
  }
}

@media (max-width: 1399.98px) {
  /* Footprint only — Preis and Wert (€) stay so stock_value and price stay paired. */
  .search-results-table table.results :is(th, td).erpel-col-footprint:not(.erpel-col-pinned) {
    border-left-width: 0;
    border-right-width: 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    visibility: hidden;
    width: 0;
  }
}

.erpel-table-frame tr.obsolete td {
  color: var(--erpel-gray-350);
}

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

.erpel-table-frame tr.is-missing-details td {
  background-color: color-mix(in srgb, var(--erpel-danger) 8%, var(--erpel-white));
}

.erpel-th-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.erpel-th-sort-link:hover {
  color: var(--erpel-brand);
}

.erpel-th-sort-idle {
  opacity: 0.35;
}

.erpel-filter-row th {
  padding-top: 0.35rem;
  padding-bottom: 0.5rem;
  vertical-align: middle;
  overflow: visible;
}

.search-results-table .erpel-filter-row .erpel-col-cntxpn,
.search-results-table .erpel-filter-row .erpel-col-stock,
.search-results-table .erpel-filter-row .erpel-col-reserved,
.search-results-table .erpel-filter-row .erpel-col-stock_value,
.search-results-table .erpel-filter-row .erpel-col-percent {
  overflow: visible;
}

/* Single rounded field; invert toggle is an overlay (no flex slot). */
.erpel-column-filter {
  background-color: var(--erpel-surface);
  border: 1px solid var(--erpel-border);
  border-radius: var(--erpel-radius);
  box-sizing: border-box;
  display: block;
  height: 1.85rem;
  max-width: 100%;
  min-height: 1.85rem;
  position: relative;
  width: 100%;
}

.erpel-col-cntxpn .erpel-column-filter,
.erpel-col-stock .erpel-column-filter,
.erpel-col-reserved .erpel-column-filter,
.erpel-col-percent .erpel-column-filter {
  /* Must shrink with the column; a hard min-width overflows and clips. */
  min-width: 0;
}

.erpel-column-filter.is-active {
  border-color: color-mix(in srgb, var(--erpel-brand) 45%, var(--erpel-border));
}

.erpel-column-filter[data-mode='include'].is-active {
  background-color: color-mix(in srgb, var(--erpel-brand) 8%, var(--erpel-white));
}

.erpel-column-filter[data-mode='exclude'] {
  background-color: color-mix(in srgb, var(--erpel-danger) 8%, var(--erpel-white));
  border-color: color-mix(in srgb, var(--erpel-danger) 40%, var(--erpel-border));
}

.erpel-column-filter[data-mode='exclude'].is-active {
  background-color: color-mix(in srgb, var(--erpel-danger) 12%, var(--erpel-white));
  border-color: color-mix(in srgb, var(--erpel-danger) 55%, var(--erpel-border));
}

.erpel-filter-input {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--erpel-text-strong);
  display: block;
  font-size: 0.8rem;
  height: 100%;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  outline: none;
  /* Always reserve clear + mode gutter so visibility never shifts columns. */
  padding: 0 2.85rem 0 0.5rem;
  text-align: inherit;
  width: 100%;
}

/* Column-filter selects: Bulma-style chevron (text inputs keep clear/mode overlays). */
.erpel-column-filter:has(> select.erpel-filter-input)::after {
  border: 0.125em solid var(--bulma-arrow-color, #7a7a7a);
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 0.5em;
  margin-top: -0.375em;
  pointer-events: none;
  position: absolute;
  right: 0.65em;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 0.5em;
  z-index: 2;
}

.erpel-column-filter:has(> select.erpel-filter-input) > select.erpel-filter-input {
  cursor: pointer;
  padding: 0 1.75rem 0 0.5rem;
}

/* Searchable combobox inside column filters (host replaces direct select child). */
.erpel-column-filter > .erpel-searchable-select.is-enhanced {
  box-sizing: border-box;
  display: block;
  font-size: 0.8rem;
  height: 100%;
  min-height: 0;
  position: relative;
  width: 100%;
}

.erpel-column-filter > .erpel-searchable-select.is-enhanced .erpel-searchable-select__input {
  appearance: none;
  /* Opaque — native select used to show through transparent inputs as a grey ghost. */
  background: var(--erpel-surface);
  border: 0;
  box-shadow: none;
  color: var(--erpel-text-strong);
  cursor: pointer;
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  height: 100%;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0 1.75rem 0 0.5rem;
  width: 100%;
}

.erpel-column-filter > .erpel-searchable-select.is-enhanced .erpel-searchable-select__input:focus {
  cursor: text;
}

.erpel-column-filter > .erpel-searchable-select.is-enhanced .erpel-searchable-select__panel {
  z-index: 50;
}

.erpel-table-toolbar .erpel-per-page > .erpel-searchable-select.is-enhanced,
.erpel-search-list-chrome .erpel-per-page > .erpel-searchable-select.is-enhanced {
  flex: 0 0 4.75rem;
  font-size: var(--erpel-font-sm);
  height: var(--erpel-table-toolbar-control-h, 2rem);
  max-width: 4.75rem;
  min-width: 4.75rem;
  width: 4.75rem;
}

.erpel-table-toolbar .erpel-per-page > .erpel-searchable-select.is-enhanced .erpel-searchable-select__input,
.erpel-search-list-chrome .erpel-per-page > .erpel-searchable-select.is-enhanced .erpel-searchable-select__input {
  background-color: var(--erpel-surface);
  border: 1px solid var(--erpel-border);
  border-radius: var(--erpel-radius);
  box-sizing: border-box;
  color: var(--erpel-text);
  font-size: inherit;
  height: 100%;
  padding: 0 1.35rem 0 0.35rem;
  width: 100%;
}

.erpel-table-toolbar .erpel-per-page > .erpel-searchable-select.is-enhanced::after,
.erpel-search-list-chrome .erpel-per-page > .erpel-searchable-select.is-enhanced::after {
  right: 0.55em;
}

.erpel-column-filter--end .erpel-filter-input {
  padding: 0 0.5rem 0 2.85rem;
  text-align: right;
}

.erpel-filter-input::placeholder {
  color: var(--erpel-gray-410);
  text-align: inherit;
}

.erpel-filter-input[type='search']::-webkit-search-decoration,
.erpel-filter-input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.erpel-filter-clear,
.erpel-filter-mode {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--erpel-radius);
  color: var(--erpel-gray-500);
  cursor: pointer;
  display: inline-flex;
  height: 1.35rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.35rem;
}

.erpel-filter-clear {
  opacity: 0;
  pointer-events: none;
  right: 1.5rem;
  transition: opacity 0.12s ease;
}

.erpel-filter-mode {
  opacity: 0;
  pointer-events: none;
  right: 0.15rem;
  transition: opacity 0.12s ease;
}

.erpel-column-filter--end .erpel-filter-clear {
  left: 1.5rem;
  right: auto;
}

.erpel-column-filter--end .erpel-filter-mode {
  left: 0.15rem;
  right: auto;
}

.erpel-column-filter.is-active .erpel-filter-clear {
  opacity: 1;
  pointer-events: auto;
}

.erpel-column-filter:hover .erpel-filter-mode,
.erpel-column-filter:focus-within .erpel-filter-mode,
.erpel-column-filter[data-mode='exclude'] .erpel-filter-mode {
  opacity: 1;
  pointer-events: auto;
}

.erpel-filter-clear:hover,
.erpel-filter-mode:hover {
  background-color: var(--erpel-black-a5);
  color: var(--erpel-brand);
}

.erpel-column-filter[data-mode='exclude'] .erpel-filter-mode {
  color: var(--erpel-danger);
}

.erpel-column-filter[data-mode='exclude'] .erpel-filter-mode:hover {
  background-color: color-mix(in srgb, var(--erpel-danger) 12%, var(--erpel-white));
  color: var(--erpel-danger-text-table);
}

.erpel-filter-clear .icon,
.erpel-filter-mode .icon {
  height: 1rem;
  width: 1rem;
}

.erpel-filter-clear .mdi,
.erpel-filter-mode .mdi {
  font-size: 0.9rem;
  line-height: 1;
}

.erpel-column-filter:focus-within {
  border-color: var(--erpel-brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erpel-brand) 25%, transparent);
}

.erpel-table-pagination .pagination-link.is-current {
  background-color: var(--erpel-brand);
  border-color: var(--erpel-brand);
  color: var(--erpel-white);
}

.erpel-row-toggle-cell {
  width: 2.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.erpel-row-toggle {
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
}

.erpel-detail-row > td {
  white-space: normal;
  background: var(--erpel-surface-muted);
  padding: 0.75rem 1rem 1rem;
}

.erpel-detail-embed-row {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
  overflow-y: visible;
  width: 100%;
}

.erpel-table-frame > input[type="hidden"] {
  display: none;
}

:root {
  --blink-opacity: 0.5;
}

.erpel-rfid-actions .buttons {
  flex-wrap: nowrap;
}

.erpel-rfid-btn.blink {
  animation: erpel-rfid-blink 1.5s ease-in-out infinite;
}

@keyframes erpel-rfid-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: var(--blink-opacity);
  }

  100% {
    opacity: 1;
  }
}