/*
 * BetriebsPass (Cloud) – App-Stile.
 *
 * Design-Grundwerte: gekennzeichnete Kopie der zentralen Werksnorm
 * (main-appstudio-website/design-norm.css, Stand 2026-07-04). Die App bindet
 * zusätzlich shared-ui.css (Portalkopf/Logo) und design-norm.css (Maß-Norm)
 * ein; diese Datei ergänzt nur die BetriebsPass-eigenen Bausteine.
 *
 * WICHTIG: Keine style="..."-Attribute im App-Code — die
 * Content-Security-Policy (style-src 'self') blockiert Inline-Stile.
 * Gestaltung ausschließlich über die Klassen dieser Datei.
 */

:root {
  color-scheme: light;

  /* Markenfarben (Werksnorm-Kopie) */
  --navy: #071b36;
  --navy-soft: #123050;
  --aqua: #17c3c8;
  --aqua-text: #08777b;
  --aqua-light: #9cf0e8;
  --aqua-soft: #e7f7f4;

  /* Text und Flächen */
  --ink: #102135;
  --muted: #607083;
  --paper: #f5f8f7;
  --white: #ffffff;
  --line: rgba(7, 27, 54, .14);

  /* Statusfarben (Ampel) */
  --green: #1f8b66;
  --amber: #8a6300;
  --red: #c23b3b;
  --blue: #275f8f;

  /* Maß-Norm */
  --radius: 16px;
  --feld-radius: 12px;
  --feld-hoehe: 48px;
  --karten-innen: 22px;
  --schatten: 0 8px 30px rgba(7, 27, 54, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--aqua-text); }

/* ---------- App-Rahmen ---------- */

.bp-app { min-height: 100vh; display: flex; flex-direction: column; }

/* Kopfband + Reiter kommen aus der Werksnorm (ma-app-kopf/ma-tab-leiste,
   design-norm.css). Hier nur die App-eigene Titelzeile. */
.bp-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.bp-kopf h1 { margin: 0; font-size: 22px; }
.bp-kopf-untertitel { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: 14px; }

.bp-inhalt {
  flex: 1;
  padding: 20px 24px 60px;
  /* Plattform-Breite wie EinsatzPlaner: Die Nachweistabelle im
     Dokumentenschrank (6 Spalten inkl. Knopfleiste) braucht mehr als die
     frueheren 1100px - sonst rollt die Karte seitlich, obwohl der
     Bildschirm Platz haette. */
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Karten, Leerzustände ---------- */

.bp-karte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--karten-innen);
  margin-bottom: 18px;
  /* Tabellen in Karten dürfen auf schmalen Bildschirmen seitlich rollen,
     statt aus dem Feld zu laufen (Layout-Regel: kein Textüberlauf). */
  overflow-x: auto;
}

.bp-karte h2 { margin-top: 0; }

/* Einklappbare Karte für lange Listen (UI-Regel: standardmäßig zu,
   Titel + Anzahl im Kopf). */
details.bp-karte > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  list-style: none;
}
details.bp-karte > summary::-webkit-details-marker { display: none; }
details.bp-karte > summary::after { content: " ⌄"; color: var(--muted); font-size: 15px; }
details.bp-karte[open] > summary::after { content: " ⌃"; }
details.bp-karte > summary .bp-anzahl { color: var(--muted); font-weight: 400; font-size: 15px; }

.bp-leer {
  text-align: center;
  color: var(--muted);
  padding: 42px 16px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.bp-leer h2 { margin-top: 0; color: var(--ink); }

.bp-lade { text-align: center; color: var(--muted); padding: 42px 16px; }

/* ---------- Kennzahlen ---------- */

.bp-kachel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.bp-kachel {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--karten-innen);
}

.bp-kachel-wert { font-size: 28px; font-weight: 700; color: var(--navy); }
.bp-kachel-label { color: var(--muted); font-size: 14px; }
/* Kachel-Ampel: Kante OBEN wie beim NachtragsPilot und EinsatzPlaner
   (vorher links - plattformweit vereinheitlicht). Zahl und Symbol tragen
   dieselbe Statusfarbe; Text bleibt immer dabei, nie Farbe allein. */
