/* NOMIA – komponenty mobilne. Każda klasa odpowiada komponentowi z Figmy (strona components),
 * warianty jako modyfikatory: .button--secondary, .text_field--error itd.
 * Kolory i odstępy wyłącznie ze zmiennych w tokens.css. */

/* pole hasła: gwiazdki zamiast kropek – mały krój z jednym znakiem (gwiazdką) w miejscu kropek maskujących */
@font-face { font-family: "nomia_mask"; src: url("fonts/nomia_mask.d03612dcca3f.ttf") format("truetype"); unicode-range: U+2022, U+25CF, U+2219, U+25E6; }

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; /* bez powiększania ekranu podwójnym dotknięciem (np. szybkie − / +); powiększanie palcami zostaje */
  -webkit-text-size-adjust: 100%; height: 100%; overscroll-behavior: none; background: var(--color-bg-surface); }
/* ekrany z nagłówkiem: tło strony w kolorze nagłówka – Safari barwi nim pasek stanu i paski przeglądarki */
html.app_screen { background: #1f1a85; } /* dosłowny kolor: iOS 26 nie odczytuje zmiennych przy barwieniu paska stanu */

/* iOS 26, aplikacja z ekranu głównego: okno jest krótsze od ekranu o pasek stanu (błąd WebKit;
   zmierzone 9.10.2026: ekran 812, okno 761, obszar ochronny u góry 51) – na dole zostaje pas.
   Pełną wysokość podaje tylko 100lvh. Klasa ios_app ustawiana w ui.js tylko na iPhonie w trybie aplikacji. */
html.ios_app, html.ios_app body { height: 100lvh; }
html.ios_app .screen { bottom: auto; height: 100lvh; }


/* bez powiększania podwójnym dotknięciem na każdym elemencie – samo `html` nie działało wewnątrz przewijanego obszaru
   roboczego (iPhone); powiększanie dwoma palcami zostaje (propozycja 192, poprawka 15 października 2026) */
*, *::before, *::after { touch-action: manipulation; }
body {
  height: 100%; overscroll-behavior: none;
  margin: 0;
  font: 400 16px/var(--line-height-auto) var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
.icon { display: block; flex: none; width: 24px; height: 24px; }
.visually_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ekran = mobile_template (mobile/screen_base w Figmie):
   header (+ belki) przyklejone do góry, bottom_bar do dołu, przewija się tylko work_area ---------- */
/* position: fixed + inset 0 zamiast 100dvh: iOS w trybie aplikacji liczy 100vh bez paska stanu i zostawia lukę na dole */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen__top, .screen__bottom { flex: none; }
.screen__bottom:empty { display: none; } /* ekran bez poleceń nie ma dolnej belki (propozycja 71) */
.screen__top { position: relative; z-index: 10; }
/* komunikaty (toast): pierwszy element work_area, przesuwają treść w dół (propozycja 54, 11 października 2026).
   Biały margines 20 z każdej strony; przyklejony u góry obszaru roboczego (błąd zostaje do dotknięcia). */
.toast_area { margin: calc(-1 * var(--space-20)) calc(-1 * var(--space-20)) calc(-1 * var(--space-10));
  padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-10); background: var(--color-bg-surface); }
.toast_area:empty { display: none; }
.toast_area { position: sticky; top: calc(-1 * var(--space-20)); z-index: 5; } /* przyklejony: przy przewijaniu zostaje u góry z białym marginesem, treść przesuwa się pod nim */
.toast_area .toast { transition: opacity .3s; overflow: hidden; }
.toast_area .toast--hiding { opacity: 0; }
.toast_area--collapsing { overflow: hidden; transition: height .3s ease, padding .3s ease; } /* zwijanie płynne: treść wraca bez skoku */
.work_area {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* bez -webkit-overflow-scrolling: na iPhonie tworzy osobną warstwę i lista chowała się pod przyciemnieniem */
  padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-10);
}
.work_area > * { flex-shrink: 0; } /* elementy z overflow:hidden nie mogą się zgniatać do zera */

/* ---------- header ---------- */
.header {
  background: #1f1a85; background: var(--color-bg-brand); color: var(--color-text-on_brand);
  padding: env(safe-area-inset-top, 0px) var(--space-20) 5px;
}
.header__main { height: 50px; display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; }
.header__toggle { /* jak w Figmie: strzałka 38 × 38 przy dolnej krawędzi wiersza 50 px; pole dotyku 48 × 50 (poprawki pilotażu, pkt 29) */
  width: var(--size-touch_min); height: 50px; margin-left: -5px; align-self: stretch;
  display: flex; align-items: flex-end; justify-content: center;
  background: none; border: 0; padding: 0; color: var(--color-icon-on_brand); cursor: pointer;
}
.header__toggle .icon { transition: transform .2s; }
.header__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.header__logo { justify-self: center; color: var(--color-text-on_brand); }
.header__logo .logo { display: block; width: 164px; height: 45px; }
.header__avatar { /* inicjały jak komponent avatar w Figmie: text/24_regular wyrównany do dołu wiersza 50 px, bez kółka (pkt 29) */
  justify-self: end; min-width: var(--size-touch_min); height: 50px; display: flex; align-items: flex-end; justify-content: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font: 400 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-on_brand);
}
.header__meta { height: 26px; display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; justify-items: center; }
.header__offline { color: var(--color-text-offline); white-space: nowrap; }
.header__offline[hidden] { display: none; }
.title_bar[hidden] { display: none; }
.measurement_row--queued .measurement_row__value { color: var(--color-text-tertiary); }

/* ---------- navi_bar (rozwijany chevronem w nagłówku) ---------- */
/* ---------- belki pod nagłówkiem (navi_bar, title_bar, search_bar): kolor według miejsca, nie rodzaju.
   ui.js nadaje data-level 1–4 kolejnym widocznym belkom; bez skryptu wszystkie mają poziom 1 ---------- */
.bar, .bar[data-level="1"] { background: var(--color-bg-bar_1); }
.bar[data-level="2"] { background: var(--color-bg-bar_2); }
.bar[data-level="3"] { background: var(--color-bg-bar_3); }
.bar[data-level="4"] { background: var(--color-bg-bar_4); }

.navi_bar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-20); }
.navi_bar[hidden] { display: none; }
.nav_item {
  position: relative; flex: none; width: 59px; height: 60px; display: flex; align-items: center; justify-content: center;
  color: var(--color-icon-on_brand); text-decoration: none; border: 0; background: none; padding: 0;
}
.nav_item .icon { width: 32px; height: 32px; opacity: .7; }
.nav_item--selected .icon { width: 40px; height: 40px; opacity: 1; }
.nav_item--disabled { pointer-events: none; }
.nav_item--disabled .icon { opacity: .35; }
.nav_item .badge { position: absolute; top: 10px; left: 32px; }

