/**
 * @file
 * Shared FKTT form and canonical-view components.
 *
 * Loaded after the historic xarapro-fktt.css bundle so that these deliberately
 * narrow component rules can harmonise existing layouts without changing their
 * markup or business behaviour.
 */

:root {
  --xara-fktt-surface-page: #eeeeee;
  --xara-fktt-surface-card: #ffffff;
  --xara-fktt-surface-muted: #f5f5f5;
  --xara-fktt-surface-control: #ffffff;
  --xara-fktt-text: #202020;
  --xara-fktt-text-muted: #666666;
  --xara-fktt-border: #d1d1d1;
  --xara-fktt-border-strong: #b8b8b8;
  --xara-fktt-rail: #595959;
  --xara-fktt-accent: #f2b900;
  --xara-fktt-accent-blue: #0b2d4f;
  --xara-fktt-rail-heading-height: 4.15rem;
  --xara-fktt-accent-link: #c77800;
  --xara-fktt-radius: 0.4rem;
  --xara-fktt-shadow: 0 0.18rem 0.55rem rgb(0 0 0 / 9%);
  --xara-fktt-gap: 1rem;
  --xara-fktt-danger: #a52a22;
  --xara-fktt-danger-ink: #7a1f19;
  --xara-fktt-success: #2f7a3d;
  --xara-fktt-toolbar-height: 2.5rem;
}

/* Shared cards ---------------------------------------------------------- */

:where(
  .fktt-new-box-design,
  .fktt-canonical-card,
  .fktt-form-card,
  .fktt-modul-meldung-status-card,
  .fktt-modul-meldung-geometry-card
) {
  position: relative;
  box-sizing: border-box;
  padding: 1.35rem 1.5rem 1.35rem 1.75rem;
  overflow: hidden;
  border: 1px solid var(--xara-fktt-border);
  border-radius: var(--xara-fktt-radius);
  background: var(--xara-fktt-surface-card);
  color: var(--xara-fktt-text);
  box-shadow: var(--xara-fktt-shadow);
}

:where(
  .fktt-new-box-design,
  .fktt-canonical-card,
  .fktt-form-card,
  .fktt-modul-meldung-status-card,
  .fktt-modul-meldung-geometry-card
)::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.38rem;
  height: 100%;
  background: var(--xara-fktt-rail);
  content: "";
}

:where(
  .fktt-new-box-design,
  .fktt-canonical-card,
  .fktt-form-card,
  .fktt-modul-meldung-status-card,
  .fktt-modul-meldung-geometry-card
)::before {
  content: none;
}

/* The orange rail segment belongs to an actual card heading. Cards that
 * start directly with fields keep the neutral gray rail over their full
 * height. */
:where(
  .fktt-new-box-design,
  .fktt-canonical-card,
  .fktt-form-card,
  .fktt-modul-meldung-status-card,
  .fktt-modul-meldung-geometry-card
):has(> :is(h2, h3, h4))::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 0.38rem;
  height: var(--xara-fktt-rail-heading-height);
  background: var(--xara-fktt-accent);
  content: "";
}

/* Large media should remain visually quiet. */
.fktt-new-box-design--bild {
  padding: 0;
  border-left-width: 1px;
  box-shadow: var(--xara-fktt-shadow);
}

.fktt-new-box-design--bild::before {
  content: none;
}

.fktt-new-box-design--bild::after {
  content: none;
}

/* Replaces the legacy blue border on geometry cards. The component rail is
 * the only visual accent at the left edge. */
.fktt-modul-meldung-geometry-card {
  border-left: 1px solid var(--xara-fktt-border);
}

:where(.fktt-new-box-design, .fktt-canonical-card, .fktt-form-card) > :is(h2, h3, h4):first-child {
  margin-top: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--xara-fktt-border);
  color: var(--xara-fktt-text);
}

/* Button hierarchy -------------------------------------------------------
 * `.button--primary/--action/--secondary/--danger/--small` are already used
 * across ~15 places (BetriebsstelleViewBuilder, Fredl-Import-Formulare,
 * ModultreffenTeamController, GastTeilnahmeController, …) but were never
 * styled in the theme, so every one of them looked like a plain `.button`.
 * These rules give them contrast, purely via CSS — no markup change at any
 * of the existing call sites.
 *
 * NOTE: an existing base rule already styles every `.button` element
 * (`.button, button, [type="button"], … { border: 2px solid var(--primary);
 * background-color: var(--light); }` in style.css, specificity 0,1,0 — its
 * border color comes from the theme color-picker, which is why every button
 * looked identically gold-outlined regardless of these classes). Writing
 * these rules with `:where()` gives them specificity 0, so that base rule
 * always won and the hierarchy never showed up. Plain class selectors here
 * match the base rule's specificity and win via source order (this file
 * loads after style.css) — still trivially overridable by anything more
 * specific on a single page.
 *
 * Order matters here too: existing call sites combine `button--action` with
 * `button--primary` on the same element for the primary variant (Drupal's
 * own convention — `button--action` alone is the plain/secondary look,
 * `button--action button--primary` together is the prominent one).
 * Since both selectors have equal specificity, `.button--primary` must be
 * declared *after* `.button--action`/`.button--secondary` so it wins the
 * cascade tie-break for elements carrying both classes; `.button--danger`
 * follows last for the same reason. */

