/* =====================================================================
   ImportPanel, portal klienta E: widok wysyłki #/shipments/{id}
   według makiety E2 (#/wysylka/38). 29.09.2026.
   Niska scena, karta podróży na całą szerokość (tytuł, ETA, trasa,
   4 pola, oś 6 etapów, mapa z panelem „Teraz”), pod spodem dziennik
   i kolumna z płatnościami, szczegółami, kontrolą jakości, dokumentami.
   Ładowany po css/portal-e.css i portal-e-pulpit.css (tokeny --e-*, .e-otr).
   ===================================================================== */

.e-cover.short { height: 300px; }

.e-oh { margin-top: 26px; background: var(--e-surface); border-radius: 28px; box-shadow: var(--e-shadow-l); padding: 28px 30px 30px; display: flex; flex-direction: column; min-width: 0; }
.e-oh-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.e-oh-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.e-oh-title h2 { font: 700 32px/1.05 var(--e-disp); letter-spacing: -.03em; margin: 0; }
.e-oh-title .ref { font: 700 17px/1 var(--e-disp); color: var(--e-ink-3); }
.e-spill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--e-sea); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.e-spill .live { width: 7px; height: 7px; border-radius: 50%; background: #F5B77A; box-shadow: 0 0 0 3px rgba(245,183,122,.3); }
.e-oh-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 14px; color: var(--e-ink-2); }
.e-oh-meta b { color: var(--e-ink); font-weight: 800; }
.e-oh-upd { margin-top: 6px; font-size: 13px; color: var(--e-ink-3); }
.e-oh-eta { text-align: right; }
.e-oh-eta .lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.e-oh-eta .big { display: block; font: 700 64px/.95 var(--e-disp); letter-spacing: -.045em; margin: 6px 0 10px; }
.e-oh-eta .in { display: inline-block; background: var(--e-sun-tint); color: var(--e-sun); font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.e-oh-eta .in.ok { background: var(--e-ok-tint); color: var(--e-ok); }
.e-oh-eta .in.plan { background: var(--e-bg); color: var(--e-ink-3); }
.e-oh-route { margin-top: 26px; }
.e-oh-route .e-route .pt .code { font-size: 30px; }
.e-oh-route .e-route .remain { margin-top: 18px; }
.e-oh-route .e-route .remain b { color: var(--e-sea); font-size: 17px; }
.e-oh-perf { position: relative; height: 1px; margin: 22px -30px; border-top: 1.5px dashed var(--e-line-2); }
.e-oh-perf::before, .e-oh-perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--e-bg); }
.e-oh-perf::before { left: -11px; } .e-oh-perf::after { right: -11px; }

