/* ============================================================================
   13b-zamowienia-rejestr.css — ZAMÓWIENIA: REJESTR POZYCJI wg zaakceptowanego wzoru (19.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN\artefakt\Zamowienia.html (zam_czesc.txt: .z-bar, .z-zak, .z-fil, .z-pole, .z-combo, .z-akc, .z-pods, .z-pp, .z-tab,
   .z-rw, .z-rg, .z-rgh, .z-rga i klocki .btn, .fch, .ui-seg, .ui-st, .ui-ik). Klasy programu mają prefiks „zr-” (wzór: „z-”), reguły
   te same co we wzorze. Tokeny wzoru → programu: pow = surface, pow-2 = surface-2, pow-3 = surface-3, linia = line, linia-2 = line-soft,
   ramka = line-strong, tusz = text, tusz-2 = text-muted, tusz-3 = text-faint, ak = accent, ak-tlo = accent-soft, uw = warn-strong,
   uw-tlo = warn-soft, bl = danger, bl-tlo = danger-soft, h-k = h-control, r-s = r-sm, r-l = r-lg, r-p = r-pill, t-1 = t-xs, t-2 = t-sm,
   t-3 = t-base, t-4 = t-md, t-5 = t-lg, tlo = bg. Kontener „app” wzoru (≤ 1180 px) = @media (max-width: 1180px).
   Menu „⋮”, okno „Wybierz projekt”, „Zmień stan”: 13c-zamowienia-rejestr-menu.css. Telefon: 9-telefon/5b-zamowienia-rejestr.css.
   Kolory: czerwień tylko przy spóźnieniu (termin minął, miała być), pomarańcz = brakuje / do zamówienia (token --brak-bom).
   ============================================================================ */

.zr { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-4); min-width: 0; }
.zr [data-zr-reszta] { display: contents; }
.zr .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr .nr { white-space: nowrap; }
.zr .num { font-variant-numeric: tabular-nums; }
.zr .icon { width: 16px; height: 16px; }
.zr-pusto { padding: var(--s-4); color: var(--text-faint); font-size: var(--t-base); text-align: center; }

/* --- klocki wzoru używane w rejestrze: przycisk, ikonowy, pigułka-filtr, przełącznik ---------------------------------------------- */
.zr .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--t-base); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.zr .btn:hover { background: var(--surface-2); }
.zr .btn.gl { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.zr .btn.gl:hover { background: var(--accent-hover); }
.zr .btn.cich { border-color: transparent; background: transparent; color: var(--text-muted); }
.zr .btn:disabled { opacity: .5; cursor: not-allowed; }
.zr .ui-ik { display: grid; flex: none; place-items: center; width: var(--h-control); height: var(--h-control); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.zr .ui-ik:hover { background: var(--surface-3); }
.zr .ui-ik .icon { width: 18px; height: 18px; }
.zr .fch { display: inline-flex; align-items: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.zr .fch b { color: var(--text-faint); font-weight: var(--w-bold); }
.zr .fch[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--surface); }
.zr .fch[aria-pressed="true"] b { color: inherit; opacity: .7; }
.zr .ui-seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--surface-3); }
.zr .ui-seg button { height: var(--h-control); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.zr .ui-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }

/* --- 1. PAS: zakładki | działania, pod spodem projekt + szukanie (przyklejony przy przewijaniu) ------------------------------------- */
.zr-bar { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "zak . akc" "fil fil fil"; align-items: center; gap: var(--s-2); margin-top: calc(var(--s-2) * -1); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 calc(var(--s-4) * -1) 0 var(--bg); }
.zr-zak { grid-area: zak; justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 3px; margin: 0; padding: 3px; border-radius: var(--r); background: var(--surface-3); }
.zr-zak button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: calc(var(--h-control) - 6px); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--t-base); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.zr-zak button b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 var(--s-2); border-radius: var(--r); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); }
.zr-zak button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }
.zr-zak button b.bl { background: var(--danger-soft); color: var(--danger); }
.zr-kr { display: none; }
.zr-dl { display: inline; }
.zr-fil { grid-area: fil; display: flex; gap: var(--s-2); min-width: 0; }
.zr-fil > * { min-width: 0; }
.zr-fil > :first-child { flex: 0 1 360px; }
.zr-pole { display: flex; flex: 1 1 240px; align-items: center; gap: var(--s-2); min-width: 0; height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text-faint); }
.zr .zr-pole input:not([type="checkbox"]):not([type="radio"]) { align-self: stretch; width: 100%; min-height: 0; margin: -1px 0; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: var(--t-base); font-weight: var(--w-regular); }
.zr-pole:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.zr-combo { position: relative; }
.zr-wyb { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 300px; max-width: 100%; height: 42px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--t-base); font-weight: var(--w-medium); text-align: left; cursor: pointer; }
.zr-wyb .nr { color: var(--accent); font-weight: var(--w-strong); }
.zr-akc { grid-area: akc; display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.zr-akc .btn { height: var(--h-control); font-size: var(--t-sm); white-space: nowrap; }
.zr-pods { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--t-sm); }
.zr-pods b { color: var(--text); font-weight: var(--w-bold); }
.zr-pods .bl, .zr-pods .bl b { color: var(--danger); }

