/* ============================================================
   Garbit SHIP - Multi-Sendungen · seitenspezifische Komponenten
   Schwerpunkt: Pakete & Positionen - Collo-Builder, Beleg-Merge,
   Teillieferungs-Tabelle. Theme-aware.
   ============================================================ */

:root {
  --c-1: #33cc3f;
  --c-3: oklch(0.66 0.14 255);
  --c-5: oklch(0.78 0.15 85);
  --paper: #ffffff; --paper-ink: #18181a; --paper-line: #d8d8d8;
}
[data-theme="dark"] { --paper: #f3f3f0; --paper-ink: #18181a; --paper-line: #cccccc; }

/* ===========================================================
   FENSTER-RAHMEN (Hero & Builder)
   =========================================================== */
.win { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.win--hero { box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); }
.win--flat { box-shadow: var(--card-shadow); }
.win__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.win__dot { width: 11px; height: 11px; border-radius: 50%; }
.win__dot.r { background: #ff5f57; } .win__dot.y { background: #febc2e; } .win__dot.g { background: #28c840; }
.win__title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.win__title b { color: var(--text-head); font-weight: 700; }
.win__static { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.win__body { padding: 22px; }

/* Auftragskopf */
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.order-head__id { font-size: 13px; font-weight: 800; color: var(--text-head); }
.order-head__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.order-head__badge { font-size: 11px; font-weight: 700; color: var(--green-dark); background: var(--green-tint); border-radius: 99px; padding: 5px 12px; }
[data-theme="dark"] .order-head__badge { color: var(--green); background: rgba(51,204,63,0.13); }

/* Collo-Reihe (Pakete) */
.colli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 560px){ .colli { grid-template-columns: repeat(2, 1fr); } }
.collo {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 9px; position: relative;
  animation: colloIn 0.4s var(--ease-out) both;
}
@keyframes colloIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .collo { animation: none; } }
.collo__logo { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 4px 8px; background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.collo__logo img { height: 14px; width: auto; max-width: 78px; object-fit: contain; display: block; }
.collo__nr { font-size: 13px; font-weight: 800; color: var(--text-head); }
.collo__nr span { color: var(--text-muted); font-weight: 600; }
.collo__wt { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.collo__bc { height: 22px; margin-top: 2px; background-image: repeating-linear-gradient(90deg, var(--paper-ink) 0 1.5px, transparent 1.5px 3px, var(--paper-ink) 3px 4.5px, transparent 4.5px 7px); opacity: 0.85; border-radius: 1px; }
.collo__track { font-size: 9.5px; font-weight: 600; color: var(--text-faint); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.builder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.builder-foot__label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.builder-foot__val { font-size: 1.05rem; font-weight: 800; color: var(--text-head); font-variant-numeric: tabular-nums; }

/* Stepper / Segmented (Paketanzahl) */
.countctl { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.countctl__btn { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--card-bg); color: var(--text-head); font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast); }
.countctl__btn:hover:not(:disabled) { background: var(--green); color: #fff; }
.countctl__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.countctl__val { min-width: 78px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-head); }
.countctl__val b { font-size: 18px; }

/* Multi-Sendung: Sendungs-Zeilen (Block 01) */
.ship-rows { display: flex; flex-direction: column; gap: 16px; }
.ship-row { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.ship-row__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sel { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-head); background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 34px 9px 13px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.sel:hover { border-color: var(--text-muted); }
.countctl--sm { padding: 3px; }
.countctl--sm .countctl__btn { width: 30px; height: 30px; font-size: 16px; }
.countctl--sm .countctl__val { min-width: 64px; font-size: 12px; }
.chk { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; user-select: none; }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk__box { width: 38px; height: 22px; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border); position: relative; transition: background var(--dur-fast), border-color var(--dur-fast); flex-shrink: 0; }
.chk__box::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform var(--dur-fast); }
.chk input:checked + .chk__box { background: var(--green); border-color: var(--green); }
.chk input:checked + .chk__box::after { transform: translateX(16px); }
.chk input:focus-visible + .chk__box { outline: 2px solid var(--green); outline-offset: 2px; }
.chk.is-on { color: var(--green-dark); }
[data-theme="dark"] .chk.is-on { color: var(--green); }
.ship-row__type { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.collo__sendung { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 540px){ .chk { margin-left: 0; } .ship-row__head { gap: 10px; } }

/* Multi-Sendung Header + Add-Leiste + Lösch-Button */
.ms-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.ms-header__id { font-size: 14px; font-weight: 800; color: var(--text-head); }
.ms-header__id span { color: var(--text-muted); font-weight: 600; }
.ms-header__count { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ms-header__count b { color: var(--text-head); font-variant-numeric: tabular-nums; }
.add-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; }
.add-bar__label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.add-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; background: var(--green); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: background var(--dur-base), transform var(--dur-fast); }
.add-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.add-bar__hint { font-size: 11.5px; color: var(--text-faint); margin-left: auto; }
.add-reset { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.add-reset:hover { color: var(--text-head); border-color: var(--text-muted); background: var(--card-bg); }

.collo { position: relative; overflow: hidden; transition: border-color var(--dur-base); }
.collo:hover { border-color: var(--cc, var(--green)); }
.collo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc, var(--green)); }
.collo__logo { margin-left: 3px; }
.collo__del { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast); }
.collo__del:hover { background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; }
.collo__del svg { width: 14px; height: 14px; }
.collo__carrier { align-self: flex-start; display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cc, var(--green-dark)); background: color-mix(in srgb, var(--cc, var(--green)) 14%, transparent); padding: 3px 8px; border-radius: 999px; }
.ms-empty { text-align: center; padding: 40px 20px; color: var(--text-faint); font-size: 14px; }