/* ---------- title_bar ---------- */
/* tytuł do lewej, jeden wiersz z „…”; ilość po prawej; chevron, gdy belka otwiera kolejny ekran (14 października 2026) */
.title_bar {
  flex: none; height: 54px; padding: 0 var(--space-20); display: flex; align-items: center; gap: var(--space-12);
  color: var(--color-text-on_brand); text-decoration: none;
  margin: 0; text-align: left; font: 500 24px/var(--line-height-auto) var(--font-family);
}
.title_bar[data-title-level="2"] { font: 500 20px/var(--line-height-auto) var(--font-family); } /* np. „ZAM.00042 z 15.10.2026” */
.title_bar[data-title-level="3"] { font: 400 20px/var(--line-height-auto) var(--font-family); } /* np. „Kondosouvli drobiowe 12 kg” (15 października 2026) */
.title_bar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title_bar__quantity { flex: none; white-space: nowrap; }
.title_bar__chevron { flex: none; width: 24px; height: 24px; color: var(--color-icon-on_brand); } /* gruba, biała (16 października 2026) */
/* lejek na belce, którą filtruje (232, 238): pole dotyku 44 × 54, ikona 24, kropka aktywnego filtra */
.title_bar__filter { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 54px; margin-right: -10px;
  border: 0; background: none; padding: 0; color: var(--color-icon-on_brand); cursor: pointer; }
.title_bar__filter .icon { width: 24px; height: 24px; }
.title_bar__dot { position: absolute; top: 12px; right: 6px; }
.title_bar__dot[hidden] { display: none; }

/* ---------- bottom_bar i bottom_action ---------- */
.bottom_bar {
  background: var(--color-bg-brand); color: var(--color-icon-on_brand);
  padding: 0 var(--space-20);
}
/* obszar ochronny pod belką: iPhone – nie (kreska jest przezroczysta); Android – tak (pasek systemowy zasłania); ui.js dodaje klasę */
.pad_bottom_inset .bottom_bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
html.keyboard_open .bottom_bar { padding-bottom: 0; } /* klawiatura otwarta: belka stoi wprost na klawiaturze */
.bottom_bar__actions { height: 85px; /* 478: pasek 85 px (Figma) */ display: grid; grid-template-columns: 1fr minmax(120px, auto) 1fr; align-items: center; }
.bottom_bar__left { justify-self: start; }
.bottom_bar__center { justify-self: center; }
.bottom_bar__right { justify-self: end; }
.bottom_action {
  min-width: 56px; height: 70px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-decoration: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.bottom_action .icon { width: 36px; height: 36px; }
.bottom_action--large .icon { width: 55px; height: 55px; }
.bottom_action:active { opacity: .7; }
.bottom_action:disabled, .bottom_action--disabled { opacity: .4; pointer-events: none; }
/* zatwierdzenie przytrzymaniem (propozycje 106–107): obwódka wypełnia się wokół ikony przez --hold-ms */
@property --hold-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.bottom_action--hold { position: relative; touch-action: none; }
.bottom_action--hold::after { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-radius: 50%; pointer-events: none; opacity: 0; --hold-p: 0%;
  background: conic-gradient(currentColor var(--hold-p), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
.bottom_action--holding::after { opacity: 1; animation: hold_ring var(--hold-ms, 1s) linear forwards; }
.bottom_action--holding:active { opacity: 1; }
@keyframes hold_ring { from { --hold-p: 0%; } to { --hold-p: 100%; } }
.bottom_action__number { font: 500 30px/1 var(--font-family); font-variant-numeric: tabular-nums; } /* type=number: liczba zamiast ikony */
.bottom_action--large .bottom_action__number { font: 400 40px/1 var(--font-family); }
.bottom_action__number { display: inline-flex; align-items: baseline; white-space: nowrap; }
.bottom_action__total { font-size: 24px; margin-left: .3em; } /* „z M” mniejsze, żeby np. „12 z 148” zmieściło się na środku paska */
.bottom_action__number { padding: 7px 0 4px; border-bottom: 3px solid transparent; } /* równowaga góra–dół, żeby kreska nie przesuwała liczby */
.bottom_action[aria-pressed="true"] .bottom_action__number { border-bottom-color: currentColor; } /* widok „tylko zaznaczone” włączony – kreska tuż pod licznikiem */

/* ---------- button ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  min-height: 50px; padding: var(--space-10) var(--space-20); /* pola, przyciski, toast: wysokość wyjściowa 50, rośnie z liczbą wierszy */
  border-radius: var(--radius-md); border: 0; cursor: pointer; text-decoration: none;
  font: 400 24px/var(--line-height-auto) var(--font-family);
  background: var(--color-bg-accent); color: var(--color-text-on_brand);
}
.button:active, .button--pressed { background: var(--color-bg-brand); }
.button:disabled, .button--disabled { background: var(--color-bg-disabled); pointer-events: none; }
.button--secondary {
  background: var(--color-bg-surface); color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default);
}
.button--secondary:active, .button--secondary.button--pressed { background: var(--color-bg-selected); }
.button--secondary:disabled, .button--secondary.button--disabled {
  background: var(--color-bg-surface); color: var(--color-text-disabled);
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-disabled);
}
.button--block { display: flex; width: 100%; }

/* ---------- text_field (text / password / select; stany default, focused, error, readonly) ---------- */
.text_field { display: flex; flex-direction: column; gap: var(--space-6); }
.text_field__box {
  display: flex; align-items: center; gap: var(--space-12);
  min-height: 50px; padding: 13px var(--space-20);
  background: var(--color-bg-surface); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default);
  position: relative;
}
/* klucz kolorów ramek (14 października 2026): puste pole – border/subtle, wypełnione – border/default, grubość 2 */
.text_field__box:has(> .text_field__input:placeholder-shown) { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-subtle); }
.text_field__box:focus-within, .text_field--focused .text_field__box {
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-strong);
}
.text_field--error .text_field__box { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-error); }
.text_field__input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; margin: 0; background: transparent;
  font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary);
  -webkit-appearance: none; appearance: none; text-align: left;
}
.text_field__input::placeholder { color: var(--color-text-disabled); opacity: 1; } /* podpowiedź w kolorze disabled, wartość primary (11 października 2026) */
.text_field__input[type="password"] { font-family: "nomia_mask", var(--font-family); }
.text_field__input[type="password"]:not(:placeholder-shown) { letter-spacing: 2px; }
.text_field__icon { color: var(--color-icon-muted); display: flex; flex: none; }
.text_field__toggle { border: 0; background: none; padding: 0; margin: -10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-icon-default); }
.text_field__helper { font: 500 14px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); padding: 0 var(--space-20); }
.text_field--error .text_field__helper { color: var(--color-text-error); }
.text_field--error .text_field__input, .text_field--error .text_field__input::placeholder { color: var(--color-text-error); }
.text_field--error .text_field__icon, .text_field--error .text_field__toggle { color: var(--color-icon-error); }
/* wartość nieedytowalna: już wpisana, kolor wiodący, bez chevrona i bez oka */
.text_field--readonly .text_field__value { flex: 1; font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }

