/* Ergänzungen der WMS-Landingpage (Nutzer 13.10.2026) zum Gerüst landing.css und zum Stylesheet des Tools
   (wms-app/css/wms.css). Hier steht nur, was die Karten des WMS brauchen: Fläche wie #main-wrapper, Dialoge und
   Scan-Fehlermeldung über der Karte statt über der Seite, der Demo-Scanner unter den Scanfeldern. */

/* bootstrap.css des WMS ergänzt die Markenfarbe als --bs-tertiary (Seitenleiste); die Seite lädt das CSS des CRM */
:root {
  --bs-tertiary: #1b3661;
  --bs-tertiary-rgb: 27, 54, 97;
}

/* ---------- Fläche der Karte wie #main-wrapper-inner: Kopfzeile fest, #main scrollt ---------- */
.lp-wms .lp-mod { isolation: isolate; }
.lp-wms .lp-app[data-wms-scene] { overflow: hidden; }
/* Der Rasterabstand der Bootstrap-Zeilen (.row.g-3, −8 px je Seite) ragt über #main hinaus; abgeschnitten wie bei POS,
   damit keine waagrechte Scrollleiste entsteht (Nutzer 13.10.2026) */
.lp-wms-main { scroll-behavior: smooth; overscroll-behavior: contain; overflow-x: hidden; }
.lp-wms .lp-wms-shell > .wms-topbar { position: relative; z-index: 3; flex: 0 0 auto; }

/* ---------- Dialoge des Tools (#wms-overlay-root, Application.js modal) über der Karte ---------- */
.lp-mod > #wms-overlay-backdrop,
.lp-mod > #wms-overlay-root > .modal,
.lp-mod > #wms-overlay-root > .side-modal,
.lp-mod > .wms-scan-alert {
  position: absolute !important;
}
.lp-mod > #wms-overlay-backdrop { inset: 0; width: auto; height: auto; }
.lp-mod > #wms-overlay-root > .modal { inset: 0; width: 100%; height: 100%; }
.lp-mod > #wms-overlay-root > .modal .modal-dialog { margin: 1rem auto; }
.lp-mod > #wms-overlay-root > .modal .modal-dialog-scrollable { height: calc(100% - 2rem); }
.lp-mod > #wms-overlay-root > .side-modal { top: 0; right: 0; height: 100%; }
/* Die Hülle trägt .dvh-100 (Fensterhöhe, mit !important); in der Karte zählt deren Höhe, sonst liegen die Knöpfe unten
   außerhalb der Karte */
.lp-mod > #wms-overlay-root > .side-modal.dvh-100 { height: 100% !important; }
.lp-mod > .wms-scan-alert { inset: 0; border-radius: inherit; }
/* Ohne Bootstrap-Modal zeigt Application.js den Dialog mit .show.d-block; der Einblendweg bleibt wie im Tool */
#wms-overlay-root > .modal.show { opacity: 1; }

/* ---------- Demo-Scanner (bewusste Ergänzung: Besucher haben keinen Handscanner) ---------- */
.lp-scan-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .4rem;
  padding: 0 1rem .6rem;
  font-size: .8rem;
}
.lp-mod .pick .lp-scan-demo,
.lp-scan-demo[data-lp-scan-target="view"] { padding: .5rem 0 0; }
.lp-scan-demo-k {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .12rem .55rem;
  border: 1px dashed color-mix(in srgb, var(--bs-primary) 45%, transparent);
  border-radius: 999px;
  color: var(--bs-primary);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.lp-scan-chip {
  padding: .12rem .55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-font-monospace);
  font-size: .78rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.lp-scan-chip:hover,
.lp-scan-chip:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
  outline: none;
}
/* Hero-Folien: Kopien der Karten ohne Demo-Hilfe */
.hp-hero-canvas .lp-scan-demo { display: none !important; }

/* ---------- Meldungen des Tools unten rechts (oben rechts liegt der „i“-Knopf der Tour) ---------- */
.lp-wms #wms-toasts { top: auto; bottom: 0; max-height: 60vh; }

@media (max-width: 767.98px) {
  .lp-scan-demo { padding: 0 .75rem .5rem; }
}

/* Warteschleife: Name und Regeln nehmen den Rest der Zeile und kürzen, statt Sortiernummer und „Erstellen“ in eigene
   Zeilen zu schieben (die Spalte ist in der Karte schmaler als in #main des Tools) */
