/* RUESS Hub 2.44.1 - Kommissionierung. Eigene Datei, ausschließlich mit dem Präfix .kom-* bzw.
   #kommissionierung* - keine globalen Regeln, keine Änderung an bestehenden Klassen.
   Optik: heller RUESS-Hub-Stil, Karten, kompakt, große Packbuttons, responsive, keine Bilder. */

.kom-page { display: flex; flex-direction: column; gap: 16px; }

.kom-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kom-toolbar .kom-spacer { flex: 1 1 auto; }

.kom-message { padding: 10px 14px; border-radius: 10px; background: #f1f6e7; color: #323a3b; font-size: 13px; }
.kom-message.error { background: #fdecec; color: #9d3636; }

.kom-empty { color: #667174; font-size: 13px; padding: 12px 0; }
.kom-hint { color: #667174; font-size: 12px; display: block; }

.kom-card { background: #fff; border: 1px solid #d7ddd0; border-radius: 14px; padding: 16px; }
.kom-empty-state { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kom-empty-title { margin: 0; font-size: 15px; font-weight: 600; color: #323a3b; }
.kom-empty-text { margin: 0; font-size: 13px; color: #667174; }
/* 2.44.5: kompakte Empty-State-Karte - nur so breit wie ihr Text, keine leere Großfläche. */
.kom-empty-compact { width: max-content; max-width: 100%; padding: 11px 16px; }
.kom-empty-compact .kom-empty-title { font-size: 14px; }

.kom-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: #eef1ea; color: #323a3b;
}
.kom-chip-warn { background: #fdf2e0; color: #8a5a17; }
.kom-status-offen { background: #eef1ea; }
.kom-status-in-bearbeitung { background: #e6f0fb; color: #1f4f80; }
.kom-status-abgeschlossen, .kom-status-gepackt { background: #f1f6e7; color: #4d6b0a; }
.kom-status-abgebrochen, .kom-status-nicht-gefunden { background: #fdecec; color: #9d3636; }
.kom-status-teilweise, .kom-status-nicht-kommissionierbar { background: #fdf2e0; color: #8a5a17; }

.kom-progress { height: 6px; border-radius: 999px; background: #eef1ea; overflow: hidden; }
.kom-progress span { display: block; height: 100%; background: #a2bf13; }

/* --- Kompakte Textbuttons ----------------------------------------------------
   Die globale Regel button{width:100%;padding:14px;margin-top:16px} macht aus jedem Knopf
   einen vollbreiten Balken. Innerhalb dieses Moduls sind Knöpfe normale, kompakte
   Textbuttons - ausschließlich über eigene .kom-*-Klassen, ohne globale Regel. */
.kom-btn {
  width: auto; margin: 0; padding: 9px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.kom-btn-small { padding: 7px 13px; font-size: 12.5px; }
.kom-btn:disabled { opacity: .55; cursor: not-allowed; }
.kom-page-toolbar { justify-content: flex-end; }

/* --- Aktive Auftragsübersicht ------------------------------------------------
   Sammelaufträge stehen untereinander über die volle Contentbreite - keine
   nebeneinanderliegenden Minikarten. */
.kom-order-list { display: flex; flex-direction: column; gap: 12px; }
.kom-order-card, .kom-batch-card { display: flex; flex-direction: column; gap: 8px; }
.kom-order-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.kom-order-title { min-width: 0; }
.kom-order-number { display: block; font-size: 16px; font-weight: 700; color: #323a3b; }
.kom-order-customer { display: block; font-size: 13px; color: #667174; }
.kom-order-chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kom-order-figures { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 13px; color: #667174; }
.kom-order-figures strong { color: #323a3b; font-size: 15px; }
.kom-order-progress-label { margin: 2px 0 0; font-size: 13px; color: #667174; }
.kom-order-progress-label strong { color: #323a3b; font-size: 15px; }
.kom-order-meta { margin: 0; font-size: 12px; color: #667174; }
.kom-order-actions { display: flex; gap: 8px; align-items: center; }
.kom-order-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; }
.kom-order-actionbar { margin-bottom: 10px; }
.kom-row-empty { color: #97a09a; }

/* --- Packansicht ------------------------------------------------------------- */
.kom-work { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.kom-work-main { display: flex; flex-direction: column; gap: 10px; }
.kom-work-head { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.kom-work-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667174; }
.kom-fullscreen-toggle {
  border: 1px solid #d7ddd0; background: #fff; color: #323a3b; border-radius: 9px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.kom-fullscreen-toggle:hover { background: #f1f6e7; }
.kom-work-title { margin: 0; font-size: clamp(20px, 3vw, 28px); color: #323a3b; }
.kom-work-subtitle { margin: 0; font-size: 14px; color: #667174; }

.kom-work-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 6px 0 0; }
.kom-work-facts div { display: flex; flex-direction: column; gap: 2px; }
.kom-work-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #667174; }
.kom-work-facts dd { margin: 0; font-size: 15px; color: #323a3b; }
.kom-work-customer dd, .kom-work-place dd {
  font-family: "Consolas", "SFMono-Regular", monospace; font-size: 18px; font-weight: 700; letter-spacing: .04em;
}

.kom-work-alert {
  margin: 4px 0 0; padding: 12px 14px; border-radius: 12px;
  background: #fdf2e0; border: 1px solid #e8c583; color: #8a5a17;
  display: flex; flex-direction: column; gap: 2px;
}
.kom-work-alert strong { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.kom-work-alert span { font-size: 16px; font-weight: 600; }

.kom-work-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.kom-action {
  border: 1px solid #d7ddd0; border-radius: 14px; padding: 18px 12px;
  font-size: 17px; font-weight: 700; cursor: pointer; min-height: 64px;
}
.kom-action-missing { background: #fff; color: #9d3636; border-color: #e6bcbc; }
.kom-action-missing:hover { background: #fdecec; }
.kom-action-packed { background: #a2bf13; color: #23320a; border-color: #8ca70f; }
.kom-action-packed:hover { background: #93ae11; }
.kom-work-keys { margin: 0; font-size: 11px; color: #667174; }
.kom-work-keys kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid #d7ddd0;
  border-radius: 5px; background: #fbfcf8; font-size: 11px;
}

.kom-work-side { display: flex; flex-direction: column; gap: 8px; }
.kom-side-title { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #667174; font-weight: 700; }
.kom-side-figures { margin: 0; font-size: 13px; color: #667174; }
.kom-side-figures strong { font-size: 18px; color: #323a3b; }
.kom-side-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #667174; }
.kom-side-list strong { display: block; font-size: 13px; color: #323a3b; }
.kom-side-list span { display: block; }

/* --- Fehlmengen -------------------------------------------------------------- */
.kom-shortage-count { margin: 0 0 12px; font-size: 13px; color: #667174; }
.kom-shortage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kom-shortage-card { display: flex; flex-direction: column; gap: 6px; }
.kom-shortage-head { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.kom-shortage-head strong { font-size: 14px; color: #323a3b; }
.kom-shortage-order { font-size: 12px; color: #667174; }
.kom-shortage-article { margin: 0; font-size: 14px; color: #323a3b; }
.kom-shortage-variant { margin: 0; font-size: 13px; color: #667174; }
.kom-shortage-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 12px; margin: 4px 0 0; }
.kom-shortage-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #667174; }
.kom-shortage-facts dd { margin: 0; font-size: 13px; color: #323a3b; }
.kom-shortage-meta { margin: 0; font-size: 12px; color: #667174; }

/* --- Vorschau / Historie ----------------------------------------------------- */
.kom-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kom-table th {
  text-align: left; font-weight: 600; color: #667174; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid #d7ddd0;
}
.kom-table td { padding: 7px 8px; border-bottom: 1px solid #eef1ea; vertical-align: top; }

.kom-preview-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.kom-preview-kpis div {
  flex: 1 1 160px; border: 1px solid #d7ddd0; border-radius: 10px; padding: 8px 12px; background: #fbfcf8;
}
.kom-preview-kpis span { display: block; font-size: 11px; color: #667174; }
.kom-preview-kpis strong { font-size: 18px; color: #323a3b; }

.kom-history-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.kom-history-list li { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid #eef1ea; color: #667174; }
.kom-history-list strong { color: #323a3b; }

#kommissionierungPreviewModal .kom-modal-card,
#kommissionierungHistoryModal .kom-modal-card {
  max-width: 1100px; width: min(96vw, 1100px); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 14px; padding: 20px;
}

/* --- Vollbild der Packansicht ------------------------------------------------
   Greift ausschließlich, solange die Packansicht den Vollbildmodus angefordert hat
   (body.kom-fullscreen). Außerhalb davon bleibt das Hub-Layout komplett unverändert;
   es gibt keine unbedingten Regeln auf fremde Klassen. */
body.kom-fullscreen .mobile-app-header,
body.kom-fullscreen .app-sidebar,
body.kom-fullscreen .sidebar-backdrop,
body.kom-fullscreen .app-page-hero,
body.kom-fullscreen #kommissionierungShortagesPanel { display: none !important; }
body.kom-fullscreen .app-shell { display: block; height: 100vh; }
body.kom-fullscreen .app-content { display: block; width: 100vw; max-width: 100vw; height: 100vh; margin: 0; padding: 12px; overflow: auto; }
body.kom-fullscreen .kom-page { gap: 10px; height: 100%; }
body.kom-fullscreen .kom-work { min-height: calc(100vh - 40px); }
body.kom-fullscreen .kom-work-title { font-size: clamp(26px, 4vw, 44px); }
body.kom-fullscreen .kom-work-facts dd { font-size: 19px; }
body.kom-fullscreen .kom-work-customer dd,
body.kom-fullscreen .kom-work-place dd { font-size: 30px; }
body.kom-fullscreen .kom-work-alert span { font-size: 20px; }
body.kom-fullscreen .kom-action { min-height: 92px; font-size: 22px; }

@media (max-width: 900px) {
  .kom-work { grid-template-columns: 1fr; }
  body.kom-fullscreen .kom-work { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kom-work-actions { grid-template-columns: 1fr; }
  .kom-action { min-height: 60px; }
}

/* ---------------------------------------------------------------------------
   2.44.3 - Abgeschlossene Aufträge (Historie). Ausschließlich .kom-*-Klassen, keine
   globalen Regeln: diese Datei wird im gesamten Hub geladen.
   --------------------------------------------------------------------------- */
.kom-search {
  flex: 1 1 260px; max-width: 420px; min-width: 0;
  padding: 8px 10px; border: 1px solid #dfe4dc; border-radius: 8px; font-size: 14px;
}
.kom-completed-table { background: #fff; border-radius: 12px; overflow: hidden; }
.kom-completed-row { cursor: pointer; }
.kom-completed-row:hover td,
.kom-completed-row:focus-visible td { background: #f4f7ef; }
.kom-completed-detail { margin-top: 10px; }
.kom-completed-positions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.kom-completed-position-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.kom-completed-position-head span { color: #667174; font-size: 13px; }
.kom-completed-idents { margin-top: 10px; }
.kom-completed-events { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   2.44.3 - Arbeitsvorrat (manuelle Annahme) und Sammelauftrag. Ausschließlich .kom-*-Klassen.
   --------------------------------------------------------------------------- */
.kom-workload-card.is-mine { border-color: #b7cf6a; }
.kom-chip-mine { background: #eef6e4; color: #3d6b1f; }
.kom-action-claim {
  width: auto; margin: 0; min-height: 44px; padding: 0 22px; font-weight: 700; border-radius: 10px;
}
.kom-action-continue { width: auto; margin: 0; min-height: 44px; padding: 0 22px; border-radius: 10px; }
.kom-order-list.is-loading { opacity: .55; }
.kom-batch-card .kom-batch-table { margin-top: 10px; }
.kom-batch-table { table-layout: auto; }
.kom-batch-table td { vertical-align: middle; }
.kom-batch-table th:last-child, .kom-batch-table td:last-child { text-align: right; }
.kom-batch-actions { white-space: nowrap; }

/* Tablet/schmal: die Tabelle wird zu kompakten, beschrifteten Zeilen - kein horizontaler
   Überlauf, keine abgeschnittenen Texte, keine überlappenden Knöpfe. */
@media (max-width: 860px) {
  .kom-batch-table thead { display: none; }
  .kom-batch-table, .kom-batch-table tbody, .kom-batch-table tr, .kom-batch-table td { display: block; width: 100%; }
  .kom-batch-table tr {
    border: 1px solid #eef1ea; border-radius: 10px; padding: 8px 10px; margin-top: 8px;
  }
  /* Bewusst ohne subgrid: eine feste Beschriftungsspalte funktioniert in jedem Browser. */
  /* justify-items: start haelt Badge und Knopf auf ihrer eigenen Breite - sie sollen sich
     nicht ueber die ganze Zeile spannen. */
  .kom-batch-table td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; justify-items: start; }
  .kom-batch-table td::before { content: attr(data-label); color: #8a9188; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
  .kom-batch-table td:last-child { text-align: left; margin-top: 4px; }
}
.kom-split {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0; padding: 10px 12px; background: #f6f8f2; border-radius: 10px;
}
.kom-split label { font-weight: 700; }
.kom-split select { min-width: 150px; padding: 6px 8px; border: 1px solid #dfe4dc; border-radius: 8px; }
.kom-split-preview { flex: 1 1 100%; margin: 0; color: #5b6260; font-size: 13px; }
.kom-completed-batch td { background: #f4f7ef; font-size: 13px; }

/* 2.44.3: Hinweis auf den eigenen laufenden Auftrag - ein Mitarbeiter hat höchstens einen. */
.kom-running-banner {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  border-color: #b7cf6a; background: #f4f8ec; margin-bottom: 10px;
}
.kom-running-banner span { display: block; color: #5b6260; font-size: 13px; margin-top: 2px; }
.kom-action-claim:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   2.44.6 - Packprozess-Hotfix: Packposition mit Menge, dritter Arbeitsbutton "Anderes Problem"
   und dessen Grund-Dialog. Ausschließlich .kom-* bzw. #kommissionierungProblemModal - keine
   globalen Regeln.
   --------------------------------------------------------------------------- */
.kom-work-titlebar { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; }
.kom-work-titletext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kom-work-qty {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 6px 14px; border-radius: 12px; background: #f1f6e7; border: 1px solid #cddf95;
}
.kom-work-qty span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4d6b0a; }
.kom-work-qty strong { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; color: #23320a; }
.kom-work-packqty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; font-size: 14px; color: #323a3b; }
.kom-work-packqty label { font-weight: 700; }
.kom-work-packqty input {
  width: 96px; margin: 0; padding: 8px 10px; border: 1px solid #cfd6c8; border-radius: 10px;
  font-size: 18px; font-weight: 700; text-align: center; background: #fff;
}
.kom-work-packqty span { color: #667174; }
.kom-action-problem { background: #fff; color: #8a5a17; border-color: #e8c583; }
.kom-action-problem:hover { background: #fdf2e0; }
#kommissionierungProblemModal .kom-problem-card,
#kommissionierungMissingModal .kom-problem-card {
  width: min(520px, 94vw); max-height: 86vh; overflow: auto; box-sizing: border-box;
  background: #fff; border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
#kommissionierungProblemModal .kom-problem-card h3,
#kommissionierungMissingModal .kom-problem-card h3 { margin: 0; }
.kom-problem-context { margin: 0; padding: 9px 12px; border-radius: 10px; background: #f6f8f2; color: #323a3b; font-size: 14px; }
.kom-problem-card label { font-size: 12px; font-weight: 700; color: #667174; text-transform: uppercase; letter-spacing: .04em; }
.kom-problem-reason {
  width: 100%; min-height: 96px; margin: 0; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid #cfd6c8; border-radius: 10px; font: inherit; font-size: 15px; resize: vertical;
}
.kom-problem-message { margin: 0; color: #9d3636; font-size: 13px; }
.kom-problem-message:empty { display: none; }
.kom-problem-actions { justify-content: flex-end; }
body.kom-fullscreen .kom-work-qty strong { font-size: clamp(34px, 5vw, 52px); }

/* --- 2.44.9 - Artikelbasierte Packposition und Fehlmengen-Arbeitsliste --------------------
   Ausschliesslich Klassen dieses Moduls. Die Verteilung auf die Traeger ist reine
   Zusatzinformation unter der Hauptposition und standardmaessig eingeklappt (<details>). */
.kom-carriers { border-top: 1px solid #e4e9e1; padding-top: 8px; }
.kom-carriers summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #4d6b0a; }
.kom-carriers-count { margin-left: 6px; font-weight: 400; color: #667174; }
.kom-carrier-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 4px 18px; }
.kom-carrier-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px dashed #e4e9e1; }
.kom-carrier-name { font-size: 14px; color: #323a3b; overflow-wrap: anywhere; }
.kom-carrier-meta { grid-column: 1; font-size: 12px; color: #667174; }
.kom-carrier-qty { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; color: #23320a; }
.kom-carrier-total { margin: 8px 0 0; font-size: 13px; color: #667174; }
.kom-carrier-total strong { margin-left: 4px; color: #323a3b; }
.kom-side-parts { margin: 0; font-size: 12px; color: #667174; }
body.kom-fullscreen .kom-carrier-name { font-size: 17px; }
body.kom-fullscreen .kom-carrier-qty { font-size: 22px; }

.kom-shortage-list { align-items: start; }
.kom-shortage-head { align-items: flex-start; }
.kom-shortage-customer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kom-shortage-customer span { font-size: 12px; color: #667174; }
.kom-shortage-qty { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; padding: 4px 10px; border-radius: 10px; background: #fbeee9; }
.kom-shortage-qty span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a3b2b; }
.kom-shortage-head .kom-shortage-qty strong { font-size: 22px; line-height: 1.1; color: #6d2a1d; }
.kom-shortage-article { font-size: 16px; font-weight: 700; }
.kom-shortage-articlenr { margin: 0; font-size: 12px; color: #667174; }
.kom-shortage-wide { grid-column: 1 / -1; }
.kom-shortage-details { border-top: 1px solid #e4e9e1; padding-top: 6px; }
.kom-shortage-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #4d6b0a; }
.kom-shortage-details summary span { margin-left: 6px; font-weight: 400; color: #667174; }
.kom-shortage-reports { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #667174; }
.kom-shortage-reports strong { display: block; font-size: 13px; color: #323a3b; }
.kom-shortage-reports span { display: block; overflow-wrap: anywhere; }

/* Fehlmengen erledigen (2.44.9): Schalter "Erledigte anzeigen", Knopf je Position, Dialog. */
.kom-shortage-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 0; font-size: 13px; font-weight: 600; color: #323a3b; cursor: pointer; }
.kom-shortage-toggle input { width: auto; margin: 0; }
.kom-shortage-actions { display: flex; justify-content: flex-end; gap: 8px; }
.kom-shortage-resolved-note { margin: 0; font-size: 12px; font-weight: 700; color: #4d6b0a; }
/* 2.76.2: Hinweis "Ware da – jetzt packen" */
.kom-shortage-ware-da { margin: 4px 0 0; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #1d4f91; background: #e6effb; text-align: right; }
/* 2.76.2: Lagereingang fett in den Fakten der Fehlmenge */
.kom-shortage-facts .kom-shortage-lagereingang dt { font-weight: 800; }
.kom-shortage-facts .kom-shortage-lagereingang dd strong { font-weight: 800; font-size: 1.05em; }
.kom-shortage-card.is-resolved { background: #f6f8f2; }
.kom-shortage-card.is-resolved .kom-shortage-qty { background: #e6efd3; }
.kom-shortage-card.is-resolved .kom-shortage-qty span { color: #4d6b0a; }
.kom-shortage-card.is-resolved .kom-shortage-head .kom-shortage-qty strong { color: #23320a; }
.kom-shortage-reports li.is-resolved { opacity: .75; }
.kom-shortage-reports .kom-shortage-resolution { color: #4d6b0a; font-weight: 700; }
.kom-resolve-card { width: min(560px, 94vw); max-height: 86vh; overflow: auto; box-sizing: border-box; background: #fff; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.kom-resolve-card h3 { margin: 0; }
.kom-resolve-card .kom-hint { margin: 0; }
.kom-resolve-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: #323a3b; }
.kom-resolve-count input { width: 96px; margin: 0; padding: 8px 10px; border: 1px solid #cfd6c8; border-radius: 10px; font-size: 18px; font-weight: 700; text-align: center; background: #fff; }
.kom-resolve-count span { color: #667174; }
.kom-resolve-list { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow: auto; border: 1px solid #e4e9e1; border-radius: 10px; }
.kom-resolve-list li + li { border-top: 1px solid #eef2ea; }
.kom-resolve-list .kom-resolve-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 8px 10px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #323a3b; cursor: pointer; }
.kom-resolve-list .kom-resolve-item input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.kom-resolve-list .kom-resolve-item span { min-width: 0; overflow-wrap: anywhere; }

/* Fehlmengen als Arbeitsliste (2.44.10): Such-/Filterleiste, Status, Gepackt/Inventur. */
.kom-shortage-filters { margin-bottom: 8px; }
.kom-shortage-filters .kom-search { flex: 1 1 200px; }
.kom-shortage-filters select,
.kom-shortage-view select { flex: 0 1 140px; width: auto; min-width: 110px; max-width: 220px; margin: 0; padding: 7px 8px; border: 1px solid #dfe4dc; border-radius: 8px; background: #fff; font-size: 13px; color: #323a3b; }
.kom-shortage-view { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; }
.kom-shortage-filter-info { margin: -6px 0 10px; font-size: 12px; color: #667174; overflow-wrap: anywhere; }
.kom-shortage-inventory { color: #8a5a17; border-color: #e8c583; }
.kom-shortage-reports li.is-match { margin: -4px -6px; padding: 4px 6px; border-radius: 8px; background: #fff7dc; }
.kom-shortage-reports li.is-inventory .kom-shortage-resolution { color: #8a5a17; }
.kom-resolve-hint { margin: 0; font-size: 13px; color: #323a3b; }
.kom-resolve-summary { margin: 0; font-size: 14px; font-weight: 700; color: #23320a; }
.kom-resolve-card .kom-resolve-inventory { background: #fdf2e0; color: #8a5a17; border: 1px solid #e8c583; }

/* Fehlmengen je Artikelvariante (2.44.11): Artikel im Kartenkopf, dritte Aktion "Anderes Problem". */
.kom-shortage-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kom-shortage-actions { flex-wrap: wrap; }
.kom-shortage-other { color: #4b5a61; border-color: #cfd6d8; }
.kom-shortage-reports li.is-other .kom-shortage-resolution { color: #4b5a61; }
.kom-resolve-card .kom-resolve-other { background: #eef1f2; color: #3d4a50; border: 1px solid #cfd6d8; }

/* Fehlmengen als kompakte Arbeitsliste (2.44.12): je Artikelvariante eine Zeile - der Artikel als
   Überschrift, darunter Größe, Farbe, Lagerplatz, Änderung und ggf. Bearbeitung; rechts Fehlmenge, älteste
   und letzte Meldung und die drei Aktionen. Die Einzelmeldungen öffnen sich als Detailzeile direkt unter
   der Zeile (ab etwa sechs Meldungen mit eigenem Scrollbereich). Ersetzt am Bildschirm das Kartenraster
   der Fehlmengen; die Kartenregeln oben bleiben unberührt. Nur Klassen dieses Moduls. */
.kom-shortage-worklist { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border: 1px solid #dfe5da; border-radius: 12px; overflow: hidden; }
.kom-shortage-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px 178px 292px; grid-template-areas: "toggle main qty times side";
  column-gap: 16px; align-items: center; padding: 13px 18px; border-bottom: 1px solid #edf1ea; font-size: 13px; color: #323a3b;
}
.kom-shortage-row:hover { background: #fbfcf9; }
.kom-shortage-row.is-resolved { background: #f6f8f2; }
.kom-shortage-row.is-open { background: #f5f8ee; }
.kom-shortage-worklist > :last-child { border-bottom: 0; }
.kom-shortage-row-toggle.secondary {
  grid-area: toggle; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: #4b5a61; font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer;
}
.kom-shortage-row-toggle.secondary:hover { background: #eaf0e3; }
.kom-shortage-row-toggle span { display: inline-block; transition: transform .15s ease; }
.kom-shortage-row.is-open .kom-shortage-row-toggle span { transform: rotate(90deg); }
.kom-shortage-main { grid-area: main; min-width: 0; }
.kom-shortage-row .kom-shortage-title { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; cursor: pointer; }
.kom-shortage-row .kom-shortage-article { font-size: 15.5px; color: #20251f; }
.kom-shortage-row .kom-shortage-articlenr { font-size: 12.5px; }
.kom-shortage-row .kom-shortage-facts { display: flex; flex-wrap: wrap; gap: 3px 20px; margin: 5px 0 0; }
.kom-shortage-row .kom-shortage-facts div, .kom-shortage-times div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kom-shortage-row .kom-shortage-facts dt, .kom-shortage-times dt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a8588; }
.kom-shortage-row .kom-shortage-facts dd, .kom-shortage-times dd { margin: 0; font-size: 13px; color: #323a3b; overflow-wrap: anywhere; }
.kom-shortage-row .kom-shortage-qty { grid-area: qty; align-items: center; padding: 0; background: none; }
.kom-shortage-row .kom-shortage-qty span { color: #9b3b2b; }
.kom-shortage-row .kom-shortage-qty strong { font-size: 21px; line-height: 1.15; color: #b3261e; }
.kom-shortage-row.is-resolved .kom-shortage-qty span, .kom-shortage-row.is-resolved .kom-shortage-qty strong { color: #4d6b0a; }
.kom-shortage-times { grid-area: times; display: flex; flex-direction: column; gap: 3px; margin: 0; }
.kom-shortage-times dt { flex-shrink: 0; width: 56px; }
.kom-shortage-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.kom-shortage-row .kom-shortage-actions { gap: 6px; }
.kom-shortage-row .kom-shortage-actions .kom-btn { padding: 6px 10px; }
.kom-shortage-row .kom-shortage-inventory { background: #fffaf0; }
.kom-shortage-row .kom-shortage-other { background: #fff; }
.kom-shortage-row .kom-shortage-resolved-note { text-align: right; }
.kom-shortage-count-toggle.secondary { display: none; }
.kom-shortage-detail { padding: 6px 18px 14px 62px; background: #f6f9ef; border-bottom: 1px solid #e2e8dc; box-shadow: inset 3px 0 0 #8cb63f; }
.kom-shortage-detail[hidden] { display: none; }
.kom-shortage-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kom-shortage-detail-toggle.secondary { width: auto; margin: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 700; color: #323a3b; cursor: pointer; }
.kom-shortage-detail-toggle.secondary:hover { background: #eaf0e3; }
.kom-shortage-detail-scroll { max-height: 192px; overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #e2e8dc; border-radius: 8px; }
.kom-shortage-detail-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: #323a3b; }
.kom-shortage-detail-table th { position: sticky; top: 0; z-index: 1; padding: 6px 12px; background: #f6f8f3; border-bottom: 1px solid #e2e8dc; text-align: left; font-weight: 700; color: #4b5a61; white-space: nowrap; }
.kom-shortage-detail-table td { padding: 6px 12px; border-bottom: 1px solid #eef2ea; white-space: nowrap; }
.kom-shortage-detail-table td:first-child, .kom-shortage-detail-table td:nth-child(4) { white-space: normal; }
.kom-shortage-detail-table tbody tr:last-child td { border-bottom: 0; }
.kom-shortage-detail-table tr.is-match td { background: #fff7dc; }
.kom-shortage-detail-table tr.is-resolved td { color: #7a8588; }
/* 2.61.0: Reiter "In Klärung" und Knopf je Meldung. */
.kom-klaerung-scroll { overflow-x: auto; }
.kom-klaerung-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: #323a3b; }
.kom-klaerung-table th { padding: 6px 12px; background: #f6f8f3; border-bottom: 1px solid #e2e8dc; text-align: left; font-weight: 700; color: #4b5a61; white-space: nowrap; }
.kom-klaerung-table td { padding: 6px 12px; border-bottom: 1px solid #eef2ea; vertical-align: top; }
.kom-klaerung-table td:last-child { white-space: nowrap; }
.kom-klaerung-open { white-space: nowrap; }
/* 2.64.0: Lagerart je Kunde - Hinweis an der Position und Gründe in der Vorschau. */
.kom-abnahme-rot { color: #b42318; }
.kom-abnahme-ok { color: #067647; }
.kom-abnahme-ergebnis { font-size: 1.4rem; }
.kom-schrank-alert { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
.kom-schrank-alert-box { max-width: 36rem; padding: 2rem; border-radius: 12px; background: #fff; border: 6px solid #b42318; text-align: center; }
.kom-schrank-alert-box strong { display: block; color: #b42318; font-size: 2.2rem; line-height: 1.2; }
.kom-schrank-alert-box p { font-size: 1.2rem; }
.kom-shortage-noschrank, .kom-shortage-multi { color: #b42318; font-weight: 600; }
.kom-item-lagerart{background:#eef4ff;border-color:#c7d7f5;color:#1d4ed8;}
.kom-lagerart-liste ul { margin: 4px 0 8px; padding-left: 18px; font-size: 12.5px; color: #4b5a61; }
.kom-shortage-detail .kom-shortage-reports { display: none; margin: 0; padding: 8px 10px 8px 28px; }
.kom-shortage-detail-hint { margin: 6px 2px 0; font-size: 12px; color: #667174; }
.kom-shortage-detail-hint[hidden] { display: none; }
/* Mittlere Breite: älteste und letzte Meldung stehen unter den Merkmalen. */
@media (max-width: 1539px) {
  .kom-shortage-row { grid-template-columns: 28px minmax(0, 1fr) 80px 292px; grid-template-areas: "toggle main qty side" "toggle times qty side"; row-gap: 6px; }
  .kom-shortage-times { flex-direction: row; flex-wrap: wrap; gap: 2px 18px; }
  .kom-shortage-times dt { width: auto; }
}
/* Tablet: die Aktionen dürfen umbrechen, die Einzelmeldungen erscheinen als kompakte Liste. */
@media (max-width: 1100px) {
  .kom-shortage-row { grid-template-columns: 28px minmax(0, 1fr) 76px 170px; }
  .kom-shortage-detail { padding-left: 18px; }
  .kom-shortage-detail-table { display: none; }
  .kom-shortage-detail .kom-shortage-reports { display: flex; }
  .kom-shortage-detail-scroll { max-height: 262px; }
}
/* Handy: jede Artikelvariante flach untereinander - Artikel und Fehlmenge, Merkmale, Aktionen, Meldungen. */
@media (max-width: 699px) {
  .kom-shortage-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title qty" "facts facts" "side side" "count count"; row-gap: 7px; padding: 12px 14px; }
  .kom-shortage-main { display: contents; }
  .kom-shortage-row .kom-shortage-title { grid-area: title; }
  .kom-shortage-row .kom-shortage-facts { grid-area: facts; margin: 0; gap: 2px 14px; }
  .kom-shortage-row-toggle.secondary, .kom-shortage-times { display: none; }
  .kom-shortage-row .kom-shortage-qty { flex-direction: row; align-items: baseline; gap: 6px; align-self: start; padding: 3px 8px; border-radius: 7px; background: #fdece8; }
  .kom-shortage-row.is-resolved .kom-shortage-qty { background: #e6efd3; }
  .kom-shortage-row .kom-shortage-qty strong { font-size: 14px; }
  .kom-shortage-side { align-items: stretch; }
  .kom-shortage-row .kom-shortage-actions { justify-content: flex-start; }
  .kom-shortage-row .kom-shortage-resolved-note { text-align: left; }
  .kom-shortage-count-toggle.secondary {
    grid-area: count; display: inline-flex; align-items: center; gap: 6px; justify-self: start; width: auto; margin: 0; padding: 2px 0;
    border: 0; background: none; font-size: 13px; font-weight: 700; color: #4d6b0a; cursor: pointer;
  }
  .kom-shortage-detail { padding: 6px 14px 12px; }
  .kom-shortage-detail-head { display: none; }
}

/* ---------------------------------------------------------------------------
   2.48.7 - Packplatz-Optik: Arbeitsvorrat, Packansicht, Warenkorb und Scanansicht. Ausschliesslich unter
   #kommissionierungView (bzw. body.kom-fullscreen #kommissionierungView). Der ID-Scope setzt die globale
   Button-Regel des Hubs (volle Breite, Abstand oben, jeder Knopf limegruen) fuer diese Ansichten zurueck -
   "Nicht gefunden", "Anderes Problem" und "Gepackt" sind dadurch wieder klar unterscheidbar. Die
   Fehlmengenliste und die Historie bleiben unberuehrt. Farben: RUESS-Hub-Stil (Lindgruen #A2BF13, Graphit).
   --------------------------------------------------------------------------- */
#kommissionierungView {
  --kom-ink: #23292a;
  --kom-text: #323a3b;
  --kom-muted: #667174;
  --kom-line: #e4e9e2;
  --kom-line-strong: #d7ddd0;
  --kom-soft: #f5f7f2;
  --kom-lime: #a2bf13;
  --kom-lime-hover: #95b011;
  --kom-lime-deep: #5e7a08;
  --kom-lime-pale: #eef4d6;
  --kom-on-lime: #1f2a06;
  --kom-red: #a8322b;
  --kom-red-line: #e6bcbc;
  --kom-red-pale: #fdf0ef;
  --kom-amber: #8a5a17;
  --kom-amber-line: #e8c583;
  --kom-amber-pale: #fdf5e6;
}

/* Knoepfe dieser Ansichten: kompakt statt vollbreiter Balken (Farben je Klasse unten). */
#kommissionierungView :is(.kom-station, .kom-workload-toolbar, .kom-workload-card, .kom-running-banner, .kom-done-state) button {
  width: auto; margin: 0; box-shadow: none; transform: none; font-family: inherit; line-height: 1.2; cursor: pointer;
}
#kommissionierungView :is(.kom-station, .kom-workload-toolbar, .kom-workload-card, .kom-running-banner, .kom-done-state) button:hover { transform: none; }
#kommissionierungView :is(.kom-station, .kom-workload-toolbar, .kom-workload-card, .kom-running-banner, .kom-done-state) button:disabled { opacity: .5; cursor: not-allowed; }
#kommissionierungView :is(.kom-station, .kom-done-state) .ghost,
#kommissionierungView :is(.kom-station, .kom-workload-toolbar, .kom-done-state) .secondary {
  border: 1px solid var(--kom-line-strong); background: #fff; color: var(--kom-text); font-weight: 700;
}
#kommissionierungView :is(.kom-station, .kom-done-state) .ghost:hover,
#kommissionierungView :is(.kom-station, .kom-workload-toolbar, .kom-done-state) .secondary:hover { background: var(--kom-soft); color: var(--kom-ink); }

#kommissionierungView .kom-message { padding: 11px 16px; border-left: 4px solid var(--kom-lime); border-radius: 10px; font-size: 14px; font-weight: 600; }
#kommissionierungView .kom-message.error { border-left-color: var(--kom-red); background: var(--kom-red-pale); color: var(--kom-red); }

#kommissionierungView .kom-progress { height: 8px; background: #e9ede4; }
#kommissionierungView .kom-progress span { border-radius: 999px; background: var(--kom-lime); transition: width .25s ease; }

/* --- Arbeitsvorrat ------------------------------------------------------------ */
#kommissionierungView .kom-workload-toolbar { align-items: flex-end; margin-bottom: 2px; }
#kommissionierungView .kom-workload-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#kommissionierungView .kom-workload-heading h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-workload-heading span { font-size: 13px; color: var(--kom-muted); }
#kommissionierungView .kom-order-list { gap: 10px; }
#kommissionierungView .kom-workload-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 14px 18px; border-color: var(--kom-line); border-radius: 14px;
}
#kommissionierungView .kom-workload-card.is-mine { border-color: #cfe08c; box-shadow: inset 4px 0 0 var(--kom-lime); background: linear-gradient(90deg, #f7faea, #fff 45%); }
#kommissionierungView .kom-workload-main { display: grid; gap: 7px; min-width: 0; }
#kommissionierungView .kom-workload-card .kom-order-head { align-items: center; }
#kommissionierungView .kom-workload-card .kom-order-number { font-size: 17px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-workload-card .kom-order-customer { margin-top: 1px; font-size: 13.5px; color: var(--kom-muted); }
#kommissionierungView .kom-workload-card .kom-order-figures { gap: 4px 20px; font-size: 13.5px; }
#kommissionierungView .kom-workload-card .kom-order-figures strong { font-size: 16px; }
#kommissionierungView .kom-workload-card .kom-progress { max-width: 460px; height: 6px; }
#kommissionierungView .kom-chip { padding: 3px 10px; font-size: 12px; }
#kommissionierungView .kom-chip-mine { background: var(--kom-lime-pale); color: var(--kom-lime-deep); }
#kommissionierungView .kom-action-claim,
#kommissionierungView .kom-action-continue {
  min-height: 48px; padding: 0 24px; border: 1px solid #93ae11; border-radius: 12px;
  background: var(--kom-lime); color: var(--kom-on-lime); font-size: 15px; font-weight: 800; white-space: nowrap;
}
#kommissionierungView .kom-action-claim:hover,
#kommissionierungView .kom-action-continue:hover { background: var(--kom-lime-hover); color: var(--kom-on-lime); }
#kommissionierungView .kom-action-claim:disabled { opacity: .4; }
#kommissionierungView .kom-running-banner { padding: 14px 18px; border-radius: 14px; box-shadow: inset 4px 0 0 var(--kom-lime); }
#kommissionierungView .kom-running-banner strong { font-size: 15px; color: var(--kom-ink); }

/* --- Packplatz: Kopfzeile ------------------------------------------------------ */
#kommissionierungView .kom-station { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#kommissionierungView .kom-station-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) auto; align-items: center; gap: 10px 24px;
  padding: 12px 16px; border-color: var(--kom-line); border-radius: 14px;
}
#kommissionierungView .kom-station-order { min-width: 0; }
#kommissionierungView .kom-station-bar .kom-work-eyebrow {
  margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--kom-ink);
}
#kommissionierungView .kom-station-meta { margin: 2px 0 0; font-size: 13.5px; color: var(--kom-muted); overflow-wrap: anywhere; }
#kommissionierungView .kom-station-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
#kommissionierungView .kom-station-progress .kom-progress { grid-column: 1 / -1; grid-row: 2; }
#kommissionierungView .kom-station-progress :is(.kom-side-figures, .kom-station-figures) { margin: 0; font-size: 13px; color: var(--kom-muted); }
#kommissionierungView .kom-station-progress :is(.kom-side-figures, .kom-station-figures) strong { font-size: 15px; color: var(--kom-ink); }
#kommissionierungView .kom-station-progress .kom-side-parts { margin: 0; font-size: 12.5px; color: var(--kom-muted); white-space: nowrap; }
#kommissionierungView .kom-fullscreen-toggle { padding: 9px 14px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
#kommissionierungView .kom-fs-exit,
body.kom-fullscreen #kommissionierungView .kom-fs-enter { display: none; }
body.kom-fullscreen #kommissionierungView .kom-fs-exit { display: inline; }

/* --- Packplatz: aktuelle Position ---------------------------------------------- */
#kommissionierungView .kom-work { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 12px; align-items: start; }
#kommissionierungView .kom-work-main.kom-pick,
#kommissionierungView .kom-work-main.kom-scan { gap: 14px; padding: 18px 20px; border-color: var(--kom-line); border-radius: 16px; min-width: 0; }
#kommissionierungView .kom-pick-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 16px; }
#kommissionierungView .kom-pick-place { margin: 0; display: flex; }
#kommissionierungView .kom-pick-place .kom-work-place {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 168px;
  padding: 12px 18px; border-radius: 14px; background: var(--kom-ink); color: #fff;
}
#kommissionierungView .kom-pick-place .kom-work-place dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c9db6e; }
#kommissionierungView .kom-pick-place .kom-work-place dd {
  margin: 0; font-family: "Consolas", "SFMono-Regular", monospace; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: .03em; color: #fff;
}
#kommissionierungView .kom-pick .kom-work-titletext { justify-content: center; gap: 4px; }
#kommissionierungView .kom-pick .kom-work-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.15; color: var(--kom-ink); overflow-wrap: anywhere; }
#kommissionierungView .kom-pick .kom-work-subtitle { font-size: 14px; color: var(--kom-muted); }
#kommissionierungView .kom-pick .kom-work-subtitle::before { content: "Art.-Nr. "; }
#kommissionierungView .kom-work-qty {
  min-width: 112px; padding: 10px 18px; border: 1px solid #cfe08c; border-radius: 14px; background: var(--kom-lime-pale);
}
#kommissionierungView .kom-work-qty span { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--kom-lime-deep); }
#kommissionierungView .kom-work-qty strong { font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--kom-on-lime); }

/* Kunde unter dem Artikel: Kundennummer als Marke, daneben der Name. */
#kommissionierungView .kom-pick-customer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; }
#kommissionierungView .kom-pick-customer::before { content: "Kunde"; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kom-muted); }
#kommissionierungView .kom-pick-customer > div { display: flex; min-width: 0; }
#kommissionierungView .kom-pick-customer dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#kommissionierungView .kom-pick-customer dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--kom-text); overflow-wrap: anywhere; }
#kommissionierungView .kom-pick-customer .kom-work-customer dd {
  padding: 2px 9px; border: 1px solid var(--kom-line-strong); border-radius: 8px; background: #fff;
  font-family: "Consolas", "SFMono-Regular", monospace; font-size: 16px; font-weight: 800; letter-spacing: .03em; color: var(--kom-ink);
}

/* Groesse, Farbe, Aenderung als Kacheln (brechen bei wenig Breite um). */
#kommissionierungView .kom-pick .kom-work-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
#kommissionierungView .kom-pick .kom-work-facts > div {
  flex: 1 1 160px; gap: 3px; min-width: 0; padding: 10px 14px; border: 1px solid var(--kom-line); border-radius: 12px; background: var(--kom-soft);
}
#kommissionierungView .kom-pick .kom-work-facts > .kom-fact-size { flex: 0 1 124px; }
#kommissionierungView .kom-pick .kom-work-facts > .kom-fact-change { flex: 1.5 1 220px; }
#kommissionierungView .kom-pick .kom-work-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--kom-muted); }
#kommissionierungView .kom-pick .kom-work-facts dd {
  font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.25; color: var(--kom-ink); overflow-wrap: anywhere;
}
#kommissionierungView .kom-pick .kom-work-facts .kom-fact-size dd { font-size: 28px; font-weight: 800; line-height: 1.05; }
#kommissionierungView .kom-pick .kom-work-alert {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--kom-amber-line); border-left: 5px solid #d39a2f; border-radius: 12px; background: var(--kom-amber-pale);
}
#kommissionierungView .kom-pick .kom-work-alert strong { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
#kommissionierungView .kom-pick .kom-work-alert span { font-size: 18px; font-weight: 700; color: #6d4410; }

/* Verteilung auf die Traeger: sichtbar, je Traeger eine Kachel; viele Traeger scrollen in sich. */
#kommissionierungView .kom-carriers {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 14px;
  border: 1px solid var(--kom-line); border-top: 1px solid var(--kom-line); border-radius: 12px; background: #fff;
}
#kommissionierungView .kom-carriers-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#kommissionierungView .kom-carriers-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-carriers-count { margin: 0; padding: 2px 9px; border-radius: 999px; background: var(--kom-soft); font-size: 12.5px; font-weight: 700; color: var(--kom-muted); }
#kommissionierungView .kom-carriers-head .kom-carrier-total { margin: 0 0 0 auto; font-size: 13px; color: var(--kom-muted); }
#kommissionierungView .kom-carriers-head .kom-carrier-total strong { font-size: 15px; color: var(--kom-ink); }
#kommissionierungView .kom-carrier-list {
  margin: 0; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); max-height: 262px; overflow: auto; overscroll-behavior: contain;
}
#kommissionierungView .kom-carrier-list li {
  column-gap: 12px; row-gap: 1px; padding: 9px 12px; border: 1px solid var(--kom-line); border-bottom: 1px solid var(--kom-line); border-radius: 10px; background: var(--kom-soft);
}
#kommissionierungView .kom-carrier-name { font-size: 15px; font-weight: 700; color: var(--kom-ink); }
#kommissionierungView .kom-carrier-meta { font-size: 12.5px; color: var(--kom-muted); }
#kommissionierungView .kom-carrier-qty { min-width: 34px; font-size: 24px; font-weight: 800; text-align: right; color: var(--kom-on-lime); }

/* Menge und Arbeitsbuttons stehen unten in der Karte. */
#kommissionierungView .kom-pick-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kom-line); }
#kommissionierungView .kom-pick-footer .kom-work-packqty { gap: 10px 14px; margin: 0; font-size: 15px; }
#kommissionierungView .kom-pick-footer .kom-work-packqty label { font-size: 15px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--kom-line-strong); border-radius: 12px; overflow: hidden; background: #fff; }
#kommissionierungView .kom-stepper .kom-step {
  min-width: 52px; min-height: 50px; padding: 0 12px; border: 0; border-radius: 0; background: var(--kom-soft); color: var(--kom-ink); font-size: 24px; font-weight: 700;
}
#kommissionierungView .kom-stepper .kom-step:hover { background: #e9eee2; }
#kommissionierungView .kom-stepper .kom-step:first-child { border-right: 1px solid var(--kom-line-strong); }
#kommissionierungView .kom-stepper .kom-step:last-child { border-left: 1px solid var(--kom-line-strong); }
#kommissionierungView .kom-stepper input[type="number"] {
  width: 88px; margin: 0; padding: 0 6px; border: 0; border-radius: 0; background: #fff;
  font-size: 22px; font-weight: 800; text-align: center; color: var(--kom-ink); -moz-appearance: textfield; appearance: textfield;
}
#kommissionierungView .kom-stepper input[type="number"]::-webkit-inner-spin-button,
#kommissionierungView .kom-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#kommissionierungView .kom-pick-footer .kom-work-packqty > span:last-child { font-size: 15px; color: var(--kom-muted); }
#kommissionierungView .kom-pick .kom-work-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; margin: 0; }
#kommissionierungView .kom-pick .kom-action {
  width: 100%; min-height: 72px; padding: 14px 12px; border: 1px solid; border-radius: 14px; font-size: 18px; font-weight: 800;
}
#kommissionierungView .kom-pick .kom-action-missing { border-color: var(--kom-red-line); background: #fff; color: var(--kom-red); }
#kommissionierungView .kom-pick .kom-action-missing:hover { background: var(--kom-red-pale); color: var(--kom-red); }
#kommissionierungView .kom-pick .kom-action-problem { border-color: var(--kom-amber-line); background: #fff; color: var(--kom-amber); }
#kommissionierungView .kom-pick .kom-action-problem:hover { background: var(--kom-amber-pale); color: var(--kom-amber); }
#kommissionierungView .kom-pick .kom-action-packed { border-color: #8ca70f; background: var(--kom-lime); color: var(--kom-on-lime); font-size: 21px; }
#kommissionierungView .kom-pick .kom-action-packed:hover { background: var(--kom-lime-hover); color: var(--kom-on-lime); }
#kommissionierungView .kom-pick .kom-work-keys { font-size: 12px; color: var(--kom-muted); }
#kommissionierungView .kom-pick .kom-work-keys kbd { padding: 1px 7px; border-color: var(--kom-line-strong); background: #fff; font-family: inherit; font-weight: 700; color: var(--kom-text); }
#kommissionierungView .kom-pick > .kom-hint { font-size: 13px; }

/* Etikettenstatus (Packkarte und Scanansicht): kurze Statuszeilen, ohne Inhalt unsichtbar. */
#kommissionierungView .kom-label-panel { display: flex; flex-direction: column; gap: 6px; }
#kommissionierungView .kom-label-panel:empty { display: none; }
#kommissionierungView .kom-label-panel p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 8px 12px;
  border: 1px solid var(--kom-line); border-radius: 10px; background: var(--kom-soft); font-size: 13.5px; color: var(--kom-text);
}
#kommissionierungView .kom-label-panel p.kom-problem-message { border-color: var(--kom-red-line); background: var(--kom-red-pale); color: var(--kom-red); font-weight: 600; }

/* --- Packplatz: rechte Spalte (Warenkorb, Als naechstes, Scan-Warenkorb) ------- */
#kommissionierungView .kom-station .kom-work-side { gap: 12px; min-width: 0; }
#kommissionierungView .kom-side-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; border-color: var(--kom-line); border-radius: 16px; }
#kommissionierungView .kom-side-panel.kom-queue { flex: 1 1 auto; }
#kommissionierungView .kom-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#kommissionierungView .kom-side-panel .kom-side-title { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; color: var(--kom-ink); }
#kommissionierungView .kom-panel-count {
  min-width: 26px; padding: 2px 9px; border-radius: 999px; background: var(--kom-soft); font-size: 13px; font-weight: 800; text-align: center; color: var(--kom-text);
}
#kommissionierungView .kom-cart { border-color: #cfe08c; background: linear-gradient(180deg, #f8fbec, #fff 70%); }
#kommissionierungView .kom-cart .kom-panel-count { background: var(--kom-lime); color: var(--kom-on-lime); }
#kommissionierungView .kom-cart.is-empty { background: #fff; border-color: var(--kom-line); }
#kommissionierungView .kom-cart.is-empty .kom-panel-count { background: var(--kom-soft); color: var(--kom-muted); }
#kommissionierungView .kom-side-panel .kom-side-figures { margin: 0; font-size: 14px; color: var(--kom-muted); }
#kommissionierungView .kom-side-panel .kom-side-figures strong { font-size: 17px; color: var(--kom-ink); }
#kommissionierungView .kom-side-panel .kom-hint { margin: 0; font-size: 13.5px; }
#kommissionierungView .kom-cart .kom-order-actions { display: block; }
#kommissionierungView .kom-cart .kom-order-actions .kom-btn {
  width: 100%; min-height: 52px; border: 1px solid #93ae11; border-radius: 12px;
  background: var(--kom-lime); color: var(--kom-on-lime); font-size: 16px; font-weight: 800;
}
#kommissionierungView .kom-cart .kom-order-actions .kom-btn:hover { background: var(--kom-lime-hover); color: var(--kom-on-lime); }

#kommissionierungView .kom-item-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
#kommissionierungView .kom-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  padding: 10px 12px; border: 1px solid var(--kom-line); border-radius: 12px; background: #fff;
}
#kommissionierungView .kom-item-place {
  align-self: start; min-width: 64px; padding: 5px 8px; border-radius: 8px; background: var(--kom-ink); color: #fff;
  font-family: "Consolas", "SFMono-Regular", monospace; font-size: 14px; font-weight: 800; letter-spacing: .02em; text-align: center; white-space: nowrap;
}
#kommissionierungView .kom-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#kommissionierungView .kom-item-name { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--kom-ink); overflow-wrap: anywhere; }
/* 2.57.2: Kunde der Warenkorbzeile in der Scanansicht - Kundennummer fett, dann der Name. */
#kommissionierungView .kom-item-customer { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--kom-ink); overflow-wrap: anywhere; }
#kommissionierungView .kom-item-customer b { font-weight: 800; margin-right: 2px; }
#kommissionierungView .kom-item-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13.5px; color: var(--kom-text); }
#kommissionierungView .kom-item-facts span { overflow-wrap: anywhere; }
#kommissionierungView .kom-item-facts em { font-style: normal; color: var(--kom-muted); }
#kommissionierungView .kom-item-flag { padding: 0 7px; border-radius: 6px; background: var(--kom-amber-pale); color: var(--kom-amber); font-size: 12px; font-weight: 700; }
#kommissionierungView .kom-item-qty { display: flex; flex-direction: column; align-items: flex-end; align-self: start; line-height: 1; }
#kommissionierungView .kom-item-qty small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kom-muted); }
#kommissionierungView .kom-item-qty strong { margin-top: 3px; font-size: 24px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-item-carriers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#kommissionierungView .kom-item-carriers span { padding: 2px 8px; border-radius: 999px; background: var(--kom-lime-pale); font-size: 12.5px; color: var(--kom-on-lime); }
#kommissionierungView .kom-item-carriers .kom-item-more { background: var(--kom-soft); color: var(--kom-muted); }
#kommissionierungView .kom-item > button { grid-column: 2 / -1; justify-self: start; padding: 7px 12px; border-radius: 9px; font-size: 13px; }
#kommissionierungView .kom-item-empty { padding: 10px 2px; font-size: 13.5px; color: var(--kom-muted); }
#kommissionierungView .kom-queue .kom-hint { margin: 0; padding-left: 2px; }

/* --- Scanansicht ---------------------------------------------------------------- */
#kommissionierungView .kom-scan .kom-work-title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-scan .kom-work-subtitle { font-size: 15px; color: var(--kom-muted); }
#kommissionierungView .kom-work-scan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: stretch;
  padding: 16px; border: 1px solid #cfe08c; border-radius: 14px; background: linear-gradient(180deg, #f8fbec, #fff);
}
#kommissionierungView .kom-work-scan label { grid-column: 1 / -1; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kom-lime-deep); }
#kommissionierungView .kom-work-scan input[type="text"] {
  min-width: 0; height: 64px; margin: 0; padding: 0 18px; border: 2px solid var(--kom-lime); border-radius: 12px; background: #fff;
  font-family: "Consolas", "SFMono-Regular", monospace; font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--kom-ink);
}
#kommissionierungView .kom-work-scan input[type="text"]:focus { outline: none; border-color: #8ca70f; box-shadow: 0 0 0 4px rgba(162, 191, 19, .22); }
#kommissionierungView .kom-work-scan .kom-btn { min-height: 64px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
#kommissionierungView .kom-work-scan [role="status"] { grid-column: 1 / -1; margin: 0; }
#kommissionierungView .kom-work-scan [role="status"]:empty { display: none; }
#kommissionierungView .kom-work-scan .kom-hint[role="status"] {
  padding: 12px 16px; border: 1px solid #b9d36b; border-left: 5px solid var(--kom-lime); border-radius: 12px; background: #fff; font-size: 16px; font-weight: 700; color: #3d520a;
}
#kommissionierungView .kom-work-scan .kom-problem-message[role="status"] {
  padding: 12px 16px; border: 1px solid var(--kom-red-line); border-left: 5px solid var(--kom-red); border-radius: 12px; background: var(--kom-red-pale); font-size: 16px; font-weight: 700;
}
#kommissionierungView .kom-scan-back .ghost { padding: 11px 18px; border-radius: 11px; font-size: 14px; }
/* Warenkorb der Scanansicht ueber die volle Breite - je Artikelzeile eine Kachel mit den Traegern. */
#kommissionierungView .kom-scan-cart .kom-item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); align-content: start; }
#kommissionierungView .kom-scan-cart .kom-item { align-items: start; background: #fff; }

/* --- Abschluss / alles im Warenkorb -------------------------------------------- */
#kommissionierungView .kom-done-state { gap: 12px; padding: 22px 24px; border-color: var(--kom-line); border-radius: 16px; }
#kommissionierungView .kom-done-state .kom-empty-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 20px; font-weight: 800; color: var(--kom-ink); }
#kommissionierungView .kom-done-state .kom-empty-text { font-size: 14.5px; }
#kommissionierungView .kom-done-state .kom-order-actions .kom-btn { min-height: 46px; padding: 0 20px; border-radius: 11px; font-size: 14.5px; }
#kommissionierungView .kom-done-state .kom-cart { align-self: stretch; max-width: 560px; }

/* --- Vollbild (Tablet quer): die Packkarte fuellt den Bildschirm, Listen scrollen in sich. Hochkant
   (bis 900px) stehen die Spalten untereinander und die Seite scrollt normal. --------------------------- */
@media (min-width: 901px) {
  body.kom-fullscreen #kommissionierungView { height: 100%; }
  body.kom-fullscreen #kommissionierungView #kommissionierungOrdersPanel,
  body.kom-fullscreen #kommissionierungView #kommissionierungWork { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.kom-fullscreen #kommissionierungView .kom-station { flex: 1 1 auto; min-height: 0; }
  body.kom-fullscreen #kommissionierungView .kom-work { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.kom-fullscreen #kommissionierungView .kom-work-main.kom-pick { min-height: 0; overflow: auto; }
  body.kom-fullscreen #kommissionierungView .kom-scan-cart { flex: 1 1 auto; overflow: auto; }
  body.kom-fullscreen #kommissionierungView .kom-station .kom-work-side { min-height: 0; overflow: auto; }
  /* Wird es eng, gibt die Traegerliste Hoehe ab (mindestens eine Kachelreihe bleibt sichtbar und scrollt). */
  body.kom-fullscreen #kommissionierungView .kom-carriers { flex: 0 1 auto; min-height: 128px; overflow: hidden; }
  body.kom-fullscreen #kommissionierungView .kom-carrier-list { flex: 1 1 auto; max-height: none; min-height: 0; align-content: start; }
}
body.kom-fullscreen #kommissionierungView .kom-pick-place .kom-work-place { min-width: 200px; }
body.kom-fullscreen #kommissionierungView .kom-pick-place .kom-work-place dd { font-size: 46px; }
body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-title { font-size: clamp(28px, 3.2vw, 40px); }
body.kom-fullscreen #kommissionierungView .kom-work-qty strong { font-size: 56px; }
body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-facts dd { font-size: 20px; }
body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-facts .kom-fact-size dd { font-size: 34px; }
body.kom-fullscreen #kommissionierungView .kom-pick-customer dd { font-size: 17px; }
body.kom-fullscreen #kommissionierungView .kom-pick-customer .kom-work-customer dd { font-size: 18px; }
body.kom-fullscreen #kommissionierungView .kom-carrier-name { font-size: 17px; }
body.kom-fullscreen #kommissionierungView .kom-carrier-qty { font-size: 28px; }
body.kom-fullscreen #kommissionierungView .kom-pick .kom-action { min-height: 84px; font-size: 21px; }
body.kom-fullscreen #kommissionierungView .kom-pick .kom-action-packed { font-size: 24px; }
body.kom-fullscreen #kommissionierungView .kom-work-scan input[type="text"] { height: 72px; font-size: 30px; }
body.kom-fullscreen #kommissionierungView .kom-work-scan .kom-btn { min-height: 72px; }
body.kom-fullscreen #kommissionierungView .kom-work-scan [role="status"] { font-size: 19px; }
body.kom-fullscreen #kommissionierungView .kom-scan-cart .kom-item-name { font-size: 17px; }
body.kom-fullscreen #kommissionierungView .kom-scan-cart .kom-item-customer { font-size: 15px; }
body.kom-fullscreen #kommissionierungView .kom-scan-cart .kom-item-facts { font-size: 14.5px; }
body.kom-fullscreen #kommissionierungView .kom-scan-cart .kom-item-carriers span { font-size: 13.5px; }
body.kom-fullscreen #kommissionierungView .kom-scan-cart .kom-item-qty strong { font-size: 28px; }

/* Vollbild auf niedrigen Bildschirmen (z. B. 1024 x 768): kompakter, damit die Arbeitsbuttons sichtbar bleiben. */
@media (min-width: 901px) and (max-height: 820px) {
  body.kom-fullscreen #kommissionierungView .kom-station,
  body.kom-fullscreen #kommissionierungView .kom-work-main.kom-pick { gap: 10px; }
  body.kom-fullscreen #kommissionierungView .kom-work-main.kom-pick { padding: 14px 16px; }
  body.kom-fullscreen #kommissionierungView .kom-pick-place .kom-work-place dd { font-size: 38px; }
  body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-title { font-size: clamp(24px, 2.8vw, 34px); }
  body.kom-fullscreen #kommissionierungView .kom-work-qty strong { font-size: 46px; }
  body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-facts > div { padding: 8px 12px; }
  body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-facts .kom-fact-size dd { font-size: 30px; }
  body.kom-fullscreen #kommissionierungView .kom-pick .kom-work-alert { padding: 9px 14px; }
  body.kom-fullscreen #kommissionierungView .kom-carriers { min-height: 112px; }
  body.kom-fullscreen #kommissionierungView .kom-pick-footer { gap: 10px; padding-top: 10px; }
  body.kom-fullscreen #kommissionierungView .kom-pick .kom-action { min-height: 70px; }
}

/* --- Breiten: Tablet quer, Tablet hoch, Handy ------------------------------------ */
@media (max-width: 1180px) {
  #kommissionierungView .kom-work { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); }
  #kommissionierungView .kom-pick-place .kom-work-place { min-width: 140px; padding: 10px 14px; }
}
@media (max-width: 900px) {
  #kommissionierungView .kom-work { grid-template-columns: 1fr; }
  #kommissionierungView .kom-station-bar { grid-template-columns: minmax(0, 1fr) auto; }
  #kommissionierungView .kom-station-progress { grid-column: 1 / -1; grid-row: 2; }
  #kommissionierungView .kom-workload-card { grid-template-columns: 1fr; }
  #kommissionierungView .kom-workload-card .kom-order-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  #kommissionierungView .kom-pick-hero { grid-template-columns: minmax(0, 1fr) auto; }
  #kommissionierungView .kom-pick-hero .kom-work-titletext { grid-column: 1 / -1; grid-row: 2; }
  #kommissionierungView .kom-pick-place .kom-work-place { min-width: 0; }
  #kommissionierungView .kom-pick-place .kom-work-place dd { font-size: 28px; }
  #kommissionierungView .kom-work-qty strong { font-size: 36px; }
  #kommissionierungView .kom-pick .kom-work-actions { grid-template-columns: 1fr 1fr; }
  #kommissionierungView .kom-pick .kom-action-packed { grid-column: 1 / -1; grid-row: 1; }
  #kommissionierungView .kom-work-scan { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   2.52.0 - Fehlmengen-Abgleich mit TIKOS: Hinweis, wenn TIKOS beim Laden nicht geprüft werden konnte;
   automatisch geschlossene Meldungen ("In TIKOS nicht mehr offen") in den Details.
   --------------------------------------------------------------------------- */
/* 2.58.1: eigener offener Nachpack-Warenkorb über der Fehlmengenliste. */
.kom-nachpack-cart{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid #bfe0b4;border-radius:12px;background:#eaf6e6;color:#25551a;font-weight:600;}

/* 2.59.1: offener TIKOS-Austausch. */
.kom-item-austausch{background:#fdecea;border-color:#f5c2bd;color:#b42318;}

.kom-shortage-sync-hint {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: #fdf2e0; border: 1px solid #e8c583; color: #8a5a17; font-size: 13px; font-weight: 600;
}
.kom-shortage-reports li.is-tikos-closed .kom-shortage-resolution { color: #667174; }

/* 2.52.0 - Ersatzartikel: Knopf an der Packposition und Auswahlfenster - gleicher Aufbau wie "Anderes Problem".
   Die Auswahlknöpfe tragen .secondary (sonst greift die globale grüne Knopfregel des Hubs) und sind über die
   ID des Fensters gekapselt. Karte wortgleich wie #kommissionierungProblemModal, Farben aus der Hub-Palette. */
.kom-ersatz-row { display: flex; justify-content: flex-end; margin: 8px 0 0; }
#kommissionierungErsatzModal .kom-problem-card {
  width: min(520px, 94vw); max-height: 86vh; overflow: auto; box-sizing: border-box;
  background: #fff; border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
#kommissionierungErsatzModal .kom-problem-card h3 { margin: 0; }
#kommissionierungErsatzModal .kom-ersatz-carriers { display: flex; flex-wrap: wrap; gap: 6px; }
#kommissionierungErsatzModal .kom-ersatz-carriers.hidden { display: none; }
#kommissionierungErsatzModal .kom-ersatz-carrier.is-selected { border-color: #a2bf13; background: #eef4d6; color: #23320a; }
#kommissionierungErsatzModal .kom-ersatz-list { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow: auto; }
#kommissionierungErsatzModal .kom-ersatz-option {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; margin: 0; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid #d7ddd0; border-radius: 10px; background: #fff; color: #323a3b; text-align: left; font: inherit; cursor: pointer;
}
#kommissionierungErsatzModal .kom-ersatz-option:hover { background: #f6f8f2; }
#kommissionierungErsatzModal .kom-ersatz-option.is-selected { border-color: #a2bf13; background: #eef4d6; box-shadow: inset 0 0 0 1px #a2bf13; }
#kommissionierungErsatzModal .kom-ersatz-option.is-disabled { opacity: .6; cursor: not-allowed; background: #f5f7f2; }
#kommissionierungErsatzModal .kom-ersatz-rank {
  flex: 0 0 28px; height: 28px; border-radius: 50%; background: #eef2ea; color: #323a3b;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
#kommissionierungErsatzModal .kom-ersatz-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#kommissionierungErsatzModal .kom-ersatz-number { font-size: 12.5px; color: #667174; }
#kommissionierungErsatzModal .kom-item-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: #323a3b; }
#kommissionierungErsatzModal .kom-ersatz-reason { font-size: 12.5px; font-weight: 600; color: #8a5a17; }
#kommissionierungErsatzModal .kom-ersatz-qty { display: flex; align-items: center; gap: 10px; }
#kommissionierungErsatzModal .kom-ersatz-qty input { width: 90px; margin: 0; }
#kommissionierungErsatzModal .kom-ersatz-summary { margin: 0; font-size: 13.5px; font-weight: 600; color: #23320a; }

/* Druck: ausschließlich für einen bewusst gestarteten Fehlmengen-Druck. Die Regeln greifen nur,
   solange printShortages() die Klasse kom-print-shortages am <body> gesetzt hat - ein normaler
   Druck (Strg+P) in irgendeinem anderen Hub-Modul bleibt davon völlig unberührt. Bewusst KEINE
   unbedingte body-*-Regel, obwohl diese Datei global geladen wird. */
/* 2.60.0: Kürzen-Hinweis nach dem Scan - groß, bleibt bis zum nächsten Scan oder OK. */
.kom-kuerzen-alert { border: 3px solid #b42318; background: #fdecea; color: #7a1a12; margin: 12px 0; }
.kom-kuerzen-alert span { font-size: 22px; font-weight: 800; color: #7a1a12; }
.kom-kuerzen-alert .kom-kuerzen-ok { align-self: flex-start; margin-top: 8px; min-width: 96px; }
.kom-item-artnr em { font-style: normal; color: #6b7280; }
.kom-shortage-ident { font-variant-numeric: tabular-nums; }


@media print {
  body.kom-print-shortages * { visibility: hidden; }
  body.kom-print-shortages #kommissionierungShortagesPanel,
  body.kom-print-shortages #kommissionierungShortagesPanel * { visibility: visible; }
  body.kom-print-shortages #kommissionierungShortagesPanel { position: absolute; left: 0; top: 0; width: 100%; }
  body.kom-print-shortages #kommissionierungShortagesPanel .kom-toolbar { display: none; }
  body.kom-print-shortages .kom-shortage-list { grid-template-columns: 1fr 1fr; }
  body.kom-print-shortages .kom-shortage-actions { display: none; }
  /* 2.44.12: die Arbeitsliste auf Papier - ohne Schalter und Aktionen; jede Einzelmeldung als Tabelle. */
  body.kom-print-shortages .kom-shortage-row-toggle,
  body.kom-print-shortages .kom-shortage-count-toggle,
  body.kom-print-shortages .kom-shortage-detail-head,
  body.kom-print-shortages .kom-shortage-detail-hint,
  body.kom-print-shortages .kom-shortage-detail .kom-shortage-reports { display: none; }
  body.kom-print-shortages .kom-shortage-worklist { border: 0; border-radius: 0; }
  body.kom-print-shortages .kom-nachpack-cart { display: none; }
  body.kom-print-shortages .kom-shortage-row { grid-template-columns: minmax(0, 1fr) 70px 175px; grid-template-areas: "main qty times" "side side side"; row-gap: 0; padding: 8px 0 4px; background: none; break-inside: avoid; }
  body.kom-print-shortages .kom-shortage-main { display: block; }
  body.kom-print-shortages .kom-shortage-times { display: flex; flex-direction: column; }
  body.kom-print-shortages .kom-shortage-detail { padding: 0 0 8px; background: none; box-shadow: none; }
  body.kom-print-shortages .kom-shortage-detail-scroll { max-height: none; overflow: visible; border-color: #d7ddd0; }
  body.kom-print-shortages .kom-shortage-detail-table { display: table; font-size: 10px; }
  body.kom-print-shortages .kom-shortage-detail-table th { position: static; }
  body.kom-print-shortages .kom-shortage-detail-table th, body.kom-print-shortages .kom-shortage-detail-table td { padding: 4px 8px; }
}

/* --- 2.67.3 - einheitliche Dialoge (Kundenbetreuung informieren, Warten auf Ware, Teil nicht verwendbar, Bestaetigungen) ------------------------------------------------
   Weisse Karte mit Rahmen und Schatten, abgerundet, hoechstens ca. 640 px breit, zentriert; der Hintergrund wird nur leicht abgedunkelt (kein Weichzeichner).
   Kopfzeile mit Titel und Schliessen-X, Fusszeile rechts: Abbrechen (sekundaer), Hauptaktion (primaer). Ausschliesslich Klassen dieses Moduls. */
.modal.kom-modal { background: rgba(21, 28, 30, .35); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px; box-sizing: border-box; }
.kom-modal-card.kom-dialog {
  width: min(640px, 100%); max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 0; gap: 0;
  background: #fff; border: 1px solid #d6dccf; border-radius: 14px; box-shadow: 0 12px 36px rgba(21, 28, 30, .22);
  display: flex; flex-direction: column;
}
#kommissionierungPreviewModal .kom-modal-card.kom-dialog,
#kommissionierungHistoryModal .kom-modal-card.kom-dialog { width: min(980px, 100%); max-width: 980px; }
.kom-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e4e8df; position: sticky; top: 0; background: #fff; z-index: 1; border-radius: 14px 14px 0 0; }
.kom-dialog-head h3 { margin: 0; font-size: 18px; line-height: 1.25; color: #1f2a2c; }
.kom-dialog-close { appearance: none; border: 0; background: transparent; color: #667174; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.kom-dialog-close:hover, .kom-dialog-close:focus-visible { background: #eef1ea; color: #1f2a2c; outline: none; }
.kom-dialog > :not(.kom-dialog-head):not(.kom-dialog-foot):not(.kom-dialog-body) { margin-left: 18px; margin-right: 18px; }
.kom-dialog > .kom-dialog-head + * { margin-top: 14px; }
.kom-dialog > * + * { margin-top: 10px; }
.kom-dialog-body { padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 10px; }
.kom-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; margin: 14px 0 0 !important; border-top: 1px solid #e4e8df; background: #fafbf8; border-radius: 0 0 14px 14px; position: sticky; bottom: 0; }
.kom-dialog-foot .kom-spacer { flex: 1; }
.kom-btn-primary:disabled, .kom-dialog-foot button:disabled { opacity: .5; cursor: not-allowed; }
.kom-dialog-hint { margin: 0; font-size: 12.5px; color: #667174; }
.kom-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f6f8f2; }
.kom-info-grid > div { min-width: 0; }
.kom-info-grid dt { margin: 0; font-size: 11px; font-weight: 700; color: #667174; text-transform: uppercase; letter-spacing: .04em; }
.kom-info-grid dd { margin: 2px 0 0; font-size: 14px; color: #1f2a2c; overflow-wrap: anywhere; }
.kom-info-grid dd small { color: #667174; }
.kom-info-recipient { background: #eef4ea; }
.kom-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kom-templates-label { font-size: 12px; font-weight: 700; color: #667174; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.kom-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kom-dialog .kom-problem-card label { margin-top: 2px; }
@media (max-width: 560px) {
  .kom-dialog-foot { flex-direction: column-reverse; }
  .kom-dialog-foot button { width: 100%; }
}
.kom-dialog-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: #323a3b; }
.kom-dialog-confirm { max-width: 480px; }
/* 2.67.3: Abnahme - Ampel, Kacheln, "Was ist zu tun", einklappbare Bereiche */
.kom-ampel { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 14px; border: 1px solid; margin: 0 0 12px; }
.kom-ampel strong { display: block; font-size: 1.5rem; }
.kom-ampel small { color: #4b5557; }
.kom-ampel-dot { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.kom-ampel-ok { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.kom-ampel-ok .kom-ampel-dot { background: #12b76a; }
.kom-ampel-rot { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.kom-ampel-rot .kom-ampel-dot { background: #f04438; }
.kom-abnahme-stand { margin: 0 0 12px; }
.kom-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kom-kpi { background: #fff; border: 1px solid #dfe4e5; border-radius: 12px; padding: 12px 16px; }
.kom-kpi strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kom-kpi span { color: #5a6567; font-size: 13px; }
.kom-abnahme-todo { background: #fff; border: 1px solid #dfe4e5; border-radius: 12px; padding: 12px 18px; margin-bottom: 16px; }
.kom-abnahme-todo h4 { margin: 0 0 8px; }
.kom-abnahme-todo ul { list-style: none; margin: 0; padding: 0; }
.kom-abnahme-todo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f1; }
.kom-abnahme-todo li:first-child { border-top: 0; }
.kom-details { background: #fff; border: 1px solid #dfe4e5; border-radius: 12px; padding: 8px 18px; margin-bottom: 12px; }
.kom-details > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.kom-num { text-align: right; }
/* 2.67.3: einheitliche Listen (Auftraege, Fehlmengen, Warten auf Ware) */
.kom-table th { position: sticky; top: 0; z-index: 1; background: #f6f8f8; white-space: nowrap; }
.kom-table td { height: 38px; vertical-align: middle; }
.kom-table td.kom-num, .kom-table th.kom-num { text-align: right; font-variant-numeric: tabular-nums; }
.kom-table tbody tr:hover { background: #f8fafa; }
.kom-empty-cell { text-align: center; color: #5a6567; padding: 18px 8px; }



/* 2.67.7: Etikettendrucker (Umschalter im Packer, Druckerliste in der Wartung) */
.kom-printer-pick { margin: 0 0 6px; font-size: 13px; }
.kom-printer-pick select { margin-left: 6px; }
.kom-printer-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kom-printer-form input { min-width: 120px; }
.kom-printer-off { color: #6b7280; }