/* ---------- toast (komunikat; także jako alert w treści) ---------- */
.toast {
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; /* \n = nowy wiersz */
  padding: 13px var(--space-20); min-height: 50px; border-radius: var(--radius-md);
  font: 400 20px/var(--line-height-auto) var(--font-family);
  background: var(--color-bg-subtle); color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default);
}
.toast--success { background: var(--color-bg-success_subtle); color: var(--color-text-success); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-success); }
.toast--error { background: var(--color-bg-error_subtle); color: var(--color-text-error); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-error); }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 25px; height: 25px; padding: 0 var(--space-6); border-radius: var(--radius-full);
  background: var(--color-bg-error); color: var(--color-text-on_brand);
  font: 400 20px/1 var(--font-family);
}
.badge--dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }

/* ---------- list_tile ---------- */
.list_tile {
  display: flex; flex-direction: column; padding: var(--space-10) var(--space-20); border-radius: var(--radius-md);
  background: var(--color-bg-subtle); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-disabled);
  color: var(--color-text-primary); text-decoration: none;
}
.list_tile__title { font: 700 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-secondary); }
.list_tile__detail { font: 400 16px/var(--line-height-auto) var(--font-family); }
.list_tile__meta { display: flex; gap: var(--space-10); justify-content: space-between; padding-top: var(--space-4); font: 500 14px/var(--line-height-auto) var(--font-family); }
.list_tile__status { font-weight: 700; }
.list_tile--warning { background: var(--color-bg-warning_subtle); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-warning); }
.list_tile--warning, .list_tile--warning .list_tile__title { color: var(--color-text-warning); }
.list_tile--error { background: var(--color-bg-error_subtle); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-error); }
.list_tile--error, .list_tile--error .list_tile__title { color: var(--color-text-error); }
.list_tile--success { background: var(--color-bg-success_subtle); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-success); }
.list_tile--success, .list_tile--success .list_tile__title { color: var(--color-text-success); }
.list_tile--muted { box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-subtle); }
.list_tile--muted, .list_tile--muted .list_tile__title { color: var(--color-text-disabled); }

/* ---------- item_tile (siatka asortymentu, 3 w rzędzie) ---------- */
.item_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
/* siatka: sam kwadrat ze zdjęciem (propozycja 195) – bez ramki; ramka po wyborze i przy „uwaga” (nakładana na zdjęcie) */
.item_tile {
  position: relative; display: flex; flex-direction: column; gap: var(--space-0); padding: 0;
  border-radius: var(--radius-md); background: var(--color-bg-surface); border: 0; text-align: center; cursor: pointer;
  color: var(--color-text-primary); min-width: 0;
}
.item_tile__image { aspect-ratio: 1; width: 100%; border-radius: var(--radius-md); background: var(--color-bg-placeholder); object-fit: cover; display: block; }
.item_tile::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); pointer-events: none; }
.screen:not(.screen--list) .item_tile__label, .screen:not(.screen--list) .item_tile__detail, .screen:not(.screen--list) .item_tile__metric {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.item_tile__label { font: 400 14px/var(--line-height-auto) var(--font-family); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item_tile__metric { font: 700 14px/var(--line-height-auto) var(--font-family); color: var(--color-text-secondary); }
.item_tile__metric--muted { color: var(--color-text-disabled); } /* podpowiedź, np. ilość z zamówienia */
.item_tile--selected::after { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-strong); }
.item_tile--attention::after { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-error); }
.item_tile--attention .item_tile__label, .item_tile--attention .item_tile__metric { color: var(--color-text-error); }
.item_tile--disabled { cursor: default; } /* dotknięcie wyszarzonego z data-info pokazuje, kto zgłosił */
.item_tile[hidden], .list_tile[hidden], .text_field[hidden] { display: none; }
.form_stack { display: flex; flex-direction: column; gap: var(--space-10); }
.tile_list { display: flex; flex-direction: column; gap: var(--space-10); } /* lista kafelków list_tile (np. kartoteka zamówień) */
a.item_tile { text-decoration: none; }
.item_tile--disabled .item_tile__image, .item_tile--done .item_tile__image { filter: grayscale(1); opacity: .5; }
/* bez zdjęcia: wyszarzona marchewka (propozycja 145, pkt 36) */
.item_tile__image--none { display: flex; align-items: center; justify-content: center; color: var(--color-icon-disabled); }
.item_tile__image--none .icon { width: 45%; height: 45%; }
.item_operation_form__none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-icon-disabled); }
.item_operation_form__none .icon { width: min(96px, 60%); height: min(96px, 60%); }
.item_tile--disabled .item_tile__label, .item_tile--disabled .item_tile__metric,
.item_tile--done .item_tile__label, .item_tile--done .item_tile__metric { color: var(--color-text-subtle); }
/* przyjęta pozycja (done): wyszarzona, ale da się ją poprawić (propozycja 58) */

/* zaznaczona pozycja na liście – tylko pogrubienie (15 października 2026) */
/* widok listy (propozycje 194, 200): te same pozycje jako wiersze item_row – linia oddzielająca, nazwa, pod nią detal,
   po prawej ilość albo status; bez zdjęcia; szczegóły tylko tutaj */
