/* =========================================================================
   Panel Kocher+Beck — style własne.
   Kolory i typografia pobrane ze strony kocher-beck.com, gęstość układu
   wzorowana na HydraSys (panele z paskiem tytułu, lewa nawigacja, zwarte
   odstępy). Żadnych zasobów z zewnętrznych serwerów — font jest lokalnie,
   więc panel działa też bez dostępu do internetu.
   ========================================================================= */

@font-face { font-family:"Hind Siliguri"; src:url("fonts/HindSiliguri-Regular.woff2") format("woff2");  font-weight:400; font-display:swap; }
@font-face { font-family:"Hind Siliguri"; src:url("fonts/HindSiliguri-Medium.woff2") format("woff2");   font-weight:500; font-display:swap; }
@font-face { font-family:"Hind Siliguri"; src:url("fonts/HindSiliguri-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Hind Siliguri"; src:url("fonts/HindSiliguri-Bold.woff2") format("woff2");     font-weight:700; font-display:swap; }

/* „KB Cyfry” — same cyfry i znaki liczb z Source Sans 3 (Adobe, SIL OFL 1.1; licencja w fonts/KbCyfry-OFL.txt).
   Hind Siliguri nie ma cyfr równej szerokości (brak tnum, „1” = 323, „0” = 544 jednostek), więc kwoty w kolumnach
   się rozjeżdżały, a 43 deklaracje tabular-nums nic nie robiły. Tu cyfry mają jedną szerokość (497/513/528),
   prawie tę samą co średnia Hind, więc kolumny nie puchną. unicode-range bez spacji: wysokość wiersza zostaje
   z Hind. size-adjust 102% = wysokość „0” w Hind (662) do Source Sans 3 (650). Nazwa inna niż „Source”,
   bo licencja zastrzega tę nazwę dla wersji zmienionych (przycięcie to zmiana). Audyt wyglądu 16.09.2026. */
@font-face { font-family:"KB Cyfry"; src:url("fonts/KbCyfry-400.woff2") format("woff2"); font-weight:400; font-display:swap; size-adjust:102%;
             unicode-range:U+0025,U+002B-002E,U+0030-003A,U+00A0,U+2009,U+202F,U+2212; }
@font-face { font-family:"KB Cyfry"; src:url("fonts/KbCyfry-600.woff2") format("woff2"); font-weight:500 600; font-display:swap; size-adjust:102%;
             unicode-range:U+0025,U+002B-002E,U+0030-003A,U+00A0,U+2009,U+202F,U+2212; }
@font-face { font-family:"KB Cyfry"; src:url("fonts/KbCyfry-700.woff2") format("woff2"); font-weight:700 900; font-display:swap; size-adjust:102%;
             unicode-range:U+0025,U+002B-002E,U+0030-003A,U+00A0,U+2009,U+202F,U+2212; }

:root {
    /* marka */
    --kb-czerwony: #d4282f;
    --kb-czerwony-ciemny: #b02026;
    /* Alias marki uzywany przez ekrany produkcji. Bez niego reguły z var(--kb-akcent)
       byly martwe i aktywny przycisk niczym sie nie roznil od nieaktywnego. */
    --kb-akcent: #d4282f;
    --kb-grafit: #3a3429;
    --kb-grafit-jasny: #4d4638;

    /* tło i linie */
    --kb-tlo: #f1f3f5;
    --kb-panel: #ffffff;
    --kb-pasek: #f7f8f9;
    --kb-linia: #dcdee1;
    --kb-linia-mocna: #bfc0c1;

    /* tekst */
    --kb-tekst: #3a3429;
    --kb-szary: #66625a;          /* było #707070: 4,45:1 na tle strony, poniżej normy; teraz 5,46:1 */
    --kb-tekst-drugi: #5f5a50;   /* drugorzedny tekst — bylo tylko w zapasach var(), przez co dwa miejsca dziedziczyly kolor */

    /* stany */
    --kb-ok: #2e7d32;
    --kb-uwaga: #c77700;          /* TYLKO paski, krawędzie, serie wykresów — jako tekst ma 3,1:1 */
    --kb-blad: #b02026;           /* alarm w danych; czerwień marki #d4282f zostaje dla ramy i nawigacji */

    /* Tekst i tła stanów — kontrast liczony wzorem WCAG 2.x (audyt wyglądu 16.09.2026). */
    --kb-uwaga-tekst: #8a5200;    /* 5,85:1 na --kb-uwaga-tlo */
    --kb-uwaga-tlo: #fdf4e3;
    --kb-ok-tekst: #256a29;       /* 5,99:1 na --kb-ok-tlo */
    --kb-ok-tlo: #edf6ee;
    --kb-blad-tlo: #fdf0f0;       /* #b02026 na nim 6,13:1 */

    /* Komunikat wyjaśniający („tak to policzyliśmy") — chłodny błękit, żeby nie mylił się
       ani z ostrzeżeniem, ani z alarmem. #34506a na --kb-info-tlo to 7,4:1. */
    --kb-info-tlo: #eaf0f5;
    --kb-info-linia: #c9d6e0;
    --kb-info-tekst: #34506a;
    --kb-neutral-tlo: #eceef0;
    --kb-proces: #4f6d8a;         /* seria „w realizacji / w produkcji” na wykresach i paskach */
    --kb-anulowane: #8d939a;      /* wypełnienie „anulowane” na paskach i wykresach */
    --kb-ramka-pola: #858b92;     /* obrys pól, chipów i plakietki „w realizacji” — 3,44:1 na bieli */
    --kb-wiersz-hover: #f1f3f5;

    --kb-linia-tabeli: #eceef0;   /* linia między wierszami tabeli — jaśniejsza niż ramka panelu (--kb-linia #dcdee1), bo siatka ma prowadzić oko, a nie konkurować z liczbami */
    --kb-na-grafit: #d9d5cc;      /* nieaktywny tekst na grafitowym pasku — 8,42:1 */

    /* Wysokości przycisków i pól — jedna miara zamiast pięciu. Bez niej każdy ekran
       dobierał swoją (30, 34, 38, 40 px) i paski filtrów się „schodkowały”. */
    --kb-wys-kontrolki: 36px;     /* przyciski i pola w paskach filtrów */
    --kb-wys-formularz: 40px;     /* pola i przyciski w formularzach (logowanie, nowy kontrahent) */
    --kb-wys-dotyk: 44px;         /* palec zamiast myszy — dolna granica wygodnego celu */

    /* Skala liter. Podłoga to 12 px: nic w panelu nie jest mniejsze. */
    --kb-fs-xs: .857rem;          /* 12 px */
    --kb-fs-s: .929rem;           /* 13 px */
    --kb-fs-m: 1rem;              /* 14 px */
    --kb-fs-l: 1.143rem;          /* 16 px */
    --kb-fs-xl: 1.571rem;         /* 22 px */
    --kb-font: "KB Cyfry", "Hind Siliguri", "Segoe UI", Calibri, Arial, sans-serif;

    /* Zmienne używane w arkuszu, których nigdy nie zdefiniowano — reguły z nimi były martwe. */
    --kb-tlo-hover: var(--kb-wiersz-hover);
    --kb-panel-2: var(--kb-pasek);
    --kb-szary-tekst: var(--kb-tekst-drugi);
    --kbb-linia: var(--kb-linia);
    --kbb-tlo: var(--kb-tlo);

    /* Chip i segment: jedna wysokosc dla paska "zalozone filtry", chipow statusu, filtrow magazynu
       i przelacznikow. Na dotyku podnosi ja jedna regula @media (pointer: coarse), a nie kazdy ekran osobno. */
    --kb-chip-h: 32px;
}

* { box-sizing: border-box; }

/* Kontrolki dziedziczą krój i kolor. Bez tego przyciski, pola i listy szły w Arialu przeglądarki
   (karty Kolejki hali, przełączniki, „Nie teraz”, Kompas, okno ponownego połączenia). */
button, input, select, textarea { font: inherit; color: inherit; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--kb-font);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 14px; line-height: 1.45;
    color: var(--kb-tekst); background: var(--kb-tlo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--kb-czerwony); text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus { outline: none; }

/* --- Szkielet ------------------------------------------------------------- */
/* minmax(0, 1fr): kolumna szkieletu nie rośnie razem z najszerszym dzieckiem (1.1.211, R-122 G2). */
.shell { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); }

/* Biały pasek marki nad nawigacją */
.brand-band {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-bottom: 1px solid var(--kb-linia);
    padding: .5rem 1.1rem; height: 56px;
}
.brand-band-link { display: inline-flex; align-items: center; }
.brand-band-link img { height: 34px; width: auto; display: block; }
.brand-band-tag {
    font-size: .857rem; font-weight: 600; letter-spacing: .3px;
    color: var(--kb-grafit); text-transform: uppercase;
}
@media (max-width: 640px) {
    .brand-band { height: 48px; padding: .4rem .9rem; }
    .brand-band-link img { height: 28px; }
    .brand-band-tag { display: none; }
}

.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--kb-grafit); color: #fff;
    padding: 0 1.1rem; height: 52px;
    border-bottom: 3px solid var(--kb-czerwony);
}
.brand { display: flex; align-items: center; gap: .85rem; color: #fff; }
.brand:hover { text-decoration: none; }
.brand img { height: 24px; width: auto; display: block; }
.brand-text {
    font-weight: 500; font-size: .95rem; letter-spacing: .2px;
}

/* --- Zakladki modulow w gornym pasku --------------------------------------
   Lewe menu mowi, GDZIE JESTES; zakladki mowia, GDZIE MOZESZ POJSC. Bez nich
   przejscie z raportu do produkcji wymagalo dwoch klikniec i powrotu do modulu.
   Rozwijanie na czystym CSS (hover + focus-within) — pasek jest renderowany
   statycznie, wiec nie ma tu obwodu interaktywnego, ktory obslugiwalby klikniecia. */
.modnav {
    display: flex; align-items: stretch; align-self: stretch;
    flex: 1 1 auto; min-width: 0; margin-left: .5rem;
}
.modnav-poz { position: relative; display: flex; align-items: stretch; }
.modnav-link {
    display: flex; align-items: center; gap: .2rem;
    padding: 0 .6rem; color: #fff; opacity: .84;
    font-size: .857rem; white-space: nowrap; border-radius: 0;
}
.modnav-link:hover { opacity: 1; background: var(--kb-grafit-jasny); text-decoration: none; }
/* Laptopy 1366–1500 px: 10 zakładek z 12-pikselowymi strzałkami nie mieściło się obok ikon po prawej.
   1.1.211: od 1.1.210 w pasku siedzi też Kompas AI (D-87 A1) i przy 1366 px pasek rozpychał stronę (PL 1409, DE 1465 px).
   Na tej szerokości nazwisko obok inicjałów znika (inicjały i „Wyloguj” zostają), a odstępy maleją. */
@media (max-width: 1500px) {
    .modnav-link { padding: 0 .4rem; }
    .topbar-prawa { gap: .6rem; }
    .topbar .user-name { display: none; }
}
.modnav-link.active { opacity: 1; background: var(--kb-czerwony); font-weight: 500; }
.modnav-strzalka { font-size: .857rem; opacity: .7; }

/* Rozwijana lista ekranow modulu. */
.modnav-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 15rem; padding: .3rem 0;
    background: var(--kb-panel);
    border: 1px solid var(--kb-linia); border-top: 3px solid var(--kb-czerwony);
    box-shadow: 0 10px 24px rgba(40, 36, 28, .22);
}
.modnav-poz:hover > .modnav-menu,
.modnav-poz:focus-within > .modnav-menu { display: block; }
.modnav-menu a {
    display: block; padding: .38rem .95rem;
    color: var(--kb-tekst); font-size: .857rem; white-space: nowrap;
    border-left: 3px solid transparent;
}
.modnav-menu a:hover { background: var(--kb-pasek); text-decoration: none; border-left-color: var(--kb-linia-mocna); }
.modnav-menu a.active { border-left-color: var(--kb-czerwony); font-weight: 600; }

/* Na waskim ekranie zakladki znikaja — tam nawigacja idzie hamburgerem. */
@media (max-width: 1180px) { .modnav { display: none; } }
/* Powyżej 1180 px decyduje pomiar (js/menu.js), nie próg: przy powiększeniu przeglądarki i po niemiecku zakładki najeżdżały na ikonę
   czatu i przycisk AI (zgłoszenie 19.10, 1.1.281). Krok 1: pasek zwarty. Krok 2: zakładki znikają — nawigacja zostaje w lewym menu. */
.topbar.pasek-zwarty .modnav-link { padding: 0 .2rem; gap: 0; }
.topbar.pasek-zwarty .modnav-strzalka { display: none; }   /* pomiar 20.10 (czcionka zostaje 12 px): bez strzałek zakładki mieszczą się przy 1366 px w PL i EN; DE od ~1390 px, węższe — lewe menu */
.topbar.pasek-zwarty .user-name { display: none; }
.topbar.pasek-zwarty .topbar-prawa { gap: .5rem; }
.topbar.pasek-bez-zakladek .modnav { visibility: hidden; }

.user-box { display: flex; align-items: center; gap: .7rem; font-size: .86rem; }
.avatar {
    display: inline-grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: #5a5046; color: #fff;
    font-weight: 600; font-size: .857rem;
}
.user-name { opacity: .92; }
.logout-form { margin: 0; }
/* Telefon (odbiór 1.1.236, 400 px): od 1.1.230 przy inicjałach stoi też „Moje zastępstwo” i pasek wypychał stronę o 38–52 px
   na każdym ekranie. Na wąskim ekranie link znika — „Moje zastępstwo” jest dalej w Module handlowym. */
@media (max-width: 700px) {
    .user-box > a[href="/modul-handlowy/moje-zastepstwo"] { display: none; }
    .topbar { padding: 0 .6rem; }
    .topbar-prawa { gap: .45rem; }
}
/* Telefon 360–640 px (pomiar 19.10, /portal-klienta/podglad-firmy): pasek wystawał o 21 px (PL), 48 px (DE), 27 px (EN) — przycisk
   „Wyloguj” za krawędzią i strona przewijała się w bok. Napis marki jest tu już ukryty (blok 820 px), więc nie ma czego skracać.
   Zostają inicjały i „Wyloguj”; odstępy maleją, a „Zmień hasło” (konto portalu) przechodzi do bocznego menu (.side-haslo).
   Powyżej 640 px bez zmian. */
.side-link.side-haslo { display: none; }
@media (max-width: 640px) {
    .topbar { gap: .4rem; max-width: 100%; }
    .user-box { gap: .45rem; white-space: nowrap; }
    .user-box .topbar-haslo { display: none; }
    .side-link.side-haslo { display: block; }
}
/* Telefon ≤ 640 px, cele dotykowe (odbiór 20.10, 390 px): hamburger 20 px, przełącznik PL/DE/EN 19 px, „Zmień moduł”/„Wyloguj” 17 px, dzwonek czatu 32 px,
   przycisk AI 34 px, okruszki 19 px wysokości. Pasek ma 49 px wysokości, więc rosną tylko pola dotyku (pionowo, bez zmiany szerokości paska):
   po 44 px. Okruszki — niewidoczne powiększenie pola dotyku, układ strony bez zmian. */
@media (max-width: 640px) {
    .menu-hamburger { min-height: 44px; padding-block: 0; padding-inline: 0 .6rem; }
    .topbar .jezyk { padding-block: 1.1rem; }
    .topbar .user-box :is(a, button) { padding-block: .95rem; }
    .topbar .czat-dzwonek { padding-block: .85rem; }
    .topbar .kompas-fab { width: 44px; height: 44px; }
    .okruszki a, .portal-opiekun a { position: relative; }
    .okruszki a::after { content: ""; position: absolute; inset: -13px -6px; }
    .portal-opiekun-wiersz { min-height: 44px; align-items: center; }
}
/* Telefon ≤ 380 px (odbiór 1.1.281, 360 px): pasek pracownika po niemiecku wystawał o 17 px („Modul wechseln” + „Abmelden”).
   „Zmień moduł” przechodzi do bocznego menu (.side-modul), tak jak „Zmień hasło” partnera. Od 381 px bez zmian. */
.side-link.side-modul { display: none; }
@media (max-width: 380px) {
    .user-box .topbar-modul { display: none; }
    .side-link.side-modul { display: block; }
}
/* Przycisk-odnośnik w treści strony. Kolor marki, bo treść jest na białym tle.
   Wcześniej było tu color: #fff — styl zaprojektowany pod ciemny pasek u góry — więc
   każde użycie w treści dawało biały napis na białym tle: „Wyczyść" na czterech ekranach
   partnera, „Podgląd" i „Pobierz" w generatorze dokumentacji, „Wyłącz" w Dostępie
   partnerów. Przyciski były klikalne, ale niewidoczne (zgłoszone 06.09.2026). */
.btn-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--kb-czerwony); font: inherit; text-decoration: underline;
}
.btn-link:hover { opacity: .8; }

/* Na ciemnym pasku i w stopce ten sam przycisk musi być biały. */
.topbar .btn-link, .logout-form .btn-link, .stopka .btn-link {
    color: #fff; opacity: .75;
}
.topbar .btn-link:hover, .logout-form .btn-link:hover, .stopka .btn-link:hover { opacity: 1; }

/* --- Obszar roboczy ------------------------------------------------------- */
/* R-122 G2 (1.1.211): minmax(0, 1fr), nie samo 1fr — minimum 1fr to szerokość minimalna treści, więc jedna szeroka tabela
   rozpychała całą stronę razem z paskiem menu (portal przy 1366 px: 1409–1465 px). Teraz szeroka treść przewija się
   wewnątrz .content (overflow-x: auto), a strona nie ma poziomego paska. */
.workarea { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }

.sidebar {
    background: var(--kb-panel); border-right: 1px solid var(--kb-linia);
    padding: .5rem 0; overflow-y: auto;
}
.side-group {
    font-size: .857rem; text-transform: uppercase; letter-spacing: .8px;
    color: var(--kb-szary); font-weight: 600;
    padding: .85rem 1rem .3rem;
}
.side-link {
    display: block; padding: .32rem 1rem .32rem 1.05rem;
    color: var(--kb-tekst); font-size: .875rem;
    border-left: 3px solid transparent;
}
.side-link:hover { background: var(--kb-pasek); text-decoration: none; border-left-color: var(--kb-linia-mocna); }
.side-link.active { background: var(--kb-pasek); border-left-color: var(--kb-czerwony); font-weight: 500; }
.side-link.disabled { color: #a9aaac; cursor: default; }
.side-link.disabled:hover { background: none; border-left-color: transparent; }
.side-group-link { font-weight: 500; margin-top: .45rem; }
/* Moduł w lewym menu zwija się i rozwija kliknięciem nagłówka (<details>, bez skryptu). */
.side-grupa > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.side-grupa > summary::-webkit-details-marker { display: none; }
.side-grupa > summary::after { content: "▸"; font-size: .857rem; color: #9a948a; margin: 0 .35rem 0 .5rem; transition: transform .15s ease; }
.side-grupa[open] > summary::after { transform: rotate(90deg); }
.side-grupa > summary:focus-visible { outline: 2px solid var(--kb-czerwony); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .side-grupa > summary::after { transition: none; } }
.side-sub { padding-left: 2rem; font-size: .857rem; color: #5f5a50; }
.side-sub.disabled { color: #a9aaac; }

/* Strzałka „Schowaj / Pokaż menu” (StrzalkaMenu; Łukasz 18.10.2026: „chciałbym aby ten pasek można było schować w panelu jak w kompasie”,
   „wystarczy strzałka”). Od 821 px ◀ chowa lewe menu do paska 29 px (przycisk 28 px + obramowanie) z samą strzałką ▶, a treść bierze resztę
   szerokości. Wybór jest per login, wspólny z ramą Kompasa; atrybut data-menu na .shell ustawia serwer przy każdym renderze, więc menu nie miga
   między ekranami. Do 820 px menu jest szufladą z hamburgerem i strzałki nie ma. Reguły tylko dla ekranu (screen): w druku menu znika jak dawniej. */
.side-strzalka { display: flex; justify-content: flex-end; margin: 0; padding: 0 .4rem .25rem; background: var(--kb-panel); }
.side-strzalka-przycisk {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 28px; height: 28px; padding: 0; background: var(--kb-panel); color: var(--kb-grafit);
    border: 1px solid var(--kb-linia); font-size: .857rem; line-height: 1; cursor: pointer;
}
.side-strzalka-przycisk:hover { background: var(--kb-pasek); border-color: var(--kb-linia-mocna); }
.side-strzalka-przycisk:focus-visible { outline: 2px solid var(--kb-czerwony); outline-offset: -2px; }
/* Komunikat o nieudanym zapisie strzałki (KomunikatStrzalkiMenu: pole role="status" w ramie, poza przyklejonym menu): nad lewym dolnym rogiem okna —
   w zwiniętym pasku menu się nie mieści. Zawsze fixed, więc puste nie zajmuje komórki siatki .shell. Znika po 10 s, po następnym kliknięciu strzałki
   albo z następnym ekranem; w druku go nie ma. */
.side-strzalka-blad { position: fixed; left: .5rem; bottom: .75rem; z-index: 1002; max-width: min(24rem, calc(100vw - 1rem)); }
@media print { .side-strzalka-blad { display: none !important; } }
.side-strzalka-blad:not(:empty) {
    padding: .5rem .75rem; background: #fff; color: var(--kb-grafit); border: 1px solid var(--kb-grafit); border-left: 4px solid var(--kb-czerwony);
    font-size: .875rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(40, 36, 28, .2);
}
@media (max-width: 820px) { .side-strzalka { display: none; } }
/* Od 821 px menu trzyma się okna jak menu ramy Kompasa: .side-tresc jest przyklejona u góry, a dłuższa od okna przewija się sama. Bez tego ▶ kliknięte
   na przewiniętej stronie pokazywało menu nad górną krawędzią okna, a przycisk z fokusem znikał razem z nim (przegląd 18.10.2026). .sidebar zostaje
   rozciągnięta na wysokość wiersza siatki (białe tło i linia do dołu strony), ale bez własnego przewijania — inaczej przyklejenie liczyłoby się
   względem niej, a nie okna. Strzałka jest przyklejona u góry .side-tresc; scroll-padding odsuwa spod niej pozycję z fokusem (WCAG 2.4.11). */
@media screen and (min-width: 821px) {
    .sidebar { overflow: visible; padding: 0; }
    .side-tresc {
        position: sticky; top: 0; max-height: 100vh; max-height: 100dvh; overflow-y: auto; padding: .5rem 0;
        scroll-padding-top: calc(28px + .75rem);
    }
    .side-strzalka { position: sticky; top: 0; z-index: 1; }
    .shell[data-menu="schowane"] .workarea { grid-template-columns: 29px minmax(0, 1fr); }
    .shell[data-menu="schowane"] .side-tresc > :not(.side-strzalka) { display: none; }
    .shell[data-menu="schowane"] .side-strzalka { justify-content: center; padding: 0; }
}

.content { padding: 1.1rem 1.3rem 2rem; overflow-x: auto; }

.footbar {
    border-top: 1px solid var(--kb-linia); background: var(--kb-panel);
    color: var(--kb-tekst-drugi); font-size: .857rem; padding: .55rem 1.3rem;
    display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
}

/* Wersja panelu w stopce — aktualizacja polega na podmianie plików, więc musi dać się
   sprawdzić z ekranu, co faktycznie działa, bez zaglądania w daty plików na serwerze. */
.footbar-wersja { margin-left: auto; font-variant-numeric: tabular-nums; }   /* bez opacity: dawało 3,03:1 */

/* Pasek braku połączenia z bazą. Bursztyn, nie czerwień: to nie awaria panelu, tylko
   sytuacja, którą użytkownik zwykle usuwa sam, włączając VPN. */
.pasek-awaria {
    display: flex; gap: .6rem; align-items: flex-start;
    background: #fff8e6; border: 1px solid #f0d9a0; border-left: 3px solid var(--kb-uwaga);
    border-radius: 6px; padding: .6rem .8rem; margin: 0 0 1rem;
    font-size: .857rem; line-height: 1.45; color: var(--kb-grafit);
}

.pasek-awaria-ikona {
    flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--kb-uwaga); color: #fff; font-weight: 700; font-size: .857rem;
    display: inline-flex; align-items: center; justify-content: center;
}

.pasek-awaria b { margin-right: .35rem; }
.pasek-awaria-czas { display: block; color: var(--kb-szary); font-size: .857rem; margin-top: .15rem; }

/* --- Nagłówki ------------------------------------------------------------- */
.page-title { font-size: 1.32rem; font-weight: 600; color: var(--kb-grafit); margin: 0 0 .2rem; }
.page-lead { color: var(--kb-tekst-drugi); margin: 0 0 1.3rem; font-size: .88rem; }

/* --- Panele w stylu HydraSys ---------------------------------------------- */
.panel { background: var(--kb-panel); border: 1px solid var(--kb-linia); margin-bottom: 1.1rem; }
.panel-head {
    background: var(--kb-pasek); border-bottom: 1px solid var(--kb-linia);
    padding: .42rem .75rem; font-size: .857rem; font-weight: 600; color: var(--kb-grafit);
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.panel-note { font-weight: 400; color: var(--kb-szary); font-size: .857rem; }
.panel-body { padding: .9rem .75rem 1rem; }

/* --- Kafelki -------------------------------------------------------------- */
.tile-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
/* Grupy kafli na stronie modułu (R-96 pkt 7): cichy nagłówek, odstęp między grupami. */
.tile-sekcja { font-size: .857rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kb-tekst-drugi); margin: 1.2rem 0 .5rem; }
.tile-sekcja:first-of-type { margin-top: 0; }
.tile {
    position: relative; display: block;
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
    padding: .85rem .9rem .95rem; color: var(--kb-tekst);
    border-top: 3px solid var(--kb-linia-mocna);
    transition: border-top-color .12s ease, box-shadow .12s ease;
}
a.tile:hover {
    text-decoration: none; border-top-color: var(--kb-czerwony);
    box-shadow: 0 2px 10px rgba(58,52,41,.13);
}
.tile-icon { width: 24px; height: 24px; color: var(--kb-czerwony); margin-bottom: .45rem; display: block; }
.tile-title { font-weight: 600; font-size: .95rem; margin-bottom: .18rem; color: var(--kb-grafit); }
.tile-desc { font-size: .857rem; color: var(--kb-szary); line-height: 1.4; }

/* Kafelki modułów głównych — większe, bo to pierwszy ekran po zalogowaniu. */
.tile-grid-big { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: .9rem; }
/* Kafle zmniejszone 18.09.2026: Pulpit dostał nad nimi liczby, więc same moduły mogą zająć
   mniej miejsca — cała rozdzielnia mieści się teraz nad zgięciem razem z liczbami. */
.tile-big { padding: .95rem 1rem 1rem; border-top-width: 3px; display: flex; flex-direction: column; }
.tile-big .tile-desc { flex-grow: 1; }
.tile-big .tile-icon { width: 24px; height: 24px; margin-bottom: .45rem; }
.tile-big .tile-title { font-size: 1.02rem; }
.tile-count {
    margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--kb-linia);
    font-size: var(--kb-fs-s); font-weight: 600; color: var(--kb-tekst-drugi);
}

/* Okruszki nawigacyjne nad tytułem podstrony. */
.okruszki { font-size: .857rem; color: var(--kb-tekst-drugi); margin-bottom: .5rem; }
.okruszki a { color: var(--kb-tekst-drugi); }
.okruszki a:hover { color: var(--kb-czerwony); }
.okruszki-sep { margin: 0 .35rem; opacity: .6; }

.tile-soon { background: #fbfbfc; }
.tile-soon .tile-icon { color: var(--kb-linia-mocna); }
.tile-soon .tile-title { color: #8b8578; }
/* "Wkrotce" na kaflu to zwykla plakietka - ten sam ksztalt co .badge, bez wersalikow:
   wersaliki czyta sie wolniej, a to jest przypis, nie naglowek. */
.tile-badge {
    position: absolute; top: .6rem; right: .65rem;
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 4px;
    font-size: var(--kb-fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap;
    background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi);
}

/* --- Logowanie ------------------------------------------------------------ */
main.bare {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: var(--kb-tlo);
}
.login-wrap { width: 100%; max-width: 372px; }
.login-card {
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
    border-top: 4px solid var(--kb-czerwony);
    padding: 1.7rem 1.7rem 1.3rem; box-shadow: 0 6px 26px rgba(58,52,41,.13);
}
.login-logo { display: block; height: 34px; width: auto; margin-bottom: 1.1rem; }
.login-title { font-weight: 600; font-size: 1.05rem; color: var(--kb-grafit); }
.login-sub { font-size: .857rem; color: var(--kb-szary); margin-bottom: 1.35rem; }

.login-form { display: flex; flex-direction: column; gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field-label { font-size: var(--kb-fs-xs); font-weight: 600; color: var(--kb-tekst-drugi); }
.field-input {
    height: var(--kb-wys-kontrolki); padding: 0 .6rem; border: 1px solid var(--kb-ramka-pola); border-radius: 4px;
    font: inherit; background: #fff; color: var(--kb-tekst);
}
.field-input:focus {
    border-color: var(--kb-czerwony);   /* bez outline:none — fokus rysuje wspolna regula na koncu arkusza */

}

.btn-primary {
    margin-top: 0;   /* wyglad przycisku glownego jest jeden — na koncu arkusza */


}


.login-note {
    margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--kb-linia);
    font-size: .857rem; color: var(--kb-szary); line-height: 1.5;
}

/* Przełącznik „Pracownik / Partner handlowy". Dwa pola radio jako jeden segment: wybrany
   dostaje grafit (czerwień zostaje dla przycisku „Zaloguj się"). Pole radio jest ukryte
   wizualnie, ale zostaje w obiegu klawiatury — strzałki przełączają, fokus widać na etykiecie. */
.login-rodzaj { border: 0; margin: 0; padding: 0; min-width: 0; }
.login-rodzaj legend { padding: 0; margin-bottom: .25rem; }
.login-rodzaj-opcje {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--kb-ramka-pola); border-radius: 4px; overflow: hidden;
}
.login-rodzaj-opcje input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.login-rodzaj-opcje label {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: var(--kb-wys-formularz); padding: .3rem .5rem; cursor: pointer;
    font-weight: 600; font-size: .929rem; line-height: 1.2;
    background: #fff; color: var(--kb-grafit);
}
.login-rodzaj-opcje label + input + label { border-left: 1px solid var(--kb-ramka-pola); }
.login-rodzaj-opcje label:hover { background: var(--kb-pasek); }
.login-rodzaj-opcje input:checked + label { background: var(--kb-grafit); color: #fff; }
.login-rodzaj-opcje input:focus-visible + label { outline: 2px solid var(--kb-czerwony); outline-offset: -4px; }

/* Co dotyczy tylko jednej strony przełącznika. :has() zamiast skryptu — ekran jest statyczny.
   Przeglądarka bez :has() pokaże obie uwagi naraz, co jest brzydsze, ale nie myli. */
.login-wrap:has(#rodzaj-partner:checked) .tylko-pracownik,
.login-wrap:has(#rodzaj-partner:checked) .login-qr,
.login-wrap:has(#rodzaj-pracownik:checked) .tylko-partner { display: none; }

/* Logowanie partnera z internetu (.login-portal, tylko tryb zewnętrzny): pas marki po lewej, formularz po prawej;
   na telefonie pas marki nad formularzem. Logowanie w sieci firmowej zostaje bez zmian. */
main.bare:has(.login-portal) { padding: 0; place-items: stretch; background: #fff; }
.login-portal {
    width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(400px, 1fr);
}
.login-marka {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem 3.5rem 2rem; color: #fff; background: #0c0c0d;
}
/* Bolid na osobnej warstwie z maską promienistą: studyjne tło zdjęcia jest jaśniejsze niż pas, więc bez maski
   rysował się prostokąt (ta sama pułapka co na pulpicie). */
.login-marka::after {
    content: ""; position: absolute; inset: 34% 0 0 0; pointer-events: none;
    background: url('/img/kb-bolid.jpg') 74% 62% / cover no-repeat;
    -webkit-mask-image: radial-gradient(closest-side at 58% 58%, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side at 58% 58%, #000 62%, transparent 100%);
}
.login-marka > * { position: relative; z-index: 1; }
.login-marka-kreska { width: 48px; height: 4px; background: var(--kb-czerwony); margin-bottom: 1.25rem; }
.login-marka-tytul { margin: 0; font-size: 2.25rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.login-marka-opis { margin: .85rem 0 0; max-width: 34ch; font-size: 1.07rem; line-height: 1.55; color: rgba(255,255,255,.78); }
.login-marka-stopka { font-size: .857rem; color: rgba(255,255,255,.6); }
.login-portal .login-strona {
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 4.5rem 2.5rem 2.5rem;
}
.login-portal .login-jezyki { position: absolute; top: 1.25rem; right: 1.5rem; margin: 0; }
.login-portal .login-card { width: 100%; max-width: 360px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.login-portal .login-logo { height: 38px; margin-bottom: 1.6rem; }
.login-portal .login-title { font-size: 1.5rem; }
.login-portal .login-sub { margin-bottom: 1.6rem; }
.login-portal .login-form { gap: 1rem; }
.login-portal .login-form .field-input, .login-portal .login-form .btn-primary { height: 46px; }
.login-portal .login-form .btn-primary { margin-top: .5rem; font-size: 1rem; }
/* Pusty login, zaznaczony od startu w czerwonej ramce, wyglądał jak błąd, zanim partner cokolwiek wpisał — w portalu
   fokus pól jest grafitowy; czerwień zostaje dla przycisku i komunikatów o błędach. */
.login-portal .field-input:focus { border-color: var(--kb-grafit); }
.login-portal .field-input:focus-visible { outline: 2px solid rgba(58,52,41,.35); outline-offset: 1px; }
@media (max-width: 900px) {
    .login-portal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .login-marka { min-height: 210px; padding: 1.4rem 1.25rem 1.25rem; justify-content: flex-start; }
    .login-marka::after {
        inset: 0 -12% 0 38%; background-position: 72% 60%;
        -webkit-mask-image: radial-gradient(closest-side at 55% 55%, #000 55%, transparent 100%);
        mask-image: radial-gradient(closest-side at 55% 55%, #000 55%, transparent 100%);
    }
    .login-marka-kreska { width: 36px; margin-bottom: .9rem; }
    .login-marka-tytul { font-size: 1.6rem; }
    .login-marka-opis { font-size: .95rem; max-width: 26ch; }
    .login-marka-stopka { display: none; }
    .login-portal .login-strona { justify-content: flex-start; padding: 3.75rem 1.25rem 2rem; }
    .login-portal .login-jezyki { top: .9rem; right: 1rem; }
    .login-portal .login-logo { height: 32px; margin-bottom: 1.1rem; }
}
@media (max-width: 480px) { .login-marka-tytul { max-width: 12ch; } }

/* --- Komunikaty ------------------------------------------------------------
   Jeden wygląd dla każdego paska z informacją: obrys 1px, belka 3px z lewej w kolorze
   stanu, tekst 14/21 na grafitowo. Kolor niesie stan, nie krzyczy — czerwień marki
   zostaje dla nawigacji i przycisku głównego, alarm w danych to --kb-blad.
   Stare nazwy (.alert*, .box-*) są tu aliasami, bo w .razor jest ich prawie dwieście;
   przepisywanie klas dałoby to samo na ekranie i ryzyko literówki w każdym pliku.     */
.komunikat, .alert, .box-wniosek {
    --k-tlo: var(--kb-pasek);
    --k-linia: var(--kb-linia);
    --k-akcent: var(--kb-linia-mocna);
    padding: .55rem .8rem; margin-bottom: 1rem;
    background: var(--k-tlo); border: 1px solid var(--k-linia); border-radius: 4px;
    box-shadow: inset 3px 0 0 var(--k-akcent);
    font-size: var(--kb-fs-m); line-height: 1.5; color: var(--kb-grafit);
}
.komunikat-blad, .alert-bad, .box-zle {
    --k-tlo: var(--kb-blad-tlo); --k-linia: #f0c6c8; --k-akcent: var(--kb-blad); color: var(--kb-blad);
}
.komunikat-uwaga, .alert-warn, .box-uwaga, .box-szansa {
    --k-tlo: var(--kb-uwaga-tlo); --k-linia: #f0d9a0; --k-akcent: var(--kb-uwaga); color: var(--kb-uwaga-tekst);
}
.komunikat-ok, .alert-ok, .box-dobrze, .box-ok {
    --k-tlo: var(--kb-ok-tlo); --k-linia: #c6dfc8; --k-akcent: var(--kb-ok); color: var(--kb-ok-tekst);
}
/* Wyjaśnienie, nie ostrzeżenie: liczba wymaga komentarza, ale nic złego się nie dzieje. */
.komunikat-info, .alert-info, .box-info {
    --k-tlo: var(--kb-info-tlo); --k-linia: var(--kb-info-linia); --k-akcent: var(--kb-grafit); color: var(--kb-info-tekst);
}

/* --- Błąd Blazora --------------------------------------------------------- */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--kb-czerwony); color: #fff; padding: .7rem 1.2rem; font-size: .857rem;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: .8rem; cursor: pointer; }

/* Hamburger i tło menu — domyślnie ukryte, pokazują się na małych ekranach. */
.menu-hamburger {
    display: none; background: transparent; border: none; color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .6rem 0 0;
}
.menu-backdrop { display: none; }

@media (max-width: 820px) {
    .workarea { grid-template-columns: minmax(0, 1fr); }
    .brand-text { display: none; }
    .user-name { display: none; }
    .content { padding: 1rem .9rem 2rem; }

    .menu-hamburger { display: inline-flex; align-items: center; }

    /* Boczne menu jako wysuwana szuflada; domyślnie schowane za lewą krawędzią. */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 1001;
        background: var(--kb-pasek); box-shadow: 2px 0 16px rgba(0, 0, 0, .25);
        overflow-y: auto; padding-top: .6rem;
        transform: translateX(-100%); transition: transform .22s ease;
    }
    .menu-otwarte .sidebar { transform: translateX(0); }

    .menu-otwarte .menu-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45);
    }
}

/* =========================================================================
   Ekrany raportowe
   ========================================================================= */

/* --- Pasek filtrów -------------------------------------------------------- */
.pasek-filtrow {
    display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
    padding: .7rem .8rem; margin-bottom: 1.1rem;
}
.filtr { display: flex; flex-direction: column; gap: .22rem; }
.filtr-etykieta { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); }
.filtr .field-input { min-width: 11rem; padding: 0 .5rem; }
.filtr-info { display: flex; flex-direction: column; gap: .12rem; margin-left: auto; text-align: right; }
.filtr-zakres { font-size: .86rem; font-weight: 600; color: var(--kb-grafit); }
.filtr-ok { font-size: .857rem; color: var(--kb-szary); }
.filtr-uwaga { font-size: .857rem; color: var(--kb-uwaga-tekst); font-weight: 600; }

/* --- Kafelki wskaźników --------------------------------------------------- */
.kpi-rzad {
    display: grid; gap: 12px; margin-bottom: 1.2rem;
    /* 176 px + 12 px odstępu: sześć kafli Modułu handlowego mieści się w jednym rzędzie przy 1440 px.
       Przy 200 px szósty spadał do drugiej linii i spychał tabelę. */
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}
.kpi-rzad-waski { margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi {
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
    border-top: 3px solid var(--kb-linia-mocna);
    padding: .75rem .85rem .8rem;
}
.kpi-wyrozniony { border-top-color: var(--kb-czerwony); }
/* Liczba jest treścią kafla, więc ma rozmiar treści: 32 px zamiast 17,9 px, czyli mniej
   niż tytuł strony. Cyfry i tak są równej szerokości (KB Cyfry), więc kafle nie skaczą. */
.kpi-wartosc { font-size: 2.286rem; font-weight: 700; color: var(--kb-grafit); line-height: 1.05; }
.kpi-podpis { font-size: var(--kb-fs-s); font-weight: 600; color: var(--kb-tekst-drugi); margin-top: .2rem; }
.kpi-zmiana { font-size: .857rem; font-weight: 600; margin-top: .4rem; }
.kpi-zmiana.dobrze { color: var(--kb-ok); }
.kpi-zmiana.zle { color: var(--kb-blad); }
.kpi-dopisek { font-size: var(--kb-fs-xs); color: var(--kb-tekst-drugi); margin-top: .4rem; }

/* Telefon: liczba 24 px i dwie kolumny kafli — przy 32 px i jednej kolumnie sam rząd KPI
   zajmował pół ekranu, zanim pokazała się lista. */
@media (max-width: 640px) {
    .kpi-rzad, .kpi-rzad-waski { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-wartosc, .kpi-liczba { font-size: 1.714rem; }
}

/* Kafel z sumą w walucie partnera zagranicznego („12 345 678,90 EUR · 1 200,00 USD”): zdanie, nie liczba — mniejsza
   czcionka, łamanie dozwolone, cyfry tabelaryczne; na telefonie kafel na całą szerokość (przegląd portalu 19.10.2026). */
.kpi-wartosc.kpi-wartosc-waluty {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .kpi:has(> .kpi-wartosc-waluty) { grid-column: span 2; }
}

/* --- Wnioski --------------------------------------------------------------
   Wygląd wniosków siedzi w bloku „Komunikaty" wyżej w pliku. Tu były drugie definicje
   .box-*, które kaskadą wygrywały ze wspólnym blokiem — dlatego ich już nie ma.      */

/* --- Tabele ---------------------------------------------------------------
   Tabela jest w tym panelu głównym nośnikiem treści, a była zarazem jego
   najmniejszym drukiem (12,04 px). Teraz czyta się ją jak rysunek wykonawczy:
   14 px, wiersz ok. 40 px, jedna cienka linia między wierszami i żadnej zebry —
   zebra rysuje pasy, których w danych nic nie oznacza. Linia wiersza jaśniejsza
   niż ramka panelu, bo siatka ma prowadzić oko, a nie konkurować z liczbami. */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--kb-fs-m); line-height: 20px; }
.tabela th {
    background: var(--kb-pasek); color: var(--kb-tekst-drugi); text-align: left;
    font-weight: 600; font-size: var(--kb-fs-xs); padding: 8px 12px;
    border-bottom: 1px solid var(--kb-linia-mocna); white-space: nowrap;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--kb-linia-tabeli); }
/* Oddech tylko przy krawędziach panelu — w środku szerokość jest cenniejsza.
   Bez tego pierwsza kolumna kleiła się do ramki, a ostatnia liczba do paska przewijania. */
.tabela th:first-child, .tabela td:first-child { padding-inline-start: 16px; }
.tabela th:last-child, .tabela td:last-child { padding-inline-end: 16px; }
.tabela tbody tr:hover td { background: var(--kb-wiersz-hover); }
.tabela tfoot td {
    background: var(--kb-pasek); border-top: 2px solid var(--kb-grafit);
    border-bottom: none; padding: 10px 12px;
}
.tabela .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .szary { color: var(--kb-szary); }

/* Kolumna „tyle, ile trzeba” — znacznik, ikona, liczba porządkowa, przycisk.
   width:1% każe przeglądarce oddać całą resztę szerokości kolumnom z treścią. */
.tabela .kol-waska { width: 1%; white-space: nowrap; }

/* Wynik dobry/zły wprost w komórce. Alarm w danych to --kb-blad, nie czerwień marki:
   marka ma znaczyć „Kocher+Beck”, a nie „uwaga”.
   Stare nazwy zostają jako aliasy i to nie jest ustępstwo — w .razor klasy „zle”
   i „spadek” siedzą w tabelach (data po terminie w Zamówieniach, liczba zaległych
   w Kolejce hali, rozjazdy w Bilansie), a w arkuszu nie było dla nich ANI JEDNEJ
   reguły globalnej: wszystkie są zawężone do kafelków albo ciemnych tablic.
   Te wyróżnienia po prostu nigdy nie działały. Waga (0,2,0) i miejsce na początku
   arkusza sprawiają, że alias wypełnia lukę, ale przegrywa z każdą późniejszą
   regułą tej samej wagi — nie przejmuje niczego, co już działa. */
.tabela .t-zle, .tabela .zle, .tabela .spadek { color: var(--kb-blad); font-weight: 600; }
.tabela .t-dobrze, .tabela .dobrze, .tabela .wzrost { color: var(--kb-ok-tekst); }

/* Wariant gęsty — wykazy oglądane w całości (marszruty, pozycje dokumentu),
   gdzie liczy się, ile wierszy widać naraz, a nie komfort pojedynczego wiersza. */
.tabela-gesta { font-size: var(--kb-fs-s); }
.tabela-gesta th, .tabela-gesta td { padding: 6px 10px; }

/* Tabela z własnym przewijaniem i przyklejonym nagłówkiem. Sticky działa TYLKO
   w tym opakowaniu: poza nim nagłówek przykleiłby się do okna, a nie do listy.
   Linia pod nagłówkiem jako cień wewnętrzny, bo przy border-collapse obramowanie
   przyklejonej komórki znika w trakcie przewijania. Podwójne max-height: starsze
   przeglądarki biorą vh, nowsze dvh (pasek adresu na telefonie). */
.tabela-przewijana { overflow: auto; max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); }
.tabela-przewijana > .tabela th {
    position: sticky; top: 0; z-index: 1;
    box-shadow: inset 0 -1px 0 var(--kb-linia-mocna);
}

/* --- Bilans stanu towarów -------------------------------------------------
   Wiersz czyta się od lewej do prawej jak wyciąg z konta, więc oko musi od razu
   widzieć, gdzie kończy się wiedza magazynu, a zaczyna prawda o dziś. Zamiast
   dziesięciu jednakowych kolumn — trzy strefy oddzielone kreską i dwie liczby
   wyróżnione, bo to na nie patrzy się naprawdę: „ile mam” i „ile z tego wolne”. */
.bilans-grupa th {
    background: #fff; border-bottom: none; padding: .5rem .55rem .15rem;
    font-size: .857rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--kb-szary); font-weight: 700; text-align: right;
}
.bilans-grupa th:first-child { text-align: left; }
.bilans-grupa th.pusta { color: transparent; }

/* Kreska rozdzielająca strefy — na nagłówku i na każdej komórce w kolumnie. */
.tabela .bilans-sep { border-left: 2px solid var(--kb-linia-mocna); }

/* Dwie liczby, po które sięga wzrok. Reszta wiersza ma je tłumaczyć, nie z nimi
   konkurować — dlatego wyróżnienie jest tłem i wagą, a nie kolorem. */
.tabela .bilans-wynik { background: #fbfbfc; font-weight: 700; font-size: .92rem; }
.tabela tbody tr:hover td.bilans-wynik { background: #f2f3f5; }

/* Liczba odejmowana — szara i z minusem, żeby na pierwszy rzut oka było widać
   kierunek działania, zanim ktokolwiek przeczyta nagłówek kolumny. */
.tabela .bilans-minus { color: var(--kb-tekst-drugi); }

/* Wiersz wymagający reakcji. Delikatnie, bo takich wierszy bywa kilkanaście
   naraz — mocne tło zamieniłoby listę w ścianę czerwieni i przestałoby znaczyć. */
.tabela tbody tr.bilans-alarm td { background: #fdf5f5; }
.tabela tbody tr.bilans-alarm:hover td { background: #fbeaea; }
.tabela tbody tr.bilans-alarm td.bilans-wynik { background: #fbe9e9; }

/* Data zaksięgowania pod stanem: im starsza, tym mocniej trzeba na nią patrzeć. */
.bilans-data { font-size: .857rem; color: var(--kb-szary); font-variant-numeric: tabular-nums; }
.bilans-indeks > .badge { margin: 3px 4px 0 0; }
/* R-96 pkt 6: długa nazwa z kartoteki nie może poszerzać całej tabeli — zawija się. */
.bilans-indeks > .szary { max-inline-size: 16rem; }
.tabela .bilans-grupa + tr > th { white-space: normal; vertical-align: bottom; }
.bilans-data.stara { color: var(--kb-uwaga-tekst); font-weight: 600; }

/* B-104: rozwijany wiersz Bilansu — na które zlecenie i co jedzie */
.tabela tbody tr.bilans-klik { cursor: pointer; }
.tabela tbody tr.bilans-klik:focus-visible { outline: 2px solid var(--kb-grafit); outline-offset: -2px; }
.tabela tbody tr.bilans-klik.otwarty td { border-block-end-color: transparent; }
.bilans-strzalka { display: inline-block; inline-size: 1.1em; color: var(--kb-tekst-drugi); font-size: .857rem; }
.tabela tbody tr.bilans-szczegoly > td,
.tabela tbody tr.bilans-szczegoly:hover > td { background: var(--kb-pasek); padding: .75rem 1rem 1rem; white-space: normal; cursor: default; }
.bilans-szcz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1.5rem; }
/* Dwie tabele obok siebie dopiero na szerokim ekranie; węższy (1700 px z menu) ucinał „Plan dostawy” (R-96 pkt 6). */
@media (max-width: 1800px) { .bilans-szcz { grid-template-columns: minmax(0, 1fr); } }
.bilans-szcz-tytul { font-weight: 700; margin-block-end: .35rem; color: var(--kb-grafit); }
.bilans-szcz-tab { inline-size: 100%; border-collapse: collapse; font-size: .857rem; background: #fff; border: 1px solid var(--kb-linia); }
.bilans-szcz-tab th { font-weight: 600; color: var(--kb-tekst-drugi); background: #fff; }
.bilans-szcz-tab th, .bilans-szcz-tab td { padding: .3rem .5rem; border-block-end: 1px solid var(--kb-linia); text-align: start; vertical-align: top; }
.bilans-szcz-tab .liczba { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bilans-szcz-tab tr.wstrzymane td { color: var(--kb-szary); }
.bilans-szcz-linia { grid-column: 1 / -1; font-variant-numeric: tabular-nums; line-height: 1.7; }
.bilans-szcz-krok { white-space: nowrap; margin-inline-start: .4rem; }

/* --- Przekroje materiału (jak policzyć przelicznik) ------------------------
   Cztery małe rysunki obok siebie, każdy ze wzorem pod spodem. Rysunek ma tu
   robotę do wykonania, nie ozdabiać: pokazuje, KTÓRY wymiar z indeksu jest
   którym symbolem we wzorze — a to jest dokładnie miejsce, w którym przy
   ręcznym liczeniu myli się średnicę zewnętrzną z wewnętrzną. */
.przekroje { margin-top: 1rem; }
.przekroje-wzor {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .7rem; background: var(--kb-pasek);
    border-left: 3px solid var(--kb-czerwony); border-radius: 4px; font-size: .857rem;
}
.przekroje-wzor code {
    font-size: .9rem; font-weight: 600; color: var(--kb-grafit);
    background: #fff; padding: .15rem .45rem; border-radius: 3px; border: 1px solid var(--kb-linia);
}
.przekroje-siatka {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem; margin-top: .7rem;
}
.przekroj {
    margin: 0; padding: .5rem; border: 1px solid var(--kb-linia);
    border-radius: 6px; background: var(--kb-panel); text-align: center;
}
.przekroj svg { width: 100%; max-width: 140px; height: auto; }
.przekroj figcaption { margin-top: .25rem; font-size: .857rem; line-height: 1.5; }
.przekroj figcaption code {
    display: block; margin-top: .15rem; font-size: .857rem; color: var(--kb-grafit);
}
.przekroje-gestosci {
    display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .7rem;
    font-size: .857rem; color: var(--kb-tekst-drugi);
}
.przekroje-gestosci b:first-child { color: var(--kb-grafit); }

/* --- Znaczniki statusu ---------------------------------------------------- */
/* Ksztalt .znacznika stoi razem z .badge (sekcja "Kontrola kursow NBP - plakietki") - dopoki byl tu,
   ta sama plakietka miala w jednym miejscu promien 2 px, a w drugim 4 px. Zostaja same kolory. */
.st-aktywny { background: var(--kb-ok-tlo); color: var(--kb-ok-tekst); }
.st-uspiony { background: var(--kb-uwaga-tlo); color: var(--kb-uwaga-tekst); }
.st-utracony { background: var(--kb-blad-tlo); color: var(--kb-blad); }
.st-nieaktywny { background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi); }
/* Status kontaktowy (CRM) — osobna paleta (niebieska), by nie mylić ze sprzedażowym */
.stk-aktywny { background: #e6f0fb; color: #14508c; }
.stk-uspiony { background: #eef2f7; color: #3d5673; }
.stk-brak { background: #f4f5f6; color: var(--kb-szary); }
.kontakt-data { font-size: .857rem; color: var(--kb-szary); margin-inline-start: .35rem; }
.grupy-mies { min-width: auto; font-size: .857rem; padding: .25rem .5rem; margin-inline-start: .75rem; }

/* --- Administracja: uprawnienia ------------------------------------------- */
.adm-uklad { display: grid; grid-template-columns: 300px 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .adm-uklad { grid-template-columns: 1fr; } }
.adm-lista { border: 1px solid var(--kb-linia); border-radius: 3px; background: var(--kb-panel); overflow: hidden; }
.adm-szukaj { width: 100%; border: none; border-bottom: 1px solid var(--kb-linia); border-radius: 0; }
.adm-osoby { max-height: 60vh; overflow-y: auto; }
.adm-osoba { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: start;
    padding: .45rem .7rem; border: none; border-bottom: 1px solid var(--kb-linia); background: transparent; cursor: pointer; }
.adm-osoba:hover { background: #f3f1ec; }
.adm-osoba.aktywny { background: var(--kb-czerwony); }
.adm-osoba.aktywny .adm-osoba-nazwa, .adm-osoba.aktywny .adm-osoba-login { color: #fff; }
.adm-osoba-nazwa { font-size: .9rem; font-weight: 600; color: var(--kb-tekst); }
.adm-osoba-login { font-size: .857rem; color: var(--kb-szary); }
.adm-edytor { border: 1px solid var(--kb-linia); border-radius: 3px; background: var(--kb-panel); padding: 1rem 1.2rem; }
.adm-naglowek { font-size: 1.1rem; margin-bottom: 1rem; }
.adm-sekcja { margin-bottom: 1.2rem; }
.adm-sekcja-tytul { font-size: .857rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kb-szary); margin-bottom: .5rem; }
.adm-radio { display: inline-flex; align-items: center; gap: .4rem; margin-inline-end: 1.2rem; font-size: .9rem; cursor: pointer; }
.adm-modul { border-top: 1px solid var(--kb-linia); padding: .6rem 0; }
.adm-modul-glowa { font-size: .95rem; }
.adm-check { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; font-size: .88rem; cursor: pointer; }
.adm-check .szary { font-weight: 400; }
.adm-narzedzia { margin-inline-start: 1.6rem; margin-top: .2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.adm-akcje { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.adm-zapisano { color: var(--kb-ok); font-weight: 600; font-size: .9rem; }
.adm-brak { padding: 1rem; font-size: .86rem; color: var(--kb-szary); text-align: center; }
.blad-tekst { color: var(--kb-czerwony-ciemny); font-weight: 600; font-size: .9rem; }

/* --- Lejek ---------------------------------------------------------------- */
.lejek { display: flex; flex-direction: column; gap: .4rem; }
.lejek-wiersz { display: grid; grid-template-columns: 15rem 1fr 12rem; gap: .7rem; align-items: center; }
.lejek-nazwa { font-size: .857rem; display: flex; flex-direction: column; gap: .12rem; }
.lejek-pasek { background: #f0f1f3; height: 1.25rem; position: relative; }
.lejek-wypelnienie { height: 100%; }
.lejek-wartosc { font-size: .857rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lejek-szt { display: block; font-size: .857rem; color: var(--kb-szary); }
.lejek-typ {
    display: inline-block; font-size: .857rem; font-weight: 600; text-transform: none;
    letter-spacing: 0; padding: .05rem .3rem; border-radius: 2px; width: fit-content;
}
.typ-wygrana { background: #eaf4ea; color: var(--kb-ok); }
.lejek-wypelnienie.typ-wygrana { background: var(--kb-ok); }
.typ-przegrana { background: #fdeced; color: var(--kb-czerwony-ciemny); }
.lejek-wypelnienie.typ-przegrana { background: var(--kb-czerwony); }
.typ-wtoku { background: #fff4e0; color: #8a5200; }
.lejek-wypelnienie.typ-wtoku { background: var(--kb-uwaga); }
.typ-pozakonwersja { background: #eceef0; color: var(--kb-szary); }
.lejek-wypelnienie.typ-pozakonwersja { background: var(--kb-linia-mocna); }

/* --- Wykres --------------------------------------------------------------- */
.wykres { display: block; max-width: 100%; }
.wykres-legenda { display: flex; gap: 1.1rem; margin-top: .5rem; font-size: .857rem; color: var(--kb-szary); }
.legenda-pozycja { display: flex; align-items: center; gap: .35rem; }
.legenda-kolor { display: inline-block; width: .7rem; height: .7rem; }

/* Podgląd partnera — ApexCharts. Dwie karty jak precyzyjne arkusze pomiarowe:
   czerwony znacznik prowadzi wzrok do trendu, reszta pozostaje spokojna. */
.portal-wykresy {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .85fr);
    gap: .75rem; margin-bottom: 1.1rem;
}
.portal-wykres-karta {
    position: relative; min-width: 0; overflow: hidden;
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
}
.portal-wykres-karta-glowna { border-top: 3px solid var(--kb-czerwony); }
.portal-wykres-karta-struktura { border-top: 3px solid var(--kb-grafit); }
.portal-wykres-head {
    min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: .72rem .85rem .45rem; border-bottom: 1px solid #eceef0;
}
.portal-wykres-head h2 { margin: 0; color: var(--kb-grafit); font-size: .96rem; font-weight: 650; line-height: 1.25; }
.portal-wykres-head p { margin: .12rem 0 0; color: var(--kb-szary); font-size: .857rem; }
.portal-wykres-zakres {
    flex: 0 0 auto; color: var(--kb-szary); font-size: .857rem; font-variant-numeric: tabular-nums;
    border: 1px solid var(--kb-linia); background: var(--kb-pasek); padding: .15rem .42rem;
}
.portal-wykres-canvas { min-height: 270px; padding: .18rem .5rem 0; }
.portal-wykres-canvas-donut { padding-inline: .2rem; }
/* D-87 B5/B6 (1.1.211): pasek otwartych zamówień (segmenty w kolorach plakietek, liczba w segmencie) i przypis o miesiącu
   niepełnym pod słupkami. */
.portal-wykres-przypis { margin: .3rem 0 0; font-size: .86rem; color: var(--kb-tekst-drugi); }
.portal-pasek-otwartych { display: flex; gap: 2px; min-block-size: 36px; margin: .6rem 0 .8rem; border-radius: 6px; overflow: hidden; }
.portal-pasek-seg { flex-basis: 0; min-inline-size: 2.2rem; justify-content: center; border-radius: 0; font-size: .9rem; min-block-size: 36px; }
.portal-pasek-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.portal-pasek-legenda li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.portal-pasek-legenda li b { font-variant-numeric: tabular-nums; }
.portal-wykres-karta .apexcharts-canvas { margin-inline: auto; }
.portal-wykres-karta .apexcharts-tooltip { border-color: var(--kb-linia); box-shadow: 0 3px 12px rgba(58,52,41,.12); }

@media (max-width: 980px) {
    .portal-wykresy { grid-template-columns: 1fr; }
    .portal-wykres-karta-struktura { min-height: 340px; }
}

@media (max-width: 520px) {
    .portal-wykres-head { align-items: flex-start; }
    .portal-wykres-zakres { display: none; }
    .portal-wykres-canvas { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-wykres-karta .apexcharts-series path { transition: none !important; }
}

/* --- Stopka danych -------------------------------------------------------- */
.stopka-danych {
    display: flex; flex-wrap: wrap; gap: .3rem 1.3rem;
    border-top: 1px solid var(--kb-linia); margin-top: 1.4rem; padding-top: .7rem;
    font-size: .857rem; color: var(--kb-szary);
}
.stopka-ok { color: var(--kb-ok); font-weight: 600; }
.stopka-uwagi { font-size: .857rem; color: var(--kb-szary); margin: .5rem 0 0; line-height: 1.5; }

/* --- Stany ---------------------------------------------------------------- */
/* Pasek ładowania ekranów Kompasu (lista zleceń, karta zamówienia): stoi tu, a nie w kbb-lista.css, bo ekran pokazuje go, zanim komponent
   listy doładuje ten arkusz. Gradient, wysokość i margines w klasie - bez stylu inline w komponentach. */
@keyframes kbb-pasek { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kbb-pasek-ladowania {
    height: 3px; margin: .4rem 0;
    background: linear-gradient(90deg, var(--kb-czerwony, #d4282f) 0 30%, #eceff1 30% 100%);
    background-size: 200% 100%; animation: kbb-pasek 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .kbb-pasek-ladowania { animation: none; } }
/* Stałe miejsce na pasek ładowania: pasek pojawia się i znika wewnątrz, więc odświeżenie nie przesuwa strony. */
.kbb-pasek-miejsce { height: 3px; margin: .4rem 0; }
.kbb-pasek-miejsce > .kbb-pasek-ladowania { margin: 0; }
.ladowanie { padding: 1.6rem; text-align: center; color: var(--kb-szary); font-size: .9rem; }
.pusto { padding: 1.4rem; text-align: center; color: var(--kb-szary); font-size: var(--kb-fs-s); }
/* .alert-ok stoi w bloku „Komunikaty" — tutejsza druga definicja wygrywała kaskadą. */
.btn-wiecej {
    margin-top: .7rem;   /* reszta wygladu wspolna z .btn-secondary — koniec arkusza */


}


@media (max-width: 820px) {
    .lejek-wiersz { grid-template-columns: 1fr; gap: .2rem; }
    .lejek-wartosc { text-align: left; }
    .filtr-info { margin-left: 0; text-align: left; }
}

/* --- Wchodzenie w szczegóły dokumentów ------------------------------------ */
.wiersz-klikalny { cursor: pointer; }
/* Najechanie to jeszcze nie zdarzenie — róż #fdf2f2 czytał się jak alarm w danych. */
.wiersz-klikalny:hover td { background: var(--kb-wiersz-hover); }
.wiersz-klikalny td:first-child { position: relative; }
/* Fokus z klawiatury — jedyne miejsce, w którym czerwień marki wchodzi w tabelę.
   Bez tego wiersz z tabindex jest zaznaczony, a nikt tego nie widzi. */
.wiersz-klikalny:focus-visible, .klik-wiersz:focus-visible, .of-wiersz-klik:focus-visible,
.wiersz-dok:focus-visible, .sapan-wiersz-danych:focus-visible {
    outline: 2px solid var(--kb-czerwony); outline-offset: -2px;
}

.panel-szczegoly { border-color: var(--kb-czerwony); }
.panel-szczegoly .panel-head { background: #fdf2f2; border-bottom-color: #f0c6c8; }
.btn-zamknij {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--kb-szary); font-size: .9rem; line-height: 1; padding: .1rem .3rem;
}
.btn-zamknij:hover { color: var(--kb-czerwony); }

/* Wiersz rozwinięty i jego pozycje: ten sam znacznik 3px z lewej i to samo tło —
   widać, że to jedna całość. Róż z pogrubieniem mówił „błąd", a to tylko „tu jesteś". */
.tabela-dok tbody tr.wiersz-dok { cursor: pointer; }
.tabela-dok tbody tr.wiersz-dok.otwarty td { background: var(--kb-pasek); }
.tabela-dok tbody tr.wiersz-dok.otwarty td:first-child { box-shadow: inset 3px 0 0 var(--kb-grafit); }
.tabela-dok .rozwin { color: var(--kb-grafit); text-align: center; user-select: none; }
.wiersz-pozycje > td { background: var(--kb-pasek); padding: 4px 16px 16px 40px; box-shadow: inset 3px 0 0 var(--kb-grafit); }
.tabela-poz { font-size: .857rem; background: var(--kb-panel); }
.tabela-poz th { background: #eef0f2; font-size: .857rem; }
.tabela-poz td { padding: .28rem .5rem; }

.stronicowanie {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-top: .8rem; padding-top: .6rem;
    border-top: 1px solid var(--kb-linia); font-size: .857rem; color: var(--kb-szary);
}
.stronicowanie-przyciski { display: flex; align-items: center; gap: .5rem; }
.stronicowanie .btn-wiecej { margin-top: 0; padding: .25rem .6rem; font-size: .857rem; }
.stronicowanie .btn-wiecej:disabled { cursor: default; }   /* stan wylaczony wspolny — koniec arkusza */
.strona-numer { font-variant-numeric: tabular-nums; }

/* --- Przełącznik języka --------------------------------------------------- */
.topbar-prawa { display: flex; align-items: center; gap: 1rem; flex: none; margin-left: auto; }
.jezyki { display: flex; align-items: center; gap: .1rem; }
.jezyk {
    display: inline-block; padding: .18rem .42rem; font-size: .857rem; font-weight: 600;
    letter-spacing: .5px; color: var(--kb-na-grafit); border-radius: 2px; line-height: 1.2;
}
.jezyk:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.jezyk.aktywny { color: #fff; background: transparent; box-shadow: inset 0 -2px 0 var(--kb-czerwony); }
@media (max-width: 640px) { .topbar-prawa { gap: .35rem; } .jezyk { padding: .18rem .3rem; } }   /* telefon: patrz blok pod .logout-form */
.login-jezyki { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.login-jezyki .jezyk { color: var(--kb-szary); }
.login-jezyki .jezyk:hover { color: var(--kb-grafit); background: #e8eaed; }
.login-jezyki .jezyk.aktywny { color: #fff; background: var(--kb-czerwony); }

/* =========================================================================
   Pulpit zarządu — widok dla decydenta, spójny z marką, podniesiony wizualnie
   ========================================================================= */
.pulpit-gora { display: grid; grid-template-columns: 1.75fr 1fr; gap: 1rem; margin-bottom: 1rem; }

.pulpit-hero {
    display: block; background: var(--kb-panel); border: 1px solid var(--kb-linia);
    border-top: 4px solid var(--kb-czerwony); padding: 1.3rem 1.5rem 1rem; color: var(--kb-tekst);
    transition: box-shadow .12s ease;
}
.pulpit-hero:hover { text-decoration: none; box-shadow: 0 3px 16px rgba(58,52,41,.12); }
.hero-eyebrow {
    font-size: .857rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: var(--kb-szary);
}
.hero-liczba {
    font-size: 3rem; font-weight: 700; color: var(--kb-grafit); line-height: 1.05;
    margin-top: .3rem; font-variant-numeric: tabular-nums;
}
.hero-jedn { font-size: 1.2rem; font-weight: 600; color: var(--kb-szary); }
.hero-zmiana { font-size: 1rem; font-weight: 600; margin-top: .35rem; }
.hero-zmiana.spadek { color: var(--kb-czerwony); }
.hero-zmiana.wzrost { color: var(--kb-ok); }
.hero-zmiana .strzalka { font-size: .9rem; }
.hero-spark { margin-top: .8rem; opacity: .95; }
.hero-spark .wykres { max-height: 190px; }

.pulpit-kondycja { background: var(--kb-panel); border: 1px solid var(--kb-linia); padding: 1rem 1.1rem; }
.kondycja-tytul {
    font-size: .857rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: var(--kb-szary); margin-bottom: .7rem;
}
.kondycja-wiersz {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
    padding: .55rem 0; border-top: 1px solid var(--kb-linia); color: var(--kb-tekst);
}
.kondycja-wiersz:hover { text-decoration: none; }
.kondycja-wiersz:hover .kondycja-etyk { color: var(--kb-czerwony); }
.kropka { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.kropka.dobrze { background: var(--kb-ok); }
.kropka.uwaga  { background: var(--kb-uwaga); }
.kropka.alarm  { background: var(--kb-czerwony); }
.kondycja-etyk { font-size: .86rem; }
.kondycja-wart { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kb-grafit); }
.kondycja-stan { grid-column: 2 / 4; font-size: .857rem; text-transform: uppercase; letter-spacing: .4px; }
.kondycja-stan.dobrze { color: var(--kb-ok); }
.kondycja-stan.uwaga  { color: var(--kb-uwaga-tekst); }
.kondycja-stan.alarm  { color: var(--kb-czerwony); }

.pulpit-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.kpi-karta {
    background: var(--kb-panel); border: 1px solid var(--kb-linia); border-left: 3px solid var(--kb-linia-mocna);
    padding: .85rem 1rem 1rem; color: var(--kb-tekst); transition: border-left-color .12s ease, box-shadow .12s ease;
}
.kpi-karta:hover { text-decoration: none; border-left-color: var(--kb-czerwony); box-shadow: 0 2px 10px rgba(58,52,41,.1); }
.kpi-etyk { font-size: var(--kb-fs-s); font-weight: 600; color: var(--kb-tekst-drugi); }
.kpi-liczba { font-size: 2.286rem; font-weight: 700; color: var(--kb-grafit); line-height: 1.05; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kpi-jedn { font-size: var(--kb-fs-m); font-weight: 600; color: var(--kb-tekst-drugi); }
.kpi-zm { font-size: .857rem; font-weight: 600; margin-top: .35rem; }
.kpi-zm.wzrost { color: var(--kb-ok); }
.kpi-zm.spadek { color: var(--kb-blad); }
.kpi-zm.szary  { color: var(--kb-szary); font-weight: 400; }

.pulpit-historie { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .5rem; }
.historia { display: block; padding: 1.1rem 1.3rem; color: var(--kb-tekst); border: 1px solid var(--kb-linia); }
.historia:hover { text-decoration: none; box-shadow: 0 2px 12px rgba(58,52,41,.12); }
.historia.szansa { background: #fff8e6; border-color: #f0d9a0; border-left: 4px solid var(--kb-uwaga); }
.historia.ryzyko { background: #fdf1f1; border-color: #f0c6c8; border-left: 4px solid var(--kb-czerwony); }
.historia-liczba { font-size: 1.9rem; font-weight: 700; color: var(--kb-grafit); font-variant-numeric: tabular-nums; }
.historia-opis { font-size: .88rem; color: var(--kb-tekst); margin-top: .3rem; line-height: 1.4; }
.historia-link { font-size: .857rem; font-weight: 600; color: var(--kb-czerwony); margin-top: .6rem; }

@media (max-width: 980px) {
    .pulpit-gora { grid-template-columns: 1fr; }
    .pulpit-kpi { grid-template-columns: repeat(2, 1fr); }
    .pulpit-historie { grid-template-columns: 1fr; }
}

/* ── Komentarz analityczny AI ─────────────────────────────────────────────
   Wizualnie oddzielony od twardych liczb: to interpretacja, nie pomiar.
   Utrzymany w palecie panelu, znak „AI" grafitowy, akcent po lewej. */
.ai-komentarz {
    background: var(--kb-panel); border: 1px solid var(--kb-linia);
    border-left: 4px solid var(--kb-grafit); padding: 1rem 1.2rem; margin-bottom: 1.5rem;
}
.ai-komentarz-glowa { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.ai-znak {
    font-size: .857rem; font-weight: 700; letter-spacing: .8px; color: #fff;
    background: var(--kb-grafit); padding: .12rem .4rem; border-radius: 2px;
}
.ai-tytul { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); letter-spacing: .2px; }
.ai-tresc { font-size: .95rem; line-height: 1.55; color: var(--kb-tekst); margin: 0; }
.ai-tresc.ai-generuje { color: var(--kb-szary); font-style: italic; }
.ai-stopka { margin-top: .6rem; font-size: .857rem; color: var(--kb-szary); }

/* ── Terminowość dostaw ───────────────────────────────────────────────────── */
.term-pasek { display: flex; height: 22px; border-radius: 2px; overflow: hidden; border: 1px solid var(--kb-linia); }
.term-seg { height: 100%; }
.term-seg.term-nacz, .kropka-l.term-nacz { background: var(--kb-ok); }
.term-seg.term-op1,  .kropka-l.term-op1  { background: #e8b53a; }
.term-seg.term-op2,  .kropka-l.term-op2  { background: #dd7f2e; }
.term-seg.term-op3,  .kropka-l.term-op3  { background: var(--kb-czerwony); }
.term-legenda { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .7rem; font-size: .857rem; color: var(--kb-tekst); }
.kropka-l { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: baseline; }
.term-mini { background: var(--kb-pasek); border: 1px solid var(--kb-linia); border-radius: 2px; height: 14px; width: 100%; }
.term-mini-fill { height: 100%; border-radius: 1px; }
.term-mini-fill.ok  { background: var(--kb-ok); }
.term-mini-fill.sr  { background: #dd7f2e; }
.term-mini-fill.zle { background: var(--kb-czerwony); }
.term-pokrycie { margin: 0; font-size: .95rem; color: var(--kb-tekst); }
/* .term-badge to ta sama plakietka co .badge (ksztalt w sekcji plakietek) - tu juz tylko warianty. */
.term-b-ok    { background: var(--kb-ok-tlo); color: var(--kb-ok-tekst); }
.term-b-po    { background: var(--kb-uwaga-tlo); color: var(--kb-uwaga-tekst); }
.term-b-alarm { background: var(--kb-blad-tlo); color: var(--kb-blad); }
.term-b-w     { background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi); }
.term-seg.term-niew, .kropka-l.term-niew { background: #7a1418; }
.term-niewyslane-info { margin: -.4rem 0 1rem; font-size: .88rem; color: var(--kb-tekst); }

/* ── Kompas AI — globalny czat ────────────────────────────────────────────── */
.kompas-widget { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.kompas-fab {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    background: var(--kb-grafit); color: #fff; border: none; border-radius: 50%;
    width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0;
    font-size: .857rem; font-weight: 600; box-shadow: 0 4px 16px rgba(58,52,41,.25);
    transition: background .12s ease, box-shadow .12s ease;
}
.kompas-fab:hover { background: #4a443a; box-shadow: 0 0 0 2px #fff, 0 6px 20px rgba(0,0,0,.4); }
.kompas-fab { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.35); }
.kompas-fab-znak { font-size: .857rem; font-weight: 800; letter-spacing: .5px; background: rgba(255,255,255,.22); padding: .1rem .35rem; border-radius: 3px; }
.kompas-fab.otwarty .kompas-fab-tekst { display: none; }
/* Pigułka „AI Kompas AI” zasłaniała ostatnią kolumnę tabel (kwoty, plakietki) także na komputerze.
   Tekst zostaje dla czytników ekranu, widać samo koło (audyt wyglądu 16.09.2026). */
.kompas-fab .kompas-fab-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kompas-fab-znak { background: none; padding: 0; }
.content { padding-bottom: 4.5rem; }

/* Telefon: pelna pigulka „AI Kompas AI" siedzi w prawym dolnym rogu i zaslania
   ostatni wiersz tresci — na zrzutach z iPhone'a przykrywala liczbe sztuk w karcie
   komponentu. Zostaje sam znaczek AI (44 px, czyli minimum pod palec wg wytycznych
   Apple i Google), a tresc dostaje na dole miejsce, zeby nie chowac sie pod nim. */
@media (max-width: 640px) {
    .kompas-widget { right: 12px; bottom: 12px; }
    .kompas-fab { border-radius: 50%; padding: 0; width: 44px; height: 44px; justify-content: center; gap: 0; }
    .kompas-fab .kompas-fab-tekst { display: none; }
    .kompas-fab-znak { font-size: .857rem; background: none; padding: 0; }
    .content { padding-bottom: 4.5rem; }
}

/* D-87 pkt 1 (badacz 1443, odbiór 1.1.210): przycisk AI w górnym pasku zamiast w rogu ekranu. Pływający w rogu zasłaniał
   ostatnią kolumnę tabel (kwoty w Wysyłkach podglądu firmy) i stopkę z wersją w Kolejce hali — margines na dole pomagał
   tylko na końcu strony, a nie w środku długiej tabeli. Okno czatu otwiera się pod paskiem, po prawej. */
.topbar .kompas-widget { position: static; display: flex; align-items: center; gap: 0; z-index: auto; }
.topbar .kompas-fab {
    width: 34px; height: 34px; background: transparent; border: 1px solid rgba(255,255,255,.55);
    box-shadow: none; color: #fff;
}
.topbar .kompas-fab:hover, .topbar .kompas-fab.otwarty { background: rgba(255,255,255,.16); box-shadow: none; }
/* Pod paskiem menu (pasek z logo 56 px + menu 48 px), żeby okno nie zasłaniało nawigacji. */
.topbar .kompas-panel { position: fixed; right: 16px; top: 112px; z-index: 900; max-height: calc(100vh - 128px); color: var(--kb-tekst); }
.content { padding-bottom: 1.5rem; }
@media (max-width: 640px) {
    .topbar .kompas-widget { right: auto; bottom: auto; }
    .topbar .kompas-fab { width: 40px; height: 40px; }
    /* Telefon: okno od dołu ekranu, na całą szerokość — jak dawniej, tylko przycisk jest w pasku. */
    .topbar .kompas-panel { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-width: none; max-height: calc(100vh - 80px); }
    .content { padding-bottom: 1.5rem; }
}

.kompas-panel {
    width: 370px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px);
    background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 8px;
    box-shadow: 0 12px 40px rgba(58,52,41,.28); display: flex; flex-direction: column; overflow: hidden;
}
.kompas-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; background: var(--kb-grafit); color: #fff; }
.kompas-tytul { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; }
.kompas-znak { font-size: .857rem; font-weight: 800; letter-spacing: .5px; background: rgba(255,255,255,.2); padding: .1rem .35rem; border-radius: 3px; }
.kompas-akcje { display: flex; gap: .2rem; }
.kompas-ikona { background: transparent; border: none; color: rgba(255,255,255,.8); cursor: pointer; font-size: 1rem; padding: .1rem .35rem; border-radius: 3px; }
.kompas-ikona:hover { background: rgba(255,255,255,.15); color: #fff; }

.kompas-tresc { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; background: var(--kb-tlo); }
.kompas-prywatnosc { padding: .45rem .65rem; border-top: 1px solid var(--kb-linia); background: #fff8e8; color: #6b4b00; font-size: .857rem; line-height: 1.35; }
.kompas-komunikat { padding: .4rem .65rem; background: #fdebec; color: #8b1d23; font-size: .857rem; line-height: 1.35; }
.kompas-witaj { font-size: .857rem; color: var(--kb-szary); line-height: 1.5; padding: .3rem 0; }
.kompas-msg { max-width: 85%; padding: .5rem .7rem; border-radius: 10px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.kompas-user { align-self: flex-end; background: var(--kb-czerwony); color: #fff; border-bottom-right-radius: 3px; }
.kompas-assistant { align-self: flex-start; background: var(--kb-panel); border: 1px solid var(--kb-linia); color: var(--kb-tekst); border-bottom-left-radius: 3px; }
.kompas-mysli { color: var(--kb-szary); font-style: italic; }

.kompas-wejscie { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--kb-linia); background: var(--kb-panel); }
.kompas-input { flex: 1; resize: none; border: 1px solid var(--kb-linia-mocna); border-radius: 6px; padding: .45rem .6rem; font: inherit; font-size: .88rem; }
.kompas-input:focus { border-color: var(--kb-czerwony); }
.kompas-send { align-self: stretch; background: var(--kb-czerwony); color: #fff; border: none; border-radius: 6px; padding: 0 .8rem; cursor: pointer; font-size: 1rem; }
.kompas-send:disabled { background: var(--kb-linia-mocna); cursor: default; }
.term-filtr { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; }
.term-filtr-etyk { font-size: .857rem; font-weight: 600; color: var(--kb-szary); }
.term-filtr-select { padding: .4rem .6rem; border: 1px solid var(--kb-linia-mocna); border-radius: 2px; font: inherit; font-size: var(--kb-fs-m); min-width: 220px; max-width: 360px; background: var(--kb-panel); }
.term-filtr-select:focus { border-color: var(--kb-czerwony); }
.term-filtr { flex-wrap: wrap; }
.term-wariant-etyk { margin-inline-start: .6rem; }
/* Wariant terminowosci to zwykly segment - ksztalt i kolor wyboru stoja w sekcji "Segment"
   (nizej w pliku). Wybor jest grafitowy; czerwien zostaje marce i alarmowi w danych. */
.term-wariant-opis { margin: -.6rem 0 1.2rem; font-size: .857rem; color: var(--kb-szary); font-style: italic; }
/* Wiersz rozwinięty i jego szczegóły mają ten sam znacznik i to samo tło — widać, że to
   jedna całość. Żółte #fdf7ea wyglądało jak ostrzeżenie, a otwarcie wiersza nie ostrzega.
   Wcięcie 40px zaczyna szczegóły pod treścią wiersza, nie pod jego znacznikiem.
   Odstęp daje teraz komórka, więc .term-szczegol i .term-szczegol-lad mają padding 0 —
   inaczej marginesy dodawałyby się podwójnie. */
.wiersz-aktywny > td { background: var(--kb-pasek); }
.wiersz-aktywny > td:first-child { box-shadow: inset 3px 0 0 var(--kb-grafit); }
.term-szczegol-wiersz > td { background: var(--kb-pasek); padding: 4px 16px 16px 40px; box-shadow: inset 3px 0 0 var(--kb-grafit); }
.term-szczegol { padding: 0; }
.term-szczegol-lad { display: block; padding: 0; color: var(--kb-szary); font-style: italic; }
.term-szczegol-podsum { font-size: .86rem; color: var(--kb-tekst); margin-bottom: .6rem; }
.term-brak-wydan { font-size: .86rem; color: var(--kb-blad); font-weight: 600; }
.tabela-wewn { margin: 0; background: var(--kb-panel); }
.tabela-wewn th { background: var(--kb-pasek); font-size: .857rem; }
.tabela-wewn td, .tabela-wewn th { padding: .35rem .6rem; }
.term-szczegol-tytul { font-size: .857rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--kb-szary); margin: .8rem 0 .35rem; }
.term-brak-poz { color: var(--kb-czerwony); font-weight: 700; }

/* Podgląd firmy-partnera — nagłówek z akcją i zakładki sekcji */
.page-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* ── Rząd zakładek w treści — jedna definicja na cały panel ────────────────
   Były trzy rzędy o trzech wysokościach i dwóch kolorach podkreślenia: .taby
   w portalu, .adm-zakladki w administracji, .plan-zakladki na produkcji. Stare
   nazwy zostają jako aliasy, bo stan aktywny liczy C# i nazywa się raz .active,
   raz .aktywna — przemianowanie klas w .razor to 13 podmian wewnątrz ciągów
   znakowych, których kompilator nie sprawdzi. */
.taby, .adm-zakladki, .plan-zakladki {
    display: flex; align-items: center; gap: 4px;
    margin: 0 0 1rem; padding: 0;
    border-bottom: 1px solid var(--kb-linia);
    /* Telefon: rząd jedzie w bok, zamiast łamać się na dwie linie — druga linia
       zakładek wisiała nad kreską, a podkreślenie aktywnej lądowało w środku.
       overflow-y: hidden jest obowiązkowe: gdy overflow-x nie jest visible,
       przeglądarka liczy overflow-y jako auto i dokłada pionowy pasek. */
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tab, .adm-zakladka, .plan-zakladka {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    height: 44px; padding: 0 16px;
    border: 0; border-radius: 0; background: transparent;
    font: inherit; font-size: 1rem; font-weight: 400; line-height: 1;
    color: var(--kb-tekst-drugi); white-space: nowrap; cursor: pointer;
}
/* Tło najechania białe, jak w pigułkach filtra .chipy .chip. NIE var(--kb-tlo-hover):
   to alias --kb-wiersz-hover, czyli #f1f3f5 — dokładnie kolor tła strony, na którym
   stoją wszystkie trzy rzędy zakładek. Najechanie nie zmieniałoby nic. */
.tab:hover, .adm-zakladka:hover, .plan-zakladka:hover {
    color: var(--kb-tekst); background: var(--kb-panel);
}
.tab:focus-visible, .adm-zakladka:focus-visible, .plan-zakladka:focus-visible {
    outline: 2px solid var(--kb-czerwony); outline-offset: -2px;
}
/* Napis aktywnej zakładki jest grafitowy, nie czerwony — czerwień niesie samo
   podkreślenie. Inaczej rząd zakładek krzyczy głośniej niż alarmy w danych pod nim.
   Podkreślenie rysuje cień wewnętrzny, a nie ujemny margines nasunięty na kreskę
   rzędu: w kontenerze z przewijaniem taki margines wystaje poza treść. */
.tab.active, .adm-zakladka.aktywna, .plan-zakladka.aktywna {
    color: var(--kb-tekst); font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--kb-czerwony);
}
/* Licznik przy nazwie zakładki (ile zagrożonych zleceń, ile do zamówienia).
   Odstęp od napisu robi gap rodzica, nie margines. Tło z --kb-linia, nie z
   --kb-neutral-tlo: neutralne jest niemal w kolorze tła strony (1,05:1) i pigułka
   znikała. Wariant alarmowy bierze --kb-blad, nie czerwień marki: to liczba
   w danych, nie rama ekranu. */
.tab-licznik, .plan-licznik {
    display: inline-block; margin: 0; padding: 1px 6px;
    border-radius: 999px; background: var(--kb-linia);
    color: var(--kb-tekst); font-size: 12px; font-weight: 600; line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.tab-licznik-alarm, .plan-licznik-zle { background: var(--kb-blad); color: #fff; }

/* Podgląd firmy — pasek narzędzi, klikalne wiersze (drill-down), grupy, sumy */
.podglad-narzedzia { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.podglad-szukaj { max-inline-size: 20rem; }
.check-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--kb-tekst); cursor: pointer; }
.check-inline input { cursor: pointer; }
.podglad-licznik { margin-inline-start: auto; font-size: .857rem; color: var(--kb-szary); font-variant-numeric: tabular-nums; }
.tabela-klik tbody .klik-wiersz { cursor: pointer; }
.tabela-klik tbody .klik-wiersz:hover > td { background: var(--kb-wiersz-hover); }
/* Nagłówek grupy w środku listy. Bez wersalików — w tym miejscu stoi nazwa klienta
   albo miesiąc, czyli dana; wersaliki zamieniają daną w etykietę i spowalniają czytanie.
   Kreska u góry, bo grupa zaczyna się tu, a nie kończy. */
.grupa-naglowek > td { background: var(--kb-pasek); font-weight: 700; font-size: var(--kb-fs-s); color: var(--kb-grafit); padding: 8px 12px; border-top: 1px solid var(--kb-linia-mocna); }
/* Suma zamyka listę, więc kreska nad nią jest mocniejsza niż linie wierszy — grafit, nie szarość. */
.tabela-suma > td { font-weight: 700; border-top: 2px solid var(--kb-grafit); background: var(--kb-panel); }
.szczegol-para-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem .9rem; }
.szczegol-para { font-size: .86rem; color: var(--kb-tekst); }
.szczegol-para > span { color: var(--kb-szary); margin-inline-end: .4rem; }

/* Podgląd firmy — daty, chipy statusów, sortowanie, po terminie, akcje drill */
.pole-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .857rem; color: var(--kb-szary); }
.pole-data { inline-size: 9.5rem; }
.btn-eksport { font-weight: 600; }
.chipy { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.chipy .chip { height: var(--kb-chip-h); padding: 0 12px; font: inherit; font-size: var(--kb-fs-s); line-height: 1; border: 1px solid var(--kb-ramka-pola); border-radius: 4px; background: var(--kb-panel); color: var(--kb-tekst); cursor: pointer; }
.chipy .chip:hover { background: var(--kb-pasek); border-color: var(--kb-grafit); }
/* Chipy statusu w Podglądzie firmy. Zasięg .chipy jest konieczny — także dla nieaktywnych: niżej w tym pliku
   stoi druga reguła .chip (pasek „założone filtry”), która przy tej samej wadze nadpisywała tło, kolor, wymiary
   i hover — aktywny chip wyglądał jak nieaktywny, tylko pogrubiony (Łukasz, 16.09.2026; audyt portalu). */
.chipy .chip-akt, .chipy .chip-akt:hover { background: var(--kb-grafit); color: #fff; border-color: var(--kb-grafit); font-weight: 600; }
/* Po terminie to alarm w danych, czyli --kb-blad. Czerwień marki zostaje dla ramy. */
.wiersz-poterminie > td:first-child { box-shadow: inset 3px 0 0 var(--kb-blad); }
/* "Po terminie" to alarm w danych, wiec --kb-blad, nie czerwien marki. Bez wersalikow - plakietka
   ma sie czytac jednym rzutem oka, a wersaliki czyta sie wolniej niz tekst zwykly. */
.znacznik-poterminie { display: inline-flex; align-items: center; margin-inline-start: .4rem; min-height: 22px; padding: 0 8px; font-size: var(--kb-fs-xs); font-weight: 600; line-height: 1.2; color: #fff; background: var(--kb-blad); border-radius: 4px; white-space: nowrap; }
.drill-akcje { padding: .2rem 1rem .4rem; }

/* Telefon: tabele portalu jako karty (etykieta: wartość) — koniec przewijania w bok.
   .tabela-karty to sam układ kartowy dla tabeli, która nie jest ani klikalna, ani zagnieżdżona
   (np. pozycje zamówienia składanego przez partnera) — poza telefonem nie zmienia niczego. */
@media (max-width: 640px) {
  .tabela-klik thead, .tabela-wewn thead, .tabela-karty thead { display: none; }
  .tabela-klik tfoot, .tabela-klik tfoot tr { display: block; }
  .tabela-klik tfoot tr.tabela-suma { display: flex; justify-content: space-between; gap: .5rem; }
  .tabela-klik tfoot tr.tabela-suma > td { display: block; border-top: none; }
  .tabela-klik tfoot tr.tabela-suma > td:empty { display: none; }
  .tabela-klik, .tabela-klik tbody, .tabela-wewn, .tabela-karty, .tabela-wewn tbody, .tabela-karty tbody { display: block; width: 100%; }
  .tabela-klik tr, .tabela-wewn tr, .tabela-karty tr { display: block; }

  /* wiersz danych = karta */
  .tabela-klik tbody tr.klik-wiersz {
    border: 1px solid var(--kb-linia-mocna); border-radius: 5px; background: var(--kb-panel);
    margin-bottom: .55rem; padding: .15rem .1rem;
  }
  .tabela-klik tbody tr.klik-wiersz.wiersz-aktywny { border-color: var(--kb-grafit); box-shadow: inset 3px 0 0 var(--kb-grafit); }
  .tabela-klik tbody tr.klik-wiersz.wiersz-poterminie { box-shadow: inset 3px 0 0 var(--kb-blad); }

  .tabela-klik td, .tabela-wewn td, .tabela-karty td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border: none; padding: .3rem .8rem; text-align: right;
  }
  .tabela-klik td::before, .tabela-wewn td::before, .tabela-karty td::before {
    content: attr(data-label); font-weight: 600; color: var(--kb-szary); text-align: left; flex: 0 0 auto;
  }

  /* Komórka bez data-label nie ma czego wyrównać do prawej — sam „ogon" wartości
     przy prawej krawędzi wygląda jak zepsuty układ. Bez etykiety wracamy więc do
     zwykłego bloku do lewej. Dzięki temu tabela, której nikt nie opisał, jest na
     telefonie po prostu czytelna, zamiast czytelnie zepsuta. */
  .tabela-klik td:not([data-label]), .tabela-wewn td:not([data-label]), .tabela-karty td:not([data-label]) {
    display: block; text-align: left;
  }
  .tabela-klik td:not([data-label])::before, .tabela-wewn td:not([data-label])::before, .tabela-karty td:not([data-label])::before {
    content: none;
  }
  /* Komórka pusta nie zasługuje na własny wiersz karty. */
  .tabela-klik td:empty, .tabela-wewn td:empty, .tabela-karty td:empty { display: none; }

  /* nagłówek grupy — pełna szerokość, nie karta */
  .tabela-klik tbody tr.grupa-naglowek { margin-top: .35rem; }
  .tabela-klik tbody tr.grupa-naglowek td { display: block; text-align: left; }
  .tabela-klik tbody tr.grupa-naglowek td::before { content: none; }

  /* wiersz szczegółów (drill) — tylko BEZPOŚREDNIA komórka pełną szerokością,
     żeby nie kasować podpisów w zagnieżdżonej tabeli pozycji */
  .tabela-klik tbody tr.term-szczegol-wiersz > td,
  .tabela-klik tbody tr.wiersz-szczegoly > td { display: block; text-align: left; padding: 4px 8px 12px 14px; }
  .tabela-klik tbody tr.term-szczegol-wiersz > td::before,
  .tabela-klik tbody tr.wiersz-szczegoly > td::before { content: none; }

  /* pozycje w drill: podpisy + suma */
  .tabela-wewn tbody tr, .tabela-karty tbody tr { border: 1px solid var(--kb-linia); border-radius: 4px; margin-bottom: .4rem; padding: .1rem 0; }
  .tabela-wewn tfoot, .tabela-karty tfoot, .tabela-wewn tfoot tr, .tabela-karty tfoot tr, .tabela-wewn tfoot td, .tabela-karty tfoot td { display: block; }
  .tabela-suma > td { justify-content: flex-end; font-weight: 700; }
  .tabela-suma > td::before { content: none; }
  /* „Razem” i kwota w jednej linii — wcześniej rozpadały się na dwie linie do lewej z podwójną kreską. */
  .tabela-wewn tfoot tr.tabela-suma, .tabela-karty tfoot tr.tabela-suma { display: flex; justify-content: space-between; gap: .5rem; border-top: 2px solid var(--kb-linia-mocna); }
  .tabela-wewn tfoot tr.tabela-suma > td, .tabela-karty tfoot tr.tabela-suma > td { display: block; border-top: none; }
  /* Chip statusu wygodny pod palec. */
  .chipy .chip { padding: 0 14px; }
}


/* Pulpit zarządu — mierniki gauge (ApexCharts RadialBar) */
.pulpit-mierniki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.miernik-karta { background: var(--kb-panel); border: 1px solid var(--kb-linia); padding: .5rem .4rem .7rem; text-align: center; }
.miernik-etyk { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); margin-top: -.4rem; }
@media (max-width: 820px) { .pulpit-mierniki { grid-template-columns: 1fr; } }

/* Raport Sprzedaż — donut grup obok tabeli */
.grupy-uklad { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; align-items: start; }
.grupy-donut { min-width: 0; }
@media (max-width: 820px) { .grupy-uklad { grid-template-columns: 1fr; } }

/* Raporty — rząd wykresów (gauge + donut) */
.wykresy-lejek { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1rem; margin-bottom: 1rem; align-items: start; }
.wykres-karta { background: var(--kb-panel); border: 1px solid var(--kb-linia); padding: .6rem .7rem .8rem; }
.wykres-tytul { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); margin-bottom: .3rem; text-align: center; }
@media (max-width: 820px) { .wykresy-lejek { grid-template-columns: 1fr; } }
.wykres-szeroki { grid-column: span 2; }

/* --- Raport SAP: sprzedaż wg odbiorcy ------------------------------------- */
.rok-picker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.rok-picker label { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); }
.rok-picker select {
    padding: .38rem .6rem; font-size: .9rem; border: 1px solid var(--kb-linia-mocna);
    border-radius: 4px; background: var(--kb-panel); color: var(--kb-tekst); cursor: pointer;
}
/* .box-info stoi w bloku „Komunikaty" — tutejsza druga definicja wygrywała kaskadą. */

.tabela-narzedzia { display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.filtr-input {
    flex: 0 1 22rem; padding: .4rem .6rem; font-size: .88rem;
    border: 1px solid var(--kb-linia-mocna); border-radius: 4px; background: var(--kb-panel); color: var(--kb-tekst);
}
.filtr-czysc {
    border: 1px solid var(--kb-linia); background: var(--kb-pasek); color: var(--kb-szary);
    border-radius: 4px; padding: .3rem .55rem; cursor: pointer; line-height: 1;
}
.filtr-czysc:hover { background: #fdf2f2; color: var(--kb-czerwony); }

.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--kb-czerwony); }
.karet { color: var(--kb-szary); font-size: max(.8em, 12px); display: inline-block; width: .9em; }
/* Bez !important: tło otwartego wiersza jest takie samo jak tło najechania, więc nie ma
   z czym walczyć. Pogrubienie znikło — otwarcie wiersza nie zmienia wagi danych. */
.wiersz-otwarty > td { background: var(--kb-pasek); }
.wiersz-otwarty > td:first-child { box-shadow: inset 3px 0 0 var(--kb-grafit); }
.wiersz-szczegoly > td { background: var(--kb-pasek); padding: 4px 16px 16px 40px; box-shadow: inset 3px 0 0 var(--kb-grafit); }
.wiersz-szczegoly:hover td { background: var(--kb-pasek); }

.stopka-zrodlo { font-size: .857rem; color: var(--kb-szary); }

/* Filtr jako lista rozwijana (raport SAP) */
.filtr-lista-etyk { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); }
.filtr-lista {
    width: 24rem; max-width: 100%; height: var(--kb-wys-kontrolki); padding: 0 .6rem; font-size: var(--kb-fs-m);
    border: 1px solid var(--kb-ramka-pola); border-radius: 4px; background: var(--kb-panel); color: var(--kb-tekst); cursor: pointer;
}

/* Wiele filtrów obok siebie (raport SAP) */
.tabela-narzedzia { flex-wrap: wrap; align-items: flex-end; gap: .9rem; }
.filtr-pole { display: flex; flex-direction: column; gap: .22rem; }
.filtr-lista-waska { width: 11rem; }

/* Pola zakresu dat Od–Do (raport SAP) */
.data-input {
    height: var(--kb-wys-kontrolki); padding: 0 .5rem; font-size: var(--kb-fs-m); border: 1px solid var(--kb-ramka-pola);
    border-radius: 4px; background: var(--kb-panel); color: var(--kb-tekst); cursor: pointer;
}
.rok-picker-sep { color: var(--kb-linia-mocna); margin: 0 .3rem; }
.rok-picker { flex-wrap: wrap; row-gap: .5rem; }

/* Kod waluty przy wartości „Wg SAP" */
.waluta-kod { color: var(--kb-szary); font-size: max(.82em, 12px); margin-left: .15rem; }

/* Saldo ujemne (nadpłata) */
.saldo-ujemne { color: var(--kb-ok); }

/* Tabela wiekowania (wąskie kolumny kubełków) */
.tabela-wiek { font-size: .857rem; }
.tabela-wiek th, .tabela-wiek td { padding: .32rem .45rem; }
.wiek-przet { color: var(--kb-czerwony); font-weight: 600; }
.wiek-tylko-przet { display: inline-flex; align-items: center; gap: .35rem; font-size: .857rem; color: var(--kb-grafit); cursor: pointer; }

/* Rachunek zysków i strat (P&L) */
.tabela-pnl td { padding: .34rem .55rem; }
.pnl-grupa td { border-top: 1px solid var(--kb-linia); font-weight: 600; }
.pnl-grupa:hover td { background: var(--kb-pasek); }
.pnl-nazwa { color: var(--kb-grafit); }
.pnl-konto td { background: #fbfbfc; font-weight: 400; }
.pnl-konto.wiersz-klikalny:hover td { background: #f3f4f7; }
/* Trzeci poziom: księgowania konta — zagnieżdżona tabela w jednej komórce wiersza. */
.pnl-ksieg td { background: #f6f7f9; padding: .35rem .8rem .7rem 2.6rem !important; }
.tabela-ksieg { width: 100%; border-collapse: collapse; font-size: .857rem; }
.tabela-ksieg th { text-align: left; font-weight: 600; color: var(--kb-szary); padding: .15rem .5rem; border-bottom: 1px solid var(--kb-linia); }
.tabela-ksieg td { padding: .15rem .5rem; border-bottom: 1px dotted var(--kb-linia); white-space: nowrap; }
.tabela-ksieg td.opis { white-space: normal; max-width: 34rem; }
.tabela-ksieg td.liczba, .tabela-ksieg th.liczba { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-ksieg tr.suma td { border-bottom: none; font-weight: 600; }
.pnl-ksieg .pusto, .pnl-ksieg .ladowanie { padding: .2rem 0; font-size: .857rem; }
.pnl-nazwa-konto { padding-left: 2.2rem !important; color: var(--kb-szary); font-size: .857rem; }
.pnl-przychod .pnl-grupa td.liczba b { color: var(--kb-ok); }
.pnl-wynik-panel { border-top: 3px solid var(--kb-grafit); }
.pnl-wynik-body { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pnl-wynik-etyk { font-weight: 600; font-size: 1rem; color: var(--kb-grafit); }
.pnl-wynik-kwota { font-weight: 700; font-size: 1.4rem; }
.pnl-zysk { color: var(--kb-ok); }
.pnl-strata { color: var(--kb-czerwony); }

/* P&L — układ sprawozdawczy */
.pnl-sekcja td { background: var(--kb-pasek); font-weight: 600; color: var(--kb-grafit); border-top: 1px solid var(--kb-linia-mocna); padding-top: .5rem; }
.pnl-suma td { border-top: 2px solid var(--kb-linia-mocna); border-bottom: 1px solid var(--kb-linia); background: #fbfbfc; }
.pnl-wynik-row td { border-top: 3px solid var(--kb-grafit); font-size: 1.05rem; }
.pnl-wynik-row.pnl-zysk td { color: var(--kb-ok); }
.pnl-wynik-row.pnl-strata td { color: var(--kb-czerwony); }

/* P&L — ujęcie miesięczne */
.tabela-pnl-mies { font-size: .857rem; white-space: nowrap; }
.tabela-pnl-mies th, .tabela-pnl-mies td { padding: .3rem .5rem; }
.tabela-pnl-mies td:first-child, .tabela-pnl-mies th:first-child { position: sticky; left: 0; background: var(--kb-panel); font-weight: 600; }
.pnl-mies-wynik td { border-top: 2px solid var(--kb-linia-mocna); font-weight: 700; color: var(--kb-ok); }

/* Pulpit — notka o źródłach danych (SAP vs HydraSys) */
.zrodlo-nota {
    margin: -.25rem 0 1rem;
    padding: .5rem .75rem;
    font-size: .857rem;
    line-height: 1.4;
    color: var(--kb-tekst-drugi);
    background: var(--kb-panel-2, rgba(0,0,0,.03));
    border-left: 3px solid var(--kb-czerwony);
    border-radius: 4px;
}

/* Pulpit — znacznik źródła HydraSys na kaflach lejka */
.pulpit-mierniki .miernik-karta, .pulpit-historie .historia { position: relative; }
.zrodlo-tag {
    position: absolute; top: .45rem; right: .45rem; z-index: 2;
    font-size: .857rem; font-weight: 700; letter-spacing: .02em;
    padding: .08rem .4rem; border-radius: 999px;
    background: rgba(199,119,0,.14); color: #c77700;
    border: 1px solid rgba(199,119,0,.4);
    cursor: help; text-transform: none; white-space: nowrap;
}

/* ---- Pozycja gotówkowa --------------------------------------------------- */
.gotowka-uklad { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1000px) { .gotowka-uklad { grid-template-columns: 1fr; } }
.gotowka-waluty { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: center; }
@media (max-width: 720px) { .gotowka-waluty { grid-template-columns: 1fr; } }
.gotowka-donut { min-width: 0; }
.gotowka-plynnosc { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: center; }
@media (max-width: 720px) { .gotowka-plynnosc { grid-template-columns: 1fr; } }

.plynnosc-liczby { display: flex; flex-direction: column; gap: .55rem; }
.plynnosc-belka-glowa { display: flex; justify-content: space-between; font-size: .857rem; margin-bottom: .2rem; }
.plynnosc-tor { height: 10px; background: var(--kb-pasek); border-radius: 6px; overflow: hidden; }
.plynnosc-wypelnienie { height: 100%; border-radius: 6px; }
.plynnosc-wypelnienie.wolne { background: var(--kb-ok); }
.plynnosc-wypelnienie.znaczone { background: var(--kb-uwaga); }
.plynnosc-wiersz { display: flex; justify-content: space-between; align-items: baseline; padding-top: .5rem; border-top: 1px solid var(--kb-linia); font-size: .9rem; }
.plynnosc-wiersz.plynnosc-wynik { font-weight: 700; border-top: 2px solid var(--kb-linia-mocna); }
.plynnosc-wynik.dobrze .plynnosc-wart { color: var(--kb-ok); }
.plynnosc-wynik.alarm .plynnosc-wart { color: var(--kb-czerwony); }
.plynnosc-etyk { color: var(--kb-tekst-drugi); }

.znacznik.kat-wolne { background: var(--kb-ok-tlo); color: var(--kb-ok-tekst); }
.znacznik.kat-znaczone { background: var(--kb-uwaga-tlo); color: var(--kb-uwaga-tekst); }
.znacznik.kat-wdrodze { background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi); }

/* Pozycja gotówkowa — drill-down ruchów konta */
.ruchy-wiersz > td { background: #fafbfc; padding: 0; }
.ruchy-blok { padding: .6rem .75rem .8rem; }
.ruchy-glowa { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; font-size: .857rem; font-weight: 600; color: var(--kb-grafit); }
.ruchy-podsum { font-weight: 400; color: var(--kb-szary); }
.ruchy-laduje, .ruchy-pusto { padding: .5rem .25rem; color: var(--kb-szary); font-size: .857rem; }
.tabela-ruchy { font-size: .857rem; }
.tabela-ruchy th, .tabela-ruchy td { padding: .3rem .5rem; }
.dodatnie { color: var(--kb-ok); }

/* Objaśnienia wskaźników dla zarządu (rozwijane) */
.objasnienia { margin: -.3rem 0 1.1rem; border: 1px solid var(--kb-linia); background: var(--kb-panel); border-radius: 4px; }
.objasnienia > summary { cursor: pointer; padding: .5rem .75rem; font-size: .857rem; font-weight: 600; color: var(--kb-grafit); list-style: none; }
.objasnienia > summary::before { content: "ⓘ"; margin-right: .45rem; color: var(--kb-czerwony); }
.objasnienia[open] > summary { border-bottom: 1px solid var(--kb-linia); }
.objasnienia p { margin: 0; padding: .55rem .85rem; font-size: .857rem; line-height: 1.5; color: var(--kb-tekst); border-top: 1px solid var(--kb-pasek); }
.objasnienia p:first-of-type { border-top: none; }
.objasnienia b { color: var(--kb-grafit); }

/* Pulpit — Co wymaga uwagi (alerty) */
.pulpit-alerty { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; padding: .55rem .75rem; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-left: 4px solid var(--kb-uwaga); border-radius: 4px; }
.pulpit-alerty.alerty-ok { border-left-color: var(--kb-ok); }
.alerty-tytul { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); margin-right: .3rem; }
.alert-chip { display: inline-block; font-size: .857rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; }
a.alert-chip:hover { text-decoration: none; filter: brightness(.96); }
.alert-chip.ok { background: #eaf5ec; color: #1f6b2b; }
.alert-chip.uwaga { background: #fff2dc; color: #8a5300; }
.alert-chip.alarm { background: #fdecec; color: var(--kb-czerwony); }

/* Pulpit — domeny finansowe */
.pulpit-domeny { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .pulpit-domeny { grid-template-columns: 1fr; } }
.domena { display: block; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-top: 3px solid var(--kb-linia-mocna); padding: .8rem .9rem .9rem; color: var(--kb-tekst); transition: border-top-color .12s, box-shadow .12s; }
a.domena:hover { text-decoration: none; border-top-color: var(--kb-czerwony); box-shadow: 0 2px 10px rgba(58,52,41,.12); }
.domena-tytul { font-size: .857rem; font-weight: 600; color: var(--kb-szary); text-transform: uppercase; letter-spacing: .5px; display: flex; justify-content: space-between; align-items: baseline; }
.domena-okres { font-size: .857rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--kb-szary); background: var(--kb-pasek); padding: .05rem .35rem; border-radius: 3px; }
.domena-liczba { font-size: 1.5rem; font-weight: 700; color: var(--kb-grafit); margin: .3rem 0 .1rem; }
.domena-liczba.spadek { color: var(--kb-czerwony); }
.domena-liczba.wzrost { color: var(--kb-ok); }
.domena-jedn { font-size: .857rem; font-weight: 500; color: var(--kb-szary); }
.domena-etyk { font-size: .857rem; color: var(--kb-tekst-drugi, #5f5a50); }
.domena-pod { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--kb-pasek); font-size: .857rem; color: var(--kb-szary); }
.domena-pod .wzrost { color: var(--kb-ok); }
.domena-pod .spadek { color: var(--kb-czerwony); }
.domena-pod .uwaga-txt, .domena-pod.uwaga-txt { color: var(--kb-uwaga-tekst); }

/* Pulpit — kapitał obrotowy i obsługa długu (rotacja) */
.pulpit-rotacja { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1rem; padding: .7rem .9rem; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 4px; }
.rota-tytul { font-size: .857rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--kb-szary); margin-right: .3rem; display: inline-flex; align-items: center; gap: .4rem; }
.rota-item { display: flex; flex-direction: column; gap: .1rem; }
.rota-item .rota-etyk { font-size: .857rem; color: var(--kb-szary); }
.rota-item b { font-size: 1.15rem; color: var(--kb-grafit); }
.rota-item b.dodatnie { color: var(--kb-ok); }
.rota-item b.spadek { color: var(--kb-czerwony); }
.rota-jedn { font-size: .857rem; font-weight: 500; color: var(--kb-szary); }

/* Bilans zarządczy */
.bilans-uklad { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
@media (max-width: 900px) { .bilans-uklad { grid-template-columns: 1fr; } }
.tabela-bilans td { padding: .32rem .6rem; }
.tabela-bilans .bilans-podpoz { padding-left: 1.4rem; color: var(--kb-tekst-drugi, #5f5a50); }
.tabela-bilans .bilans-poz-suma td { border-top: 1px solid var(--kb-linia); background: var(--kb-pasek); }
.tabela-bilans .bilans-poz-suma td b { color: var(--kb-grafit); }
.bilans-suma-glowna td { border-top: 2px solid var(--kb-linia-mocna); font-weight: 700; }
.bilans-check { margin: -.4rem 0 1rem; padding: .45rem .75rem; font-size: .857rem; font-weight: 600; color: #1f6b2b; background: #eaf5ec; border: 1px solid #c6dfc8; border-radius: 4px; }
.wsk-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.wsk-kafel { border: 1px solid var(--kb-linia); border-left: 3px solid var(--kb-czerwony); padding: .6rem .7rem; background: var(--kb-panel); }
.wsk-etyk { font-size: .857rem; color: var(--kb-szary); margin-bottom: .2rem; }
.wsk-wart { font-size: 1.25rem; font-weight: 700; color: var(--kb-grafit); }

/* Zakładanie kontrahenta */
.kontr-panel { max-width: 900px; }
.kontr-nip-rzad { display: flex; gap: .7rem; align-items: flex-end; margin-bottom: .5rem; }
.kontr-info { font-size: .857rem; color: var(--kb-szary); margin-bottom: .6rem; }
.kontr-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .6rem 0; }
@media (max-width: 700px) { .kontr-siatka { grid-template-columns: 1fr; } }
.kontr-pole { display: flex; flex-direction: column; gap: .2rem; }
.kontr-pole.kontr-szer { grid-column: 1 / -1; }
.kontr-pole label { font-size: .857rem; font-weight: 600; color: var(--kb-grafit); }
.kontr-pole input, .kontr-pole select { padding: 0 .55rem; border: 1px solid var(--kb-ramka-pola); border-radius: 4px; font: inherit; background: #fff; }
.kontr-pole input:disabled { background: var(--kb-pasek); color: var(--kb-szary); }
.kontr-pole.pole-wymagany input, .kontr-pole.pole-wymagany select { border-color: var(--kb-czerwony); background: #fdf1f1; }
.kontr-uwaga { font-size: .857rem; color: var(--kb-uwaga-tekst); }
.kontr-statusy { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .8rem; }
/* Plakietki VAT/VIES to .badge pod inna nazwa - ksztalt w sekcji plakietek, tu same warianty. */
.kontr-badge.ok { background: var(--kb-ok-tlo); color: var(--kb-ok-tekst); }
.kontr-badge.uwaga { background: var(--kb-uwaga-tlo); color: var(--kb-uwaga-tekst); }
.kontr-badge.zle { background: var(--kb-blad-tlo); color: var(--kb-blad); }
.kontr-akcje { margin-top: .6rem; }
/* .btn-akcja, .btn-link-akcja i .btn-primary: wyglad wspolny dla calego panelu — koniec arkusza. */





/* Modal uprawnień */
.modal-tlo { position: fixed; inset: 0; background: rgba(40,36,28,.55); display: grid; place-items: center; z-index: 1000; padding: 1rem; }
.modal-okno { background: #fff; border-radius: 6px; max-width: 720px; width: 100%; padding: 1.3rem 1.5rem 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
/* Okno dostaje fokus programowo (tabindex=-1), więc nie rysujemy wokół niego ramki; fokus widać na polach wewnątrz. */
.modal-okno:focus { outline: none; }
.modal-glowa { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.modal-glowa h2 { font-size: 1.1rem; margin: 0; color: var(--kb-grafit); }
.modal-znak { font-size: 1.3rem; }
.modal-intro { font-size: .9rem; margin: 0 0 .7rem; }
.modal-lista { margin: 0 0 .8rem; padding-left: 1.3rem; }
.modal-lista li { font-size: .86rem; line-height: 1.5; margin-bottom: .55rem; }
.modal-stopka { font-size: .857rem; color: var(--kb-szary); font-style: italic; margin: 0 0 1rem; }
.modal-akcje { display: flex; justify-content: flex-end; gap: .6rem; }

/* Nowy kontrahent — sekcje i checkboxy */
.kontr-sekcja { font-size: .857rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kb-czerwony); margin: 1rem 0 .3rem; padding-bottom: .25rem; border-bottom: 1px solid var(--kb-linia); }
.kontr-checki { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .5rem 0; }
.kontr-checki label { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; cursor: pointer; }

/* Nowy kontrahent — dopracowanie wyglądu (override) */
.kontr-panel { max-width: 1000px; }
.kontr-panel .panel-body { padding: 1.2rem 1.3rem 1.3rem; }
.kontr-nip-rzad { background: linear-gradient(0deg, var(--kb-pasek), #fff); border: 1px solid var(--kb-linia); border-left: 3px solid var(--kb-czerwony); border-radius: 6px; padding: .75rem .85rem; gap: .6rem; align-items: end; }
.kontr-nip-rzad .kontr-pole { flex: 0 0 clamp(180px, 30%, 280px); }
.kontr-siatka { grid-template-columns: repeat(3, 1fr); gap: .75rem 1rem; margin: .55rem 0; }
@media (max-width: 900px) { .kontr-siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .kontr-siatka { grid-template-columns: 1fr; } }
.kontr-pole label { font-size: .857rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kb-szary); font-weight: 600; }
.kontr-pole input, .kontr-pole select { height: var(--kb-wys-formularz); border-radius: 4px; transition: border-color .12s ease; }
.kontr-pole input:hover, .kontr-pole select:hover { border-color: var(--kb-grafit); }
.kontr-pole input:focus, .kontr-pole select:focus { border-color: var(--kb-czerwony); }
.kontr-pole.pole-wymagany input, .kontr-pole.pole-wymagany select { box-shadow: 0 0 0 3px rgba(212,40,47,.10); }
.kontr-sekcja { display: flex; align-items: center; gap: .5rem; margin: 1.35rem 0 .55rem; font-size: .857rem; border-bottom: none; padding-bottom: 0; color: var(--kb-grafit); }
.kontr-sekcja::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kb-czerwony); }
.kontr-sekcja::after { content: ""; flex: 1; height: 1px; background: var(--kb-linia); }
.kontr-checki { background: var(--kb-pasek); border: 1px solid var(--kb-linia); border-radius: 6px; padding: .6rem .85rem; gap: 1.5rem; }
.kontr-checki label { font-weight: 500; }
.kontr-checki input[type=checkbox] { accent-color: var(--kb-czerwony); width: 16px; height: 16px; }
.kontr-statusy { margin: .35rem 0 .1rem; min-height: 1.6rem; }
.kontr-uwaga { margin-top: .15rem; }
.kontr-akcje { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--kb-linia); }

.kontr-nip-rzad .btn-akcja { height: var(--kb-wys-formularz); font-weight: 600; }

/* Nowy kontrahent — równe kolumny (grid nie może rozpychać się długimi opcjami select) */
.kontr-siatka .kontr-pole { min-width: 0; }
.kontr-pole input, .kontr-pole select { width: 100%; max-width: 100%; box-sizing: border-box; }
.kontr-pole select { text-overflow: ellipsis; }

/* ── Kontrola kursów NBP — plakietki statusu, podświetlenia wierszy, przełącznik ── */
/* Jedna plakietka na caly panel. .znacznik, .term-badge i .kontr-badge to tylko starsze nazwy
   tego samego ksztaltu - dopoki mialy wlasne reguly, ta sama tresc miala trzy promienie i trzy paddingi. */
.badge, .znacznik, .term-badge, .kontr-badge {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 22px; padding: 0 8px; border-radius: 4px;
    font-size: var(--kb-fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: middle;
    text-transform: none; letter-spacing: 0;
}
/* Kolor tekstu zawsze z tokenu *-tekst: bursztyn #c77700 jako napis miał 3,07:1 (audyt 16.09.2026). */
.badge-ok        { background: var(--kb-ok-tlo); color: var(--kb-ok-tekst); }
.badge-zle       { background: var(--kb-blad-tlo); color: var(--kb-blad); }
.badge-uwaga     { background: var(--kb-uwaga-tlo); color: var(--kb-uwaga-tekst); }
.badge-neutralny { background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi); }
/* „W realizacji” to zwykły stan, nie ostrzeżenie: biała z obrysem. Kształt odróżnia ją od wypełnionych. */
.badge-proces    { background: #fff; color: var(--kb-tekst); box-shadow: inset 0 0 0 1px var(--kb-ramka-pola); }
.badge-anul      { background: var(--kb-neutral-tlo); color: var(--kb-tekst-drugi); }
/* D-87 B7 (1.1.211): wstrzymane — szara pełna (biały na #5f6368 = 6,3:1); gotowe do wysyłki — informacyjna niebieska. */
.badge-wstrzymane { background: #5f6368; color: #fff; }
.badge-gotowe    { background: var(--kb-info-tlo); color: var(--kb-info-tekst); box-shadow: inset 0 0 0 1px var(--kb-info-linia); }
/* D-90 B2: ikona stanu — rozpoznawalny bez koloru (WCAG 1.4.1). */
.badge-ikona     { font-weight: 700; line-height: 1; }
/* Wymaga działania (np. „3 dni po terminie”): pełne wypełnienie. */
.badge-mocna     { background: var(--kb-blad); color: #fff; }

/* Uprawnienia wolaja .badge-blad ("Administrator") - bez tej reguly plakietka byla przezroczysta. */
.badge-blad      { background: var(--kb-blad-tlo); color: var(--kb-blad); }
/* Długie statusy ofert („Zamknięta - utworzono nową”) łamią się w plakietce, zamiast zabierać miejsce kontrahentowi. */
.tabela td.of-status .badge { white-space: normal; }
.tabela td.kol-osoba { white-space: nowrap; }

.tabela tr.wiersz-alert  > td { background: #fdf2f2; }
.tabela tr.wiersz-uwaga  > td { background: #fdf7ec; }

.przelacznik {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .857rem; color: var(--kb-tekst); cursor: pointer; user-select: none;
}
.przelacznik input { width: 1rem; height: 1rem; accent-color: var(--kb-czerwony); cursor: pointer; }

/* ── Nowa oferta (moduł handlowy) ── */
.of-szukaj { display:flex; gap:.5rem; align-items:center; }
.of-szukaj-input { flex:1; }
.of-wyniki { display:flex; flex-direction:column; gap:1px; margin:.4rem 0; border:1px solid var(--kb-linia); border-radius:4px; overflow:hidden; max-height:240px; overflow-y:auto; }
.of-wyniki-mat { position:relative; z-index:5; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.of-wynik { text-align:left; padding:.45rem .6rem; background:#fff; border:0; border-bottom:1px solid var(--kb-linia); cursor:pointer; font-size:.857rem; }
.of-wynik:hover { background:var(--kb-pasek); }
.of-wybrany { display:flex; justify-content:space-between; align-items:center; padding:.6rem .8rem; background:var(--kb-pasek); border-radius:4px; }
.of-hint { font-size:var(--kb-fs-xs); color:var(--kb-szary); margin-top:.2rem; line-height:1.5; }
.of-poz-head { display:flex; justify-content:space-between; align-items:center; }
.of-tabela-wrap { overflow-x:auto; }
.of-tabela th, .of-tabela td { vertical-align:top; padding:.4rem .45rem; }
.of-tabela input, .of-tabela select, .of-tabela textarea { width:100%; box-sizing:border-box; padding:.3rem .4rem; font-size: var(--kb-fs-m); }
.of-num { text-align:right; }
.of-idx { display:flex; gap:.3rem; }
.of-idx-input { flex:1; }
.of-nazwa { margin-top:.3rem; }
.of-sumy-lbl { text-align:right; color:var(--kb-szary); }
.btn-mini { border:1px solid var(--kb-ramka-pola); background:#fff; border-radius:4px; cursor:pointer; padding:.3rem .45rem; line-height:1; }
.btn-mini:hover { background:var(--kb-pasek); }

/* ── Nowe zamówienie ── */
.of-tryb { display:flex; gap:.6rem; align-items:center; margin-top:.7rem; }
.of-oferty-head { padding:.4rem .6rem; font-size:.857rem; color:var(--kb-szary); background:var(--kb-pasek); font-weight:600; }
.of-badge { display:inline-block; margin-left:.25rem; color:var(--kb-czerwony); font-weight:700; }

/* ── Lista ofert: klikalny wiersz + drill-down pozycji ── */
.of-wiersz-klik { cursor:pointer; }
/* Bez prefiksu .tabela ta reguła przegrywała z „.tabela tbody tr:hover td" wyżej w pliku
   i wiersz klikalny nie różnił się niczym od zwykłego. */
.tabela tbody tr.of-wiersz-klik:hover > td { background:var(--kb-wiersz-hover); }
.tabela tr.of-drill > td { background:var(--kb-pasek); padding:4px 16px 16px 40px; box-shadow:inset 3px 0 0 var(--kb-grafit); }
.of-drill-tab { margin:0; box-shadow:none; }
.of-drill-tab th { font-size:.857rem; color:var(--kb-szary); }
.of-drill-tab th, .of-drill-tab td { padding:.3rem .45rem; }

/* ── Kolory modułów ────────────────────────────────────────────────────────────
   Każdy moduł ma własny, bardzo delikatny odcień tła i jeden kolor akcentu.
   Celowo stonowane (tło ~2% nasycenia): czerwień Kocher+Beck ma pozostać jedynym
   mocnym kolorem w interfejsie, a odcień ma tylko podpowiadać „gdzie jestem".        */
.shell[data-modul="raportowanie"]   { --kb-modul: #2f6db4; --kb-modul-tlo: #e9f1fa; }  /* sprzedaż — stalowy błękit */
.shell[data-modul="zarzad-finanse"] { --kb-modul: #2e7d63; --kb-modul-tlo: #e8f4ef; }  /* finanse — stonowana zieleń */
.shell[data-modul="portal-klienta"] { --kb-modul: #1f7a8c; --kb-modul-tlo: #e7f3f6; }  /* portal — morski */
.shell[data-modul="modul-handlowy"] { --kb-modul: #b4671f; --kb-modul-tlo: #faefe3; }  /* handel — bursztyn */
.shell[data-modul="konstrukcja"]    { --kb-modul: #1f5fa8; --kb-modul-tlo: #e7eff8; }  /* konstrukcja — błękit kalki technicznej */
.shell[data-modul="jchat"]           { --kb-modul: #6b4fa0; --kb-modul-tlo: #efeaf7; }  /* czat — stonowany fiolet, jedyny moduł bez liczb */
.shell[data-modul="administracja"]  { --kb-modul: #5a5f66; --kb-modul-tlo: #edeff1; }  /* administracja — grafit */
.shell[data-modul="produkcja"]      { --kb-modul: #45607a; --kb-modul-tlo: #eaeff4; }  /* hala — stal */
.shell[data-modul="ai"]             { --kb-modul: #8a3f6b; --kb-modul-tlo: #f7eaf1; }  /* asystent — śliwka */

/* Liczby na Pulpicie. Klikalne, każda prowadzi do ekranu, z którego pochodzi. */
.pul-liczby {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-block-end: 1.1rem;
}
.pul-liczba {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .95rem; text-decoration: none;
  background: var(--kb-panel); border: 1px solid var(--kb-linia);
  border-inline-start: 3px solid var(--kb-grafit); border-radius: 5px;
}
.pul-liczba:hover { border-color: var(--kb-linia-mocna); }
.pul-liczba-etykieta { font-size: .857rem; font-weight: 600; color: var(--kb-szary); }
.pul-liczba-wartosc { font-size: 1.714rem; font-weight: 700; color: var(--kb-tekst); font-variant-numeric: tabular-nums; }
.pul-liczba-opis { font-size: .857rem; color: var(--kb-szary); }
/* Waluta i procent mniejsze od samej liczby — liczba ma być tym, co widać najpierw. */
.pul-liczba-waluta { font-size: .95rem; font-weight: 600; color: var(--kb-szary); }
.pul-liczba-udzial { font-size: .95rem; font-weight: 600; color: var(--kb-szary); margin-inline-start: .35rem; }
/* Liczba, przy której ktoś ma coś do zrobienia — czerwona krawędź, nie czerwona plama. */
.pul-liczba-uwaga { border-inline-start-color: var(--kb-blad); }
.pul-dobrze { color: var(--kb-ok-tekst); }

@media (max-width: 640px) { .pul-liczby { grid-template-columns: repeat(2, 1fr); } }

/* Kolorujemy WYŁĄCZNIE kafle — tło strony i reszta interfejsu zostają neutralne.
   Kafel modułu na pulpicie bierze kolor po data-modul, a kafle ekranów wewnątrz
   modułu dziedziczą kolor tego modułu z powłoki. */
.tile[data-modul="raportowanie"],
.shell[data-modul="raportowanie"] .tile   { background: #e9f1fa; border-color: #cfe0f2; }
.tile[data-modul="zarzad-finanse"],
.shell[data-modul="zarzad-finanse"] .tile { background: #e8f4ef; border-color: #cbe5db; }
.tile[data-modul="portal-klienta"],
.shell[data-modul="portal-klienta"] .tile { background: #e7f3f6; border-color: #c9e3e9; }
.tile[data-modul="modul-handlowy"],
.shell[data-modul="modul-handlowy"] .tile { background: #faefe3; border-color: #eddac4; }
.tile[data-modul="jchat"],
.shell[data-modul="jchat"] .tile           { background: #efeaf7; border-color: #ddd3ee; }
.tile[data-modul="administracja"],
.shell[data-modul="administracja"] .tile  { background: #edeff1; border-color: #d8dcdf; }
.tile[data-modul="produkcja"],
.shell[data-modul="produkcja"] .tile      { background: #eaeff4; border-color: #ccd8e2; }
.tile[data-modul="konstrukcja"],
.shell[data-modul="konstrukcja"] .tile    { background: #e7eff8; border-color: #ccdcef; }
.tile[data-modul="ai"],
.shell[data-modul="ai"] .tile             { background: #f7eaf1; border-color: #e9cfdd; }

/* Ikona i tytuł w kolorze modułu — kafel czyta się jako całość, nie jako sama plama. */
.tile[data-modul] .tile-title { color: var(--kb-modul-kafel, var(--kb-tekst)); }
.tile[data-modul="raportowanie"]   { --kb-modul-kafel: #245a96; }
.tile[data-modul="zarzad-finanse"] { --kb-modul-kafel: #26654f; }
.tile[data-modul="portal-klienta"] { --kb-modul-kafel: #196373; }
.tile[data-modul="modul-handlowy"] { --kb-modul-kafel: #92531a; }
.tile[data-modul="jchat"]           { --kb-modul-kafel: #57408a; }
.tile[data-modul="administracja"]  { --kb-modul-kafel: #4a4f55; }
.tile[data-modul="produkcja"]      { --kb-modul-kafel: #3a5169; }
.tile[data-modul="konstrukcja"]    { --kb-modul-kafel: #1a5090; }
.tile[data-modul="ai"]             { --kb-modul-kafel: #733257; }

/* Firma nieaktywna na liście „bez zamówień" — obecna, ale nie licząca się do potencjału. */
.wiersz-nieaktywny > td { opacity:.55; }

/* Nagłówek sekcji „zamówienia z oferty" w rozwinięciu wiersza. */
.of-zam-naglowek { margin:.8rem 0 .3rem; font-size:.857rem; font-weight:600; color:var(--kb-szary); text-transform:uppercase; letter-spacing:.03em; }

/* Pierwotny termin, gdy produkcja go przesunęła — przekreślony, jak nieaktualna obietnica. */
.zam-plan-stary { text-decoration:line-through; color:var(--kb-szary); }

/* Pasek postępu produkcji w wierszu zamówienia. */
.zam-postep { display:flex; flex-direction:column; gap:.15rem; min-width:7rem; }
.zam-postep-bar { height:5px; background:var(--kb-linia); border-radius:3px; overflow:hidden; }
.zam-postep-bar > span { display:block; height:100%; background:var(--kb-ok); }
.zam-postep-txt { font-size:.857rem; white-space:nowrap; }
.zam-szczegoly { display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; font-size:.857rem; padding:.2rem 0 .4rem; }
.zam-uwagi { flex-basis:100%; color:var(--kb-szary); }

/* Pasek stanu łączności w topbarze: trzy kropki (VPN, baza, jakość). */
.stan-lacza { display:flex; align-items:center; gap:.3rem; margin-right:.9rem; font-size:.857rem; color:#cfc9bd; white-space:nowrap; }
/* Jedna definicja kropki na caly panel. Druga, nizej w pliku, ustawiala szare tlo juz PO
   .stan-ok/.stan-uwaga/.stan-zle - przy tej samej wadze wygrywala i kolor stanu nigdy nie dochodzil. */
.stan-kropka { width:8px; height:8px; border-radius:50%; display:inline-block;
               background:var(--kb-szary); flex:0 0 auto; align-self:center; }
.stan-ok { background:#4caf50; }
.stan-uwaga { background:#e0a800; }
.stan-zle { background:#e5484d; animation:stan-puls 1.6s ease-in-out infinite; }
.stan-etyk { margin-right:.45rem; }
@keyframes stan-puls { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (max-width:720px) { .stan-lacza .stan-etyk { display:none; } }

/* Nagłówek pulpitu: liczba jest linkiem, wykres obok ma własne odnośniki miesięczne. */
.hero-link { display:block; color:inherit; text-decoration:none; }
.hero-link:hover .hero-liczba { color:var(--kb-czerwony); }

/* Klikalny słupek wykresu — prowadzi do faktur z danego miesiąca. */
.wykres a.wykres-link { cursor: pointer; }
.wykres a.wykres-link:hover rect:first-child { filter: brightness(1.12); }

/* Konkret pod etykietą kondycji: kwota stojąca za procentem. */
.kondycja-konkret { display:block; font-size:.857rem; color:var(--kb-szary); margin-top:.1rem; }
.kondycja-etyk { display:flex; flex-direction:column; }

/* Odnośnik „skąd ta liczba" pod głównym wskaźnikiem pulpitu. */
/* width:fit-content + justify-self:start — element siatki bywa rozdmuchiwany do całej
   komórki, przez co klikalne robi się tło zamiast samego odnośnika. */
.hero-skad {
    display:inline-block; width:fit-content; justify-self:start;
    margin-top:.5rem; font-size:.857rem; color:var(--kb-czerwony); text-decoration:underline;
}
.hero-skad:hover { color:var(--kb-czerwony-ciemny); }

/* ── Uzgodnienie sprzedaży ─────────────────────────────────────────────────
   Rachunek „jak na kartce": znak, opis, liczba dokumentów, kwota. Duże liczby
   i wyraźna kreska nad wynikiem, żeby dało się to przeczytać jednym spojrzeniem. */
.uzg-rachunek { display: flex; flex-direction: column; gap: .1rem; }
.uzg-wiersz {
    display: grid; grid-template-columns: 2rem 1fr auto 11rem;
    gap: .75rem; align-items: baseline;
    padding: .6rem .2rem; border-bottom: 1px solid var(--kb-linia);
}
.uzg-znak { font-size: 1.3rem; color: var(--kb-szary); text-align: center; }
.uzg-minus { color: var(--kb-blad); }
.uzg-opis { display: flex; flex-direction: column; gap: .1rem; }
.uzg-dopisek { font-size: .857rem; color: var(--kb-szary); }
.uzg-ile { font-size: .857rem; color: var(--kb-szary); white-space: nowrap; }
.uzg-kwota { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }

.uzg-wiersz.uzg-wynik {
    border-top: 2px solid var(--kb-grafit); border-bottom: none;
    margin-top: .35rem; padding-top: .8rem;
}
.uzg-wynik .uzg-kwota { font-size: 1.6rem; font-weight: 700; }
.uzg-wynik .uzg-znak { color: var(--kb-grafit); }
.uzg-nota { font-size: .857rem; color: var(--kb-szary); margin-top: .9rem; }
.tabela tr.uzg-nasz > td { background: var(--kb-pasek); }
@media (max-width: 640px) {
    .uzg-wiersz { grid-template-columns: 1.5rem 1fr; }
    .uzg-ile, .uzg-kwota { grid-column: 2; text-align: left; }
}

/* Pasek filtrów listy ofert — zawija się na wąskim ekranie zamiast rozpychać stronę. */
.of-filtry { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; margin-bottom:1rem; }
.of-filtr { display:flex; flex-direction:column; gap:.2rem; min-width:11rem; }
.of-filtr-szeroki { min-width:20rem; flex:1; }
/* Akcja na pasku filtrów (eksport) — dosuwana do prawej i wyrównana do dolnej krawędzi pól. */
.of-filtr-akcja { min-width:0; margin-inline-start:auto; justify-content:flex-end; }
/* Pola zakresu wlasnego na pasku filtrow — wezsze niz listy wyboru. */
.of-filtr-daty { min-width:9rem; }
.of-filtr-daty .data-input { inline-size:100%; }
.of-filtr-akcja .btn-link-akcja { white-space:nowrap; }
/* Stan realizacji oferty: odznaki zamowienia i ZP obok siebie, z odstepem. */
.of-real { white-space:nowrap; }
.of-real .badge + .badge { margin-inline-start:.3rem; }
/* Akcja w wierszu oferty (przeksztalcenie / pokaz zamowienie) — bez lamania w dwie linie. */
.of-akcja { white-space:nowrap; }
/* Wybor okresu nad rachunkiem wynikow. */
.pnl-okres { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem 1rem; margin-bottom:1rem; }
.pnl-daty { display:flex; align-items:end; gap:.5rem; }
.pnl-okres-opis { color:var(--kb-szary); font-size:.857rem; padding-block-end:.35rem; }
/* Wiersz pomocniczy w uzgodnieniu ("w tym ...") — wciety i przygaszony. */
.uzg-podwiersz { opacity:.75; font-size:.9em; }
.uzg-podwiersz .uzg-opis { padding-inline-start:1rem; }

/* Portfel zamowien na pulpicie — jedyna sekcja patrzaca w przod. */
.portfel { background:var(--kb-panel); border:1px solid var(--kb-linia); border-radius:6px; padding:1rem 1.1rem; margin-bottom:1rem; }
.portfel-glowa { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:.7rem; }
.portfel-tytul { font-weight:700; font-size:1.02rem; }
.portfel-zrodlo { font-size:.857rem; color:var(--kb-szary); }
.portfel-tresc { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:stretch; }
.portfel-suma { display:block; min-width:15rem; padding:.6rem .8rem; border-radius:5px; background:var(--kb-pasek);
                border:1px solid var(--kb-linia); color:var(--kb-tekst); text-decoration:none; }
.portfel-suma:hover { border-color:var(--kb-czerwony); text-decoration:none; }
.portfel-liczba { font-size:1.7rem; font-weight:700; line-height:1.2; }
.portfel-etyk { font-size:.857rem; color:var(--kb-szary); }
.portfel-pod { margin-top:.35rem; font-size:.857rem; }
.portfel-miesiace { display:flex; flex-wrap:wrap; gap:.5rem; flex:1; }
.portfel-mies { display:flex; flex-direction:column; gap:.1rem; min-width:8.5rem; padding:.5rem .7rem;
                border:1px solid var(--kb-linia); border-radius:5px; color:var(--kb-tekst); text-decoration:none; }
.portfel-mies:hover { border-color:var(--kb-czerwony); background:var(--kb-pasek); text-decoration:none; }
.portfel-mies.zalegle { border-color:var(--kb-blad); }
.portfel-mies.zalegle .pm-kwota { color:var(--kb-blad); }
.pm-etyk { font-size:.857rem; color:var(--kb-szary); text-transform:uppercase; letter-spacing:.03em; }
.pm-kwota { font-weight:700; }
.pm-szt { font-size:.857rem; color:var(--kb-szary); }
.portfel-uwaga { margin-top:.7rem; font-size:.857rem; color:var(--kb-szary); }

/* Pasek zalozonych filtrow nad lista: znaczniki z wartoscia i krzyzykiem do zdjecia. */
.filtry-aktywne { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 .9rem; }
.filtry-aktywne-etyk { font-size:.857rem; text-transform:uppercase; letter-spacing:.04em; color:var(--kb-szary); }
.chip {
    display:inline-flex; align-items:center; gap:.35rem;
    height:var(--kb-chip-h); padding:0 12px; border:1px solid var(--kb-ramka-pola); border-radius:4px;
    background:#fff; color:var(--kb-tekst); font-size:var(--kb-fs-s);
    cursor:pointer; line-height:1; white-space:nowrap;
}
.chip:hover { border-color:var(--kb-grafit); background:var(--kb-pasek); }
.chip-etyk { color:var(--kb-tekst-drugi); }
.chip-wart { font-weight:600; }
/* Licznik przy chipie ("3 z 895") - ta sama waga i ten sam szary co etykieta wartosci. */
.chip-licznik { margin-inline-start:.3rem; font-weight:600; color:var(--kb-tekst-drugi); font-variant-numeric:tabular-nums; }
.chip-x { color:var(--kb-szary); font-size:1rem; }
.chip:hover .chip-x { color:var(--kb-czerwony); }
.chip-staly { cursor:default; background:transparent; }
.chip-staly:hover { border-color:var(--kb-ramka-pola); background:transparent; }
/* Wybrany chip jest grafitowy, nie czerwony: czerwien zostaje marce, nawigacji i alarmowi w danych.
   Zrodlem prawdy jest aria-pressed, wiec wyglad nie rozjedzie sie z tym, co slyszy czytnik ekranu. */
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover {
    background:var(--kb-grafit); border-color:var(--kb-grafit); color:#fff; font-weight:600;
}
.chip[aria-pressed="true"] .chip-licznik,
.chip-akt .chip-licznik { color:var(--kb-na-grafit); }
/* D-90 B3 (1.1.211): „Po terminie (N)” — alarm w danych, więc czerwony obrys i napis, wybrany pełny czerwony. */
.chip-alarm { border-color: var(--kb-blad); color: var(--kb-blad); }
.chip-alarm .chip-licznik { color: var(--kb-blad); }
.chip-alarm[aria-pressed="true"], .chip-alarm[aria-pressed="true"]:hover { background: var(--kb-blad); border-color: var(--kb-blad); color: #fff; }
.chip-alarm[aria-pressed="true"] .chip-licznik { color: #fff; }
/* Dotyk: chip i segment maja miec 44 px pod palec. Jedna regula na cala rodzine zamiast
   poprawki w kazdym ekranie - wysokosc bierze sie z tokenu. */
@media (pointer: coarse) {
    :root { --kb-chip-h: 44px; }
}
.filtry-wyczysc { margin-inline-start:.3rem; }

/* Pole szukania z listą podpowiedzi (kontrahenci + numery ofert).
   Lista „wisi" nad treścią (position:absolute), żeby nie rozpychała paska filtrów. */
.of-szukaj-pole { position:relative; flex:1; }
.of-szukaj-pole .of-szukaj-input { width:100%; }
.of-szukaj-pole .of-wyniki {
    position:absolute; inset-inline:0; top:100%; z-index:20;
    margin-top:.2rem; background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.of-szukaj { align-items:flex-start; }
.of-podp-typ {
    display:inline-block; min-width:5.5rem;
    font-size:.857rem; text-transform:uppercase; letter-spacing:.03em;
    color:var(--kb-szary);
}

/* Nagłówek sortowalny: strzałka pokazuje aktywną kolumnę i kierunek. Strzałkę wstawia
   Strzalka() w .razor jako tekst wewnątrz th, więc nie przesuwa kolumny i nie ma tu ::after.
   Dwie nazwy tej samej rzeczy (sortuj / sort) w jednej regule — do 17.09.2026
   Handlowy, Obecność i Portal miały trzy różne zachowania hovera na tym samym gestze.
   Hover grafitowy, nie czerwony: w danych czerwień znaczy „błąd”, a nie „można kliknąć”. */
.tabela th.sortuj, .tabela th.sort { cursor:pointer; user-select:none; white-space:nowrap; }
.tabela th.sortuj:hover, .tabela th.sort:hover { background:var(--kb-neutral-tlo); color:var(--kb-tekst); }

/* Wiersz nagłówka grupy z podsumą. */
.tabela tr.of-grupa > td {
    background:var(--kb-pasek); border-top:2px solid var(--kb-czerwony);
    font-size:.857rem; padding:.4rem .6rem;
}

/* Oferta po terminie ważności — delikatne wyróżnienie, bez krzyku. */
.of-wiersz-przeterm > td:first-child { box-shadow:inset 3px 0 0 var(--kb-blad); }

/* Wybór kontrahenta z listy (oferta/zamówienie) */
.of-kontrah-select { width:100%; max-width:42rem; padding:.5rem .6rem; box-sizing:border-box; }

/* ── Kalendarz produkcji ── */
.kalprod-pasek { display:flex; justify-content:space-between; align-items:center; margin:.2rem 0 .8rem; }
.kalprod-nawig { display:flex; align-items:center; gap:.6rem; }
.kalprod-miesiac { font-weight:600; color:var(--kb-grafit); min-width:11rem; text-align:center; font-size:1.02rem; }
.kalprod-legenda { display:flex; flex-wrap:wrap; gap:1rem; font-size:.857rem; color:var(--kb-szary); margin-bottom:.8rem; }
.kalprod-legenda span { display:inline-flex; align-items:center; gap:.35rem; }
.kalprod-p { width:.85rem; height:.85rem; border-radius:3px; display:inline-block; border:1px solid var(--kb-linia); }
.kalprod-p.kalprod-ok    { background:#e9f6ec; border-color:var(--kb-ok); }
.kalprod-p.kalprod-uwaga { background:#fbf2e0; border-color:var(--kb-uwaga); }
.kalprod-p.kalprod-blad  { background:#fdecec; border-color:var(--kb-blad); }
.kalprod-p.kalprod-wolny { background:var(--kb-pasek); }

.kalprod-siatka { display:grid; grid-template-columns:repeat(7, minmax(6.4rem, 1fr)); gap:6px; }
.kalprod-naglowek { text-align:center; font-size:.857rem; text-transform:uppercase; letter-spacing:.02em; color:var(--kb-szary); font-weight:600; padding:.2rem 0; }
.kalprod-dzien { min-height:5.6rem; border:1px solid var(--kb-linia); border-left-width:3px; border-radius:5px; background:#fff; padding:.35rem .45rem; display:flex; flex-direction:column; gap:.28rem; }
.kalprod-poza { border:0; background:transparent; min-height:0; }
.kalprod-ok    { background:#f2faf4; border-left-color:var(--kb-ok); }
.kalprod-uwaga { background:#fdf6e9; border-left-color:var(--kb-uwaga); }
.kalprod-blad  { background:#fdeeee; border-left-color:var(--kb-blad); }
.kalprod-wolny { background:var(--kb-pasek); border-left-color:var(--kb-linia-mocna); color:var(--kb-szary); }
.kalprod-pusty { background:#fff; border-left-color:var(--kb-linia); }
.kalprod-glowa { display:flex; justify-content:space-between; align-items:center; gap:.3rem; flex-wrap:wrap; row-gap:.15rem; }
.kalprod-glowa .badge { max-width:100%; min-height:0; padding:.05rem .35rem; white-space:normal; line-height:1.15; }
.kalprod-nr { font-weight:600; color:var(--kb-grafit); }
.kalprod-swieto { font-size:.857rem; color:var(--kb-blad); text-align:right; line-height:1.05; }
.kalprod-metryka-lbl { font-size:.857rem; color:var(--kb-tekst); }
.kalprod-bar { height:5px; border-radius:3px; background:#e6e8eb; overflow:hidden; margin-top:1px; }
.kalprod-bar span { display:block; height:100%; background:var(--kb-linia-mocna); }
.kalprod-ok    .kalprod-bar span { background:var(--kb-ok); }
.kalprod-uwaga .kalprod-bar span { background:var(--kb-uwaga); }
.kalprod-blad  .kalprod-bar span { background:var(--kb-blad); }
.kalprod-stany { display:flex; gap:.25rem; margin-top:.1rem; }
.kalprod-stany .badge { font-size:.857rem; padding:.05rem .35rem; }
@media (max-width:720px){ .kalprod-siatka { min-width:60rem; } .panel-body { overflow-x:auto; } }

.of-hint-zle { color: var(--kb-blad); font-weight:600; }

.kalprod-klik { cursor:pointer; transition:box-shadow .1s, transform .1s; }
.kalprod-klik:hover { box-shadow:0 0 0 2px var(--kb-czerwony) inset; }
.modal-okno.modal-szeroki { max-width:60rem; width:92%; }

/* Oznaczenie „Twoje" — dni, w których partner ma własne zlecenia (widoczne tylko dla partnera). */
.kalprod-twoje {
    display:inline-block; margin-top:.25rem;
    font-size:.857rem; font-weight:700; line-height:1;
    padding:.15rem .4rem; border-radius:.5rem;
    background:var(--kb-czerwony); color:#fff;
}
.modal-podtytul { margin:.15rem 0 .6rem; color:var(--kb-szary-tekst,#666); font-size:.857rem; }

/* Panel administracyjny: zakladki, stan dostepu na liscie, szablony rol. */
/* Zakładki „Osoby" / „Przegląd" biorą wygląd ze wspólnego rzędu .taby/.tab wyżej
   w arkuszu — .adm-zakladki i .adm-zakladka są tam wymienione jako aliasy. Własnej
   definicji tu NIE MA celowo: dwa opisy tego samego rzędu rozjeżdżały się przy
   każdej poprawce, a ta leżąc niżej po cichu wygrywała kaskadę. */
.adm-osoba-stan { display:block; font-size:.857rem; color:var(--kb-szary); margin-top:.15rem; }
.adm-osoba.aktywny .adm-osoba-stan { color:inherit; opacity:.85; }
.adm-szablony { display:flex; flex-wrap:wrap; gap:.5rem; }
.adm-wyczysc { color:var(--kb-blad); }
.adm-modul-akcje { display:flex; gap:.75rem; margin:.1rem 0 .3rem 1.6rem; font-size:.857rem; }
.adm-check-nieaktywny { opacity:.5; }
.adm-zmiany { margin-inline-start:.5rem; }
.adm-wiersz-admin { background:var(--kb-pasek); }

/* --- Stan systemu (administracja) ---------------------------------------- */
/* Lista „nazwa — wartość" zamiast kafelków: to ekran do przeczytania w dziesięć sekund,
   kiedy coś nie działa, a nie pulpit do oglądania. */
.stan-lista { max-width: 60rem; }

.stan-wiersz {
    display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
    padding: .7rem .2rem; border-bottom: 1px solid var(--kb-linia);
}

.stan-nazwa { flex: 0 0 14rem; color: var(--kb-szary); font-size: .857rem; }
.stan-wartosc { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.stan-detal { color: var(--kb-szary); font-size: .857rem; }

/* Ksztalt kropki stoi wyzej w pliku (jedna definicja) - tu juz tylko kolory stanu. */
.stan-kropka.dobrze { background: var(--kb-ok); }
.stan-kropka.uwaga { background: var(--kb-uwaga); }
.stan-kropka.zle { background: var(--kb-blad); }

.stan-rozbieznosci { margin: .3rem 0 1rem; }

/* --- Historia kontaktów (CRM) --------------------------------------------- */
/* Oś czasu, nie tabela: te wpisy to zdania po polsku o różnej długości, więc kolumny
   tylko by je łamały. Czyta się je z góry na dół jak notatnik handlowca. */
.kontakty { margin: .6rem 0 .2rem; }

.kontakty-head {
    display: flex; gap: .5rem; align-items: baseline;
    padding-bottom: .35rem; margin-bottom: .5rem; border-bottom: 1px solid var(--kb-linia);
}

.kontakty-tytul { font-weight: 600; font-size: .857rem; color: var(--kb-grafit); }
.kontakty-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }

.kontakt-wpis {
    border-left: 2px solid var(--kb-linia); padding: 0 0 0 .7rem; font-size: .857rem; line-height: 1.45;
}

.kontakt-naglowek { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.kontakt-data { font-weight: 600; font-variant-numeric: tabular-nums; }
.kontakt-osoba { color: var(--kb-grafit); }
.kontakt-tresc { margin-top: .15rem; white-space: pre-wrap; }

.kontakt-dodatki {
    margin-top: .2rem; display: flex; gap: .9rem; flex-wrap: wrap; font-size: .857rem;
}

.kontakt-ocena {
    width: 1rem; height: 1rem; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: .857rem; color: #fff;
}

.kontakt-ocena.dobrze { background: var(--kb-ok); }
.kontakt-ocena.zle { background: var(--kb-blad); }

.kontakt-ponowny { margin-top: .2rem; font-size: .857rem; color: var(--kb-szary); }
.kontakt-ponowny.zalegly { color: var(--kb-uwaga-tekst); font-weight: 600; }

/* Formularz dopisania kontaktu — zwarty, bo siedzi w rozwiniętym wierszu listy,
   a nie na osobnym ekranie. Treść rozmowy dostaje pełną szerokość, bo to jedyne
   pole, w którym naprawdę się pisze. */
.kontakt-form {
    background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 6px;
    padding: .7rem .8rem; margin-bottom: .7rem; display: flex; flex-direction: column; gap: .55rem;
}

.kontakt-form-rzad { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.kontakt-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .857rem; color: var(--kb-szary); }
.kontakt-form label.rozciagnij { flex: 1 1 12rem; }
.kontakt-form-tresc { width: 100%; }
.kontakt-form textarea { width: 100%; resize: vertical; font: inherit; }
.kontakt-form-akcje { margin-left: auto; display: flex; gap: .6rem; align-items: center; }

/* --- Kalkulator cenowy ---------------------------------------------------- */
/* Parametry po lewej, wynik po prawej — wycena zmienia się w trakcie pisania,
   więc obie części muszą być widoczne naraz, bez przewijania. */
.kalk-uklad { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1.1rem; align-items: start; }

@media (max-width: 900px) {
    .kalk-uklad { grid-template-columns: 1fr; }
}

.kalk-pole { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; font-size: .857rem; color: var(--kb-szary); }
.kalk-pole input, .kalk-pole select { font: inherit; padding: .35rem .5rem; }
.kalk-pole-ptak { flex-direction: row; align-items: center; gap: .5rem; }
.kalk-pole-ptak input { width: auto; }
.kalk-kurs { font-size: .857rem; color: var(--kb-szary); }

/* Cena na wierzchu i dużą czcionką — to jedyna liczba, po którą handlowiec tu wchodzi. */
.kalk-cena { display: flex; gap: .9rem; align-items: baseline; margin-bottom: .9rem; }
.kalk-cena-glowna { font-size: 1.9rem; font-weight: 600; color: var(--kb-grafit); font-variant-numeric: tabular-nums; }
.kalk-cena-obok { font-size: 1.05rem; color: var(--kb-szary); font-variant-numeric: tabular-nums; }

.kalk-rozbicie td { vertical-align: baseline; }
.kalk-udzial { text-align: right; color: var(--kb-szary); font-size: .857rem; width: 4rem; }
/* Operacje robocizny wcięte — to rozwinięcie wiersza wyżej, nie osobna pozycja kosztu. */
.kalk-operacja td:first-child { padding-left: 1.6rem; color: var(--kb-szary); font-size: .857rem; }
.kalk-operacja td { border-top: none; }
.kalk-akcje { margin: .9rem 0 .3rem; }

/* Rabaty pakietowe pod rozbiciem ceny — trzy liczby w jednym rzędzie, bo to podpowiedź
   do rozmowy z klientem, a nie osobna tabela. */
.kalk-pakiety { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin: .8rem 0 .2rem; font-size: .857rem; }
.kalk-pakiet { font-variant-numeric: tabular-nums; }
.kalk-pakiet b { margin-right: .3rem; color: var(--kb-szary); font-weight: 600; }

/* Porownanie z wycena wg arkusza — pod cena glowna, drobnym drukiem. */
.kalk-porownanie { font-size: .857rem; color: var(--kb-szary); margin: -.5rem 0 .9rem; }
.kalk-porownanie .kalk-skad { margin-top: .3rem; }
.kalk-porownanie .kalk-przyczyny { margin: .2rem 0 0; padding-left: 1.2rem; }
.kalk-porownanie .kalk-przyczyny b { font-weight: 600; color: inherit; }

/* --- Kalendarz produkcji: widok partnera -----------------------------------------
   Partner nie oglada naszych licznikow zlecen i zebow, tylko stan dnia i wlasne
   wysylki, wiec kafel ma inna hierarchie: stan drobno u gory, "Twoje" mocno nizej. */
.page-podlead { color: var(--kb-szary); margin: -.4rem 0 1rem; max-width: 62ch; }
.kalprod-zastrzezenie { font-size: .857rem; color: var(--kb-szary); margin: -.3rem 0 1rem; max-width: 78ch; }
.kalprod-stan { font-size: .857rem; color: var(--kb-szary); margin-top: .25rem; }
/* Grafit, nie czerwien: czerwien w tej palecie znaczy "problem", a wlasna wysylka
   partnera to informacja wazna, nie alarmujaca. Dzien spokojny z wlasnym zleceniem
   ma wygladac spokojnie. */
.kalprod-twoje-mocno {
    margin-top: .4rem; padding: .3rem .45rem; border-radius: 6px;
    background: color-mix(in srgb, var(--kb-grafit) 10%, transparent);
    border-left: 3px solid var(--kb-grafit); font-size: .857rem; line-height: 1.35;
}
.kalprod-twoje-mocno b { font-size: 1.05rem; }
.kalprod-hint { display: block; font-size: .857rem; color: var(--kb-szary); }
.kalprod-twoj-dzien { box-shadow: inset 0 0 0 1px var(--kb-grafit-jasny); }
.kalprod-p.kalprod-twoj { background: var(--kb-grafit); }
.kalprod-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.kalprod-lista-poz {
    display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
    padding: .55rem .7rem; border: 1px solid var(--kb-linia); border-radius: 8px;
    background: var(--kb-panel); color: inherit; font: inherit; cursor: pointer;
}
.kalprod-lista-poz:hover { border-color: var(--kb-grafit); }
.kalprod-lista-data { font-weight: 600; min-width: 8.5rem; }
.kalprod-lista-ile { color: var(--kb-szary); }

/* --- Rekomendacja terminu dla partnera ------------------------------------------ */
.kalprod-wybor { max-width: 26rem; margin-bottom: .9rem; }
.kalprod-rek { border-left: 3px solid var(--kb-ok); padding: .7rem .9rem; background: #f2faf4; border-radius: 6px; }
.kalprod-rek-glowa { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.kalprod-rek-lbl { color: var(--kb-tekst-drugi); }
.kalprod-rek-data { font-size: 1.35rem; font-weight: 700; }
.kalprod-rek-dni { color: var(--kb-tekst-drugi); }
.kalprod-rek-podstawa { margin: .5rem 0 0; font-size: .86rem; color: var(--kb-tekst-drugi); max-width: 74ch; }
.kalprod-rek-uwaga { margin: .35rem 0 0; font-size: .857rem; color: var(--kb-uwaga-tekst); }
.kalprod-rek-zastrzezenie { margin: .45rem 0 0; font-size: .857rem; color: var(--kb-szary); max-width: 78ch; }
.kalprod-rek-dzien { box-shadow: inset 0 0 0 2px var(--kb-ok); }

/* --- Modul produkcji: zlecenia bez ruchu ------------------------------------------
   Kafle sa filtrami, wiec musza wygladac na klikalne i pokazywac, ktory jest wybrany. */
.prod-kafle { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1rem; }
.prod-kafel {
    flex:1 1 11rem; text-align:left; cursor:pointer; font:inherit;
    background:var(--kb-panel); border:1px solid var(--kb-linia); border-left:3px solid var(--kb-linia-mocna);
    border-radius:5px; padding:.7rem .9rem; display:flex; flex-direction:column; gap:.15rem;
}
.prod-kafel:hover { border-color:var(--kb-linia-mocna); }
.prod-kafel.wybrany { box-shadow:inset 0 0 0 1px var(--kb-grafit); background:var(--kb-pasek); }
.prod-kafel.pilny { border-left-color:var(--kb-blad); }
.prod-kafel.uwaga { border-left-color:var(--kb-uwaga); }
.prod-kafel.nieznany { border-left-color:var(--kb-linia-mocna); border-left-style:dashed; }
.prod-kafel.ok { border-left-color:var(--kb-ok); }
/* Kafel tylko z liczbą (nie jest filtrem ani odnośnikiem): bez ręki i bez podświetlenia przy najechaniu. */
.prod-kafel.informacja { cursor:default; }
.prod-kafel.informacja:hover { border-color:var(--kb-linia); }
.prod-kafel-val { font-size:1.7rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }

/* Lista działań solvera: kafle z kwotą, przyciski odhaczania, ukryte wiersze, pasek historii. */
.solv-kafel-pod { display:block; font-size:.857rem; color:var(--kb-szary); font-variant-numeric:tabular-nums; margin-top:.15rem; }
.solv-filtry { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .8rem; }
.solv-filtry .prod-kafel { padding:.3rem .7rem; min-width:0; }
.solv-akcje { white-space:nowrap; }
.solv-akcje .btn-wiecej { margin-right:.3rem; }
.solv-akcje .szary { display:block; font-size:.857rem; }
tr.solv-ukryte td { opacity:.55; }
.solv-pasek { height:8px; background:var(--kb-pasek); border-radius:4px; overflow:hidden; min-width:120px; }
.solv-pasek > div { height:100%; border-radius:4px; }
.solv-pasek .ok { background:var(--kb-ok); }
.solv-pasek .sr { background:var(--kb-uwaga); }
.solv-pasek .zle { background:var(--kb-blad); }
@media (max-width:640px) { .solv-akcje .btn-wiecej { display:flex; width:100%; margin:.15rem 0; } }
.prod-kafel.pilny .prod-kafel-val { color:var(--kb-blad); }
.prod-kafel-lbl { font-size:.857rem; color:var(--kb-tekst-drugi); }
/* Dopisek pod kafelkiem: liczba, ktora tlumaczy glowna liczbe, zamiast z nia konkurowac
   o miejsce naglowka — backlog marszrut pod „do wziecia teraz", zaleglosc calkowita
   pod „zalegle i na dzis". */
.prod-kafel-dop { font-size:.857rem; color:var(--kb-tekst-drugi); opacity:.85; }
.prod-tabela tr.prod-krytyczny td { background:#fdeeee; }
.prod-tabela tr.prod-po-terminie td { background:#fdf6e9; }
.prod-tabela tr.prod-stoi td { background:var(--kb-pasek); }
.prod-tabela td.liczba { font-variant-numeric:tabular-nums; }

/* Gotowe, ale niewyslane — blok wyrozniony, bo to najtansze dni do odzyskania. */
.prod-gotowe { border-left:3px solid var(--kb-blad); }
.prod-gotowe .panel-head { display:flex; align-items:center; gap:.7rem; }
.prod-podpis { margin:0 0 .8rem; color:var(--kb-tekst-drugi); font-size:.9rem; }
/* Gdzie stoja zlecenia — pasek pokazuje udzial w calosci, ciemniejsza czesc to po terminie. */
.prod-statusy { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.9rem; }
.prod-status-nazwa { font-size:.857rem; color:var(--kb-tekst-drugi); }
.prod-status-liczby { display:flex; align-items:baseline; gap:.5rem; }
.prod-status-liczby b { font-size:1.35rem; font-variant-numeric:tabular-nums; }
.prod-status-po { font-size:.857rem; color:var(--kb-blad); }
.prod-status-pasek { position:relative; height:6px; background:var(--kb-pasek); border-radius:3px; margin-top:.35rem; overflow:hidden; }
.prod-status-pasek span { position:absolute; inset:0 auto 0 0; background:var(--kb-grafit-jasny); opacity:.35; }
.prod-status-pasek i { position:absolute; inset:0 auto 0 0; background:var(--kb-blad); }


/* Rozwijanie zlecenia do komponentow — tu widac, ktory element trzyma calosc. */
.prod-klik { cursor: pointer; }
.prod-klik:hover td { filter: brightness(.985); }
.prod-strzalka { display:inline-block; width:1em; color:var(--kb-tekst-drugi); font-size:max(.8em, 12px); }
.prod-rozwiniety td { font-weight:500; }
.prod-szczegoly-wiersz td { background:var(--kb-pasek); padding:0; }
.prod-szczegoly { padding:.9rem 1.1rem 1rem; }
.prod-szczegoly-glowa { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem; }
.prod-komponenty { background:var(--kb-panel); border:1px solid var(--kb-linia); border-radius:4px; }
/* Wlasne odstepy — bez nich kolumny zlepialy sie w "1,00Opisywanie". */
.prod-komponenty th, .prod-komponenty td { padding:.45rem .8rem; }
.prod-komponenty th { font-size:.857rem; }
.prod-komponenty td { font-size:.88rem; }
.prod-komponenty td:first-child, .prod-komponenty th:first-child { padding-left:.9rem; }
.prod-komponenty tr.prod-blokuje td { background:#fdf6e9; }
.prod-komponenty tr.prod-blokuje td:first-child { border-left:3px solid var(--kb-uwaga); }

/* Statusy sa przyciskami filtrujacymi liste ponizej. */
.prod-status {
    display:flex; flex-direction:column; gap:.15rem; text-align:left; cursor:pointer; font:inherit;
    background:var(--kb-panel); border:1px solid var(--kb-linia); border-radius:5px; padding:.6rem .8rem;
}
.prod-status:hover { border-color:var(--kb-linia-mocna); }
.prod-status.wybrany { box-shadow:inset 0 0 0 1px var(--kb-grafit); background:var(--kb-pasek); }


/* Towar wydany, zlecenie otwarte — zadanie dla biura, nie dla hali. */
.prod-wydane { border-left:3px solid var(--kb-ok); }
/* Wysylki nie da sie sprawdzic — swiadomie neutralnie, to nie jest alarm. */
.prod-nieznane { border-left:3px dashed var(--kb-linia-mocna); }


/* --- Legenda dat i pojec --------------------------------------------------------
   Stoi nad tabelami; zwijana, bo po kilku dniach uzytkownik zna ja na pamiec. */
.legenda { border:1px solid var(--kb-linia); border-radius:5px; background:var(--kb-panel); margin-bottom:1rem; }
.legenda-przelacz {
    display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; cursor:pointer;
    background:none; border:0; padding:.7rem .95rem; font:inherit; font-weight:600;
    color:var(--kb-tekst); font-size:.92rem;
}
.legenda-przelacz:hover { color:var(--kb-czerwony); }
.legenda-strzalka { color:var(--kb-tekst-drugi); font-size:max(.8em, 12px); }
.legenda-tresc {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.2rem 2rem;
    padding:0 .95rem 1rem; border-top:1px solid var(--kb-linia); padding-top:.9rem;
}
.legenda-kol h4 {
    margin:0 0 .5rem; font-size:.857rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--kb-tekst-drugi);
}
.legenda-kol dl { margin:0; }
.legenda-kol dt { font-weight:600; font-size:.86rem; margin-top:.55rem; }
.legenda-kol dt:first-child { margin-top:0; }
.legenda-kol dd { margin:.1rem 0 0; font-size:.857rem; color:var(--kb-tekst-drugi); line-height:1.45; }
.legenda-kol ul { margin:0; padding-left:1.1rem; font-size:.857rem; color:var(--kb-tekst-drugi); line-height:1.45; }
.legenda-kol li { margin:.3rem 0; }

/* --- Rekomendacja terminu: blok nad kalendarzem ---------------------------------
   Stoi wysoko i ma wlasne tlo, bo to jest pytanie, z ktorym partner tu przychodzi.
   Wczesniej siedziala pod siatka i pod lista wysylek — trzeba bylo jej szukac. */
.rek-blok {
    border:1px solid var(--kb-linia); border-left:4px solid var(--kb-ok); border-radius:6px;
    background:#f4faf6; padding:1rem 1.2rem; margin-bottom:1.1rem;
}
.rek-pytanie { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }
.rek-etykieta { font-weight:600; }
.rek-select { max-width:22rem; }
.rek-zacheta { margin:.7rem 0 0; color:var(--kb-tekst-drugi); max-width:78ch; }
.rek-wynik { margin-top:.9rem; }
.rek-lbl { font-size:.857rem; color:var(--kb-tekst-drugi); }
.rek-data { font-size:2.1rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.rek-dni { display:flex; align-items:baseline; gap:.9rem; color:var(--kb-tekst-drugi); margin-top:.1rem; }
.rek-podstawa { margin:.6rem 0 0; font-size:.87rem; color:var(--kb-tekst-drugi); max-width:80ch; }
.rek-uwaga { margin:.35rem 0 0; font-size:.86rem; color:var(--kb-uwaga-tekst); }
.rek-zastrzezenie { margin:.45rem 0 0; font-size:.857rem; color:var(--kb-szary); max-width:82ch; }


/* --- Moc tygodniowa dla wybranego wyrobu ----------------------------------------
   Limity pochodza z dbo.RodzWyrobu — to liczba ustawiona przez produkcje, nie nasza. */
.moc { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--kb-linia); }
.moc-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .7rem; }
.moc-glowa .szary { font-size: .857rem; max-width: 70ch; }
.moc-paski { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .5rem; }
.moc-tydzien { text-align: center; padding: .45rem .3rem; border-radius: 5px; background: var(--kb-panel); border: 1px solid var(--kb-linia); }
.moc-lbl { font-size: .857rem; color: var(--kb-tekst-drugi); }
.moc-slupek { height: 3.2rem; display: flex; align-items: flex-end; justify-content: center; margin: .3rem 0; }
.moc-slupek span { display: block; width: 1.5rem; border-radius: 3px 3px 0 0; background: var(--kb-linia-mocna); min-height: 2px; }
.moc-liczby { font-size: .857rem; font-variant-numeric: tabular-nums; }
.moc-wolne { font-size: .857rem; color: var(--kb-tekst-drugi); }
/* Celujemy w konkretna czesc slupka, nie w kazdy span — inaczej ta sama regula
   kolorowala takze czesc "wykonane", ktora ma zostac szara. */
.moc-wolny .moc-slupek .moc-do-zrobienia { background: var(--kb-ok); }
.moc-blisko .moc-slupek .moc-do-zrobienia { background: var(--kb-uwaga); }
.moc-pelny .moc-slupek .moc-do-zrobienia { background: var(--kb-blad); }
.moc-pelny { border-color: var(--kb-blad); }
.moc-pelny .moc-wolne { color: var(--kb-blad); font-weight: 600; }

/* Slupek mocy: szara podstawa to praca juz wykonana, kolor nad nia — do zrobienia. */
.moc-slupek { flex-direction: column-reverse; }
.moc-slupek span { display:block; width:1.5rem; min-height:0; }
.moc-tydzien .moc-slupek .moc-zrobione { background: var(--kb-linia-mocna); border-radius:0 0 3px 3px; }
.moc-slupek .moc-do-zrobienia { border-radius: 3px 3px 0 0; background: var(--kb-linia-mocna); }
.moc-wolny .moc-slupek .moc-do-zrobienia { background: var(--kb-ok); }
.moc-blisko .moc-slupek .moc-do-zrobienia { background: var(--kb-uwaga); }
.moc-pelny .moc-slupek .moc-do-zrobienia { background: var(--kb-blad); }
.moc-wykonane { font-size:.857rem; color: var(--kb-szary); }
.moc-gotowe { color: var(--kb-ok); }

/* Dzien zrobiony — wyszarzony, jak w HydraSys. Nie jest ani zajety, ani wolny: zamkniety. */
.kalprod-zrobiony { background: var(--kb-pasek); border-left-color: var(--kb-linia-mocna); }
.kalprod-zrobiony .kalprod-stan { color: var(--kb-szary); }
.kalprod-zrobione { font-size:.857rem; color: var(--kb-szary); margin-top:.15rem; }
.kalprod-p.kalprod-p-zrobiony { background: var(--kb-linia-mocna); }

/* Komorka z kilkoma elementami w linii — odstep z ukladu, nie z recznych spacji. */
.kom-odstep { }
.kom-odstep > * { margin-right: .4rem; }
.kom-odstep > *:last-child { margin-right: 0; }


/* Wybor wyrobu w widoku wewnetrznym - nad kalendarzem, nad tabela limitow. */
.wewn-wybor { border:1px solid var(--kb-linia); border-left:3px solid var(--kb-grafit);
              border-radius:6px; background:var(--kb-panel); padding:.9rem 1.1rem; margin-bottom:1rem; }
.wewn-pole { max-width:28rem; display:block; }
.wewn-wybor .moc { margin-top:.9rem; }

/* Wyrob wybrany, ale historii za malo na termin - komunikat zamiast pustego miejsca. */
.rek-brak { border-left:3px solid var(--kb-uwaga); background:var(--kb-panel);
            border-radius:4px; padding:.7rem .9rem; margin-top:.6rem; }
.rek-brak p { margin:0; color:var(--kb-tekst-drugi); font-size:.9rem; line-height:1.5; }
.rek-podpowiedz { margin:.45rem 0 0; color:var(--kb-tekst-drugi); font-size:.857rem; line-height:1.45; }


/* Kartoteka nieaktywna na liscie kandydatow do konta portalu. */
.adm-osoba-nieaktywna .adm-osoba-nazwa { color: var(--kb-tekst-drugi); }
/* Nazwa i znacznik to dwa osobne elementy - bez odstepu skleja sie w "TESTkartoteka nieaktywna". */
.adm-osoba-nazwa { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.adm-podpowiedz { margin: .2rem 0 .6rem; color: var(--kb-tekst-drugi); font-size: .857rem; line-height: 1.45; }

/* ── Kolejka hali (planowanie produkcji) ─────────────────────────────────── */
.plan-blokady-rzad { display: flex; flex-wrap: wrap; gap: .6rem; }
.plan-blokada { display: flex; align-items: baseline; gap: .45rem;
                border: 1px solid var(--kb-linia); border-left-width: 3px;
                border-radius: 6px; padding: .5rem .8rem; background: var(--kb-panel); }
.plan-blokada b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.plan-blokada span { color: var(--kb-tekst-drugi); font-size: .86rem; }
/* Sprzecznosc w danych, nie blokada produkcyjna — dlatego wlasny, mocniejszy kolor
   niz „czeka na poprzednika": tamto rozwiaze sie samo, to wymaga decyzji czlowieka. */
/* Kolumna „do wysylki" — liczba ma sie czytac jednym rzutem oka obok terminu,
   dlatego cyfry tabelaryczne i wyrownanie do prawej jak przy kwotach. */
/* Bufor zasilajacy — pasek pokazuje ZUZYCIE, wiec im dluzszy, tym gorzej.
   Progi kolorow 33/67% sa te same, ktorych uzywa zarzadzanie buforem w lancuchu krytycznym. */
.plan-bufor { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 9rem; }
.plan-bufor-pasek { block-size: 6px; background: var(--kb-pasek); border-radius: 3px; overflow: hidden; margin-block-end: .25rem; }
.plan-bufor-pasek > span { display: block; block-size: 100%; }
.plan-strefa-zielona > span      { background: var(--kb-ok); }
.plan-strefa-zolta > span        { background: var(--kb-uwaga); }
.plan-strefa-czerwona > span     { background: var(--kb-blad); }
.plan-strefa-przekroczony > span { background: var(--kb-blad); }
.plan-strefa-tekst-zolta        { color: var(--kb-uwaga-tekst); }
.plan-strefa-tekst-czerwona     { color: var(--kb-blad); }
.plan-strefa-tekst-przekroczony { color: var(--kb-blad); }
.plan-bufor-zbieg { font-size: .857rem; }

.plan-sciezka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-sciezka .badge { margin-top: .2rem; }

.plan-blokada-sprzecznosc { border-left-color: var(--kb-blad); }
.plan-blokada-poprzednik { border-left-color: var(--kb-tekst-drugi); }
.plan-blokada-material   { border-left-color: var(--kb-blad); }
.plan-blokada-droga      { border-left-color: var(--kb-ok); }
.plan-blokada-watpliwy   { border-left-color: var(--kb-uwaga); }

.plan-gniazdo-glowa { display: flex; align-items: center; justify-content: space-between;
                      flex-wrap: wrap; gap: .6rem; }
.plan-gniazdo-liczby { display: flex; gap: .45rem; flex-wrap: wrap; }
.plan-znacznik { font-size: .857rem; color: var(--kb-tekst-drugi);
                 border: 1px solid var(--kb-linia); border-radius: 999px; padding: .12rem .6rem; }
.plan-znacznik-ok  { color: var(--kb-ok); border-color: var(--kb-ok); }
.plan-znacznik-zle { color: var(--kb-blad); border-color: var(--kb-blad); }

/* Numer w kolejce - to jest kolejnosc ustawiania na maszynie, wiec ma byc widoczny. */
.plan-lp { width: 2.5rem; text-align: right; color: var(--kb-tekst-drugi);
           font-variant-numeric: tabular-nums; }
.plan-tabela .plan-wiersz { cursor: pointer; }
.plan-tabela .plan-wiersz:hover { background: var(--kb-tlo-hover); }
.plan-zalegly .plan-lp { color: var(--kb-blad); font-weight: 600; }
/* Tło na tr zasłaniały komórki — stąd reguła na > td. Znacznik jak wszędzie indziej. */
.plan-otwarty > td { background: var(--kb-pasek); }
.plan-otwarty > td:first-child { box-shadow: inset 3px 0 0 var(--kb-grafit); }

.plan-detal > td { background: var(--kb-panel); }
.plan-detal-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
                     gap: 1rem; padding: .4rem .2rem; }
.plan-detal-lbl { font-size: .857rem; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--kb-tekst-drugi); margin-bottom: .2rem; }
.plan-miejsce { font-size: 1.02rem; }
.plan-przelacz { margin-top: .6rem; }
.plan-zablokowane { margin-top: .6rem; }
.plan-powod { font-size: .857rem; margin-top: .15rem; }

/* ── Kolejka hali: trzy widoki ───────────────────────────────────────────── */
/* Rząd zakładek i licznik przy nazwie mają wspólną definicję wyżej w arkuszu
   (.taby/.tab i .tab-licznik); .plan-zakladki, .plan-zakladka i .plan-licznik są tam
   wymienione jako aliasy. Ten sam rząd obsługuje Kolejkę hali i Obecność. */

/* Przeglad hali - kafle gniazd, sortowane ryzykiem. */
.plan-hala { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
             gap: .7rem; margin-bottom: 1.2rem; }
.plan-karta { text-align: left; background: var(--kb-panel); border: 1px solid var(--kb-linia);
              border-left: 3px solid var(--kb-linia); border-radius: 6px; padding: .7rem .9rem;
              cursor: pointer; display: flex; flex-direction: column; gap: .3rem; }
.plan-karta:hover { border-color: var(--kb-grafit); }
.plan-karta-pali { border-left-color: var(--kb-blad); }
.plan-karta-nazwa { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.plan-karta-liczby { display: flex; align-items: baseline; gap: .35rem; }
.plan-karta-ile { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.plan-karta-lbl { color: var(--kb-tekst-drugi); font-size: .857rem; }
.plan-karta-pasek { height: 4px; background: var(--kb-linia); border-radius: 2px; overflow: hidden; }
.plan-karta-pasek span { display: block; height: 100%; background: var(--kb-blad); }
.plan-karta-zal { color: var(--kb-blad); font-size: .857rem; }
.plan-karta-stopka { color: var(--kb-tekst-drugi); font-size: .857rem; }

/* Pasek nad kolejka jednego gniazda. */
.plan-pasek-gniazda { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
                      margin-bottom: .8rem; }
.plan-gniazdo-tytul { margin: 0; font-size: 1.3rem; }
/* Segment: przelacznik "albo-albo" (widok, wariant, okno czasu). Jeden ksztalt dla .segment,
   .plan-okno i .term-wariant - wczesniej jeden byl pigulkami, drugi ramka z czerwonym wyborem,
   a czerwien ma zostac marce, nawigacji i alarmowi w danych. */
.segment, .plan-okno, .term-wariant {
    display: inline-flex; align-items: stretch; gap: 0; overflow: hidden;
    border: 1px solid var(--kb-ramka-pola); border-radius: 4px; background: #fff;
}
.plan-okno { margin-left: auto; }
.segment-btn, .plan-okno-btn, .term-wariant-btn {
    display: inline-flex; align-items: center; height: var(--kb-chip-h); padding: 0 12px;
    border: 0; background: #fff; color: var(--kb-tekst); font: inherit; font-size: var(--kb-fs-s);
    line-height: 1; white-space: nowrap; cursor: pointer;
}
.segment-btn + .segment-btn,
.plan-okno-btn + .plan-okno-btn,
.term-wariant-btn + .term-wariant-btn { border-inline-start: 1px solid var(--kb-ramka-pola); }
.segment-btn:hover, .plan-okno-btn:hover, .term-wariant-btn:hover { background: var(--kb-pasek); }
/* Wybor wypelniamy grafitem. Sama zmiana obramowania byla nieczytelna, a czerwien w filtrach
   myli sie z alarmem w danych. Dwie nazwy klasy (aktywna/aktywny) - tak wolaja je ekrany. */
.segment-btn.aktywna, .segment-btn.aktywny, .segment-btn[aria-pressed="true"],
.plan-okno-btn.aktywna, .term-wariant-btn.aktywny { background: var(--kb-grafit); color: #fff; font-weight: 600; }
.segment-btn.aktywna:hover, .segment-btn.aktywny:hover,
.plan-okno-btn.aktywna:hover, .term-wariant-btn.aktywny:hover { background: var(--kb-grafit-jasny); }

/* Elementy do pobrania - jeden wiersz na podzespol. */
.plan-elementy { list-style: none; margin: 0; padding: 0; display: flex;
                 flex-direction: column; gap: .4rem; }
.plan-elementy li { border-left: 2px solid var(--kb-ok); padding-left: .55rem; }
.plan-elementy li.plan-el-czeka { border-left-color: var(--kb-uwaga); }
.plan-el-miejsce { font-size: .857rem; color: var(--kb-tekst-drugi); }
.plan-detal-elementy { grid-column: span 1; }
/* D-50 pkt 4b: komplet zbiegu w szczegółach pozycji — to samo zdanie co monitor, zawija się w kolumnie siatki. */
.plan-komplet { font-weight: 600; line-height: 1.35; margin-bottom: .35rem; overflow-wrap: anywhere; }
.plan-detal-lbl2 { margin-top: .7rem; }
.plan-nrprod { font-variant-numeric: tabular-nums; }
/* Łukasz 06.10: końcówki podzleceń przy numerze w tabeli gniazda („/01,02.02”) — drobno, w linii z numerem. */
.plan-podzlecenie { margin-left: 4px; font-size: .9em; color: var(--kb-tekst-drugi, #6b6b6b); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plan-marszruta { font-size: .88rem; }
.plan-blokada-stoi { border-left-color: var(--kb-uwaga); }


/* Materialy i zakupy. */
.plan-licznik-zle { background: var(--kb-blad); color: #fff; }
.plan-pilne { border-left: 3px solid var(--kb-blad); }
.plan-stat { color: var(--kb-tekst-drugi); font-size: .88rem; margin-bottom: 1rem; }

/* Czas czekania - glowna miara zatoru w gniezdzie. */
.plan-karta-czeka { font-size: .857rem; color: var(--kb-tekst-drugi); }
.plan-karta-czeka.plan-czeka-dlugo { color: var(--kb-blad); font-weight: 600; }

/* Powody ryzyka zlecenia - kilka etykiet pod terminem. */
.plan-powody { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .25rem; }
.plan-el-uwaga { font-size: .857rem; margin-bottom: .35rem; line-height: 1.35; }

/* Pracochlonnosc kolejki gniazda. */
.plan-karta-godz { font-size: .857rem; color: var(--kb-tekst); }
.plan-karta-dod { margin-left: .3rem; }
.plan-blokada-obrobka { border-left-color: var(--kb-uwaga); }

/* Skąd pochodzi czas operacji: liczba meldunków przy czasie i ostrzeżenie o słabym
   pokryciu gniazda. Ostrzeżenie stoi raz, przy nagłówku gniazda — nie przy wierszu. */
.plan-probki { color: var(--kb-tekst-drugi); font-size: .857rem; white-space: nowrap; }
.plan-uwaga-czas {
    margin: -.3rem 0 .8rem; font-size: .857rem; color: var(--kb-uwaga-tekst);
    border-left: 3px solid var(--kb-uwaga); padding-left: .6rem;
}
/* Fragmenty zdania statystycznego — @if nie wypuszcza spacji między blokami,
   więc odstęp robimy stylem, a nie znakiem w treści. */
.plan-stat-czesc { display: inline; margin-right: .35rem; }

/* Pasek na kaflu gniazda pokazuje MEDIANĘ CZEKANIA — miarę, po której kafle są
   sortowane. Wcześniej pokazywał udział zaległych i czerwony był prawie każdy. */
.plan-karta-pasek .czeka-krotko  { background: var(--kb-ok); }
.plan-karta-pasek .czeka-srednio { background: var(--kb-uwaga); }
.plan-karta-pasek .czeka-dlugo   { background: var(--kb-blad); }
.plan-puste-gniazda { margin-top: 1rem; font-size: .857rem; }
.plan-karta-proc { margin-left: .3rem; }
/* Pasek czekania ma być widoczny z odległości — to on niesie sortowanie kafli. */
.plan-karta-pasek { height: 6px; border-radius: 3px; }
/* Ta sama skala kolorów na pasku i na podpisie — jedna informacja, jeden kolor. */
.plan-karta-czeka.czeka-krotko  { color: var(--kb-tekst-drugi); }
.plan-karta-czeka.czeka-srednio { color: var(--kb-uwaga-tekst); font-weight: 600; }
.plan-karta-czeka.czeka-dlugo   { color: var(--kb-blad); font-weight: 600; }
/* Zamrożona kolejność: informacja ma być widoczna, ale nie krzyczeć — to nie błąd. */
.plan-zamrozone { font-size: .857rem; color: var(--kb-tekst-drugi); margin: -.2rem 0 .8rem; }
.plan-zamrozone .btn-link-akcja { margin-left: .4rem; }
/* Wiersz z księgowością w uzgodnieniu — to on jest odniesieniem, nie warianty z faktur. */
.uzg-ksiegowosc td { border-top: 2px solid var(--kb-linia); }
/* Podtabela w rozwiniętym wierszu — węższa i cichsza od tabeli nadrzędnej. */
.plan-podtabela { font-size: .9rem; margin-top: .3rem; background: transparent; }
.plan-podtabela th { font-size: .857rem; }

/* Podpowiedź nad tabelą, w której wiersze się rozwijają — inaczej nikt nie zgadnie,
   że w wiersz można kliknąć. */
.plan-podpowiedz { font-size: .857rem; margin: 0 0 .5rem; }

/* Alert wyjaśniający (.alert-info = .komunikat-info) stoi w bloku „Komunikaty" wyżej
   w pliku — tutejsza druga definicja wygrywała kaskadą. */

/* --- Drzewko dat: rok / kwartal / miesiac / dzien -------------------------------
   Strzalka rozwijania i etykieta to OSOBNE przyciski. Jeden przycisk musialby
   zgadywac, czy klikniecie znaczy "rozwin", czy "wybierz ten okres".

   Rozmiary sa celowo wieksze niz reszta paska filtrow: ten panel czyta sie z ekranu
   rzutnika i z laptopa prezesa, a nie tylko z monitora przy biurku. Dni ustawione
   po 7 w rzedzie, zeby uklad odpowiadal tygodniom. */
.drzewo-okresu { position: relative; }
.drzewo-przelacz {
    font: inherit; font-size: .92rem; cursor: pointer; padding: .45rem .85rem;
    background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 5px;
    display: inline-flex; align-items: center; gap: .45rem; color: inherit;
    max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drzewo-przelacz:hover { border-color: var(--kb-linia-mocna); }
.drzewo-strzalka { font-size: .857rem; opacity: .7; }
.drzewo-zaslona {
    position: fixed; inset: 0; z-index: 39; background: transparent; cursor: default;
}
.drzewo-panel {
    position: absolute; z-index: 40; margin-top: .35rem; min-width: 21rem; max-width: 30rem;
    max-height: 34rem; overflow-y: auto;
    background: var(--kb-panel); border: 1px solid var(--kb-linia-mocna);
    border-radius: 7px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: .8rem .9rem;
}
.drzewo-panel > ul.drzewo { padding-left: 0; }
ul.drzewo { list-style: none; margin: 0; padding-left: 1.1rem; }
ul.drzewo > li { margin: .1rem 0; }
.drzewo-wiersz { display: flex; align-items: center; gap: .35rem; }
.drzewo-rozwin {
    font: inherit; font-size: .857rem; line-height: 1; cursor: pointer; color: inherit;
    background: none; border: none; padding: .3rem .35rem; opacity: .65;
}
.drzewo-rozwin:hover { opacity: 1; }
.drzewo-etykieta {
    font: inherit; font-size: 1rem; cursor: pointer; color: inherit;
    background: none; border: 1px solid transparent; border-radius: 4px;
    padding: .28rem .6rem; text-align: left;
}
.drzewo-etykieta:hover { background: var(--kb-pasek); }
.drzewo-etykieta.wybrana {
    background: var(--kb-pasek); border-color: var(--kb-czerwony); font-weight: 600;
}
/* Rok jest najgrubszym poziomem i ma sie tak czytac. */
.drzewo-panel > ul.drzewo > li > .drzewo-wiersz > .drzewo-etykieta { font-size: 1.12rem; font-weight: 600; }
.drzewo-dni {
    display: grid; grid-template-columns: repeat(7, 2.4rem); gap: .2rem;
    margin: .35rem 0 .55rem 2rem;
}
.drzewo-dzien {
    font: inherit; font-size: .88rem; cursor: pointer; color: inherit;
    background: none; border: 1px solid var(--kb-linia); border-radius: 4px;
    padding: .35rem 0; text-align: center;
}
.drzewo-dzien:hover { background: var(--kb-pasek); border-color: var(--kb-linia-mocna); }
.drzewo-dzien.wybrana { background: var(--kb-czerwony); border-color: var(--kb-czerwony); color: #fff; }
.drzewo-nota {
    margin: .7rem 0 0; padding-top: .55rem; border-top: 1px solid var(--kb-linia);
    font-size: .857rem; line-height: 1.4; opacity: .8;
}

/* Kafel KPI, z ktorego mozna zejsc do dokumentow. Musi wygladac na klikalny,
   inaczej nikt nie sprobuje w niego kliknac. */
/* Kafel liczby prowadzący dalej. Działa i na <div> z @onclick, i na <a> — na pulpicie partnera
   każda liczba jest odnośnikiem do swojej listy, ale ma wyglądać jak kafel, nie jak link. */
.kpi-klikalny { cursor: pointer; transition: border-color .12s, box-shadow .12s;
                text-decoration: none; color: inherit; display: block; }
.kpi-klikalny:hover { border-color: var(--kb-czerwony); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.kpi-klikalny:focus-visible { outline: 2px solid var(--kb-czerwony); outline-offset: 2px; }

/* Przycisk czyszczenia filtrow w naglowku panelu - po prawej, zeby nie mylil sie z tytulem. */
.panel-czysc { margin: 0 0 0 auto; padding: .2rem .6rem; font-size: .857rem; }

/* Wiersz spoza wybranego okresu: widoczny jako kontekst, ale wyraznie slabszy,
   zeby nie mylil sie z danymi, o ktore uzytkownik pytal. */
tr.wiersz-tlo > td { opacity: .45; }
tr.wiersz-tlo:hover > td { opacity: .8; }

/* --- Kolejnosc robot ------------------------------------------------------
   Dzien wysylki jest jednostka planowania, wiec to on jest naglowkiem, a nie
   zlecenie. Joachim zwija wszystko i rozwija dzien po dniu. */
.kolej-dzien { margin-bottom: .7rem; }
.kolej-glowa { display: flex; align-items: center; gap: .6rem; cursor: pointer; flex-wrap: wrap; }
.kolej-glowa:hover { background: var(--kb-pasek); }
.kolej-strzalka { color: var(--kb-szary); font-size: .857rem; width: .8rem; }
.kolej-dzien-zalegly .panel-head { border-left: 3px solid var(--kb-czerwony); }

.kolej-wyrob { border-top: 1px solid var(--kb-linia); padding: .7rem 0 .8rem; }
.kolej-wyrob:first-child { border-top: none; }
.kolej-wyrob-gotowy { opacity: .62; }
.kolej-wyrob-glowa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.kolej-klient { margin-left: auto; }
.kolej-zeby { font-weight: 600; color: var(--kb-grafit); }
.kolej-nota { font-size: .857rem; margin-bottom: .4rem; }
.kolej-nota-zle { color: var(--kb-czerwony); font-weight: 500; }
.kolej-ok { font-size: .857rem; color: var(--kb-ok); }
.kolej-komp { min-width: 11rem; }
.kolej-pasek-td { width: 7rem; min-width: 5rem; }
.kolej-pasek { display: block; height: 6px; border-radius: 3px; background: var(--kb-ok); min-width: 2px; }

/* Przelacznik widoku hali stoi nad kaflami, wiec bez marginesu automatycznego. */
.plan-okno-hala { margin-left: 0; margin-bottom: .6rem; }

/* ── Generator dokumentacji MC (Konstrukcja) ─────────────────────────────────
   Dwie kolumny: parametry po lewej, znalezione warianty po prawej. Na wąskim
   ekranie jedna kolumna — formularz ma ~40 pól, więc musi się dać przewijać. */
.gendok-uklad { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 60rem) { .gendok-uklad { grid-template-columns: 1fr; } }

.gendok-formularz { background: #fff; border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 6px; padding: 1rem 1.1rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 60rem) { .gendok-formularz { position: static; max-height: none; } }
.gendok-formularz .field { margin-bottom: .5rem; }
.gendok-formularz .field-label { font-size: .857rem; }

.gendok-wyniki { min-width: 0; }
.naglowek-sekcji-gendok { border-bottom: 1px solid var(--kb-linia, #dfe3e8); padding-bottom: .5rem; margin-bottom: 1rem; }
.naglowek-sekcji-gendok h2 { margin: 0; font-size: 1.15rem; }

.gendok-wariant { background: #fff; border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 6px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
/* Trafienie dokładne wyróżniamy kolorem modułu — to jest odpowiedź, po którą przyszedł użytkownik. */
.gendok-wariant.gendok-dokladne { border-color: var(--kb-modul, #1f5fa8); box-shadow: 0 1px 3px rgba(31,95,168,.12); }
.gendok-wariant-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }

.gendok-zgodne { color: #1e7a4b; font-size: .88rem; margin: .3rem 0 .6rem; }
.gendok-roznice { margin: .5rem 0 .8rem; }
.gendok-roznice .tabela-wewn td { padding: .25rem .5rem; font-size: .857rem; }

.etykieta-mini { font-size: .857rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6b7683; margin-bottom: .35rem; }
.gendok-grupa { margin-top: .8rem; }
.gendok-grupa summary { cursor: pointer; }
/* Rysunki zgrubne mają naddatek — oddzielamy je wizualnie, żeby nikt nie wziął złego arkusza. */
.gendok-zgrubne { border-left: 3px solid #a8631a; padding-left: .8rem; }

.gendok-plik { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .3rem 0; border-bottom: 1px dashed var(--kb-linia, #eceff2); }
.gendok-plik:last-child { border-bottom: none; }
.gendok-plik-nazwa { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .857rem; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.gendok-uwaga { font-size: .857rem; color: #a8631a; margin: .5rem 0 0; }
.gendok-zastrzezenie { font-size: .857rem; color: #6b7683; border-top: 1px solid var(--kb-linia, #dfe3e8); padding-top: .8rem; margin-top: 1rem; }

/* Podpowiedzi maszyn — lista rozwijana odpadła przy 772 pozycjach. */
.gendok-podpowiedzi { border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 4px; margin-top: .3rem; max-height: 17rem; overflow-y: auto; background: #fff; }
.gendok-podpowiedz { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left; padding: .4rem .6rem; border: none; background: none; cursor: pointer; border-bottom: 1px solid var(--kb-linia, #eceff2); }
.gendok-podpowiedz:last-child { border-bottom: none; }
.gendok-podpowiedz:hover, .gendok-podpowiedz:focus-visible { background: var(--kb-modul-tlo, #e7eff8); }
.gendok-podpowiedz-nazwa { font-weight: 600; font-size: .88rem; }

/* Generator MC — podpowiedzi z historii maszyny i kontrola kompletu */
.gendok-zhistorii { border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 4px; padding: .6rem .8rem; margin-bottom: .8rem; }
.gendok-zhistorii > summary { cursor: pointer; }
.gendok-pewnosc { font-size: .857rem; font-weight: 500; letter-spacing: .02em; color: #6b7683; margin-left: .4rem; padding: .05em .4em; border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 8px; }
/* Wartość, której ta maszyna nigdy nie zmieniła — podpowiedź pewna, nie zgadywana. */
.gendok-pewna { color: #1e7a4b; border-color: #bfe0cd; background: #f0f8f3; }

.gendok-kontrola { margin: .6rem 0; padding: .5rem .7rem; border-left: 3px solid #1e7a4b; background: #fafbfc; border-radius: 0 3px 3px 0; }
.gendok-kontrola-zle { border-left-color: #b02a2a; background: #fdf6f6; }
.gendok-sygnaly { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .857rem; color: #6b7683; }
/* Zastrzeżenie tego samego kodu z różnych arkuszy (ZastrzezenieMc.Scal) niesie kilka opisów
   rozdzielonych nową linią — bez pre-line przeglądarka sklejała je w jeden wiersz. */
.gendok-sygnaly li { white-space: pre-line; }
.gendok-sygnal-zle { color: #b02a2a; font-weight: 600; }

/* Podgląd rysunku — czytnik PDF przeglądarki w oknie modalnym */
.gendok-modal { width: min(96vw, 1200px); height: min(92vh, 900px); display: flex; flex-direction: column; }
.gendok-ramka { flex: 1; width: 100%; border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 3px; background: #fff; }

/* ═════════════════════════════════════════════════════════════════════════════
   Czat pracowników
   Osobne nazwy (czat-*) obok istniejących kompas-* — Kompas AI to inny czat
   i mieszanie klas skończyłoby się tym, że poprawka w jednym psuje drugi.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Plakietka nieprzeczytanych w górnym pasku. Pasek jest grafitowy, więc plakietka
   musi mieć własny, mocny kolor — wariant .badge z jasnym tłem byłby na nim niewidoczny. */
.czat-dzwonek { position: relative; display: inline-flex; align-items: center; color: inherit; text-decoration: none; padding: .2rem; border-radius: 6px; }
.czat-dzwonek:hover { background: rgba(255, 255, 255, .12); }
.czat-dzwonek svg { width: 20px; height: 20px; }
.czat-licznik {
    position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kb-czerwony); color: #fff; border-radius: 8px;
    font-size: .857rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Dwie kolumny: rozmowy i treść. Wysokość liczona od okna, żeby przewijała się
   lista wiadomości, a nie cała strona — inaczej pole wpisu uciekałoby poza ekran.
   Odjęte 270 px to nagłówek strony PLUS pas na widget Kompas AI przyklejony do dolnego
   rogu okna: bez tego zasłaniał przycisk „Wyślij". */
.czat-uklad { display: grid; grid-template-columns: 290px 1fr; gap: 1rem; height: calc(100vh - 270px); min-height: 420px; }
.czat-boczny { display: flex; flex-direction: column; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 6px; overflow: hidden; }
.czat-boczny-glowa { padding: .6rem .7rem; border-bottom: 1px solid var(--kb-linia); background: var(--kb-pasek); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.czat-szukaj { flex: 1; min-width: 120px; padding: .35rem .5rem; border: 1px solid var(--kb-linia-mocna); border-radius: 4px; font: inherit; font-size: .857rem; }
.czat-szukaj:focus { border-color: var(--kb-czerwony); }
.czat-lista { flex: 1; overflow-y: auto; }

.czat-poz { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--kb-linia); padding: .55rem .7rem; cursor: pointer; font: inherit; }
.czat-poz:hover { background: var(--kb-pasek); }
.czat-poz-wybrana { background: var(--kb-modul-tlo, var(--kb-pasek)); border-left: 3px solid var(--kb-modul, var(--kb-czerwony)); padding-left: calc(.7rem - 3px); }
.czat-poz-glowa { display: flex; align-items: baseline; gap: .4rem; }
.czat-poz-nazwa { font-weight: 600; font-size: .88rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czat-poz-czas { font-size: .857rem; color: var(--kb-szary); white-space: nowrap; }
.czat-poz-tresc { font-size: .857rem; color: var(--kb-tekst-drugi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; }
.czat-poz-nowe { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; background: var(--kb-czerwony); color: #fff; border-radius: 9px; font-size: .857rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Znacznik rodzaju rozmowy: grupa i wątek dokumentu mają wyglądać inaczej niż rozmowa prywatna. */
.czat-rodzaj { font-size: .857rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kb-szary); border: 1px solid var(--kb-linia-mocna); border-radius: 8px; padding: 0 .35em; margin-right: .35em; }

.czat-panel { display: flex; flex-direction: column; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 6px; overflow: hidden; }
.czat-glowa { padding: .55rem .8rem; border-bottom: 1px solid var(--kb-linia); background: var(--kb-pasek); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.czat-glowa-tytul { font-weight: 600; }
.czat-glowa-opis { font-size: .857rem; color: var(--kb-szary); flex: 1; }

.czat-tresc { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .45rem; background: var(--kb-tlo); }
.czat-msg { max-width: 78%; padding: .45rem .65rem; border-radius: 10px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.czat-moja { align-self: flex-end; background: var(--kb-czerwony); color: #fff; border-bottom-right-radius: 3px; }
.czat-obca { align-self: flex-start; background: var(--kb-panel); border: 1px solid var(--kb-linia); color: var(--kb-tekst); border-bottom-left-radius: 3px; }
.czat-autor { font-size: .857rem; font-weight: 600; color: var(--kb-modul, var(--kb-czerwony)); margin-bottom: .1rem; }
/* Stopka wiadomości: godzina, potwierdzenie, drobne akcje. `white-space: normal` jest tu
   konieczne — bąbelek ma pre-wrap dla treści, a bez tego wcięcia ze znacznika Razora
   renderowały się jako podkreślona spacja przed napisem na przycisku. */
.czat-stopka { font-size: .857rem; opacity: .75; margin-top: .15rem; display: flex; gap: .5rem; align-items: center; white-space: normal; }
.czat-moja .czat-stopka { justify-content: flex-end; }
.czat-wycofana { font-style: italic; opacity: .65; }
.czat-dzien { align-self: center; font-size: .857rem; color: var(--kb-szary); background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 10px; padding: .1rem .6rem; margin: .3rem 0; }

.czat-wejscie { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--kb-linia); background: var(--kb-panel); }
.czat-input { flex: 1; resize: none; padding: .45rem .6rem; border: 1px solid var(--kb-linia-mocna); border-radius: 4px; font: inherit; font-size: .88rem; }
.czat-input:focus { border-color: var(--kb-czerwony); }
.czat-send { padding: .45rem 1rem; background: var(--kb-czerwony); color: #fff; border: none; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; }
.czat-send:disabled { background: var(--kb-linia-mocna); cursor: default; }

/* Kompas AI siedzi na stałe w prawym dolnym rogu okna i zasłaniał przycisk „Wyślij".
   Miejsce robi skrócenie układu (patrz .czat-uklad) — samo odsunięcie w bok nie starczyło,
   bo widget jest szerszy niż przycisk. */

/* Wybór osób do nowej rozmowy albo grupy. */
.czat-wybor { border-bottom: 1px solid var(--kb-linia); background: var(--kb-panel); padding: .6rem .7rem; }
.czat-wybor-osoba { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; font-size: .857rem; cursor: pointer; }
.czat-pusto { padding: 1.2rem; text-align: center; color: var(--kb-szary); font-size: .86rem; }

/* Wątek przy dokumencie — ta sama stylistyka, ale wpisany w rozwinięty wiersz listy. */
.czat-watek { border: 1px solid var(--kb-linia); border-radius: 6px; background: var(--kb-panel); margin-top: .6rem; }
.czat-watek-glowa { padding: .4rem .6rem; border-bottom: 1px solid var(--kb-linia); background: var(--kb-pasek); font-size: .857rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.czat-watek .czat-tresc { max-height: 240px; padding: .6rem; }

@media (max-width: 820px) {
    .czat-uklad { grid-template-columns: 1fr; height: auto; }
    .czat-boczny { max-height: 260px; }
    .czat-panel { min-height: 420px; }
    .czat-msg { max-width: 92%; }
}

/* ── JChat, druga wersja: obecność, pisanie, potwierdzenia, szukanie, podpowiedzi AI ── */

/* Kropka obecności. Puste kółko znaczy „poza panelem" — celowo widoczne, a nie ukryte,
   bo brak informacji też jest informacją: wiadomo, że trzeba zadzwonić. */
.czat-kropka { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--kb-linia-mocna); background: transparent; }
.czat-kropka.czat-jest { background: var(--kb-ok); border-color: var(--kb-ok); }

.czat-osoba { display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; background: none; border: none; padding: .22rem 0; font: inherit; font-size: .857rem; color: var(--kb-czerwony); cursor: pointer; }
.czat-osoba:hover { text-decoration: underline; }

.czat-pisze { padding: .25rem .9rem; font-size: .857rem; color: var(--kb-szary); font-style: italic; background: var(--kb-tlo); }

.czat-mini { background: none; border: none; padding: 0; font: inherit; font-size: .857rem; color: inherit; text-decoration: underline; cursor: pointer; opacity: .9; }
.czat-mini:disabled { text-decoration: none; opacity: .5; cursor: default; }

.czat-starsze { align-self: center; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 12px; padding: .2rem .8rem; font: inherit; font-size: .857rem; color: var(--kb-tekst-drugi); cursor: pointer; margin-bottom: .3rem; }
.czat-starsze:hover { border-color: var(--kb-linia-mocna); }

/* Tłumaczenie pod wiadomością — oddzielone kreską, żeby nie mylić się z oryginałem. */
.czat-tlumaczenie { margin-top: .35rem; padding-top: .3rem; border-top: 1px dashed currentColor; opacity: .85; font-size: .857rem; }

.czat-podswietlona { outline: 2px solid var(--kb-uwaga); outline-offset: 2px; }

.czat-wybor-pasek { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Podpowiedzi AI. Fiolet modułu zamiast czerwieni — żeby na pierwszy rzut oka było widać,
   że to propozycja maszyny, a nie zdanie kolegi. */
.czat-propozycje { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .6rem; border-top: 1px solid var(--kb-linia); background: var(--kb-modul-tlo, var(--kb-pasek)); }
.czat-propozycja { background: var(--kb-panel); border: 1px solid var(--kb-modul, var(--kb-linia-mocna)); color: var(--kb-tekst); border-radius: 14px; padding: .25rem .7rem; font: inherit; font-size: .857rem; cursor: pointer; text-align: left; max-width: 100%; }
.czat-propozycja:hover { background: var(--kb-modul-tlo, var(--kb-pasek)); }

.czat-ai-pasek { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding: .25rem .6rem .5rem; border-top: 1px solid var(--kb-linia); background: var(--kb-panel); font-size: .857rem; }
.czat-ai-blad { padding: .35rem .6rem; font-size: .857rem; color: var(--kb-blad); background: var(--kb-panel); border-top: 1px solid var(--kb-linia); }

.czat-ai { border-bottom: 1px solid var(--kb-linia); background: var(--kb-modul-tlo, var(--kb-pasek)); padding: .55rem .8rem; }
.czat-ai-glowa { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.czat-ai-tresc { white-space: pre-wrap; font-size: .86rem; margin-top: .3rem; }
.czat-ai-stopka { font-size: .857rem; color: var(--kb-szary); margin-top: .35rem; }

/* Znacznik rozmowy na liście dokumentów: neutralny, gdy wszystko przeczytane.
   Nieprzeczytane biorą czerwoną plakietkę .czat-poz-nowe — tę samą co na liście rozmów. */
.czat-znak { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: .4rem; border: 1px solid var(--kb-linia-mocna); border-radius: 9px; font-size: .857rem; font-weight: 600; color: var(--kb-szary); font-variant-numeric: tabular-nums; }
td .czat-poz-nowe { margin-left: .4rem; }

/* ═══ Analiza kierownika produkcji — ciemna tablica w barwach Kocher+Beck ═══════════════
   Jedyny ciemny ekran w panelu, celowo: to tablica na poranek, nie formularz. Barwy marki
   (czerwień K+B, grafit, biel), liczby tabelaryczne, cienkie linie — czytelne z dwóch metrów. */
.ana2050 {
    --a-tlo: #0b0d10; --a-panel: #12151a; --a-panel-2: #171b21; --a-linia: #262c35; --a-linia-2: #343b46;
    --a-tekst: #e9e6e1; --a-tekst-2: #b7b3ac; --a-szary: #7d8290;
    --a-czerwien: #e5233a; --a-czerwien-2: #ff5c6c; --a-czerwien-tlo: rgba(229, 35, 58, .14);
    --a-ok: #4fd18a; --a-ok-tlo: rgba(79, 209, 138, .12); --a-uwaga: #f0b243; --a-uwaga-tlo: rgba(240, 178, 67, .12);
    --a-cond: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --a-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
    background:
        radial-gradient(1200px 500px at 15% -10%, rgba(229, 35, 58, .16), transparent 60%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 48px,
        var(--a-tlo);
    color: var(--a-tekst); border-radius: 10px; padding: 26px 28px 30px; margin: 0 -8px;
    font-variant-numeric: tabular-nums;
}
.ana2050 .ana-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--a-linia-2); padding-bottom: 16px; margin-bottom: 22px; }
.ana2050 .ana-nad { font-family: var(--a-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-czerwien-2); }
.ana2050 h1.ana-tytul { font-family: var(--a-cond); font-weight: 600; font-size: 34px; letter-spacing: .01em; margin: 4px 0 6px; color: #fff; }
.ana2050 .ana-lead { color: var(--a-tekst-2); max-width: 78ch; margin: 0; font-size: 15px; }
.ana2050 .ana-stempel { font-family: var(--a-mono); font-size: 12px; color: var(--a-szary); white-space: nowrap; }
.ana2050 .ana-stempel b { color: var(--a-tekst); font-weight: 500; }
.ana2050 .ana-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 26px; }
.ana2050 .ana-kafel { background: linear-gradient(180deg, var(--a-panel-2), var(--a-panel)); border: 1px solid var(--a-linia); border-radius: 8px; padding: 14px 16px 12px; position: relative; overflow: hidden; }
.ana2050 .ana-kafel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a-linia-2); }
.ana2050 .ana-kafel.zle::before { background: var(--a-czerwien); box-shadow: 0 0 14px var(--a-czerwien); }
.ana2050 .ana-kafel.uwaga::before { background: var(--a-uwaga); }
.ana2050 .ana-kafel.ok::before { background: var(--a-ok); }
.ana2050 .ana-kafel .ana-liczba { font-family: var(--a-cond); font-size: 38px; line-height: 1; font-weight: 600; color: #fff; }
.ana2050 .ana-kafel.zle .ana-liczba { color: var(--a-czerwien-2); }
.ana2050 .ana-kafel.uwaga .ana-liczba { color: var(--a-uwaga); }
.ana2050 .ana-kafel.ok .ana-liczba { color: var(--a-ok); }
.ana2050 .ana-kafel .ana-pod { color: var(--a-tekst-2); font-size: 13px; margin-top: 6px; line-height: 1.3; }
.ana2050 .ana-kafel .ana-pod-dop { color: var(--a-uwaga); font-size: 12px; margin-top: 4px; line-height: 1.3; cursor: help; }
.ana2050 .ana-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 10px 0 6px; font-size: 12px; color: var(--a-tekst-2); }
.ana2050 .ana-legenda .ana-znak { margin: 0; }
.ana2050 .ana-legenda-tytul { font-weight: 600; }
.ana2050 .ana-podsekcja { font-size: 14px; font-weight: 700; margin: 18px 0 4px; color: var(--a-tekst); }
.ana2050 h2.ana-sekcja { font-family: var(--a-cond); font-weight: 600; font-size: 21px; margin: 30px 0 4px; color: #fff; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ana2050 h2.ana-sekcja::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--a-linia-2), transparent); }
.ana2050 .ana-opis { color: var(--a-szary); font-size: 13px; margin: 0 0 12px; max-width: 90ch; }
/* Zdanie otwierajace ekran. Wieksze od opisu sekcji i jasniejsze od kafli — ma byc
   pierwsza rzecza, ktora wpada w oko, a nie kolejnym akapitem drobnym drukiem. */
.ana2050 .ana-zdanie { font-size: 17px; line-height: 1.55; color: #fff; margin: 22px 0 14px; max-width: 80ch; }
.ana2050 .ana-zwin { margin-top: 30px; border-top: 1px solid var(--a-linia); }
.ana2050 .ana-zwin > summary {
    cursor: pointer; list-style: none; padding: 14px 0 2px;
    font-family: var(--a-cond); font-weight: 600; font-size: 19px; color: var(--a-tekst-2);
}
.ana2050 .ana-zwin > summary::-webkit-details-marker { display: none; }
.ana2050 .ana-zwin > summary::before { content: "▸ "; color: var(--a-szary); }
.ana2050 .ana-zwin[open] > summary::before { content: "▾ "; }
.ana2050 .ana-zwin > summary:hover { color: #fff; }
.ana2050 .ana-zwin-ile { font-family: inherit; font-weight: 400; color: var(--a-szary); font-size: 15px; }

/* Liczba przy tytule sekcji — zeby dwie sasiadujace tabele nie czytaly sie jak jedna. */
.ana2050 .ana-sekcja-ile {
    font-family: var(--a-cond); font-weight: 400; font-size: 15px; color: var(--a-tekst-2);
    white-space: nowrap;
}
/* Telefon: „42 wyroby - wysylka 09.09-30.09" ma 295 px przy ekranie 390 px i razem
   z tytulem nie miesci sie w jednym wierszu — bez tego wisial 31 px za krawedzia
   i Joachim nie widzial konca okna wysylki. Schodzi wiec do wlasnego wiersza,
   a kreska wypelniajaca (::after) na tej szerokosci tylko przeszkadza. */
@media (max-width: 640px) {
    .ana2050 h2.ana-sekcja { font-size: 19px; gap: 4px; }
    .ana2050 h2.ana-sekcja::after { display: none; }
    .ana2050 .ana-sekcja-ile { flex: 1 0 100%; white-space: normal; }
}
/* Pas dnia: data raz, nie w kazdym wierszu. */
.ana2050 table.ana-wykaz tr.ana-dzien > td {
    padding: 16px 10px 6px; border-bottom: 1px solid var(--a-linia-2); background: transparent;
    font-size: 14px; color: #fff;
}
.ana2050 table.ana-wykaz tr.ana-dzien.zle > td { color: var(--a-czerwien-2); }
.ana2050 .ana-dzien-ile { color: var(--a-szary); font-size: 12.5px; margin-left: 10px; }
/* Wspolny przedrostek numeru — obecny, ale cichy. */
.ana2050 .ana-nr-baza { color: var(--a-szary); }
/* Kolejne podzlecenie tego samego zlecenia: bez kreski u gory, zeby blok trzymal sie razem. */
.ana2050 table.ana-wykaz tr.ana-ciag > td { border-top: 0; padding-top: 2px; }
/* Wspolny start komponentow — wlasna linia pod plakietkami, bo to nie jest kolejna
   brakujaca czesc, tylko polecenie: te trzy ruszyc jednego dnia. */
/* Naglowek klikalny do sortowania — wyglad jest wyzej, w jednej regule dla
   ".tabela th.sortuj, .tabela th.sort". Dubel stal tutaj i wygrywal
   kolejnoscia, wiec ekrany z klasa "sort" mialy inny hover niz reszta panelu. */
/* Gotowe okna wykazu. */
.ana2050 .ana-okna { display: flex; gap: 6px; align-items: flex-end; }
.ana2050 .b132-horyzont { margin: 6px 0 10px; align-items: center; flex-wrap: wrap; }
.ana2050 .b132-etapy { font-size: 12px; white-space: normal; text-align: right; }
.ana2050 .ana-btn.wybrany { border-color: var(--a-czerwien); color: #fff; }
.ana2050 .ana-razem-start { margin-top: 5px; font-size: 12px; color: var(--a-uwaga); }
.ana2050 .ana-razem-start.zle { color: var(--a-czerwien-2); font-weight: 600; }
/* Stopka wykazu: liczba, ktora czyta sie na koncu. */
.ana2050 table.ana-wykaz tfoot tr.ana-razem > td {
    border-top: 2px solid var(--a-linia-2); padding-top: 12px; font-size: 14px; color: #fff;
}
.ana2050 .ana-tab { overflow-x: auto; border: 1px solid var(--a-linia); border-radius: 8px; background: var(--a-panel); }
.ana2050 table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ana2050 th { font-family: var(--a-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-szary); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--a-linia-2); white-space: nowrap; }
.ana2050 td { padding: 9px 12px; border-bottom: 1px solid var(--a-linia); vertical-align: top; color: var(--a-tekst); }
.ana2050 tr:last-child td { border-bottom: 0; }
.ana2050 tr:hover td { background: rgba(255,255,255,.025); }
.ana2050 th.n, .ana2050 td.n { text-align: right; font-family: var(--a-mono); white-space: nowrap; }
.ana2050 .ana-szary { color: var(--a-szary); font-size: 12.5px; }
.ana2050 .ana-zle { color: var(--a-czerwien-2); font-weight: 600; }
.ana2050 .ana-uwaga { color: var(--a-uwaga); font-weight: 600; }
.ana2050 .ana-ok { color: var(--a-ok); font-weight: 600; }
.ana2050 .ana-znak { display: inline-block; font-family: var(--a-mono); font-size: 12px; letter-spacing: .04em; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--a-linia-2); color: var(--a-tekst-2); margin: 2px 4px 0 0; white-space: nowrap; }
.ana2050 .ana-znak.zle { border-color: rgba(229,35,58,.5); background: var(--a-czerwien-tlo); color: var(--a-czerwien-2); }
.ana2050 .ana-znak.uwaga { border-color: rgba(240,178,67,.5); background: var(--a-uwaga-tlo); color: var(--a-uwaga); }
.ana2050 .ana-znak.ok { border-color: rgba(79,209,138,.5); background: var(--a-ok-tlo); color: var(--a-ok); }
/* Zrobiona część kompletu przed montażem (D-33 a): widać ją, ale nie woła — przerywana ramka, przygaszona. */
.ana2050 .ana-znak.zrobione { border-style: dashed; color: var(--a-szary); opacity: .75; }
/* Podpowiedź plakietki (data-tip). Zamiast title: title pokazuje się po ok. sekundzie bezruchu myszy, a na
   telefonie wcale. Ta pojawia się od razu po najechaniu, a na dotyku po stuknięciu — plakietka ma tabindex,
   więc dostaje fokus. Stoi NAD plakietką, bo pod ostatnim wierszem tabela by ją przycięła (overflow-x). */
.ana2050 .ana-znak[data-tip] { position: relative; cursor: help; }
.ana2050 .ana-znak[data-tip]:hover::after, .ana2050 .ana-znak[data-tip]:focus::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
    width: max-content; max-width: min(360px, 78vw); white-space: normal; text-align: left;
    padding: 6px 9px; border: 1px solid var(--a-linia-2); border-radius: 4px;
    background: var(--a-panel-2); color: var(--a-tekst); box-shadow: 0 8px 22px rgba(0,0,0,.5);
    font-family: var(--a-mono); font-size: 12px; letter-spacing: 0; line-height: 1.45; font-weight: 400;
    pointer-events: none;
}
/* Ostatnia kolumna: podpowiedź wyrównana do prawej krawędzi plakietki, żeby nie wyjechała poza tabelę. */
.ana2050 td:last-child .ana-znak[data-tip]::after { left: auto; right: 0; }
.ana2050 .ana-znak[data-tip]:focus { outline: none; }
.ana2050 .ana-znak[data-tip]:focus-visible { outline: 2px solid var(--a-czerwien); outline-offset: 1px; }
.ana2050 .ana-pasek { height: 5px; background: var(--a-linia); border-radius: 3px; overflow: hidden; margin-top: 5px; min-width: 90px; }
.ana2050 .ana-pasek span { display: block; height: 100%; background: var(--a-czerwien); }
.ana2050 .ana-pasek.ok span { background: var(--a-ok); }
.ana2050 .ana-pasek.uwaga span { background: var(--a-uwaga); }
.ana2050 .ana-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ana2050 .ana-pusto { color: var(--a-szary); padding: 14px 16px; border: 1px dashed var(--a-linia-2); border-radius: 8px; }
.ana2050 .ana-stopka { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--a-linia); color: var(--a-szary); font-size: 12.5px; max-width: 110ch; }
.ana2050 a { color: var(--a-czerwien-2); }
@media (max-width: 900px) { .ana2050 .ana-dwie { grid-template-columns: 1fr; } .ana2050 { padding: 18px 14px; margin: 0; } }

/* ── Analiza: filtry, akcje, rozwinięcie zlecenia ─────────────────────────────────────── */
.ana2050 .ana-akcje { display: flex; gap: 8px; margin-top: 10px; }
.ana2050 .ana-btn {
    font-family: var(--a-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    background: var(--a-panel-2); color: var(--a-tekst); border: 1px solid var(--a-linia-2);
    border-radius: 3px; padding: 6px 12px; cursor: pointer;
}
.ana2050 .ana-btn:hover:not(:disabled) { border-color: var(--a-czerwien); color: #fff; }
.ana2050 .ana-btn:disabled { opacity: .45; cursor: default; }
.ana2050 .ana-filtry { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; }
.ana2050 .ana-filtry label { display: flex; flex-direction: column; gap: 4px; }
.ana2050 .ana-filtry label span {
    font-family: var(--a-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-szary);
}
.ana2050 .ana-filtry select {
    background: var(--a-panel-2); color: var(--a-tekst); border: 1px solid var(--a-linia-2);
    border-radius: 3px; padding: 6px 10px; font-family: var(--a-sans, inherit); font-size: 13.5px; min-width: 190px;
}
/* Pola dat na ciemnej tablicy — bez tej reguły reset kontrolek dawał ciemny tekst na ciemnym tle. */
.ana2050 .ana-filtry input[type="date"] {
    background: var(--a-panel-2); color: var(--a-tekst); border: 1px solid var(--a-linia-2);
    border-radius: 3px; padding: 6px 10px; font-family: var(--a-mono); font-size: 13.5px; color-scheme: dark;
}
@media (max-width: 640px) {
    .ana2050 table.ana-wykaz th, .ana2050 table.ana-wykaz td { padding-left: 8px; padding-right: 8px; }
    .ana2050 table.ana-wykaz .ana-znak { letter-spacing: 0; padding: 2px 5px; }
}
.ana2050 tr.ana-klik { cursor: pointer; }
.ana2050 tr.ana-otwarty td { background: rgba(229, 35, 58, .07); }
.ana2050 tr.ana-detal td { background: var(--a-tlo); padding: 14px 16px; }
.ana2050 .ana-detal-lbl {
    font-family: var(--a-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--a-czerwien-2); margin-bottom: 8px;
}
.ana2050 tr.ana-suma td { border-top: 1px solid var(--a-linia-2); background: rgba(255,255,255,.03); }
.ana2050 td a { color: var(--a-tekst); text-decoration: none; border-bottom: 1px dotted var(--a-linia-2); }
.ana2050 td a:hover { color: var(--a-czerwien-2); border-bottom-color: var(--a-czerwien); }

/* ── Wydruk: czarne na białym, bez nawigacji ──────────────────────────────────────────── */
@media print {
    .topbar, .kbb-marka, .sidebar, .okruszki, .ana-akcje, .ana-filtry, .stopka-danych,
    .kompas-przycisk, .kompas-panel, nav { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .ana2050 {
        background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important;
        --a-tekst: #000; --a-tekst-2: #222; --a-szary: #555; --a-linia: #bbb; --a-linia-2: #888;
        --a-panel: #fff; --a-panel-2: #fff; --a-czerwien: #c41230; --a-czerwien-2: #c41230;
        --a-ok: #1f7a45; --a-uwaga: #a8640a;
    }
    .ana2050 h1.ana-tytul, .ana2050 h2.ana-sekcja { color: #000 !important; }
    .ana2050 .ana-kafel, .ana2050 .ana-tab { border-color: #999 !important; break-inside: avoid; }
    .ana2050 .ana-kafel .ana-liczba { color: #000 !important; }
    .ana2050 tr { break-inside: avoid; }
    .ana2050 .ana-znak { border-color: #999 !important; background: #fff !important; }
    .ana2050 table { font-size: 10.5pt; }
    a[href]::after { content: ""; }
}
/* Zlecenie, którego nikt nie wziął mimo przekroczonego bufora — cienki czerwony pasek z lewej. */
.ana2050 tr.ana-nikt td:first-child { box-shadow: inset 3px 0 0 var(--a-czerwien); }

/* Okienko „Transport” (Patrycja Flugel 07.10.2026): wąska kolumna z przyciskiem, numer przesyłki do skopiowania. */
.portal-transport-przycisk { white-space: nowrap; }
.transport-okno { max-inline-size: 46rem; }
.transport-nr { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; user-select: all; }
/* D-90 C5 (1.1.211): opiekun partnera — kogo pytać, z klikalnym telefonem i e-mailem. */
.portal-opiekun {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; margin: -.25rem 0 1rem;
    padding: .5rem .8rem; border: 1px solid var(--kb-linia); border-radius: 6px; background: var(--kb-panel);
    font-size: .95rem; color: var(--kb-tekst);
}
.portal-opiekun-tytul { color: var(--kb-tekst-drugi); }
/* Patrycja Flugel 07.10.2026: opiekun, zastępstwo i biuro — każdy kontakt w osobnej linii. */
.portal-opiekun { flex-direction: column; align-items: flex-start; gap: .2rem; }
.portal-opiekun-wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
/* D-90 C1/C2 (1.1.211): karta zamówienia nad pozycjami — pasek etapów, daty, zmiany terminu. Etap rozpoznawalny bez koloru:
   zaliczony = pełna kropka, bieżący = gruba obwódka i pogrubiony napis, przyszły = pusta szara kropka. */
.karta-zam { margin: .2rem 0 .8rem; padding: .7rem .9rem; border: 1px solid var(--kb-linia); border-radius: 6px; background: var(--kb-panel); }
.karta-zam-etapy { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 0 0 .6rem; padding: 0; }
.karta-zam-etapy li {
    display: flex; align-items: center; gap: .35rem; color: var(--kb-tekst-drugi); font-size: .9rem;
    padding-inline-end: 1.1rem; position: relative;
}
.karta-zam-etapy li:not(:last-child)::after { content: "→"; position: absolute; inset-inline-end: .25rem; color: var(--kb-ramka-pola); }
.karta-zam-kropka { inline-size: .7rem; block-size: .7rem; border-radius: 50%; border: 2px solid var(--kb-ramka-pola); background: #fff; flex: none; }
.karta-zam-etapy li.zaliczony { color: var(--kb-tekst); }
.karta-zam-etapy li.zaliczony .karta-zam-kropka { background: var(--kb-ok); border-color: var(--kb-ok); }
.karta-zam-etapy li.biezacy { color: var(--kb-tekst); font-weight: 700; }
.karta-zam-etapy li.biezacy .karta-zam-kropka { border-width: 3px; border-color: var(--kb-grafit); }
.karta-zam-daty { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; }
.karta-zam-daty > div { display: flex; gap: .4rem; align-items: baseline; }
.karta-zam-daty dt { color: var(--kb-tekst-drugi); font-size: .857rem; }
.karta-zam-daty dd { margin: 0; font-weight: 600; }
.karta-zam-historia { margin-top: .55rem; font-size: .9rem; }
.karta-zam-historia-tytul { color: var(--kb-tekst-drugi); margin-inline-end: .5rem; }
.karta-zam-historia ul { margin: .25rem 0 0; padding-inline-start: 1.1rem; }
.karta-zam-anul { margin-bottom: .5rem; }
.portal-opiekun-sep { color: var(--kb-tekst-drugi); }
.portal-opiekun a { white-space: nowrap; }
.portal-legenda, .legenda-ekranu { color: var(--kb-szary); font-size: .857rem; margin: .1rem 0 .75rem; max-width: 88ch; }
/* D-87 B9 (1.1.211): tekst pomocniczy portalu ciemniejszy — na zrzucie wyszło ok. 4,6:1, na granicy WCAG AA. */
.portal-legenda { color: var(--kb-tekst-drugi); }
/* D-89 (badacz 1630): pulpit partnera bez zamówień — zachęta zamiast zer. */
.portal-pusty { margin: 0 0 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--kb-ramka-pola); border-radius: 8px; background: var(--kb-panel); }
.portal-pusty p { margin: 0 0 .6rem; }
.portal-pusty-tytul { font-size: 1.1rem; font-weight: 600; }
/* D-89 / R-122 I1: strona pomocy portalu. */
.pomoc-portalu h2 { font-size: 1.05rem; margin: 1.1rem 0 .45rem; }
.pomoc-portalu h2:first-child { margin-top: 0; }
.pomoc-portalu p { max-inline-size: 88ch; margin: 0 0 .4rem; }
.pomoc-stany { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pomoc-stany li { display: grid; grid-template-columns: minmax(12rem, max-content) 1fr; gap: .8rem; align-items: center; }

/* Zamówienie z oferty w portalu partnera: pola obok siebie, ilość wąska i wyrównana do prawej. */
/* Filtr wygasłych ofert nad listą w portalu — oddech od tabeli, żeby nie wyglądał na jej część. */
.zam-portal-filtr { margin-block-end: .9rem; }
/* Oznaczenie produkcyjne na pozycji — wpisuje je wystawiający w panelu (hala czyta je w Kolejce). */
.pole-nrprod { min-inline-size: 11rem; }

.zam-portal-pola { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .4rem; }
.zam-portal-pola .field { flex: 1 1 16rem; }
.zam-portal-akcje { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.pole-ilosc { width: 7rem; text-align: right; }

/* Kalendarz: dzień, który minął, a praca na niego zaplanowana nie jest skończona.
   Świadomie inny kolor niż „wolna moc" i niż „przeciążony": tu nie chodzi o obciążenie,
   tylko o to, że dnia już nie ma, a robota została. */
.kalprod-zalegly {
    background: repeating-linear-gradient(135deg, #fbf1e3, #fbf1e3 7px, #f7e9d6 7px, #f7e9d6 14px);
    border-color: #dcb87a;
}
.kalprod-p-zalegly {
    background: repeating-linear-gradient(135deg, #fbf1e3, #fbf1e3 4px, #dcb87a 4px, #dcb87a 8px);
    border: 1px solid #dcb87a;
}

/* Kalendarz: dzień przed najwcześniejszym realnym terminem. Ma wolną moc wysyłkową,
   ale nowego zamówienia i tak się na niego nie zdąży — więc nie może wyglądać jak wolny. */
.kalprod-zawczesnie { background: var(--kb-pasek); border-color: var(--kb-linia); opacity: .62; }
.kalprod-zawczesnie .kalprod-stan { color: var(--kb-szary); }
.kalprod-p-zawczesnie { background: var(--kb-pasek); border: 1px solid var(--kb-linia-mocna); opacity: .62; }
.kalprod-najwczesniej {
    color: var(--kb-tekst); font-size: .9rem; margin: .2rem 0 .6rem;
    padding: .45rem .7rem; border-left: 3px solid var(--kb-czerwony); background: var(--kb-pasek);
}
.czat-powiadom { font-size: .857rem; }

/* ── Wybór kontrahenta w formularzach oferty i zamówienia ─────────────────────
   Zastępuje listę rozwijaną z kilkuset pozycjami. Lista podpowiedzi wisi nad
   treścią (position:absolute), żeby nie rozpychała formularza przy pisaniu.     */
.wk { margin-top:.3rem; }
.wk-pole { position:relative; max-width:42rem; }
.wk-input {
    width:100%; box-sizing:border-box; height:40px; padding:.45rem .6rem;
    border:1px solid var(--kb-linia); border-radius:5px; font:inherit; background:#fff;
    transition:border-color .12s ease, box-shadow .12s ease;
}
.wk-input:hover { border-color:var(--kb-linia-mocna); }
.wk-input:focus { border-color:var(--kb-czerwony); }
.wk-lista {
    position:absolute; inset-inline:0; top:100%; z-index:30;
    margin-top:.2rem; background:#fff; border:1px solid var(--kb-linia); border-radius:5px;
    box-shadow:0 8px 22px rgba(0,0,0,.14); max-height:19rem; overflow-y:auto;
}
.wk-poz {
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    width:100%; text-align:left; padding:.45rem .65rem; background:#fff;
    border:0; border-bottom:1px solid var(--kb-linia); cursor:pointer; font-size:.87rem;
}
.wk-poz:last-child { border-bottom:0; }
.wk-poz:hover { background:var(--kb-pasek); }
.wk-nazwa { flex:1; min-width:0; }
.wk-nip { color:var(--kb-szary); font-size:.857rem; white-space:nowrap; }
.wk-info { padding:.45rem .65rem; font-size:.857rem; color:var(--kb-szary); background:var(--kb-pasek); }
.wk-wybrany {
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    max-width:42rem; padding:.55rem .75rem; background:var(--kb-pasek);
    border:1px solid var(--kb-linia); border-left:3px solid var(--kb-czerwony); border-radius:5px;
}
.wk-wybrany-dane { min-width:0; }
.wk-wybrany-nazwa { font-weight:600; color:var(--kb-grafit); }
.wk-wybrany-meta { font-size:.857rem; color:var(--kb-szary); margin-top:.1rem; }

/* ── Nowe zamówienie: dwie drogi startu, widoczne od wejścia na ekran ── */
.zam-drogi { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.6rem; }
@media (max-width:700px) { .zam-drogi { grid-template-columns:1fr; } }
.zam-droga {
    display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
    text-align:left; padding:.8rem .9rem; background:#fff;
    border:1px solid var(--kb-linia); border-radius:6px; cursor:pointer; font:inherit;
    transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.zam-droga:hover:not(:disabled) { border-color:var(--kb-czerwony); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.zam-droga:disabled { opacity:.55; cursor:not-allowed; background:var(--kb-pasek); }
.zam-droga-wybrana { border-color:var(--kb-czerwony); box-shadow:0 0 0 2px rgba(212,40,47,.12); }
.zam-droga-tyt { font-weight:600; color:var(--kb-grafit); }
.zam-droga-opis { font-size:.857rem; color:var(--kb-szary); line-height:1.35; }

/* ── Podsumowanie i braki pod tabelą pozycji ── */
.of-podsumowanie {
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
    margin-top:.5rem; font-size:.857rem; color:var(--kb-szary);
}
.of-pln { font-variant-numeric:tabular-nums; }
.of-braki {
    margin-top:.6rem; padding:.5rem .7rem; font-size:.857rem;
    background:#fdf7ec; border-inline-start:3px solid var(--kb-uwaga); border-radius:4px;
}
.of-tabela tr.of-wiersz-braki > td { background:#fdf7ec; }
.of-pole-braki { border-color:var(--kb-uwaga) !important; }
.of-opis { margin-top:.3rem; width:100%; box-sizing:border-box; font:inherit; }
.of-opis-link { display:inline-block; margin-top:.25rem; font-size:.857rem; }
.of-akcje-kom { display:flex; gap:.25rem; }
.of-czas { margin-top:.9rem; }

/* Przycisk zapisu wyłączony, gdy formularz jest niekompletny — bez tego wyglądał na gotowy do
   kliknięcia. Sam wygląd stanu „wyłączony” jest jeden dla wszystkich przycisków — koniec arkusza. */


.of-czas .btn-link-akcja { align-self:flex-start; }
/* Kalkulator: lista kilku wycen do jednej oferty (07.10.2026). */
.kalk-lista { margin-block-start: 1rem; }
.kalk-lista-ilosc { inline-size: 5.5rem; text-align: end; }
.kalk-akcje { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.kalk-dodano { color: var(--ok, #1e7d32); }
/* Własna data z kalendarza obok pola tekstowego (07.10.2026). Pole daty leży na przycisku — klik otwiera kalendarz przeglądarki. */
.of-czas-wiersz { display:flex; gap:.5rem; align-items:stretch; }
.of-czas-wiersz > input[list] { flex:1 1 auto; min-inline-size:0; }
.of-czas-data { position:relative; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; cursor:pointer; }
.of-czas-data input[type=date] { position:absolute; inset:0; opacity:0; cursor:pointer; inline-size:100%; block-size:100%; }

/* ═══ Pulpit zarządu — tablica dowodzenia ══════════════════════════════════════════════
   Druga ciemna tablica w panelu, rodzina ta sama co „Analiza kierownika produkcji":
   grafit, czerwień Kocher+Beck, liczby tabelaryczne, cienkie linie. Różnica jest w gęstości —
   pulpit ogląda się z bliska i przez minutę, więc ma więcej warstw: szklane panele, znaczniki
   narożne i mierniki przy każdej liczbie. Wydruk wychodzi na biało (patrz @media print).      */
.pz2060 {
    --p-tlo: #070a0e;
    --p-panel: #10141b;
    --p-panel-2: #161b24;
    --p-linia: rgba(255, 255, 255, .075);
    --p-linia-2: rgba(255, 255, 255, .16);
    --p-tekst: #eef1f6;
    --p-tekst-2: #a9b2c0;
    --p-szary: #6d7686;
    --p-czerw: #e5233a;
    --p-czerw-2: #ff5f6e;
    --p-czerw-tlo: rgba(229, 35, 58, .14);
    --p-ok: #47e39b;
    --p-ok-tlo: rgba(71, 227, 155, .12);
    --p-uwaga: #ffc24d;
    --p-uwaga-tlo: rgba(255, 194, 77, .12);
    --p-cond: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --p-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

    background:
        radial-gradient(900px 420px at 8% -8%, rgba(229, 35, 58, .20), transparent 62%),
        radial-gradient(700px 380px at 92% 4%, rgba(229, 35, 58, .07), transparent 60%),
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 100% 44px,
        var(--p-tlo);
    color: var(--p-tekst);
    border: 1px solid var(--p-linia);
    border-radius: 12px;
    padding: 28px 30px 30px;
    margin: 0 -8px;
    font-variant-numeric: tabular-nums;
}

/* ── Nagłówek tablicy ─────────────────────────────────────────────────────────────────── */
.pz2060 .pz-glowa {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    border-bottom: 1px solid var(--p-linia-2); padding-bottom: 18px;
}
.pz2060 .pz-nad {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--p-czerw-2);
}
.pz2060 h1.pz-tytul {
    font-family: var(--p-cond); font-weight: 600; font-size: 38px; letter-spacing: .01em;
    margin: 6px 0 8px; color: #fff; line-height: 1.05;
}
.pz2060 .pz-lead { color: var(--p-tekst-2); max-width: 78ch; margin: 0; font-size: 14.5px; }
.pz2060 .pz-stempel { font-family: var(--p-mono); font-size: 12px; color: var(--p-szary); text-align: right; line-height: 1.7; }
.pz2060 .pz-stempel b { color: var(--p-tekst); font-weight: 500; }
.pz2060 .pz-stempel-okres { color: var(--p-tekst); font-size: 13px; }
.pz2060 .pz-zrodla { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.pz2060 .pz-tag {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border: 1px solid var(--p-linia-2); border-radius: 3px; color: var(--p-tekst-2);
}

/* ── Wybór okresu: jasny komponent przemalowany na ciemno ─────────────────────────────── */
.pz2060 .pz-sterowanie { margin: 18px 0 4px; }
.pz2060 .pasek-filtrow { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 14px; }
.pz2060 .filtr-etykieta {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--p-szary);
}
.pz2060 .field-input, .pz2060 .pasek-filtrow select, .pz2060 .pasek-filtrow input {
    background: var(--p-panel-2); color: var(--p-tekst); border: 1px solid var(--p-linia-2);
    border-radius: 4px;
}
.pz2060 .field-input:focus { outline: none; border-color: var(--p-czerw); box-shadow: 0 0 0 3px var(--p-czerw-tlo); }
.pz2060 .pasek-filtrow button {
    background: var(--p-panel-2); color: var(--p-tekst); border: 1px solid var(--p-linia-2); border-radius: 4px;
}
.pz2060 .pasek-filtrow button:hover { border-color: var(--p-czerw); color: #fff; }
.pz2060 .filtr-zakres { color: var(--p-tekst); }
.pz2060 .filtr-ok { color: var(--p-szary); }
.pz2060 .filtr-uwaga { color: var(--p-uwaga); }
.pz2060 .pz-nota { color: var(--p-szary); font-size: 12.5px; margin: 6px 0 18px; max-width: 120ch; }

.pz2060 .pz-ladowanie, .pz2060 .pz-pusto {
    color: var(--p-szary); padding: 26px; border: 1px dashed var(--p-linia-2); border-radius: 8px; text-align: center;
}
.pz2060 .pz-alarm {
    color: var(--p-czerw-2); background: var(--p-czerw-tlo); border: 1px solid rgba(229, 35, 58, .45);
    border-radius: 8px; padding: 14px 16px;
}

/* ── Pasek sygnałów ───────────────────────────────────────────────────────────────────── */
.pz2060 .pz-sygnaly {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 6px;
    background: linear-gradient(90deg, var(--p-czerw-tlo), transparent 70%);
    border: 1px solid rgba(229, 35, 58, .28); border-left: 3px solid var(--p-czerw); border-radius: 8px;
}
.pz2060 .pz-sygnaly-ok { background: linear-gradient(90deg, var(--p-ok-tlo), transparent 70%); border-color: rgba(71, 227, 155, .3); border-left-color: var(--p-ok); }
.pz2060 .pz-sygnaly-etyk {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-tekst-2);
}
.pz2060 .pz-chip {
    font-family: var(--p-mono); font-size: 12px; padding: 4px 10px; border-radius: 3px;
    border: 1px solid var(--p-linia-2); color: var(--p-tekst-2); text-decoration: none; white-space: nowrap;
}
.pz2060 .pz-chip.alarm { border-color: rgba(229, 35, 58, .55); background: var(--p-czerw-tlo); color: var(--p-czerw-2); }
.pz2060 .pz-chip.uwaga { border-color: rgba(255, 194, 77, .5); background: var(--p-uwaga-tlo); color: var(--p-uwaga); }
.pz2060 .pz-chip.ok { border-color: rgba(71, 227, 155, .5); background: var(--p-ok-tlo); color: var(--p-ok); }
.pz2060 a.pz-chip:hover { border-color: currentColor; }

/* ── Nagłówki bloków ──────────────────────────────────────────────────────────────────── */
.pz2060 h2.pz-sekcja {
    font-family: var(--p-cond); font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--p-szary); margin: 34px 0 12px; display: flex; align-items: center; gap: 14px;
}
.pz2060 h2.pz-sekcja::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--p-linia-2), transparent); }

/* ── Panel: szkło z narożnymi znacznikami ─────────────────────────────────────────────── */
.pz2060 .pz-panel {
    position: relative; background: linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
    border: 1px solid var(--p-linia); border-radius: 10px; padding: 18px 20px;
    display: block; text-decoration: none; color: inherit;
}
/* Znaczniki narożne — cecha tej tablicy, nie ozdoba: pokazują krawędź panelu tam, gdzie
   cienka linia na ciemnym tle sama z siebie ginie. */
.pz2060 .pz-panel::before, .pz2060 .pz-panel::after {
    content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
    border-color: var(--p-linia-2); border-style: solid; border-width: 0;
}
.pz2060 .pz-panel::before { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; border-radius: 3px 0 0 0; }
.pz2060 .pz-panel::after { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; border-radius: 0 0 3px 0; }
.pz2060 a.pz-panel { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.pz2060 a.pz-panel:hover {
    border-color: rgba(229, 35, 58, .5); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.pz2060 a.pz-panel:hover::before, .pz2060 a.pz-panel:hover::after { border-color: var(--p-czerw); }

.pz2060 .pz-panel-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pz2060 .pz-panel-opis { color: var(--p-szary); font-size: 12.5px; max-width: 80ch; }
.pz2060 .pz-etyk {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-szary);
}
.pz2060 .pz-znacznik {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--p-szary); border: 1px solid var(--p-linia); border-radius: 3px; padding: 1px 6px;
}

/* ── Liczby ───────────────────────────────────────────────────────────────────────────── */
.pz2060 .pz-liczba { font-family: var(--p-cond); font-size: 34px; line-height: 1.05; font-weight: 600; color: #fff; margin-top: 6px; }
.pz2060 .pz-liczba.ok { color: var(--p-ok); }
.pz2060 .pz-liczba.zle { color: var(--p-czerw-2); }
.pz2060 .pz-jedn { font-family: var(--p-mono); font-size: 13px; font-weight: 400; color: var(--p-szary); margin-left: 7px; letter-spacing: .04em; }
.pz2060 .pz-jedn-mala { font-family: var(--p-mono); font-size: 12px; font-weight: 400; color: var(--p-szary); margin-left: 4px; }
.pz2060 .pz-pod { color: var(--p-tekst-2); font-size: 13px; margin-top: 7px; line-height: 1.4; }
.pz2060 .pz-cichy { color: var(--p-szary); font-size: 12.5px; }
.pz2060 .pz-pod b.ok, .pz2060 .pz-pod .ok { color: var(--p-ok); }
.pz2060 .pz-pod b.uwaga, .pz2060 .pz-pod .uwaga { color: var(--p-uwaga); }
.pz2060 .pz-pod b.zle, .pz2060 .pz-pod .zle { color: var(--p-czerw-2); }

/* ── Miernik: jeden pasek obsługuje wszystkie wskaźniki tablicy ───────────────────────── */
.pz2060 .pz-miernik {
    display: block; height: 4px; margin-top: 10px; border-radius: 2px;
    background: rgba(255, 255, 255, .07); overflow: hidden;
}
.pz2060 .pz-miernik-duzy { height: 8px; border-radius: 4px; margin-top: 0; }
.pz2060 .pz-miernik > span {
    display: block; height: 100%; background: var(--p-czerw); border-radius: inherit;
    transition: width .5s cubic-bezier(.22, .8, .3, 1);
}
.pz2060 .pz-miernik > span.ok { background: linear-gradient(90deg, rgba(71, 227, 155, .55), var(--p-ok)); }
.pz2060 .pz-miernik > span.uwaga { background: linear-gradient(90deg, rgba(255, 194, 77, .5), var(--p-uwaga)); }
.pz2060 .pz-miernik > span.zle { background: linear-gradient(90deg, rgba(229, 35, 58, .5), var(--p-czerw-2)); }
.pz2060 .pz-miernik > span.cichy { background: rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: reduce) { .pz2060 .pz-miernik > span { transition: none; } }

/* ── Sprzedaż: wskaźnik główny + kondycja ─────────────────────────────────────────────── */
.pz2060 .pz-siatka-hero { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 14px; }
.pz2060 .pz-hero { padding-bottom: 12px; }
.pz2060 .pz-hero-link { display: block; text-decoration: none; color: inherit; }
.pz2060 .pz-hero-liczba {
    font-family: var(--p-cond); font-size: 62px; line-height: 1; font-weight: 600; color: #fff; margin-top: 8px;
    text-shadow: 0 0 42px rgba(229, 35, 58, .35);
}
.pz2060 .pz-hero-liczba .pz-jedn { font-size: 17px; }
.pz2060 .pz-delta {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
    font-family: var(--p-mono); font-size: 12.5px; padding: 3px 10px; border-radius: 3px; border: 1px solid var(--p-linia-2);
}
.pz2060 .pz-delta.ok { color: var(--p-ok); border-color: rgba(71, 227, 155, .45); background: var(--p-ok-tlo); }
.pz2060 .pz-delta.zle { color: var(--p-czerw-2); border-color: rgba(229, 35, 58, .45); background: var(--p-czerw-tlo); }
.pz2060 .pz-delta-znak { font-size: 14px; line-height: 1; }
.pz2060 .pz-wykres { margin-top: 14px; }
.pz2060 .pz-wykres .wykres-legenda { color: var(--p-szary); font-size: 12px; margin-top: 4px; }
.pz2060 .pz-wykres .legenda-kolor { border: 0; }
.pz2060 .pz-skad { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--p-czerw-2); }

.pz2060 .pz-kondycja { display: flex; flex-direction: column; gap: 14px; }
.pz2060 .pz-kond {
    display: block; text-decoration: none; color: inherit;
    padding: 11px 12px 12px; border-radius: 7px; background: rgba(255, 255, 255, .022);
    border: 1px solid var(--p-linia); border-left: 2px solid var(--p-linia-2);
}
.pz2060 .pz-kond.ok { border-left-color: var(--p-ok); }
.pz2060 .pz-kond.uwaga { border-left-color: var(--p-uwaga); }
.pz2060 .pz-kond.zle { border-left-color: var(--p-czerw); box-shadow: -6px 0 18px -10px var(--p-czerw); }
.pz2060 .pz-kond:hover { background: rgba(255, 255, 255, .05); }
.pz2060 .pz-kond-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pz2060 .pz-kond-etyk { font-size: 13px; color: var(--p-tekst); }
.pz2060 .pz-kond-wart { font-family: var(--p-cond); font-size: 22px; font-weight: 600; color: #fff; }
.pz2060 .pz-kond-stopka { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pz2060 .pz-kond-konkret { color: var(--p-szary); font-size: 12px; }
.pz2060 .pz-kond-stan { font-family: var(--p-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pz2060 .pz-kond-stan.ok { color: var(--p-ok); }
.pz2060 .pz-kond-stan.uwaga { color: var(--p-uwaga); }
.pz2060 .pz-kond-stan.zle { color: var(--p-czerw-2); }

/* ── Drabinka koncentracji ────────────────────────────────────────────────────────────── */
.pz2060 .pz-koncentracja { margin-top: 14px; }
.pz2060 .pz-drabinka { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.pz2060 .pz-szczebel {
    display: grid; grid-template-columns: minmax(140px, 200px) 1fr minmax(150px, auto);
    align-items: center; gap: 16px; text-decoration: none; color: inherit;
    padding: 5px 6px; border-radius: 5px;
}
.pz2060 .pz-szczebel:hover { background: rgba(255, 255, 255, .035); }
.pz2060 .pz-szczebel-etyk { font-size: 13px; color: var(--p-tekst-2); }
.pz2060 .pz-szczebel-wart { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.pz2060 .pz-szczebel-wart b { font-family: var(--p-cond); font-size: 20px; font-weight: 600; color: #fff; }
.pz2060 .pz-szczebel-kwota { font-family: var(--p-mono); font-size: 12px; color: var(--p-szary); }

/* ── Finanse ──────────────────────────────────────────────────────────────────────────── */
.pz2060 .pz-siatka-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pz2060 .pz-domena { display: flex; flex-direction: column; }

/* ── Obieg gotówki ────────────────────────────────────────────────────────────────────── */
.pz2060 .pz-obieg { margin-top: 14px; }
.pz2060 .pz-obieg-siatka { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pz2060 .pz-obieg-wiersz { display: grid; grid-template-columns: minmax(190px, 280px) 1fr 90px; align-items: center; gap: 16px; }
.pz2060 .pz-obieg-etyk { font-size: 12.5px; color: var(--p-tekst-2); }
.pz2060 .pz-obieg-wart { font-family: var(--p-cond); font-size: 21px; font-weight: 600; color: #fff; text-align: right; }
.pz2060 .pz-obieg-wniosek {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 16px;
    padding: 11px 14px; border-radius: 7px; font-size: 13px; color: var(--p-tekst-2);
    border: 1px solid var(--p-linia); border-left: 2px solid var(--p-linia-2); background: rgba(255, 255, 255, .022);
}
.pz2060 .pz-obieg-wniosek.uwaga { border-left-color: var(--p-uwaga); }
.pz2060 .pz-obieg-wniosek.ok { border-left-color: var(--p-ok); }
.pz2060 .pz-obieg-wniosek b { color: #fff; font-family: var(--p-cond); font-size: 17px; font-weight: 600; }
.pz2060 .pz-obieg-dodatek { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.pz2060 .pz-obieg-dodatek b { font-family: var(--p-cond); font-size: 18px; }
.pz2060 .pz-obieg-dodatek b.ok { color: var(--p-ok); }
.pz2060 .pz-obieg-dodatek b.zle { color: var(--p-czerw-2); }

.pz2060 .pz-objasnienia {
    margin-top: 14px; border: 1px solid var(--p-linia); border-radius: 8px; padding: 10px 16px; background: rgba(255, 255, 255, .015);
}
.pz2060 .pz-objasnienia summary { cursor: pointer; color: var(--p-tekst-2); font-size: 13px; }
.pz2060 .pz-objasnienia summary::marker { color: var(--p-czerw-2); }
.pz2060 .pz-objasnienia p { color: var(--p-szary); font-size: 12.5px; margin: 8px 0; max-width: 100ch; }
.pz2060 .pz-objasnienia b { color: var(--p-tekst); }

/* ── Portfel zamówień ─────────────────────────────────────────────────────────────────── */
.pz2060 .pz-portfel-tresc { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; }
.pz2060 .pz-portfel-suma {
    display: block; text-decoration: none; color: inherit; padding: 12px 14px; border-radius: 8px;
    background: rgba(229, 35, 58, .08); border: 1px solid rgba(229, 35, 58, .28);
}
.pz2060 .pz-portfel-suma:hover { border-color: var(--p-czerw); }
.pz2060 .pz-os { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.pz2060 .pz-os-punkt {
    display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit;
    padding: 10px 12px 12px; border-radius: 7px; border: 1px solid var(--p-linia);
    background: rgba(255, 255, 255, .022);
}
.pz2060 .pz-os-punkt:hover { border-color: var(--p-linia-2); background: rgba(255, 255, 255, .045); }
.pz2060 .pz-os-punkt.zalegle { border-color: rgba(229, 35, 58, .45); background: var(--p-czerw-tlo); }
.pz2060 .pz-os-etyk { font-family: var(--p-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-szary); }
.pz2060 .pz-os-punkt.zalegle .pz-os-etyk { color: var(--p-czerw-2); }
.pz2060 .pz-os-kwota { font-family: var(--p-cond); font-size: 18px; font-weight: 600; color: #fff; }
.pz2060 .pz-os-szt { font-size: 12px; color: var(--p-szary); }
.pz2060 .pz-os-punkt .pz-miernik { margin-top: 8px; }
.pz2060 .pz-portfel-uwaga { margin-top: 14px; font-size: 12.5px; color: var(--p-szary); border-top: 1px solid var(--p-linia); padding-top: 12px; }
.pz2060 .pz-portfel-uwaga b { color: var(--p-tekst); }

/* ── Komentarz AI ─────────────────────────────────────────────────────────────────────── */
.pz2060 .pz-ai { margin-top: 14px; border-left: 2px solid var(--p-czerw); }
.pz2060 .pz-ai-glowa { display: flex; align-items: center; gap: 10px; }
.pz2060 .pz-ai-znak {
    font-family: var(--p-mono); font-size: 12px; letter-spacing: .1em; font-weight: 600;
    padding: 2px 7px; border-radius: 3px; background: var(--p-czerw); color: #fff;
}
.pz2060 .pz-ai-tresc { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--p-tekst); max-width: 105ch; }
.pz2060 .pz-ai-stopka { margin-top: 10px; font-size: 12px; color: var(--p-szary); }

/* ── Dział handlowy: kafle i dwie historie ───────────────────────────────────────────── */
.pz2060 .pz-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.pz2060 .pz-kafel .pz-liczba { font-size: 30px; }
.pz2060 .pz-zmiana { margin-top: 8px; font-family: var(--p-mono); font-size: 12px; }
.pz2060 .pz-zmiana.wzrost, .pz2060 .pz-zmiana.dodatnie { color: var(--p-ok); }
.pz2060 .pz-zmiana.spadek, .pz2060 .pz-zmiana.ujemne { color: var(--p-czerw-2); }
.pz2060 .pz-zmiana.szary, .pz2060 .pz-zmiana.pz-cichy { color: var(--p-szary); }

.pz2060 .pz-historie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pz2060 .pz-historia { border-left: 2px solid var(--p-linia-2); }
.pz2060 .pz-historia.szansa { border-left-color: var(--p-uwaga); }
.pz2060 .pz-historia.ryzyko { border-left-color: var(--p-czerw); }
.pz2060 .pz-historia.szansa .pz-liczba { color: var(--p-uwaga); }
.pz2060 .pz-historia.ryzyko .pz-liczba { color: var(--p-czerw-2); }
.pz2060 .pz-historia-link { margin-top: 12px; font-family: var(--p-mono); font-size: 12px; letter-spacing: .06em; color: var(--p-czerw-2); }
.pz2060 .pz-tag-rog { position: absolute; top: 14px; right: 16px; }

/* ── Stopka danych ────────────────────────────────────────────────────────────────────── */
.pz2060 .pz-stopka { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--p-linia); }
.pz2060 .stopka-danych { background: transparent; border: 0; color: var(--p-szary); font-size: 12px; padding: 0; }
.pz2060 .stopka-danych b { color: var(--p-tekst-2); }
.pz2060 .stopka-ok { color: var(--p-ok); }
.pz2060 .stopka-uwagi { color: var(--p-szary); font-size: 12px; max-width: 120ch; }
.pz2060 .pz-klik { font-family: var(--p-mono); font-size: 12px; letter-spacing: .06em; color: var(--p-szary); margin-top: 10px; }
.pz2060 .alert { background: var(--p-czerw-tlo); border: 1px solid rgba(229, 35, 58, .4); color: var(--p-czerw-2); }

.pz2060 a { color: var(--p-czerw-2); }
.pz2060 a:focus-visible { outline: 2px solid var(--p-czerw-2); outline-offset: 2px; }

@media (max-width: 1100px) {
    .pz2060 .pz-siatka-hero { grid-template-columns: 1fr; }
    .pz2060 .pz-siatka-3 { grid-template-columns: 1fr; }
    .pz2060 .pz-portfel-tresc { grid-template-columns: 1fr; }
    .pz2060 .pz-historie { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .pz2060 { padding: 18px 14px; margin: 0; }
    .pz2060 h1.pz-tytul { font-size: 30px; }
    .pz2060 .pz-hero-liczba { font-size: 44px; }
    .pz2060 .pz-szczebel { grid-template-columns: 1fr; gap: 6px; }
    .pz2060 .pz-szczebel-wart { justify-content: flex-start; }
    .pz2060 .pz-obieg-wiersz { grid-template-columns: 1fr; gap: 6px; }
    .pz2060 .pz-obieg-wart { text-align: left; }
    .pz2060 .pz-stempel { text-align: left; }
    .pz2060 .pz-zrodla { justify-content: flex-start; }
}

/* Wydruk: tablica jest ciemna na ekranie, ale na papierze ma być czarno-biała i czytelna. */
@media print {
    .pz2060 {
        background: #fff; color: #111; border: 0; padding: 0; margin: 0;
    }
    .pz2060 h1.pz-tytul, .pz2060 .pz-liczba, .pz2060 .pz-hero-liczba,
    .pz2060 .pz-kond-wart, .pz2060 .pz-szczebel-wart b, .pz2060 .pz-obieg-wart { color: #111; text-shadow: none; }
    .pz2060 .pz-panel { background: #fff; border: 1px solid #ccc; break-inside: avoid; }
    .pz2060 .pz-panel::before, .pz2060 .pz-panel::after { display: none; }
    .pz2060 .pz-lead, .pz2060 .pz-pod, .pz2060 .pz-etyk, .pz2060 .pz-szary { color: #444; }
    .pz2060 .pz-miernik { background: #e6e8ec; }
    .pz2060 .pz-sterowanie, .pz2060 .pz-objasnienia { display: none; }
}


/* ── Analiza sprzedaży wg odbiorcy — układ zbliżony do okna SAP Business One ─────────────
   Świadomie „jak w SAP": niebieski pasek tytułu, żółta linia podpowiedzi, gęsta siatka
   z szarym nagłówkiem. Joachim ma ten raport w oczach codziennie i ma go rozpoznać. */
.sapan-okno { background:#fff; border:1px solid #b9c2cc; border-radius:4px; margin:.6rem 0 1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden; }
.sapan-pasek { background:linear-gradient(180deg,#3b6ea5,#1f4f86); color:#fff; font-weight:600; font-size:.9rem; padding:.45rem .8rem; letter-spacing:.01em; }
.sapan-podpowiedz { background:#fff8d6; border-bottom:1px solid #e6d98a; color:#5a4d00; font-size:.857rem; padding:.3rem .8rem; }
.sapan-zakladki { display:flex; gap:2px; padding:.5rem .6rem 0; background:#eef1f5; border-bottom:1px solid #c9d1da; }
.sapan-zakladka { border:1px solid #c9d1da; border-bottom:0; background:#dfe5ec; color:#4a5561; font:inherit; font-size:.857rem; padding:.35rem .9rem; border-radius:4px 4px 0 0; cursor:pointer; }
.sapan-zakladka.aktywna { background:#fff; color:#1f2a36; font-weight:600; position:relative; top:1px; }
.sapan-zakladka:disabled { cursor:not-allowed; opacity:.7; }
.sapan-kryteria { display:grid; grid-template-columns:auto auto 1fr; gap:.8rem 1.4rem; padding:.9rem 1rem .4rem; }
.sapan-grupa { border:1px solid #d3dae2; border-radius:4px; padding:.5rem .8rem .6rem; margin:0; display:flex; flex-direction:column; gap:.3rem; min-width:11rem; }
.sapan-grupa legend { font-size:.857rem; text-transform:uppercase; letter-spacing:.05em; color:#5a6673; padding:0 .3rem; }
.sapan-grupa label { display:flex; align-items:center; gap:.4rem; font-size:.86rem; }
.sapan-grupa input[type=radio], .sapan-grupa input[type=checkbox] { accent-color:#1f4f86; }
.sapan-grupa-szeroka { flex-direction:column; }
.sapan-wiersz { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; }
.sapan-wiersz label { display:flex; align-items:center; gap:.4rem; font-size:.857rem; }
.sapan-wiersz input, .sapan-wiersz select { font:inherit; font-size:.86rem; padding:.28rem .45rem; border:1px solid #b9c2cc; border-radius:3px; background:#fff; }
.sapan-kod { width:8rem; text-transform:uppercase; }
.sapan-szary { color:var(--kb-szary); }
.sapan-przyciski { display:flex; gap:.6rem; align-items:center; padding:.5rem 1rem .9rem; }
.sapan-wynik { margin-top:1rem; }
.sapan-tabela-wrap { overflow-x:auto; }
.sapan-tabela { border-collapse:collapse; width:100%; font-size:.857rem; font-variant-numeric:tabular-nums; }
.sapan-tabela th { background:#e6eaef; color:#1f2a36; font-weight:600; text-align:left; padding:.35rem .5rem; border:1px solid #cfd6de; white-space:nowrap; }
.sapan-tabela th.sapan-pod { background:#eef1f5; font-weight:500; font-size:.857rem; color:#5a6673; }
.sapan-tabela th.sortuj { cursor:pointer; user-select:none; }
.sapan-tabela th.sortuj:hover { background:#d9e0e8; }
.sapan-tabela td { padding:.28rem .5rem; border:1px solid #e3e8ee; white-space:nowrap; }
.sapan-tabela tbody tr:nth-child(even):not(.sapan-szczegoly) td { background:#f6f8fa; }
.sapan-wiersz-danych { cursor:pointer; }
.sapan-wiersz-danych:hover td { background:#fff3c4 !important; }
/* Prefiks .sapan-tabela tbody, bo zebra „:nth-child(even)" ma mocniejszy selektor —
   dzięki temu nie trzeba tu !important. */
.sapan-tabela tbody tr.sapan-wiersz-danych.otwarty td { background:var(--kb-pasek); }
.sapan-tabela tbody tr.sapan-wiersz-danych.otwarty td:first-child { box-shadow:inset 3px 0 0 var(--kb-grafit); }
.sapan-nr { width:2.2rem; color:#5a6673; text-align:right; }
.sapan-strzalka { width:1.6rem; text-align:center; }
.sapan-link { color:#d68a00; font-size:.9rem; }
.sapan-nazwa { max-width:22rem; overflow:hidden; text-overflow:ellipsis; }
.sapan-suma { font-weight:600; background:#f0f4f8; }
.sapan-tabela th.sapan-okres { min-width:8.5rem; text-align:right; }
.sapan-tabela tfoot td { background:#e6eaef; font-weight:600; border-top:2px solid #9fb0c2; }
.sapan-razem-etyk { text-align:right; color:#1f2a36; }
.sapan-szczegoly td { background:var(--kb-pasek); padding:4px 16px 16px 40px; box-shadow:inset 3px 0 0 var(--kb-grafit); }
.sapan-tabela-mala { width:auto; min-width:34rem; font-size:.857rem; }
.sapan-tabela-mala th { background:#eef1f5; }
.sapan-uzgodnienie { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; padding:.55rem .8rem; font-size:.857rem; border-top:1px solid #cfd6de; background:#fafbfc; }
.sapan-uzgodnienie b { color:#1f2a36; }
.sapan-okno .stopka-uwagi { padding:0 .8rem .7rem; margin:0; font-size:.857rem; }
@media (max-width:900px) { .sapan-kryteria { grid-template-columns:1fr; } }


/* ── Pulpit zarządu: pasek „ten miesiąc" i „jak w SAP" ─────────────────────────────── */
.pz2060 .pz-miesiac { margin-top: 14px; border-left: 2px solid var(--p-czerw); }
.pz2060 .pz-miesiac-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 6px; }
.pz2060 .pz-miesiac-poz { display: block; text-decoration: none; color: inherit; padding: 10px 12px; border-radius: 7px; background: rgba(255, 255, 255, .022); border: 1px solid var(--p-linia); }
.pz2060 a.pz-miesiac-poz:hover { border-color: rgba(229, 35, 58, .5); background: rgba(255, 255, 255, .045); }
.pz2060 .pz-miesiac-poz .pz-liczba { font-size: 28px; }
.pz2060 .pz-miesiac-poz .pz-etyk { letter-spacing: .04em; }
.pz2060 .pz-jaksap { margin-top: 8px; }
.pz2060 .pz-jaksap a { color: var(--p-czerw-2); }

.pz2060 .pz-siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pz2060 .pz-handlowcy { margin-top: 14px; }
.pz2060 .pz-ai-zrodla { margin-top: 10px; border-top: 1px solid var(--p-linia); padding-top: 8px; }
.pz2060 .pz-ai-zrodla summary { cursor: pointer; font-family: var(--p-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-szary); }
.pz2060 .pz-ai-zrodla summary::marker { color: var(--p-czerw-2); }
.pz2060 .pz-ai-zrodla ul { margin: 8px 0 0; padding-left: 18px; color: var(--p-tekst-2); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 1100px) { .pz2060 .pz-siatka-2 { grid-template-columns: 1fr; } }

/* ── Administracja → Cele i progi ── */
.adm-progi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin-top: .6rem; }
.adm-prog { border: 1px solid var(--kb-linia); border-radius: 6px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; background: #fff; }
.adm-prog-nazwa { font-weight: 600; color: var(--kb-grafit); font-size: .9rem; }
.adm-prog .kontr-pole { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; }
.adm-prog .kontr-pole span { font-size: .857rem; color: var(--kb-szary); }
.adm-prog .kontr-pole input { width: 7rem; text-align: right; }

/* Generator MC — gotowy komplet z wpisanych wymiarów */
.gendok-gotowy { border: 1px solid #1f5fa8; border-radius: 8px; padding: 14px 16px 12px; margin-bottom: 18px; background: rgba(31, 95, 168, 0.04); }
.gendok-gotowy h2 { margin: 0 0 4px; font-size: 1.05rem; color: #1f5fa8; }
.gendok-plan { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gendok-plan li { display: flex; gap: 8px; align-items: baseline; font-size: 0.93rem; }
.gendok-plan-znak { width: 1.1em; font-weight: 700; }
.gendok-plan-ok .gendok-plan-znak { color: #1f7a3a; }
.gendok-plan-brak { color: #7a5a1f; }
.gendok-plan-brak .gendok-plan-znak { color: #b3261e; }
.gendok-os .field { margin-bottom: 6px; }
.gendok-os .field-input::placeholder { color: #8a94a3; font-style: italic; }

/* Konfigurator MC: wybór wykonania, wymiary części i stale widoczny wynik. */
.mc-config { --mc-blue: #1f5fa8; --mc-line: #dcdee1; margin: 1.25rem 0 2rem; }
.mc-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.15rem; gap: 2.5rem; }
.mc-steps li { display: flex; align-items: center; gap: .65rem; color: var(--kb-szary); font-weight: 500; }
.mc-steps li > span, .mc-step-number { display: inline-grid; place-items: center; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; border: 1px solid var(--mc-line); border-radius: 50%; font-size: .857rem; background: white; }
.mc-steps .mc-step-current { color: var(--mc-blue); font-weight: 600; }
.mc-step-current > span { background: var(--mc-blue) !important; color: white; border-color: var(--mc-blue) !important; }
.mc-step-done > span { color: var(--kb-ok); border-color: var(--kb-ok) !important; }
.mc-search, .mc-template, .mc-dimensions, .mc-output, .mc-start { background: var(--kb-panel); border: 1px solid var(--mc-line); border-radius: 7px; }
.mc-search { padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; }
.mc-section-heading { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
.mc-section-heading > div { flex: 1; min-width: 0; }
.mc-section-heading h2 { margin: 0; font-size: 1.2rem; line-height: 1.5; font-weight: 600; }
.mc-section-heading p { margin: .15rem 0 0; color: var(--kb-szary); font-size: .88rem; }
.mc-step-number { color: var(--mc-blue); border-color: #b8cce2; background: #f2f6fb; }
.mc-search-fields { display: grid; grid-template-columns: minmax(15rem, 2fr) minmax(12rem, 1fr) auto; gap: 1.1rem; align-items: start; }
.mc-search-fields > button { margin-top: 1.6rem; min-height: 2.65rem; }
/* Drugie kryterium — numer zlecenia produkcyjnego (06.10.2026); oddzielone linią, bo wyklucza się z maszyną. */
.mc-search-number { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--mc-line); }
.mc-search-number > div { flex: 0 1 26rem; min-width: min(15rem, 100%); }
.mc-search-number > button { min-height: 2.65rem; }
.mc-config .field-label { display: block; margin-bottom: .35rem; font-weight: 500; }
.mc-config .field-input { width: 100%; max-width: none; min-width: 0; min-height: 2.65rem; border-radius: 4px; font-size: 1rem; }
.mc-config input:focus-visible, .mc-config button:focus-visible, .mc-config summary:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: 3px; }
.mc-config .btn-wtorny { border: 1px solid #b8c4d1; border-radius: 4px; background: white; color: var(--mc-blue); padding: .55rem .85rem; font: inherit; font-weight: 500; cursor: pointer; }
.mc-config .btn-wtorny:hover:not(:disabled) { background: #f2f6fb; border-color: var(--mc-blue); }
.mc-config .btn-wtorny:disabled { color: #777; background: #f1f3f5; border-color: var(--mc-line); cursor: default; }
.mc-config a.btn-wtorny { display: inline-block; text-decoration: none; }
.mc-config a.btn-wtorny:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: 2px; }
.mc-config .gendok-podpowiedzi { max-height: 19rem; }
.mc-config .gendok-podpowiedz { padding: .65rem .8rem; }
.mc-template { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; border-left: 4px solid var(--mc-blue); }
.mc-template h2 { margin: .1rem 0; font-size: 1.25rem; font-weight: 600; }
.mc-template p { margin: 0; color: var(--kb-szary); }
.mc-eyebrow { color: var(--mc-blue); font-size: .857rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.mc-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 29rem); gap: 1.2rem; align-items: start; }
.mc-workspace.mc-selecting { grid-template-columns: minmax(0, 1fr); }
.mc-dimensions, .mc-output { padding: 1.3rem 1.5rem; min-width: 0; }
.mc-results { min-width: 0; }
.mc-fieldset { border: 0; border-top: 1px solid var(--mc-line); margin: 1.5rem 0 0; padding: 1rem 0 .2rem; min-width: 0; }
.mc-fieldset legend { padding: 0 .65rem 0 0; font-weight: 600; font-size: 1rem; }
.mc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.mc-dimension { min-width: 0; }
.mc-dimension > label { display: block; margin-bottom: .35rem; font-size: .88rem; font-weight: 500; min-height: 1.3rem; }
.mc-input-unit { position: relative; }
.mc-input-unit input { padding-right: 2.7rem; font-variant-numeric: tabular-nums; }
.mc-input-unit > span { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); font-size: .857rem; color: var(--kb-szary); pointer-events: none; }
.mc-dimension-hint { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: space-between; font-size: .857rem; color: var(--kb-szary); margin-top: .3rem; }
.mc-changed { color: var(--mc-blue); font-weight: 600; }
.mc-origin { display: inline-block; margin-top: .25rem; font-size: .857rem; color: var(--kb-szary); }
.mc-origin-rysunek, .mc-origin-obliczony, .mc-origin-recznie { color: var(--mc-blue); }
.mc-origin-domyslny, .mc-origin-brak { color: #8b5a12; }
.mc-calculation-source { display: block; color: var(--mc-blue); font-size: .857rem; }
.mc-comparison-scroll { overflow-x: auto; }
.mc-comparison .tabela { width: 100%; font-size: .857rem; }
.mc-comparison .tabela th, .mc-comparison .tabela td { text-align: left; white-space: normal; vertical-align: top; }
.mc-comparison .tabela tbody th { min-width: 8rem; font-weight: 500; text-transform: none; background: transparent; }
.mc-comparison .tabela td:last-child { min-width: 12rem; font-size: .857rem; }
.mc-tolerance { border-left: 2px solid #ccd5df; padding-left: .65rem; font-size: .857rem; }
.mc-tolerance > b { display: block; margin-bottom: .25rem; }
.mc-tolerance > strong { display: block; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.mc-tolerance-source, .mc-tolerance-missing { font-size: .857rem; margin: .35rem 0 0; overflow-wrap: anywhere; }
.mc-tolerance-source { color: var(--kb-szary); }
.mc-tolerance-missing { color: #86560e; }
.mc-connection-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.mc-connection-list li { border-left: 3px solid #b38a42; padding: .4rem .7rem; margin-bottom: .65rem; }
.mc-connection-list li > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.mc-connection-list b { font-size: .857rem; }
.mc-connection-list p { font-size: .857rem; margin: .3rem 0 0; line-height: 1.5; color: var(--kb-szary); }
.mc-connection-status { font-size: .857rem; color: #86560e; }
.mc-connection-list .mc-connection-zgodnenominalnie { border-color: #347267; }
.mc-connection-zgodnenominalnie .mc-connection-status { color: #285e54; }
.mc-connection-list .mc-connection-sprzeczne { border-color: #b32632; }
.mc-connection-sprzeczne .mc-connection-status { color: #a51e2b; }
.mc-dimension-invalid .field-input { border-color: var(--kb-blad); background: #fff8f8; }
.mc-dimension-hint .blad-tekst { margin: 0; }
.mc-details { border-top: 1px solid var(--mc-line); padding: .9rem 0 .15rem; margin-top: 1rem; }
.mc-details > summary { cursor: pointer; font-weight: 500; color: var(--kb-tekst-drugi); }
.mc-details[open] > summary { margin-bottom: .8rem; }
.mc-inherited { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; }
.mc-inherited dt { color: var(--kb-szary); font-size: .857rem; }
.mc-inherited dd { margin: 0; font-weight: 500; }
.mc-calculated { margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.mc-calculated > div { padding: .75rem 0; border-bottom: 1px solid var(--mc-line); }
.mc-calculated > div:last-child { grid-column: 1 / -1; }
.mc-calculated dt { font-size: .857rem; color: var(--kb-szary); }
.mc-calculated dd { margin: .25rem 0 0; font-family: "Cascadia Code", Consolas, monospace; font-size: 1.5rem; font-weight: 500; font-style: normal; color: var(--mc-blue); font-variant-numeric: tabular-nums; }
.mc-calculated small { font-family: "Hind Siliguri", sans-serif; font-size: .857rem; color: var(--kb-szary); font-weight: 400; }
.mc-review-note { background: #fcf7ec; border-left: 3px solid #c77700; padding: .7rem .85rem; font-size: .857rem; color: #725315; }
.mc-output h3 { font-size: .9rem; font-weight: 600; margin: 1.1rem 0 .5rem; }
.mc-sheet-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.mc-sheet-list li { display: flex; align-items: baseline; gap: .7rem; padding: .4rem 0; border-bottom: 1px solid #edf0f2; }
.mc-sheet-icon { flex: 0 0 1rem; color: var(--mc-blue); }
.mc-sheet-missing .mc-sheet-icon { color: var(--kb-blad); font-weight: 700; }
.mc-sheet-list p { font-size: .857rem; color: var(--kb-blad); margin: .25rem 0; }
.mc-output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.mc-output-actions > :first-child { grid-column: 1 / -1; }
.mc-output-actions button { min-height: 2.6rem; white-space: normal; }
.mc-action-hint { font-size: .857rem; color: var(--kb-szary); }
.mc-output .tabela { width: 100%; }
.mc-output .tabela th { text-align: left; white-space: normal; font-weight: 400; background: transparent; text-transform: none; letter-spacing: normal; font-size: .857rem; }
.mc-output .tabela td { white-space: nowrap; font-size: .857rem; }
.mc-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding: 2rem 2.5rem; }
.mc-start h2 { font-size: 1.55rem; font-weight: 600; line-height: 1.3; margin: .65rem 0 1rem; max-width: 28rem; }
.mc-start p { color: var(--kb-szary); max-width: 35rem; line-height: 1.7; }
.mc-start-scope { padding: 0; margin: 1.5rem 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.mc-start-scope li { border: 1px solid var(--mc-line); border-radius: 4px; padding: .35rem .7rem; color: var(--kb-tekst-drugi); font-size: .857rem; }
.mc-recent h3 { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; }
.mc-recent button { display: flex; width: 100%; text-align: left; align-items: baseline; justify-content: space-between; gap: 1rem; background: none; border: 0; border-bottom: 1px solid var(--mc-line); padding: .65rem .2rem; font: inherit; color: var(--kb-tekst); cursor: pointer; }
.mc-recent button:hover { color: var(--mc-blue); background: #f2f6fb; }
.mc-recent small { flex-shrink: 0; color: var(--kb-szary); }
.mc-search-message { padding: 1.3rem 1.5rem; background: white; border: 1px solid var(--mc-line); border-radius: 6px; }
.mc-template-metrics { display: flex; gap: 1.5rem; padding: .55rem 0; font-variant-numeric: tabular-nums; color: var(--kb-szary); }
.mc-template-metrics b { font-weight: 500; color: var(--kb-tekst); }
.mc-selecting .gendok-wariant .adm-akcje { margin-top: .7rem; }
@media (min-width: 100rem) { .mc-output { position: sticky; top: 1rem; } }
@media (max-width: 82rem) { .mc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-workspace { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); } }
@media (max-width: 62rem) { .mc-workspace, .mc-start { grid-template-columns: minmax(0, 1fr); } .mc-start { gap: 1.5rem; padding: 1.5rem; } .mc-search-fields { grid-template-columns: 1fr 1fr; } .mc-machine-field { grid-column: 1 / -1; } .mc-search-fields > button { margin-top: 1.6rem; } }
@media (max-width: 38rem) { .mc-steps { gap: .6rem; justify-content: space-between; } .mc-steps li { flex-direction: column; text-align: center; font-size: .857rem; gap: .4rem; } .mc-search, .mc-dimensions, .mc-output { padding: 1rem; } .mc-search-fields, .mc-fields, .mc-inherited { grid-template-columns: minmax(0, 1fr); } .mc-search-fields > button { margin-top: 0; } .mc-template { align-items: flex-start; flex-direction: column; padding: 1rem; } .mc-section-heading { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); } .mc-section-heading > .btn-link { grid-column: 2; justify-self: start; } .mc-template-metrics { flex-wrap: wrap; gap: .6rem 1.2rem; } }

/* Obecność i pokrycie pracy — weryfikacja pracowników produkcji */
.tabela-otoczka { overflow-x: auto; }
.field-check { flex-direction: row; align-items: center; gap: .45rem; }
.field-check input { width: auto; margin: 0; }
.obec-domkniecie { font-size: .857rem; color: var(--kb-szary); margin: .1rem 0 1.1rem; }
/* Wiersz do wyjaśnienia jest jedynym, który kogoś obciąża — i jedynym w kolorze ostrzeżenia. */
.obec-uwaga > td { background: #fdf6e7; }
.obec-absencja > td { color: var(--kb-szary); font-style: italic; }
.obec-nieznany > td { color: var(--kb-szary); }
.obec-znaczniki { display: flex; flex-wrap: wrap; gap: .25rem; }
.obec-znaczniki .badge { font-size: .857rem; }
.obec-karta { padding: .5rem .2rem .7rem; }
.obec-stopka { font-size: .857rem; margin-top: 1rem; }
.obec-zastrzezenie { font-size: .857rem; color: var(--kb-szary); border-left: 3px solid var(--kb-czerwony); padding-left: .7rem; margin-top: .5rem; }
.obec-powody { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: -.6rem 0 1.1rem; }
.obec-powody .badge { font-size: .857rem; }
.obec-czolowka > td { background: #f0f7f1; }
/* Spotkanie z Joachimem 16.10.2026: poprawka w panelu na czerwono (W-70) — tło i pogrubienie, nie sam kolor (ergonomia: stan nie tylko kolorem). */
.obec-poprawione { background: var(--kb-blad-tlo) !important; color: var(--kb-blad); font-weight: 700; box-shadow: inset 3px 0 0 var(--kb-blad); }
.obec-poprawione-tekst { color: var(--kb-blad); font-weight: 600; }
.obec-korekta-wiersz > td { background: #fbfcfd; }
.obec-korekta { padding: .6rem .4rem; }
.obec-korekta-pola { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.obec-korekta-uwaga { flex: 1 1 260px; }
.obec-korekta-akcje { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.obec-korekta-historia { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .857rem; color: var(--kb-szary); }
/* Lista „kto jest w pracy” (W-73) i sekcje kadrowe (W-71, W-72, W-84) */
.obec-dzien { margin: 0 0 1.2rem; }
.obec-dzien-wybor { display: flex; align-items: flex-end; gap: .4rem; }
.obec-dzien-wybor .btn-wtorny { min-height: var(--kb-wys-kontrolki); }
.obec-dzien-suma { font-size: var(--kb-fs-l); margin: .2rem 0 .5rem; }
.obec-dzien-dzialy { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0 0 .6rem; }
.obec-dzien-grupy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: .6rem 1rem; }
.obec-dzien-grupa, .obec-nieobecnosci, .obec-rejestr { border: 1px solid var(--kb-linia); border-radius: 6px; background: var(--kb-panel); }
.obec-dzien-grupa > summary, .obec-nieobecnosci > summary, .obec-rejestr > summary { cursor: pointer; padding: .55rem .8rem; display: flex; gap: .5rem; align-items: baseline; }
.obec-dzien-grupa > table, .obec-nieobecnosci > .tabela-otoczka, .obec-rejestr > .tabela-otoczka { margin: 0 .4rem .5rem; }
.obec-nieobecnosci, .obec-rejestr { margin: 1rem 0; }
.obec-nieobecnosci > p, .obec-rejestr > p, .obec-rejestr > label, .obec-nieobecnosci > .alert { margin-left: .8rem; margin-right: .8rem; }
.obec-urlop-wpis { width: 5.5rem; text-align: right; }
.obec-dzien-stopka { font-size: .857rem; }

/* Legenda raportu obecności — dla kogoś, kto ogląda ten ekran pierwszy raz */
.obec-legenda { border: 1px solid var(--kb-linia, #dfe3e8); border-radius: 6px; margin: 0 0 1.1rem; background: #fbfcfd; }
.obec-legenda > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; font-size: .88rem; }
.obec-legenda > summary:hover { background: #f2f5f8; }
.obec-legenda-tresc { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem 1.8rem; padding: .3rem 1.1rem 1rem; }
.obec-legenda-tresc h3 { font-size: .857rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kb-szary); margin: 0 0 .5rem; }
.obec-legenda-tresc dl { margin: 0; }
.obec-legenda-tresc dt { margin-top: .55rem; font-weight: 600; font-size: .857rem; }
.obec-legenda-tresc dt:first-child { margin-top: 0; }
.obec-legenda-tresc dd { margin: .15rem 0 0; font-size: .857rem; color: var(--kb-szary); line-height: 1.45; }
.obec-legenda-nie { margin: 0; padding-left: 1.1rem; font-size: .857rem; color: var(--kb-szary); }
.obec-legenda-nie li { margin-bottom: .35rem; line-height: 1.45; }

/* Obecnosc: pasek przelacznika widoku i blok zadan „co z tym zrobic". */
.obec-widok-opis { margin-left: auto; align-self: center; font-size: .857rem; padding-right: .2rem; }
.obec-zadania { margin: .35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.obec-zadania li { line-height: 1.45; }
.obec-zadania .btn-link-akcja { font-weight: 600; }
.obec-pod { display: block; font-size: .857rem; font-weight: 400; }

/* --- Pulpit: tlo z bolidem Kocher+Beck ------------------------------------ */
/* Zdjecie idzie w warstwe ::before, nie w tlo elementu z trescia: przezroczystosc
   nalozona na caly pulpit zabralaby kontrast napisom, a tak blaknie samo zdjecie.
   Maska po lewej wygasza obraz tam, gdzie zaczyna sie tekst — bez niej ciemny bolid
   podchodzil pod naglowek i "Dzien dobry" traci czytelnosc. */
.pulpit { position: relative; }
.pulpit::before {
    /* Zakotwiczony DO DOŁU i wyśrodkowany w poziomie. Do dołu, bo na żywym ekranie
       09.09.2026 kafle modułów zasłaniały zdjęcie niemal w całości — zostawał skrawek
       między dwiema kolumnami, który wyglądał na przypadek, a nie na tło; pod siatką
       kafli jest wolne miejsce i tam bolid ma sens. Na środek, bo przy prawej krawędzi
       obcinał go brzeg okna i z bolidu zostawało pół samochodu. */
    content: ""; position: absolute; inset: auto 0 -2rem 0; margin-inline: auto;
    width: min(1040px, 76%); aspect-ratio: 1920 / 706;
    background: url('/img/kb-bolid.jpg') center bottom / contain no-repeat;
    opacity: .30; pointer-events: none; z-index: 0;
    /* Maska PROMIENISTA, nie liniowa. Zdjecie ma ciemne studyjne tlo, wiec przy masce
       wygaszajacej tylko lewa krawedz na jasnym pulpicie rysowal sie szary PROSTOKAT —
       wygladalo to na pomylke, a nie na tlo. Wygaszenie ze wszystkich stron sprawia,
       ze z pulpitu wychodzi sam bolid i nie ma zadnej krawedzi. */
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 32%, rgba(0,0,0,.4) 64%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, #000 32%, rgba(0,0,0,.4) 64%, transparent 100%);
}
.pulpit > * { position: relative; z-index: 1; }
/* Bolid ma siedziec NA DOLE pulpitu, a nie tuz pod kaflami. Warstwa ::before jest
   kotwiczona do dolu elementu .pulpit — a ten konczy sie zaraz za ostatnim kaflem, wiec
   „dol" wypadal w polowie ekranu. Rozciagamy wiec sam pulpit na wysokosc okna; puste
   miejsce pod kaflami i tak tam bylo, teraz po prostu nalezy do pulpitu.
   Odjete 16rem to pas marki, gorne menu i stopka — z zapasem, zeby nie zrobic paska
   przewijania na pustym ekranie. */
@media (min-width: 781px) { .pulpit { min-height: calc(100vh - 16rem); } }

/* Na waskim ekranie zdjecie zajmowaloby cala szerokosc pod kaflami i tylko brudzilo tlo. */
@media (max-width: 780px) { .pulpit::before { display: none; } }

/* --- Pulpit: ruchome kafelki ---------------------------------------------- */
.pulpit-pasek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pulpit-wskazowka { font-size: .857rem; color: var(--kb-tekst-drugi); margin-bottom: 1.3rem; }
.pulpit-wskazowka .btn-link { font-size: .857rem; margin-left: .4rem; }
.tile-big[draggable="true"] { cursor: grab; }
.tile-ciagniety { opacity: .45; cursor: grabbing; }
/* Cel upuszczenia dostaje kreske po lewej, a nie ramke dookola: ramka przesuwa tresc
   kafelka o piksel i cala siatka drga przy kazdym przejechaniu myszka. */
.tile-cel { box-shadow: inset 3px 0 0 var(--kb-czerwony); }

/* --- Modul AI ------------------------------------------------------------- */
.ai-kolumny { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ai-lista { margin: 0; padding-left: 1.1rem; }
.ai-lista li { margin-bottom: .5rem; line-height: 1.5; font-size: .88rem; }
.ai-lista li::marker { color: var(--kb-szary); }
.ai-lista-ok li::marker { color: var(--kb-ok); }
.ai-zasada {
    margin-top: 1.1rem; padding: .7rem .9rem; font-size: .857rem; line-height: 1.55;
    color: var(--kb-tekst-drugi); background: var(--kb-pasek);
    border-left: 3px solid var(--kb-czerwony);
}

/* ── Pasek „dodaj panel do ekranu telefonu" ─────────────────────────────────
   Siedzi nad dolną krawędzią, nad przyciskiem Kompas AI (z-index wyżej), i znika
   po dodaniu panelu albo po naciśnięciu „Nie teraz". Pokazuje go js/telefon.js —
   w HTML jest z atrybutem hidden, żeby nie mignął zanim skrypt zdecyduje. */
.instaluj-pasek {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950;
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem;
    background: var(--kb-grafit); color: #fff;
    border-radius: 8px; border-bottom: 3px solid var(--kb-czerwony);
    padding: .7rem .85rem; box-shadow: 0 6px 24px rgba(58, 52, 41, .35);
    font-size: .9rem;
}
/* „display: flex” wyżej PRZEBIJA atrybut hidden (reguła przeglądarki [hidden] { display: none } ma niższą wagę),
   więc do 1.1.215 pasek stał na wąskim ekranie zawsze — sam tytuł i „Nie teraz”, bez żadnej drogi (zrzut 390 px,
   06.10.2026). Wszystko, co tu ma własne display i bywa ukryte, ukrywamy jawnie. */
.instaluj-pasek[hidden], .instaluj-pasek [hidden], .tel-stan[hidden], .tel-przycisk[hidden], [data-platforma][hidden] { display: none !important; }
.instaluj-tekst { font-weight: 600; flex: 1 1 100%; }
.instaluj-opis { flex: 1 1 100%; font-size: .857rem; line-height: 1.45; color: #d8d3c8; }
a.instaluj-tak { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border-radius: 4px; font-size: .86rem; font-weight: 600; text-decoration: none; }
a.instaluj-tak:hover { color: #fff; text-decoration: none; background: var(--kb-czerwony-ciemny); }
.instaluj-pasek button {
    border: none; border-radius: 4px; padding: .45rem .9rem;
    font-size: .86rem; font-weight: 600; cursor: pointer; min-height: 40px;
}
.instaluj-tak { background: var(--kb-czerwony); color: #fff; }
.instaluj-nie { background: transparent; color: #cfc9bd; text-decoration: underline; padding-inline: .4rem; }
.instaluj-pasek .instaluj-nie { margin-inline-start: auto; }

/* Na dużym ekranie pasek nie ma racji bytu — panel otwiera się tam z zakładki. */
@media (min-width: 821px) { .instaluj-pasek { display: none !important; } }

/* ── Kod QR pod kartą logowania ─────────────────────────────────────────────
   Osobny blok POD formularzem, a nie w nim: to nie jest część logowania, tylko
   oferta „weź panel na telefon". Kod jest duży, bo ma go złapać aparat telefonu
   z ręki, pod kątem i przy odbiciu światła od monitora — przy 118 px był czytelny
   ledwo ledwo, więc urósł do 200 px i dostał układ jednokolumnowy, żeby miał
   na to miejsce. */
.login-qr {
    margin-top: .9rem;
    background: var(--kb-panel);
    border: 1px solid var(--kb-linia);
    border-radius: 4px;
    padding: 1rem 1.1rem 1.1rem;
    text-align: center;
}
.login-qr-kod { line-height: 0; margin-bottom: .7rem; }
.login-qr-kod svg {
    /* 240 px to nie „na oko": kod ma 29 modułów plus 4 moduły strefy ciszy z każdej
       strony, czyli 37 modułów w poprzek — przy 240 px wypada ponad 6 px na moduł,
       a od mniej więcej 5 px aparat telefonu łapie kod od razu, bez celowania. */
    width: 240px; height: 240px; display: block; margin: 0 auto;
    /* Biała otoczka wokół kodu to nie ozdoba: czytniki potrzebują jasnej strefy
       ciszy dookoła, a bez niej kod na szarym tle bywa nieodczytany. */
    background: #fff; padding: 8px; border: 1px solid var(--kb-linia); border-radius: 4px;
}
.login-qr-tekst { min-width: 0; }
.login-qr-tytul { display: block; font-weight: 700; font-size: .95rem; color: var(--kb-tekst); }
.login-qr-opis { margin: .3rem 0 .4rem; font-size: .857rem; color: var(--kb-szary); line-height: 1.5; }
.login-qr-siec { margin: 0 0 .45rem; font-size: .857rem; color: var(--kb-czerwony-ciemny); line-height: 1.5; }
.login-qr-adres { font-size: .857rem; color: var(--kb-szary); word-break: break-all; }

/* ── Strona /telefon — trzy kroki, otwierana z kodu QR ──────────────────────
   Projektowana pod telefon trzymany w jednej ręce: jedna kolumna, duże odstępy,
   przyciski wysokie na 44 px (dolna granica wygodnego celu pod palec). */
.tel-wrap { min-height: 100vh; background: var(--kb-tlo); padding: 1.2rem .9rem 3rem; }
.tel-karta {
    max-width: 34rem; margin: 0 auto; background: var(--kb-panel);
    border: 1px solid var(--kb-linia); border-top: 3px solid var(--kb-czerwony);
    border-radius: 6px; padding: 1.3rem 1.1rem 1.5rem;
}
.tel-logo { height: 30px; width: auto; display: block; margin-bottom: 1rem; }
.tel-tytul { font-size: 1.35rem; margin: 0 0 .2rem; color: var(--kb-tekst); }
.tel-wstep { margin: 0 0 1.2rem; color: var(--kb-szary); font-size: .92rem; }
.tel-kroki { margin: 0; padding-inline-start: 1.3rem; display: flex; flex-direction: column; gap: 1.35rem; }
.tel-kroki > li::marker { font-weight: 700; color: var(--kb-czerwony); }
.tel-krok-tytul { font-weight: 700; font-size: 1rem; color: var(--kb-tekst); }
.tel-krok-opis { margin: .3rem 0 .55rem; font-size: .88rem; line-height: 1.5; color: var(--kb-tekst); }
.tel-krok-szczegol { margin: .45rem 0 0; font-size: .857rem; line-height: 1.5; color: var(--kb-szary); }
.tel-przycisk {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 1.1rem; border-radius: 4px;
    background: var(--kb-panel); border: 1px solid var(--kb-czerwony);
    color: var(--kb-czerwony); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.tel-przycisk:hover { background: #f7efee; text-decoration: none; }
.tel-przycisk-glowny { background: var(--kb-czerwony); color: #fff; }
.tel-przycisk-glowny:hover { background: var(--kb-czerwony-ciemny); color: #fff; }
.tel-uwaga {
    margin: 1.5rem 0 0; padding-top: .9rem; border-top: 1px solid var(--kb-linia);
    font-size: .857rem; line-height: 1.5; color: var(--kb-czerwony-ciemny);
}
.tel-uwaga-cicha { margin-top: .5rem; padding-top: 0; border-top: none; color: var(--kb-szary); }
/* Ramka „na którym kroku jest ten telefon” — liczona w telefonie przez js/telefon.js. */
.tel-stan { margin: 0 0 1.2rem; padding: .7rem .85rem; border-radius: 6px; font-size: .9rem; line-height: 1.45; background: var(--kb-tlo); border: 1px solid var(--kb-linia); color: var(--kb-tekst); }
.tel-stan[data-wynik="ok"], .tel-stan[data-wynik="zainstalowana"] { background: var(--kb-ok-tlo); border-color: var(--kb-ok); color: var(--kb-ok-tekst); font-weight: 600; }
.tel-stan[data-wynik="brak"] { background: var(--kb-blad-tlo); border-color: var(--kb-blad); color: var(--kb-blad); font-weight: 600; }
.tel-kroki button.tel-przycisk { margin-top: .2rem; cursor: pointer; }
#krok-certyfikat { scroll-margin-top: 1rem; }

/* Przełącznik „pokaż konta zablokowane" pod wyszukiwarką w Administracji.
   Siedzi w ramce listy, nad nazwiskami, i ma być cichy — to nie jest filtr,
   z którego korzysta się na co dzień, tylko wyjaśnienie, czego nie widać. */
.adm-zablokowani {
    padding: .4rem .7rem;
    border-bottom: 1px solid var(--kb-linia);
    font-size: .857rem;
}

/* Wysyłka próbna raportu w Stanie systemu — pole adresu obok przycisku, w jednej linii
   z resztą wiersza, żeby nie wyglądało na osobną sekcję. */
.stan-probna { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
.stan-probna-adres { width: 15rem; max-width: 100%; font-size: .857rem; padding: .25rem .5rem; }
.stan-blad { color: var(--kb-czerwony-ciemny); font-weight: 600; }

/* ── Bilans: filtr magazynu ──────────────────────────────────────────────────
   Joachim wymienił MWL, KMU i KAD z nazwy, więc te trzy mają być widoczne od razu,
   a nie do wyszukania wśród piętnastu. „wazny" je wyróżnia, nie ukrywając reszty. */
.bilans-magazyny { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .9rem; }
/* Filtr magazynu to zwykly chip - ten sam ksztalt i ta sama wysokosc co pasek "zalozone filtry".
   Tlo brало sie z var(--kbb-tlo), czyli z szarosci strony; chip ma byc bialy. */
.bilans-mag-filtr {
    display: inline-flex; align-items: center; height: var(--kb-chip-h); padding: 0 12px;
    border: 1px solid var(--kb-ramka-pola); border-radius: 4px; background: #fff;
    font: inherit; font-size: var(--kb-fs-s); line-height: 1;
    cursor: pointer; color: var(--kb-tekst); white-space: nowrap;
}
.bilans-mag-filtr:hover { border-color: var(--kb-grafit); background: var(--kb-pasek); }
/* MWL, KMU i KAD Joachim wymienil z nazwy - wyroznia je grubszy napis i mocniejszy obrys, nie inny kolor. */
.bilans-mag-filtr.wazny { border-color: var(--kb-grafit); font-weight: 600; }
.bilans-mag-filtr.wybrany, .bilans-mag-filtr.wybrany:hover { background: var(--kb-grafit); border-color: var(--kb-grafit); color: #fff; }
.bilans-mag-filtr.wybrany .szary { color: var(--kb-na-grafit); }
.bilans-mag-filtr .szary { margin-inline-start: .3rem; font-weight: 600; color: var(--kb-tekst-drugi); font-variant-numeric: tabular-nums; }
.bilans-mag { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wyjscie z zawezenia do pelnej listy — obok licznika „3 z 895". */
.rop-pokaz-wszystkie {
    margin-left: .5rem; border: 0; background: none; padding: 0;
    font: inherit; font-size: .857rem; color: #c8102e; cursor: pointer; text-decoration: underline;
}
.rop-pokaz-wszystkie:hover { text-decoration: none; }

/* Kolumna „Magazyn": symbol i liczba, po ktora sie tu przychodzi. */
.bilans-mag { display: flex; gap: .45rem; align-items: baseline; white-space: nowrap; }
.bilans-mag + .bilans-mag { margin-top: .15rem; }
.bilans-mag-symbol { font-weight: 600; min-width: 2.6rem; }
.bilans-mag-ile { font-variant-numeric: tabular-nums; }
.bilans-mag.przyblizony .bilans-mag-ile { color: #6b7280; }
.bilans-mag-uwaga { font-size: .857rem; line-height: 1.25; margin-top: .15rem; white-space: normal; }

/* Jednostka miary — raz na wiersz, nie przy co drugiej liczbie. */
.bilans-jm { white-space: nowrap; color: #6b7280; font-size: .857rem; }

/* Legenda plakietek pod bilansem: para plakietka → zdanie, czytelna bez najeżdżania. */
.bilans-legenda { margin: .9rem 0 .4rem; padding: .7rem .9rem; border: 1px solid var(--kb-linia, #e5e7eb); border-radius: 6px; background: #fafbfc; font-size: .857rem; color: var(--kb-szary); }
.bilans-legenda-tytul { font-weight: 600; color: var(--kb-tekst, #1f2937); margin-bottom: .45rem; font-size: .857rem; letter-spacing: .02em; }
.bilans-legenda dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .9rem; margin: 0; align-items: start; }
.bilans-legenda dt { margin: 0; white-space: nowrap; }
.bilans-legenda dd { margin: 0; line-height: 1.4; }
.bilans-legenda-wiersz { display: inline-block; padding: .1rem .45rem; border-radius: 4px; background: #fdeaea; color: var(--kb-blad); font-size: .857rem; font-weight: 600; }
@media (max-width: 640px) { .bilans-legenda dl { grid-template-columns: 1fr; gap: .2rem; } .bilans-legenda dd { margin-bottom: .5rem; } }

/* Sobota: podsumowanie tygodnia (Joachim 14.09, 19:52) */
.kalprod-tydzien { margin-top: .4rem; padding-top: .3rem; border-top: 1px dashed rgba(127,127,127,.45); font-size: .857rem; font-weight: 600; line-height: 1.25; }


/* =========================================================================
   Przyciski, pola i fokus — jeden system (rodzina „przyciski-pola”).

   Do 17.09.2026 .btn-primary był zdefiniowany w arkuszu cztery razy, za każdym
   razem z innym promieniem (2 px albo 4 px) i innym odstępem, a przycisk
   drugoplanowy istniał w czterech wariantach (.btn-wiecej, .btn-akcja,
   .btn-wtorny, .btn-mini) o trzech różnych obrysach. Poprawka w jednym miejscu
   nie docierała do pozostałych. Tu stoi jedna definicja; stare nazwy klas
   zostają jako aliasy, więc nie trzeba ruszać dwustu miejsc w plikach .razor.

   Blok jest CELOWO na końcu arkusza: przy tej samej wadze selektora wygrywa
   reguła późniejsza, więc nie potrzeba tu ani !important, ani zagnieżdżeń.
   Reguły zawężone do ekranu (.mc-config .btn-wtorny, .stronicowanie .btn-wiecej,
   .kontr-nip-rzad .btn-akcja) mają wyższą wagę i dalej wygrywają — tak ma być.
   ========================================================================= */

/* Szkielet wspólny: wysokość, odstępy, krój. Kolor dokładają warianty niżej. */
.btn, .btn-primary, .btn-secondary, .btn-wiecej, .btn-akcja, .btn-wtorny {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: var(--kb-wys-kontrolki); padding: 0 14px; border-radius: 4px;
    font: inherit; font-size: var(--kb-fs-m); font-weight: 600; line-height: 1;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

/* Przycisk główny — jedyne miejsce w treści strony, gdzie czerwień marki jest wypełnieniem.
   Wyższy od pozostałych (40 px), bo stoi pod formularzem i kończy pracę na ekranie. */
.btn-primary {
    height: var(--kb-wys-formularz);
    background: var(--kb-czerwony); color: #fff; border: 1px solid var(--kb-czerwony);
}
.btn-primary:hover:not(:disabled) { background: var(--kb-czerwony-ciemny); border-color: var(--kb-czerwony-ciemny); }

/* Przycisk drugoplanowy: „Eksport CSV”, „Pokaż kolejne”, akcje obok pola.
   Biały z obrysem — nie rywalizuje z przyciskiem głównym i nie dokłada czerwieni.
   .btn-wiecej, .btn-akcja i .btn-wtorny to aliasy starych nazw z ekranów.
   Uwaga: .btn-wtorny w Obecności nie miał do tej pory ŻADNEGO stylu — reguła
   dla tej klasy była zawężona do .mc-config, więc stał tam goły przycisk przeglądarki. */
.btn, .btn-secondary, .btn-wiecej, .btn-akcja, .btn-wtorny {
    background: #fff; color: var(--kb-grafit); border: 1px solid var(--kb-ramka-pola);
}
.btn:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-wiecej:hover:not(:disabled),
.btn-akcja:hover:not(:disabled), .btn-wtorny:hover:not(:disabled) {
    background: var(--kb-pasek); border-color: var(--kb-grafit);
}

/* Stan wyłączony — jeden dla wszystkich. Wypełnienie, nie sama przezroczystość:
   przycisk ma wyglądać na wyłączony także wtedy, gdy stoi na szarym pasku. */
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-wiecej:disabled,
.btn-akcja:disabled, .btn-wtorny:disabled, .btn-mini:disabled {
    background: var(--kb-neutral-tlo); color: var(--kb-szary);
    border-color: var(--kb-linia); box-shadow: none; cursor: not-allowed;
}

/* Przycisk chwilowo nieaktywny, ale z fokusem (aria-disabled zamiast disabled: element z fokusem, który staje się disabled, traci fokus). */
.btn-secondary[aria-disabled="true"], .btn-primary[aria-disabled="true"] {
    background: var(--kb-neutral-tlo); color: var(--kb-szary);
    border-color: var(--kb-linia); box-shadow: none; cursor: not-allowed;
}

/* Przycisk-tekst: grafit z cienkim podkreśleniem. Czerwień zostaje dla marki,
   nawigacji, fokusu i przycisku głównego — inaczej na ekranie z listą dokumentów
   robi się kilkanaście czerwonych napisów i żaden nie znaczy „uwaga”.
   .btn-link celowo BEZ reguły :hover — na grafitowym pasku i w stopce wygrywa
   .topbar .btn-link (wyższa waga) i „Wyloguj” zostaje biały. */
.btn-tekst, .btn-link, .btn-link-akcja {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--kb-grafit); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.btn-tekst:hover, .btn-link-akcja:hover { color: var(--kb-czerwony); }
.btn-tekst:disabled, .btn-link-akcja:disabled { color: var(--kb-szary); cursor: not-allowed; text-decoration: none; }

/* Odstęp przycisku w karcie logowania — jedyne, co zostało z dawnej lokalnej definicji. */
.login-form .btn-primary { margin-top: .3rem; }

/* Pola w formularzu są wyższe niż w pasku filtrów: w formularz się wpisuje z klawiatury,
   filtr wybiera się jednym kliknięciem. */
.login-form .field-input { height: var(--kb-wys-formularz); }

/* Palec zamiast myszy. 44 px to dolna granica wygodnego celu, a 16 px w polu to próg,
   poniżej którego iOS sam powiększa stronę przy wejściu w pole i układ się rozjeżdża
   (dlatego var(--kb-fs-l), nie 14 px). */
@media (pointer: coarse) {
    .btn, .btn-primary, .btn-secondary, .btn-wiecej, .btn-akcja, .btn-wtorny { height: var(--kb-wys-dotyk); }
    /* Małe przyciski (miesiąc w kalendarzu, „Transport”) i przyciski-linki („Wyczyść”) — też cel 44 px; pasek i stopka bez zmian. */
    .btn-mini, .btn-link-akcja, .btn-tekst, main .btn-link { min-height: var(--kb-wys-dotyk); min-width: var(--kb-wys-dotyk); }
    .field-input, .login-form .field-input, .filtr-lista, .data-input,
    .kontr-pole input, .kontr-pole select {
        height: var(--kb-wys-dotyk); font-size: var(--kb-fs-l);
    }
}

/* Fokus z klawiatury — jeden pierścień w całym panelu. Wcześniej siedem reguł kasowało
   obrys (outline:none) i podmieniało go na poświatę rgba(.10–.15), której na ekranie
   praktycznie nie widać: idąc tabulatorem po formularzu nie było wiadomo, gdzie się stoi.
   Czerwień jest tu celowo — fokus to jedno z nielicznych miejsc, w których marka ma
   prawo krzyczeć. :where() nie podnosi wagi, więc każda reguła zawężona do ekranu
   (.side-grupa > summary, .kpi-klikalny, .mc-config, .pz2060 a) dalej wygrywa. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--kb-czerwony); outline-offset: 2px;
}
/* Na grafitowym pasku czerwony obrys ginie w tle — tam pierścień jest biały. */
.topbar :where(a, button, summary, [tabindex]):focus-visible { outline-color: #fff; }

/* Firma spoza grupy partnerow w ekranie dostepu — zwiniete, bo to wyjatek, a nie droga glowna. */
.adm-spoza { margin: 10px 0 14px; border: 1px solid var(--kb-linia, #d9dee1); border-radius: 8px; padding: 8px 10px; background: var(--kb-tlo-jasne, #f7f9fa); }
.adm-spoza > summary { cursor: pointer; font-weight: 600; color: var(--kb-grafit, #2f3437); }
.adm-spoza > summary:hover { color: var(--kb-czerwien, #b3261e); }
/* Pole do wklejania wierszy z Excela: stała szerokość znaków, bo kolumny rozdzielają tabulatory. */
.adm-import-tekst { height: auto; min-height: 6rem; padding: .5rem .6rem; font-family: Consolas, "Cascadia Mono", monospace; font-size: var(--kb-fs-xs); resize: vertical; width: 100%; }
.adm-spoza .adm-osoba { width: 100%; }

/* Zapytania ofertowe z portalu */
.zap-stopka { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.zap-stopka .zap-uwagi { flex: 1 1 340px; }
.zap-pozycje { margin: 0 0 8px; padding-left: 18px; }
.zap-pozycje li { margin: 2px 0; }

/* Kolejka hali: termin wysyłki przy wierszu (B-101, 28.09.2026). Kolor niesie stan, reszta zwykła. */
.plan-termin { white-space: nowrap; }
.plan-termin-zle .plan-termin-data { color: var(--kb-blad); font-weight: 600; }
.plan-termin-uwaga .plan-termin-data { color: var(--kb-uwaga-tekst); font-weight: 600; }

/* B-102 Ekran tokarza (/hala/ekran/{gniazdo}) — monitor przy maszynie, czytany z trzech metrów.
   Ciemne tło: jasny ekran na hali odbija lampy i męczy przez zmianę. Pismo 30 px, wiersz ok. 52 px
   (wymóg ≥ 28 px) — na 1920×1080 mieści się ok. 17 wierszy, resztę skrypt dzieli na strony.
   Termin drobny i szary, bez czerwieni: kolejność niesie wyłącznie „#” (R-96). */
main.ekran {
    min-height: 100vh; box-sizing: border-box; padding: 18px 28px;
    background: #121212; color: #f2f2f2; overflow: hidden;
}
.ekran-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.ekran-gniazdo { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.1; color: #ffffff; }
.ekran-rog { display: flex; align-items: baseline; gap: 20px; font-size: 26px; white-space: nowrap; }
.ekran-strony { font-weight: 700; color: #ffffff; }
.ekran-stan { color: #a8a8a8; }
.ekran-stan-stare { color: #ff5a52; font-weight: 700; }
.ekran-stan-poza { color: #8a8a8a; }
.ekran-komunikat { font-size: 30px; color: #d0d0d0; margin: 24px 0; }
.ekran-tabela { width: 100%; border-collapse: collapse; font-size: 30px; line-height: 1.25; }
.ekran-tabela th {
    text-align: left; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #9a9a9a; padding: 6px 12px; border-bottom: 2px solid #3a3a3a;
}
.ekran-tabela td { padding: 10px 12px; border-bottom: 1px solid #2b2b2b; vertical-align: top; }
.ekran-tabela .ekran-lp { width: 1%; text-align: right; color: #9a9a9a; }
.ekran-tabela .ekran-szt { text-align: right; font-weight: 700; white-space: nowrap; }
.ekran-zlecenie { font-weight: 700; white-space: nowrap; }
.ekran-termin { white-space: nowrap; font-size: 22px; color: #a8a8a8; }
.ekran-drobne { display: block; font-size: 22px; color: #a8a8a8; font-weight: 400; }
.ekran-iz { display: block; font-size: 22px; color: #c8c8c8; }
.ekran-kol-stan { white-space: nowrap; }
.ekran-wtoku td:first-child { box-shadow: inset 6px 0 0 #4caf50; }
.ekran-wtoku .ekran-kol-stan { color: #81c784; font-weight: 700; }
/* „Następne” — to tokarz bierze po bieżącej robocie. Pas żółty jak znak na hali, ciemne pismo. */
.ekran-nastepne td { background: #ffd54a; color: #121212; border-bottom-color: #ffd54a; }
.ekran-nastepne .ekran-drobne, .ekran-nastepne .ekran-iz, .ekran-nastepne .ekran-lp, .ekran-nastepne .ekran-kol-stan, .ekran-nastepne .ekran-termin { color: #121212; }
.ekran-nastepne .ekran-kol-stan { font-weight: 800; }   /* R-104 pkt 3.6: „następne” jak reszta, pogrubione */
/* Dalej w marszrucie — wyraźnie przygaszone, żeby nikt nie wziął tego za pracę na teraz. */
.ekran-separator td { font-size: 22px; color: #9a9a9a; padding-top: 18px; border-bottom: 2px solid #3a3a3a; }
.ekran-poprzednik td { color: #8a8a8a; }
/* B-123: poprzednia operacja zawieszona (zrobione, a nieodbite, albo porzucone) — nie przygaszone, bursztynowy pas i dopisek. */
.ekran-poprzednik.ekran-zawieszona td { color: #d0d0d0; }
.ekran-poprzednik.ekran-zawieszona td:first-child { box-shadow: inset 6px 0 0 #ffb74d; }
.ekran-zawieszona .ekran-kol-stan { white-space: normal; }
/* Szerokość maksymalna: ten wiersz nie ustępuje przy małej skali, więc nie może rozpychać kolumny stanu. */
.ekran-zawieszona-tresc { max-width: 22em; }
.ekran-zawieszona-co { display: block; color: #ffcc80; font-weight: 600; }
.ekran-zawieszona-sprawdz { display: block; font-size: 22px; color: #ffcc80; }
.ekran-zawieszona-wewn { color: #a8a8a8; }
/* D-50: komplet zbiegu („Komplet 2/3 · brakuje: …”, „Komplet 3/3 — do wzięcia”) zawija się jak dopisek E, nie rozpycha
   kolumny stanu (przegląd 2138 pkt 8: pełny komplet przy „następne” stał w jednej linii). */
.ekran-komplet { max-width: 22em; white-space: normal; }
.ekran-kol-stan:has(.ekran-komplet) { white-space: normal; }
/* D-50 pkt 4d: „do kompletu: Montaż MC · 05.10” — pismo jak .ekran-drobne, ale własna klasa: wiersze zwarte chowają
   .ekran-drobne, a ten dopisek ma zostać właśnie tam (poz. 11+), gdzie ma pomóc (przegląd 2138 pkt 7). Na żółtym pasie
   „następne” ciemne pismo, jak reszta wiersza. */
.ekran-do-kompletu { display: block; max-width: 22em; font-size: 22px; color: #a8a8a8; font-weight: 400; white-space: normal; }
.ekran-nastepne .ekran-do-kompletu { color: #121212; }
/* B-127: ta operacja stoi (zawieszona) — pomarańczowy pas jak przy E, bez zieleni; przerwana (bez otwartego meldunku, krócej
   niż dzień) — zwykłe pismo, bez pasa. */
.ekran-zawieszona-tu td:first-child { box-shadow: inset 6px 0 0 #ffb74d; }
.ekran-zawieszona-tu .ekran-kol-stan { white-space: normal; }
.ekran-przerwana .ekran-kol-stan { color: #ffcc80; }
/* Stopka w częściach: „ · ” tylko między widocznymi (hidden = liczba 0). */
.ekran-stopka-czesc:not([hidden]) ~ .ekran-stopka-czesc:not([hidden])::before { content: "· "; }
.ekran-pusto td { font-size: 30px; color: #d0d0d0; }
.ekran-wybor { max-width: 900px; }
.ekran-wybor-lista { list-style: none; padding: 0; margin: 12px 0; font-size: 30px; line-height: 1.8; }
.ekran-wybor-lista a { color: #ffd54a; }
/* B-102 / D-41: liczba sztuk przy operacji w tabeli gniazda — ta sama co na ekranie tokarza. */
.plan-szt { margin-left: 6px; font-weight: 600; white-space: nowrap; color: var(--kb-tekst); }
/* R-96 pkt 4: tabela gniazda u mistrza — jedno zdanie nad tabelą, metoda pod „Jak czytać”,
   czerwień tylko dla zlecenia, które spóźni wysyłkę klienta. */
.plan-bierz { color: var(--kb-tekst); font-weight: 600; margin-bottom: .4rem; }
.plan-jak-czytac { margin-bottom: 1rem; }
.plan-jak-czytac > summary { cursor: pointer; color: var(--kb-tekst-drugi); font-size: .88rem; }
.plan-jak-czytac[open] > summary { margin-bottom: .4rem; }
.plan-strefa-neutralna > span { background: var(--kb-linia-mocna); }
.plan-strefa-tekst-neutralna { color: var(--kb-tekst); }
/* K-2: nagłówki trzech list meldunków do zamknięcia */
.plan-meld-tytul { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; color: var(--kb-grafit); }
.plan-th-dopisek { font-weight: 400; font-size: .857rem; color: var(--kb-tekst-drugi); text-transform: none; }
/* R-102: opis ekranu pod tytułem — do czego służy i dla kogo zawsze widoczne, szczegóły zwijane. */
.opis-ekranu { max-width: 88ch; margin: 0 0 1.3rem; font-size: var(--kb-fs-s); color: var(--kb-tekst-drugi); }
.opis-ekranu p { margin: 0 0 .15rem; }
.opis-etykieta { font-weight: 600; color: var(--kb-tekst); }
.opis-szczegoly { margin-top: .35rem; }
.opis-szczegoly > summary { cursor: pointer; color: var(--kb-info-tekst); font-weight: 600; width: fit-content; }
.opis-szczegoly dl { margin: .45rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--kb-info-linia); background: var(--kb-info-tlo); border-radius: 0 6px 6px 0; }
.opis-szczegoly dt { font-weight: 600; color: var(--kb-tekst); margin-top: .45rem; }
.opis-szczegoly dt:first-child { margin-top: 0; }
.opis-szczegoly dd { margin: .1rem 0 0; }
.ana2050 .opis-ekranu { margin: 0; font-size: 14px; color: var(--a-tekst-2); max-width: 78ch; }
.ana2050 .opis-etykieta, .ana2050 .opis-szczegoly dt { color: var(--a-tekst); }
.ana2050 .opis-szczegoly > summary { color: var(--a-czerwien-2); }
.ana2050 .opis-szczegoly dl { background: var(--a-panel-2); border-left-color: var(--a-linia-2); }
/* Monitor hali (wybór gniazda): pismo czytelne z odległości, kolory jak reszta ekranu. */
main.ekran .opis-ekranu { font-size: 20px; color: #c8c8c8; max-width: none; margin: 8px 0 16px; }
main.ekran .opis-etykieta, main.ekran .opis-szczegoly dt { color: #f2f2f2; }
main.ekran .opis-szczegoly > summary { color: #ffd54a; }
main.ekran .opis-szczegoly dl { background: #1c1c1c; border-left-color: #3a3a3a; }
/* R-103: grupa pozycji jednego zlecenia w wykazie Analizy — szary tekst i linia z lewej, bez ramek i kolorów stanu. */
.ana2050 .ana-wykaz tr.ana-grupa td { padding-top: 12px; padding-bottom: 2px; border-bottom: none; }
.ana2050 .ana-znak.ana-grupa-tekst, .ana2050 .ana-znak.ana-sep, .ana2050 .ana-znak.ana-dopisek {
    border: none; background: none; padding-left: 0; padding-right: 0; letter-spacing: 0; color: var(--a-tekst-2);
}
.ana2050 .ana-znak.ana-grupa-tekst { font-family: inherit; font-size: 13px; }
.ana2050 .ana-znak.ana-dopisek { font-family: inherit; font-size: inherit; margin: 0; }
.ana2050 .ana-wykaz tr.ana-w-grupie td:first-child {
    padding-left: 22px; background: linear-gradient(var(--a-linia-2), var(--a-linia-2)) 10px 0 / 2px 100% no-repeat;
}
.ana2050 .ana-legenda-tekst { color: var(--a-tekst-2); }
/* Łukasz 29.09: „czy to żółte może lekko pulsować” — tylko wiersz „następne”, łagodnie, bez migania; ciemne pismo
   zostaje czytelne w obu skrajnych odcieniach. Kto ma w systemie „ogranicz ruch”, dostaje wiersz bez animacji. */
@keyframes ekran-puls { 0%, 100% { background-color: #ffd54a; } 50% { background-color: #ffe792; } }
.ekran-nastepne td { animation: ekran-puls 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ekran-nastepne td { animation: none; } }
/* R-104 pkt 3.5: operacja wspólna dla całej listy — raz, nad tabelą. */
.ekran-operacja { caption-side: top; text-align: left; font-size: 26px; color: #c8c8c8; padding: 0 0 8px; }
/* R-104 pkt 3.2: liczba zębów w tej samej linii co nazwa części — wiersz jednolinijkowy, 10 pozycji na jednej stronie. */
.ekran-z { margin-left: 16px; font-size: 22px; color: #c8c8c8; white-space: nowrap; }
.ekran-nastepne .ekran-z { color: #121212; }
/* Uwaga badacza 2353: data planu hali pogrubiona, data z zamówienia drobno w nawiasie. */
.ekran-termin-plan { color: #f2f2f2; font-weight: 700; }
.ekran-nastepne .ekran-termin-plan { color: #121212; }
/* B-120 (Łukasz 30.09): pozycje kolejki od 11. nie chowają się za stopką „poza ekranem” — gdy brak miejsca, stają się
   wierszami zwartymi: pismo 22 px (73 % zwykłego), jedna linia, bez daty z zamówienia i opisu IZ. */
.ekran-tabela tr.ekran-zwarty td { font-size: 22px; line-height: 1.15; padding-top: 4px; padding-bottom: 4px; }
.ekran-tabela tr.ekran-zwarty .ekran-drobne:not(.ekran-podzlecenie), .ekran-tabela tr.ekran-zwarty .ekran-iz { display: none; }
.ekran-tabela tr.ekran-zwarty .ekran-termin, .ekran-tabela tr.ekran-zwarty .ekran-z { font-size: 18px; }
.ekran-tabela tr.ekran-zwarty .ekran-podzlecenie { display: inline; margin-left: 6px; font-size: 18px; }
/* Łukasz 06.10: końcówka zawsze — szerokość kolumny wyznacza numer, nie dopisek: w pełnym wierszu dopisek się zawija,
   w zwartym (jedna linia, B-120) jest ucinany wielokropkiem. Sceptyk 06.10: GR-2601342 (28 podzleceń) rozepchnąłby tabelę. */
.ekran-tabela .ekran-podzlecenie { white-space: normal; overflow-wrap: anywhere; }
.ekran-tabela tr.ekran-zwarty .ekran-podzlecenie { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Przegląd 1.1.204: w wierszu zwartym pełny komplet i „do kompletu” w JEDNEJ linii (B-120) — komplet nie jest tu blokiem,
   żaden z dopisków się nie zawija (DE „für Komplettierung: …” przy 1024 px łamał się po spacjach i wiersz rósł do dwóch
   linii). W wierszu zwartym stoi tylko pełny komplet („Komplet 3/3 — do wzięcia”), więc to krótki tekst. */
.ekran-tabela tr.ekran-zwarty .ekran-do-kompletu { display: inline; margin-left: 6px; font-size: 18px; white-space: nowrap; }
/* D-96 + badacz 2117: „plan hali · zamówienie 01.09” przy wewnętrznych K+B — własna klasa, bo wiersze zwarte chowają .ekran-drobne. */
.ekran-wewn-daty { display: block; font-size: 22px; color: #a8a8a8; font-weight: 400; }
.ekran-nastepne .ekran-wewn-daty { color: #121212; }
.ekran-tabela tr.ekran-zwarty .ekran-wewn-daty { display: inline; margin-left: 6px; font-size: 18px; white-space: nowrap; }
/* B6: „potem: Piec MC” pod komponentem — drobno; w wierszach zwartych (poz. 11+) schowane, jak .ekran-drobne. */
.ekran-potem { display: block; font-size: 22px; color: #a8a8a8; font-weight: 400; }
.ekran-nastepne .ekran-potem { color: #121212; }
.ekran-tabela tr.ekran-zwarty .ekran-potem { display: none; }
.ekran-tabela tr.ekran-zwarty .ekran-komplet { display: inline; font-size: 18px; white-space: nowrap; }
.ekran-tabela tr.ekran-zwarty .ekran-kol-stan:has(.ekran-komplet) { white-space: nowrap; }
/* ── 1.1.242 monitory (D-125, D-126, D-127) ──
   D-125: „kolejność: data graniczna (jak lista wyspy)” / „kolejność: data wysyłki” — jedna linia pod nazwą gniazda, szara,
   żeby nie zabierała miejsca kolejce; ten sam napis stoi nad tabelą gniazda w Kolejce hali (.plan-kolejnosc). */
.ekran-kolejnosc { margin: -4px 0 8px; font-size: 22px; color: #a8a8a8; }
.plan-kolejnosc { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border: 1px solid var(--kb-linia-mocna);
    border-radius: 999px; font-size: .857rem; font-weight: 600; color: var(--kb-tekst); background: var(--kb-tlo-jasne, #f7f9fa); }
/* D-127: pas zawieszonych bez numeru pod kolejką — nagłówek jak separator, wiersze z bursztynowym pasem (.ekran-zawieszona-tu);
   zwinięty przez skrypt do jednej linii z liczbą, gdy brak miejsca (kolejka nie ustępuje pasowi). */
.ekran-separator-zawieszone td, .ekran-pas-zwiniety td { color: #ffcc80; }
.ekran-pas-zwiniety td { font-weight: 600; }
/* Kolejka hali: pas zawieszonych pod numerowaną kolejką gniazda — te same wiersze co na monitorze, bez numeru. */
.plan-pas-zawieszone td { padding-top: .9rem; font-size: .857rem; font-weight: 600; color: var(--kb-uwaga-tekst);
    border-bottom: 2px solid var(--kb-linia-mocna); }
/* D-126: czerwień na hali tylko po dacie granicznej (reguła listy wyspy). Monitor (ciemny): czerwone tło wiersza jak spóźniony
   wiersz listy wyspy, w ciemnej odmianie — pismo #f2f2f2 na #4a1717 ok. 13:1, szare #a8a8a8 ok. 6:1 — i pas z lewej jak na
   monitorze wyspy (#ff5a52). „Następne” zostaje żółte (to sygnał „bierz”), z ciemnoczerwonym pasem z lewej. */
.ekran-tabela tr.ekran-po-granicznej:not(.ekran-nastepne) > td { background: #4a1717; }
.ekran-tabela tr.ekran-po-granicznej:is(.ekran-czeka, .ekran-przerwana):not(.ekran-nastepne) > td:first-child { box-shadow: inset 6px 0 0 #ff5a52; }
.ekran-tabela tr.ekran-nastepne.ekran-po-granicznej > td:first-child { box-shadow: inset 8px 0 0 #b71c1c; }
.ekran-po-granicznej-data { display: block; font-size: 22px; font-weight: 600; color: #ff8a80; }   /* 6,4:1 na #4a1717 */
.ekran-nastepne .ekran-po-granicznej-data { color: #8e0000; }
.ekran-tabela tr.ekran-zwarty .ekran-po-granicznej-data { display: none; }   /* wiersz zwarty: samo tło mówi „po dacie” */
/* Kolejka hali (tabela gniazda): czerwone tło i pas jak spóźniony wiersz listy wyspy — tylko po dacie granicznej; ryzyko
   wysyłki bursztynowe (pas, numer, słowo „wysyłka zagrożona”; #8a5200 na białym ok. 6,4:1, na --kb-uwaga-tlo 5,85:1). */
.plan-tabela-gniazda tr.plan-po-granicznej > td { background: var(--kb-blad-tlo); }
.plan-tabela-gniazda tr.plan-po-granicznej > td:first-child { box-shadow: inset 4px 0 0 var(--kb-blad); }
.plan-tabela-gniazda tr.plan-po-granicznej .plan-lp { color: var(--kb-blad); font-weight: 600; }
.plan-tabela-gniazda tr.plan-wysylka-zagrozona > td:first-child { box-shadow: inset 4px 0 0 var(--kb-uwaga); }
.plan-tabela-gniazda tr.plan-wysylka-zagrozona .plan-lp { color: var(--kb-uwaga-tekst); font-weight: 600; }
.plan-tabela-gniazda .plan-termin-zle .plan-termin-data { color: var(--kb-uwaga-tekst); }   /* termin wysyłki minął — bursztyn, nie czerwień */
.plan-strefa-zagrozona > span { background: var(--kb-uwaga); }
.plan-strefa-tekst-zagrozona { color: var(--kb-uwaga-tekst); }

/* ── F-1 karta zlecenia (1.1.205) ─────────────────────────────────────────────────────────────────────────────────
   Link numeru zlecenia w tabelach (Kolejka hali, Kolejność robót, Analiza): kolor tekstu, podkreślenie przy najechaniu —
   bez zmiany szerokości kolumn i bez czerwieni marki, która w tabelach znaczy alarm. Monitor hali linków nie ma. */
a.nr-link { color: inherit; text-decoration: underline; text-decoration-color: var(--kb-linia-mocna); text-underline-offset: 2px; }
a.nr-link:hover, a.nr-link:focus-visible { text-decoration-color: currentColor; color: var(--kb-czerwony-ciemny); }
.karta-szukaj { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .25rem 0 1rem; }
.karta-szukaj label { font-size: var(--kb-fs-s); color: var(--kb-tekst-drugi); }
.karta-szukaj-pole { height: var(--kb-wys-kontrolki); padding: 0 .6rem; border: 1px solid var(--kb-ramka-pola); background: var(--kb-panel); min-width: 14rem; }
/* Podpowiedzi numerów pod polem karty zlecenia (03.10). */
.karta-szukaj-otoczka { position: relative; }
.karta-podpowiedzi { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; min-width: 100%; max-height: 22rem; overflow-y: auto;
  margin: 0; padding: .2rem 0; list-style: none; background: var(--kb-panel); border: 1px solid var(--kb-ramka-pola);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.karta-podpowiedzi a { display: block; padding: .35rem .7rem; white-space: nowrap; color: inherit; text-decoration: none; }
.karta-podpowiedzi li.aktywna a, .karta-podpowiedzi a:hover { background: var(--kb-info-tlo); }
.karta-policzono { font-size: var(--kb-fs-xs); }
.karta-znaczniki { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.karta-fakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1.5rem; margin: 0 0 .9rem; }
.karta-fakty dt { font-size: var(--kb-fs-xs); color: var(--kb-tekst-drugi); }
.karta-fakty dd { margin: .1rem 0 0; }
.karta-inna { display: inline-block; margin-right: .9rem; white-space: nowrap; }
.tabela tbody tr.karta-podswietl td, .karta-podzlecenie.karta-podswietl { background: var(--kb-info-tlo); }
.karta-rozne { color: var(--kb-uwaga-tekst); font-weight: 600; }
.karta-odnosnik { font-size: var(--kb-fs-xs); margin-top: .35rem; }
/* 1.1.248 — dokumentacja z HydraSys (Joachim 11.10, 20:10): „Cała dokumentacja” to główny przycisk podzlecenia, pod nim pliki
   pojedynczo przy komponentach (rysunek części pogrubiony); podzlecenie z adresu (?poz=) podświetlone jak w nagłówku. */
.karta-dok-opis { font-size: var(--kb-fs-xs); margin: 0 0 .6rem; }
.karta-dok-pod { padding: .5rem .6rem; margin-bottom: .5rem; border: 1px solid var(--kb-linia-tabeli); background: var(--kb-panel); }
.karta-dok-pod--ta { background: var(--kb-info-tlo); }
.karta-dok-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.karta-dok-nr { font-size: var(--kb-fs-l); }
.karta-dok-pliki { margin-top: .4rem; }
.karta-dok-pliki > summary { cursor: pointer; font-size: var(--kb-fs-s); color: var(--kb-tekst-drugi); }
.karta-dok-pliki ul { margin: .35rem 0 0; padding: 0; list-style: none; }
.karta-dok-pliki li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding: .25rem 0; border-top: 1px solid var(--kb-linia); }
.karta-dok-komp { min-inline-size: 9rem; font-weight: 600; }
.karta-dok-plik { white-space: nowrap; }
.karta-dok-plik--rysunek { font-weight: 600; }
.karta-blokuje .panel-body { border-left: 4px solid var(--kb-linia-mocna); }
.karta-blokuje.karta-blok-uwaga .panel-body { border-left-color: var(--kb-uwaga); background: var(--kb-uwaga-tlo); }
.karta-blokuje.karta-blok-czeka .panel-body { border-left-color: var(--kb-proces); }
.karta-blokuje.karta-blok-ruch .panel-body { border-left-color: var(--kb-ok); }
.karta-blok-zdanie { font-size: var(--kb-fs-l); font-weight: 600; margin: 0 0 .35rem; }
.karta-stan-z { font-size: var(--kb-fs-xs); }
.karta-zmiana { font-size: var(--kb-fs-s); color: var(--kb-uwaga-tekst); margin-top: .25rem; }
.karta-zmiany { margin: .25rem 0 0; padding-left: 1.2rem; font-size: var(--kb-fs-s); }
/* D-75: znaczniki przy zmianie — po dacie planu i po obietnicy czerwone, w dniu planu bursztyn. */
.karta-zmiany .zle { color: var(--kb-blad); font-weight: 600; }
.karta-zmiany .uwaga { color: var(--kb-uwaga-tekst); }
/* Odstęp przed dopiskiem robi teraz prawdziwa spacja przed <span> (@(" ") w KartaZleceniaStrona) — także przy kopiowaniu tekstu.
   Blazor zjada spację na początku zawartości <span>, stąd wcześniej sam margines (1.1.207). */
.karta-zmiany .zle, .karta-zmiany .uwaga { margin-left: .1em; }
.karta-podzlecenie { padding: .25rem .4rem .5rem; margin-bottom: .75rem; }
.karta-podzl-tytul { font-size: var(--kb-fs-l); margin: .25rem 0 .5rem; }
.karta-komponent { margin: 0 0 .5rem calc(var(--glebokosc, 0) * 1.25rem); border: 1px solid var(--kb-linia-tabeli); background: var(--kb-panel); }
.karta-komponent > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .45rem .6rem; cursor: pointer; background: var(--kb-pasek); }
.karta-komp-nazwa { font-weight: 600; min-width: 10rem; }
.karta-pasek { display: inline-flex; width: 10rem; height: 8px; background: var(--kb-neutral-tlo); overflow: hidden; }
.karta-pasek-meld { background: var(--kb-ok); }
.karta-pasek-bez { background: var(--kb-anulowane); }
.karta-postep-liczba { font-size: var(--kb-fs-s); color: var(--kb-tekst-drugi); }
.karta-postep-opis { font-size: var(--kb-fs-xs); padding: .35rem .6rem 0; }
.karta-operacje tr.karta-op-zamknieta td { color: var(--kb-tekst-drugi); }
.karta-operacje tr.karta-op-teraz td { background: var(--kb-ok-tlo); }
.karta-os tr.karta-meld-otwarty td { background: var(--kb-ok-tlo); }
.karta-os tr.karta-meld-grupa td { background: var(--kb-pasek); }
.karta-meld-detale summary { cursor: pointer; font-size: var(--kb-fs-xs); color: var(--kb-tekst-drugi); }
.karta-meld-detale ul { margin: .25rem 0 0; padding-left: 1.1rem; font-size: var(--kb-fs-xs); }
@media print { .karta-szukaj { display: none; } }

/* M-1: rozwinięcie dzienne gniazda (1.1.210) — węższa tabela pod wierszem, bez rozpychania głównej. */
/* D-87 pkt 3 i 12 (badacz 1443): tabela mocy była szersza niż ekran 1920 (ucięte ρ(5)). Nagłówki zwykłymi literami
   w dwóch liniach zamiast wersalików bez łamania; kolumna gniazda przyklejona, gdy na węższym ekranie trzeba przewinąć w bok. */
.ana2050 table.moc-tabela th {
    white-space: normal; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12.5px;
    vertical-align: bottom; line-height: 1.25; min-width: 4.2rem;
}
.ana2050 table.moc-tabela > thead > tr > th:first-child,
.ana2050 table.moc-tabela > tbody > tr.klik-wiersz > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--a-panel); }
.ana2050 table.moc-tabela td .ana-znak { white-space: nowrap; }
/* Odbiór 1.1.210: wiersz rozwinięty i bilans dni miały jasne tło z motywu panelu przy jasnym tekście ekranu ciemnego —
   liczby prawie niewidoczne. Tu tło ciemne, znacznik aktywnego wiersza czerwony jak w Analizie. */
.ana2050 table.moc-tabela > tbody > tr.wiersz-aktywny > td { background: rgba(255,255,255,.07); }
.ana2050 table.moc-tabela > tbody > tr.wiersz-aktywny > td:first-child { background: var(--a-panel); box-shadow: inset 3px 0 0 var(--a-czerwien-2); }
.ana2050 table.moc-tabela > tbody > tr.term-szczegol-wiersz > td { background: rgba(255,255,255,.035); box-shadow: inset 3px 0 0 var(--a-linia-2); }
.ana2050 table.moc-dni > thead > tr > th { color: var(--a-szary); background: transparent; border-bottom: 1px solid var(--a-linia-2); }
.ana2050 table.moc-dni > tfoot > tr > td { background: transparent; color: var(--a-tekst); font-weight: 600; border-top: 2px solid var(--a-linia-2); }
.moc-dni .badge { margin-right: .4em; }
/* D-87 pkt 10: „moc niepewna” znakiem przy U (kolor U mówi o progu); powód w dymku. */
.moc-niepewna { color: var(--a-uwaga); font-weight: 700; margin-right: .3em; cursor: help; }
/* D-86 pkt 1: dzień z U > 1,5 w rozwinięciu dziennym. */
.moc-dzien-ponad > td { background: rgba(232, 160, 60, .08); }
.moc-dni { width: auto; min-width: 32rem; margin: .25rem 0 .5rem; font-size: var(--kb-fs-s); }
.moc-dni td, .moc-dni th { padding: .2rem .6rem; }

/* R-120: norma z małej próby — szary dopisek przy czasie operacji w kolejce hali. */
.plan-norma-mala { color: var(--kb-tekst-drugi); font-size: var(--kb-fs-s); margin-left: .25em; white-space: nowrap; }

/* D-88c / D-87 (1.1.211): baner Kolejki w dwóch liniach; druga (przeplanowanie) spokojniejsza. */
.plan-baner .plan-baner-druga { margin-top: .35rem; color: var(--kb-tekst-drugi); }
/* D-88a': wstrzymane z otwartą pracą — zwinięta lista pod banerem. */
.plan-wstrzymane > summary { cursor: pointer; font-weight: 600; }
.plan-wstrzymane-tabela { margin-top: .5rem; font-size: var(--kb-fs-s); }
.plan-wstrzymane-anul { font-weight: 400; color: var(--kb-tekst-drugi); margin-top: .2rem; }
.plan-wstrzymane-anulowane > td { color: var(--kb-tekst-drugi); }

/* 1.1.212: most rachunek wyników ↔ sprzedaż z faktur (pod kaflami RZiS). */
.pnl-most { margin: .1rem 0 1rem; color: var(--kb-tekst-drugi); font-size: .93rem; }
.pnl-most a { margin-left: .35rem; }
/* D-91 (1.1.211): linia pod „Najbliższymi wysyłkami”, gdy firma ma wstrzymane zamówienia. */
.portal-najblizsze-wstrzymane { margin: .6rem 0 .4rem; color: var(--kb-tekst-drugi); }
.portal-najblizsze-wstrzymane a { margin-left: .35rem; }

/* 1.1.212 Podgląd firmy: nota o okresie pod kaflami i suma pod listą. */
.podglad-okres-nota { margin: -.2rem 0 1rem; color: var(--kb-tekst-drugi); font-size: .93rem; }
.podglad-suma { margin: .6rem 0 0; text-align: end; }

/* ── B-132: ramka „Na jutro” na szlifierkach wykańczających i plan wysyłek MC w Analizie ── */
.b132-najutro {
    border: 1px solid var(--kb-linia);
    border-left: 4px solid var(--kb-czerwony);
    background: var(--kb-panel);
    padding: .75rem 1rem;
    margin: .75rem 0 1rem;
}
.b132-najutro-tytul { font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; }
.b132-najutro-lista { margin: .5rem 0 .35rem 1.4rem; padding: 0; columns: 2 22rem; column-gap: 2rem; }
.b132-najutro-lista li { break-inside: avoid; padding: .1rem 0; }
.b132-najutro-brak { color: var(--kb-blad); background: var(--kb-blad-tlo); padding: .35rem .6rem; margin: .35rem 0; }
.b132-plan .b132-zalegle td { font-weight: 600; }
/* Badacz 0336: przy 1366 px ostatnia kolumna planu („Wstrzymane”) wychodziła poza ramkę — nagłówki Analizy nie łamią się
   (white-space: nowrap), a „Zagrożone (montaż albo wysyłka)” stało w jednej linii. W tabelach B-132 nagłówki w dwóch liniach,
   pierwsza kolumna min. 9 em (zamiast 5 linii „zaległe z / poprzednich / dni / …”). */
.ana2050 table.b132-plan th, .ana2050 table.b132-tygodnie th { white-space: normal; vertical-align: bottom; letter-spacing: .04em; }
.ana2050 table.b132-plan th.n, .ana2050 table.b132-tygodnie th.n { white-space: normal; }
.ana2050 table.b132-plan th:first-child, .ana2050 table.b132-plan td:first-child { min-width: 9em; }
.ana2050 table.b132-plan th:nth-child(4), .ana2050 table.b132-plan td:nth-child(4) { min-width: 16em; }

/* Podział zamówienia na terminy (Patrycja Flugel 07.10.2026 pkt 7). */
.podzial-terminow { margin-block-start: .75rem; padding: .75rem 1rem; border: 1px solid var(--linia, #d9dde3); border-radius: 8px; }
.podzial-terminow.podzial-podzielone { border-inline-start: 4px solid var(--uwaga, #d97706); }
.podzial-terminow p { margin: .25rem 0; }
.podzial-tabela { max-inline-size: 26rem; margin-block: .5rem; }
.podzial-zastrzezenie { font-size: .9rem; }
.wewn-ilosc input { max-inline-size: 7rem; }

/* Listy wysp, pakiet C (Joachim 10.10): W-04 zestaw na cięciu, W-16 komplety MC i PC, W-24 okno z rysunkiem części.
   Osobno i PRZED blokiem „Wyspy”, który ma zostać ostatni i krótki (WyspyMonitorTests). */
.wyspy-znaczniki .wyspy-zestaw { border-left: 3px solid var(--kb-grafit); }
.wyspy-tabela tr[data-zpp] { cursor: zoom-in; }
/* Przycisk „rysunek” w wierszu listy wysp (Joachim 17.10.2026): widoczny odpowiednik dwukliku; klik obsługuje menu.js. Nagłówek kolumny tylko dla czytnika ekranu. */
.wyspy-tabela .wyspy-rys { position: relative; inline-size: 2.4rem; padding-inline: .25rem; text-align: center; }
.wyspy-rys-nazwa { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wyspy-rys-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; padding: 0; cursor: pointer;
    color: var(--kb-grafit); background: transparent; border: 1px solid var(--kb-linia); border-radius: .4rem; }
.wyspy-rys-btn:hover { background: var(--kb-pasek); border-color: var(--kb-grafit); }
.wyspy-rys-btn:focus-visible { outline: 2px solid var(--kb-akcent, #1b6ec2); outline-offset: 2px; }
.ikona-rysunku { inline-size: 1.25rem; block-size: 1.25rem; }
/* Telefon: cel dotyku co najmniej 44 px (2,75 rem), a nie 32 px. */
@media (max-width: 600px) { .wyspy-tabela .wyspy-rys { inline-size: 3.25rem; } .wyspy-rys-btn { inline-size: 2.75rem; block-size: 2.75rem; } }
@media print { .wyspy-rys { display: none !important; } }
.wyspy-komplety-razem { margin: .25rem 0 0; }
.wyspy-komplety-dni { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .25rem 0 .75rem; }
.wyspy-komplety-dni a.plan-zakladka { text-decoration: none; color: inherit; }
.wyspy-komplety-przewin { overflow-x: auto; }
.wyspy-komplety-tabela td { vertical-align: top; }
.wyspy-komplety-tabela .wyspy-komplety-montaz { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* W-64 (Joachim 12.10): pierwsza kolumna MC-KOM i PC-KOM — data graniczna montażu, wygląd jak data na listach wysp. */
.wyspy-komplety-tabela .wyspy-komplety-data { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wyspy-komplet-gotowe { color: var(--kb-ok-tekst); }
.wyspy-komplet-brak { color: var(--kb-blad); font-weight: 600; }
.wyspy-rysunek-tlo { position: fixed; inset: 0; z-index: 1000; background: rgb(0 0 0 / .45); }
.wyspy-rysunek {
    position: fixed; inset: 3vh 3vw; z-index: 1001; display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem; background: var(--kb-panel); border: 1px solid var(--kb-linia); border-radius: 8px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .35);
}
.wyspy-rysunek-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.wyspy-rysunek-akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.wyspy-rysunek-ramka { flex: 1; inline-size: 100%; min-block-size: 50vh; border: 1px solid var(--kb-linia); background: #fff; }
@media (max-width: 600px) { .wyspy-rysunek { inset: 0; border-radius: 0; } }
@media print { .wyspy-rysunek, .wyspy-rysunek-tlo { display: none !important; } }
/* W-60: dymek z meldunkami operacji (podgląd list wysp; monitor hali go nie ma). */
.wyspy-oper { cursor: help; }
.wyspy-oper:focus-visible { outline: 2px solid var(--kb-akcent, #1b6ec2); outline-offset: -2px; }
.wyspy-meld-dymek {
    position: absolute; z-index: 900; max-inline-size: min(32rem, 92vw); padding: .6rem .8rem; font-size: .9rem; line-height: 1.35;
    background: var(--kb-panel); color: inherit; border: 1px solid var(--kb-linia); border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / .3);
}
.wyspy-meld-dymek strong { display: block; margin-block-end: .15rem; }
.wyspy-meld-dymek .wyspy-meld-op + .wyspy-meld-op { margin-block-start: .5rem; padding-block-start: .4rem; border-block-start: 1px solid var(--kb-linia); }
.wyspy-meld-dymek ul { margin: .1rem 0 0; padding-inline-start: 1.1rem; }
.wyspy-meld-dymek .wyspy-meld-brak { color: var(--kb-tekst-szary, #6b7280); font-style: italic; }
@media print { .wyspy-meld-dymek { display: none !important; } }
/* ── Sygnały produkcji (W-45…W-47, spotkanie 10.10.2026): /produkcja/sygnaly ── */
.syg-normy { margin: -.4rem 0 1rem; color: var(--kb-tekst-drugi); font-size: var(--kb-fs-s); }
.syg-normy .szary { display: block; margin-top: .15rem; }
.syg-sekcja .panel-body { overflow-wrap: anywhere; }
.syg-tabela td { vertical-align: top; }
.syg-zlecenie b { display: block; }
.syg-zlecenie .szary { font-size: var(--kb-fs-s); }
.syg-komorka { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.syg-zle { color: var(--kb-blad); }
.syg-razem > td { border-top: 2px solid var(--kb-linia-mocna); }
.syg-znorma { display: block; font-size: var(--kb-fs-xs); }
.syg-podnaglowek { margin: 1.1rem 0 .4rem; font-size: 1rem; }
.syg-grupy { max-inline-size: 40rem; }
.syg-materialy { margin: 0; padding: 0; list-style: none; }
.syg-materialy li { padding: .1rem 0; }
.syg-materialy li.syg-mat-brak { box-shadow: inset 3px 0 0 var(--kb-blad); padding-inline-start: .5rem; }
.syg-mat-stan { display: block; color: var(--kb-tekst-drugi); font-size: var(--kb-fs-s); }
.syg-pominiete { margin: .6rem 0 0; font-size: var(--kb-fs-s); }
@media (max-width: 640px) {
  .syg-komorka, .syg-zlecenie { align-items: flex-end; text-align: right; }
  .syg-materialy li.syg-mat-brak { box-shadow: inset -3px 0 0 var(--kb-blad); padding-inline: 0 .5rem; }
}
/* Pulpit zarządu 2 i raport „Gotowe do wysłania” (W-36…W-40, Joachim 10.10.2026) */
.pz2060 .pz-mc-blok { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pz2060 .pz-mc-blok-tytul { font-family: var(--p-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-szary); margin-bottom: 6px; }
.pz2060 .pz-mc-dopisek { color: var(--p-szary); font-size: 12px; line-height: 1.4; margin-top: 6px; }
.pz2060 .pz-mc-dni { margin-left: 8px; }
.pz2060 .pz-mc-cel { border-inline-start: 3px solid var(--p-czerw-2); padding-inline-start: 10px; }
.pz2060 .pz-rownanie { font-family: var(--p-mono); font-size: 12.5px; }
.pz2060 .pz-podzial { display: grid; gap: 4px; margin-top: 8px; }
.pz2060 .pz-podzial-wiersz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; }
.got-filtr, .got-rodzaje { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: .5rem; }
.got-kpi { margin-block-end: 1rem; }
.got-sekcja { margin-block: 1.25rem; }
.got-wydane { color: var(--tekst-szary, #6b7280); font-size: .9rem; }
.got-tabela { inline-size: 100%; }
.got-tabela td.liczba, .got-tabela th.liczba { text-align: end; white-space: nowrap; }
/* Zlecenia w produkcji — ściąga Joachima (W-41, W-42, W-43, 10.10.2026). Jedna tabela, dzień wysyłki jako wiersz-nagłówek grupy
   (jak „grupuj po D.wysłania” w HydraSys), spóźnione na czerwono; na telefonie wiersze jako karty (.tabela-karty), wydruk A4 poziomo. */
.sciaga-filtry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; margin: .5rem 0 1rem; }
.sciaga-filtr { display: flex; flex-direction: column; gap: .3rem; }
.sciaga-chipy { margin-bottom: 0; }
.sciaga-chipy a.chip { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.sciaga-chip-licz { font-weight: 400; font-variant-numeric: tabular-nums; opacity: .8; }
.sciaga-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sciaga-kafle a.prod-kafel { text-decoration: none; color: inherit; }
.sciaga-kafle a.prod-kafel:focus-visible { outline: 2px solid var(--kb-grafit); outline-offset: 2px; }
.sciaga-sztuki { margin: .25rem 0 .75rem; }
.sciaga-drobne { font-size: var(--kb-fs-xs); line-height: 1.3; }
.sciaga-tabela td { vertical-align: top; }
.sciaga-tabela .liczba, .sciaga-tabela-wyjechalo .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sciaga-tabela tr.sciaga-dzien-glowa td { background: var(--kb-pasek); border-top: 2px solid var(--kb-linia-mocna); padding-block: .45rem; }
.sciaga-dzien-data { font-weight: 700; margin-inline-end: .6rem; }
.sciaga-dzien-liczby { color: var(--kb-tekst-drugi); margin-inline-start: .4rem; }
.sciaga-dzien-liczby b { color: var(--kb-tekst); }
.sciaga-dzien-spozniony tr.sciaga-dzien-glowa td { background: var(--kb-blad-tlo); border-top-color: var(--kb-blad); }
.sciaga-dzien-spozniony .sciaga-dzien-data { color: var(--kb-blad); }
.sciaga-tabela tr.sciaga-w-spoznione .sciaga-data { color: var(--kb-blad); font-weight: 700; }
.sciaga-tabela tr.sciaga-w-gotowe td { background: var(--kb-info-tlo); }
.sciaga-pr { display: inline-block; inline-size: .75rem; block-size: .75rem; border-radius: 50%; vertical-align: middle; background: var(--kb-ok); }
.sciaga-pr-p { background: #1f5fbf; }
.sciaga-pr-zk { background: var(--kb-blad); }
.sciaga-pr-spec { background: #7b3fa0; }
.sciaga-pr-symbol { font-size: var(--kb-fs-xs); color: var(--kb-tekst-drugi); margin-inline-start: .25rem; }
.sciaga-nr { white-space: nowrap; }
.sciaga-ost-komp { font-weight: 600; }
.sciaga-ostatnia, .sciaga-nastepna { min-inline-size: 11rem; }
.sciaga-czesci > summary { cursor: pointer; font-size: var(--kb-fs-xs); color: var(--kb-tekst-drugi); }
.sciaga-czesci ul { margin: .2rem 0 0; padding-inline-start: 1rem; font-size: var(--kb-fs-xs); }
.sciaga-liczba-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--kb-linia-mocna); }
.sciaga-liczba-link:hover { border-bottom-color: var(--kb-grafit); }
.sciaga-wyjechalo { margin-top: 1.25rem; }
.sciaga-wyjechalo > summary { cursor: pointer; }
.sciaga-wyjechalo > summary h2 { display: inline-flex; align-items: center; gap: .5rem; }
.sciaga-stopka { margin: .5rem 0 0; font-size: var(--kb-fs-xs); }
@media (max-width: 640px) {
    .sciaga-filtry { flex-direction: column; align-items: stretch; }
    .sciaga-tabela tr.sciaga-dzien-glowa td { display: block; text-align: left; }
    .sciaga-tabela tr.sciaga-dzien-glowa td::before { content: none; }
    .sciaga-ostatnia, .sciaga-nastepna { min-inline-size: 0; }
}
/* Wydruk: A4 poziomo tylko dla tego ekranu (nazwana strona), bez nawigacji i filtrów; dni nie rozrywają się w połowie nagłówka. */
.sciaga { page: sciaga; }
@page sciaga { size: A4 landscape; margin: 10mm; }
@media print {
    .topbar, .sidebar, .okruszki, nav, .sciaga-filtry, .opis-ekranu, .kompas-przycisk, .kompas-panel, .stopka-danych { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .sciaga-kafle .prod-kafel { border-color: #999 !important; }
    .sciaga-tabela { font-size: 9pt; line-height: 1.25; }
    .sciaga-tabela th, .sciaga-tabela td { padding: 2px 4px !important; }
    .sciaga-tabela tr { break-inside: avoid; }
    .sciaga-tabela tr.sciaga-dzien-glowa { break-after: avoid; }
    .sciaga-czesci, .sciaga-pr-symbol { display: none !important; }
    .sciaga-wyjechalo { break-before: page; }
    .sciaga-wyjechalo:not([open]) { display: none !important; }
    .sciaga-liczba-link { border-bottom: 0; }
}

/* ── Scena hali ── */
/* Scena hali: /produkcja/blizniak/scena (podgląd) i /hala/blizniak/scena (telewizor) — polecenie Łukasza 10–11.10.2026.
   Blok stoi PRZED blokiem Bliźniaka, nie na końcu arkusza: arkusz kończy się blokiem Wysp (WyspyMonitorTests), a wszystko
   między „Bliźniak” a „Wyspy” sprawdza test pisma telewizora bliźniaka (BlizniakMonitorTests). Tokeny --s-* w korzeniu
   .scena. Tabliczki nieprzezroczyste i ciemne: tekst ≥ 7:1 (#fff 19:1, --s-tekst-2 11:1 na --s-tabliczka). Czerwień
   wyłącznie dla spóźnionych (--s-alarm, R-11), zawsze ze słowem „spóźnione”; czerwone liczby tylko pogrubione ≥ 30 px na
   telewizorze (§4.1: ≥ 4,5:1 dla dużego pisma). Maszyny bez stanu: bez lamp, bez animacji, bez szarego wygaszania. */
.scena {
    --s-tabliczka: #0b0f14; --s-tekst: #ffffff; --s-tekst-2: #c5ccd4; --s-linia: #2b3440; --s-stal: #6f9cc4;
    --s-akcent: #27506f; --s-alarm: #ff5a52; --s-alarm-tlo: rgba(255, 90, 82, .24); --s-noga: rgba(222, 231, 240, .9);
    --s-zolty: #d9a92c; --s-kolumn: 4;
}
.scena picture { display: contents; }
/* Joachim 11.10.2026: numer zlecenia w podglądzie prowadzi do karty zlecenia — na ciemnej tabliczce kolor tekstu, podkreślenie
   w kolorze stali, bez czerwieni po najechaniu (R-11: czerwień tylko dla spóźnionych). Telewizor linków nie ma. */
.scena a.nr-link { color: inherit; text-decoration-color: var(--s-stal); }
.scena a.nr-link:hover, .scena a.nr-link:focus-visible { color: inherit; text-decoration-color: currentColor; }
.scena-podglad { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.1rem; }
.scena-stan { margin: 0 0 .75rem; }
.scena-stan-stare { color: var(--kb-uwaga-tekst); font-weight: 700; }
.scena-hero, .scena-strefa { margin: 0; min-width: 0; }
.scena-hero-obraz, .scena-zdjecie { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 10px; background: #11161c; }
.scena-hero-obraz img, .scena-zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scena-scrim { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 7, 10, .72) 0%, rgba(4, 7, 10, .42) 34%, rgba(4, 7, 10, .1) 62%, rgba(4, 7, 10, .28) 100%); }
.scena-scrim--hero { background: linear-gradient(180deg, rgba(4, 7, 10, .78) 0%, rgba(4, 7, 10, .5) 30%, rgba(4, 7, 10, .08) 58%, rgba(4, 7, 10, .2) 100%); }
.scena-hero-tablice { position: absolute; inset: 1.5cqw 1.4cqw auto; display: grid; grid-template-columns: 38fr 30fr 28fr;
    gap: 1.4cqw; align-items: start; }
.scena-hero-tablica { display: flex; flex-direction: column; gap: .25cqw; min-width: 0; padding: 1cqw 1.2cqw;
    background: var(--s-tabliczka); color: var(--s-tekst); border-top: .35cqw solid var(--s-stal); border-radius: .6cqw;
    box-shadow: 0 .6cqw 1.8cqw rgba(0, 0, 0, .5); }
.scena-hero-tablica--bufor { border-top-color: var(--s-zolty); }
.scena-hero-etykieta { font-size: max(12px, 1.12cqw); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--s-tekst-2); }
.scena-hero-duza { font-size: max(16px, 2.55cqw); font-weight: 700; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scena-hero-czesc { font-size: max(14px, 1.95cqw); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.scena-hero-drobna { font-size: max(12px, 1.1cqw); color: var(--s-tekst-2); font-variant-numeric: tabular-nums; }
.scena-ai { margin: .3rem .2rem 0; font-size: 12px; color: var(--kb-tekst-drugi); }
.scena-strefy { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr); gap: 1rem .5rem; align-items: start; }
.scena-strzalka { display: flex; justify-content: center; padding-top: 1.2rem; color: var(--s-stal); }
.scena-strzalka svg { width: 2.2rem; height: 2.2rem; }
.scena-sekcja { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
/* „Weź teraz” — najważniejszy blok: pierwsza pozycja duża, dwie następne mniejsze, kolejność listy wyspy. */
.scena-wez { padding: .9rem 1.1rem; background: var(--s-tabliczka); color: var(--s-tekst); border-left: 6px solid var(--s-stal); border-radius: 10px; }
.scena-wez p { margin: 0; }
.scena-wez-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: .35rem; }
.scena-wez-strefa { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--s-tekst); }
.scena-wez-etykieta { padding: .12rem .6rem; border-radius: 4px; background: var(--s-akcent); color: #ffffff; font-size: 1rem; font-weight: 700; letter-spacing: .06em; }
.scena-wez-pierwsza--spozniona { padding-left: .8rem; box-shadow: inset 6px 0 0 var(--s-alarm); }
.scena-wez-zlecenie { font-size: 2.2rem; font-weight: 700; line-height: 1.08; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scena-wez-czesc { font-size: 1.85rem; font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.scena-wez-szczegoly { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .2rem !important; font-size: 1.1rem; color: var(--s-tekst-2); font-variant-numeric: tabular-nums; }
.scena-spozniony { color: var(--s-alarm); font-weight: 700; }
.scena-wez-pusto { margin: .3rem 0 !important; font-size: 1.8rem; font-weight: 700; color: var(--s-tekst-2); }
.scena-wez-potem { display: flex; align-items: baseline; gap: .7rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--s-linia); }
.scena-wez-potem-etykieta { flex: none; font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--s-tekst-2); }
.scena-wez-potem-lista { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.scena-wez-poz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; min-width: 0; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.scena-wez-poz-data { flex: none; color: var(--s-tekst-2); }
.scena-wez-poz-data.scena-spozniony { color: var(--s-alarm); }
.scena-wez-poz-nr, .scena-wez-poz-szt, .scena-wez-poz-spozn { flex: none; }
.scena-wez-poz-nr { font-weight: 700; }
.scena-wez-poz-pg { color: var(--s-tekst-2); }
.scena-wez-stopka { margin-top: .6rem; padding-top: .45rem; border-top: 1px solid var(--s-linia); color: var(--s-tekst-2); }
.scena-wez-liczby { display: flex; flex-wrap: wrap; gap: .15rem 1rem; font-variant-numeric: tabular-nums; }
.scena-wez-zero { color: var(--s-tekst-2); }
.scena-wez-srodek { display: flex; flex-direction: column; }
.scena-tv .scena-wez-pierwsza { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
.scena-tv .scena-wez-pierwsza > .scena-wez-szczegoly { flex-basis: 100%; }
.scena-tv .scena-wez-reszta .scena-wez-element > span { max-width: 100%; white-space: normal; }
.scena-wez-maszyny { margin-top: .15rem !important; color: var(--s-tekst); font-variant-numeric: tabular-nums; }
.scena-tv .scena-wez-maszyny { font-size: 30px; }
.scena-wez-zrodlo { color: var(--s-tekst-2); font-weight: 700; }
.scena-tv .scena-wez-zrodlo { font-size: 30px; }
.scena-wez-wyrob { margin-left: .6em; font-size: 1rem; font-weight: 400; color: var(--s-tekst-2); }
.scena-wez-element { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-top: .15rem; font-size: 1rem; color: var(--s-tekst-2); }
.scena-wez-droga { color: var(--s-tekst); }
.scena-wez-poz-reszta { display: block; margin: -.1rem 0 .25rem; }
.scena-wez-poz-reszta .scena-wez-element { font-size: .9rem; }
.scena-wez-wtoku { flex: none; padding: 0 .4em; border: 1px solid var(--s-stal); border-radius: 4px; color: var(--s-tekst); font-weight: 700; }
.scena-wez-podpis { margin-top: .2rem !important; font-size: .92rem; }
/* Pasma (W-02): jedna linia na podgrupę; spóźnione — czerwone tło wiersza ze słowem „spóźnione” (Joachim 43:02). */
.scena-pasma { margin: 0; padding: .3rem 0; list-style: none; background: var(--s-tabliczka); color: var(--s-tekst); border-radius: 10px; }
.scena-pasmo + .scena-pasmo { border-top: 1px solid var(--s-linia); }
.scena-pasmo-wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; padding: .3rem 1rem; color: inherit; text-decoration: none; }
a.scena-pasmo-wiersz:hover, a.scena-pasmo-wiersz:focus-visible { background: rgba(111, 156, 196, .18); outline: none; }
.scena-pasmo-nazwa { min-width: 12.5rem; font-weight: 700; }
.scena-pasmo-czlon { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scena-pasmo-czlon--produkty { order: 9; color: var(--s-tekst-2); }
.scena-pasmo--spoznione { background: var(--s-alarm-tlo); box-shadow: inset 6px 0 0 var(--s-alarm); }
.scena-pasmo-czlon--spozniony { color: #ffffff; font-weight: 700; }
.scena-pasmo--puste .scena-pasmo-nazwa, .scena-pasmo-pusto { color: var(--s-tekst-2); font-weight: 400; }
/* Maszyny: zdjęcie strefy z tabliczkami na kotwicach albo stanowiska z wycinkami maszyn (zasada prawdy). */
.scena-kotwica { position: absolute; z-index: 2; }
.scena-kotwica--srodek { transform: translateX(-50%); }
.scena-kotwica--linia .scena-tabliczka { flex-direction: row; gap: .45em; padding: .1em .55em; }
.scena-scrim--lekki { background: linear-gradient(180deg, rgba(4, 7, 10, .35) 0%, rgba(4, 7, 10, .08) 40%, rgba(4, 7, 10, .12) 100%); }
.scena-nogi { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.scena-nogi line { stroke: var(--s-noga); stroke-width: 2; vector-effect: non-scaling-stroke; }
.scena-kropka { position: absolute; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--s-noga); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.scena-baner { margin: 0; }
.scena-baner-obraz { position: relative; aspect-ratio: 16 / 5; overflow: hidden; border-radius: 10px; background: #11161c; }
.scena-baner-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* 1.1.243: nagłówek jako film (kamera jedzie nad halą) w miejscu obrazu przepływu. „Ogranicz ruch” — pierwsza klatka. */
.scena-hero-obraz video.scena-film { display: block; width: 100%; height: 100%; object-fit: cover; }
.scena-hero-obraz img.scena-klatka { display: none; }
@media (prefers-reduced-motion: reduce) {
    .scena-hero-obraz video.scena-film { display: none; }
    .scena-hero-obraz img.scena-klatka { display: block; }
}
/* 1.1.242: baner Toczenia jako film (tylko podgląd, D-119); film jest już wycięty do 16:5. „Ogranicz ruch” — pierwsza klatka. */
.scena-baner-obraz video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scena-baner-obraz img.scena-baner-klatka { display: none; }
@media (prefers-reduced-motion: reduce) {
    .scena-baner-obraz video.scena-baner-film { display: none; }
    .scena-baner-obraz img.scena-baner-klatka { display: block; }
}
.scena-scrim--baner { background: linear-gradient(90deg, rgba(4, 7, 10, .82) 0%, rgba(4, 7, 10, .42) 45%, rgba(4, 7, 10, .08) 100%); }
.scena-baner-tytul { position: absolute; left: 1.1rem; bottom: .7rem; margin: 0; color: #ffffff; font-size: 1.6rem; font-weight: 700; letter-spacing: .03em; }
.scena-tabliczka { display: flex; flex-direction: column; align-items: center; gap: .05em; padding: .3em .65em .35em;
    background: var(--s-tabliczka); color: var(--s-tekst); border-top: 3px solid var(--s-stal); border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55); font-size: clamp(12px, 1.75cqw, 18px); line-height: 1.2; text-align: center;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.scena-tabliczka-symbol { font-weight: 700; letter-spacing: .02em; }
.scena-tabliczka-glowna { font-size: 1.1em; font-weight: 700; }
.scena-tabliczka-druga { color: var(--s-tekst-2); }
.scena-tabliczka--brak { border-top-style: dashed; }
.scena-tabliczka--brak .scena-tabliczka-glowna { max-width: 9em; font-size: 1em; font-weight: 400; white-space: normal; color: var(--s-tekst-2); }
.scena-tabliczka-lista { max-width: 14em; white-space: normal; }
/* R-141 pkt 2 (1.1.246): otwarty meldunek przy maszynie Toczenia — zapis operatora, nie stan maszyny. „Sprawdź meldunek” bursztynem
   (jak stempel „dane mogą być nieaktualne”), nigdy czerwienią. Zawija się w wąskim kaflu: zlecenie i część bywają długie. */
.scena-tabliczka-meldunek { max-width: 12em; margin-top: .15em; white-space: normal; font-weight: 700; color: var(--s-tekst); }
.scena-tabliczka-meldunek--sprawdz { color: #ffb547; }
.scena-tabliczka-meldunek-zlecenie { max-width: 12em; white-space: normal; overflow-wrap: anywhere; }
.scena-zameldowane { margin: 0 .2rem; }
/* R-141 pkt 3 (1.1.246): „WEŹ TERAZ — gniazda Toczenia” (tylko podgląd) — gniazdo, pierwsza pozycja kolejki jego monitora i otwarte
   meldunki. Ciemna tablica jak „Weź teraz”; czerwień tylko po dacie granicznej, ze słowem „spóźnione” (D-126, R-11). */
.scena-gniazda { padding: .7rem 1rem .8rem; background: var(--s-tabliczka); color: var(--s-tekst); border-left: 6px solid var(--s-stal); border-radius: 10px; }
.scena-gniazda-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .4rem; }
.scena-gniazda-tytul { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: var(--s-tekst); }
.scena-gniazda-opis { font-size: .9rem; color: var(--s-tekst-2); }
.scena-gniazda-tabela { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.scena-gniazda-tabela th { padding: .2rem .5rem; text-align: left; font-weight: 400; color: var(--s-tekst-2); white-space: nowrap; }
.scena-gniazda-tabela td { padding: .3rem .5rem; border-top: 1px solid var(--s-linia); vertical-align: top; }
.scena-gniazdo-nazwa a { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.scena-gniazdo-nazwa a:hover, .scena-gniazdo-nazwa a:focus-visible { color: var(--s-stal); }
.scena-gniazdo-drobne { display: block; font-size: .9rem; color: var(--s-tekst-2); }
.scena-gniazdo-wez > b, .scena-gniazdo-wez > span { margin-right: .5rem; }
.scena-gniazdo-nr { white-space: nowrap; }
.scena-gniazdo-szt { color: var(--s-tekst-2); white-space: nowrap; }
.scena-gniazdo-potem { display: block; margin-top: .15rem; font-size: .9rem; color: var(--s-tekst-2); }
.scena-gniazdo-data { white-space: nowrap; }
.scena-gniazdo--spoznione td:first-child { box-shadow: inset 4px 0 0 var(--s-alarm); }
.scena-gniazdo-meldunek { display: block; }
.scena-gniazdo-meldunek--sprawdz { color: #ffb547; }
.scena-hala { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); overflow: hidden; border-radius: 10px; background: #161c22; }
.scena-hala-pusto { margin: 0; padding: 1rem; color: var(--s-tekst-2); }
.scena-stanowisko { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .7rem .4rem 0;
    background: linear-gradient(180deg, #1b2229 0%, #232b34 50%, #3a424b 50.3%, #4b535c 100%); border-right: 2px solid rgba(217, 169, 44, .5); }
.scena-stanowisko::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7%; height: 3px; background: var(--s-zolty); opacity: .85; }
.scena-stanowisko .scena-tabliczka { position: relative; z-index: 2; font-size: 14px; }
.scena-stanowisko-noga { width: 2px; height: .8rem; background: var(--s-noga); }
.scena-stanowisko-maszyna { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 8.5rem; padding-bottom: 9%; }
.scena-stanowisko-maszyna img, .scena-maszyna-zastepcza { width: auto; height: auto; max-width: 94%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .55)); }
.scena-maszyna-zastepcza { width: 8rem; }
.scena-stanowisko--zbiorcze { justify-content: center; padding-bottom: .7rem; }
.scena-bez30 { margin: .3rem .2rem 0; }
.scena-tylko-waski { display: none; }
/* Liczby w HTML pod sceną. */
.scena-przewin { overflow-x: auto; max-inline-size: 100%; }
.scena-tabela { width: 100%; }
.scena-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scena-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scena-w-spozniony td:first-child { box-shadow: inset 4px 0 0 var(--kb-blad); }
.scena-szczegoly .scena-spozniony { color: var(--kb-blad); }
.scena-o-ekranie { margin: .6rem 0 0; }
@media (max-width: 1100px) {
    .scena-strefy { grid-template-columns: minmax(0, 1fr); }
    .scena-strzalka { padding-top: 0; }
    .scena-strzalka svg { transform: rotate(90deg); }
}
@media (max-width: 600px) {
    .scena-hero-tablice { display: none; }
    .scena-tylko-szeroki { display: none; }
    .scena-tylko-waski { display: block; }
    .scena-wez { padding: .75rem .85rem; }
    .scena-wez-zlecenie { font-size: 1.7rem; white-space: normal; overflow-wrap: anywhere; }
    .scena-wez-czesc { font-size: 1.45rem; }
    .scena-wez-potem { flex-direction: column; gap: .25rem; }
    .scena-wez-poz { flex-wrap: wrap; gap: 0 .5rem; white-space: normal; }
    .scena-pasmo-wiersz { padding: .35rem .8rem; }
    .scena-pasmo-nazwa { flex-basis: 100%; min-width: 0; }
    .scena-hala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scena-stanowisko-maszyna { height: 6.5rem; }
}
/* Telewizor /hala/blizniak/scena: 1920×1080 bez przewijania; pismo ≥ 30 px, zlecenie i część ≥ 64 px; jeden język. Wiersze
   bez zawijania, żeby kolumny Cięcia i Toczenia stały równo, a maszyny dostały resztę wysokości. */
.scena-tv { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 36px); overflow: hidden; color: var(--s-tekst); font-size: 30px; line-height: 1.2; }
.scena-tv-naglowek { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 24px; height: 90px; overflow: hidden; }
.scena-tv-tytul { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--s-tekst); }
.scena-tv-stemple { display: flex; flex-direction: column; align-items: flex-end; font-size: 30px; white-space: nowrap; }
.scena-tv-stempel { color: var(--s-tekst-2); }
.scena-tv-stempel--stare { color: #ffb547; font-weight: 700; }
.scena-tv-stempel--poza, .scena-tv-stempel--brak { color: #a8a8a8; }
.scena-tv-siatka { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "wc s wt" "pc s pt" "dc s dt"; gap: 8px 8px; align-content: start; }
.scena-tv-dc { grid-area: dc; } .scena-tv-dt { grid-area: dt; }
.scena-tv .scena-wez { max-height: 430px; overflow: hidden; }
.scena-tv-linia { display: flex; gap: 0 12px; margin: 0; white-space: nowrap; font-size: 30px; line-height: 1.2; }
.scena-tv-linia > span { flex: none; }
.scena-tv .scena-wez-potem { margin-top: 2px; padding-top: 2px; }
.scena-tv .scena-wez-poz { flex-wrap: nowrap; gap: 0 8px; }
.scena-tv .scena-wez-potem-etykieta { text-transform: none; letter-spacing: 0; }
.scena-pasma--tab { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--s-tabliczka); color: var(--s-tekst); border-radius: 10px; font-size: 30px; }
.scena-pasma-k1 { width: 47%; } .scena-pasma-k2 { width: 15%; } .scena-pasma-k3 { width: 24%; } .scena-pasma-k4 { width: 14%; }
.scena-pasma--tab th, .scena-pasma--tab td { height: 33px; padding: 0 10px; line-height: 33px; text-align: left; white-space: nowrap; }
.scena-pasma--tab th { color: var(--s-tekst-2); font-weight: 400; }
.scena-pasma--tab td { border-top: 1px solid var(--s-linia); font-variant-numeric: tabular-nums; }
.scena-pasma--tab .scena-pasmo-nazwa { font-weight: 400; }
.scena-pasma--tab .scena-pasmo--spoznione td:first-child { box-shadow: inset 6px 0 0 var(--s-alarm); }
.scena-tv-dol { padding: 2px 16px 4px; background: var(--s-tabliczka); border-radius: 10px; }
.scena-tv-podpis, .scena-tv-maszyny { margin: 0; font-size: 30px; line-height: 1.1; }
.scena-tv-podpis { overflow: hidden; white-space: nowrap; color: var(--s-tekst-2); }
.scena-tv-wc { grid-area: wc; } .scena-tv-wt { grid-area: wt; } .scena-tv-pc { grid-area: pc; } .scena-tv-pt { grid-area: pt; }
.scena-tv-mc { grid-area: mc; min-height: 0; } .scena-tv-mt { grid-area: mt; min-height: 0; }
.scena-tv-wc, .scena-tv-wt { display: flex; flex-direction: column; } .scena-tv-wc > *, .scena-tv-wt > * { flex: 1; }
.scena-tv .scena-strzalka { grid-area: s; padding-top: 14px; }
.scena-tv .scena-strzalka svg { width: 30px; height: 30px; }
.scena-tv .scena-wez { padding: 8px 18px 10px; border-left-width: 8px; }
.scena-tv .scena-wez-glowa { margin-bottom: 0; }
.scena-tv .scena-wez-strefa { font-size: 36px; }
.scena-tv .scena-wez-etykieta { font-size: 30px; }
.scena-tv .scena-wez-zlecenie { font-size: 64px; line-height: 1.02; }
.scena-tv .scena-wez-czesc { font-size: 64px; line-height: 1.04; }
.scena-tv .scena-wez-szczegoly { font-size: 32px; }
.scena-wez-szczegoly > span, .scena-wez-element > span, .scena-wez-poz > span { flex: none; white-space: nowrap; }
.scena-tv .scena-wez-pusto { font-size: 64px; }
.scena-tv .scena-wez-potem { margin-top: 4px; padding-top: 4px; }
.scena-tv .scena-wez-potem-etykieta, .scena-tv .scena-wez-poz, .scena-tv .scena-wez-podpis { font-size: 30px; }
.scena-tv .scena-wez-stopka { margin-top: 4px; padding-top: 4px; font-size: 30px; }
.scena-tv .scena-wez-poz-pg, .scena-tv .scena-wez-ostatnie { display: none; }
.scena-tv .scena-wez-element { margin-top: 0; font-size: 30px; }

.scena-tv .scena-wez-wyrob { font-size: 30px; }
.scena-tv .scena-tabliczka-druga { display: none; }
.scena-tv-ai { font-size: 30px; white-space: nowrap; color: var(--s-tekst-2); }
.scena-tv .scena-pasma { padding: 2px 0; }
.scena-tv .scena-pasmo-wiersz { padding: 0 16px; font-size: 30px; line-height: 1; }
.scena-tv .scena-pasmo-nazwa { flex: none; white-space: nowrap; }
.scena-tv .scena-pasmo-czlon--produkty { display: none; }
.scena-tv .scena-pasmo-wiersz { gap: 0 12px; }
.scena-tv .scena-strefa { position: relative; height: 100%; min-height: 0; }
.scena-tv .scena-zdjecie, .scena-tv .scena-hala { height: 100%; aspect-ratio: auto; }
.scena-tv .scena-zdjecie img { object-position: 50% 22%; }
.scena-tv .scena-tabliczka { padding: 2px 12px 4px; font-size: 30px; }
.scena-tv .scena-tabliczka-glowna { font-size: 32px; }
.scena-tv .scena-ai { font-size: 30px; }
.scena-tv .scena-ai--na-zdjeciu { position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 0 12px; border-top-left-radius: 8px;
    background: rgba(5, 8, 12, .85); color: var(--s-tekst-2); }
.scena-tv .scena-hala { grid-template-columns: repeat(var(--s-kolumn), minmax(0, 1fr)); align-content: stretch; }
.scena-tv .scena-hala--k1 { --s-kolumn: 1; }
.scena-tv .scena-hala--k2 { --s-kolumn: 2; }
.scena-tv .scena-hala--k3 { --s-kolumn: 3; }
.scena-tv .scena-hala--k4 { --s-kolumn: 4; }
.scena-tv .scena-hala--k5 { --s-kolumn: 5; }
.scena-tv .scena-stanowisko { padding-top: 6px; }
.scena-tv .scena-stanowisko-maszyna { flex: 1; height: auto; min-height: 0; }
.scena-tv .scena-stanowisko .scena-tabliczka { padding: 2px 8px 4px; font-size: 30px; }
.scena-tv .scena-hala--gesta .scena-stanowisko-maszyna, .scena-tv .scena-hala--gesta .scena-stanowisko-noga,
.scena-tv .scena-hala--gesta .scena-tabliczka-druga { display: none; }
.scena-tv .scena-hala--gesta .scena-stanowisko { justify-content: center; padding-bottom: 6px; }
/* Bliźniak */
/* Widok wyspy Cięcie (spotkanie 10.10, specyfikacja §4 i §7.5, D-106). Własne tokeny w korzeniu komponentu — --a-* i --p-*
   działają tylko w .ana2050 i .pz2060 (KK-9). Podgląd idzie za motywem panelu, telewizor zawsze ciemny. Czerwień wyłącznie
   dla spóźnionych (R-11); piła nie ma ani czerwonego, ani szarego stanu. */
.blizniak {
    --b-tlo: var(--kb-tlo); --b-panel: var(--kb-panel); --b-linia: var(--kb-linia); --b-tekst: var(--kb-tekst);
    --b-tekst-2: var(--kb-tekst-drugi); --b-alarm: var(--kb-blad); --b-uwaga: var(--kb-uwaga); --b-modul: #45607a;
}
.blizniak-wybor { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.blizniak-wybor-karta { text-decoration: none; color: inherit; border-left-color: var(--b-modul, #45607a); }
.blizniak-stan { margin: 0 0 .75rem; }
.blizniak-sekcja .panel-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.blizniak-sekcja-alarm { border-left: 4px solid var(--b-alarm); }
.blizniak-duza { font-size: var(--kb-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--b-tekst); }
.blizniak-alarm { color: var(--b-alarm); font-weight: 700; }
.blizniak-alarm-ramka { color: var(--b-alarm); font-weight: 600; }
.blizniak-przewin { overflow-x: auto; max-inline-size: 100%; }
.blizniak-tabela { width: 100%; }
.blizniak-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blizniak-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.blizniak-w-spozniony td:first-child { box-shadow: inset 4px 0 0 var(--b-alarm); }
.blizniak-w-dzis td:first-child { box-shadow: inset 4px 0 0 var(--b-uwaga); }
.blizniak-produkty { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.blizniak-produkt { min-inline-size: 5.5rem; padding: .4rem .7rem; border: 1px solid var(--b-linia); border-radius: 6px; background: var(--b-tlo); }
.blizniak-produkt b { font-size: var(--kb-fs-l); font-variant-numeric: tabular-nums; }
.blizniak-produkt-nazwa { color: var(--b-tekst-2); }
.blizniak-pasma { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: .75rem; }
.blizniak-pasmo { min-inline-size: 0; padding: .6rem .8rem; border: 1px solid var(--b-linia); border-left: 4px solid var(--b-modul); border-radius: 6px; }
.blizniak-pasmo-alarm { border-left-color: var(--b-alarm); }
.blizniak-pasmo-nazwa { margin: 0 0 .25rem; font-size: var(--kb-fs-l); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.blizniak-pasmo-liczby { margin: 0 0 .4rem; }
.blizniak-zestaw { padding: .5rem 0; border-bottom: 1px solid var(--b-linia); }
.blizniak-zestaw:last-child { border-bottom: 0; }
.blizniak-zestaw-rozbity { box-shadow: inset 4px 0 0 var(--b-uwaga); padding-left: .7rem; }
.blizniak-zestaw-glowa { margin: 0 0 .25rem; }
.blizniak-zestaw-czesci, .blizniak-wyjscia { margin: 0 0 0 1.2rem; padding: 0; }
.blizniak-zestaw-czesci li, .blizniak-wyjscia li { margin: .2rem 0; }
/* Kafle pił 2×2 na telefonie, 4 w rzędzie na szerokim ekranie; „dziś bez odbić” wygląda jak kafel z odbiciami (R-11). */
.blizniak-pily { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0; }
@media (min-width: 900px) { .blizniak-pily { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blizniak-pila { display: flex; flex-direction: column; gap: .2rem; min-inline-size: 0; padding: .6rem .7rem; border: 1px solid var(--b-linia);
    border-top: 4px solid var(--b-modul); border-radius: 6px; background: var(--b-panel); color: var(--b-tekst); text-decoration: none; }
.blizniak-pila:hover, .blizniak-pila-wybrana { border-color: var(--b-modul); box-shadow: 0 0 0 2px var(--b-modul); }
.blizniak-pila--brak-danych { border-style: dashed; border-top-style: dashed; }
.blizniak-pila-symbol { font-weight: 700; font-size: var(--kb-fs-l); }
.blizniak-pila-stan { font-variant-numeric: tabular-nums; }
.blizniak-pila-ostatnie { color: var(--b-tekst-2); overflow-wrap: anywhere; }
/* Ikony podglądu (§7.1): sylwetka piły i ikony części w kolorze modułu, ta sama dla każdego stanu kafla (G5, R-11). */
.blizniak-pila-ikona { inline-size: 4rem; block-size: 2.5rem; flex: none; color: var(--b-modul); }
.ikona-czesci { inline-size: 1.15em; block-size: 1.15em; flex: none; color: var(--b-modul); vertical-align: -0.2em; }
.blizniak-panel-pily { margin-top: .75rem; padding: .6rem .8rem; border: 1px solid var(--b-linia); border-left: 4px solid var(--b-modul); border-radius: 6px; }
.blizniak-panel-pily h3 { margin: 0 0 .4rem; font-size: var(--kb-fs-l); display: flex; justify-content: space-between; gap: .5rem; }
.blizniak-panel-zamknij { font-size: var(--kb-fs-s); font-weight: 400; }
.blizniak-ids > summary { cursor: pointer; }
.blizniak-ids-lista { font-size: var(--kb-fs-xs); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.blizniak-o-ekranie { margin: .5rem 0 0; }
@media (max-width: 640px) {
    .blizniak-sekcja .panel-body { padding-inline: .6rem; }
    .blizniak-pasma { grid-template-columns: minmax(0, 1fr); }
}
/* Telewizor /hala/blizniak/{wyspa}: 1920×1080 bez przewijania (§4.1), pismo co najmniej 30 px, liczby kluczowe 64 px,
   bez grafik (KH-14). Wiersze nie zawijają się — budżet wysokości liczy BlizniakPlan.WysokoscPx, a test go pilnuje. */
.blizniak-tv {
    --b-tlo: #121212; --b-panel: #1a1d22; --b-linia: #2e343d; --b-tekst: #ffffff; --b-tekst-2: #a8a8a8;
    --b-alarm: #ff5a52; --b-uwaga: #f0b243;
    color: var(--b-tekst); background: var(--b-tlo); font-size: 30px; line-height: 1.25;
}
.blizniak-tv-naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.blizniak-tv-tytul { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--b-tekst); white-space: nowrap; }
.blizniak-tv-stemple { display: flex; flex-direction: column; align-items: flex-end; font-size: 30px; white-space: nowrap; }
.blizniak-tv-stempel-odbic { color: var(--b-alarm); font-weight: 700; }
.blizniak-tv-blok { padding: 6px 0; border-top: 2px solid var(--b-linia); }
.blizniak-tv-blok p { margin: 0; }
.blizniak-tv-linia1 { display: flex; align-items: baseline; gap: 28px; white-space: nowrap; overflow: hidden; }
.blizniak-tv-linia2 { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blizniak-tv-etykieta { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.blizniak-tv-liczba { font-size: 64px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.blizniak-tv-spoznione .blizniak-tv-liczba, .blizniak-tv-spoznione .blizniak-tv-etykieta, .blizniak-tv-alarm { color: var(--b-alarm); }
.blizniak-tv-produkty, .blizniak-tv-drugie { color: var(--b-tekst-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.blizniak-tv-pasma { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 2px solid var(--b-linia); font-size: 30px; }
.blizniak-tv-pasma caption { caption-side: top; text-align: left; padding: 4px 0 0; color: var(--b-tekst-2); font-size: 30px; }
.blizniak-tv-pasma th, .blizniak-tv-pasma td { padding: 0 8px 0 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blizniak-tv-pasma th { color: var(--b-tekst-2); font-weight: 400; }
.blizniak-tv-pasma td { border-top: 1px solid var(--b-linia); }
.blizniak-tv-kol-nazwa { width: 30%; }
.blizniak-tv-kol-liczba { width: 7%; }
.blizniak-tv-num { text-align: right !important; padding-right: 24px !important; font-variant-numeric: tabular-nums; font-weight: 700; }
/* Pole „Odbiorca” w oknie filtra listy zamówień (wpisywanie z podpowiedziami); wygląd jak pozostałe pola okna (kbb-lista.css: select, date). */
.kbb-filtr-pole input[list] { min-height: 2.2rem; padding: 0 .4rem; border: 1px solid var(--kb-linia-mocna, #bfc0c1); border-radius: 4px; background: #fff; font-weight: 400; }
.kbb-filtr-pole input[list][aria-invalid="true"] { border-color: var(--kb-czerwony, #d4282f); }
.kbb-filtr-blad { color: var(--kb-czerwony-ciemny, #a01f25); font-weight: 600; }
.kbb-filtr-widoku { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }

/* Nagłówek sortowalny (.th-sort) — raporty SAP; przegląd portalu 19.10.2026. */
.th-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; white-space: nowrap; }
.th-sort:hover { color: var(--kb-czerwony); }
.th-sort:focus-visible { outline: 2px solid var(--kb-grafit); outline-offset: 2px; border-radius: 2px; }

/* Wyspy */
.wyspy-wybor { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 1rem; }
.wyspy-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.wyspy-jakosc > summary { cursor: pointer; }
.wyspy-jakosc-lista { margin: .5rem 0 0 1.2rem; padding: 0; }
.wyspy-jakosc-lista li { margin: .35rem 0; }
.wyspy-jakosc-dni { max-inline-size: 26rem; margin-block: .4rem; }
/* Monitor wyspy (/hala/wyspa): ten sam arkusz co ekran gniazda, pismo 30 px; spóźnione pasem z lewej, bez czerwieni w tekście. */
.wyspy-monitor-podgrupa { margin: 14px 0 6px; font-size: 34px; font-weight: 700; color: #ffffff; }
.wyspy-monitor-licz { font-size: 26px; font-weight: 400; color: #a8a8a8; }
.wyspy-monitor-skrot { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 4px 0 12px; font-size: 24px; color: #c8c8c8; }
.wyspy-monitor-skrot b { color: #fff; }
.wyspy-monitor-tabela .wyspy-monitor-bez { white-space: nowrap; }
.wyspy-monitor-drobne { font-size: 22px; line-height: 1.2; color: #b4b4b4; font-weight: 400; }
.wyspy-monitor-uwagi { font-size: 24px; }
.wyspy-monitor-para { white-space: nowrap; }
.wyspy-monitor .wyspy-spozniony td:first-child { box-shadow: inset 6px 0 0 #ff5a52; }
.wyspy-monitor .ekran-termin { font-size: 26px; }
.wyspy-monitor .wyspy-szt { font-size: 30px; }
.wyspy-tabela .wyspy-szt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wyspy-monitor .ekran-szt { font-variant-numeric: tabular-nums; }
@media print {
    .brand-band, .topbar, .sidebar, .okruszki, nav, .wyspy-wybor, .wyspy-akcje, .stopka-danych, .kompas-przycisk, .kompas-panel { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .wyspy-stan { color: #000 !important; font-size: 14px; margin: 0 0 8px; }
    .wyspy-panel { break-before: page; border: 0; box-shadow: none; background: #fff; }
    #wyspy-listy > .wyspy-panel:first-child { break-before: auto; }
    .wyspy-panel .tabela { width: 100%; font-size: 13px; line-height: 1.3; }
    .wyspy-panel .tabela th { font-size: 12px; color: #000; }
    .wyspy-panel tr { break-inside: avoid; }
}

/* Wyspy — wygląd */
.wyspy-kafle a.prod-kafel, .wyspy-karty a.plan-karta, .wyspy-wybor a.plan-zakladka { text-decoration: none; color: inherit; }
.wyspy-kafle a.prod-kafel:hover, .wyspy-karty a.plan-karta:hover { border-color: var(--kb-grafit); }
.wyspy-kafle a.prod-kafel:focus-visible, .wyspy-karty a.plan-karta:focus-visible { outline: 2px solid var(--kb-grafit); outline-offset: 2px; }
.wyspy-podzakladki { margin-top: .4rem; }
.wyspy-karta-ok { color: var(--kb-ok-tekst); }
.wyspy-licz { font-size: .875rem; font-weight: 400; color: var(--kb-tekst-drugi); margin-left: .5rem; }
.wyspy-podgrupa { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .5rem; }
.wyspy-pusto { margin: .5rem 0; }
.wyspy-sekcja > summary { cursor: pointer; }
.wyspy-sekcja > summary h2 { display: inline-flex; align-items: center; gap: .5rem; }
.wyspy-tabela tr.wyspy-w td:first-child { box-shadow: inset 4px 0 0 transparent; }
.wyspy-tabela tr.wyspy-w-spozniony { background: var(--kb-blad-tlo); }
.wyspy-tabela tr.wyspy-w-spozniony td:first-child { box-shadow: inset 4px 0 0 var(--kb-blad); }
.wyspy-tabela tr.wyspy-w-nadzis { background: var(--kb-uwaga-tlo); }
.wyspy-tabela tr.wyspy-w-nadzis td:first-child { box-shadow: inset 4px 0 0 var(--kb-uwaga); }
.wyspy-tabela tr.wyspy-w-wtoku { background: var(--kb-ok-tlo); }
.wyspy-tabela tr.wyspy-w-wtoku td:first-child { box-shadow: inset 4px 0 0 var(--kb-ok); }
.wyspy-tabela .wyspy-data { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wyspy-tabela tr.wyspy-w-spozniony .wyspy-data { color: var(--kb-blad); }
.wyspy-tabela tr.wyspy-w-nadzis .wyspy-data { color: var(--kb-uwaga-tekst); }
.wyspy-tabela tr.wyspy-w-wtoku .wyspy-data { color: var(--kb-ok-tekst); }
.wyspy-tabela .wyspy-zlecenie { font-weight: 700; }
.wyspy-znaczniki { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.wyspy-znaczniki .badge-mocna { font-weight: 700; }
@media print {
    .opis-ekranu, .plan-jak-czytac, .wyspy-kafle, .wyspy-karty, .plan-zakladki { display: none !important; }
    .wyspy-tabela tr.wyspy-w { background: #fff !important; }
}

/* --- Awarie maszyn (/produkcja/awarie): tylko odczyt ---------------------------------------- */
.aw-naglowek { font-size: 1.1rem; margin: 1.2rem 0 .6rem; }
.aw-okres { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.aw-pareto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: start; }
.aw-panel > summary { cursor: pointer; }
.aw-przewijana { overflow-x: auto; }
.aw-tabela td.aw-opis { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Na karcie pełny opis pozycji ma być czytelny (na dotyku podpowiedź title nie istnieje): zawijamy zamiast obcinać. */
.aw-tabela td.aw-opis.aw-opis-zawija { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.kbb-pole-dop { display: block; font-size: .857rem; color: var(--kb-szary); }
.aw-tabela tr.aw-stara > td { background: var(--kb-uwaga-tlo, #fff6e5); }
.aw-tabela tr.aw-wybrany > td { background: var(--kb-pasek); font-weight: 600; }
.aw-kropka { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-inline-end: .35rem; border: 1px solid var(--kb-linia-mocna); }