/* =====================================================================
   ImportPanel, portal klienta E: Dokumenty (układ E2, 30.09.2026)
   Ładowany po css/portal-e.css i css/portal-e-platnosci.css, korzysta
   z tokenów --e-*. Klasy z prefiksem ed-. Style podglądu (epv-, także
   arkusze) są w css/portal-e-platnosci.css.

   WSPÓLNA SKALA KOLORÓW STATUSÓW PORTALU (ed-t-*):
     ok    zielony    zapłacone, rozliczone, zakończone (#2E6A4C, jak „Zapłacona”)
     due   pomarańcz  do zapłaty, czeka na Ciebie
     late  czerwony   po terminie
     info  granat     informacyjne i dokumentowe
     plan  neutralny  zaplanowane, archiwum
   ===================================================================== */

.ed, .epv, .e-dlg {
    --ed-ok: var(--e-ok); --ed-ok-tint: var(--e-ok-tint); --ed-ok-line: #C9DDCF;
    --ed-due: var(--e-sun); --ed-due-tint: var(--e-sun-tint);
    --ed-late: var(--e-late); --ed-late-tint: var(--e-late-tint);
    --ed-info: var(--e-sea-2); --ed-info-tint: var(--e-sea-tint);
    --ed-plan: var(--e-ink-3); --ed-plan-tint: var(--e-bg);
    --ed-done-bg: #E9F0EA; --ed-arch-bg: #EEEAE4;
}
.ed-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- plakietki (jak w płatnościach) ---------- */
.ed-pb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font: 800 12.5px var(--e-body); white-space: nowrap; background: var(--ed-plan-tint); color: var(--e-ink-2); }
.ed-pb .e-ic { width: 14px; height: 14px; stroke-width: 2.4; }
.ed-pb.ed-t-ok { background: var(--ed-ok-tint); color: var(--ed-ok); }
.ed-pb.ed-t-due { background: var(--ed-due-tint); color: var(--ed-due); }
.ed-pb.ed-t-late { background: var(--ed-late-tint); color: var(--ed-late); }
.ed-pb.ed-t-info { background: var(--ed-info-tint); color: var(--e-sea-ink); }
.ed-pb.ed-t-plan { background: transparent; box-shadow: inset 0 0 0 1.5px var(--e-line-2); color: var(--e-ink-3); }