.screen--list .item_grid { display: flex; flex-direction: column; gap: 0; }
.screen--list .item_tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: baseline; text-align: left;
  padding: var(--space-12) 0; border-radius: 0; background: none; /* jak item_row: tekst równo z kreską */
  border-bottom: var(--border_width-thin) solid var(--color-border-subtle);
}
.screen--list .item_tile::after { display: none; }
.screen--list .item_tile[hidden] { display: none; }
.screen--list .item_tile__image { display: none; }
.screen--list .item_tile__label { grid-column: 1; min-width: 0; font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* jeden wiersz, długa nazwa „…” – nie nachodzi na ilość */
.screen--list .item_tile__detail { grid-column: 1; font: 500 14px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen--list .item_tile__metric { grid-column: 2; grid-row: 1; /* w jednej linii z nazwą */ font: 400 20px/var(--line-height-auto) var(--font-family);
  color: var(--color-text-primary); white-space: nowrap; }
.screen--list .item_tile__metric--muted { color: var(--color-text-disabled); }
.screen--list .item_tile--selected .item_tile__label, .screen--list .item_tile--selected .item_tile__metric { font-weight: 700; }
.screen--list .item_tile--attention .item_tile__label, .screen--list .item_tile--attention .item_tile__detail,
.screen--list .item_tile--attention .item_tile__metric { color: var(--color-text-error); }
.screen--list .item_tile--done .item_tile__label, .screen--list .item_tile--done .item_tile__detail, .screen--list .item_tile--done .item_tile__metric,
.screen--list .item_tile--disabled .item_tile__label, .screen--list .item_tile--disabled .item_tile__detail,
.screen--list .item_tile--disabled .item_tile__metric { color: var(--color-text-disabled); }
/* item_row (propozycja 200, 202): wiersz listy – nazwa | ilość, pod nazwą detal; linia oddzielająca */
.item_rows { display: flex; flex-direction: column; }
.item_rows + .item_rows { margin-top: var(--space-10); }
.item_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: baseline;
  padding: var(--space-12) 0; border-bottom: var(--border_width-thin) solid var(--color-border-subtle); } /* bez bocznych odstępów – tekst równo z kreską */
.item_row__label { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.item_row__metric { grid-column: 2; grid-row: 1; white-space: nowrap; font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.item_row__detail { grid-column: 1; font: 500 14px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }
.item_row--selected .item_row__label, .item_row--selected .item_row__metric { font-weight: 700; }
.item_row--attention .item_row__label, .item_row--attention .item_row__metric, .item_row--attention .item_row__detail { color: var(--color-text-error); }
.item_row--done .item_row__label, .item_row--done .item_row__metric, .item_row--done .item_row__detail { color: var(--color-text-disabled); }
/* przytrzymanie przełącza widok: bez systemowego menu obrazka i zaznaczania (iPhone) w całym obszarze roboczym z siatką (197) */
.work_area--hold, .work_area--hold * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.work_area--hold input, .work_area--hold textarea { -webkit-user-select: text; user-select: text; }
.work_area--hold img, .work_area--hold a { -webkit-user-drag: none; }

/* ---------- empty_state ---------- */
.work_area__center:not([hidden]) { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } /* komunikat na środku pola */
/* widok wybranych (koszyk): bez ramki i pogrubienia – wszystkie są wybrane; dotknięcie usuwa pozycję (15 października 2026) */
[data-selected-view] .item_tile--selected::after, [data-no-frame] .item_tile--selected::after { display: none; }
.screen--list [data-selected-view] .item_tile--selected .item_tile__label,
.screen--list [data-selected-view] .item_tile--selected .item_tile__metric { font-weight: 400; }
.empty_state { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-40) var(--space-20); text-align: center; }
.empty_state .icon { width: 64px; height: 64px; color: var(--color-icon-disabled); }
.empty_state__title { margin: 0; font: 700 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-secondary); }
.empty_state__detail { margin: 0; font: 400 16px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }

/* ---------- skeleton (ładowanie) ---------- */
.skeleton { background: var(--color-bg-surface); border-radius: var(--radius-md); display: flex; flex-direction: column; }
.skeleton__block, .skeleton__line { background: var(--color-bg-subtle); animation: skeleton_pulse 1.2s ease-in-out infinite; }
.skeleton__block { aspect-ratio: 1; border-radius: var(--radius-sm); }
.skeleton__line { height: 12px; border-radius: var(--radius-full); }
.skeleton--item_tile { padding: var(--space-6); gap: var(--space-0); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-subtle); }
.skeleton--list_tile { padding: var(--space-12) var(--space-20); gap: var(--space-8); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-subtle); }
.skeleton--list_tile .skeleton__line:first-child { height: 18px; }
@keyframes skeleton_pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .skeleton__block, .skeleton__line { animation: none; } }

/* ---------- task_detail ---------- */
.task_detail { display: flex; flex-direction: column; color: var(--color-text-primary); }
.task_detail__title { margin: 0; font: 700 24px/var(--line-height-auto) var(--font-family); }
.task_detail__due { margin: 0; height: 24px; display: flex; align-items: center; gap: 5px; font: 700 16px/var(--line-height-auto) var(--font-family); }
.task_detail__due .icon { color: var(--color-icon-primary); }
.task_detail__due--late, .task_detail__due--late .icon { color: var(--color-text-error); }
.task_detail__description { margin: 0; padding-top: var(--space-20); font: 400 20px/var(--line-height-auto) var(--font-family); white-space: pre-line; }

/* ---------- logowanie ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; background: var(--color-bg-surface); }
.login__form { width: 100%; max-width: 393px; display: flex; flex-direction: column; gap: var(--space-20); padding: 80px var(--space-40) var(--space-20); }
.login__logo { color: var(--color-bg-brand); } /* logo 80 px od góry (odstęp formularza) – klawiatura nie zasłania przycisku */
.login__logo .logo { display: block; width: 100%; height: auto; }
.login__fields { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-20) 0 0; }
.login__title { margin: 0; color: var(--color-text-primary); } /* 437: zaproszenie, kod SMS, nowe hasło */
.login__fields p { margin: 0; color: var(--color-text-primary); }
.login__link { text-align: center; color: var(--color-text-primary); text-decoration: none; }
.login__version { margin-top: auto; text-align: center; color: var(--color-text-tertiary); }
@media (max-height: 700px) { .login__form { padding-top: var(--space-40); } }

/* ===================== komponenty zgłoszenia, zamówienia i przyjęcia ===================== */

/* ---------- search_bar (propozycja 114: tylko wyszukiwarka – pole „Szukaj…” od razu, X czyści; wysokość bez zmian) ---------- */
.search_bar { height: 54px; padding: 0 var(--space-20); display: flex; align-items: center; gap: var(--space-12); color: var(--color-icon-disabled); }
.search_bar__btn { display: flex; align-items: center; gap: var(--space-8); border: 0; background: none; padding: 0; color: inherit; cursor: pointer; min-height: var(--size-touch_min); }
.search_bar .icon { width: 32px; height: 32px; flex: none; }
.search_bar__btn { color: var(--color-icon-on_brand); width: 32px; justify-content: center; } /* skaner i „wyczyść” białe, pola 32×32 */
.search_bar__search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-10); min-height: var(--size-touch_min); cursor: text; }
.search_bar__query { width: 100%; min-width: 0; flex: 1 1 auto; border: 0; outline: 0; background: none; padding: 0; -webkit-appearance: none; appearance: none;
  font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-on_brand); }
.search_bar__query::placeholder { color: var(--color-icon-disabled); opacity: 1; }
.search_bar__query::-webkit-search-cancel-button, .search_bar__query::-webkit-search-decoration { -webkit-appearance: none; }
.search_bar__reset[hidden], .search_bar__scan[hidden] { display: none; }
.search_bar__scan { text-decoration: none; }

/* ---------- filter_menu (propozycja 113: lista filtra nad dolnym paskiem, wygląd otwartego select_field) ---------- */
.filter_menu { position: absolute; left: var(--space-20); right: var(--space-20); bottom: calc(var(--filter-bottom, 75px) + var(--space-10)); z-index: 40;
  display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-surface); border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.filter_menu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-strong); }
.filter_menu[hidden] { display: none; }
.filter_menu--top { top: var(--filter-top, 0); bottom: auto; } /* lejek na belce – lista pod belką (232) */
/* wyszukiwarka listy: sama lupa i „Wyszukaj…”, po wpisaniu X po prawej (pkt 33) – jak pierwszy wiersz select_field */
.filter_menu__search { display: flex; align-items: center; gap: var(--space-12); min-height: 50px; padding: 13px var(--space-20);
  border-bottom: var(--border_width-thin) solid var(--color-border-default); font: 400 20px/var(--line-height-auto) var(--font-family); }