.button--action,
.button--secondary {
  border-color: var(--xara-fktt-border-strong);
  background: var(--xara-fktt-surface-control);
  color: var(--xara-fktt-text);
}

.button--primary {
  border-color: var(--xara-fktt-accent);
  background: var(--xara-fktt-accent);
  color: var(--xara-fktt-text);
  font-weight: 600;
}

.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--xara-fktt-accent-link);
  background: var(--xara-fktt-accent-link);
  color: #ffffff;
}

.button--danger {
  border-color: var(--xara-fktt-danger);
  background: transparent;
  color: var(--xara-fktt-danger-ink);
}

.button--danger:hover,
.button--danger:focus-visible {
  background: var(--xara-fktt-danger);
  color: #ffffff;
}

.button--small {
  height: 2rem;
  padding-block: 0;
  padding-inline: 0.75rem;
  font-size: 0.85rem;
}

/* Table toolbar ----------------------------------------------------------
 * `.bs-table-toolbar` already exists (fktt_base/css/column-toggle.css,
 * loaded via xarapro-fktt.css) and is wired into six list builders
 * (Personenwagen, Güterwagen, Tfz, Equipment, Modul, Planung). Its
 * `__left`/`__right` structure and the 48em wrap breakpoint stay exactly as
 * they are; these rules only add a frame so the toolbar reads as its own
 * block above the table instead of floating in the flow, plus the toolbar
 * height as a token. The button hierarchy above applies automatically to
 * any button inside. */

.bs-table-toolbar {
  border: 1px solid var(--xara-fktt-border);
  border-radius: var(--xara-fktt-radius) var(--xara-fktt-radius) 0 0;
  background: var(--xara-fktt-surface-muted);
  padding: 0.5rem 0.9rem;
}

.bs-table-toolbar .button,
.bs-table-toolbar button,
.bs-table-toolbar .bs-col-toggle-btn {
  height: var(--xara-fktt-toolbar-height);
}

.bs-table-toolbar__left > :is(h2, h3, h4) {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--xara-fktt-text);
}

/* Table card ---------------------------------------------------------
 * New, additive: wraps a `.bs-table-toolbar` and its table into a single
 * framed block (same border/radius/shadow language as the other
 * `fktt-*-card` components), so a page reads as a sequence of cards
 * instead of a chain of button, table, button, button, button, table.
 * Not a replacement for `.bs-table-toolbar` — the card only encloses it. */

.fktt-table-card {
  border: 1px solid var(--xara-fktt-border);
  border-radius: var(--xara-fktt-radius);
  background: var(--xara-fktt-surface-card);
  box-shadow: var(--xara-fktt-shadow);
  padding: 0 1.1rem 1rem;
  margin-bottom: var(--xara-fktt-gap);
}

.fktt-table-card:last-child {
  margin-bottom: 0;
}

.fktt-table-card > .bs-table-toolbar {
  /* Full-bleed: cancels the card's own inline padding so the toolbar still
     spans edge-to-edge, while everything after it (headings, tables, the
     "keine X vorhanden" empty text) sits inside the card's padding box.
     Top corners are rounded to match the card explicitly (rather than via
     `overflow: hidden` on the card) because the card must stay unclipped —
     otherwise the absolutely positioned `.fktt-toolbar-menu__list` dropdown
     from `buildEpochenToolbar()` gets cut off at the card edge whenever the
     card is short (no image) or the dropdown list is long. */
  margin: 0 -1.1rem 0.75rem;
  border-width: 0 0 1px;
  border-radius: var(--xara-fktt-radius) var(--xara-fktt-radius) 0 0;
}

/* Epochen-Toolbar sitzt direkt über den Epochen-Tabs, nicht über einer
 * Tabelle — die beiden gehören optisch zusammen, deshalb kein Abstand.
 * Der explizite margin-top:0 auf .page-tabs überschreibt einen eventuellen
 * Browser-Default-Abstand von <ul>. */
.fktt-table-card > .bs-table-toolbar.bs-table-toolbar--epochen {
  margin-bottom: 0;
}

.fktt-table-card > .bs-table-toolbar.bs-table-toolbar--epochen + .page-tabs {
  margin-top: 0;
}

.fktt-table-card :where(table, .fktt-canonical-table) {
  border: 0;
}