/* ---------- kafelek typu dokumentu 40 px, kolor wg statusu ---------- */
.ed-ti { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.ed-ti .e-ic { width: 21px; height: 21px; }
.ed-ti.sm { width: 32px; height: 32px; border-radius: 10px; }
.ed-ti.sm .e-ic { width: 17px; height: 17px; }
.ed-t-ok.ed-ti { background: var(--ed-ok-tint); color: var(--ed-ok); }
.ed-t-due.ed-ti { background: var(--ed-due-tint); color: var(--ed-due); }
.ed-t-late.ed-ti { background: var(--ed-late-tint); color: var(--ed-late); }
.ed-t-info.ed-ti { background: var(--ed-info-tint); color: var(--e-sea-2); }
.ed-t-plan.ed-ti { background: var(--ed-plan-tint); color: var(--e-ink-3); box-shadow: inset 0 0 0 1px var(--e-line); }

/* ---------- baner ---------- */
.ed .ed-ban { height: auto; min-height: 184px; padding: 24px 28px; gap: 2px; }
.ed .ed-ban b { font-size: 25px; }
.ed .ed-ban.due::after { background: linear-gradient(90deg, rgba(8,24,34,.9) 0%, rgba(8,24,34,.74) 52%, rgba(8,24,34,.2) 100%); }
.ed-ban .ed-ban-l { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; margin: 0 0 8px; border-radius: 999px; background: #F3D9C2; color: #6E3606; font: 800 12.5px var(--e-body); }
.ed-ban .ed-ban-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ed-ban .ed-ban-acts .e-btn .e-ic { width: 17px; height: 17px; }

/* ---------- szukajka i filtr ---------- */
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 22px; }
.ed-search { position: relative; flex: 1 1 300px; max-width: 420px; }
.ed-search > .e-ic { position: absolute; left: 15px; top: 13px; color: var(--e-ink-3); pointer-events: none; }
.ed-search input { width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid var(--e-line-2); background: var(--e-surface); padding: 0 44px 0 44px; font: 600 14.5px var(--e-body); color: var(--e-ink); -webkit-appearance: none; appearance: none; }
.ed-search input::-webkit-search-cancel-button { display: none; }
.ed-search input::placeholder { color: #8A8F94; font-weight: 500; }
.ed-search input:focus { outline: none; border-color: var(--e-sea-2); box-shadow: 0 0 0 3px rgba(24,81,112,.18); }
.ed-qx { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--e-ink-3); display: grid; place-items: center; cursor: pointer; }
.ed-qx[hidden] { display: none; }
.ed-qx:hover { background: var(--e-bg); color: var(--e-ink); }
.ed-qx .e-ic { width: 16px; height: 16px; }
.ed-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--e-surface); box-shadow: inset 0 0 0 1.5px var(--e-line); }
.ed-seg button { border: 0; background: none; height: 36px; padding: 0 13px; border-radius: 999px; font: 700 13.5px var(--e-body); color: var(--e-ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.ed-seg button:hover { color: var(--e-ink); background: var(--e-bg); }
.ed-seg button i { font-style: normal; margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums; }
.ed-seg button.zero { color: #8A8F94; }
.ed-seg button[aria-pressed="true"] { background: var(--e-ink); color: #fff; }
.ed-seg button[aria-pressed="true"] i { opacity: .7; }

/* ---------- nagłówki części ---------- */
.ed .ed-sec { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; font: 800 13px/1.3 var(--e-body); letter-spacing: 0; color: var(--e-ink-3); }
.ed-sec::after { content: ""; flex: 1; height: 1px; background: var(--e-line-2); }
.ed-sec i { order: 2; font-style: normal; font-weight: 600; }
.ed-sec span { order: 1; color: var(--e-ink-2); }
.ed-sec::after { order: 3; }
.ed .ed-g + .ed-sec { margin-top: 34px; }

/* ---------- grupa (zamówienie) ---------- */
.ed-g { margin-bottom: 26px; border-radius: 26px; }
.ed-gh { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; }
.ed-gimg { position: relative; display: block; width: 56px; height: 56px; }
.ed-gimg img { width: 56px; height: 56px; border-radius: 15px; object-fit: cover; display: block; }
.ed-gok { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--ed-ok); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--ed-done-bg); }
.ed-gok .e-ic { width: 13px; height: 13px; stroke-width: 3; }
.ed-gt { min-width: 0; }
.ed-gt h3 { font: 600 17.5px/1.25 var(--e-disp); letter-spacing: -.015em; margin: 0; }
.ed-gt h3 a { color: inherit; text-decoration: none; }
.ed-gt h3 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ed-gid { color: var(--e-ink-3); font-weight: 600; }
.ed-gt p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: 13px; color: var(--e-ink-3); }
.ed-gt .ed-pb { height: 26px; font-size: 12px; }
.ed-gsum { min-width: 0; }
.ed-gacts { display: flex; align-items: center; gap: 6px; }
.ed-zip, .ed-tog { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--e-surface); box-shadow: inset 0 0 0 1.5px var(--e-line-2); color: var(--e-ink); font: 700 13px var(--e-body); cursor: pointer; white-space: nowrap; transition: background .15s; }
.ed-zip:hover, .ed-tog:hover { background: var(--e-surface-2); }
.ed-zip .e-ic, .ed-tog .e-ic { width: 17px; height: 17px; }
.ed-zip small { font: 600 12px var(--e-body); color: var(--e-ink-3); }
.ed-zip[disabled] { cursor: progress; opacity: .85; }
.ed-tog[hidden] { display: none; }
.ed-tog .e-ic { transition: transform .2s; }
.ed-tog[aria-expanded="true"] .e-ic { transform: rotate(180deg); }
.ed-tog[aria-expanded="false"] { background: var(--e-ink); color: #fff; box-shadow: none; }
.ed-tog[aria-expanded="false"]:hover { background: #2B3136; }

/* zakończone: stonowane zielonkawe tło całej grupy */
.ed-g-done { background: var(--ed-done-bg); padding: 16px 16px 16px; box-shadow: inset 0 0 0 1px var(--ed-ok-line); }
.ed-g-done .ed-gh { margin-bottom: 0; }
.ed-g-done.open .ed-gh { margin-bottom: 14px; }
.ed-g-done .ed-list { box-shadow: 0 1px 2px rgba(21,25,28,.04); }
.ed-g-done .ed-tog[aria-expanded="false"] { background: var(--e-surface); color: var(--ed-ok); box-shadow: inset 0 0 0 1.5px var(--ed-ok-line); }
.ed-g-done .ed-tog[aria-expanded="false"]:hover { background: #F6FAF6; }
/* archiwum (anulowane, odrzucone): szare, przygaszone */
.ed-g-archived { background: var(--ed-arch-bg); padding: 16px; }
.ed-g-archived .ed-gh { margin-bottom: 0; }
.ed-g-archived.open .ed-gh { margin-bottom: 14px; }
.ed-g-archived .ed-gimg img { filter: grayscale(.85); opacity: .8; }
.ed-g-archived .ed-gt h3 { color: var(--e-ink-2); }
.ed-g-archived .ed-tog[aria-expanded="false"] { background: var(--e-surface); color: var(--e-ink-2); box-shadow: inset 0 0 0 1.5px var(--e-line-2); }
.ed-g-archived .ed-list { box-shadow: none; }
.ed-g-archived .ed-row .ed-nm { color: var(--e-ink-2); }

/* ---------- lista i wiersze ---------- */
.ed-list { list-style: none; margin: 0; padding: 0; background: var(--e-surface); border-radius: var(--e-radius); box-shadow: var(--e-shadow); overflow: hidden; }
.ed-list[hidden] { display: none; }
.ed-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 128px 206px 38px; grid-template-areas: "ti t a s acts"; gap: 14px; align-items: center; padding: 14px 16px 14px 18px; border-top: 1px solid var(--e-line); cursor: pointer; transition: background .15s; }
.ed-row:first-child { border-top: 0; }
.ed-row:hover { background: #FBFAF8; }
.ed-row > .ed-ti { grid-area: ti; }
.ed-t { grid-area: t; min-width: 0; }
.ed-a { grid-area: a; text-align: right; font-weight: 800; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-s { grid-area: s; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.ed-acts { grid-area: acts; display: flex; justify-content: flex-end; }
.ed-nm { display: inline; padding: 0; border: 0; background: none; font: 700 14.5px/1.35 var(--e-body); color: var(--e-ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ed-nm:hover span { text-decoration: underline; text-decoration-color: rgba(21,25,28,.35); text-underline-offset: 3px; }
.ed-new { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: 999px; background: var(--e-sea); color: #fff; font: 800 11px var(--e-body); letter-spacing: .02em; vertical-align: 1px; }
.ed-sub { display: block; font-size: 13px; color: var(--e-ink-3); margin-top: 2px; }
.ed-sub .ed-new { display: none; }
.ed-pay { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--ed-due); color: #fff; font: 800 12.5px var(--e-body); text-decoration: none; white-space: nowrap; }
.ed-pay.ed-t-late { background: var(--ed-late); }
.ed-pay:hover { filter: brightness(1.08); }
.ed-pay .e-ic { width: 14px; height: 14px; stroke-width: 2.4; }
.ed-ib { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--e-ink-2); display: grid; place-items: center; cursor: pointer; }
.ed-ib:hover { background: var(--e-bg); color: var(--e-ink); }
.ed-ib[disabled] { opacity: .5; cursor: progress; }
.ed-ib .e-ic { width: 19px; height: 19px; }
.ed-r-ok .ed-a { color: var(--e-ink-2); }

/* brak wyników */
.ed-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 22px; text-align: center; color: var(--e-ink-2); font-size: 14.5px; }
.ed-none b { font: 600 18px/1.3 var(--e-disp); color: var(--e-ink); }
.ed-none span { max-width: 480px; }
.ed-none .e-btn { margin-top: 8px; }
.ed-fine { margin-top: 18px; }

/* lista pobrań (gdy ZIP się nie uda) */
.ed-dlist { list-style: none; margin: 14px 0 0; padding: 0; }
.ed-dlist li { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--e-line); font-weight: 700; font-size: 14px; }
.ed-dlist small { display: block; font-weight: 500; font-size: 12.5px; color: var(--e-ink-3); }

/* ---------- fokus ---------- */
.ed-nm:focus-visible, .ed-ib:focus-visible, .ed-zip:focus-visible, .ed-tog:focus-visible, .ed-pay:focus-visible, .ed-seg button:focus-visible, .ed-qx:focus-visible, .ed-gt h3 a:focus-visible { outline: 3px solid var(--e-sea-2); outline-offset: 2px; }
.ed-row:focus-within { background: #FBFAF8; }

@media (max-width: 760px) {
    .ed .ed-ban { min-height: 170px; padding: 18px 20px; }
    .ed .ed-ban b { font-size: 21px; }
    .ed .ed-ban::after, .ed .ed-ban.due::after { background: linear-gradient(180deg, rgba(8,24,34,.78) 0%, rgba(8,24,34,.88) 100%); }
    .ed-ban .ed-ban-acts .e-btn { flex: 1 1 auto; }
    .ed-tools { flex-direction: column; align-items: stretch; }
    .ed-search { max-width: none; flex: auto; }
    .ed-seg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-radius: 18px; }
    .ed-seg button { padding: 0 6px; border-radius: 14px; font-size: 13px; }
    .ed-seg button i { margin-left: 4px; }

    .ed-g { margin-bottom: 20px; }
    .ed-g-done, .ed-g-archived { padding: 12px; border-radius: 22px; }
    .ed-gh { grid-template-columns: 48px minmax(0,1fr); gap: 4px 12px; }
    .ed-gimg, .ed-gimg img { width: 48px; height: 48px; }
    .ed-gimg img { border-radius: 13px; }
    .ed-gt h3 { font-size: 16px; }
    .ed-gacts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
    .ed-gacts:empty { display: none; }
    .ed-zip small { display: none; }

    .ed-list { border-radius: 18px; }
    .ed-row { grid-template-columns: 36px minmax(0,1fr) auto 36px; grid-template-areas: "ti t t acts" "ti a s s"; gap: 4px 12px; align-items: start; padding: 13px 10px 13px 13px; }
    .ed-row > .ed-ti { width: 36px; height: 36px; border-radius: 11px; }
    .ed-row > .ed-ti .e-ic { width: 19px; height: 19px; }
    .ed-a { text-align: left; align-self: center; font-size: 14px; }
    .ed-a:empty { display: none; }
    .ed-s { align-self: center; }
    .ed-s:empty { display: none; }
    .ed-row:has(.ed-a:empty) .ed-s { grid-column: 2 / -1; justify-content: flex-start; }
    .ed-acts { margin: -4px -2px 0 0; }
    .ed-ib { width: 36px; height: 36px; }
    .ed-nm { font-size: 14px; }
    .ed-sub { font-size: 12.5px; }
    .ed-hide-s { display: none; }
    .ed-t > .ed-new { display: none; }
    .ed-sub .ed-new { display: inline-flex; height: 18px; margin: 0 6px 0 0; vertical-align: 0; }
    .ed-pb, .ed-pay { height: 26px; font-size: 12px; }

}

@media (prefers-reduced-motion: reduce) {
    .ed-row, .ed-seg button, .ed-zip, .ed-tog, .ed-tog .e-ic { transition: none; }
}
.ed-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--e-line-2); color: var(--e-ink-3); font: 700 11.5px var(--e-body); vertical-align: 1px; }
.ed-zip.big small { color: var(--e-sun); }
.ed-zip[aria-busy="true"] { background: linear-gradient(90deg, var(--e-sea-tint) var(--p, 0%), var(--e-surface) var(--p, 0%)); }
/* P40, P41 (30.09): puste filtry wyszarzone i nieaktywne; rozmiar ZIP spokojnym szarym, ostrzeżenie tylko w podpowiedzi */
.ed-seg button[aria-disabled="true"] { opacity: .45; cursor: default; }
.ed-seg button[aria-disabled="true"]:hover { background: none; }
.ed-zip.big small { color: var(--e-ink-3); }
/* P42: nagłówki grup „W toku” w tej samej linii co grupy zakończone (wcięcie jak w karcie) */
.ed-g:not(.ed-g-done):not(.ed-g-archived) > .ed-gh { padding: 0 16px; }
@media (max-width: 760px) { .ed-g:not(.ed-g-done):not(.ed-g-archived) > .ed-gh { padding: 0 12px; } }