.filter_menu__search .icon { color: var(--color-icon-muted); }
.filter_menu__query { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font: inherit; color: var(--color-text-primary); }
.filter_menu__query::placeholder { color: var(--color-text-disabled); opacity: 1; }
.filter_menu__clear { border: 0; background: none; padding: 0; margin: -10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.filter_menu__clear[hidden] { display: none; }
/* przy wyszukiwaniu lista przenosi się pod belki i nie chowa się pod klawiaturą (pkt 34) */
.filter_menu--searching { bottom: auto; top: var(--filter-top, 10px); }
.filter_menu__options { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; } /* 5 opcji po 60 px */
.filter_menu__options .select_option { font-size: 20px; }
.filter_menu__options .select_option[hidden] { display: none; }
.cat__filter_menu .filter_menu { position: static; }
.bottom_action__dot { position: absolute; top: 12px; right: 6px; }
.bottom_action__dot[hidden] { display: none; }
[data-open-menu] { position: relative; }

/* ---------- search_field (pole wyszukiwania w popupie) ---------- */
.search_field { display: flex; align-items: center; gap: var(--space-8); height: 50px; padding: 0 var(--space-10);
  background: var(--color-bg-surface); border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-disabled); color: var(--color-icon-primary); }
.search_field__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
  font: 400 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.search_field__input::placeholder { color: var(--color-text-secondary); opacity: 1; }

/* ---------- action_tile (kafelek czynności w assortment_operations) ---------- */
/* kafelki jeden pod drugim zawsze wypełniają dostępny obszar bez przewijania: większy ekran = wyższe kafelki,
   mniej kafelków = wyższe (Figma: siatka, wiersze FLEX); dotyczy assortment_operations i przyczyn RW (15 października 2026) */
.work_area > .action_grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: var(--space-10); }
.action_grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
.work_area > .action_grid--compact { flex: none; grid-auto-rows: 74px; } /* 477: Czas pracy – kafelki stałej wysokości (Figma work_time) */
.action_tile { display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--space-20); min-height: 0; overflow: hidden; border-radius: var(--radius-md);
  background: var(--color-bg-subtle); box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-default);
  color: var(--color-text-secondary); text-decoration: none; font: 500 24px/var(--line-height-auto) var(--font-family); min-width: 0; }
.action_tile .icon { width: 44px; height: 44px; color: var(--color-icon-default); }
.action_tile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action_tile--disabled { opacity: .4; cursor: default; } /* czynność w kolejnym etapie */
button.action_tile { border: 0; width: 100%; text-align: left; cursor: pointer; } /* przyczyna RW jako przycisk formularza */

/* ---------- select_option ---------- */
.select_option { text-decoration: none; display: flex; align-items: center; min-height: 60px; padding: var(--space-12) var(--space-25); border: 0; background: none; width: 100%;
  text-align: left; font: 400 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); cursor: pointer; }
.select_option--selected { background: var(--color-bg-subtle); }
/* ikona opcji po lewej, w kolorze tekstu (propozycja 133); zamknięte pole pokazuje ikonę wybranej opcji */
.select_option { gap: var(--space-10); }
.select_option > .icon { width: 24px; height: 24px; flex: none; }
.select_field__value, .select_field__current { display: flex; align-items: center; gap: var(--space-10); }
.select_field__value .icon, .select_field__current .icon { width: 24px; height: 24px; }
.select_field__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.value_field--selectable:has(> .icon:first-child)::before { display: none; }

/* ---------- value_field (wartość w formularzu; static = nieedytowalna, selectable = do wyboru) ---------- */
.value_field { padding: var(--space-10) 0; text-align: center; font: 700 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.value_field--static { color: var(--color-text-disabled); }
.value_field--selectable { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; border: 0; background: none; cursor: pointer; }
.value_field--selectable .icon { width: 24px; height: 24px; flex: none; }
.value_field--selectable::before { content: ""; width: 24px; flex: none; } /* niewidoczny odstęp z lewej = strzałka z prawej: tekst zawsze na osi */
.value_field--selectable > span, .value_field:not(.value_field--selectable) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* długa nazwa dostawcy: „…” */ /* strzałka w dół: jest z czego wybrać (zasada pól §2.2) */
.value_field--empty { color: var(--color-text-disabled); }

/* ---------- quantity_field (propozycje 190–191): ilość | jednostka w jednym wierszu, pola tej samej wielkości ----------
   ilość do prawej, jednostka do lewej; puste pole – ramka subtle, wypełnione – default, grubość 2; jednostka bez wyboru – bez chevrona */
.quantity_field { display: flex; gap: var(--space-10); width: 100%; }
.quantity_field__value, .quantity_field__unit { flex: 1 1 0; min-width: 0; }
.quantity_field__value { display: flex; align-items: center; height: 60px; padding: 0 var(--space-20); cursor: text;
  background: var(--color-bg-surface); border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default); }
.quantity_field__value:has(> .quantity_field__input:placeholder-shown) { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-subtle); }
.quantity_field__value:focus-within { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-strong); }
.quantity_field__value--readonly, .quantity_field__value--readonly:focus-within { cursor: default; box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-subtle); }
.quantity_field__input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font: 400 30px/var(--line-height-auto) var(--font-family); text-align: right; color: var(--color-text-primary); }
.quantity_field__input::placeholder { color: var(--color-text-disabled); opacity: 1; }
.quantity_field__value--readonly .quantity_field__input { color: var(--color-text-disabled); }
.quantity_field__unit .select_field__box { min-height: 60px; font-size: 30px; padding-top: 0; padding-bottom: 0; }
/* skrót jednostki zawsze w całości (15 października 2026 – „szt.” w wąskim polu ucinało się do „s…”): mniejsze odstępy
   pola, a gdy skrót dalej się nie mieści – mniejsza czcionka (ui.js, fitUnit) */
.quantity_field__unit .select_field__box { padding-left: var(--space-12); padding-right: var(--space-10); gap: 4px; }
.quantity_field__unit .select_field__box > .icon { flex: none; }
.quantity_field__unit .select_field__value { text-overflow: clip; }
/* rozwinięta lista jednostki – pełna szerokość wiersza ilość | jednostka, nie szerokość pola (propozycja 213) */
.quantity_field__unit .select_field { position: relative; }
.quantity_field__unit .select_field__list { left: auto; right: 0; width: calc(200% + var(--space-10)); }
.quantity_field__static { display: flex; align-items: center; height: 60px; padding: 0 var(--space-20); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default);
  font: 400 30px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
/* autosize: szerokość pola z liczbą wyznacza niewidoczna kopia tekstu w tej samej komórce siatki (bez mierzenia skryptem) */
.autosize { display: inline-grid; align-items: center; }
.autosize > input, .autosize > .autosize__sizer { grid-area: 1 / 1; font: inherit; }
.autosize > input { width: 0; min-width: 100%; } /* pole nie wpływa na szerokość, wypełnia kolumnę ustaloną przez kopię */
.autosize__sizer { min-width: 1ch; }
.autosize__sizer { visibility: hidden; white-space: pre; padding-right: 1px; }

/* ---------- amount_field i segmented_control (cena przy przyjęciu) ---------- */
.price_editor { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding: var(--space-10) 0; }
.amount_field { display: flex; align-items: center; justify-content: center; gap: var(--space-6); min-width: 220px; height: 60px; padding: var(--space-10) var(--space-20); border-radius: var(--radius-md);
  background: var(--color-bg-surface); border: var(--border_width-regular) solid var(--color-border-strong); }