/* --- 2. PASEK WYBRANEGO PROJEKTU: numer, nazwa, etap, fakty, Lista cięcia, Zmiany po Planach ---------------------------------------- */
.zr-pp { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-base); }
.zr-pp-g, .zr-pp-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.zr-pp .nr { color: var(--accent); font-weight: var(--w-strong); }
.zr-pp-g b.nr { font-family: var(--font-tytul); font-size: var(--t-lg); }
.zr-pp-n { min-width: 0; color: var(--text); font-size: var(--t-md); font-weight: var(--w-bold); }
.zr-pp-fk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-width: 0; }
.zr-pp-fk > span { color: var(--text-muted); font-size: var(--t-sm); }
.zr-pp-fk > span:not(:first-child)::before { content: "·"; margin-right: var(--s-3); color: var(--text-faint); }
.zr-pp .sp { flex: 1; }
.zr-pp-a { display: inline-flex; gap: var(--s-2); }
.zr-pp-k .zr-pp-f { display: none; }
.zr-c { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zr-c i { width: 6px; height: 6px; border-radius: 2px; }

/* --- 3. REJESTR: pasek grupowania + tabela ze stałymi kolumnami, grupy zwijane ------------------------------------------------------ */
.zr-rnar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.zr-rinfo { color: var(--text-faint); font-size: var(--t-sm); }
.zr-tab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.zr-rw { display: grid; grid-template-columns: var(--zr-sz); align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); font-size: var(--t-base); }
.zr-rw:last-child { border-bottom: 0; }
.zr-rw .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zr-rw i { font-size: var(--t-sm); font-style: normal; font-weight: var(--w-medium); color: var(--text-faint); }
.zr-rw.nag { position: sticky; top: 0; z-index: 1; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.zr-ln { min-width: 0; }
.zr-ln b { display: block; overflow: hidden; font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.zr-ln small { display: block; overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zr-pusta { color: var(--text-faint); font-weight: var(--w-medium); }
.zr-podp { display: block; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); line-height: var(--lh-tight); }
.zr-rst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zr-rdok { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zr-rak { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
.zr-rak .btn { min-width: 32px; height: 32px; padding: 0 var(--s-2); }
.zr-rak .ui-ik { width: 32px; height: 32px; }
.zr-rbrak { font-weight: var(--w-strong); }
.zr-rw .zr-rbrak:not(:has(.zr-pusta)) { color: var(--brak-bom, var(--warn-strong)); }
.zr-rt { overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.zr-rt.bl { color: var(--danger); font-weight: var(--w-bold); }
.zr-rt.uw { color: var(--warn-strong); font-weight: var(--w-bold); }   /* ≤ 3 dni robocze do terminu (wzór v190) */
.zr-rw .ui-st.uw, .zr-rgh .ui-st.uw { background: var(--warn-soft); color: var(--warn-strong); }
.zr-rgh .ui-st.bl { background: var(--danger-soft); color: var(--danger); }
.zr-rg { border-bottom: 1px solid var(--line); }
.zr-rg:last-child { border-bottom: 0; }
.zr-rgh { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-2) var(--s-4); border: 0; background: var(--surface-3); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.zr-rgh:hover { filter: brightness(.985); }
.zr-rgh > .icon { flex: none; width: 16px; height: 16px; color: var(--text-faint); transition: transform .15s; }
.zr-rgh[aria-expanded="true"] > .icon { transform: rotate(90deg); }
.zr-rgn { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.zr-rgn b { font-size: var(--t-md); font-weight: var(--w-strong); }
.zr-rgn small { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zr-rgl { color: var(--text-muted); font-size: var(--t-sm); white-space: nowrap; }
.zr-rga { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.zr-rga .btn { flex: none; }
.zr-rga .ui-sp { flex: 1; }
.zr-rdef { margin: 0; color: var(--text-faint); font-size: var(--t-xs); }
.zr-wiecej { display: flex; justify-content: center; padding: var(--s-2); }

/* Tablet pionowo (≤ 980 px, np. iPad 744–834 px): zakładki i cztery przyciski akcji nie mieszczą się w jednym rzędzie (podpisy nachodziły na liczniki).
   Zakładki mają cały pierwszy rząd, a projekt + szukanie + ikony akcji drugi — tak jak na telefonie. */
@media (max-width: 980px) {
  :root[data-ui="tablet"] .zr-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zak zak" "fil akc"; }
  :root[data-ui="tablet"] .zr-zak { justify-self: stretch; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; }
  /* Nazwa materiału ma cały pierwszy wiersz (w wąskiej kolumnie obcinała się do ośmiu liter), liczby, termin i stan są pod nią — nagłówek bez „Materiał” stoi nad nimi. */
  :root[data-ui="tablet"] .zr-rw:not(.nag) > :first-child { grid-column: 1 / -1; }
  :root[data-ui="tablet"] .zr-rw.nag > :first-child { display: none; }
  :root[data-ui="tablet"] .zr-rtab .zr-rw { grid-template-columns: var(--zr-sz-t2); }
}

/* --- 4. TABLET (≤ 1180 px): chowają się kolumny pochodne (na stanie, zamówione, przyjęte), akcje w osobnym rzędzie — jak we wzorze v190 --------------------------- */
@media (max-width: 1180px) {
  .zr-zak button { height: var(--h-control); }
  .zr-akc .btn > span:not(.icon) { display: none; }
  .zr-akc .btn { width: var(--h-control); padding: 0; justify-content: center; }
  .zr-pole { height: 44px; }
  .zr-wyb { height: 44px; }
  .zr-rw { grid-template-columns: var(--zr-sz-t); }
  .zr-rw .ukr { display: none; }
  .zr-rw > .zr-rak { grid-column: 1 / -1; justify-content: flex-end; }   /* tablet (wzór v190): akcje w osobnym rzędzie */
  .zr-rgh { min-height: 52px; }
  .zr-pp-fk > span:not(:first-child)::before { display: none; }
  .zr-pp-f { gap: var(--s-1) var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .zr-rgh > .icon { transition: none; } }