@media (max-width: 36rem) {
  .fktt-table-card {
    padding: 0 0.75rem 0.75rem;
  }

  .fktt-table-card > .bs-table-toolbar {
    margin: 0 -0.75rem 0.65rem;
  }

  .fktt-table-card > .bs-table-toolbar.bs-table-toolbar--epochen {
    margin-bottom: 0;
  }

  .fktt-table-card .bs-table-toolbar__left {
    width: 100%;
  }
}

/* Toolbar menu -------------------------------------------------------
 * Generalizes the existing `.fktt-local-tasks__overflow` <details>/<summary>
 * dropdown (no JS) for bundling secondary actions behind a single "Weitere
 * Aktionen" trigger — e.g. "kopieren"/"löschen" next to the primary
 * "+ Neue Epoche" action, matching the same disclosure pattern already used
 * for danger actions in local tasks. The <summary> carries the normal
 * `button button--action` classes via #summary_attributes, so it looks like
 * any other toolbar button and automatically follows the button hierarchy;
 * these rules only add the disclosure caret and the dropdown panel. */

.fktt-toolbar-menu {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
}

.fktt-toolbar-menu > summary {
  cursor: pointer;
  list-style: none;
}

.fktt-toolbar-menu > summary::-webkit-details-marker {
  display: none;
}

.fktt-toolbar-menu > summary::after {
  content: "\25be";
  margin-left: 0.4rem;
  font-size: 0.75em;
}

.fktt-toolbar-menu[open] > summary::after {
  transform: rotate(180deg);
  display: inline-block;
}

.fktt-toolbar-menu__list {
  position: absolute;
  z-index: 50;
  top: 100%;
  right: 0;
  min-width: 14rem;
  margin: 0.3rem 0 0;
  padding: 0.35rem;
  background: var(--xara-fktt-surface-card);
  border: 1px solid var(--xara-fktt-border);
  border-radius: var(--xara-fktt-radius);
  box-shadow: var(--xara-fktt-shadow);
  list-style: none;
  text-align: left;
}

.fktt-toolbar-menu__list li + li {
  margin-top: 0.15rem;
}

.fktt-toolbar-menu__list a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 0.3rem;
  color: var(--xara-fktt-text);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.fktt-toolbar-menu__list a:hover,
.fktt-toolbar-menu__list a:focus-visible {
  background: var(--xara-fktt-surface-muted);
}

.fktt-toolbar-menu__list a.fktt-toolbar-menu__item--danger {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--xara-fktt-border);
  color: var(--xara-fktt-danger-ink);
}

/* Zwei destruktive Aktionen direkt hintereinander (z. B. "Bild löschen"
 * gefolgt von "Datenblatt löschen") brauchen nur einen Trenner vor der
 * ersten — sonst entsteht eine doppelte Linie zwischen beiden. */
.fktt-toolbar-menu__list li:has(> a.fktt-toolbar-menu__item--danger)
  + li:has(> a.fktt-toolbar-menu__item--danger) > a.fktt-toolbar-menu__item--danger {
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 0;
}

/* Canonical views ------------------------------------------------------- */

.fktt-view-columns,
.fktt-canonical-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(17rem, 3fr);
  gap: var(--xara-fktt-gap);
  align-items: start;
}

:where(.fktt-view-left, .fktt-view-right, .fktt-canonical-main, .fktt-canonical-sidebar) {
  min-width: 0;
}

:where(.fktt-view-left, .fktt-view-right, .fktt-canonical-main, .fktt-canonical-sidebar)
  > :where(.fktt-new-box-design, .fktt-canonical-card) {
  margin-bottom: var(--xara-fktt-gap);
}

.fktt-fields .field {
  display: grid;
  grid-template-columns: minmax(8rem, 42%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  margin: 0 !important;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e4e4e4;
}

.fktt-fields .field:last-child {
  border-bottom: 0;
}

.fktt-fields .field__label {
  color: var(--xara-fktt-text-muted);
  font-weight: 400;
}

.fktt-fields .field__item,
.fktt-fields .field-item {
  min-width: 0;
  color: var(--xara-fktt-text);
}

/* Zwei nebeneinanderliegende .fktt-fields-Blöcke innerhalb einer Karte (z. B.
 * Maße/Gewicht vs. Lastgrenzen bei Güterwagen „Technische Daten"). Kollabiert
 * auf schmalen Viewports zu einer Spalte, gleicher Breakpoint wie
 * .fktt-view-columns. */
.fktt-fields-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--xara-fktt-gap);
}

/* Merkmal-Chips ------------------------------------------------------------
 * Ersetzt einzelne Label:Ja/Nein-Zeilen für Boolean-Merkmalfelder (Tfz,
 * Güterwagen, Personenwagen) durch eine kompakte Chip-Reihe. Aktive und
 * inaktive Merkmale bleiben beide sichtbar; die Unterscheidung läuft über
 * Fläche/Rahmen zusätzlich zur Farbe, nicht nur über Farbe. */
.fktt-merkmal-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--xara-fktt-border);
}

