/* =====================================================================
   ImportPanel, portal klienta E: Płatności (układ E2) i podgląd
   dokumentów (js/portal/e-podglad.js). 29.09.2026.
   Ładowany po css/portal-e.css, korzysta z jego tokenów --e-*.
   Klasy z prefiksem ep- (płatności) i epv- (podgląd), bez kolizji.
   ===================================================================== */

.ep, .ep-sheet, .epv {
    --ep-ok: var(--e-ok); --ep-ok-tint: var(--e-ok-tint);
    --ep-late: var(--e-late); --ep-late-tint: var(--e-late-tint);
}
.ep-sr, .ep-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- plakietki statusu (z E2) ---------- */
.ep-pb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--e-bg); color: var(--e-ink-2); }
.ep-pb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ep-pb .e-ic { width: 14px; height: 14px; stroke-width: 2.6; }
.ep-pb.ok { background: var(--ep-ok-tint); color: var(--ep-ok); }
.ep-pb.ok::before { display: none; }
.ep-pb.due { background: var(--e-sun-tint); color: var(--e-sun); }
.ep-pb.pl { background: transparent; box-shadow: inset 0 0 0 1.5px var(--e-line-2); color: var(--e-ink-2); }
.ep-pb.pl::before { background: var(--e-line-2); }
.ep-pb.late { background: var(--ep-late-tint); color: var(--ep-late); }