.amount_field__number { font: 400 30px/var(--line-height-auto) var(--font-family); }
.amount_field__value { border: 0; outline: 0; background: transparent; padding: 0; margin: 0; text-align: right; color: var(--color-text-primary); }
.amount_field__value::placeholder { color: var(--color-text-disabled); opacity: 1; }
.amount_field__currency { font: 400 30px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.amount_field--suggested .amount_field__currency { color: var(--color-text-disabled); }
.segmented_control { display: flex; width: 100%; height: 50px; border-radius: var(--radius-md); overflow: hidden; margin: 0; padding: 0;
  border: var(--border_width-regular) solid var(--color-border-default); min-inline-size: 0; }
.segmented_control__option { flex: 1 1 0; min-width: 0; display: flex; position: relative; }
.segmented_control__option + .segmented_control__option { border-left: var(--border_width-regular) solid var(--color-border-default); }
.segmented_control__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented_control__option span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-10);
  background: var(--color-bg-subtle); color: var(--color-text-tertiary); font: 400 20px/var(--line-height-auto) var(--font-family); cursor: pointer; }
.segmented_control__option input:checked + span { background: var(--color-bg-accent); color: var(--color-text-on_brand); font-weight: 500; } /* 20 medium wybrany, 20 regular niewybrany */
.segmented_control__option input:focus-visible + span { outline: 2px solid var(--color-border-strong); outline-offset: -4px; }

/* ---------- overlay: confirmation_overlay i action_overlay (okno nad ekranem z przyciemnieniem) ---------- */
.overlay_scrim { position: fixed; inset: 0; z-index: 50; background: var(--color-bg-scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-20); }
.overlay_scrim[hidden] { display: none; }
/* otwarta lista (select_field, lejek): reszta ekranu przyciemniona o 25% (reguła z 14 października 2026) */
.list_scrim { position: absolute; inset: 0; z-index: 20; background: var(--color-bg-scrim); pointer-events: none; } /* tylko wygląd – nie przejmuje dotknięć */
.list_scrim[hidden] { display: none; }
.screen--select_open .work_area { position: relative; z-index: 25; }
.screen--select_open .select_field__list:not([hidden]) { box-shadow: 0 0 0 100vmax var(--color-bg-scrim), 0 4px 16px rgba(0, 0, 0, .12); }
.overlay_card { width: 320px; max-width: 100%; background: var(--color-bg-surface); border-radius: var(--radius-xl); overflow: hidden; }
.confirmation_overlay__title { margin: 0; min-height: 70px; padding: 0 var(--space-20); display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-brand_secondary); text-align: center; font: 500 30px/var(--line-height-auto) var(--font-family); color: var(--color-text-on_brand); }
.confirmation_overlay__summary { padding: var(--space-30) var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.confirmation_overlay__primary { font: 700 30px/var(--line-height-auto) var(--font-family); color: var(--color-text-secondary); }
.confirmation_overlay__details { font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.confirmation_overlay__meta { font: 700 24px/var(--line-height-auto) var(--font-family); color: var(--color-text-secondary); }
.confirmation_overlay__actions { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-10); }
.confirmation_overlay__actions .button, .action_overlay .button { display: flex; width: 100%; }
.action_overlay { padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-10); }
.action_overlay__form { margin: 0; }
.action_overlay__note { margin: calc(-1 * var(--space-6)) 0 0; text-align: center; font: 400 14px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }

/* ---------- item_operation_form (ekran pozycji: zdjęcie, nazwa, dostawca, jednostka, ilość, cena) ----------
   Mieści się w obszarze roboczym bez przewijania: części stałej wysokości, zdjęcie wypełnia resztę i maleje (propozycja 69,
   jak w Figmie: item_image FILL). Przewijanie dopiero, gdy nie mieści się nawet bez zdjęcia (np. z klawiaturą). */
.work_area > form:has(> .item_operation_form) { flex: 1 1 0; display: flex; flex-direction: column; }
.item_operation_form { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-20); } /* 40 od krawędzi ekranu */
.item_operation_form__media { flex: 1 1 0; min-height: 0; width: 100%; position: relative; } /* zdjęcie poza przepływem: nie wymusza wysokości */
.item_operation_form__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); }
.item_operation_form__detail { padding: var(--space-10) 0 0; width: 100%; }
.item_operation_form__quantity { padding: var(--space-10) 0; }
/* jednostka nad ilością, pełną nazwą, 30 medium; ze strzałką, gdy jest jednostka alternatywna */
/* dostawca i jednostka – select_field na całą szerokość (propozycja 146) */
.item_operation_form__quantity { width: 100%; }
.item_operation_form .price_editor { width: 100%; }

.price_editor .segmented_control { width: 220px; }

/* ---------- select_field: pole wyboru z rozwijaną listą NOMIA (propozycje 56, 73) ----------
   zamknięte wygląda jak text_field; po dotknięciu lista zastępuje pole (leży na treści poniżej), pierwszy wiersz:
   wartość ze strzałką w górę albo – od 8 opcji – wyszukiwarka; X kasuje wyszukiwanie; 5 opcji widać naraz */
.select_field { position: relative; display: flex; flex-direction: column; gap: var(--space-6); }
.select_field[hidden] { display: none; }
.select_field__box { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 50px; padding: 13px var(--space-20); margin: 0;
  background: var(--color-bg-surface); border: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-default);
  font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); text-align: left; cursor: pointer; }