/* Für Karten, in denen die Chip-Reihe der einzige Inhalt ist (z. B.
 * „Einsatz") — dort trennt bereits die Kartenüberschrift, ein zweiter
 * Trennstrich direkt darunter wäre redundant. */
.fktt-merkmal-chips--standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fktt-merkmal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--xara-fktt-border-strong);
  background: var(--xara-fktt-surface-muted);
  color: var(--xara-fktt-text);
  font-size: 1rem;
  font-weight: 700;
  cursor: default;
}

.fktt-merkmal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--xara-fktt-border);
  background: var(--xara-fktt-surface-muted);
  color: var(--xara-fktt-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.fktt-merkmal-chip.is-active {
  border-color: var(--xara-fktt-accent);
  background: var(--xara-fktt-accent);
  color: #282814;
}

.fktt-merkmal-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.fktt-merkmal-chip.is-active .fktt-merkmal-chip__dot {
  opacity: 1;
}

/* Status-Badge: Ansichtsseiten-Pendant zum .fktt-status-toggle im Formular
 * (z. B. Freigabe) — dieselben zwei Zustandsfarben, nur als reine Anzeige
 * statt als Eingabeelement. */
.fktt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.fktt-status-badge::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.fktt-status-badge--on {
  background: var(--xara-fktt-success);
  color: #ffffff;
}

.fktt-status-badge--off {
  background: var(--xara-fktt-rail);
  color: #ffffff;
}

/* Merkmal-Chips, Formular-Variante ------------------------------------
 * Dieselbe Pillen-Optik wie .fktt-merkmal-chip auf der Ansichtsseite, aber
 * als echtes, klickbares Checkbox-Formularelement — ursprünglich nur im
 * Güterwagen-Formular (Widerstandsachen/fährbootfähig/zugerüstet/gealtert/
 * individuelle Nummer/Umbau), jetzt themeweit für alle Material-Formulare
 * (.fktt-gw-row/.fktt-pw-row/.fktt-tfz-row). Symbol-Felder führen Symbol und
 * Beschriftung im selben Label ("Ω Widerstandsachen"), damit die Pille wie
 * die anderen selbsterklärend bleibt statt auf eine separate Caption
 * angewiesen zu sein. Nur diese Merkmal-Checkboxen sind betroffen, keine
 * anderen Checkboxen im Theme — die Status-Segment-Pille
 * (.fktt-registration-mode/.fktt-status-toggle) bleibt eigenen, echten
 * Statusfeldern vorbehalten. */
:is(.fktt-gw-row, .fktt-pw-row, .fktt-tfz-row) input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

:is(.fktt-gw-row, .fktt-pw-row, .fktt-tfz-row) input[type="checkbox"] + label.option {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--xara-fktt-border);
  background: var(--xara-fktt-surface-muted);
  color: var(--xara-fktt-border-strong);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

:is(.fktt-gw-row, .fktt-pw-row, .fktt-tfz-row) input[type="checkbox"]:checked + label.option {
  border-color: var(--xara-fktt-accent);
  background: var(--xara-fktt-accent);
  color: #282814;
}

:is(.fktt-gw-row, .fktt-pw-row, .fktt-tfz-row) input[type="checkbox"]:focus-visible + label.option {
  outline: 0.18rem solid rgb(242 185 0 / 48%);
  outline-offset: 0.08rem;
}

/* Merkmal-Zeilen: die Pillen sollen sich an ihrem Text orientieren statt
 * die gleichmäßig aufgeteilte Flex-Breite von .fktt-*-row > * (flex:1) zu
 * übernehmen — sonst bleibt neben jeder Pille toter Raum stehen. */
:is(.fktt-gw-row-merkmale, .fktt-pw-row-merkmale, .fktt-tfz-row-merkmale) {
  flex-wrap: wrap;
  row-gap: 0.6rem;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

:is(.fktt-gw-row-merkmale, .fktt-pw-row-merkmale, .fktt-tfz-row-merkmale) > * {
  flex: 0 0 auto !important;
  min-width: 0;
}

.fktt-tfz--view :where(table, .fktt-canonical-table),
.fktt-canonical-card :where(table, .fktt-canonical-table) {
  width: 100%;
  border-collapse: collapse;
  color: var(--xara-fktt-text);
}

.fktt-tfz--view th,
.fktt-canonical-card th {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--xara-fktt-border);
  background: var(--xara-fktt-surface-muted);
  color: var(--xara-fktt-text);
  font-weight: 700;
  text-align: left;
}

.fktt-tfz--view td,
.fktt-canonical-card td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--xara-fktt-border);
  background: var(--xara-fktt-surface-card);
}

/* Forms ----------------------------------------------------------------- */

