/* =============================================================================
   JaaS Lagermonitore – zentrale Styles
   Wird von BEIDEN Monitoren genutzt:
     - WarehouseMonitoringListComponent (.wm-*)
     - PickingAreaMonitorComponent      (.pam-*)
   Gemeinsame Farb-/Balkenklassen (.wm-bar-*) werden von beiden verwendet,
   damit die Farbcodierung (überfällig / heute / morgen / später / ohne Datum)
   nur an EINER Stelle gepflegt wird.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   Gemeinsame Farbcodierung (Datum-Kategorie)
   ───────────────────────────────────────────────────────────────────────── */
.wm-bar-overdue {
    background-color: #e53935;
    color: #ffffff;
}

.wm-bar-today {
    background-color: #fbc02d;
    color: #1a1a1a;
}

.wm-bar-nextday {
    background-color: #fb8c00;
    color: #1a1a1a;
}

.wm-bar-upcoming {
    background-color: #42a5f5;
    color: #0e2236;
}

.wm-bar-undated {
    background-color: #6c727d;
    color: #ffffff;
}

/* =============================================================================
   WAREHOUSE-MONITOR (Kacheln)  – .wm-*
   ============================================================================= */

/* Kein Scrollbar über das gesamte Control – nur der Kachelbereich scrollt. */
body:has(.wm-root) {
    overflow: hidden;
}

.wm-root {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
    /* Platz für die fest am Boden schwimmende Legenden-/Einstellungsleiste reservieren. */
    padding-bottom: 56px;
    gap: 12px;
}

/* ── Obere Leiste: Seiten-Anzeige + Fortschrittsbalken (rechts) ── */
.wm-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex: 0 0 auto;
}

