.records-page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
}

.records-page__main {
  flex: 1;
  min-width: 0;
}

.records-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-14);
  border: var(--border-width-thin) solid var(--color-box-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-panel);
}

.records-toolbar__search { flex: 0 1 var(--size-search-field); min-width: 0; }
.records-toolbar__spacer { flex: 1; }

.records-split {
  display: flex;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-6);
}

.records-list {
  display: flex;
  flex-direction: column;
  flex: none;
  width: calc(var(--size-record-list) - var(--space-page));
  min-height: 0;
}

.records-list > .bbn-segmented { margin: var(--space-0) var(--space-6) var(--space-8) var(--space-0); }

.records-list__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-0) var(--space-6) var(--space-130) var(--space-0);
}

.records-list__rows--with-image { gap: var(--space-5); }

.records-list__empty {
  margin: var(--space-0);
  padding: var(--space-16) var(--space-8);
  font-size: var(--font-size-13);
  color: var(--color-on-surface-muted);
}

.records-split__detail {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  margin-right: calc(-1 * var(--space-12));
  padding: var(--space-0) var(--space-6) var(--space-150) var(--space-22);
  scrollbar-gutter: stable; /* @flutter: entfällt – Scrollbar liegt über dem Inhalt */
}

.records-dialog__intro { margin: var(--space-0) var(--space-0) var(--space-16); }

/* Datensatz */
.record-detail {
  display: flex;
  flex-direction: column;
  max-width: var(--size-detail-max);
}

.record-detail--empty { color: var(--color-on-surface-muted); }

.record-detail__tabs {
  position: relative; /* Anker für „Reiter anpassen“ */
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-24) var(--space-0) var(--space-18) var(--space-30);
}

.record-detail__tabbar {
  position: relative;
  flex: 1;
  min-width: 0;
}

.record-detail__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-12);
}

.record-detail__section {
  flex: 1 1 calc(50% - var(--space-12));
  min-width: var(--size-section-min);
}

.record-detail__section--wide { flex-basis: 100%; }

/* „Felder hervorheben“ rechts neben den Reitern */
.record-detail__tabs > .bbn-menu { margin-bottom: var(--space-6); }

.record-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: var(--size-control-small);
  min-width: var(--size-control-slim);
  padding: var(--space-0) var(--space-10);
  border-radius: var(--radius-full);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.record-highlight:hover { color: var(--color-on-surface); background: var(--color-hover); }
.record-highlight--on { background: var(--color-surface-card); color: var(--color-on-surface); }

/* „2 Hinweise“ am Datensatz */
.record-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--size-control-medium);
  padding: var(--space-0) var(--space-10) var(--space-0) var(--space-11);
  border-radius: var(--radius-full);
  background: var(--color-hint-badge);
  color: var(--color-on-hint-badge);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.record-hint-pill:hover { background: var(--color-hint-badge-hover); }

.record-hints__title {
  padding: var(--space-4) var(--space-10) var(--space-6);
  font-size: var(--font-size-11-5);
  color: var(--color-on-surface-faint);
}

.record-hints__item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  font-size: var(--font-size-13-5);
}

.record-hints__label { flex: 1; min-width: 0; }

.record-hints__ignore {
  flex: none;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-surface-panel);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

.record-hints__ignore:hover { background: var(--color-hover); color: var(--color-on-surface); }

.record-hints__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
}

.record-hints__all:hover { background: var(--color-hover); }

/* Unsichtbare Messreihe für die Reiter. @flutter: TextPainter misst ohne Darstellung */
.tab-measure {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: var(--space-2);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Bereich, der mit BBN Light v2 kommt (Reiter in die Leiste geholt) */
.record-detail__upcoming {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--size-upcoming-card);
  margin: var(--space-0) var(--space-0) var(--space-8);
  padding: var(--space-28) var(--space-24);
  border-radius: var(--radius-md-plus);
  background: var(--color-surface-card);
  color: var(--color-on-surface-variant);
}

.record-detail__upcoming b { font-size: var(--font-size-16); color: var(--color-on-surface); }
.record-detail__upcoming p { margin: var(--space-0); font-size: var(--font-size-13-5); line-height: var(--line-height-normal); color: var(--color-on-surface-muted); }

/* Tabelle */
.record-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-6);
}

.record-table__name--locked { opacity: var(--opacity-locked); }

.record-table__tabs { margin: var(--space-0) var(--space-0) var(--space-14) var(--space-14); }

.record-table__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-right: calc(-1 * var(--space-12));
  padding: var(--space-0) var(--space-6) var(--space-150) var(--space-0);
  scrollbar-gutter: stable; /* @flutter: entfällt – Scrollbar liegt über dem Inhalt */
}

.record-table__note {
  margin: var(--space-14) var(--space-2) var(--space-0);
  font-size: var(--font-size-11-5);
  color: var(--color-on-surface-faint);
}

