/* Layout Schritt 1 (duzen-20261013/TASARIM.md §2.1, Entwurf mockup.css .mk-row/.mk-badge): Bestellzeilen mit Foto,
 * Teilenummer, Menge und Lagerort; Zahlungs-Rozet mit „Rückgängig“; Telefon-Leiste Bestand · Bestellungen · Erfassen ·
 * Versand · Mehr; Umschlag mit ungelesenen Nachrichten. Nur Farben aus --psk-* (Paletten A/B/C, hell/dunkel). */

/* ---- Fotos und Positionen (Desktop-Tabelle und Telefon) ---- */
.order-lines{display:grid;gap:8px;min-width:240px}
.order-line{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start}
.order-photo{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--psk-surface-2,#f4f6f8);border:1px solid var(--psk-border,#dadde2);color:var(--psk-fg-muted,#3a3f49);font-size:10px;line-height:1.2;text-align:center}
.order-photo img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.order-photo i{position:absolute;left:3px;bottom:3px;padding:0 4px;border-radius:4px;border:1px solid var(--psk-border,#dadde2);background:var(--psk-surface,#fff);color:var(--psk-fg,#12161c);font-style:normal;font-size:9px;font-weight:700}
.order-photo.none{border-style:dashed}
button.order-photo.none{flex-direction:column;gap:2px;padding:2px;color:var(--psk-accent,#0162d4);font:inherit;font-size:10px;font-weight:700;cursor:pointer}
button.order-photo.none svg{width:22px;height:22px}
button.order-photo.none:focus-visible{outline:3px solid var(--psk-focus,#2275e8);outline-offset:2px}
.order-line-copy{display:grid;gap:2px;min-width:0}
.order-line-copy b{font-size:14px;letter-spacing:.01em;overflow-wrap:anywhere}
.order-line-copy small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--psk-fg-muted,#3a3f49);font-size:12px}
.order-line-pick{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.order-line-pick span{padding:2px 7px;border-radius:6px;background:var(--psk-surface-3,#ebedf1);color:var(--psk-fg,#12161c);font-size:12px;font-weight:700}
.order-line-pick span.loc{background:var(--psk-accent-subtle,#ecf3fe);color:var(--psk-accent-subtle-fg,#014da9)}
.order-lines-more,.order-lines-count{display:block;margin-top:4px;color:var(--psk-fg-muted,#3a3f49);font-size:12px}
.order-table tbody tr[data-order-id]{cursor:pointer}

/* ---- Zahlungs-Rozet ---- */
.order-pay{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.order-pay .order-pay-badge{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:0 12px;border:1px solid transparent;border-radius:999px;background:var(--psk-surface-3,#ebedf1);color:var(--psk-fg,#12161c);font:inherit;font-size:13px;font-weight:700;white-space:nowrap}
.order-pay button.order-pay-badge{cursor:pointer}
.order-pay button.order-pay-badge:disabled{cursor:progress;opacity:.75}
.order-pay .order-pay-badge.unpaid,.order-pay .order-pay-badge.check,.order-pay .order-pay-badge.review,.order-pay .order-pay-badge.returns{background:var(--psk-warning-subtle,#fff4de);color:var(--psk-warning-fg,#7d460b);border-color:color-mix(in srgb,var(--psk-warning-fg,#7d460b) 35%,transparent)}
.order-pay .order-pay-badge.paid{background:var(--psk-success-subtle,#e2fbe9);color:var(--psk-success-fg,#01532d)}
.order-pay .order-pay-badge.shipped,.order-pay .order-pay-badge.archive,.order-pay .order-pay-badge.cancelled{background:var(--psk-surface-3,#ebedf1);color:var(--psk-fg-muted,#3a3f49)}
.order-pay-hint{font-weight:600;opacity:.85}
.order-pay-undo{min-height:32px;padding:0 6px;border:0;background:none;color:var(--psk-accent,#0162d4);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer}
.order-pay :is(button):focus-visible{outline:3px solid var(--psk-focus,#2275e8);outline-offset:2px}

/* ---- Telefon: Bestellzeile wie im Entwurf ---- */
@media (max-width:760px){
  html.seller-mobile-ready .seller-order.seller-order-v2{padding:0;overflow:hidden;border:1px solid var(--psk-border);border-radius:var(--psk-radius,12px);background:var(--psk-surface);box-shadow:var(--psk-shadow-xs)}
  .seller-order-v2 .seller-order-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;margin:0;padding:8px 12px;border:0;border-bottom:1px solid var(--psk-border);background:transparent;color:var(--psk-fg-muted);font:inherit;font-size:12px;text-align:left;cursor:pointer}
  .seller-order-v2 .seller-order-head b,.seller-order-v2 .seller-order-head strong{color:var(--psk-fg)}
  .seller-order-v2 .seller-order-head>span:last-child{flex:none;white-space:nowrap}
  .seller-order-v2 .seller-order-item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:10px 12px}
  .seller-order-v2 .seller-order-item+.seller-order-item{border-top:1px dashed var(--psk-border)}
  .seller-order-v2 .order-photo{width:88px;height:88px}
  .seller-order-v2 .order-photo i{font-size:10px}
  .seller-order-v2 .seller-order-copy{display:grid;align-content:start;gap:2px;min-width:0;margin:0;padding:0;border:0;background:transparent;color:var(--psk-fg);font:inherit;text-align:left;cursor:pointer}
  .seller-order-v2 .seller-order-copy b{font-size:16px;letter-spacing:.01em;overflow-wrap:anywhere}
  .seller-order-v2 .seller-order-copy small{color:var(--psk-fg-muted);font-size:12px;overflow-wrap:anywhere}
  .seller-order-v2 .order-line-pick span{font-size:13px;padding:3px 8px;border-radius:7px}
  .seller-order-v2 .seller-order-more{display:block;padding:0 12px 8px;color:var(--psk-fg-muted);font-size:12px}
  .seller-order-v2 .seller-order-more.bad{color:var(--psk-danger-fg)}
  .seller-order-v2 .seller-order-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--psk-border);background:var(--psk-surface-2)}
  html.seller-mobile-ready .seller-order-v2 .seller-order-next{flex:1 1 140px;width:auto;min-height:40px;margin:0;padding:6px 10px;border:1px solid var(--psk-border);border-radius:10px;background:var(--psk-surface);font-size:13px}
  .seller-order-v2 .order-pay .order-pay-badge{min-height:40px}
  .seller-order-v2 .order-pay-undo{min-height:40px}

  /* Leiste: fünf Einträge, „Mehr“ wieder sichtbar (skin.css blendete ihn aus) mit Punkt bei ungelesenen Nachrichten. */
  html.seller-mobile-ready #seller-mobile-nav>button[data-seller-more]{display:flex!important;position:relative;color:var(--psk-fg)!important;font-size:10.5px;font-weight:600}
  html.seller-mobile-ready #seller-mobile-nav>button[data-seller-more].has-unread::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--psk-danger,#d02b31);box-shadow:0 0 0 2px var(--psk-surface,#fff)}
  html.seller-mobile-ready #seller-mobile-nav>a,html.seller-mobile-ready #seller-mobile-nav>button{min-width:0}

  /* Kopfzeile: Umschlag mit Zahl links neben „Mehr“. */
  html.seller-mobile-ready #seller-mobile-header{display:flex!important;align-items:center;gap:4px}
  html.seller-mobile-ready #seller-mobile-header>a{flex:1 1 auto;min-width:0;max-width:none}
  html.seller-mobile-ready #seller-mobile-header>.seller-mail{position:relative;flex:none;margin-left:auto}
  html.seller-mobile-ready #seller-mobile-header>.seller-mail[hidden]{display:none!important}
  #seller-unread-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#c62828;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  #seller-unread-count[hidden]{display:none}
}

/* ---- Desktop: Spalte „Artikel“ breit genug für Foto + Teilenummer + Menge/Lagerort (skin.css: table-layout fixed). ---- */
html body table.order-table th.order-lines-head{width:260px}
html body table.order-table td.order-lines-cell{overflow:visible;vertical-align:top}

/* ---- Farbumschalter in der Kopfzeile: gleiches Aussehen wie „Darstellung“ (skin.css body>header .appearance-toggle). ---- */
body > header .palette-toggle{min-height:36px;padding:6px 12px;border:1px solid var(--psk-border-strong)!important;border-radius:10px!important;background:var(--psk-surface)!important;color:var(--psk-fg)!important;box-shadow:var(--psk-shadow-xs)!important;font-size:13px;font-weight:600;white-space:nowrap}

/* ---- Telefon: mobile-capture.css blendet Knöpfe der Kopfzeile aus; der Umschlag bleibt sichtbar. ---- */
@media (max-width:760px){
  html.seller-mobile-ready #seller-mobile-header>button.seller-mail:not([hidden]){display:inline-grid!important;place-items:center}
}

/* Nach Bildschirmprüfung: schmale Statusspalte (Desktop) darf umbrechen; „Foto aufnehmen“ passt in das 88-px-Feld. */
html body table.order-table .order-pay .order-pay-badge{white-space:normal;text-align:left;line-height:1.2;padding:4px 10px}
html.seller-mobile-ready .seller-order-v2 button.order-photo.none{font-size:11px!important;line-height:1.15;overflow-wrap:anywhere}