/* ===========================================================
   BELEG-MERGE (Sektion 02)
   =========================================================== */
.merge { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px){ .merge { grid-template-columns: 1fr; gap: 18px; } .merge__arrow { transform: rotate(90deg); justify-self: center; } }
.docs { display: flex; flex-direction: column; gap: 12px; }
.doc { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--card-shadow); }
.doc__ico { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-alt); color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.doc__id { font-size: 13px; font-weight: 800; color: var(--text-head); }
.doc__meta { font-size: 11.5px; color: var(--text-muted); }
.merge__arrow { display: grid; place-items: center; color: var(--green); }
.merge-result { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 14px; padding: 22px; box-shadow: var(--card-shadow); }
.merge-result__title { font-size: 13px; font-weight: 800; color: var(--text-head); margin-bottom: 4px; }
.merge-result__sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 16px; }
.merge-result__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--border); }
.merge-result__row span:last-child { font-weight: 700; color: var(--text-head); font-variant-numeric: tabular-nums; }
.merge-result__row.is-total { border-top: 2px solid var(--text-head); font-weight: 800; color: var(--text-head); }

/* ===========================================================
   TEILLIEFERUNGS-TABELLE (Sektion 03 · interaktiv)
   =========================================================== */
.partial { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.partial__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.partial__title { font-size: 14px; font-weight: 800; color: var(--text-head); }
.partial__sub { font-size: 12px; color: var(--text-muted); }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ptable th:first-child { text-align: left; }
.ptable td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.ptable td:first-child { text-align: left; }
.ptable tr:last-child td { border-bottom: none; }
.ptable .art { font-weight: 700; color: var(--text-head); }
.ptable .art small { display: block; font-weight: 600; color: var(--text-faint); font-size: 11px; }
.ptable .open { font-weight: 800; color: var(--green-dark); }
[data-theme="dark"] .ptable .open { color: var(--green); }
.ptable tr.is-done .open { color: var(--text-faint); }

.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.stepper__btn { width: 30px; height: 30px; border: none; background: var(--bg-alt); color: var(--text-head); font-size: 16px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast); }
.stepper__btn:hover:not(:disabled) { background: var(--green); color: #fff; }
.stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper__num { min-width: 38px; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--text-head); font-variant-numeric: tabular-nums; }
.partial__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--bg-alt); border-top: 1px solid var(--border); flex-wrap: wrap; }
.partial__summary { font-size: 13px; color: var(--text-muted); }
.partial__summary b { color: var(--text-head); font-variant-numeric: tabular-nums; }
.partial__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; background: var(--green); color: #fff; font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: background var(--dur-base); }
.partial__btn:hover { background: var(--green-dark); }
.partial__btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 560px){ .ptable th.col-hide, .ptable td.col-hide { display: none; } }

/* ===========================================================
   CARRIER-CHIPS (Sektion 04)
   =========================================================== */
.carrier-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.carrier-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--text-head); background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; box-shadow: var(--card-shadow); transition: border-color var(--dur-base), transform var(--dur-base); }
.carrier-chip:hover { border-color: var(--green); transform: translateY(-2px); }
.carrier-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.carrier-chip small { font-weight: 600; color: var(--text-faint); }

/* ===========================================================
   Hinweis + FAQ + Heads (geteilt)
   =========================================================== */
.mock-note { margin-top: 12px; font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; justify-content: center; }
.mock-note svg { width: 12px; height: 12px; flex-shrink: 0; }
[data-theme="dark"] .faq-q:hover { color: var(--green); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 16px; }
[data-theme="dark"] .eyebrow { color: var(--green); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--green); border-radius: 1px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head-row .section-lead { margin-bottom: 0; }
.section-head-row .section-title { margin-bottom: 14px; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }