/* ============================================================
   PACKEN – Kommissionieren am Handy/Tablet (Präfix pk-)
   Liste und Detail im Aufbau der Dashboards / Zeiterfassung
   (assets/dashboard-bausteine.css: thd-top, thd-main, thd-panel)
   ============================================================ */
.pk-seite[hidden], .pk-seite [hidden] { display: none !important; }

/* ===== Liste ===== */
.pk-kopf-knoepfe { display: flex; gap: 8px; }
.pk-kachel { cursor: default; }
.pk-kachel .thd-new-icon { margin-bottom: 10px !important; }
.pk-kachel-zahl { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pk-kachel.is-rot { --we: var(--danger, #c62828); }
.pk-kachel.is-rot .pk-kachel-zahl { color: var(--danger, #c62828); }
.pk-pfeil { color: var(--ink-faint, #bbb); font-size: 20px; }
.pk-schritte { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 10px; }
.pk-schritte li::marker { font-weight: 700; color: var(--accent-dark); }
.pk-schritte b { display: block; font-size: 14px; } .pk-schritte small { color: var(--ink-soft); font-size: 12.5px; }
.pk-ohne-teile { display: flex; gap: 6px; align-items: flex-start; margin-top: 18px; }
.pk-ohne-teile i { font-size: 16px; }

.pk-zeilen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pk-zeile { display: grid; grid-template-columns: 52px minmax(0, 1fr) 130px 80px 120px 22px; gap: 14px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line, #e3e1dc); border-radius: 12px; background: var(--paper, #fff); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.pk-zeile:hover { border-color: var(--accent, #e8b923); }
.pk-zeile.is-ueber { border-left: 4px solid var(--danger, #c62828); }
.pk-z-kunde { min-width: 0; display: flex; flex-direction: column; }
.pk-z-kunde strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-z-kunde small { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-z-art { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.pk-z-art i { font-size: 18px; color: var(--accent-dark); }
.pk-z-teile { font-size: 13px; color: var(--ink-soft); } .pk-z-teile b { font-size: 16px; color: var(--ink); }
.pk-z-stand { text-align: right; }
.pk-z-stand .th-status { font-size: 12px; padding: 2px 10px; }
.pk-wann { font-size: 13px; color: var(--ink-soft); }
.pk-wann.is-rot { color: var(--danger, #c62828); font-weight: 600; }
.pk-wann.is-heute { color: var(--accent-dark); font-weight: 600; }
.bd-datum.pk-ohne { opacity: .55; } .bd-datum.pk-ohne i { font-size: 20px; }

/* ===== Eine Bestellung ===== */
.pk-kopfzeile { align-items: center; gap: 16px; flex-wrap: wrap; }
.pk-titel-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk-titel-block .dashboard-title { margin: 0; }
.pk-untertitel { margin: 2px 0 0; font-size: 14px; }
.pk-zurueck { width: 42px !important; height: 42px !important; flex: none; }
.pk-zurueck .material-icons { font-size: 24px; }
.pk-knoepfe { display: flex; gap: 8px; margin-left: auto; }

/* Kacheln */
.pk-k { cursor: default; min-height: 128px; }
.pk-k .thd-new-icon { margin-bottom: 10px !important; }
.pk-k-zahl { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-k-zahl small { font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.pk-k.is-gruen { --we: var(--pal-gruen, #2e7d32); } .pk-k.is-gruen .pk-k-zahl { color: var(--pal-gruen, #2e7d32); }
.pk-k.is-rot { --we: var(--danger, #c62828); } .pk-k.is-rot .pk-k-zahl { color: var(--danger, #c62828); }
.pk-k.is-heute, .pk-k.is-gelb { --we: var(--pal-senf-dunkel, #a36b00); } .pk-k.is-heute .pk-k-zahl, .pk-k.is-gelb .pk-k-zahl { color: var(--pal-senf-dunkel, #a36b00); }

.pk-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.pk-rechts { display: flex; flex-direction: column; gap: 24px; min-width: 0; position: sticky; top: 12px; }
.pk-teile-panel, .pk-rechts .thd-panel { min-height: 0; }
.pk-zahl { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* Fortschritt */
.pk-fortschritt { height: 10px; border-radius: 999px; background: var(--neutral-100, #f1efe9); border: 1px solid var(--line); overflow: hidden; margin: 0 0 14px; }
.pk-fortschritt > div { height: 100%; background: var(--pal-gruen, #43a047); transition: width .25s; }

/* Teile */
.pk-teile { display: flex; flex-direction: column; gap: 8px; }
.pk-teil { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 52px; gap: 12px; align-items: center; padding: 10px;
  border: 1px solid var(--line, #e3e1dc); border-radius: 12px; background: var(--paper, #fff); transition: background .15s, border-color .15s; }
.pk-teil.is-fertig { background: var(--pal-gruen-hell, #eef7e8); border-color: #b7dba0; }
.pk-teil.is-fertig .pk-info b { text-decoration: line-through; text-decoration-color: #7cb342; }
.pk-bild { width: 60px; height: 60px; border-radius: 10px; background: #fff; border: 1px solid var(--line, #eee); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pk-bild img { width: 100%; height: 100%; object-fit: contain; }
.pk-bild i { color: var(--ink-faint, #bbb); font-size: 28px; }
.pk-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-info b { font-size: 15px; line-height: 1.25; }
.pk-info small { color: var(--ink-soft, #777); font-size: 12.5px; }
.pk-info i { font-size: 15px; vertical-align: -3px; margin-right: 2px; }
.pk-ort-zeile { display: flex; align-items: center; gap: 4px; margin-top: 2px; min-width: 0; }
.pk-ort-zeile i { color: var(--accent-dark, #a37a10); }
.pk-ort { width: auto; max-width: 100%; min-width: 0; padding: 4px 8px; font-size: 13.5px; border-radius: 8px; }
.pk-knapp { color: var(--danger, #c62828) !important; }
.pk-sn-hinweis { color: var(--accent-dark, #835c30) !important; }
.pk-menge { text-align: right; display: flex; flex-direction: column; }
.pk-menge b { font-size: 22px; font-variant-numeric: tabular-nums; } .pk-menge small { color: var(--ink-soft, #777); }
.pk-haken { width: 52px; height: 52px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--ink, #333); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pk-haken i { font-size: 42px; }
.pk-teil.is-fertig .pk-haken { color: #43a047; }
.pk-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; }
.pk-leer i { font-size: 40px; color: var(--accent-dark); }
.pk-leer strong { font-size: 17px; } .pk-leer span { color: var(--ink-soft); max-width: 420px; }
.pk-leer .btn { margin-top: 10px; }

/* Lieferung */
.pk-kunde { line-height: 1.45; }
.pk-kunde b { font-size: 17px; }
.pk-kunde a { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; }
.pk-kunde a i { font-size: 18px; }
.pk-daten { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.pk-daten dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-soft); padding-top: 2px; }
.pk-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pk-hinweis { display: flex; gap: 8px; margin-top: 14px; border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--pal-senf-hell, #fff8e1); }
.pk-hinweis i { color: var(--accent-dark, #a37a10); }
body.dark-mode .pk-hinweis { background: var(--nacht-800, #2a2a2a); }

/* Abschluss */
.pk-fuss { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pk-fuss:empty { display: none; }
.pk-fuss .field-hint { margin: 0; }
.pk-los { width: 100%; min-height: 54px; font-size: 16px; font-weight: 700; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pk-los.is-bereit { background: var(--pal-gruen, #2e7d32) !important; border-color: var(--pal-gruen, #2e7d32) !important; color: #fff !important; }
.pk-erledigt { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--pal-gruen-hell, #eef7e8); font-weight: 600; }
.pk-erledigt i { color: #43a047; }
body.dark-mode .pk-teil.is-fertig { background: #233320; border-color: #3f6b33; }
body.dark-mode .pk-erledigt { background: #233320; }

@media (max-width: 1100px) {
  .pk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  #pk-liste .thd-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pk-main, #pk-liste .thd-main { grid-template-columns: 1fr !important; }
  .pk-rechts { position: static; }
  /* auf dem Handy: Lieferung zuerst, Abschluss unten fest */
  .pk-main { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 16px; }
  .pk-rechts { display: contents; }
  .pk-liefer-panel { order: -1; }
  .pk-teile-panel { order: 0; } .pk-sn-box { order: 1; }
  .pk-abschluss { order: 2; }
}
@media (max-width: 760px) {
  /* Handy: Abschluss-Knopf unten fest im Blick */
  .pk-packen { padding-bottom: 120px; }
  .pk-abschluss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; border-radius: 0 !important; border-width: 1px 0 0 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -6px 18px rgba(0, 0, 0, .1); }
  .pk-abschluss .field-hint { display: none; }
  .pk-main .thd-panel { padding: 14px; }
  .pk-zeile { grid-template-columns: 46px minmax(0, 1fr) auto 18px; row-gap: 4px; }
  .pk-z-art, .pk-z-teile { display: none; }
}
@media (max-width: 560px) {
  .pk-k { min-height: 0; padding: 14px !important; }
  .pk-k-zahl { font-size: 21px; }
  .pk-teil { grid-template-columns: 50px minmax(0, 1fr) auto 46px; gap: 8px; padding: 8px; }
  .pk-bild { width: 50px; height: 50px; }
  .pk-menge b { font-size: 19px; }
  .pk-haken { width: 46px; height: 46px; } .pk-haken i { font-size: 38px; }
  .pk-knoepfe .btn-label-desktop { display: none; }
}