/* Fachliche Abschnitte in den Material-Formularen (Güterwagen, Personenwagen,
 * Tfz): jeder ein eigener Block — Rahmen, Akzentleiste, Radius, Schatten wie
 * .fktt-modul-meldung-form-main (Farbursprung #062b5c/--xara-fktt-accent-blue).
 * Ursprünglich nur im Güterwagen-Formular, jetzt themeweiter Baustein. Die
 * Spalte selbst (.fktt-gw-col-left/-right, .fktt-pw-col-left/-right,
 * .fktt-tfz-col-left/-right) bleibt reines Layout ohne eigene Karten-Optik,
 * sonst verschmelzen die Blöcke zu einem einzigen umschließenden Rahmen. */
.fktt-box {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid #d5dadd;
  border-left: 0.35rem solid var(--xara-fktt-accent-blue);
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 8%);
}

.fktt-box:last-child {
  margin-bottom: 0;
}

.fktt-box-heading {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xara-fktt-text-muted);
}

@media (max-width: 480px) {
  .fktt-box {
    padding: 1rem;
  }
}

/* Akzentleiste: dieselbe Optik wie die Modulmeldung-Karten (Akzentfarbe
 * #062b5c/--xara-fktt-accent-blue, Rahmenfarbe #d5dadd, Radius 0.35rem,
 * Schatten — siehe .fktt-modul-meldung-form-main weiter unten in
 * xarapro-fktt.css) jetzt auch für das Modul-Bearbeiten-Formular und die
 * Formularkarten der Treffen-Anmeldung. */
.fktt-modul-form-main,
.fktt-modul-form-sidebar {
  border-color: #d5dadd;
  border-left: 0.35rem solid var(--xara-fktt-accent-blue);
  box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 8%);
}

.fktt-registration-context,
.fktt-registration-participation,
.fktt-registration-days {
  border-left: 0.35rem solid var(--xara-fktt-accent-blue);
}

/* Modulmeldung follows the same composition as the Tfz canonical view:
 * the sidebar is a neutral layout column containing independent cards. */
/* The sidebar is only a layout column. The more specific selector keeps the
 * legacy form stylesheet from turning it into an additional outer card when
 * stylesheet aggregation changes the load order. */
.fktt-modul-meldung-form-layout > .fktt-modul-meldung-form-sidebar {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fktt-modul-meldung-form-sidebar > .fktt-new-box-design {
  margin: 0 0 var(--xara-fktt-gap);
  font-size: inherit;
}

.fktt-modul-meldung-form-sidebar > .fktt-new-box-design:last-child {
  margin-bottom: 0;
}

.fktt-modul-meldung-status-card > :is(.form-item, .field) {
  display: grid;
  grid-template-columns: minmax(8rem, 42%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e4e4e4;
}

.fktt-modul-meldung-status-card > :is(.form-item, .field):last-child {
  border-bottom: 0;
}

.fktt-modul-meldung-status-card > .form-item > label,
.fktt-modul-meldung-status-card > .field > .field__label {
  color: var(--xara-fktt-text-muted);
  font-size: inherit;
  font-weight: 400;
  white-space: normal;
}

.fktt-modul-meldung-status-card > .field > :is(.field__item, .field__items) {
  min-width: 0;
  color: var(--xara-fktt-text);
  font-weight: 400;
}

/* The child/card selector deliberately outranks the equally specific legacy
 * `.fktt-modul-meldung-form-cad` rules. Some deployments aggregate the
 * historic bundle after this file; the card must retain its horizontal
 * padding regardless of that stylesheet order. */
.fktt-modul-meldung-form-sidebar > .fktt-new-box-design.fktt-modul-meldung-form-cad {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 var(--xara-fktt-gap);
  padding: 1.35rem 1.5rem 1.35rem 1.75rem;
  border: 1px solid var(--xara-fktt-border);
  border-radius: var(--xara-fktt-radius);
  background: var(--xara-fktt-surface-card);
  box-shadow: var(--xara-fktt-shadow);
}

.fktt-modul-meldung-form-cad > h3:first-child {
  width: auto;
  margin: 0 0 0.75rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--xara-fktt-border);
  color: var(--xara-fktt-text);
}

/* Measurements and their drawing share a row when both fit. Flex wrapping
 * keeps the table usable and moves the drawing below it on narrow screens. */
.fktt-modul-meldung-geometry-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.fktt-modul-meldung-geometry-content > .fktt-geometrie-pflegetabelle {
  flex: 1 1 38rem;
  width: auto;
  min-width: 0;
}

.fktt-modul-meldung-geometry-content > .fktt-vieleck-wrapper {
  flex: 0 1 420px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) {
  color: var(--xara-fktt-text);
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.5rem;
  border: 1px solid var(--xara-fktt-border-strong);
  border-radius: 0.25rem;
  background: var(--xara-fktt-surface-control);
  color: var(--xara-fktt-text);
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) :where(input[type="checkbox"]) {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--xara-fktt-accent);
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) :where(input, select, textarea):focus-visible {
  border-color: var(--xara-fktt-rail);
  outline: 0.18rem solid rgb(242 185 0 / 48%);
  outline-offset: 0.08rem;
}