.e-ofacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.e-ofacts > div { background: var(--e-bg); border-radius: 14px; padding: 13px 16px; min-width: 0; }
.e-ofacts dt { font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.e-ofacts dd { margin: 4px 0 0; font: 700 18px/1.2 var(--e-disp); letter-spacing: -.015em; display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.e-ofacts dd small { font: 600 13px var(--e-body); color: var(--e-ink-3); letter-spacing: 0; }

/* oś 6 etapów w dużej wersji (bilet pulpitu ma .e-otr w portal-e-pulpit.css) */
.e-otr.lg { margin-top: 28px; }
.e-otr.lg li { padding: 32px 16px 0 0; }
.e-otr.lg li::after { top: 9px; left: 28px; right: 6px; height: 3px; }
.e-otr.lg .dot { width: 21px; height: 21px; }
.e-otr.lg .dot svg { width: 12px; height: 12px; }
.e-otr.lg .cur .dot { box-shadow: inset 0 0 0 6px var(--e-sun), 0 0 0 6px var(--e-sun-tint); }
.e-otr.lg .nm { font-size: 14.5px; }
.e-otr.lg .dt { font-size: 13px; font-weight: 700; color: var(--e-ink-2); }
.e-otr .nt { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--e-ink-3); }

/* mapa z panelem „Teraz” */
.e-omap { display: grid; grid-template-columns: minmax(0, 1fr) 310px; margin-top: 28px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--e-line); background: var(--e-surface); }
.e-mapbox { min-width: 0; background: #ECE6DD; }
.e-mapbox .e-map-wrap { margin: 0; }
.e-mapbox .e-map { border-radius: 0; }
.e-mapbox .e-map-foot { padding: 12px 16px 0; }
.e-mapbox .e-map-note { padding: 0 16px 12px; margin-bottom: 0; }
.e-onow { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.e-onow .big { font: 600 19px/1.3 var(--e-disp); letter-spacing: -.015em; }
.e-onow .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.e-onow .kv div { background: var(--e-bg); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.e-onow .kv dt { font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.e-onow .kv dd { margin: 2px 0 0; font: 700 17px/1.2 var(--e-disp); letter-spacing: -.02em; }
.e-onow .wps { display: flex; gap: 8px; flex-wrap: wrap; }
.e-onow .wp { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--e-bg); color: var(--e-ink-2); }
.e-onow .wp.ok { background: var(--e-sea-tint); color: var(--e-sea-ink); }
.e-onow .log { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--e-line); }
.e-onow .log li { font-size: 13.5px; padding: 5px 0; color: var(--e-ink-2); }
.e-onow .log b { color: var(--e-ink); font-weight: 700; margin-right: 8px; }
.e-onow .note { margin: 0; font-size: 12.5px; color: var(--e-ink-3); }

/* raty zamówienia w kolumnie */
.e-raty { list-style: none; margin: 14px 0 0; padding: 0; }
.e-raty li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--e-line); font-size: 14px; align-items: center; }
.e-raty .t { font-weight: 700; min-width: 0; }
.e-raty .t small { display: block; font-size: 12.5px; font-weight: 600; color: var(--e-ink-3); }
.e-raty .v { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.e-raty .v b { font-weight: 800; white-space: nowrap; }

/* kontrola jakości */
.e-qc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.e-qc button { padding: 0; border: 0; border-radius: 12px; aspect-ratio: 1; overflow: hidden; background: var(--e-surface-2); cursor: zoom-in; }
.e-qc .th { display: block; width: 100%; height: 100%; }
.e-qc .th canvas, .e-qc .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e-qc .more { display: grid; place-items: center; background: var(--e-bg); font-weight: 800; font-size: 14px; color: var(--e-ink-2); cursor: pointer; }

.e-acts2 { display: flex; gap: 8px; flex-wrap: wrap; }
.e-before { box-shadow: var(--e-shadow), inset 0 3px 0 var(--e-sun); }
.e-before.late { box-shadow: var(--e-shadow), inset 0 3px 0 var(--e-late); }

@media (max-width: 1080px) {
    .e-omap { grid-template-columns: minmax(0, 1fr); }
    .e-otr .nt { font-size: 12.5px; }
}
@media (max-width: 760px) {
    .e-cover.short { height: auto; aspect-ratio: 16/9; }
    .e-cover.short .cap .e-eyebrow, .e-cover.short .cap p { display: none; }
    .e-oh { margin: 16px -2px 0; border-radius: 24px; padding: 20px 18px 18px; }
    .e-oh-head { grid-template-columns: minmax(0, 1fr); gap: 14px; order: 1; }
    .e-oh-title h2 { font-size: 25px; }
    .e-oh-meta { gap: 4px 14px; font-size: 13.5px; margin-top: 8px; }
    .e-oh-eta { text-align: left; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; background: var(--e-bg); border-radius: 16px; padding: 12px 16px; }
    .e-oh-eta .lbl { grid-column: 1 / -1; }
    .e-oh-eta .big { font-size: 42px; margin: 2px 0 0; }
    .e-oh-eta .in { justify-self: start; }
    .e-oh .e-otr { order: 2; }
    .e-oh-route { order: 3; margin-top: 20px; }
    .e-oh-route .e-route { gap: 12px; }
    .e-oh-route .e-route .pt .code { font-size: 24px; }
    .e-oh-route .e-route .remain b { font-size: 15px; }
    .e-oh-route .e-route .remain span { display: none; }
    .e-oh-perf { order: 4; margin: 18px -18px 16px; }
    .e-ofacts { order: 5; grid-template-columns: 1fr 1fr; gap: 8px; }
    .e-ofacts > div { padding: 11px 12px; }
    .e-ofacts dd { font-size: 15.5px; white-space: normal; }
    .e-omap { order: 6; margin-top: 18px; }
    .e-otr.lg { margin: 20px -18px 0; padding: 0 18px 8px; }
    .e-otr.lg li { flex: 0 0 152px; }
    .e-onow { padding: 18px 16px; }
    .e-raty li { grid-template-columns: auto minmax(0, 1fr); }
    .e-raty .v { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

/* Okładka wysyłki, czytelność (30.09): jak okładka zamówienia. Komputer: gradient od lewej pod tekstem,
   telefon: obraz jako pas u góry, tytuł pod nim na tle karty, przyciski w ciemnych kółkach. */
.e-cover.short::after { background: linear-gradient(90deg, rgba(8,20,28,.8) 0%, rgba(8,20,28,.55) 45%, rgba(8,20,28,0) 72%), linear-gradient(180deg, rgba(8,20,28,.3) 0%, rgba(8,20,28,0) 30%, rgba(8,20,28,.5) 100%); }
.e-cover.short .cap { right: 42%; }
.e-cover.short .cap h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.e-cover.short .back { background: rgba(10,20,28,.62); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.e-cover.short .back:hover { background: rgba(10,20,28,.78); }
@media (max-width: 760px) {
    .e-cover.short { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--e-surface); color: var(--e-ink); }
    .e-cover.short img { position: relative; inset: auto; height: auto; aspect-ratio: 2 / 1; flex: none; }
    .e-cover.short::after { inset: 0 0 auto 0; aspect-ratio: 2 / 1; height: auto; background: linear-gradient(180deg, rgba(8,20,28,.4) 0%, rgba(8,20,28,0) 45%); }
    .e-cover.short .cap { position: static; padding: 14px 20px 6px; }
    .e-cover.short .cap h1 { color: var(--e-ink); font-size: 24px; }
}
/* P38 (30.09): kolumna dat dziennika w jednym stylu: data albo słowo, 13 px, szary, do prawej */
.e-diary .e-stop .d { font-size: 13px; font-weight: 700; color: var(--e-ink-3); text-align: right; }
.e-diary .e-stop.cur .d { color: var(--e-ink); }
.e-diary .e-stop .d .w { font-weight: 700; }