/* Besondere Abschnitte im Datensatz – Maße wie im HTML-Prototyp */

.record-subheading {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: var(--space-0);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
}

.record-subheading__aside,
.record-subheading .record-subheading__aside {
  margin-left: auto;
  font-size: var(--font-size-11-5);
  font-weight: var(--font-weight-regular);
  color: var(--color-on-surface-muted);
}

.record-lead {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin: calc(-1 * var(--space-6)) var(--space-0) var(--space-0);
  font-size: var(--font-size-12-5);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-muted);
}

.record-lead--warning { color: var(--color-warning-text); }

.record-note {
  margin: var(--space-0);
  font-size: var(--font-size-11-5);
  line-height: var(--line-height-hint);
  color: var(--color-on-surface-muted);
}

.record-note--spaced { margin-top: var(--space-2); }

.record-flabel {
  display: block;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-12-5);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-on-surface-muted);
}

.record-tag {
  padding: var(--space-0) var(--space-6);
  border-radius: var(--radius-xs);
  background: var(--color-warning-container);
  color: var(--color-warning-text);
  font-size: var(--font-size-10);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

small.record-tag { margin-left: var(--space-5); }

/* Preise */
.record-prices { display: flex; flex-direction: column; }

.record-prices__head,
.record-prices__row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.record-prices__head {
  padding: var(--space-0) var(--space-0) var(--space-4);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-on-surface-muted);
}

.record-prices__head span:first-child,
.record-prices__level { flex: 1; min-width: 0; }
.record-prices__head span:nth-child(2),
.record-prices__row .bbn-text-field { flex: 0 0 var(--size-price-input); text-align: end; }
.record-prices__head span:last-child,
.record-prices__net { flex: 0 0 var(--size-price-net); text-align: end; }

.record-prices__row {
  padding: var(--space-6) var(--space-0);
  border-top: var(--border-width-thin) solid var(--color-outline);
}

.record-prices__level {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
}

.record-prices__level small {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-regular);
  color: var(--color-on-surface-muted);
}

.record-prices__net {
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-muted);
}

/* Große Zahl (Spanne, Umsatz) */
.record-big {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-display);
  font-variant-numeric: tabular-nums;
}

.record-big small {
  margin-left: var(--space-8);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-on-surface-muted);
}

.record-meter {
  height: var(--size-dot-large);
  margin: var(--space-14) var(--space-0) var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-progress-track);
}

.record-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-success);
}

.record-meter--low .record-meter__fill { background: var(--color-warning); }

/* Liste „Begriff – Wert“ mit Linien. @flutter: Column(Row(label, value) + Divider) – zwei Spalten wie GridView */
.record-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: var(--space-12) var(--space-0) var(--space-0);
  font-size: var(--font-size-12-5);
}

.record-facts dt,
.record-facts dd {
  margin: var(--space-0);
  padding: var(--space-6) var(--space-0);
  border-top: var(--border-width-thin) solid var(--color-outline);
}

.record-facts dt { color: var(--color-on-surface-muted); }
.record-facts dd { text-align: end; font-variant-numeric: tabular-nums; }

/* Bestelltage */
.record-days { display: flex; flex-direction: column; }
.record-days--spaced { margin-top: var(--space-4); }
.record-days .bbn-field-label { position: relative; } /* eigene Zeile, damit „Pflicht“ nicht auf den Tagen liegt */

/* Listen: Sperren, Ansprechpartner, Urlaub */
.record-slist { display: flex; flex-direction: column; }

.record-slist__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-0);
  border-top: var(--border-width-thin) solid var(--color-outline);
}

.record-slist__item:first-child { border-top: 0; padding-top: var(--space-0); }

.record-slist__dot {
  flex: none;
  width: var(--size-dot-list);
  height: var(--size-dot-list);
  border-radius: var(--radius-full);
  background: var(--color-on-surface-muted);
}

.record-slist__dot--warning,
.record-slist__dot--now { background: var(--color-warning); }
.record-slist__dot--error { background: var(--color-error); }
.record-slist__dot--success { background: var(--color-success); }
.record-slist__dot--past { background: var(--color-outline-strong); }

.record-slist__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.record-slist__text b {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
}

.record-slist__text > span {
  font-size: var(--font-size-11-5);
  color: var(--color-on-surface-muted);
}

.record-slist__item--past .record-slist__text b,
.record-slist__item--past .record-slist__text > span { color: var(--color-on-surface-faint); }
.record-slist__item--on .record-slist__text b { color: var(--color-primary-light); }

.record-slist__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-avatar-reduced);
  height: var(--size-avatar-reduced);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-count);
}

.record-slist__actions { display: flex; gap: var(--space-2); }

.record-slist__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-compact-plus);
  height: var(--size-control-compact-plus);
  border-radius: var(--radius-xs-plus);
  color: var(--color-on-surface-muted);
}

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

.record-slist__older {
  margin-top: var(--space-4);
  padding-top: var(--space-10);
  border-top: var(--border-width-thin) solid var(--color-outline);
  font-size: var(--font-size-11-5);
  color: var(--color-on-surface-faint);
}

/* Kleine Formulare in Kästen: neue Sperre, neuer Ansprechpartner, neuer Zeitraum */
.record-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.record-form__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-self: stretch;
}

.record-form__grid > .bbn-text-field { flex: 1 1 calc(50% - var(--space-12)); }
.record-form__wide { flex: 1 1 100%; }

.record-form__actions { display: flex; gap: var(--space-8); }

/* Bilder. @flutter: GridView.count(crossAxisCount: 4, childAspectRatio: 4 / 3) */
.record-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.record-gallery__item,
.record-gallery__add {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: var(--space-0);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
}