/* Field- und Legenden-Labels: fette Feldlabel, Versal-Legenden mit
 * Sperrung — Formatierung 1:1 aus der Treffen-Anmeldung übernommen
 * (vormals nur dort in modules/custom/fktt_modultreffen/css/anmeldung.css
 * definiert), jetzt als gemeinsamer Baustein für alle FKTT-Formulare. */
:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) :where(.form-item > label:not(.option), .field__label) {
  font-weight: 700;
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout,
  .fktt-treffen-section
) :where(legend, .fieldset-legend) {
  margin-bottom: 0.6rem;
  color: var(--xara-fktt-text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(
  .fktt-dcc-form,
  .fktt-equipment-layout,
  .fktt-modul-profile-form,
  .fktt-gw-layout,
  .fktt-modul-form-layout,
  .fktt-modul-meldung-form-layout,
  .fktt-pw-layout,
  .fktt-registration-form,
  .fktt-tfz-layout
) :where(fieldset, .fktt-form-section) {
  min-width: 0;
  border-color: var(--xara-fktt-border);
}

/* Status-Toggle: segmentierte Pille für Radio-Gruppen mit wenigen,
 * sich gegenseitig ausschließenden Zuständen (z. B. Teilnahmestatus).
 * Ursprünglich Seiten-CSS der Treffen-Anmeldung, jetzt themeweiter
 * Baustein — Klasse bleibt `fktt-registration-mode` (bestehendes Markup
 * in FkttTeilnahmeForm), damit keine PHP-Änderung nötig ist. Neue
 * Formulare können dieselbe Klasse wiederverwenden. */
.fktt-registration-mode {
  margin: 1.3rem 0 0.7rem;
  padding: 0;
  border: 0;
}

.fktt-registration-mode > legend {
  margin-bottom: 0.6rem;
}

.fktt-registration-mode .form-radios,
.fktt-registration-mode > .fieldset-wrapper > [id^="edit-teilnahmemodus"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 56rem;
  padding: 0.25rem;
  border: 1px solid var(--xara-fktt-border-strong);
  border-radius: 999px;
  background: var(--xara-fktt-surface-muted);
}

.fktt-registration-mode--initial .form-radios,
.fktt-registration-mode--initial > .fieldset-wrapper > [id^="edit-teilnahmemodus"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fktt-registration-mode .form-type-radio {
  position: relative;
  margin: 0;
}

.fktt-registration-mode input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fktt-registration-mode label {
  display: block;
  margin: 0;
  padding: 0.72rem 0.9rem;
  border-radius: 999px;
  color: var(--xara-fktt-text-muted);
  text-align: center;
  cursor: pointer;
}

.fktt-registration-mode input[type="radio"]:focus-visible + label {
  outline: 0.18rem solid rgb(242 185 0 / 48%);
  outline-offset: 0.08rem;
}

.fktt-registration-mode input[value="angemeldet"]:checked + label {
  background: var(--xara-fktt-success);
  color: #fff;
}

.fktt-registration-mode input[value="mit_vertreter"]:checked + label {
  background: var(--xara-fktt-accent);
  color: #282814;
}

.fktt-registration-mode input[value="abgemeldet"]:checked + label {
  background: var(--xara-fktt-rail);
  color: #fff;
}

@media (max-width: 44rem) {
  .fktt-registration-mode .form-radios,
  .fktt-registration-mode > .fieldset-wrapper > [id^="edit-teilnahmemodus"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 999px;
  }

  .fktt-registration-mode--initial .form-radios,
  .fktt-registration-mode--initial > .fieldset-wrapper > [id^="edit-teilnahmemodus"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fktt-registration-mode label {
    display: flex;
    box-sizing: border-box;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.2rem;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.15;
  }
}

/* Status-Toggle, generische Zwei-Zustands-Variante ----------------------
 * Wie .fktt-registration-mode, aber nicht an ein bestimmtes Feld gebunden
 * (kein `[id^=...]`-Fallback nötig, da hier per PHP echte `#type: radios`-
 * Elemente erzeugt werden statt Markup unverändert übernommen zu werden).
 * Aktiver Zustand ist immer grün — ein Status ist kein Merkmal, siehe
 * fktt-gw-row (Merkmal-Chips, Gold). Erstverwendung: „Freigabe" im
 * Güterwagen-Formular (FkttGueterwagenForm). */
.fktt-status-toggle > legend {
  margin-bottom: 0.6rem;
  color: var(--xara-fktt-text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fktt-status-toggle > .fieldset-wrapper > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 24rem;
  padding: 0.25rem;
  border: 1px solid var(--xara-fktt-border-strong);
  border-radius: 999px;
  background: var(--xara-fktt-surface-muted);
}

.fktt-status-toggle .form-type-radio {
  position: relative;
  margin: 0;
}

.fktt-status-toggle input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fktt-status-toggle label {
  display: block;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  color: var(--xara-fktt-text-muted);
  text-align: center;
  cursor: pointer;
}

.fktt-status-toggle input[type="radio"]:focus-visible + label {
  outline: 0.18rem solid rgb(242 185 0 / 48%);
  outline-offset: 0.08rem;
}

.fktt-status-toggle input[value="1"]:checked + label {
  background: var(--xara-fktt-success);
  color: #ffffff;
}

.fktt-status-toggle input[value="0"]:checked + label {
  background: var(--xara-fktt-rail);
  color: #ffffff;
}

:where(.fktt-form-card, .fktt-canonical-card, .fktt-new-box-design) a:not(.button) {
  color: var(--xara-fktt-accent-link);
  text-underline-offset: 0.14em;
}

:where(.fktt-form-card, .fktt-canonical-card, .fktt-new-box-design) a:not(.button):focus-visible {
  border-radius: 0.12rem;
  outline: 0.18rem solid rgb(242 185 0 / 55%);
  outline-offset: 0.12rem;
}

@media (max-width: 56rem) {
  .fktt-view-columns,
  .fktt-canonical-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fktt-fields-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(
    .fktt-equipment-layout,
    .fktt-gw-layout,
    .fktt-modul-form-layout,
    .fktt-modul-meldung-form-layout,
    .fktt-pw-layout,
    .fktt-tfz-layout
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 36rem) {
  :where(
    .fktt-new-box-design,
    .fktt-canonical-card,
    .fktt-form-card,
    .fktt-modul-meldung-status-card,
    .fktt-modul-meldung-geometry-card
  ) {
    padding: 1rem 1rem 1rem 1.25rem;
  }

  .fktt-fields .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .fktt-modul-meldung-status-card > :is(.form-item, .field) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  :where(.fktt-tfz--view, .fktt-canonical-card) .fktt-table-scroll,
  :where(.fktt-tfz--view, .fktt-canonical-card) .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fktt-new-box-design,
  .fktt-canonical-card,
  .fktt-form-card {
    scroll-behavior: auto;
  }
}

/* Responsive material cards ---------------------------------------------
 * The compact two-column grid is limited to fields whose displayed values
 * were verified against the current vehicle data. Potentially long values
 * carry `fktt-table-popin__detail--wide` and span the card. */
@media screen and (max-width: 59.99em) {
  .fktt-table-popin tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) > td:first-child {
    border-left: 0.28rem solid var(--xara-fktt-accent-blue);
    border-radius: var(--xara-fktt-radius) 0 0 0;
  }

  .fktt-table-popin tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) > td:last-child {
    border-radius: 0 var(--xara-fktt-radius) 0 0;
  }

  .fktt-table-popin__row .fktt-table-popin__cell {
    overflow: hidden;
    border-left: 0;
    border-radius: 0 0 var(--xara-fktt-radius) var(--xara-fktt-radius);
    box-shadow:
      inset 0.28rem 0 var(--xara-fktt-accent-blue),
      inset 0 -1px var(--fktt-table-popin-card-border);
  }

  .fktt-material-card .fktt-table-popin__row .fktt-table-popin__cell {
    padding: 0 0 0.8rem;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: var(--fktt-table-popin-card-gap);
    box-shadow: none;
  }

  .fktt-material-card .fktt-table-popin__details {
    overflow: hidden;
    padding: 0.55rem 0.35rem 1rem;
    border: 1px solid var(--fktt-table-popin-card-border);
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 var(--xara-fktt-radius) var(--xara-fktt-radius);
    background: var(--xara-fktt-surface-card);
    box-shadow:
      inset 0.28rem 0 var(--xara-fktt-accent-blue),
      inset 0 -1px var(--fktt-table-popin-card-border);
  }

  .fktt-table-popin [data-preview-url] {
    cursor: inherit;
    text-decoration: none;
  }

  .fktt-table-popin__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
  }

  .fktt-table-popin__detail {
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
  }

  .fktt-table-popin__detail--wide,
  .fktt-table-popin__detail--image {
    grid-column: 1 / -1;
  }

  .fktt-table-popin__detail--wide {
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  }

  /* Shared mobile card variant for all three vehicle collections. */
  .fktt-material-card tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) > td {
    border-right: 1px solid var(--xara-fktt-border);
    background: #f8fafc;
  }

  .fktt-material-card tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) > td:last-child {
    border-right-color: var(--fktt-table-popin-card-border);
  }

  .fktt-material-card tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) a,
  .fktt-material-card tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) [data-preview-url] {
    color: var(--xara-fktt-accent-blue);
    font-weight: 600;
  }

  .fktt-material-card tbody tr:not(.fktt-table-popin__row):not(.bs-filter-exempt) .fktt-table-popin__primary-column a {
    font-weight: 700;
  }

  .fktt-material-card__administration-badge,
  .fktt-material-card__mobile-administration {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--xara-fktt-border-strong);
    border-radius: 0.3rem;
    background: var(--xara-fktt-surface-muted);
    color: var(--xara-fktt-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
  }

  .fktt-material-card .fktt-table-popin__details {
    column-gap: 0;
    row-gap: 0;
  }

  .fktt-material-card .fktt-table-popin__detail:not(.fktt-table-popin__chip) {
    min-height: 2.35rem;
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid #e2e6ea;
  }

  .fktt-material-card .fktt-table-popin__detail--right {
    border-left: 1px solid #d6dde4;
    background: #f4f7fa;
  }

  .fktt-material-card .fktt-table-popin__detail--wide,
  .fktt-material-card .fktt-table-popin__detail--image {
    background: var(--xara-fktt-surface-card);
  }

  .fktt-material-card .fktt-table-popin__chip-group {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 0.55rem;
    border-bottom: 1px solid var(--xara-fktt-border);
    background: var(--xara-fktt-surface-card);
  }

  .fktt-material-card .fktt-table-popin__chip {
    display: none;
    align-items: center;
    width: auto;
    min-height: 1.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--xara-fktt-border-strong);
    border-radius: 0.3rem;
    background: var(--xara-fktt-surface-muted);
    color: var(--xara-fktt-text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .fktt-material-card .fktt-table-popin__chip.fktt-table-popin__detail--low {
    display: inline-flex;
  }

  .fktt-material-card .fktt-table-popin__chip.is-active {
    border-color: var(--xara-fktt-success);
    background: #f2faf4;
    color: var(--xara-fktt-success);
  }

  .fktt-material-card .fktt-table-popin__chip.is-active::before {
    margin-right: 0.3rem;
    content: "✓";
    font-weight: 700;
  }
}