.bp-kachel--gut { border-top: 4px solid var(--green); }
.bp-kachel--warnung { border-top: 4px solid var(--amber); }
.bp-kachel--kritisch { border-top: 4px solid var(--red); }
.bp-kachel--info { border-top: 4px solid var(--blue); }

.bp-kachel--gut .bp-kachel-wert, .bp-kachel--gut .bp-kachel-symbol { color: var(--green); }
.bp-kachel--warnung .bp-kachel-wert, .bp-kachel--warnung .bp-kachel-symbol { color: var(--amber); }
.bp-kachel--kritisch .bp-kachel-wert, .bp-kachel--kritisch .bp-kachel-symbol { color: var(--red); }
.bp-kachel--info .bp-kachel-wert, .bp-kachel--info .bp-kachel-symbol { color: var(--blue); }

.bp-kachel-symbol {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: .55;
}

.bp-kachel-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Status (immer Text + Farbe, nie Farbe allein) ---------- */

.bp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.bp-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Helle Status-Hintergründe werden aus den Norm-Statusfarben gemischt –
   keine eigenen Hex-Werte (Werksnorm-Regel). */
.bp-status--gueltig { background: color-mix(in srgb, var(--green) 12%, var(--white)); color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.bp-status--laeuft-ab { background: color-mix(in srgb, var(--amber) 12%, var(--white)); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.bp-status--abgelaufen { background: color-mix(in srgb, var(--red) 10%, var(--white)); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.bp-status--fehlt { background: color-mix(in srgb, var(--red) 10%, var(--white)); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.bp-status--ohne-ablauf { background: var(--paper); color: var(--muted); border-color: var(--line); }
.bp-status--info { background: color-mix(in srgb, var(--blue) 10%, var(--white)); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }

/* ---------- Tabellen und Zeilenkarten ---------- */

.bp-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.bp-tabelle th, .bp-tabelle td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}

.bp-tabelle th { background: var(--paper); color: var(--muted); font-weight: 600; }

.bp-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bp-zeile:hover {
  box-shadow: 0 8px 20px rgba(7, 27, 54, .10);
  transform: translateY(-1px);
}

/* Status-Akzentkante links: dieselbe Ampel wie die Status-Pille rechts */
.bp-zeile--gueltig { border-left-color: var(--green); }
.bp-zeile--laeuft-ab { border-left-color: var(--amber); }
.bp-zeile--abgelaufen, .bp-zeile--fehlt { border-left-color: var(--red); }

/* Dateiname als Plakette mit Dokument-Symbol statt umbrechendem Rohtext */
.bp-datei-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 132px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
/* Auslassung ("...") wirkt nicht auf inline-flex-Containern, deshalb
   liegt der Dateiname in einem eigenen Element. Voller Name im Tooltip. */
.bp-datei-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bp-datei-chip svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ansehen/Ersetzen in Tabellenzeilen auf EINER Linie (UI-Regel) */
.bp-tabelle .bp-knopfzeile { flex-wrap: nowrap; gap: 8px; }

/* Der mittlere Knopf traegt je nach Zeile "Ersetzen" oder "Datei anhaengen".
   Ohne feste Breite ruecken die Knoepfe der Zeilen dann auseinander
   (rechtsbuendige Knopfzeile). Die Mindestbreite entspricht dem laengeren
   Text "Datei anhängen", damit alle Knoepfe exakt untereinander stehen. */
.bp-tabelle .bp-btn--datei-aktion { min-width: 125px; }

/* Auftraggeber-Ansicht am Handy: Die Nachweistabelle wird zeilenweise
   gestapelt (Kopfzeile weg, jede Zeile ein Block), damit Status und die
   Knöpfe Öffnen/Herunterladen ohne Seitwärtsrollen erreichbar sind. */
@media (max-width: 700px) {
  .bp-paket-ansicht .bp-tabelle thead { display: none; }
  .bp-paket-ansicht .bp-tabelle, .bp-paket-ansicht .bp-tabelle tbody { display: block; }
  .bp-paket-ansicht .bp-tabelle tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  .bp-paket-ansicht .bp-tabelle td {
    display: block;
    border: none;
    padding: 3px 0;
  }
  .bp-paket-ansicht .bp-tabelle .bp-knopfzeile { flex-wrap: wrap; }
}

/* Dokumentenschrank am Handy: Die Nachweistabelle wird zeilenweise gestapelt
   (gleiches Muster wie die Paket-Ansicht oben) - jede Zeile ein Block mit
   Titel, Status, Datei und Knoepfen untereinander, ohne Seitwaertsrollen.
   Opt-in per Zusatzklasse, andere bp-Tabellen bleiben unveraendert. */
@media (max-width: 700px) {
  .bp-tabelle--stapelbar thead { display: none; }
  .bp-tabelle--stapelbar, .bp-tabelle--stapelbar tbody { display: block; }
  .bp-tabelle--stapelbar tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  .bp-tabelle--stapelbar tr:last-child { border-bottom: none; }
  .bp-tabelle--stapelbar td {
    display: block;
    border: none;
    padding: 3px 0;
  }
  .bp-tabelle--stapelbar td.bp-rechts { text-align: left; }
  /* Ausblendklasse behaelt auch hier das letzte Wort (die Stapel-Regel
     oben ist sonst spezifischer als .bp-versteckt). */
  .bp-tabelle--stapelbar td.bp-versteckt { display: none; }
  .bp-tabelle--stapelbar .bp-knopfzeile {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 4px;
  }
  /* Nackte Werte tragen ihre Spaltenueberschrift als Vorsatz, sonst ist
     z. B. das Ausstellungsdatum ohne Kopfzeile nicht einzuordnen. */
  .bp-tabelle--stapelbar td:nth-child(2)::before { content: "Gilt für: "; color: var(--muted); }
  .bp-tabelle--stapelbar td:nth-child(3)::before { content: "Ausgestellt: "; color: var(--muted); }
}

.bp-zeile-haupt { min-width: 220px; flex: 1 1 auto; }
.bp-zeile-titel { font-weight: 700; color: var(--navy); }
.bp-zeile-neben { color: var(--muted); font-size: 14px; }

/* ---------- Knöpfe ---------- */

.bp-btn {
  border: none;
  border-radius: var(--feld-radius);
  min-height: var(--feld-hoehe);
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* Knopftext bricht nie im Wort um ("Datei / anhaengen") - bei Platznot
     wickelt die Knopfzeile ganze Knoepfe in die naechste Zeile. */
  white-space: nowrap;
}

.bp-btn--primaer { background: var(--aqua); color: var(--navy); }
.bp-btn--primaer:hover, .bp-btn--primaer:focus-visible { color: color-mix(in srgb, var(--navy) 70%, var(--aqua-text)); }
.bp-btn--sekundaer { background: transparent; border: 1px solid var(--line); color: var(--ink); }
/* Löschknopf nach Werksnorm: dezent, wird erst beim Überfahren rot
   (kein flächiges Rot – UI-Standard "leise Gefahr"). */
.bp-btn--leise-gefahr { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.bp-btn--leise-gefahr:hover, .bp-btn--leise-gefahr:focus-visible {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--white));
}
.bp-btn--klein { min-height: 36px; padding: 0 12px; font-size: 13px; }
.bp-btn:disabled { opacity: .55; cursor: not-allowed; }

.bp-knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.bp-knopfzeile--rechts { justify-content: flex-end; }

/* ---------- Formulare (Maß-Norm) ---------- */

.bp-formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.bp-formular select,
.bp-filterleiste input,
.bp-filterleiste select {
  min-height: var(--feld-hoehe);
  border-radius: var(--feld-radius);
  border: 1px solid var(--line);
  padding: 0 12px;
  font-size: 15px;
  font-family: inherit;
  background-color: var(--white);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.bp-formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.bp-formular select {
  width: 100%;
}

.bp-formular select,
.bp-filterleiste select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%;
  background-size: 9px 9px, 9px 9px;
  background-repeat: no-repeat;
}

.bp-formular textarea {
  width: 100%;
  border-radius: var(--feld-radius);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  background-color: var(--white);
  color: var(--ink);
}

.bp-formular input[type="file"] {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}

.bp-feld { display: block; margin-bottom: 14px; }
.bp-feld-titel { display: block; font-weight: 600; margin-bottom: 6px; }
.bp-hilfetext { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.bp-hinweis { color: var(--muted); font-size: 14px; }

.bp-formular-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: start;
}

.bp-filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

/* Feld-Gestaltung kommt aus der gemeinsamen Norm-Regel oben –
   hier nur die Breitenaufteilung in der Leiste. */
.bp-filterleiste select, .bp-filterleiste input {
  flex: 1 1 170px;
}

.bp-kontrollzeile { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.bp-kontrollzeile input { margin-top: 4px; }

/* ---------- Logo-Vorschau (Betriebsprofil) ---------- */

.bp-logo-vorschau {
  max-height: 90px;
  max-width: 260px;
  border: 1px solid var(--line);
  border-radius: var(--feld-radius);
  background: var(--white);
  padding: 8px;
  display: block;
  margin-bottom: 10px;
}

/* ---------- Dialog ---------- */

.bp-dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 54, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 16px;
}

.bp-dialog {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
}

.bp-dialog h2 { margin-top: 0; }

/* ---------- Aufzählungen: hängende Einrückung ---------- */

.bp-liste { margin: 0; padding: 0; list-style: none; }
.bp-liste li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.bp-liste li::before { content: "–"; position: absolute; left: 0; color: var(--muted); }

/* Nummerierte Erste-Schritte-Führung (native Nummerierung, hängende Einrückung). */
.bp-schritte { margin: 8px 0 0; padding-left: 24px; }
.bp-schritte li { margin-bottom: 8px; padding-left: 4px; }
.bp-schritte li::marker { color: var(--aqua-text); font-weight: 700; }

/* Häufige Fragen (Hilfe): einklappbare Frage/Antwort. */
.bp-faq { border-top: 1px solid var(--line); padding: 10px 0; }
.bp-faq:last-child { border-bottom: 1px solid var(--line); }
.bp-faq > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.bp-faq > summary::-webkit-details-marker { display: none; }
.bp-faq > summary::after { content: " ⌄"; color: var(--muted); }
.bp-faq[open] > summary::after { content: " ⌃"; }
.bp-faq p { margin: 8px 0 0; }

/* ---------- Hilfsklassen ---------- */

.bp-gedaempft { color: var(--muted); }
.bp-rechts { text-align: right; }
.bp-mt-8 { margin-top: 8px; }
.bp-mt-16 { margin-top: 16px; }
.bp-mb-16 { margin-bottom: 16px; }
.bp-mb-24 { margin-bottom: 24px; }
.bp-versteckt { display: none; }
.bp-block { display: block; }
.bp-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
  display: block;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--feld-radius);
  box-shadow: var(--schatten);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100001;
  max-width: calc(100vw - 32px);
}

.toast--sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast--kritisch { background: var(--red); }
.toast--info { background: var(--blue); }

/* ---------- Öffentliche Paket-Ansicht (paket-ansicht.html) ---------- */

.bp-paket-ansicht { max-width: 760px; margin: 0 auto; padding: 20px 16px 80px; }

.bp-paket-kopf {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 18px;
}

.bp-paket-kopf h1 { margin: 0 0 4px; font-size: 20px; }
.bp-paket-kopf p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 14px; }
.bp-paket-logo { max-height: 64px; max-width: 220px; margin-bottom: 12px; display: block; background: var(--white); border-radius: 10px; padding: 6px; }

@media print {
  .bp-kopf, .toast, .bp-dialog-hintergrund, .bp-nicht-drucken, .mainapp-shell-kopf { display: none !important; }
}

/* Rechtslinks-Fusszeile der Freigabe-/Paketansicht: Datenschutz und Impressum
   muessen auch auf per Link geteilten Seiten erreichbar sein. */
.legal-fusszeile {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 18px 16px 24px;
}

.legal-fusszeile a {
  color: var(--muted, #5b6b7f);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

.legal-fusszeile a:hover,
.legal-fusszeile a:focus-visible {
  color: var(--navy, #071b36);
}