/* MX Garage — generische, moderne UI-Bausteine (0.354.0).
   Bereichsuebergreifend: Karte, Status-Pill, Chips, Stats, Aktionsleiste, Handlungsbedarf.
   Ziel: der Lager-Look auf allen Bereichen, ohne Klassen-Dubletten. Dunkel, MX-Orange, mobil-first. */

/* ===== Wort-/Zeilenumbruch (0.372.0) =====
   Das Kadence-Theme setzt .entry-content { word-break: break-word }, das per Vererbung im
   ganzen Frontend greift und lange deutsche Komposita (z. B. „Wartungsvorlagen") MITTEN IM
   WORT umbricht — auf schmalen Flächen (Kacheln, Chips) wirkt das fast senkrecht. Die Seite
   ist lang="de", darum stellen wir auf saubere Silbentrennung um: keine willkürlichen
   Wortbrüche mehr, stattdessen Trennung mit Bindestrich an korrekter Stelle. */
.mx-garage { word-break: normal; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Kurze, nicht trennbare Elemente (Pills, App-Leisten-Tabs) sollen nicht getrennt werden. */
.mx-garage .mx-pill, .mx-garage .mx-appbar__bar .mx-appbar__lb { -webkit-hyphens: manual; hyphens: manual; }

/* ===== Status-Pill ===== */
.mx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); color: #8d9aa4; white-space: nowrap; }
.mx-pill__d { width: 7px; height: 7px; border-radius: 50%; background: #8d9aa4; }
.mx-pill--ok { color: #bfe6c6; border-color: rgba(95,174,107,.5); background: rgba(95,174,107,.12); }
.mx-pill--ok .mx-pill__d { background: #5fae6b; }
.mx-pill--warn { color: #ffd9a8; border-color: rgba(242,163,60,.5); background: rgba(242,163,60,.12); }
.mx-pill--warn .mx-pill__d { background: #f2a33c; }
.mx-pill--danger { color: #ffb9ac; border-color: rgba(224,83,61,.5); background: rgba(224,83,61,.12); }
.mx-pill--danger .mx-pill__d { background: #e0533d; }
.mx-pill--accent { color: #ffcda3; border-color: rgba(236,102,8,.5); background: rgba(236,102,8,.12); }
.mx-pill--accent .mx-pill__d { background: #ec6608; }
.mx-pill--muted { color: #8d9aa4; }

/* ===== Karte ===== */
.mx-uicard { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: linear-gradient(180deg, #171c22, #12171b); overflow: hidden; margin: 0 0 12px; box-shadow: 0 8px 24px -18px #000; }
.mx-uicard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ec6608, rgba(236,102,8,.15)); }
.mx-uicard[data-status="warn"]::before, .mx-uicard--warn::before { background: linear-gradient(90deg, #f2a33c, rgba(242,163,60,.15)); }
.mx-uicard[data-status="danger"]::before, .mx-uicard--danger::before { background: linear-gradient(90deg, #e0533d, rgba(224,83,61,.15)); }
.mx-uicard[data-status="muted"]::before, .mx-uicard--muted::before { background: linear-gradient(90deg, #3a3f47, rgba(58,63,71,.15)); }
.mx-uicard__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.mx-uicard__head--btn { cursor: pointer; list-style: none; }
.mx-uicard__head--btn::-webkit-details-marker { display: none; }
.mx-uicard__main { min-width: 0; flex: 1; }
.mx-uicard__nm { display: block; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.2px; line-height: 1.2; }
.mx-uicard__sub { display: block; color: #8d9aa4; font-size: 0.8rem; margin-top: 3px; }
.mx-uicard__head .mx-pill { margin-left: auto; flex: 0 0 auto; }
.mx-uicard__body { padding: 2px 16px 14px; border-top: 1px solid rgba(255,255,255,.10); }

/* ===== Untergeordnete Zeile (z. B. Lizenz, Bestand je Lager, Zuordnung) ===== */
.mx-urow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: #191f25; border: 1px solid rgba(255,255,255,.10); flex-wrap: wrap; margin: 10px 0 0; }
.mx-urow.is-archiviert { opacity: .6; }
.mx-urow__main { min-width: 0; flex: 1; }
.mx-urow__t { font-weight: 800; }
.mx-urow__act { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-urow__act form { margin: 0; }

/* ===== Info-Chips ===== */
/* 0.366.1: größer + kontrastreicher (Lesbarkeit; Label heller, Wert weiß). */
.mx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; }
.mx-chip { font-size: 0.82rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 12px; color: #aab4bd; background: rgba(255,255,255,.03); display: inline-flex; align-items: center; gap: 6px; }
.mx-chip b { color: #fff; font-weight: 700; }
/* Read-only Detail-Chips (aufgeklappte Karte) tragen echte Daten → nochmals größer. */
.mx-detgroup .mx-chip { font-size: 0.92rem; padding: 7px 13px; }
.mx-detgroup .mx-chip b { font-size: 0.95rem; }

/* ===== Kennzahlen-Raster ===== */
.mx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin: 12px 0 2px; }
.mx-stat { background: #191f25; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 11px 13px; }
.mx-stat--accent { background: linear-gradient(180deg, rgba(236,102,8,.10), rgba(236,102,8,.02)); border-color: rgba(236,102,8,.30); }
.mx-stat__k { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7681; font-weight: 800; }
.mx-stat__v { display: block; font-weight: 800; font-size: 1.05rem; margin-top: 5px; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
.mx-stat__v small { font-weight: 600; color: #8d9aa4; font-size: 0.78rem; }

/* ===== Aktionsleiste ===== */
.mx-actbar { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); }
.mx-actbar .mx-btn { border-radius: 11px; }
.mx-actbar__grow { flex: 1; min-width: 160px; justify-content: center; }

/* ===== Handlungsbedarf-Block (oben) ===== */
.mx-hb { border: 1px solid rgba(242,163,60,.35); background: linear-gradient(180deg, rgba(242,163,60,.08), rgba(242,163,60,.02)); border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; }
.mx-hb--danger { border-color: rgba(224,83,61,.4); background: linear-gradient(180deg, rgba(224,83,61,.08), rgba(224,83,61,.02)); }
.mx-hb__t { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: #ffd9a8; margin: 0 0 10px; font-weight: 800; }
.mx-hb--danger .mx-hb__t { color: #ffb9ac; }
.mx-hb__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.08); flex-wrap: wrap; }
.mx-hb__row:last-child { border-bottom: 0; }
.mx-hb__who { font-weight: 700; }
.mx-hb__what { color: #8d9aa4; font-size: 0.88rem; }
.mx-hb__row .mx-pill { margin-left: auto; }

/* Bereichs-Button-Icon fuer Fremdleistung (0.357.1). Die uebrigen Bereichs-Icons kommen
   aus dem Customizer-CSS; fuer diesen neuen Bereich liefert das Plugin das Icon selbst mit
   (gleiche Konvention: ::before am Nav-Link, gekoppelt an den href-Parameter). */
.mx-group-actions a[href*="mx_fremdleistung"]::before { content: "\1F9FE  "; }

/* ===== Listencontainer + Kopf ===== */
.mx-uilist { margin: 6px 0 0; }
.mx-lead { color: #8d9aa4; font-size: 0.88rem; margin: 0 0 6px; }

/* ===== Bereichs-Navigation — Handy: feste Bottom-App-Leiste + „Mehr"-Blatt (0.370.0, Variante B).
   Desktop zeigt weiter die klassische Button-Reihe (.mx-appbar-classic); die App-Leiste
   (.mx-appbar) erscheint nur unter 700px. Bereichs-Icons kommen aus dem ::before
   (.mx-group-actions a[href*="mx_..."]) und stehen in der Kachel/Leiste automatisch oben. */
.mx-appbar { display: none; }
/* Eigene Bereichs-Icons für die App-Leiste (unabhängig von den Customizer-mx-btn-Regeln,
   die auf dem Handy das Kachel-Layout brechen würden). Emojis = exakt die des Customizers. */
.mx-appbar__tab[href*="mx_newmachine="]::before,    .mx-appbar__gitem[href*="mx_newmachine="]::before    { content: "\2795"; }
.mx-appbar__tab[href*="mx_strecken="]::before,      .mx-appbar__gitem[href*="mx_strecken="]::before      { content: "\1F4CD"; }
.mx-appbar__tab[href*="mx_lager="]::before,         .mx-appbar__gitem[href*="mx_lager="]::before         { content: "\1F4E6"; }
.mx-appbar__tab[href*="mx_vorlagen="]::before,      .mx-appbar__gitem[href*="mx_vorlagen="]::before      { content: "\1F9F0"; }
.mx-appbar__tab[href*="mx_rennen="]::before,        .mx-appbar__gitem[href*="mx_rennen="]::before        { content: "\1F3C1"; }
.mx-appbar__tab[href*="mx_training="]::before,      .mx-appbar__gitem[href*="mx_training="]::before      { content: "\1F3AF"; }
.mx-appbar__tab[href*="mx_ausruestung="]::before,   .mx-appbar__gitem[href*="mx_ausruestung="]::before   { content: "\1F9BA"; }
.mx-appbar__tab[href*="mx_lizenz="]::before,        .mx-appbar__gitem[href*="mx_lizenz="]::before        { content: "\1F4C4"; }
.mx-appbar__tab[href*="mx_kosten="]::before,        .mx-appbar__gitem[href*="mx_kosten="]::before        { content: "\1F4B6"; }
.mx-appbar__tab[href*="mx_fremdleistung="]::before, .mx-appbar__gitem[href*="mx_fremdleistung="]::before { content: "\1F9FE"; }
.mx-appbar__tab[href*="mx_fahrer="]::before,        .mx-appbar__gitem[href*="mx_fahrer="]::before        { content: "\1F464"; }
.mx-appbar__tab[href*="mx_gruppe="]::before,        .mx-appbar__gitem[href*="mx_gruppe="]::before        { content: "\2699\FE0F"; }
.mx-appbar__tab[href*="mx_rechner="]::before,       .mx-appbar__gitem[href*="mx_rechner="]::before       { content: "\1F9EE"; }
@media (max-width: 700px) {
  .mx-appbar-classic { display: none; }
  .mx-appbar { display: block; margin: 0; }
  .mx-garage { padding-bottom: 68px; }

  .mx-appbar__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 2px; background: #14181c; border-top: 1px solid rgba(255,255,255,.16); box-shadow: 0 -10px 30px -18px #000; }
  .mx-appbar__bar .mx-appbar__tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 3px 9px; border: 0; border-radius: 0; background: transparent; color: #9aa7b0; font-size: 0.64rem; font-weight: 700; text-decoration: none; cursor: pointer; }
  .mx-appbar__bar .mx-appbar__tab::before { font-size: 1.3rem; line-height: 1; margin: 0; }
  .mx-appbar__ic { font-size: 1.3rem; line-height: 1; }
  .mx-appbar__bar .mx-appbar__lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mx-appbar__bar .mx-appbar__tab:active { color: #ec6608; }
  .mx-appbar__more.is-active { color: #ec6608; background: rgba(236,102,8,.12); box-shadow: inset 0 3px 0 #ec6608; }

  .mx-appbar__sheet { position: fixed; left: 0; right: 0; bottom: 56px; z-index: 49; background: #12171b; border-top: 1px solid rgba(255,255,255,.16); border-radius: 16px 16px 0 0; padding: 12px; box-shadow: 0 -20px 44px -22px #000; max-height: 62vh; overflow: auto; }
  .mx-appbar__sheet[hidden] { display: none; }
  .mx-appbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .mx-appbar__grid .mx-appbar__gitem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 76px; padding: 12px 6px; border-radius: 14px; background: #191f25; border: 1px solid rgba(255,255,255,.12); color: #eef3f6; font-size: 0.72rem; font-weight: 700; line-height: 1.14; white-space: normal; text-decoration: none; }
  .mx-appbar__grid .mx-appbar__gitem::before { font-size: 1.5rem; line-height: 1; margin: 0; display: block; }
  .mx-appbar__grid .mx-appbar__gitem:active { border-color: rgba(236,102,8,.55); background: #1d242b; }
}

/* ===== Aufklappbare Karte — Standard fürs ganze Plugin (0.364.0).
   Klick auf die Kopfzeile (summary) klappt Detail bzw. Bearbeiten-Formular an Ort
   und Stelle auf. Kein Seitenwechsel, kein toter Klickbereich, mobil-first.
   Klasse mx-card bleibt an jeder Karte — Filter-/Pagination-JS greift darauf zu. */
#mx-stf-list { border: 1px solid rgba(255,255,255,.16); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #171c22, #12171b); }
/* Basis-.mx-card-Optik (Rand, Radius, Polster, Schatten) im Listencontainer neutralisieren,
   damit die Karten als nahtlose Liste mit Trennlinien erscheinen (ID-Spezifität schlägt .mx-garage .mx-card). */
#mx-stf-list > .mx-strcard { padding: 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; box-shadow: none; background: transparent; }
#mx-stf-list > .mx-strcard:last-child { border-bottom: 0; }

.mx-strcard { position: relative; }
.mx-strcard__sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.mx-strcard__sum::-webkit-details-marker { display: none; }
.mx-strcard__sum:hover { background: rgba(255,255,255,.03); }
.mx-strcard__main { min-width: 0; flex: 1 1 auto; }
.mx-strcard__t { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: .2px; }
.mx-strcard[open] .mx-strcard__t { color: #ffcda3; }
.mx-strcard__sum .mx-chips { margin: 6px 0 0; }
.mx-strcard__sum .mx-pill { flex: 0 0 auto; }
.mx-strcard__chev { flex: 0 0 auto; color: #8d9aa4; font-size: 1.4rem; line-height: 1; transition: transform .15s ease; transform: rotate(90deg); }
.mx-strcard[open] .mx-strcard__chev { transform: rotate(-90deg); }
.mx-strcard__body { padding: 4px 16px 16px; border-top: 1px solid rgba(255,255,255,.10); }
.mx-strcard__body .mx-form { margin-top: 10px; }

/* Read-only Detailgruppen im Karten-Body */
.mx-detgroup { margin: 12px 0 0; }
.mx-detgroup__t { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .5px; color: #93a0aa; font-weight: 800; margin: 0 0 7px; }

/* ===== Generische Aufklapp-Karte .mx-ec (0.365.0) — Standard-Baustein fürs ganze Plugin.
   Eigenständig (nicht im Filter-Container): Klick auf die Kopfzeile klappt an Ort und
   Stelle auf; im Body die Aktionen bzw. das Bearbeiten-Formular inline. Mobil-first. */
.mx-ec { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: linear-gradient(180deg, #171c22, #12171b); overflow: hidden; margin: 0 0 10px; box-shadow: 0 8px 24px -18px #000; }
.mx-ec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ec6608, rgba(236,102,8,.15)); z-index: 1; }
.mx-ec[data-status="warn"]::before { background: linear-gradient(90deg, #f2a33c, rgba(242,163,60,.15)); }
.mx-ec[data-status="danger"]::before { background: linear-gradient(90deg, #e0533d, rgba(224,83,61,.15)); }
.mx-ec[data-status="muted"]::before { background: linear-gradient(90deg, #3a3f47, rgba(58,63,71,.15)); }
.mx-ec.is-archiviert { opacity: .65; }
.mx-ec__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 42px 14px 16px; cursor: pointer; list-style: none; position: relative; -webkit-tap-highlight-color: transparent; }
.mx-ec__sum::-webkit-details-marker { display: none; }
.mx-ec__sum:hover { background: rgba(255,255,255,.03); }
.mx-ec__main { min-width: 60%; flex: 1 1 auto; }
.mx-ec__t { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: .2px; }
.mx-ec__sum .mx-chips { margin: 6px 0 0; }
.mx-ec__sum .mx-pill { flex: 0 0 auto; }
.mx-ec__chev { position: absolute; top: 15px; right: 14px; flex: 0 0 auto; color: #8d9aa4; font-size: 1.4rem; line-height: 1; transition: transform .15s ease; transform: rotate(90deg); }
.mx-ec[open] .mx-ec__chev { transform: rotate(-90deg); }
.mx-ec[open] .mx-ec__t { color: #ffcda3; }
.mx-ec__body { padding: 6px 16px 16px; border-top: 1px solid rgba(255,255,255,.10); }
.mx-ec__body .mx-actbar { margin-top: 12px; }
/* im aufgeklappten Body liegt das bestehende Formular in einem offenen <details> —
   dessen eigenen Summary („Plan bearbeiten") blenden wir aus, da die Karte den Kontext
   schon liefert; das Formular steht damit direkt und offen im Body. */
/* 0.384.0: Bearbeiten-Form im mx-ec-Body FLACH wie bei Abstimmung. Das .mx-collapse ist sonst
   eine zweite Karte (Rahmen rundum + oranger 3px-Linksbalken + Hintergrund + 14px Inhalts-Rand)
   → Kasten-im-Kasten, wirkt schmaler/boxiger. Abstimmung rendert ein nacktes <form> direkt.
   Hier die Box komplett auflösen und den Inhalt randlos setzen, damit Wartung = Abstimmung.
   Höhere Spezifität (.mx-garage …, 0,3,0) schlägt die Box-Regeln aus mx-garage-teil2.css. */
.mx-garage .mx-ec__body > .mx-collapse { margin: 6px 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.mx-garage .mx-ec__body > .mx-collapse > summary { display: none; }
.mx-garage .mx-ec__body > .mx-collapse > *:not(summary) { margin-left: 0; margin-right: 0; }

/* 0.381.0: Abstimmungs-/Setup-Sektionen flach statt Kasten-im-Kasten. Der <fieldset>-Rahmen
   um jede Sektion (Gabel, Federbein, Übersetzung …) war eine zweite Box um die ohnehin
   gerahmte Rechner-Karte → doppelte Ränder + doppelter Innenabstand, die auf dem Handy die
   Breite fressen. Das Fieldset wird zur reinen Überschrift + Inhalt (eine Ebene); die
   Rechner-Karte bleibt der einzige Kasten und nutzt die volle Breite. Gilt überall. */
.mx-garage .mx-fieldset { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.mx-garage .mx-fieldset > legend {
  display: block; float: none; width: auto; padding: 0; margin: 2px 0 9px;
  font-family: var(--mx-disp, 'Barlow Semi Condensed', system-ui, sans-serif);
  font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; color: var(--mx-ink, #eef3f6);
}
/* 0.382.0: Rechner-Labels nicht mitten im Wort trennen (z. B. „TYPABHÄNGIG"). */
.mx-garage .mxr-eyebrow, .mx-garage .mxr-fld label,
.mx-garage .mxr-field > span, .mx-garage .mxr-block .mxr-field > span { -webkit-hyphens: manual; hyphens: manual; }
/* 0.382.0 / 0.383.0: Mobil den äußeren Rand (Kadence-Wrapper-Block + .mx-garage) stark
   reduzieren → der Inhalt nutzt fast die volle Displaybreite. Das horizontale Padding des
   Wrappers kommt aus block-gebundenem Kadence-CSS (.mx-plugin-wrap{padding:… 16px !important}
   bei ≤768px).
   0.383.0 WICHTIG: OHNE :has(). Älteres iOS-Safari (< 15.4) kennt :has() nicht → dort fiel der
   frühere Override (.mx-plugin-wrap:has(.mx-garage)) komplett weg und der breite Rand blieb.
   Ersatz: doppelte Klasse (.mx-plugin-wrap.mx-plugin-wrap) liefert dieselbe Spezifität (0,2,0),
   schlägt die Theme-Regel (0,1,0 !important) und funktioniert auf JEDEM Browser. */
@media (max-width: 560px) {
  .mx-plugin-wrap.mx-plugin-wrap { padding-left: 6px !important; padding-right: 6px !important; }
  .mx-plugin-wrap .mx-garage { padding-left: 8px !important; padding-right: 8px !important; }
  .mx-garage .mx-ec__body { padding-left: 10px; padding-right: 10px; }
  .mx-garage .mx-rechner .mxr-card,
  .mx-garage .mx-rechner .mxr-tool > .mxr-block { padding-left: 10px; padding-right: 10px; }
}

/* Filter-/Suchleiste mobil-freundlich: Felder umbruchfähig und ausreichend groß */
#mx-stf-toolbar input[type="search"], #mx-stf-toolbar select { background: #191f25; color: #eef3f6; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 8px 10px; font-size: 0.85rem; min-height: 38px; max-width: 100%; }
#mx-stf-toolbar input[type="search"]::placeholder { color: #6b7681; }
#mx-stf-toolbar input[type="search"]:focus, #mx-stf-toolbar select:focus { outline: none; border-color: rgba(236,102,8,.6); box-shadow: 0 0 0 2px rgba(236,102,8,.15); }
#mx-stf-toolbar label { color: #8d9aa4; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  #mx-stf-toolbar { gap: 8px; }
  #mx-stf-toolbar > input[type="search"], #mx-stf-toolbar > select { flex: 1 1 100%; min-width: 0; }
}