/* Kafle strony zlecenia: skalowanie zawartości do rozmiaru i kształtu kafla (kontenerowe jednostki cq*, flex/grid wypełniający kafel). */
/* Tylko komputer: na telefonie/tablecie kafle płyną w naturalnej wysokości (orders.css), a cqh nie istnieje. Kafle KPI i „widok” mają nofit — same wypełniają kafel. */

/* ---------- KPI (kpi-real/late/pick/rev): etykieta + wielka liczba + podpis, wyśrodkowane i skalowane do kafla ---------- */
html:not(.is-phone):not(.is-tablet) .tile .zl-kpi{flex:1;min-width:0;height:100%;box-sizing:border-box;padding:4px 4px 6px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:start;text-align:left;overflow:hidden}   /* etykieta u góry (w rzędzie chipa waluty), liczba w środku, podpis na dole */
html:not(.is-phone):not(.is-tablet) .tile .zl-kpi .mono{padding:0 46px 0 0;box-sizing:border-box;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:clamp(10px,min(3.7cqw,10cqh),14px);letter-spacing:.05em;text-transform:uppercase}   /* 46 px po bokach: symetrycznie, żeby chip waluty nie zasłaniał etykiety */
html:not(.is-phone):not(.is-tablet) .tile .zl-kpi b{display:block;align-self:center;justify-self:start;max-width:100%;white-space:nowrap;line-height:1.05;font-size:clamp(16px,min(calc(92cqw / (var(--len,8) * .62)),36cqh),72px)}   /* szerokość: ~.62 em na znak; wysokość: do ~¼ kafla */
html:not(.is-phone):not(.is-tablet) .tile .zl-kpi small{max-width:100%;margin-top:.1em;font-size:clamp(10px,min(4.2cqw,8cqh),15px);line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
html:not(.is-phone):not(.is-tablet) .tile:has(.zl-kpi) .mc-body{display:flex;min-height:0;padding-top:0}   /* .mc.bare dokłada padding-top — tu robi to .zl-kpi */
@container (max-height:90px){.zl-kpi small{display:none}}

/* ---------- „widok” (tablica / lista / oś czasu): wypełnia kafel; przewija się tylko wnętrze kolumn / listy ---------- */
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .tile-b{overflow:hidden}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] #zl-body{display:flex;flex-direction:column;height:100%;min-height:0;font-size:clamp(11.5px,min(1.3cqw,2.4cqh),16px)}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-sec-h{flex:none;flex-wrap:wrap;column-gap:.8em;row-gap:0;margin-bottom:.5em;min-width:0}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-sec-h h3{margin:0;font-size:1.15em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-sec-h .mono{font-size:.85em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] #zl-body>.empty{flex:1;display:grid;place-items:center;padding:8px;font-size:1.15em}

/* tablica: 5 kolumn dzieli szerokość i wysokość kafla; karty zleceń przewijają się w obrębie kolumny */
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kanban{flex:1;min-height:0;overflow:hidden;grid-template-columns:repeat(5,minmax(0,1fr))}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 .6em .2em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol-h{flex:none;flex-wrap:wrap;row-gap:0;margin-bottom:.5em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol-h b{font-size:1em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol-h .mono{font-size:.8em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol-b{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5em;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard{flex:none;margin:0;padding:.65em .7em;min-width:0;font-size:1em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard b{font-size:1em;min-width:0;overflow-wrap:anywhere}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .row{gap:.3em .6em;min-width:0}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard small{font-size:.85em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .mono{font-size:.85em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .zl-due{font-size:.85em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .zl-prog{min-width:0;margin:.5em 0 .3em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .sticky{margin-top:.5em;font-size:.9em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol .empty{flex:1;display:grid;place-items:center;padding:6px;border:1px dashed var(--line);border-radius:.7em;font-size:1em}

/* lista: tabela o stałym układzie kolumn (bez przewijania w bok), nagłówek przyklejony, wiersze się zawijają */
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table table{table-layout:fixed;font-size:1em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table thead th{position:sticky;top:0;z-index:1;background:var(--card);padding:.4em .4em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table td{padding:.55em .4em;overflow-wrap:anywhere}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(1){width:20%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(2){width:16%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(3){width:15%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(4){width:13%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(5){width:13%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(6){width:9%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table :is(th,td):nth-child(7){width:14%}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table .zl-sort{max-width:100%;overflow-wrap:anywhere;font-size:max(9px,.8em)}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table .pill{display:inline-block;max-width:100%;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;font-size:max(9px,.8em)}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-table .zl-prog{min-width:0;margin:.3em 0}

/* oś czasu: skaluje się do szerokości (bez przewijania w bok), wiersze rozciągają się na wysokość kafla */
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-nav{flex:none;margin-bottom:.4em;row-gap:.3em}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl{flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-row{flex:1 0 34px;max-height:64px;grid-template-columns:minmax(64px,22%) minmax(0,1fr)}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-head{flex:none;position:sticky;top:0;z-index:2;background:var(--card);min-height:24px;max-height:none}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-track{height:100%;min-height:28px}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-head .zl-tl-track{height:22px;min-height:0}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-row:not(.zl-tl-head) :is(.zl-bar,.zl-dot){top:50%;transform:translateY(-50%)}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-row:not(.zl-tl-head) .zl-bar{height:min(70%,24px);display:flex;align-items:center}
html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .zl-tl-head .zl-tl-track span:last-of-type{transform:translateX(-30%)}

/* tablica w wąskim kaflu (< 560 px): pięć kolumn się nie mieści czytelnie → etapy jedne pod drugimi, lista etapów przewija się w kaflu */
@container (max-width:559px){
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kanban{display:block;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol{display:block;padding:0 0 .5em;border-left:0}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol + .kcol{border-left:0;border-top:1px solid var(--line);padding-top:.6em}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol-b{display:flex;overflow:visible}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol .empty{display:none}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcol:not(:has(.kcard)) .kcol-h{margin-bottom:0}
}

/* tablica w kaflu średniej szerokości (kolumny ~100–170 px): ciaśniejsza karteczka, żeby tekst nie łamał się co literę */
@container (min-width:560px) and (max-width:859px){
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .sticky{padding:.4em .4em .4em .5em;gap:.25em;font-size:.82em}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard .sticky-x{width:1.6em;height:1.6em;font-size:.9em}
  html:not(.is-phone):not(.is-tablet) [data-tile="widok"] .kcard{padding:.55em .5em}
}