/* ---------- pasek zapłacono / do zapłaty ---------- */
.ep-bar { display: flex; height: 10px; border-radius: 10px; background: var(--e-surface-2); overflow: hidden; gap: 2px; }
.ep-bar.sm { height: 8px; }
.ep-bar i { display: block; height: 100%; }
.ep-bar .p { background: var(--ep-ok); }
.ep-bar .d { background: repeating-linear-gradient(135deg, var(--e-sun) 0 5px, #B8703A 5px 10px); }
.ep-line { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--e-ink-3); margin-top: 8px; }
.ep-line b { color: var(--e-ink); font-weight: 800; }
.ep-line .ok-t { color: var(--ep-ok); font-weight: 800; }

/* ---------- hero „Do zapłaty” ---------- */
.ep-hero .lbl.ep-late-l { display: inline-flex; align-self: flex-start; background: rgba(163,38,27,.92); color: #fff; padding: 4px 12px; border-radius: 999px; }
.ep-hero .acts .e-btn .e-ic { width: 18px; height: 18px; }
.e-duecard > .ep-hthumb { position: absolute; z-index: 2; right: 30px; top: 50%; width: 118px; padding: 0; border: 0; background: #fff; border-radius: 6px; cursor: zoom-in;
    aspect-ratio: 1 / 1.414; transform: translateY(-50%) rotate(3deg); box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.35); visibility: hidden; opacity: 0; transition: opacity .35s, transform .2s; overflow: hidden; }
.ep-hthumb.epv-thumb-on { visibility: visible; opacity: 1; }
.ep-hthumb canvas { display: block; }
.ep-hthumb:hover, .ep-hthumb:focus-visible { transform: translateY(-50%) rotate(0deg) scale(1.03); }
.ep-hthumb-c { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0; font: 700 12px var(--e-body); color: #fff; background: linear-gradient(180deg, transparent, rgba(8,24,34,.85)); }
.ep-hthumb-c .e-ic { width: 15px; height: 15px; }
@media (min-width: 1081px) { .ep-has-th > p, .ep-has-th > .lbl { max-width: min(480px, calc(100% - 170px)); } }
@media (max-width: 1080px) { .ep-hthumb { display: none; } }

/* ---------- „Zapłacono i zostało” ---------- */
.ep-balance { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.ep-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ep-tile { border-radius: 16px; padding: 14px 16px; background: var(--e-bg); min-width: 0; }
.ep-tile .l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--e-ink-3); }
.ep-tile .l i { width: 8px; height: 8px; border-radius: 50%; background: var(--e-line-2); flex: none; }
.ep-tile .v { display: block; font: 700 22px/1.15 var(--e-disp); letter-spacing: -.02em; margin-top: 5px; overflow-wrap: anywhere; }
.ep-tile small { display: block; font-size: 12.5px; color: var(--e-ink-3); margin-top: 3px; }
.ep-tile.ok .l i { background: var(--ep-ok); }
.ep-tile.ok .v { color: var(--ep-ok); }
.ep-tile.due { background: var(--e-sun-tint); }
.ep-tile.due .l i { background: var(--e-sun); }
.ep-tile.due .v { color: var(--e-sun); }
.ep-tile.late { background: var(--ep-late-tint); }
.ep-tile.late .l i { background: var(--ep-late); }
.ep-tile.late .v { color: var(--ep-late); }

/* ---------- harmonogram ---------- */
.ep-sched-card { overflow: hidden; }
.ep-sched-h { padding: 22px 22px 14px; }
.ep-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ep-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--e-bg); }
.ep-seg button { border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 999px; font: 700 12.5px var(--e-body); color: var(--e-ink-3); cursor: pointer; white-space: nowrap; }
.ep-seg button:hover { color: var(--e-ink); }
.ep-seg button[aria-pressed="true"] { background: var(--e-surface); color: var(--e-ink); box-shadow: 0 1px 3px rgba(21,25,28,.12); }
.ep-seg button i { font-style: normal; margin-left: 5px; opacity: .6; }
.ep-seg button.red i { color: var(--ep-late); opacity: 1; }
.ep-sel select { height: 36px; max-width: 230px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--e-line); background: var(--e-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F656B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
    padding: 0 30px 0 12px; font: 600 13px var(--e-body); color: var(--e-ink-2); cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.ep-sel select:hover { box-shadow: inset 0 0 0 1.5px var(--e-line-2); }
.ep-ico { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: none; color: var(--e-ink-3); font: 700 12.5px var(--e-body); cursor: pointer; }
.ep-ico:hover { background: var(--e-bg); color: var(--e-ink); }
.ep-ico .e-ic { width: 18px; height: 18px; }

.ep-grp { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 22px 8px; background: #FBFAF8; border-top: 1px solid var(--e-line); }
.ep-grp h3 { margin: 0; font: 800 12.5px var(--e-body); color: var(--e-ink-3); letter-spacing: 0; }
.ep-grp span { font-size: 12.5px; font-weight: 800; color: var(--e-ink-3); white-space: nowrap; }
.ep-sched { list-style: none; margin: 0; padding: 0; }
.ep-row { display: grid; grid-template-columns: 20px 58px 40px minmax(0,1fr) auto 118px; grid-template-areas: "pick dd ico t a s"; gap: 14px; align-items: center; padding: 15px 22px 15px 16px; border-top: 1px solid var(--e-line); transition: background .15s; }
.ep-row .ep-pick { grid-area: pick; } .ep-row .dd { grid-area: dd; } .ep-row .ep-kico { grid-area: ico; }
.ep-row .t { grid-area: t; } .ep-row .a { grid-area: a; } .ep-row .s { grid-area: s; }
.ep-row .dd .n { display: block; }
/* ikona rodzaju raty w kafelku 40 px, kolor wg statusu */
.ep-kico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--e-bg); color: var(--e-ink-3); box-shadow: inset 0 0 0 1px var(--e-line); }
.ep-kico .e-ic { width: 20px; height: 20px; }
.ep-kico.paid { background: var(--ep-ok-tint); color: var(--ep-ok); box-shadow: none; }
.ep-kico.due { background: var(--e-sun-tint); color: var(--e-sun); box-shadow: none; }
.ep-kico.overdue { background: var(--ep-late-tint); color: var(--ep-late); box-shadow: none; }
.ep-row.on { background: #F1F6F8; }
.ep-row .dd { font: 700 19px/1 var(--e-disp); letter-spacing: -.02em; }
.ep-row .dd small { display: block; font: 600 12.5px/1.35 var(--e-body); color: var(--e-ink-3); letter-spacing: 0; margin-top: 4px; }
.ep-row .dd small.ep-red { color: var(--ep-late); font-weight: 800; }
.ep-row .t { font-weight: 700; font-size: 14.5px; min-width: 0; }
.ep-row .t > a { color: inherit; text-decoration: none; }
.ep-row .t > a:hover { text-decoration: underline; }
.ep-row .t small { display: block; font-weight: 500; font-size: 13px; color: var(--e-ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.ep-row .a { text-align: right; font-weight: 800; white-space: nowrap; }
.ep-row .a small { display: block; font-weight: 600; font-size: 12.5px; color: var(--e-ink-3); }
.ep-row .s { justify-self: end; }
.ep-row.paid .dd, .ep-row.paid .a { color: var(--e-ink-2); }

/* wybór raty do wspólnego przelewu: cichy, dopóki nie potrzebny */
.ep-pick { display: grid; place-items: center; }
.ep-chk { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--e-line-2); background: var(--e-surface); cursor: pointer; opacity: .5; transition: opacity .15s, background .15s; }
.ep-row:hover .ep-chk, .ep-chk:focus-visible, .ep-chk:checked { opacity: 1; }
.ep-chk:checked { background: var(--e-sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
@media (hover: none) { .ep-chk { opacity: .8; } }

/* numer dokumentu = link do podglądu; bez dokumentu zwykły tekst */
.ep-doc { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--e-sea-2); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(24,81,112,.35); text-underline-offset: 3px; }
.ep-doc:hover { text-decoration-color: currentColor; }
.ep-doc.plain { color: var(--e-ink-3); font-weight: 500; text-decoration: none; cursor: default; }
.ep-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 22px 40px; border-top: 1px solid var(--e-line); color: var(--e-ink-2); text-align: center; }

/* ---------- rozliczenie zamówień ---------- */
.ep-orders .e-tripbars { gap: 24px; }
.ep-tb .top2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 9px; }
.ep-tb .top2 a { color: inherit; text-decoration: none; min-width: 0; }
.ep-tb .top2 a:hover { text-decoration: underline; }
.ep-tb .top2 b { font-weight: 800; }
.ep-tb .top2 .ep-pb { height: 24px; font-size: 12px; flex: none; }
.ep-tb p { margin: 6px 0 0; font-size: 13px; color: var(--e-ink-3); }
.ep-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ep-docs > span { font-weight: 700; }
.ep-chipdoc { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--e-bg); color: var(--e-ink-2); font: 700 12.5px var(--e-body); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-chipdoc .e-ic { width: 15px; height: 15px; margin: 0 5px 0 -2px; }
.ep-chipdoc:hover { background: var(--e-sea-tint); color: var(--e-sea-ink); }
.ep-chipdoc.plain { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--e-line); }