.record-table__muted { color: var(--color-on-object-article-muted); font-weight: var(--font-weight-regular); }
.bbn-data-table--customer .record-table__muted { color: var(--color-on-object-customer-muted); }
.bbn-data-table__row--selected .record-table__muted,
.bbn-data-table__row--selected .record-table__sub { color: var(--color-on-selected-muted); }

.record-table__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-table__sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-11-5);
  color: var(--color-on-object-article-muted);
}

.bbn-data-table--customer .record-table__sub { color: var(--color-on-object-customer-muted); }

.record-table__dot {
  flex: none;
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--radius-full);
  background: var(--color-on-object-article-muted);
}

.record-table__dot--ok { background: var(--color-success-text); }
.record-table__dot--warn { background: var(--color-warning-text); }
.bbn-data-table__row--selected .record-table__dot { background: var(--color-on-selected); }

.record-table__warn { display: inline-flex; color: var(--color-hint-text); }

.record-table__input {
  width: 100%;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border: var(--border-width-medium) solid var(--color-primary);
  border-radius: var(--radius-xs);
  background: var(--color-search-field);
  color: var(--color-on-field);
  font-size: var(--font-size-13);
  font-variant-numeric: tabular-nums;
  outline: none;
}

.record-table__input--end { text-align: end; }

/* Mini-Schalter in der Zelle */
.record-table__switch {
  position: relative;
  flex: none;
  width: var(--size-mini-switch-width);
  height: var(--size-mini-switch-height);
  border-radius: var(--radius-full);
  background: var(--color-mini-track);
  transition: background-color var(--duration-fast) var(--easing-standard); /* @flutter: Switch animiert selbst */
}

.record-table__switch-thumb {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: var(--size-mini-switch-thumb);
  height: var(--size-mini-switch-thumb);
  border-radius: var(--radius-full);
  background: var(--color-switch-thumb);
  transition: transform var(--duration-fast) var(--easing-standard); /* @flutter: Switch animiert selbst */
}

.record-table__switch--on { background: var(--color-primary); }
.record-table__switch--on .record-table__switch-thumb { transform: translateX(calc(var(--size-mini-switch-width) - var(--size-mini-switch-thumb) - 2 * var(--space-3))); }
.bbn-data-table__row--selected .record-table__switch { background: var(--color-inverse-hover); }

/* Wochentage in der Zelle */
.record-table__days { display: flex; gap: var(--space-3); }

.record-table__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-mini-day);
  height: var(--size-mini-day);
  border-radius: var(--radius-xs);
  background: var(--color-mini-day);
  color: var(--color-on-object-article-muted);
  font-size: var(--font-size-9-5);
  font-weight: var(--font-weight-bold);
}

.bbn-data-table--customer .record-table__day { color: var(--color-on-object-customer-muted); }
.record-table__day:hover { color: var(--color-on-object-article); }
.record-table__day--on,
.record-table__day--on:hover { background: var(--color-selected); color: var(--color-on-selected); }

.record-table__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-avatar-medium);
  height: var(--size-avatar-medium);
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--color-surface-card);
  color: var(--color-on-surface-muted);
}

.record-table__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Aktionen für die Auswahl */
.record-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--size-control-bulk);
  margin-bottom: var(--space-12);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--color-selected);
  color: var(--color-on-selected);
}

.record-bulk__count {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
}

.record-bulk__spacer { flex: 1; }

.record-bulk__clear,
.record-bulk__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--color-primary-deep);
  color: var(--color-on-primary);
}

.record-bulk__clear {
  width: var(--size-control-small);
  height: var(--size-control-small);
  margin-left: var(--space-4);
  border-radius: var(--radius-full);
}

.record-bulk__action {
  padding: var(--space-8) var(--space-14);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-medium);
}

.record-bulk__clear:hover,
.record-bulk__action:hover { background: var(--color-primary-deeper); }


/* Kastentitel: „* Pflicht“ als Legende; beim Überfahren (wer Pflichtfelder festlegt) „+ Ganze Box Pflicht“ */
.record-box-required { display: inline-grid; justify-items: end; }
.record-box-required > * { grid-area: 1 / 1; }
.record-box-required__legend { font-size: var(--font-size-12); color: var(--color-on-surface-faint); }
.bbn-form-section:hover .record-box-required .bbn-required-toggle,
.bbn-form-section:focus-within .record-box-required .bbn-required-toggle { opacity: 1; }
.bbn-form-section:hover .record-box-required:has(.bbn-required-toggle) .record-box-required__legend,
.bbn-form-section:focus-within .record-box-required:has(.bbn-required-toggle) .record-box-required__legend { visibility: hidden; }

/* ↑ / ↓ im Kopf: durch die Liste blättern */
.record-detail__step { display: inline-flex; gap: var(--space-4); }

/* Reiter anpassen: Hinweis über der Liste mit Häkchen */
.record-customize__hint {
  margin: var(--space-0) var(--space-4) var(--space-10);
  font-size: var(--font-size-12);
  line-height: var(--line-height-hint);
  color: var(--color-on-surface-muted);
}

.record-customize__status { display: block; margin-top: var(--space-2); color: var(--color-on-surface-faint); }