.lp-mod .wms-queue-entry > .card-body,
.lp-mod [data-unassigned] > .card-body { flex-wrap: nowrap !important; }
.lp-mod .wms-queue-entry > .card-body > [data-toggle],
.lp-mod [data-unassigned] > .card-body > [data-toggle] { flex: 1 1 0; min-width: 0; }
.lp-mod .wms-queue-entry > .card-body > [data-toggle] > .fs-5 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pick & Warenausgang: Warteschleife über den Picklisten, wie das Tool unter 1200 px Breite (col-xl-5 | col-xl).
   Die Karte ist schmaler als #main im Tool; nebeneinander wäre die aufgeklappte Auftragsliste der Warteschleife
   breiter als ihre Spalte (keine waagrechten Scrollleisten, Nutzer 13.10.2026). */
.lp-mod .warenausgang [data-panel="pick"] > .row > .col-xl-5,
.lp-mod .warenausgang [data-panel="pick"] > .row > .col-xl { flex: 0 0 100%; width: 100%; max-width: 100%; }

/* Lagertechnik: Automationsaufträge über den Pickstationen, wie das Tool unter 1400 px Breite (col-xxl-8 | col-xxl-4).
   Nebeneinander schneidet die Karte „Wiederholen“ und „Sperren“ ab (keine waagrechten Scrollleisten, Nutzer 13.10.2026). */
.lp-mod .lagertechnik .row > .col-xxl-8,
.lp-mod .lagertechnik .row > .col-xxl-4 { flex: 0 0 100%; width: 100%; max-width: 100%; }

/* ---------- Mobil-App: schmale Karte in Handybreite ohne Gerätrahmen (Nutzer 13.10.2026) ---------- */
@media (min-width: 768px) {
  #lp-mobil.lp-mod { width: min(400px, 88vw); }
}
.lp-app[data-wms-scene="mobil"] { padding: 0; }
/* wms.css setzt das Scanfeld der Kopfleiste über body.wms-mobile; in der Karte trägt die Hülle die Klasse (Werte wie
   wms.css 0.1.9, seit dort hell auf Hell im Darkmode behoben) */
.lp-wms-mobile .wms-mobile-bar .form-control {
  background: var(--cin-surface-subtle);
  color: var(--bs-body-color);
  border: 0;
  border-radius: 0.6rem;
  padding-left: 0.85rem;
}
/* Scan-Knopf btn-primary: layout-material.css macht Knöpfe in Eingabegruppen durchsichtig mit der Schriftfarbe des
   Knopfs, das weiße Symbol verschwindet (auch im Tool 0.1.9, Befund für das Tool). Hier wie gemeint blau. */
.lp-wms-mobile .wms-mobile-bar .input-group > .btn-primary {
  background-color: var(--bs-primary);
  color: #fff;
  border-radius: 0 0.6rem 0.6rem 0;
}
.lp-wms-mobile > .lp-scan-demo {
  padding: .5rem .75rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* ---------- Robo-Kommissionierung (Nutzer 14.10.2026): Aufbau wie die Preis-Rubrik, Text links, S100 rechts,
   keine Animation; Handy einspaltig Text, Bild, Knopf ---------- */
.lp-robo {
  width: min(1100px, 100% - 2.8rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy fig" "act fig";
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Die Preis-Rubrik folgt direkt mit ihrem eigenen Abstand oben */
.lp-robo-scene { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.lp-robo-copy { grid-area: copy; align-self: end; }
.lp-robo-actions { grid-area: act; align-self: start; }
.lp-robo-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 30rem; }
.lp-robo-list li { display: flex; gap: .65rem; align-items: flex-start; color: #3d3830; font-size: .95rem; }
.lp-robo-list i { color: #1b3661; font-size: 1.05rem; line-height: 1.35; }
.lp-robo-fig {
  grid-area: fig;
  margin: 0;
  padding: 1.6rem 1.4rem 1rem;
  display: grid;
  justify-items: center;
  gap: .6rem;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #eef3fb 0%, #fff 70%);
  border: 1px solid color-mix(in srgb, #1b3661 26%, #e5e7eb);
  box-shadow: 0 18px 44px rgb(27 54 97 / .1);
}
.lp-robo-fig img { height: 260px; width: auto; max-width: 100%; object-fit: contain; }
.lp-robo-fig figcaption { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7a7368; }
html[data-bs-theme="dark"] .lp-robo-list li { color: #9ca3af; }
html[data-bs-theme="dark"] .lp-robo-list i { color: #8cbaf2; }
html[data-bs-theme="dark"] .lp-robo-fig {
  background: radial-gradient(circle at 50% 42%, #1f2a3a 0%, #161b22 70%);
  border-color: #30363d;
}
@media (max-width: 767.98px) {
  .lp-robo {
    width: calc(100% - 1.5rem);
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "fig" "act";
    row-gap: 1.2rem;
  }
  .lp-robo-fig img { height: 180px; }
  .lp-robo-actions { margin-top: 0; }
}