/* ---------- pasek zaznaczonych rat ---------- */
.ep-selbar { position: fixed; z-index: 45; left: 50%; bottom: calc(22px + var(--e-tabbar)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--e-ink); color: #fff; box-shadow: var(--e-shadow-l); font-size: 14px; animation: epUp .25s cubic-bezier(.2,.7,.2,1); }
.ep-selbar[hidden] { display: none; }
.ep-selbar .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ep-selbar b { font-weight: 800; }
.ep-selx { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ep-selx .e-ic { width: 16px; height: 16px; }
@keyframes epUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- okno „Dane do przelewu” ---------- */
.ep-sheet .ep-sh-sub { margin: 4px 0 0; color: var(--e-ink-2); }
.ep-bank { margin: 14px 0 0; }
.ep-bank > div { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--e-line); font-size: 14px; }
.ep-bank dt { color: var(--e-ink-3); }
.ep-bank dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ep-bank dd small { display: block; font-weight: 500; font-size: 12.5px; color: var(--e-ink-3); margin-top: 2px; }
.ep-bank .ep-iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ep-muted { color: var(--e-ink-3); font-weight: 600; }
.ep-copy { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--e-bg); color: var(--e-ink-2); font: 700 12.5px var(--e-body); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.ep-copy:hover { background: var(--e-surface-2); color: var(--e-ink); }
.ep-copy .e-ic { width: 15px; height: 15px; }
.ep-copy.done, .ep-copyall.done { background: var(--ep-ok-tint); color: var(--ep-ok); box-shadow: none; }
.ep-copyall { width: 100%; margin-top: 12px; }
.ep-qr { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 14px; align-items: center; margin: 14px 0 0; padding: 12px; border-radius: 16px; background: var(--e-bg); }
.ep-qr-img { width: 132px; height: 132px; background: #fff; border-radius: 10px; }
.ep-qr-img svg { width: 100%; height: 100%; display: block; }
.ep-qr figcaption { font-size: 13px; color: var(--e-ink-2); }

/* =====================================================================
   PODGLĄD DOKUMENTU (e-podglad.js): okno na środku, telefon pełny ekran
   ===================================================================== */
html.epv-lock { overflow: hidden; }
.epv { margin: auto; padding: 0; border: 0; width: min(1120px, calc(100vw - 48px)); height: calc(100vh - 48px); height: calc(100dvh - 48px); max-width: none; max-height: none;
    border-radius: 22px; background: var(--e-surface); color: var(--e-ink); box-shadow: var(--e-shadow-l); overflow: hidden; font-family: var(--e-body); animation: epvIn .22s cubic-bezier(.2,.7,.2,1); }
.epv::backdrop { background: rgba(12,20,26,.62); backdrop-filter: blur(3px); }
@keyframes epvIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.epv-in { display: grid; grid-template-rows: auto minmax(0,1fr) auto; grid-template-columns: minmax(0,1fr); height: 100%; }
.epv-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--e-line); }
.epv-ico { flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--e-bg); }
.epv-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epv-ttl { flex: 1; min-width: 0; }
.epv-ttl h2 { margin: 0; font: 600 17px/1.25 var(--e-disp); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epv-ttl p { margin: 2px 0 0; font-size: 12.5px; color: var(--e-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epv-x { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--e-bg); color: var(--e-ink); display: grid; place-items: center; cursor: pointer; }
.epv-x:hover { background: var(--e-surface-2); }
.epv-x .e-ic { width: 20px; height: 20px; }

.epv-view { overflow: auto; background: #E7E2DA; padding: 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.epv-view:focus-visible { outline: 3px solid var(--e-sea-2); outline-offset: -3px; }
/* szerokość max-content: po powiększeniu da się przewinąć też w lewo */
.epv-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content; min-width: 100%; min-height: 100%; }
.epv-page { flex: none; position: relative; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 10px 28px rgba(0,0,0,.10); }
.epv-page canvas { display: block; }
.epv-frame { width: min(1060px, calc(100vw - 96px)); height: calc(100dvh - 220px); border: 0; background: #fff; }
.epv-msg { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; padding: 60px 20px; text-align: center; color: var(--e-ink-2); }
.epv-msg b { font-size: 16px; color: var(--e-ink); }
.epv-msg .epv-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.epv-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(15,59,83,.18); border-top-color: var(--e-sea); animation: epvSpin .8s linear infinite; }
@keyframes epvSpin { to { transform: rotate(360deg); } }

.epv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--e-line); background: var(--e-surface); }
.epv-grp { display: flex; align-items: center; gap: 2px; }
.epv-grp[hidden] { display: none; }
.epv-docs:not([hidden]) + .epv-pg { flex: 1; justify-content: center; }
.epv-b { min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--e-ink); display: inline-grid; place-items: center; cursor: pointer; font: 700 13px var(--e-body); }
.epv-b:hover:not(:disabled) { background: var(--e-bg); }
.epv-b:disabled { opacity: .32; cursor: default; }
.epv-b .e-ic { width: 20px; height: 20px; }
.epv-pct { min-width: 66px; }
.epv-pct[aria-pressed="true"] { background: var(--e-sea-tint); color: var(--e-sea-ink); }
.epv-n, .epv-pg { font-size: 13px; font-weight: 700; color: var(--e-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 6px; }

@media (max-width: 760px) {
    .ep-row { grid-template-columns: 20px 36px minmax(0,1fr) auto; grid-template-areas: "pick ico t t" "pick ico dd a"; gap: 6px 10px; align-items: start; padding: 14px 16px 14px 12px; }
    .ep-row .ep-pick, .ep-row .ep-kico { align-self: center; }
    .ep-row .a { align-self: end; }
    .ep-sched-h .e-cnt { display: none; }
    .ep-seg button { padding: 0 9px; }
    .ep-row .dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13.5px; }
    .ep-row .dd small { margin: 0; }
    /* status na telefonie mówią nagłówek grupy, kolor kafelka i czerwony termin */
    .ep-row .s { display: none; }
    .ep-kico { width: 36px; height: 36px; border-radius: 11px; }
    .ep-kico .e-ic { width: 18px; height: 18px; }
    .ep-grp { padding: 9px 16px 7px; }
    .ep-sched-h { padding: 18px 16px 12px; }
    .ep-ico span { display: none; }
    .ep-sel select { max-width: 170px; }
    .ep-balance { padding: 18px 16px; }
    .ep-tiles { gap: 8px; }
    .ep-tile { padding: 12px; }
    .ep-tile .v { font-size: 18px; }
    .ep-bank > div { grid-template-columns: minmax(0,1fr) auto; }
    .ep-bank dt { grid-column: 1 / -1; font-size: 12.5px; }
    .ep-qr { grid-template-columns: 110px minmax(0,1fr); }
    .ep-qr-img { width: 110px; height: 110px; }
    .ep-selbar { left: 16px; right: 16px; transform: none; padding-left: 16px; animation: none; }
    .ep-selbar .e-btn { flex: none; }

    .epv { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; margin: 0; }
    .epv-top { padding: 10px 10px 10px 12px; gap: 10px; }
    .epv-ico { width: 36px; height: 36px; }
    .epv-ttl h2 { font-size: 15.5px; }
    .epv-dl span { display: none; }
    .epv-dl { padding: 0 11px; }
    .epv-view { padding: 10px 8px; }
    .epv-pages { gap: 10px; }
    .epv-bar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
    .epv-docs:not([hidden]) + .epv-pg { flex: none; }
    .epv-pg { order: 3; width: 100%; text-align: center; padding: 0; font-size: 12px; }
    .epv-pg:empty { display: none; }
    .epv-frame { width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
    .epv, .ep-selbar { animation: none; }
    .ep-hthumb, .ep-row, .ep-chk, .ep-copy { transition: none; }
    .ep-hthumb:hover, .ep-hthumb:focus-visible { transform: translateY(-50%) rotate(3deg); }
    .epv-spin { animation-duration: 2.4s; }
}

/* =====================================================================
   PODGLĄD: arkusze i komunikaty (e-podglad.js), z modułu dokumentów.
   Jedno źródło stylów podglądu: sekcja .epv wyżej i ta poniżej.
   ===================================================================== */
.epv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.epv-ico .ed-ti { width: 100%; height: 100%; border-radius: 10px; }
.epv-bigico { width: 64px; height: 64px; border-radius: 20px; background: var(--e-surface); color: var(--e-ink-3); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 4px; }
.epv-bigico .e-ic { width: 30px; height: 30px; }
.epv-msg > span:not(.epv-acts):not(.epv-bigico):not(.epv-spin) { font-size: 14px; }
.epv-prog { font-variant-numeric: tabular-nums; }
.epv-grp.epv-tabs { flex: 1 1 100%; order: 5; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; }
.epv-tab { flex: none; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--e-bg); color: var(--e-ink-2); font: 700 12.5px var(--e-body); cursor: pointer; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.epv-tab:hover { color: var(--e-ink); background: var(--e-surface-2); }
.epv-tab[aria-selected="true"] { background: var(--e-ink); color: #fff; }
.epv-tab:focus-visible { outline: 3px solid var(--e-sea-2); outline-offset: 2px; }
.epv-view.epv-sheetview { background: #EDEAE4; padding: 16px; }
.epv-sheetview .epv-pages { align-items: flex-start; }
.epv-sheet { --epv-fs: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06); border-radius: 6px; font: 500 var(--epv-fs)/1.4 var(--e-body); color: var(--e-ink); }
.epv-tbl { border-collapse: separate; border-spacing: 0; table-layout: auto; }
.epv-tbl col.epv-c0 { width: 46px; }
.epv-tbl col.epv-hid { visibility: collapse; }
.epv-tbl th, .epv-tbl td { border-right: 1px solid #E6E1D9; border-bottom: 1px solid #E6E1D9; padding: .32em .65em; vertical-align: top; text-align: left; }
.epv-tbl td { min-width: 3.5em; max-width: 30em; white-space: pre-wrap; overflow-wrap: anywhere; }
.epv-tbl td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.epv-tbl thead th { position: sticky; top: 0; z-index: 2; background: #F4F1EC; color: var(--e-ink-3); font-weight: 700; text-align: center; font-size: .9em; }
.epv-tbl tbody th { position: sticky; left: 0; z-index: 1; background: #F7F5F1; color: var(--e-ink-3); font-weight: 700; text-align: right; font-size: .9em; }
.epv-tbl .epv-corner { left: 0; z-index: 3; }
.epv-tbl tbody tr:hover td { background: #F6F9FB; }
.epv-tbl td.im { min-width: 96px; }
.epv-cimg { display: block; width: 88px; height: 88px; border-radius: 6px; background: #F2EFEA; overflow: hidden; margin: 2px 0; }
.epv-cimg.on { background: #fff; }
.epv-cimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.epv-link { color: var(--e-sea-2); text-decoration: underline; text-decoration-color: rgba(24,81,112,.35); text-underline-offset: 2px; white-space: nowrap; }
.epv-link:hover { text-decoration-color: currentColor; }
.epv-bar .epv-b[hidden] { display: none; }
.epv-cut { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--e-ink-3); border-top: 1px solid #E6E1D9; background: #FBFAF8; border-radius: 0 0 6px 6px; }
@media (max-width: 760px) {
    .epv-view.epv-sheetview { padding: 8px; }
    .epv-grp.epv-tabs { order: 4; }
}

/* D20: kwota brutto z faktury z dopiskiem VAT (API v5.181.0) */
.ep-vat-h { margin: -2px 0 10px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.86); position: relative; z-index: 1; }
.ep-row .a small.ep-vat, .ep-vat { display: block; font-size: 12px; font-weight: 700; color: var(--e-ink-3); }
.e-vat { display: block; font-size: 12px; font-weight: 700; color: var(--e-ink-3); margin-top: 2px; }
/* P44 (30.09): miniatura faktury w całości w prawym dolnym rogu hero, obrót 3°, logo sceny (środek wysokości) zostaje odsłonięte */
.e-duecard > .ep-hthumb { top: auto; bottom: 32px; right: 32px; width: 92px; transform: rotate(3deg); }
.ep-hthumb:hover, .ep-hthumb:focus-visible { transform: rotate(0deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ep-hthumb:hover, .ep-hthumb:focus-visible { transform: rotate(3deg); } }
/* P45 (30.09): kolumna daty 104 px, „po terminie” w jednej linii (liczba dni może zejść niżej) */
@media (min-width: 761px) {
    .ep-row { grid-template-columns: 20px 104px 40px minmax(0,1fr) auto 118px; }
    .ep-row .dd small { white-space: normal; }
}
.ep-pickhint { margin: 0; padding: 0 22px 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--e-ink-3); }
/* P46, P47: telefon: filtry w przewijanym rzędzie, wybór zamówienia na całą szerokość, CSV z podpisem */
@media (max-width: 760px) {
    .ep-tools { flex-wrap: wrap; }
    .ep-sel { flex: 1 1 100%; }
    .ep-sel select { width: 100%; max-width: none; }
    .ep-ico span { display: inline; }
    .ep-ico { margin-left: 0; }
}