.record-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-gallery__tag {
  position: absolute;
  left: var(--space-8);
  top: var(--space-8);
  padding: var(--space-2) var(--space-7);
  border-radius: var(--radius-xs);
  background: var(--color-image-tag);
  color: var(--color-on-primary);
  font-size: var(--font-size-10-5);
  font-weight: var(--font-weight-bold);
}

.record-gallery__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border: var(--border-width-medium) dashed var(--color-outline-strong);
  background: transparent;
  font-size: var(--font-size-12);
  color: var(--color-on-surface-muted);
}

.record-gallery__add:hover { border-color: var(--color-on-surface-faint); color: var(--color-on-surface); }

/* Allergene */
.record-allergens__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.record-allergens__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-10);
  border: var(--border-width-medium) solid transparent;
  border-radius: var(--radius-xs-plus);
  background: var(--color-surface-card);
  font-size: var(--font-size-12-5);
  color: var(--color-on-surface-variant);
}

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

.record-allergens__item small {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-semibold);
  opacity: var(--opacity-pressed);
}

.record-allergens__item--contains,
.record-allergens__item--contains:hover {
  border-color: transparent;
  background: var(--color-highlight-mark); /* enthalten: kräftig blau (Highlight) */
  color: var(--color-on-highlight-mark);
  font-weight: var(--font-weight-bold);
}

.record-allergens__item--traces,
.record-allergens__item--traces:hover {
  border-color: transparent;
  background: var(--color-info-container); /* Spuren: hellblau gefüllt, keine Umrandung */
  color: var(--color-info-text);
}

.record-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
  margin-top: var(--space-12);
  font-size: var(--font-size-11-5);
  color: var(--color-on-surface-muted);
}

/* Nährwerte als Kacheln */
.record-nutrition {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.record-nutrition__row {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-13);
}

.record-nutrition__row span {
  height: var(--size-control-medium);
  padding: var(--space-0) var(--space-12);
  border-radius: var(--radius-xs);
  background: var(--color-field-quiet);
  line-height: var(--size-control-medium);
}

.record-nutrition__row span:first-child { flex: 1; min-width: 0; }
.record-nutrition__row span:last-child { flex: 0 0 var(--size-price-input); text-align: end; font-variant-numeric: tabular-nums; }
.record-nutrition__row--sub span:first-child { padding-left: var(--space-26); color: var(--color-on-surface-muted); }

/* Preisbeispiel. @flutter: Table mit Kachel-Zellen (feste Spalten wie GridView) */
.record-example__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: var(--space-4);
  font-size: var(--font-size-13);
}

.record-example__grid > span {
  overflow: hidden;
  padding: var(--space-0) var(--space-12);
  border-radius: var(--radius-xs);
  background: var(--color-field-quiet);
  line-height: var(--size-control-medium);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-example__grid > .record-example__head {
  font-size: var(--font-size-12-5);
  color: var(--color-on-surface-muted);
  line-height: var(--size-control-slim);
}

.record-example__end { text-align: end; }
.record-example__grid b { font-weight: var(--font-weight-semibold); }

/* Feiertage in zwei Spalten. @flutter: GridView.count(crossAxisCount: 2) bzw. Wrap */
.record-holidays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-28);
}

/* @flutter: LayoutBuilder – schmal eine Spalte */
@media (max-width: 1100px) { /* @flutter: LayoutBuilder maxWidth ≤ 1100 */
  .record-holidays { grid-template-columns: minmax(0, 1fr); }
}

.record-holidays__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  min-width: 0;
  padding: var(--space-5) var(--space-0);
  border-top: var(--border-width-thin) solid var(--color-outline);
  font-size: var(--font-size-13);
}

.record-holidays__row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-holidays__row--set > span:first-child { font-weight: var(--font-weight-semibold); }

/* Kunden an dieser Kasse */
.record-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }

.record-chips__chip {
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  font-size: var(--font-size-12);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

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

.record-chips__more {
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-12);
  color: var(--color-on-surface-muted);
}

/* Öffnungszeiten */
.record-hours { display: flex; flex-direction: column; gap: var(--space-6); }

.record-hours__row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.record-hours__day {
  flex: 0 0 var(--size-control-small);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-muted);
}

.record-hours__row .bbn-text-field { flex: 1; }
.record-hours__row .bbn-text-field__input { padding: var(--space-6) var(--space-10); font-size: var(--font-size-13); }

.record-hours__sum {
  flex: 0 0 var(--size-hours-sum);
  font-size: var(--font-size-12);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-muted);
  text-align: end;
  white-space: nowrap;
}

/* Umsatz je Monat. @flutter: BarChart (fl_chart) bzw. Row(Expanded × 12) */
.record-revenue__bars {
  display: flex;
  gap: var(--space-6);
  height: var(--size-revenue-chart);
  margin: var(--space-16) var(--space-0) var(--space-2);
}

.record-revenue__bar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-4);
}

.record-revenue__track {
  display: flex;
  align-items: flex-end;
  flex: 1;
}

.record-revenue__fill {
  display: block;
  width: 100%;
  min-height: var(--space-2);
  border-radius: var(--radius-bar) var(--radius-bar) var(--radius-0) var(--radius-0);
  background: var(--color-on-surface-faint);
}

.record-revenue__bar--best .record-revenue__fill { background: var(--color-success); }
.record-revenue__bar--open .record-revenue__fill { min-height: 0; border-bottom: var(--border-width-thin) dashed var(--color-outline-strong); background: transparent; }

.record-revenue__month {
  font-size: var(--font-size-10);
  text-align: center;
  color: var(--color-on-surface-muted);
}