.select_field__box .icon { color: var(--color-icon-muted); }
.select_field__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select_field--empty .select_field__value { color: var(--color-text-disabled); }
.select_field--empty .select_field__box { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-subtle); }
.select_field--error .select_field__box { box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-error); }
.select_field--error .select_field__value, .select_field--error .text_field__helper, .select_field--error .select_field__box .icon { color: var(--color-text-error); }
.select_field__list { position: absolute; left: 0; right: 0; top: var(--select-top, 0); z-index: 30; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg-surface); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
/* ramka listy jako osobna warstwa nad opcjami – tło wybranej opcji jej nie przerywa (pkt 27) */
.select_field__list::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 var(--border_width-regular) var(--color-border-strong); }
.select_field__list[hidden] { display: none; }
.select_field__head { display: flex; align-items: center; gap: var(--space-12); min-height: 50px; padding: 13px var(--space-20);
  border-bottom: var(--border_width-thin) solid var(--color-border-default); font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.select_field__head .icon { color: var(--color-icon-muted); }
.select_field__search { display: none; flex: 1; align-items: center; gap: var(--space-12); min-width: 0; }
.select_field--searchable .select_field__search { display: flex; }
.select_field--searchable .select_field__current { display: none; }
.select_field__current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select_field__query { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font: inherit; color: var(--color-text-primary); }
.select_field__query::placeholder { color: var(--color-text-disabled); opacity: 1; }
.select_field__clear, .select_field__close { border: 0; background: none; padding: 0; margin: -10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.select_field__clear[hidden], .select_field__close[hidden] { display: none; }
.select_field__options { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; } /* 5 opcji po 60 px */
.select_field__options .select_option { font-size: 20px; } /* jak wartość w polu */
.select_field__options .select_option[hidden] { display: none; }

/* ---------- text_area (dłuższy tekst; propozycja 75) ---------- */
.text_area__input { resize: none; min-height: 72px; max-height: 192px; overflow-y: auto; line-height: 24px; } /* 3 wiersze, rośnie (ui.js) do 8 */

/* ---------- date_field / time_field (propozycje 76–77, 85): nasz format na polu, systemowy wybór pod spodem ---------- */
.date_field__display { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.date_field--empty .date_field__display { color: var(--color-text-disabled); }
.text_field--error .date_field__display { color: var(--color-text-error); }
.date_field__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0.011;
  -webkit-appearance: none; appearance: none; background: transparent; color: transparent; font-size: 16px; cursor: pointer; } /* przezroczyste, nad polem – dotknięcie otwiera wybór telefonu */
.date_field__input::-webkit-datetime-edit { opacity: 0; }
.date_field__input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.date_time_field { display: flex; flex-direction: column; gap: var(--space-6); }
.date_time_field[hidden] { display: none; }
.date_time_field__row { display: flex; gap: var(--space-10); }
.date_time_field__row > .date_field { flex: 1 1 0; min-width: 0; }
.date_time_field__row > .date_field--time { flex: 0 0 140px; }

/* ---------- weekday_selector (propozycja 79) i segmented_control z wieloma wyborami ---------- */
.weekday_selector { display: flex; flex-direction: column; gap: var(--space-6); }
.weekday_selector[hidden] { display: none; }
.segmented_control--multiple .segmented_control__option span { padding: var(--space-10) 0; }

[data-show-when][hidden] { display: none !important; } /* pola zależne od wyboru (rodzaj zadania, jak często) */
.select_field__empty { padding: var(--space-12) var(--space-20); font: 400 16px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }
.select_field__empty[hidden] { display: none; }

/* ---------- inwentaryzacja (§5.3.1): wynik z wagi, lista pomiarów pozycji, skaner kodów ---------- */
/* lista pomiarów w inwentaryzacji (measurement_row, 14 października 2026): wynik (osoba) | x */
.measurement_list { display: flex; flex-direction: column; }
.measurement_row { display: flex; align-items: center; gap: var(--space-12); margin: 0; padding: var(--space-12) 0;
  border-bottom: var(--border_width-thin) solid var(--color-border-subtle); font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.measurement_row__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.measurement_row__who { color: var(--color-text-tertiary); }
.measurement_row__remove { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px;
  border: 0; background: none; padding: 0; color: var(--color-icon-primary); cursor: pointer; }
.measurement_row__remove .icon { width: 20px; height: 20px; }
/* „×” biały na czerwonej plakietce (badge remove), usunięcie przytrzymaniem 1 s z obwódką (propozycja 212) */
.badge--remove { width: 32px; height: 32px; min-width: 32px; padding: 0; color: var(--color-icon-on_brand); }
.measurement_row__remove.bottom_action--hold::after { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.scanner { position: relative; flex: 1 1 0; min-height: 240px; border-radius: var(--radius-md); overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.scanner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner__frame { position: relative; width: 70%; aspect-ratio: 3 / 2; border: 2px solid #fff; border-radius: var(--radius-md); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); }
.scanner__hint { position: absolute; left: var(--space-20); right: var(--space-20); bottom: var(--space-20); margin: 0; text-align: center; color: #fff;
  font: 400 16px/var(--line-height-auto) var(--font-family); }
.scanner--off .scanner__video, .scanner--off .scanner__frame { display: none; }

/* difference_row (propozycja 208, 15 października 2026): podsumowanie inwentaryzacji w widoku listy – nazwa, pod nią
   „powinno być / policzono” (regular / medium), różnica po prawej (brak czerwony, nadwyżka zielona) */
.difference_rows { display: flex; flex-direction: column; }
.difference_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); row-gap: 4px;
  padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border-subtle); color: inherit; text-decoration: none; }
.difference_row[hidden] { display: none; }
.difference_row__label { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.difference_row__values { grid-column: 1; white-space: nowrap; font: 400 16px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }
.difference_row__counted { font-weight: 500; color: var(--color-text-primary); }
.difference_row__diff { grid-column: 2; white-space: nowrap; text-align: right; font: 500 16px/var(--line-height-auto) var(--font-family); color: var(--color-text-tertiary); }
.difference_row--shortage .difference_row__diff { color: var(--color-text-error); }
.difference_row--surplus .difference_row__diff { color: var(--color-text-success); }
.difference_row--not_counted .difference_row__counted { color: var(--color-text-tertiary); font-weight: 400; }
/* inwentaryzacja kategorii: siatka (do policzenia) albo lista (podsumowanie) – ten sam ekran, przełączany jak wszędzie (194);
   ✓ w środku: w siatce przełącza na listę, w liście zatwierdza */
.only_grid, .only_list { display: contents; }
.screen--list .only_grid, .screen:not(.screen--list) .only_list { display: none; }
.screen--list .item_grid.inventory_grid, .screen--list .inventory_grid_empty { display: none; }
.screen:not(.screen--list) .difference_rows, .screen:not(.screen--list) .difference_rows_empty { display: none; }
/* podgląd zatwierdzonej inwentaryzacji (216): lista widoczna niezależnie od widoku siatki / listy */
.screen:not(.screen--list) .difference_rows.difference_rows--view { display: flex; }

/* nagłówek zamkniętego dokumentu (235): data / numer / dostawca, kreska pod spodem */
.document_header { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-12); border-bottom: var(--border_width-thin) solid var(--color-border-subtle); }
.document_header__line { margin: 0; font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-text-primary); }
.document_header__line--first { font: 500 24px/var(--line-height-auto) var(--font-family); }

/* dopisek tytułu w widoku listy (np. „Inwentaryzacja · suma”, 16 października 2026) */
.screen--list .title_bar__title[data-list-suffix]::after { content: attr(data-list-suffix); }

/* tryb pisania (249): przy otwartej klawiaturze w polu obszaru roboczego zostaje tylko ostatnia belka */
html.typing .screen__top > :not(.typing_keep) { display: none; }

/* komunikat końcowy (248): pierwszy wiersz – czynność – w medium (17 października 2026) */
[data-done] .toast::first-line { font-weight: 500; }

/* belka produktu (263, 267): nazwa i ilość jako osobne pola dotyku; ilość nieaktywna – przygaszona */
.title_bar__title--link, .title_bar__quantity--link { color: inherit; text-decoration: none; }
.title_bar__quantity--inactive { opacity: .45; }
/* dokument (269) */
.document_body { color: var(--color-text-primary); font: 400 16px/1.4 var(--font-family); }
.document_body h2 { font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.document_body h3 { font-weight: 500; font-size: 18px; margin: 16px 0 4px; }
.document_body p { margin: 0 0 8px; }
.document_body ul, .document_body ol { margin: 0 0 8px; padding-left: 22px; }
.document_body__meta { font-size: 13px; opacity: .6; margin: 0 0 12px; }
.print_only { display: none; }
/* 277: wydruk opisu produkcji – sam dokument (z tytułem), bez nagłówka, belek i dolnego paska */
@media print {
  .screen__top, .screen__bottom, .toast_area, .search_bar { display: none !important; }
  .print_only { display: block; }
  html, body, .screen, .work_area { background: #fff !important; height: auto !important; overflow: visible !important; }
  .work_area { padding: 0 !important; position: static !important; }
  .document_body { color: #000; font-size: 12pt; }
}

/* ---------- month_calendar, calendar_day (461: grafik na telefonie, Figma schedule_month) ---------- */
.month_calendar { display: flex; flex-direction: column; gap: 10px; color: var(--color-primary-100); }
.month_calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--color-primary-60); }
.month_calendar__weekday { text-align: center; font-size: 20px; line-height: 24px; color: var(--color-primary-80); }
.month_calendar__weekday--bold { font-weight: 700; }
.month_calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar_day { height: 68px; min-width: 0; border-radius: 8px; border: 1px solid var(--color-primary-60); background: #fff;
  display: flex; flex-direction: column; overflow: hidden; }
.calendar_day--empty { border: 0; background: none; }
:where(a).calendar_day { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* 479d: dzień dzisiejszy i miniony – ekran dnia; :where – kolory dnia (dziś, miniony) wygrywają */
.calendar_day--shift { background: var(--color-primary-10); }
.calendar_day__row { display: flex; justify-content: space-between; padding: 4px 6px; height: 26px; box-sizing: border-box;
  border-bottom: 1px solid var(--color-primary-40); font-size: 14px; line-height: 17px; font-weight: 700; }
.calendar_day__hours { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; /* 464f: godziny pośrodku */
  padding: 6px; font-size: 12px; line-height: 15px; }
.calendar_day--past { color: var(--color-primary-40); }
.calendar_day--today { background: var(--color-primary-80); border-color: var(--color-primary-80); color: #fff; }
.calendar_day--today .calendar_day__row { border-bottom-color: #fff; }
.calendar_day--leave { background: var(--color-green-50); border-color: var(--color-green-500); } /* 464e: urlop */
.calendar_day--leave .calendar_day__row { border-bottom-color: var(--color-green-500); }
.calendar_day--leave { color: var(--color-green-500); } /* 465, 466: data i opis urlopu zielone */
.calendar_day--request { color: var(--color-orange-500); } /* 465, 466: wniosek – data i opis pomarańczowe */
.calendar_day--request { background: var(--color-orange-50); border-color: var(--color-orange-500); }
.calendar_day--request .calendar_day__row { border-bottom-color: var(--color-orange-500); }
.month_calendar__summary { display: flex; flex-direction: column; gap: 2px; padding-top: 10px;
  border-top: 1px solid var(--color-primary-60); }
.month_calendar__summary strong { font-size: 16px; line-height: 19px; }
.month_calendar__summary span { font-size: 14px; line-height: 17px; color: var(--color-primary-80); }
/* 462: belka miesiąca „< miesiąc >” – miesiąc pośrodku, strzałki po bokach (pole dotyku 44 × 54) */
.month_bar { justify-content: space-between; padding: 0 10px; }
.month_bar__title { flex: 1 1 auto; text-align: center; }
.month_bar__arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 54px; color: inherit; }
.month_bar__arrow--prev .icon { transform: scaleX(-1); }
.calendar_day--holiday { border-width: 2.5px; } /* 471: święto – grubsza ramka (nazwa pod podsumowaniem) */

/* ---------- rcp (477: rejestracja czasu, Figma rcp_*; 478a: style według rcp_working_second) ---------- */
.rcp { display: flex; flex-direction: column; gap: var(--space-20); }
.rcp__block { display: flex; flex-direction: column; gap: 4px; }
.rcp__label { font: 400 20px/var(--line-height-auto) var(--font-family); color: var(--color-primary-60); }
.rcp__planned { font: 700 32px/1.2 var(--font-family); color: var(--color-primary-60); }
.rcp__info { margin: 12px 0 0; font: 400 16px/1.35 var(--font-family); color: var(--color-primary-100); }
.rcp__segment { font: 700 32px/1.25 var(--font-family); color: var(--color-primary-100); font-variant-numeric: tabular-nums; }
.rcp--running .rcp__segment { color: var(--color-primary-60); } /* 479a: w trakcie – zamknięte odcinki przygaszone */
.rcp--running .rcp__segment--running { color: var(--color-primary-100); }
.rcp__dots span { animation: rcp_dot 1.4s infinite; opacity: .15; }
.rcp__dots span:nth-child(2) { animation-delay: .25s; }
.rcp__dots span:nth-child(3) { animation-delay: .5s; }
@keyframes rcp_dot { 0%, 20% { opacity: .15; } 40%, 100% { opacity: 1; } }
.rcp__notice { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg-warning_subtle);
  box-shadow: inset 0 0 0 var(--border_width-thin) var(--color-border-warning); color: var(--color-text-warning);
  font: 600 16px/1.3 var(--font-family); }
.rcp_clock { font: 400 24px/1 var(--font-family); font-variant-numeric: tabular-nums; color: var(--color-primary-40); }
.rcp_clock--running { color: var(--color-text-on_brand); }
.rcp_clock--running .rcp_clock__colon { animation: rcp_colon 1s steps(1) infinite; }
@keyframes rcp_colon { 50% { opacity: 0; } }

/* 485: postęp przytrzymania – linia 4 px na górnej krawędzi dolnego paska (obwódkę wokół ikony zasłaniał palec) */
.bottom_bar { position: relative; }
.bottom_bar::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--color-primary-40);
  pointer-events: none; }
.bottom_bar--holding::before { animation: hold_line var(--hold-ms, 1s) linear forwards; }
.bottom_bar--held::before { width: 100%; animation: hold_flash .3s steps(2) 1; }
@keyframes hold_line { from { width: 0; } to { width: 100%; } }
@keyframes hold_flash { 50% { opacity: 0; } }
.bottom_bar--holding { box-shadow: inset 0 4px 0 var(--color-primary-90); } /* tło linii */
.bottom_action--line.bottom_action--hold::after { display: none; } /* bez obwódki, gdy jest linia */

/* 492: wąski ekran (np. iPhone z powiększeniem strony / „Większy tekst”) – dolny pasek bez wychodzenia poza ekran */
.rcp_clock { white-space: nowrap; font-size: min(24px, 7vw); }
@media (max-width: 340px) {
  .bottom_bar { padding: 0 var(--space-12); }
  .bottom_bar__actions { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.bottom_action[hidden] { display: none; } /* 479b: słoneczko – dopiero po zaznaczeniu dnia */

/* 503: dotknięcie logo odświeża ekran – logo krótko przygasa */
.header__logo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.header__logo--refresh { opacity: .45; transition: opacity .15s; }