/* FORTUNA CMMS — reguly wspolne dla calej aplikacji
   Sesja 178 (2026-09-07). Powod: na telefonie tap/przytrzymanie napisu
   (np. kafelek "Tablica robot" na dashboardzie) zaznaczalo tekst i podnosilo
   menu "Kopiuj / Udostepnij" — przy obsludze palcem to przeszkadza w klikaniu.

   Zasada: NIC w aplikacji nie jest zaznaczalne POZA polami, w ktorych sie pisze.
   Gdyby kiedys jakis fragment mial byc do skopiowania (np. numer zlecenia),
   wystarczy dac mu klase "zaznaczalne" — wyjatek jest juz przygotowany nizej. */

*,
*::before,
*::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* iOS: brak menu po dlugim przytrzymaniu */
  -webkit-tap-highlight-color: transparent;  /* Android: brak szarego blysku po tapnieciu */
}

/* Pola edycyjne MUSZA zostac zaznaczalne — inaczej nie da sie poprawic wpisu */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
.zaznaczalne,
.zaznaczalne * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Wydruk: na kartce nic sie nie zaznacza, ale w podgladzie PDF na desktopie
   zaznaczanie bywa potrzebne do sprawdzenia tresci — zostawiamy tekst wolny */
@media print {
  * { -webkit-user-select: text; user-select: text; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ETYKIETA POLA FORMULARZA — jedno miejsce dla calej aplikacji (sesja 189).
   Powod: ta sama etykieta miala trzy rozne rozmiary na trzech stronach, wszystkie
   w kroju ZWEZONYM i wersalikami — przy 0.72rem litery zlewaly sie w pasek.
   Zgloszone przez Darka z testu na hali.

   Plik jest linkowany PO stylach strony, wiec te reguly wygrywaja bez !important
   i bez ruszania markupu. Deklarujemy wylacznie typografie i margines — `display`
   zostaje stronom, bo bhp/nowe ma etykiety flexowe z ikonka.

   Nowa strona: uzyj klasy `.etykieta`. Nazwy `.rz-label` i `.field-label` sa tu
   wylacznie po to, zeby nie przepisywac 30 istniejacych uzyc.
   Kontrola: python3 skrypty/sprawdz_etykiety.py
   ───────────────────────────────────────────────────────────────────────────── */
.etykieta,
.rz-label,
.field-label {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   WYBOR LINII I MASZYNY — wyglad listy, jedno miejsce dla calej aplikacji (s.193).
   Standard opisany w `wzorce/standard_wybor_linii_maszyny.md`.
   Kontrola: python3 skrypty/sprawdz_wybor_maszyny.py

   Powod: te klasy byly skopiowane do trzech stron i rozjechaly sie —
   kafelek linii mial ramke 2 px albo 1 px, a nazwa maszyny 18 px albo 15 px,
   zaleznie od tego, ktory formularz czlowiek akurat otworzyl.

   Zmienne podane z zapasem (`--fortuna-*` -> krotka nazwa -> wartosc), bo strony
   uzywaja obu konwencji. Krój: `Barlow` — `Barlow Condensed` zszedl w s.191.
   ───────────────────────────────────────────────────────────────────────────── */

/* s.223 (decyzja Darka): kafelki ukladaja sie KOLUMNAMI — najpierw cala lewa kolumna od gory do dolu, potem prawa.
   Wczesniej siatka wypelniala sie RZEDAMI (1. w lewo, 2. w prawo…), wiec posortowana lista czytana w dol kolumny wygladala
   na pomieszana. Dwie kolumny robi `column-count`; tytuly, podpowiedzi, szukajka i kazdy element z inline `grid-column`
   rozciagaja sie na cala szerokosc (`column-span: all`). Siatki z WLASNYM ukladem (jedna kolumna, trzy kolumny)
   przywracaja `display: grid`, `--lk-mb: 0` i `--lk-after: none` — patrz `.elm-filtry`, pickery w maszyny/lista, filtry w awarie/lista i dashboard-technik. */
.linie-kafelki {
  display: block;
  column-count: 2;
  gap: 8px;
  margin-bottom: 12px;
  --lk-mb: 8px;
}
.linie-kafelki > button.linia-kafel { display: block; width: 100%; }
.linie-kafelki > .linia-kafel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--lk-mb, 0);
}
.linie-kafelki > .kafel-wybor { break-inside: avoid; }
/* Ostatni kafelek dokladalby swoje 8 px marginesu pod lista. Pusty blok z ujemnym marginesem laczy sie z nim (margin collapse)
   i zeruje te 8 px — niezaleznie od tego, jaki margines kontenera ustawia strona. */
.linie-kafelki:has(> .linia-kafel)::after { content: ''; display: var(--lk-after, block); height: 0; margin-top: calc(-1 * var(--lk-mb, 0px)); }
.linie-kafelki > [style*="grid-column"],
.linie-kafelki > .linia-kafel.jedyny,
.linie-kafelki > .wl-szukaj,
.linie-kafelki > .wl-pusto,
.linie-kafelki > .maszyny-pusto,
.linie-kafelki > .lin-pusto {
  column-span: all;
}
.linia-kafel {
  background: var(--fortuna-surface2, var(--surface2, #16161f));
  border: 2px solid var(--fortuna-border, var(--border, rgba(255,255,255,.14)));
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fortuna-text, var(--text, #e8e8ef));
  cursor: pointer;
  min-width: 0;
  overflow-wrap: break-word;
}
.linia-kafel.active {
  border-color: var(--fortuna-amber, var(--amber, #f4a261));
  background: rgba(244,162,97,.14);
  color: var(--fortuna-amber, var(--amber, #f4a261));
}
.linia-kafel.jedyny { grid-column: 1 / -1; }
.linia-zmien {
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
  flex-shrink: 0;
}
.kafel-wybor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(244,162,97,.14);
  border: 2px solid var(--fortuna-amber, var(--amber, #f4a261));
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fortuna-amber, var(--amber, #f4a261));
  text-align: left;
  min-width: 0;
}
.kafel-wybor > span:first-child {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.kafel-wybor.pusty {
  border-color: var(--fortuna-border, var(--border, rgba(255,255,255,.14)));
  background: var(--fortuna-surface2, var(--surface2, #16161f));
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
  justify-content: center;
}
.pole-maszyna { position: relative; }
.maszyny-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.maszyna-btn {
  background: var(--fortuna-surface2, var(--surface2, #16161f));
  border: 2px solid var(--fortuna-border, var(--border, rgba(255,255,255,.14)));
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  min-width: 0;
}
.maszyna-nazwa {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--fortuna-text, var(--text, #e8e8ef));
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.maszyna-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}
.maszyna-symbol {
  font-size: 11px;
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.maszyna-linia {
  font-size: 14px;
  font-weight: 800;
  color: #e08828;
  white-space: nowrap;
  flex-shrink: 0;
}
.maszyny-loading,
.maszyny-pusto {
  grid-column: 1 / -1;
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
  font-size: 14px;
  padding: 20px;
  text-align: center;
}
.pokaz-maszyny-btn {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--fortuna-surface2, var(--surface2, #16161f));
  border: 2px dashed var(--fortuna-border, var(--border, rgba(255,255,255,.14)));
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fortuna-muted, var(--muted, #8a8a9e));
}
.pokaz-maszyny-btn:active,
.maszyna-btn:active,
.linia-kafel:active { transform: scale(0.98); }

/* Wybrana maszyna — ten sam bursztyn co przy wybranej linii i w kafelku wyboru.
   Warsztat mial tu wlasny niebieski (`--accent`); po scaleniu wszystkie trzy
   formularze mowia jednym kolorem „to jest wybrane" (s.193). */
.maszyna-btn.active {
  border-color: var(--fortuna-amber, var(--amber, #f4a261));
  background: rgba(244,162,97,.12);
}

/* Podswietlenie myszka TYLKO tam, gdzie mysz istnieje — na dotyku pierwszy tap
   zuzylby sie na `:hover` zamiast na klikniecie (PUŁAPKA-223). */
@media (hover: hover) and (pointer: fine) {
  .linia-kafel:hover,
  .maszyna-btn:hover {
    border-color: var(--fortuna-amber, var(--amber, #f4a261));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAGLOWEK: imie i nazwisko MUSI sie zmiescic (s.197, zgloszenie Darka)
   ══════════════════════════════════════════════════════════════════════════
   „gorne menu, tam gdzie imie i nazwisko zalogowanego, wystaje poza obszar —
   czcionki rozjechaly sie po zmianie kilka sesji temu."

   Przyczyna: s.191 zdjela `Barlow Condensed` na rzecz `Barlow`, ktory przy tym
   samym stopniu pisma jest SZERSZY. Nazwiska, ktore wczesniej sie miescily,
   przestaly — a `.user-chip` ma na stronach `flex-shrink:0`, wiec nie umial sie
   zwezic, tylko wypychal tresc poza naglowek.

   Zmierzone najdluzszym nazwiskiem Z BAZY („Przemyslaw Rychlinski", 21 znakow,
   `skrypty/css_s197_sonda_szerokosci.js`): chip 199-211 px w naglowku 390 px,
   czyli do 98 px poza krawedz, na 16 stronach. Objaw to UCIETE NAZWISKO, nie
   przesunieta strona: naglowek jest `sticky`/`fixed`, wiec jego nadmiar nie rusza
   `scrollWidth` — pomiar szerokosci strony tego NIE widzi i dlatego chodzilo to
   niezauwazone od s.191.

   Dlaczego tutaj, a nie na 16 stronach: `app.css` jest wpiety PO wewnetrznym
   <style> kazdej strony, wiec te reguly wygrywaja z per-stronowym
   `.user-chip{flex-shrink:0}` bez `!important`. Jedno miejsce, nie szesnascie.  */
.top-header { min-width: 0; }

/* Kazde dziecko naglowka moze zejsc ponizej swojej tresci. Samo `min-width:0`
   NIE zmusza do zwezania — wlacza je dopiero tam, gdzie `flex-shrink` na to pozwala,
   wiec przycisk wstecz i logo (oba z `flex-shrink:0`) zostaja nietkniete. */
.top-header > * { min-width: 0; }

/* Sedno poprawki, znalezione POMIAREM, nie z kodu: strony owijaja dzwonek razem
   z chipem w <div> z `flex-shrink:0` (zmierzone: rodzic shrink:0, szerokosc
   207-257 px w naglowku 390 px). Dopoki ta GRUPA nie oddaje szerokosci, sam
   `flex-shrink` na chipie nic nie daje — chip nigdy nie jest zmuszony sie zwezic.
   Pierwsza wersja tej poprawki celowala tylko w chip i naprawila 6 stron z 17. */
.top-header > div:has(.user-chip) { flex-shrink: 1 !important; }
/* `!important` jest tu konieczne i jest to jego wlasciwe uzycie: blokada siedzi
   w ATRYBUCIE `style` markupu (`<div style="...flex-shrink:0;">` — pieciu
   dashboardow), a styl inline bije kazdy arkusz. Alternatywa byla edycja markupu
   na pieciu stronach, ale ten sam wzorzec wraca przez kopiuj-wklej na kolejnej
   i blad wracalby po cichu; regula tutaj chroni takze strony jeszcze nienapisane.
   Waska z rozmyslu: jedna wlasnosc, jeden selektor. Pilnuje tego
   `skrypty/css_s197_sonda_szerokosci.js`. */

.user-chip {
  flex-shrink: 1;          /* strony maja tu 0 — chip nie mogl oddac szerokosci */
  min-width: 0;            /* bez tego flex-item nie zejdzie ponizej swojej tresci */
  overflow: hidden;
}
/* Avatar trzyma rozmiar — kurczy sie WYLACZNIE tekst (PUŁAPKA-100: avatar
   w `user-chip` ma jawne px, nigdy procent wysokosci). */
.user-chip > .user-avatar { flex-shrink: 0; }

/* Kolumna z nazwiskiem i rola. Rola ma na czesci stron `id="user-role"`,
   a na czesci jest bezimiennym <div> — dlatego celujemy w KAZDE dziecko
   tej kolumny, nie w id. */
.user-chip > div:not(.user-avatar) { min-width: 0; }
.user-chip > div:not(.user-avatar) > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   STRONA NIE MA JECHAC W BOK (s.197 — PUŁAPKA-395 na komplecie stron)
   ══════════════════════════════════════════════════════════════════════════
   „przy trzymaniu palcem ekranu strona przesuwa sie prawo-lewo."

   Mechanizm (s.196, wtedy zalatany TYLKO na `tablica.html`): strona ze swiadomie
   szerokim, poziomo przewijanym blokiem — kanban tablicy, pasek zdjec `.foto-pasek`
   na karcie zlecenia, rzedy kafelkow na dashboardach — pozwala CALEJ stronie
   gumowac w bok, a `position:sticky` naglowek jedzie razem z nia, bo chroni
   wylacznie os, ktora deklaruje (`top`).

   Zmierzone: dziewiec stron ma poziomo przewijane dziecko BEZ tego zabezpieczenia
   (`css_s197_sonda_szerokosci.js`).

   Zakres `@media screen` do 1024 px jest celowy: to blad dotykowy, a cztery widoki
   `wydruk.html` maja prawo byc szersze od ekranu na komputerze i na papierze —
   globalne `hidden` przycielo by im tabele. */
@media screen and (max-width: 1024px) {
  html, body { overflow-x: hidden; }
}