.wm-topbar .wm-status {
    font-size: 0.95rem;
    color: var(--jt-fg-secondary, #888);
    white-space: nowrap;
}

.wm-progress {
    width: 160px;
    height: 6px;
    border-radius: 3px;
    background: var(--jt-bg-surface-3, rgba(255,255,255,0.12));
    overflow: hidden;
    flex: 0 0 auto;
}

.wm-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--main-color, #64c4dd);
    animation-name: wm-progress-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes wm-progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ── Refresh-Spinner (kleiner Kringel neben dem Fortschrittsbalken, statt Overlay) ── */
.wm-refresh-spinner,
.pam-refresh-spinner {
    font-size: 18px;
    color: var(--main-color, #64c4dd);
    opacity: 0;
    transition: opacity 0.2s ease;
    flex: 0 0 auto;
}

.wm-refresh-spinner-active,
.pam-refresh-spinner-active {
    opacity: 1;
    animation: wm-refresh-spin 0.8s linear infinite;
}

.pam-refresh-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@keyframes wm-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Kachel-Grid (skaliert über --wm-cols) ── */
.wm-grid-scroll {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

.wm-grid {
    display: grid;
    grid-template-columns: repeat(var(--wm-cols, 4), minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
    padding-bottom: 4px;
}

.wm-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 55vh;
    text-align: center;
    color: var(--jt-fg-secondary, #555);
    font-size: 1.6rem;
    font-weight: 600;
}

.wm-empty-icon {
    font-size: 64px;
    color: var(--jt-fg-tertiary, #888);
}

/* ── Kachel (themenabhängig: hell im Light-, anthrazit im Dark-Skin) ── */
.wm-tile {
    background-color: var(--jt-surface-card, #ffffff);
    color: var(--jt-fg-default, #222222);
    border: 1px solid var(--jt-border-default, #e6e6e6);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--jt-shadow-card, 0px 3px 23px -1px rgba(0, 0, 0, 0.3));
}

.wm-tile-warn {
    box-shadow: 0 0 0 2px rgba(216, 27, 150, 0.55), 0px 3px 23px -1px rgba(0, 0, 0, 0.45);
}

/* Durchgängiger farbiger Balken oben (Datum / Bearbeiter / Mengen) */
.wm-tile-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: calc(13px * var(--wm-fs, 1));
    font-weight: 600;
}

.wm-tile-bar .wm-counts {
    white-space: nowrap;
}

.wm-tile-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: calc(14px * var(--wm-ls, 1)) 14px;
}

/* Innenabstand des Textblocks der Kachel skaliert mit dem Zeilenabstand. */
.wm-tile-info > * + * {
    margin-top: calc(2px * var(--wm-ls, 1));
}

.wm-qr {
    background: #ffffff;
    border-radius: 14px;
    padding: 6px;
    line-height: 0;
    flex: 0 0 auto;
}

.wm-qr img {
    height: 160px;
    display: block;
}

.wm-tile-info {
    overflow: hidden;
    min-width: 0;
}

.wm-tile-info h5 {
    margin: 0 0 4px 0;
    color: inherit;
    font-size: calc(14px * var(--wm-fs, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Firmenname des Kunden – gleiche Typografie wie die Vorgangsnummer, über dem Titel */
.wm-tile-info .wm-customer {
    display: block;
    color: var(--jt-fg-tertiary, #888);
    font-size: calc(13px * var(--wm-fs, 1));
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-tile-info .wm-identifier {
    display: block;
    color: var(--jt-fg-tertiary, #888);
    font-size: calc(13px * var(--wm-fs, 1));
}

/* Versandart / Lieferbedingung – unter der Vorgangsnummer */
.wm-tile-info .wm-shipping {
    display: block;
    color: var(--jt-fg-secondary, #555);
    font-size: calc(12px * var(--wm-fs, 1));
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-tile-bar .wm-tile-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Warnbereich: abweichende Positionslaufzeiten */
.wm-deviation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px 10px 14px;
    padding: 8px 12px;
    background: rgba(216, 27, 150, 0.16);
    border: 1px solid #d81b96;
    border-left-width: 5px;
    border-radius: 10px;
    color: #c2185b;
    font-size: calc(12.5px * var(--wm-fs, 1));
    font-weight: 600;
}

.wm-deviation .material-symbols-outlined {
    font-size: 18px;
}

.wm-tile-footer {
    margin-top: auto;
    padding: calc(10px * var(--wm-ls, 1)) 14px calc(14px * var(--wm-ls, 1)) 14px;
    font-size: calc(12px * var(--wm-fs, 1));
    color: var(--jt-fg-secondary, #555);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(10px * var(--wm-ls, 1));
}

.wm-tile-footer p {
    margin: 0;
}

/* Zweispaltiges Inforaster (Beginn/Ende, Lieferung/Rück, Projektleiter/Bearbeiter) */
.wm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: calc(4px * var(--wm-ls, 1));
}

.wm-info-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-info-cell .wm-info-label {
    color: var(--jt-fg-tertiary, #888);
    margin-right: 4px;
}

/* ── Kommissionierungsflächen (signifikantes Feld am Vorgang) ── */
.wm-picking {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba( 90, 130, 255, 0.12 );
    border: 1px solid rgba( 90, 130, 255, 0.35 );
    color: var(--jt-fg-default, #222);
    font-size: calc(12px * var(--wm-fs, 1));
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.wm-picking .material-symbols-outlined {
    font-size: 18px;
    color: #5470c4;
    flex: 0 0 auto;
}

.wm-picking-text {
    word-break: break-word;
}

.wm-picking-label {
    font-weight: 700;
    margin-right: 2px;
}

.wm-picking-out {
    color: #c2680a;
}

.wm-picking-in {
    color: #1f8a4d;
}

.wm-picking-sep {
    color: var(--jt-fg-tertiary, #8a8f9c);
    padding: 0 2px;
}

/* ── Unterer Bereich: schwimmt IMMER am Viewport-Boden (Legende + Einstellungen) ── */
.wm-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    box-sizing: border-box;
    border-top: 1px solid var(--jt-border-default, #e6e6e6);
    background: var(--jt-bg-surface, #ffffff);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -3px 18px -6px rgba(0, 0, 0, 0.35);
}

.wm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--jt-fg-secondary, #555);
}

.wm-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wm-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.wm-legend-swatch.wm-deviation-swatch {
    background: rgba(216, 27, 150, 0.16);
    border: 1px solid #d81b96;
}

/* Vertikale Trennlinie zwischen Einstellungen-Button und Legende */
.wm-legend-divider {
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--jt-border-default, #d0d0d0);
}

.wm-legend-rule {
    cursor: help;
    color: var(--jt-text-muted, #8b93a1);
    gap: 4px;
}

.wm-legend-rule .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.wm-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.wm-control label {
    color: var(--jt-fg-secondary, #555);
    white-space: nowrap;
}

.wm-select {
    background-color: var(--jt-input-bg, #fff);
    color: var(--jt-input-text, #333);
    border: 1px solid var(--jt-input-border, #ccc);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
}

.wm-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wm-pager button {
    background: var(--jt-bg-surface-2, #f0f0f0);
    border: 1px solid var(--jt-border-default, #ddd);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 0;
    color: inherit;
}

.wm-pager button:disabled {
    opacity: 0.4;
    cursor: default;
}

.wm-pager .wm-page-indicator {
    font-size: 13px;
    min-width: 64px;
    text-align: center;
}

.wm-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 13px;
}

.wm-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px;
    border: 1px solid var(--jt-border-default, #e6e6e6);
    border-radius: 12px;
    background: var(--jt-bg-surface-2, #f8fafb);
    max-height: 60vh;
    overflow: auto;
}

.wm-settings-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.wm-settings-group > .wm-settings-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.wm-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow: auto;
}

.wm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* =============================================================================
   KOMMISSIONIERUNGSFLÄCHEN-MONITOR (Einzeljob)  – .pam-*
   ============================================================================= */

/* Kein Scrollbar über das gesamte Control – nur die Artikelliste scrollt. */
body:has(.pam-root) {
    overflow: hidden;
}

.pam-root {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
    /* Platz für die fest am Boden schwimmende Einstellungsleiste reservieren. */
    padding-bottom: 56px;
    gap: 12px;
}

/* ── Obere Leiste: Seiten-Anzeige (links) + Refresh-Fortschritt (rechts) ── */
.pam-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
}

.pam-topbar .pam-status {
    font-size: 0.95rem;
    color: var(--jt-fg-secondary, #888);
    white-space: nowrap;
}

/* Seiten-Pager (Artikelliste) */
.pam-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pam-pager button {
    background: var(--jt-bg-surface-2, #f0f0f0);
    border: 1px solid var(--jt-border-default, #ddd);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 0;
    color: inherit;
}

.pam-pager button:disabled {
    opacity: 0.4;
    cursor: default;
}

.pam-pager .pam-page-indicator {
    font-size: 13px;
    min-width: 72px;
    text-align: center;
    color: var(--jt-fg-secondary, #888);
    white-space: nowrap;
}

/* Refresh-Fortschrittsbalken – füllt sich bis zur nächsten Aktualisierung. */
.pam-refresh-progress {
    width: 200px;
    height: 6px;
    border-radius: 3px;
    background: var(--jt-bg-surface-3, rgba(255,255,255,0.12));
    overflow: hidden;
    flex: 0 0 auto;
}

.pam-refresh-bar {
    height: 100%;
    width: 0%;
    background: var(--main-color, #64c4dd);
    animation-name: wm-progress-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

/* ── Hauptbereich: zwei Spalten (links QR+Stammdaten, rechts Artikel) ── */
.pam-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(480px, 600px) 1fr;
    gap: 18px;
}

.pam-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 55vh;
    text-align: center;
    color: var(--jt-fg-secondary, #555);
    font-size: 1.6rem;
    font-weight: 600;
}

.pam-empty-icon {
    font-size: 64px;
    color: var(--jt-fg-tertiary, #888);
}

/* ── Linke Spalte: QR-Code + farbiger Datums-Balken + Stammdaten ── */
.pam-left {
    background-color: var(--jt-surface-card, #ffffff);
    color: var(--jt-fg-default, #222222);
    border: 1px solid var(--jt-border-default, #e6e6e6);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--jt-shadow-card, 0px 3px 23px -1px rgba(0, 0, 0, 0.3));
}

.pam-left-warn {
    box-shadow: 0 0 0 2px rgba(216, 27, 150, 0.55), 0px 3px 23px -1px rgba(0, 0, 0, 0.45);
}

/* Farbiger Kopfbalken (Kategorie/Datum) */
.pam-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: calc(14px * var(--wm-fs, 1));
    font-weight: 700;
}

.pam-qr-wrap {
    display: flex;
    justify-content: center;
    padding: 18px 16px 8px 16px;
}

.pam-qr {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    line-height: 0;
}

.pam-qr img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

.pam-headinfo {
    padding: calc(4px * var(--wm-ls, 1)) 18px calc(10px * var(--wm-ls, 1)) 18px;
    text-align: center;
}

.pam-headinfo h4 {
    margin: 0 0 2px 0;
    color: inherit;
    font-size: calc(18px * var(--wm-fs, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pam-headinfo .pam-identifier {
    color: var(--jt-fg-tertiary, #888);
    font-size: calc(14px * var(--wm-fs, 1));
}

/* ── Warenrichtung (RAUS / REIN) – gleiche Optik wie in der Gerätezuordnung ── */
.pam-direction-wrap {
    display: flex;
    justify-content: center;
    padding: 2px 18px 14px 18px;
}

.pam-direction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 7px 22px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pam-direction-icon {
    font-size: 18px;
}

/* RAUS: Rot/Orange – Ware geht raus */
.pam-direction-out {
    background: rgba(229, 115, 115, 0.15);
    color: #e57373;
    border: 1px solid rgba(229, 115, 115, 0.35);
}

/* REIN: Grün – Ware kommt zurück */
.pam-direction-in {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.35);
}

/* Stammdaten-Tabelle */
.pam-meta {
    padding: calc(6px * var(--wm-ls, 1)) 18px calc(16px * var(--wm-ls, 1)) 18px;
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--wm-ls, 1));
}

.pam-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: calc(13.5px * var(--wm-fs, 1));
    border-bottom: 1px solid var(--jt-border-subtle, rgba(0, 0, 0, 0.06));
    padding-bottom: calc(5px * var(--wm-ls, 1));
}

.pam-meta-row:last-child {
    border-bottom: none;
}

.pam-meta-label {
    color: var(--jt-fg-tertiary, #888);
    white-space: nowrap;
}

.pam-meta-value {
    color: var(--jt-fg-default, #222);
    font-weight: 600;
    text-align: right;
}

/* Warnbereich: abweichende Positionslaufzeiten */
.pam-deviation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 14px 18px;
    padding: 8px 12px;
    background: rgba(216, 27, 150, 0.16);
    border: 1px solid #d81b96;
    border-left-width: 5px;
    border-radius: 10px;
    color: #c2185b;
    font-size: calc(12.5px * var(--wm-fs, 1));
    font-weight: 600;
}

.pam-deviation .material-symbols-outlined {
    font-size: 18px;
}

/* ── Rechte Spalte: Fortschritt + Artikelliste ── */
.pam-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
}

.pam-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
}

.pam-progress-head .pam-progress-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.pam-progress-head .pam-progress-counts {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.pam-progress-track {
    height: 14px;
    border-radius: 7px;
    background: var(--jt-bg-surface-3, rgba(0,0,0,0.12));
    overflow: hidden;
    flex: 0 0 auto;
}

.pam-progress-fill {
    height: 100%;
    background: #43a047;
    border-radius: 7px;
    transition: width 0.4s ease;
}

.pam-list-scroll {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    border: 1px solid var(--jt-border-default, #3a3f4b);
    border-radius: 14px;
}

.pam-article-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: calc(12px * var(--wm-ls, 1)) 16px;
    border-bottom: 1px solid var(--jt-border-default, rgba(0,0,0,0.08));
    font-size: calc(1rem * var(--wm-fs, 1));
}

.pam-article-row:last-child {
    border-bottom: none;
}

.pam-article-row.pam-article-complete {
    background: rgba(67, 160, 71, 0.12);
}

.pam-article-pos {
    color: var(--jt-fg-tertiary, #888);
    font-variant-numeric: tabular-nums;
}

.pam-article-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.pam-article-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.pam-article-amount .pam-amount-ok {
    color: #43a047;
}

.pam-article-check {
    color: #43a047;
}

/* ── Unterer Bereich: schwimmt IMMER am Viewport-Boden (Einstellungen) ── */
.pam-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    box-sizing: border-box;
    border-top: 1px solid var(--jt-border-default, #e6e6e6);
    background: var(--jt-bg-surface, #ffffff);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -3px 18px -6px rgba(0, 0, 0, 0.35);
}

.pam-bottom-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

/* ── Farbliche Legende (homogen zum Kachel-Lagermonitor) ── */
.pam-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--jt-fg-secondary, #555);
}

.pam-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pam-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.pam-legend-swatch.pam-deviation-swatch {
    background: rgba(216, 27, 150, 0.16);
    border: 1px solid #d81b96;
}

.pam-legend-swatch.pam-legend-out {
    background: rgba(229, 115, 115, 0.18);
    border: 1px solid rgba(229, 115, 115, 0.55);
}

.pam-legend-swatch.pam-legend-in {
    background: rgba(76, 175, 80, 0.18);
    border: 1px solid rgba(76, 175, 80, 0.55);
}

.pam-legend-rule {
    cursor: help;
    color: var(--jt-text-muted, #8b93a1);
    gap: 4px;
}

.pam-legend-rule .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.pam-legend-divider {
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--jt-border-default, #d0d0d0);
}

.pam-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 13px;
}

.pam-bottom-divider {
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--jt-border-default, #d0d0d0);
}

.pam-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.pam-control label {
    color: var(--jt-fg-secondary, #555);
    white-space: nowrap;
}

.pam-select {
    background-color: var(--jt-input-bg, #fff);
    color: var(--jt-input-text, #333);
    border: 1px solid var(--jt-input-border, #ccc);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
}

.pam-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px;
    border: 1px solid var(--jt-border-default, #e6e6e6);
    border-radius: 12px;
    background: var(--jt-bg-surface-2, #f8fafb);
    max-height: 60vh;
    overflow: auto;
}

.pam-settings-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.pam-settings-group > .pam-settings-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

/* =============================================================================
   DARK-SKIN-FEINabstimmung – einzelne Akzentfarben heller, damit sie auf der
   anthrazitfarbenen Kachel wieder gut leuchten. Flächen/Texte folgen den
   Theme-Variablen (siehe jaas-theme.css) automatisch.
   ============================================================================= */
[data-theme="dark"] .wm-deviation,
[data-theme="dark"] .pam-deviation {
    color: #ff9ed8;
}

[data-theme="dark"] .wm-picking .material-symbols-outlined {
    color: #9fb4ff;
}

[data-theme="dark"] .wm-picking-out {
    color: #ffb45a;
}

[data-theme="dark"] .wm-picking-in {
    color: #6fcf97;
}

/* =============================================================================
   MOBILE SPERRE – Lagermonitore sind ausschließlich für stationäre Geräte
   gedacht. Unter 1024px wird der Monitor ausgeblendet und stattdessen ein
   Hinweis angezeigt.
   ============================================================================= */
.wm-mobile-blocker,
.pam-mobile-blocker {
    display: none;
}

@media (max-width: 1023.98px) {

    .wm-root,
    .pam-root {
        display: none !important;
    }

    .wm-mobile-blocker,
    .pam-mobile-blocker {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 18px;
        min-height: calc(100vh - 140px);
        padding: 40px 24px;
        color: var(--jt-fg-secondary, #555);
    }

    .wm-mobile-blocker .material-symbols-outlined,
    .pam-mobile-blocker .material-symbols-outlined {
        font-size: 72px;
        color: var(--jt-fg-tertiary, #888);
    }

    .wm-mobile-blocker p,
    .pam-mobile-blocker p {
        margin: 0;
        max-width: 440px;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.5;
    }
}

/* =============================================================================
   KLICKBARE VORGÄNGE – QR-Code, Titel und Vorgangsnummer öffnen den Vorgang in
   einem neuen Tab. Optik bleibt unverändert (kein sichtbarer Link-Stil).
   ============================================================================= */
.wm-tile-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.wm-tile-link[href] {
    cursor: pointer;
}

.pam-head-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pam-head-link[href] {
    cursor: pointer;
}

/* =============================================================================
   ZENTRIERUNG – Ladeanimation (LoadableComponent-Overlay) und die "Keine
   Einträge"-Meldung gehen von derselben Quelle aus, damit beide – zumindest
   horizontal – identisch mittig sitzen.
   ============================================================================= */
.wm-loadable,
.pam-loadable {
    position: relative;
}

.wm-loadable > div[style*="z-index: 999"],
.pam-loadable > div[style*="z-index: 999"] {
    transform: translate(-50%, -50%);
}