.fktt-material-card__desktop-value,
.fktt-material-card__operations-stack,
.fktt-material-card__operations-control {
  display: contents;
}

.fktt-material-card__mobile-identity,
.fktt-material-card__mobile-administration {
  display: none;
}

@media screen and (max-width: 37.99em) {
  .ui-dialog:has(.confirmation) {
    box-sizing: border-box;
    width: min(22rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .ui-dialog:has(.confirmation) .ui-dialog-title {
    width: auto;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .ui-dialog:has(.confirmation) .ui-dialog-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fktt-material-card thead {
    display: none;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .bs-select-col {
    width: 4rem;
    padding: 0.8rem 0.65rem;
    text-align: center;
    vertical-align: middle;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .bs-select-col .bs-select-row {
    display: block;
    margin-inline: auto;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-material-card__header-secondary,
  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-material-card__header-administration {
    display: none;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-material-card__header-primary,
  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-table-popin__operations-column {
    padding: 0;
    vertical-align: middle;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-table-popin__operations-column {
    width: 4.8rem;
  }

  .fktt-material-card tbody .fktt-material-card__header-ready > .fktt-material-card__header-primary .fktt-material-card__desktop-value {
    display: none;
  }

  .fktt-material-card tbody .fktt-material-card__operations-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(2.75rem, auto));
    min-width: 0;
  }

  .fktt-material-card tbody .fktt-material-card__operations-stack--single {
    grid-template-rows: minmax(2.75rem, auto);
  }

  .fktt-material-card tbody .fktt-material-card__mobile-identity {
    display: grid;
    min-width: 0;
    height: 100%;
    align-content: center;
    row-gap: 0.15rem;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-primary,
  .fktt-material-card tbody .fktt-material-card__mobile-secondary,
  .fktt-material-card tbody .fktt-material-card__mobile-administration,
  .fktt-material-card tbody .fktt-material-card__operations-control {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 0.55rem 0.7rem;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-primary,
  .fktt-material-card tbody .fktt-material-card__mobile-secondary {
    padding-block: 0.25rem;
    font-size: 1rem;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-administration {
    border-bottom: 1px solid #d6dde4;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-primary {
    font-weight: 700;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-administration,
  .fktt-material-card tbody .fktt-material-card__operations-control {
    justify-content: center;
    padding-inline: 0.4rem;
  }

  .fktt-material-card tbody .fktt-material-card__mobile-administration .fktt-material-card__administration-badge {
    min-height: 2rem;
    padding-inline: 0.65rem;
  }

  .fktt-material-card tbody .fktt-material-card__operations-control .dropbutton-wrapper {
    margin-block: auto;
  }

  .fktt-material-card .fktt-table-popin__chip.fktt-table-popin__detail--medium {
    display: inline-flex;
  }
}

@media screen and (max-width: 23.99em) {
  .fktt-table-popin__details {
    grid-template-columns: minmax(0, 1fr);
  }

  .fktt-table-popin__detail,
  .fktt-table-popin__detail--wide {
    grid-column: auto;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  }

  .fktt-material-card .fktt-table-popin__chip-group {
    justify-content: flex-start;
  }
}