/*
    Style wspólnych komponentów Montero. ZERO literałów kolorów — wyłącznie
    var(--montero-*) z motyw.css. Odstępy tylko przez var(--montero-odstep-*).
*/

* { box-sizing: border-box; }


/*
    JEDNO PIONOWE PRZEWIJANIE — DOKUMENT (od 15.10.2026, na każdej szerokości).
    Wcześniej obowiązywał łańcuch procentów html → body → #app → .m-powloka z overflow: hidden na
    dokumencie i wewnętrznymi scrollerami (pozostałość hosta MAUI/WebView2, dziś uśpionego). Na ekranie
    budowy sztywna góra zjadała prawie cały ekran, a sale przewijały się w okienku kilku linii — na
    telefonie 90 px z 844, na desktopie ~50 px z 800. Teraz:
    - przewija się wyłącznie dokument; żaden kontener powłoki nie ma stałej wysokości ani pionowego overflow;
    - powłoka ma min-height: 100dvh (pasek adresu na telefonie), z 100vh jako zapasem;
    - nagłówek sesji i dolna nawigacja są sticky — zostają w przepływie, więc treść nie chowa się pod
      paskiem bez dodatkowego paddingu, a safe-area dna ekranu ma sam pasek;
    - szerokie siatki i tabele mogą przewijać się w poziomie, w pionie rosną ze stroną;
    - wyjątek: nakładki (.m-zaslona / .m-arkusz) — mają zakryć ekran, więc przewijają się same.
    overflow-x: clip, nie hidden: hidden zrobiłby z body kontener przewijania i zepsuł sticky.
*/
html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--montero-tlo);
    color: var(--montero-tekst);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
}

/* ═══ Typografia — odpowiednik stylów z App.xaml ═══ */
.m-tytul-strony { font-size: 22px; font-weight: 600; margin: 0; }
.m-tytul-sekcji { font-size: 15px; font-weight: 600; margin: 0; }
.m-podtytul     { font-size: 14px; margin: 0; }
.m-pomocniczy   { font-size: 12px; color: var(--montero-tekst-slaby); margin: 0; }
.m-wartosc-kpi  { font-size: 20px; font-weight: 700; color: var(--montero-granat); }

/* ═══ Powłoka ═══ */
.m-powloka {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.m-naglowek {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-3);
    padding: var(--montero-odstep-3) var(--montero-odstep-4);
    background: var(--montero-powloka);
    color: var(--montero-tekst-powloki);
    flex: 0 0 auto;
}

.m-naglowek-tozsamosc { flex: 1; min-width: 0; }

/* Od 1.8 nagłówek powłoki terenowej niesie też przełącznik języka — na wąskim telefonie przyciski schodzą do drugiego
   wiersza, zamiast ściskać nazwisko i firmę do jednej litery. Szeroki ekran dalej mieści wszystko w jednym. */
@media (max-width: 480px) {
    .m-naglowek { flex-wrap: wrap; row-gap: var(--montero-odstep-2); }
    .m-naglowek-tozsamosc { flex: 1 1 calc(100% - 50px); }
    .m-naglowek > .m-jezyk { margin-left: auto; }
    .m-naglowek > .m-firma { margin-left: auto; }
}

.m-naglowek-nazwa {
    display: block;
    color: var(--montero-tekst-na-akcencie);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-chip-firmy {
    display: inline-block;
    margin-top: var(--montero-odstep-1);
    padding: 2px var(--montero-odstep-2);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
    font-size: 12px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-chip-firmy.m-chip-nieznany {
    background: var(--montero-powloka-hover);
    color: var(--montero-tekst-powloki-slaby);
}

/* Obszar między nagłówkiem a dolnym paskiem — rośnie z treścią i wypycha pasek na dół krótkiej strony. */
.m-tresc {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Marginesy ekranów bez własnej ramy (Moje budowy, komunikat „nie ma takiego ekranu"). Nazwa została
   z czasów wewnętrznych scrollerów — dziś NIE przewija, tylko odsuwa treść od krawędzi. */
.m-przewijane {
    flex: 0 0 auto;
    padding: var(--montero-odstep-6) var(--montero-odstep-4);
}

/* Góra powłoki: nagłówek sesji i pas błędu, przyklejone razem — pas zostaje widoczny przy każdym
   przewinięciu dokumentu. Tło zakrywa treść przewijaną pod spodem. */
.m-gora-powloki {
    position: sticky;
    top: 0;
    z-index: 10;
    flex: 0 0 auto;
    background: var(--montero-tlo);
}

/* Pas błędu. Szczegóły (stos) bywają długie — limit wysokości z własnym przewijaniem, bo pas jest
   przyklejony jak nakładka i bez limitu zakryłby cały ekran. */
.m-pas-bledu {
    max-height: 40vh;
    overflow-y: auto;
    margin: var(--montero-odstep-4) var(--montero-odstep-4) 0;
}

/* ═══ Karty i panele ═══ */
.m-panel {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-5);
    box-shadow: var(--montero-cien);
}

.m-lista {
    display: flex;
    flex-direction: column;
    gap: var(--montero-odstep-3);
    margin-top: var(--montero-odstep-4);
}

/*
    Karta budowy jest CELOWO nieklikalna — nawigacja do budowy to etap B2. Brak kursora
    wskazującego i brak stanu hover to jedyny uczciwy sygnał: martwy przycisk obiecywałby
    akcję, której nie ma.
*/
.m-karta-budowy {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-4);
}

.m-karta-naglowek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
}

.m-karta-numer { font-size: 12px; color: var(--montero-tekst-slaby); }

.m-karta-adres { margin-top: var(--montero-odstep-1); }

/* ═══ Pasek postępu — wypełnienie akcentem na linii siatki ═══ */
.m-pasek {
    height: var(--montero-odstep-2);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-linia);
    overflow: hidden;
    margin-top: var(--montero-odstep-3);
}

.m-pasek-wypelnienie {
    height: 100%;
    background: var(--montero-akcent);
}

.m-pasek-opis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--montero-odstep-2);
}

/* ═══ Formularze ═══ */
.m-pole { display: block; margin-bottom: var(--montero-odstep-4); }

.m-etykieta {
    display: block;
    margin-bottom: var(--montero-odstep-1);
    font-size: 12px;
    color: var(--montero-tekst-slaby);
}

.m-input {
    width: 100%;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    font-size: 16px; /* 16px trzyma iOS-a i Androida z dala od auto-zoomu przy focusie */
}

.m-input:focus {
    outline: 2px solid var(--montero-akcent);
    outline-offset: -2px;
}

.m-przycisk {
    width: 100%;
    padding: var(--montero-odstep-3) var(--montero-odstep-4);
    border: 1px solid transparent;
    border-radius: var(--montero-promien-maly);
    background: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Link w roli przycisku: inline <a> z pionowym paddingiem nachodziłby na linijkę nad sobą
   (np. datę i obsadę w „Moim dniu" na 375 px) — blok zajmuje własne miejsce w układzie. */
a.m-przycisk {
    display: block;
    margin-top: var(--montero-odstep-3);
    text-align: center;
    text-decoration: none;
}

.m-przycisk:hover:not(:disabled) { background: var(--montero-akcent-hover); }
.m-przycisk:disabled { background: var(--montero-nieaktywny); cursor: default; }

.m-przycisk-zwykly {
    background: var(--montero-panel);
    border-color: var(--montero-obramowanie);
    color: var(--montero-tekst);
}

.m-przycisk-zwykly:hover:not(:disabled) { background: var(--montero-hover); }

.m-przycisk-powloki {
    padding: var(--montero-odstep-2) var(--montero-odstep-3);
    border: 1px solid var(--montero-powloka-hover);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-powloka-hover);
    color: var(--montero-tekst-powloki);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.m-przycisk-powloki:hover { background: var(--montero-akcent); color: var(--montero-tekst-na-akcencie); }

/* Przełącznik widoku — dwa albo trzy warianty tej samej listy (np. „do montażu" kontra cała
   siatka). Stan wybrany niesie AKCENT, bo to interakcja, a nie sygnał stanu roboty. */
.m-przelacznik {
    display: flex;
    gap: var(--montero-odstep-1);
    margin-bottom: var(--montero-odstep-4);
}

.m-przelacznik button {
    flex: 1;
    padding: var(--montero-odstep-2) var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.m-przelacznik button:hover { background: var(--montero-hover); }

.m-przelacznik button.wybrany {
    border-color: var(--montero-akcent);
    background: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
}

/* ═══ Komunikaty ═══ */
.m-blad {
    margin-top: var(--montero-odstep-3);
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-blad);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-tlo-bledu);
    color: var(--montero-blad);
    font-size: 13px;
}

.m-blad-szczegoly {
    margin-top: var(--montero-odstep-2);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--montero-tekst-slaby);
}

.m-uwaga {
    padding: var(--montero-odstep-4);
    border: 1px solid var(--montero-uwaga);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
    color: var(--montero-uwaga);
}

/* Kolor samego tekstu (liczba, termin) — bez ramki komunikatu. Błąd to błąd, uwaga to „wygasa",
   akcent to „dziś"; tak samo jak w panelu. */
.m-blad-tekst   { color: var(--montero-blad); }
.m-uwaga-tekst  { color: var(--montero-uwaga); }
.m-akcent-tekst { color: var(--montero-akcent); }

/* ═══ Ekran logowania ═══ */
.m-logowanie {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: var(--montero-odstep-6);
    background: var(--montero-powloka);
}

/*
    Elastyczne odstępy zamiast justify-content: center. Wyśrodkowana treść we flexie
    z przewijaniem ucieka NAD górną krawędź scrollera, gdy okno jest niższe od formularza —
    i nie da się jej wtedy doscrollować. Rozpórki o flex: 1 1 0 kurczą się wtedy do zera.
*/
.m-logowanie::before,
.m-logowanie::after { content: ""; flex: 1 1 0; }

.m-logowanie-znak,
.m-logowanie-panel { flex: 0 0 auto; }

.m-logowanie-znak {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-3);
    margin-bottom: var(--montero-odstep-6);
}

.m-logowanie-nazwa {
    color: var(--montero-tekst-na-akcencie);
    font-size: 22px;
    font-weight: 600;
}

.m-logowanie-podpis { color: var(--montero-tekst-powloki-slaby); font-size: 12px; }

/* Przełącznik języka (od 1.8): na logowaniu w prawym rogu znaku, w nagłówku powłoki obok przycisków — lista rozwijana
   wąska jak przycisk, bo nagłówek telefonu 360 px mieści jeszcze nazwisko, „Zgłoś problem" i „Wyloguj". */
.m-logowanie-jezyk { margin-left: auto; }
.m-jezyk { width: auto; flex: 0 0 auto; }
/* Przełącznik widoku firm konta biurowego („dwie firmy") — w nagłówku obok „Zgłoś problem", szerokość z treści. */
.m-firma { width: auto; flex: 0 0 auto; }

.m-logowanie-panel {
    background: var(--montero-panel);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-5);
    box-shadow: var(--montero-cien);
}

.m-rozdzielacz {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-3);
    margin: var(--montero-odstep-5) 0;
    color: var(--montero-tekst-slaby);
    font-size: 12px;
}

.m-rozdzielacz::before,
.m-rozdzielacz::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--montero-linia);
}

.m-akcja-ponow { margin-top: var(--montero-odstep-4); }

/* ═══════════════════════════════════════════════════════════════
   Ekran budowy: nagłówek, nawigacja dolna, sekcje
   ═══════════════════════════════════════════════════════════════ */

/* Ekran budowy: nagłówek budowy (.m-ramka-gora) i treść jedna pod drugą — całość przewija dokument. */
.m-ramka {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.m-ramka-gora {
    flex: 0 0 auto;
    padding: var(--montero-odstep-5) var(--montero-odstep-4) 0;
}

.m-tresc-budowy {
    flex: 0 0 auto;
    padding: 0 var(--montero-odstep-4) var(--montero-odstep-6);
}

.m-naglowek-budowy {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-4);
    margin-bottom: var(--montero-odstep-4);
}

.m-powrot {
    display: inline-block;
    margin-bottom: var(--montero-odstep-3);
    color: var(--montero-tekst-slaby);
    font-size: 13px;
    text-decoration: none;
}

.m-powrot:hover { color: var(--montero-akcent); }

/* Dwie liczby postępu obok siebie: cała budowa i „Twój zakres”. */
.m-liczby {
    display: flex;
    gap: var(--montero-odstep-3);
    margin-top: var(--montero-odstep-4);
}

.m-liczba {
    flex: 1;
    min-width: 0;
    background: var(--montero-tlo-akcent);
    border-radius: var(--montero-promien-maly);
    padding: var(--montero-odstep-3);
}

.m-liczba-podpis {
    display: block;
    font-size: 11px;
    color: var(--montero-akcent-hover);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m-liczba-wartosc {
    display: block;
    margin-top: var(--montero-odstep-1);
    font-size: 18px;
    font-weight: 700;
    color: var(--montero-granat);
}

.m-liczba-dopisek { display: block; font-size: 11px; color: var(--montero-tekst-slaby); }

/* ═══ Nawigacja dolna ═══
   Dolny pasek zamiast zakładek u góry: na telefonie kciuk sięga dołu ekranu,
   a cztery sekcje mieszczą się bez przewijania poziomego.

   Sticky, nie fixed: pasek zostaje ostatnim wierszem powłoki (w przepływie), więc treść kończy się
   NAD nim, a przy przewijaniu dokumentu trzyma się dolnej krawędzi ekranu. */
.m-nawigacja {
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex: 0 0 auto;
    display: flex;
    background: var(--montero-powloka);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.m-nawigacja a {
    flex: 1;
    padding: var(--montero-odstep-2) var(--montero-odstep-1);
    border-top: 3px solid transparent;
    color: var(--montero-tekst-powloki-slaby);
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.m-nawigacja a.aktywna {
    border-top-color: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
}

.m-nawigacja-ikona { display: block; font-size: 18px; line-height: 1.4; }

/* Podpis pod ikoną — sama ikona nie mówi, co to za sekcja. */
.m-nawigacja-etykieta {
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   Siatka budynku
   ═══════════════════════════════════════════════════════════════ */

.m-pietro { margin-bottom: var(--montero-odstep-5); }

/* Piętro nad pokojami: od U3 nazwa pokoju ma 13 px półgrubo, więc piętro idzie stopień wyżej i ciemniej. */
.m-pietro-nazwa {
    margin: 0 0 var(--montero-odstep-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--montero-tekst);
}

.m-pomieszczenie { margin-bottom: var(--montero-odstep-3); }

/* Nagłówek pokoju niesie nazwę i znacznik planu (U3) — nazwa czytelna, znacznik obok w kolorze stanu. */
.m-pomieszczenie-nazwa {
    margin: 0 0 var(--montero-odstep-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--montero-tekst-slaby);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-2);
}

/* Siatka koordynatora (wydanie „koordynator", B3): nagłówek budynku, filtry i znacznik planu przy pokoju.
   Znacznik jest jedynym mocnym akcentem siatki — „plan minął" w kolorze ostrzeżenia, „bez planu" przerywaną
   ramką (brak czegoś), plan z datą spokojnie. Kafelki zostają, jak były. */
.m-budynek-nazwa {
    margin: var(--montero-odstep-5) 0 var(--montero-odstep-3);
    padding-bottom: var(--montero-odstep-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--montero-tekst);
    border-bottom: 1px solid var(--montero-linia);
}

.m-budynek-nazwa:first-of-type { margin-top: 0; }

.m-filtry-siatki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-2);
    margin-bottom: var(--montero-odstep-4);
}

.m-filtry-przerwa {
    align-self: stretch;
    width: 1px;
    margin: 0 var(--montero-odstep-1);
    background: var(--montero-obramowanie);
}

.m-chip-liczba {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Znacznik planu (U3): wypełniona etykieta z kropką w kolorze stanu — plan zielenią, „plan minął" bursztynem
   ostrzeżenia (pomarańcz marki zostaje dla interakcji), „bez planu" szarością. Ten sam kolor niesie podsumowanie
   na górze siatki, więc oko łączy liczbę z pokojami. */
.m-plan-sali {
    --kolor-planu: var(--montero-ok);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: var(--montero-tlo-ok);
    color: var(--kolor-planu);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.m-plan-sali::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kolor-planu);
}

.m-plan-sali.minal {
    --kolor-planu: var(--montero-uwaga);
    background: var(--montero-tlo-uwagi);
}

.m-plan-sali.brak {
    --kolor-planu: var(--montero-tekst-slaby);
    background: var(--montero-tlo-neutralne);
    font-weight: 500;
}

.m-plan-sali.brak::before { background: var(--montero-nieaktywny); }

/* Podsumowanie planu na górze siatki: ile pokoi z robotą nie ma planu, a ilu plan minął. */
.m-podsumowanie-planu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-2);
    margin-bottom: var(--montero-odstep-3);
}

.m-podsumowanie-planu-tytul { font-size: 13px; color: var(--montero-tekst-slaby); }

/* Akcje przy pozycji kolejki (blok 3: „Popraw ilość", „Cofnij etap…") — drugoplanowe wobec zatwierdzenia
   zaznaczonych, więc mniejsze: jeden wiersz, tekst nie zawija się w wysokie kafle. */
.m-akcje-pozycji {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-2);
    margin-top: var(--montero-odstep-3);
}

.m-akcje-pozycji .m-przycisk {
    width: auto;
    padding: var(--montero-odstep-2) var(--montero-odstep-3);
    font-size: 13px;
}

/* Zapotrzebowanie na okna (blok 4): karta konstrukcji z rzędem pięciu liczb; „do dostarczenia" wyróżnione akcentem,
   gdy jest czego dostarczyć — to ta liczba jest sednem zgłoszenia. Na wąskim ekranie liczby zawijają się w siatkę. */
.m-lista-zapotrzebowania { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--montero-odstep-2); }

.m-pozycja-zapotrzebowania {
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
}

.m-pozycja-zapotrzebowania-nazwa { margin: 0 0 var(--montero-odstep-2); display: flex; flex-wrap: wrap; gap: 0 var(--montero-odstep-2); align-items: baseline; }

.m-liczby-zapotrzebowania {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--montero-odstep-2);
}

.m-liczby-zapotrzebowania div { padding: var(--montero-odstep-1) var(--montero-odstep-2); border-radius: var(--montero-promien-maly); background: var(--montero-tlo); }
.m-liczby-zapotrzebowania dt { font-size: 11px; color: var(--montero-tekst-slaby); }
.m-liczby-zapotrzebowania dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--montero-tekst); }

.m-do-dostarczenia.jest { background: var(--montero-tlo-akcent); }
.m-do-dostarczenia.jest dd { color: var(--montero-akcent-hover); }

/* 5e: kafelek pulpitu jest odnośnikiem do swojej kolejki — bez podkreślenia i z kolorem tekstu kafelka. */
a.m-kafel-pulpitu { text-decoration: none; color: inherit; }

/* 4b: liczba bieżąca pod zapisaną — tylko gdy się różni; drobna, żeby zapisana dalej była tą „z chwili zgłoszenia". */
.m-teraz { display: block; font-size: 11px; font-weight: 400; color: var(--montero-tekst-slaby); }

/* 4a: stan zgłoszenia — odczytane w biurze (niebieski jak przyjęta reklamacja), zamknięte bez sukcesu — wygaszone. */
.m-chip-zap-odczytane { background: var(--montero-serwis-przyjeta); }
.m-chip-zap-zamkniete { background: var(--montero-nieaktywny); }


/* Zaznaczanie na siatce koordynatora (U2): pole trójstanowe przy budynku i piętrze, zwykłe przy pokoju — te same
   pola, co we wspólnym wyborze zakresu. Pasek akcji przyklejony NAD dolną nawigacją (też sticky), w przepływie
   dokumentu — bez stałej wysokości i bez własnego przewijania. */
.m-zaznacz-wiersz {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-2);
}

.m-pomieszczenie-nazwa .m-zakres-pole { width: 20px; height: 20px; align-self: center; }

.m-pasek-akcji {
    position: sticky;
    bottom: calc(var(--montero-wysokosc-nawigacji) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: var(--montero-odstep-4) calc(-1 * var(--montero-odstep-4)) 0;
    padding: var(--montero-odstep-3) var(--montero-odstep-4);
    background: var(--montero-panel);
    border-top: 2px solid var(--montero-akcent);
    box-shadow: 0 -4px 12px rgb(10 18 41 / 8%);
}

.m-pasek-akcji-licznik {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--montero-odstep-2);
    font-size: 13px;
    color: var(--montero-tekst-slaby);
}

/* „Wyczyść" jako link tekstowy — rzadka akcja, nie zabiera wiersza przyciskom. */
.m-pasek-akcji-wyczysc {
    padding: var(--montero-odstep-1) 0;
    border: 0;
    background: none;
    color: var(--montero-akcent-hover);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.m-pasek-akcji-wyczysc:focus-visible { outline: 2px solid var(--montero-akcent); outline-offset: 2px; }

.m-pasek-akcji-przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-2);
}

.m-pasek-akcji-przyciski .m-przycisk { flex: 1 1 120px; width: auto; }

/* Formularz montażu (B4): dwa pola obok siebie (daty), grupy pól i wybór z listy pól wyboru. */
.m-pola-obok {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 var(--montero-odstep-3);
}

.m-fieldset {
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-3);
    min-width: 0;
}

.m-fieldset > legend { padding: 0 var(--montero-odstep-1); }

.m-wybor {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-2);
    padding: var(--montero-odstep-2) 0;
    min-height: 40px;
}

/* Wspólny wybór zakresu z siatki (WyborZakresuSiatki): budynek → piętro → pokoje, pole trójstanowe węzła. */
.m-zakres-budynek + .m-zakres-budynek {
    margin-top: var(--montero-odstep-4);
    padding-top: var(--montero-odstep-3);
    border-top: 1px solid var(--montero-linia);
}

.m-zakres-wezel {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-2);
    min-height: 40px;
}

.m-zakres-wezel-budynek .m-zakres-nazwa { font-weight: 600; color: var(--montero-tekst); }

.m-zakres-nazwa { font-size: 14px; color: var(--montero-tekst); }

.m-zakres-licznik {
    margin-left: auto;
    font-size: 12px;
    color: var(--montero-tekst-slaby);
    font-variant-numeric: tabular-nums;
}

.m-zakres-pole {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--montero-nieaktywny);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    cursor: pointer;
}

.m-zakres-pole[aria-checked="true"] {
    border-color: var(--montero-akcent);
    background: var(--montero-akcent);
    box-shadow: inset 0 0 0 3px var(--montero-panel);
}

.m-zakres-pole[aria-checked="mixed"] {
    border-color: var(--montero-akcent);
    background: linear-gradient(var(--montero-akcent), var(--montero-akcent)) center / 10px 2px no-repeat var(--montero-panel);
}

.m-zakres-pole:focus-visible,
.m-zakres-sala:focus-visible,
.m-zakres-otwor:focus-visible {
    outline: 2px solid var(--montero-akcent);
    outline-offset: 2px;
}

.m-zakres-pietro { padding-left: var(--montero-odstep-4); }

.m-zakres-sale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-2);
    padding: 0 0 var(--montero-odstep-3) 30px;
}

.m-zakres-sala-blok { display: flex; flex-direction: column; gap: var(--montero-odstep-1); }

.m-zakres-sala {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--montero-odstep-2);
    min-height: 40px;
    padding: 6px var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.m-zakres-sala.aktywny {
    border-color: var(--montero-akcent);
    background: var(--montero-tlo-akcent);
}

.m-zakres-otworow { font-size: 11px; color: var(--montero-tekst-slaby); }

.m-zakres-otwory summary {
    font-size: 12px;
    color: var(--montero-tekst-slaby);
    cursor: pointer;
}

.m-zakres-otwory-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-1);
    padding-top: var(--montero-odstep-1);
}

.m-zakres-otwor {
    min-width: 40px;
    min-height: 32px;
    padding: 2px var(--montero-odstep-2);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    font-size: 12px;
    cursor: pointer;
}

.m-zakres-otwor.aktywny {
    border-color: var(--montero-akcent);
    background: var(--montero-tlo-akcent);
}

/* Etap dla zakresu (B5): podgląd i lista pominiętych pogrupowana po powodzie. */
.m-podglad-etapu {
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
}

.m-pominiete {
    margin: 0;
    padding-left: var(--montero-odstep-4);
    display: grid;
    gap: var(--montero-odstep-2);
}

.m-pominiete li { display: grid; gap: 2px; }

.m-pominiete-powod { font-weight: 600; color: var(--montero-tekst); }

/* Odbiory i protokół (blok 2): baner po zapisie, wynik per okno, akcje plików. */
.m-baner-sukcesu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    margin-bottom: var(--montero-odstep-4);
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-ok);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
    color: var(--montero-tekst);
}

.m-lista-protokolu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--montero-odstep-3);
}

.m-pozycja-protokolu {
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
}

.m-wyniki-odbioru { flex-wrap: wrap; margin: var(--montero-odstep-2) 0; }

.m-wyniki-odbioru .m-chip-filtra { min-height: 36px; }

/* Usterka z rygorem to sygnał problemu — czerwień błędu, nie pomarańcz marki. */
.m-chip-filtra.rygor.aktywny {
    background: var(--montero-blad);
    border-color: var(--montero-blad);
}

.m-akcje-plikow { flex-wrap: wrap; }

.m-pusto-filtra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-3);
}

.m-kafelki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-2);
}

.m-kafelek {
    position: relative;
    width: 84px;
    min-height: 56px;
    padding: var(--montero-odstep-2);
    border: none;
    border-radius: var(--montero-promien-maly);
    color: var(--montero-tekst-na-akcencie);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.m-kafelek-kod { display: block; }

.m-kafelek-status {
    display: block;
    margin-top: var(--montero-odstep-1);
    font-size: 9px;
    font-weight: 400;
    opacity: 0.9;
}

/* Drugi wiersz okna w trakcie etapów („1 z 3") — mniejszy niż etap, na który okno czeka. */
.m-kafelek-postep {
    display: block;
    font-size: 9px;
    font-weight: 400;
    opacity: 0.85;
}

/* Czerwona kropka otwartych usterek — jak na kafelku w panelu. */
.m-kropka {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--montero-kropka-usterki);
    box-shadow: 0 0 0 2px var(--montero-panel);
}

.m-status-pusty { background: var(--montero-status-pusty); }
.m-status-zaplanowany { background: var(--montero-status-zaplanowany); }
.m-status-zamontowany { background: var(--montero-status-zamontowany); }
.m-status-odebrany { background: var(--montero-status-odebrany); }
.m-status-wtrakcie { background: var(--montero-status-wtrakcie); }

.m-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-3);
    margin-bottom: var(--montero-odstep-4);
}

.m-legenda span {
    display: inline-flex;
    align-items: center;
    gap: var(--montero-odstep-1);
    font-size: 11px;
    color: var(--montero-tekst-slaby);
}

.m-legenda i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Panel otworu — arkusz wysuwany od dołu
   ═══════════════════════════════════════════════════════════════ */

.m-zaslona {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--montero-zaslona);
    display: flex;
    align-items: flex-end;
}

.m-arkusz {
    width: 100%;
    /* Procent od zasłony (position: fixed, inset: 0), więc znów bez vh. */
    max-height: 88%;
    overflow-y: auto;
    background: var(--montero-panel);
    border-radius: var(--montero-promien) var(--montero-promien) 0 0;
    padding: var(--montero-odstep-5);
    padding-bottom: calc(var(--montero-odstep-5) + env(safe-area-inset-bottom, 0px));
}

.m-arkusz-naglowek {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
}

.m-zamknij {
    border: none;
    background: none;
    color: var(--montero-tekst-slaby);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: var(--montero-odstep-1);
}

.m-dane { margin: var(--montero-odstep-4) 0; }

.m-dane > div {
    display: flex;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    padding: var(--montero-odstep-2) 0;
    border-bottom: 1px solid var(--montero-linia);
    font-size: 13px;
}

.m-dane > div > span:first-child { color: var(--montero-tekst-slaby); }

.m-chip {
    display: inline-block;
    padding: 2px var(--montero-odstep-2);
    border-radius: 10px;
    color: var(--montero-tekst-na-akcencie);
    font-size: 11px;
}

.m-akcje {
    display: flex;
    flex-direction: column;
    gap: var(--montero-odstep-2);
    margin-top: var(--montero-odstep-4);
}

/* ═══════════════════════════════════════════════════════════════
   Listy: rozliczenia, wpisy, kalendarz, usterki
   ═══════════════════════════════════════════════════════════════ */

.m-pozycja {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-4);
}

.m-pozycja-gora {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
}

.m-pozycja-kwota { font-weight: 700; white-space: nowrap; }

.m-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-1) var(--montero-odstep-3);
    margin-top: var(--montero-odstep-2);
    font-size: 12px;
    color: var(--montero-tekst-slaby);
}

.m-faktura {
    margin-top: var(--montero-odstep-2);
    padding-top: var(--montero-odstep-2);
    border-top: 1px solid var(--montero-linia);
    font-size: 12px;
    color: var(--montero-tekst-slaby);
}

.m-sekcja { margin-top: var(--montero-odstep-6); }

/* Pierwsza sekcja startuje flushem — odstęp od nagłówka budowy daje już jego margines,
   a scroller celowo nie ma paddingu górnego. */
.m-sekcja:first-of-type { margin-top: 0; }

/* Sekcja „Dziś" pod kaflami pulpitu (U2) — oddech między liczbami a listą; MUSI stać za :first-of-type (ta sama waga),
   bo „Dziś" jest pierwszą sekcją strony i tamta reguła zerowałaby odstęp. */
.m-kafle-pulpitu + .m-sekcja { margin-top: var(--montero-odstep-6); }

.m-sekcja-naglowek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    margin-bottom: var(--montero-odstep-3);
}

/* Typ wydarzenia niesie kolor rodziny kalendarza — poza semantyką stanu. */
.m-pasek-typu {
    display: inline-block;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    margin-right: var(--montero-odstep-3);
}

.m-wydarzenie { display: flex; }
.m-wydarzenie-tresc { flex: 1; min-width: 0; }

.m-typ-montaz { background: var(--montero-wydarzenie-montaz); }
.m-typ-dostawa { background: var(--montero-wydarzenie-dostawa); }
.m-typ-odbior { background: var(--montero-wydarzenie-odbior); }
.m-typ-inne { background: var(--montero-wydarzenie-inne); }

.m-minelo { opacity: 0.6; }

.m-wpis-zatwierdzony { background: var(--montero-ok); }
.m-wpis-dozatwierdzenia { background: var(--montero-uwaga); }
.m-wpis-odrzucony { background: var(--montero-nieaktywny); }

.m-rozliczenie-zaplacone { background: var(--montero-ok); }
.m-rozliczenie-dozaplaty { background: var(--montero-uwaga); }

.m-usterka-zgloszona { background: var(--montero-blad); }
.m-usterka-wtrakcie { background: var(--montero-uwaga); }
.m-usterka-rozwiazana { background: var(--montero-ok); }
.m-usterka-odrzucona { background: var(--montero-nieaktywny); }

/* Informacja o naliczeniu po zmianie statusu — to nie jest błąd, więc nie czerwień. */
.m-informacja {
    margin-top: var(--montero-odstep-3);
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-uwaga);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    color: var(--montero-uwaga);
    font-size: 13px;
}

.m-formularz { margin-top: var(--montero-odstep-4); }

.m-select {
    width: 100%;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    font-size: 16px;
}

.m-obszar {
    width: 100%;
    min-height: 88px;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}

/* Karta budowy na „Moich budowach” jest od B2 klikalna — stąd stan dotyku.
   Brak wskaźnika hover na karcie nieklikalnej zniknął razem z powodem. */
a.m-karta-budowy {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.m-karta-budowy:hover { border-color: var(--montero-akcent); }
a.m-karta-budowy:active { background: var(--montero-hover); }

/* ═══════════════════════════════════════════════════════════════
   Etap 3: shelle kont zewnętrznych — oś statusów, karta otworu,
   załączniki. Wartości kolorów wyłącznie przez zmienne motywu.
   ═══════════════════════════════════════════════════════════════ */

/* Chip budowy zamkniętej: neutralny, NIE czerwony — zakończenie to stan, nie problem. */
.m-chip-zakonczona {
    background: var(--montero-nieaktywny);
    margin-top: var(--montero-odstep-2);
}

/* Skrót firmy budowy na liście („dwie firmy") — neutralny granat marki, bez znaczenia stanu. */
.m-chip-firma-budowy { background: var(--montero-granat); }

.m-meta-uwaga { color: var(--montero-blad); }

/* Oś statusów — etapy nieosiągnięte są wygaszone, nie ukryte: widać, gdzie otwór stoi. */
.m-os {
    list-style: none;
    margin: var(--montero-odstep-3) 0;
    padding: 0 0 0 var(--montero-odstep-4);
    border-left: 2px solid var(--montero-linia);
}

.m-os-etap {
    position: relative;
    padding: var(--montero-odstep-2) 0 var(--montero-odstep-2) var(--montero-odstep-3);
    opacity: 0.45;
}

.m-os-etap.osiagniety { opacity: 1; }

.m-os-znacznik {
    position: absolute;
    left: calc(-1 * var(--montero-odstep-4) - 5px);
    top: var(--montero-odstep-3);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--montero-tlo);
}

.m-os-tresc { display: flex; flex-direction: column; gap: 2px; }
.m-os-nazwa { font-size: 13px; font-weight: 600; }
.m-os-czas { font-size: 11px; color: var(--montero-tekst-slaby); }
.m-os-czeka { font-style: italic; }
.m-os-autor { font-size: 11px; color: var(--montero-tekst-slaby); }
.m-os-notatka { font-size: 12px; }

/* Karta otworu jako pełny ekran (a nie arkusz) — shelle zewnętrzne wchodzą w nią adresem. */
.m-karta-otworu {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-5);
}

.m-karta-otworu h3.m-tytul-sekcji { margin-top: var(--montero-odstep-5); }

.m-pozycja-klikalna { cursor: pointer; }
.m-pozycja-klikalna:hover { background: var(--montero-hover); }

.m-akcje-poziome {
    display: flex;
    gap: var(--montero-odstep-2);
    margin-bottom: var(--montero-odstep-3);
}

.m-akcje-poziome .m-przycisk { flex: 1 1 0; }

.m-zalacznik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    padding: var(--montero-odstep-2) var(--montero-odstep-3);
    margin-bottom: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    font-size: 12px;
}

/* Znacznik na osi usterki serwisowej — poza rodziną statusów otworu, bo to inny byt. */
.m-usterka-serwis { background: var(--montero-akcent); }

/* Kafelek bywa linkiem (shelle zewnętrzne) zamiast przyciskiem — ten sam wygląd. */
a.m-kafelek { text-decoration: none; }

/* ═══ Okno do otworu (od 1.10.6) ═══
   Pozycja zlecenia z PW (pogrubiona), wymiar, ile takich okien na budowie — na kafelku drobno, na karcie pod oznaczeniem. */
.m-okno-otworu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--montero-odstep-1);
}

.m-kafelek-okno {
    display: block;
    margin-top: var(--montero-odstep-1);
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.m-kafelek-okno > span { display: block; font-weight: 400; opacity: 0.9; }
.m-kafelek-okno .m-okno-pozycja { display: block; }
.m-okno-czeka { font-weight: 400; font-style: italic; }


/* ═══ Komplet przypiętych okien (od 1.8.1) ═══
   Otwór z robotą bez przypiętego okna — obwódka błędu na kafelku i znacznik „brak okna" (albo „okna 2/3"),
   żeby zaległość z siatki było widać z daleka. Kolory wyłącznie z tokenów błędu. */
.m-kafelek.m-kafelek-brak-okna {
    outline: 3px solid var(--montero-blad);
    outline-offset: 1px;
}

.m-kafelek-znacznik {
    display: block;
    margin-top: var(--montero-odstep-1);
    padding: 0 var(--montero-odstep-1);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-tlo-bledu);
    color: var(--montero-blad);
    font-size: 9px;
    font-weight: 600;
}

.m-brak-okna { font-weight: 600; }

/* Baner „N okien do zeskanowania" — przycisk na pełną szerokość, zawęża siatkę do zaległości. */
.m-baner-skanu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--montero-odstep-2);
    margin-bottom: var(--montero-odstep-3);
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-blad);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-tlo-bledu);
    color: var(--montero-blad);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.m-baner-skanu.wybrany {
    background: var(--montero-blad);
    color: var(--montero-tekst-na-akcencie);
}

.m-baner-akcja { white-space: nowrap; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Etap 4: shelle transportu i serwisu
   ═══════════════════════════════════════════════════════════════ */

/* Zrealizowana dostawa — zielony chip i wygaszona karta: zadanie zniknęło z listy „do zrobienia",
   ale zostaje widoczne, bo kierowca chce wiedzieć, co już odhaczył. */
.m-chip-ok { background: var(--montero-ok); }

.m-dostawa-zrobiona { opacity: 0.6; }

/* Zaległa: bursztyn, nie czerwień — „nikt tego nie potwierdził" to zadanie, nie awaria. */
.m-chip-zalegla { background: var(--montero-uwaga); }

.m-naglowek-zalegle { color: var(--montero-uwaga); }

.m-potwierdzenie {
    margin-top: var(--montero-odstep-3);
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-uwaga);
    border-radius: var(--montero-promien);
}

.m-potwierdzenie .m-akcje-poziome { margin-top: var(--montero-odstep-3); margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   Kalendarz mobilny — wspólny klocek shellów. Odpowiednik siatki
   miesiąca z panelu, ale zbudowany pod kciuk: dni są celami dotyku,
   a nie komórkami tabeli.
   ═══════════════════════════════════════════════════════════════ */

.m-pasek-podsumowania {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    padding-bottom: var(--montero-odstep-3);
    font-size: 13px;
}

.m-licznik-zaleglych {
    border: 1px solid var(--montero-uwaga);
    background: none;
    color: var(--montero-uwaga);
    border-radius: 12px;
    padding: 2px var(--montero-odstep-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.m-pasek-miesiaca {
    display: flex;
    align-items: center;
    gap: var(--montero-odstep-2);
    padding-bottom: var(--montero-odstep-3);
}

.m-nazwa-miesiaca {
    flex: 1 1 auto;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}

.m-strzalka {
    border: 1px solid var(--montero-obramowanie);
    background: var(--montero-panel);
    color: var(--montero-tekst);
    border-radius: var(--montero-promien);
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.m-strzalka:hover { background: var(--montero-hover); }

/* ═══════════════════════════════════════════════════════════════
   Widok miesiąca w układzie Google Calendar.

   WYSOKOŚĆ WIERSZY JEST STAŁA, NIGDY Z SZEROKOŚCI. Wersja z aspect-ratio rozdmuchiwała
   rzędy na szerokim oknie. Siatka i agenda leżą jedna pod drugą i przewija je dokument
   (patrz „jedno pionowe przewijanie" na górze pliku i „Pułapki layoutu" w docs/mobile.md).
   ═══════════════════════════════════════════════════════════════ */

.m-kalendarz { padding: 0 var(--montero-odstep-4); }

.m-kalendarz-gora {
    flex: 0 0 auto;
    padding-top: var(--montero-odstep-4);
}

.m-naglowki-dni {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    padding-bottom: 2px;
}

.m-naglowki-dni span {
    text-align: center;
    font-size: 9px;
    color: var(--montero-tekst-slaby);
}

.m-siatka-dni {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Telefon: 60 px — sześć tygodni i agenda pod nimi mieszczą się na jednym-dwóch ekranach. */
    grid-auto-rows: 60px;
    gap: 1px;
    padding-bottom: var(--montero-odstep-2);
}

.m-dzien {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    min-height: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--montero-promien-maly);
    background: none;
    padding: 2px 1px;
    text-align: left;
    cursor: pointer;
}

.m-dzien:hover { background: var(--montero-hover); }

/* Wybrany dzień to DELIKATNE tło, a nie wypełnienie akcentem. Poprzednia wersja malowała
   cały kafel pomarańczem marki, przez co dzień dzisiejszy (wybrany domyślnie) wyglądał jak
   jedno wielkie wydarzenie i zjadał kolory budów na belkach. */
.m-dzien.wybrany { background: var(--montero-tlo-akcent); }

.m-numer-dnia {
    align-self: center;
    font-size: 10px;
    line-height: 1;
    color: var(--montero-tekst-slaby);
    padding: 2px 0;
    flex: 0 0 auto;
}

/* Dni spoza miesiąca: wyszarzony NUMER, belki bez zmian — one nadal opisują realną robotę. */
.m-dzien.obcy .m-numer-dnia { color: var(--montero-nieaktywny); opacity: 0.6; }

/* Dziś: numer w kółku akcentu, jak w Google Calendar — zamiast ramki wokół całego kafla. */
.m-dzien.dzis .m-numer-dnia {
    background: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 600;
}

.m-belki {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    overflow: hidden;
}

/* Belka wydarzenia: przygaszone tło koloru budowy, mocny kolor na literach, jedna linia
   z elipsą. Kolor mówi CZYJE — nigdy „w jakim stanie" i nigdy akcentem marki. */
.m-belka {
    display: block;
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--montero-promien-maly);
    padding: 1px 3px;
    background: var(--montero-kolor-budowy-tlo, var(--montero-hover));
    color: var(--montero-kolor-budowy, var(--montero-tekst));
    font-size: 9px;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Zaległość siada na KRAWĘDZI belki, nie na jej kolorze — inaczej sygnał stanu skasowałby
   informację o budowie. Obwódka całego kafla zniknęła razem z tą zmianą. */
.m-belka.zalegla { border-left-color: var(--montero-uwaga); }

.m-belka-wiecej {
    border: none;
    background: none;
    color: var(--montero-tekst-slaby);
    font-size: 9px;
    line-height: 1.3;
    padding: 0 3px;
    text-align: left;
    cursor: pointer;
}

.m-belka-wiecej:hover { text-decoration: underline; }

/* Legenda kolorów budów widocznych w bieżącym miesiącu — zwijana, domyślnie zamknięta. */
.m-legenda-budow {
    font-size: 11px;
    color: var(--montero-tekst-slaby);
    padding-bottom: var(--montero-odstep-2);
}

.m-legenda-budow summary { cursor: pointer; }

.m-legenda-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--montero-odstep-1) var(--montero-odstep-3);
    padding-top: var(--montero-odstep-2);
}

.m-legenda-pozycja {
    display: inline-flex;
    align-items: center;
    gap: var(--montero-odstep-1);
}

/* Agenda: lista dnia pod siatką; przewija ją dokument razem z siatką. */
.m-agenda {
    flex: 0 0 auto;
    padding: var(--montero-odstep-2) 0 var(--montero-odstep-6);
}

/* Kotwica przewijania — fokusowana programowo, więc bez własnej obwódki fokusu. */
.m-agenda-pozycja:focus { outline: none; }
.m-agenda-pozycja:focus-visible { outline: 2px solid var(--montero-akcent); }

.m-lista-agendy { gap: var(--montero-odstep-2); }

/* Kafelki agendy mają ciaśniejszy padding niż na listach pełnoekranowych — pod siatką
   miesiąca liczy się, ile ich widać naraz, a nie ile powietrza jest wokół treści. */
.m-lista-agendy .m-pozycja { padding: var(--montero-odstep-3); }

/* Chipy filtra archiwum. */
.m-chipy-filtra {
    display: flex;
    gap: var(--montero-odstep-2);
    margin-bottom: var(--montero-odstep-4);
}

.m-chip-filtra {
    border: 1px solid var(--montero-obramowanie);
    background: var(--montero-panel);
    color: var(--montero-tekst-slaby);
    border-radius: 12px;
    padding: 4px var(--montero-odstep-3);
    font-size: 12px;
    cursor: pointer;
}

.m-chip-filtra.aktywny {
    background: var(--montero-akcent);
    border-color: var(--montero-akcent);
    color: var(--montero-tekst-na-akcencie);
}

/* Odmowa naprawy JEST złą wiadomością dla klienta — to jedyne miejsce, gdzie czerwień
   opisuje stan zgłoszenia, a nie awarię. */
.m-chip-odrzucone { background: var(--montero-blad); }

/* ═══════════════════════════════════════════════════════════════
   Paleta budów — jedna zmienna lokalna, wiele miejsc użycia.
   Klasa m-budowa-N ustawia --montero-kolor-budowy, a wszystkie
   paski i próbki czytają już tylko tę zmienną. Dzięki temu nowy
   element z paskiem nie wymaga dziesięciu reguł, tylko jednej.
   ═══════════════════════════════════════════════════════════════ */

.m-budowa-1  {
    --montero-kolor-budowy: var(--montero-budowa-1);
    --montero-kolor-budowy-tlo: var(--montero-budowa-1-tlo);
}
.m-budowa-2  {
    --montero-kolor-budowy: var(--montero-budowa-2);
    --montero-kolor-budowy-tlo: var(--montero-budowa-2-tlo);
}
.m-budowa-3  {
    --montero-kolor-budowy: var(--montero-budowa-3);
    --montero-kolor-budowy-tlo: var(--montero-budowa-3-tlo);
}
.m-budowa-4  {
    --montero-kolor-budowy: var(--montero-budowa-4);
    --montero-kolor-budowy-tlo: var(--montero-budowa-4-tlo);
}
.m-budowa-5  {
    --montero-kolor-budowy: var(--montero-budowa-5);
    --montero-kolor-budowy-tlo: var(--montero-budowa-5-tlo);
}
.m-budowa-6  {
    --montero-kolor-budowy: var(--montero-budowa-6);
    --montero-kolor-budowy-tlo: var(--montero-budowa-6-tlo);
}
.m-budowa-7  {
    --montero-kolor-budowy: var(--montero-budowa-7);
    --montero-kolor-budowy-tlo: var(--montero-budowa-7-tlo);
}
.m-budowa-8  {
    --montero-kolor-budowy: var(--montero-budowa-8);
    --montero-kolor-budowy-tlo: var(--montero-budowa-8-tlo);
}
.m-budowa-9  {
    --montero-kolor-budowy: var(--montero-budowa-9);
    --montero-kolor-budowy-tlo: var(--montero-budowa-9-tlo);
}
.m-budowa-10 {
    --montero-kolor-budowy: var(--montero-budowa-10);
    --montero-kolor-budowy-tlo: var(--montero-budowa-10-tlo);
}

/* Cienki pasek tożsamości z lewej krawędzi kafelka — wspólny dla kafelków dostaw,
   zgłoszeń i list budów. Kolor NIGDY nie wypełnia kafelka: to podpowiedź dla oka,
   a nie sygnał stanu, i nie ma konkurować ze statusem po prawej stronie. */
.m-pasek-budowy {
    border-left: 3px solid var(--montero-kolor-budowy, transparent);
}

/* Próbka koloru w legendzie kalendarza. */
.m-probka-budowy {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--montero-kolor-budowy, var(--montero-nieaktywny));
    flex: 0 0 auto;
}

/* Chipy biegu usterki serwisowej — patrz komentarz przy rodzinie --montero-serwis-* w motywie. */
.m-serwis-zgloszona { background: var(--montero-serwis-zgloszona); }
.m-serwis-przyjeta { background: var(--montero-serwis-przyjeta); }
.m-serwis-zaplanowana { background: var(--montero-serwis-zaplanowana); }
.m-serwis-naprawiona { background: var(--montero-serwis-naprawiona); }
.m-serwis-odrzucona { background: var(--montero-serwis-odrzucona); }
.m-serwis-brak { background: var(--montero-nieaktywny); }

/* Termin naprawy, który minął — bursztyn jak każda zaległość, nigdy czerwień:
   niewykonana naprawa to zadanie, a nie awaria. */
.m-meta-zalegle { color: var(--montero-uwaga); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   Shell koordynatora: pulpit, zaznaczanie w kolejce decyzji
   ═══════════════════════════════════════════════════════════════ */

.m-kafle-pulpitu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--montero-odstep-3);
    margin-top: var(--montero-odstep-4);
}

.m-kafel-pulpitu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--montero-odstep-1);
    padding: var(--montero-odstep-4);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
    text-align: left;
    cursor: pointer;
}

/* Kafel z zerem jest wygaszony: „nic nie czeka" ma wyglądać jak spokój, a nie jak zadanie. */
.m-kafel-pulpitu { opacity: 0.55; }
.m-kafel-pulpitu.aktywny { opacity: 1; background: var(--montero-tlo-akcent); }
/* R2: kafelek, który jest jedynym wejściem do listy (zapotrzebowania u biura), przy zerze nie gaśnie. */
.m-kafel-pulpitu.m-kafel-wejscie { opacity: 1; }
/* S5: zgłoszenia zapotrzebowania u biura — osobny blok nad kolejkami, z obramowaniem w kolorze akcentu. */
.m-zapotrzebowania-biura { margin-bottom: var(--montero-odstep-4); }
.m-zapotrzebowania-biura .m-kafel-pulpitu { border-color: var(--montero-akcent); }

.m-kafel-liczba {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--montero-granat);
}

.m-kafel-pulpitu.aktywny .m-kafel-liczba { color: var(--montero-akcent-hover); }

.m-kafel-podpis { font-size: 11px; color: var(--montero-tekst-slaby); }

/* Pozycja zaznaczona w kolejce decyzji — akcent na krawędzi, bez zmiany paska budowy. */
.m-pozycja.zaznaczona {
    box-shadow: inset 0 0 0 2px var(--montero-akcent);
    background: var(--montero-tlo-akcent);
}

.m-pasek-zaznaczenia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    margin: var(--montero-odstep-3) 0;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-akcent);
    border-radius: var(--montero-promien);
    font-size: 13px;
}

.m-pasek-zaznaczenia .m-akcje-poziome { margin-bottom: 0; }

/* Rola pracownika na liście ekipy — neutralna, to opis, nie stan. */
.m-chip-rola { background: var(--montero-nieaktywny); }

/* Kafle KPI finansowych — mobilny odpowiednik KartaKpi z panelu: podpis, wartość, dopisek.
   Widoczne wyłącznie dla konta z FinanseMobilne; telefon jest do patrzenia, nie do księgowania. */
.m-kafle-kpi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--montero-odstep-2);
    margin: var(--montero-odstep-3) 0;
}

.m-kafel-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--montero-odstep-3);
    border-radius: var(--montero-promien);
    background: var(--montero-tlo-akcent);
}

.m-kafel-kpi .m-wartosc-kpi { font-size: 16px; }

.m-naglowek-finansow { margin-top: var(--montero-odstep-5); }

/* ═══ Karta okna (KartaOkna) — rdzeń wspólny karty publicznej i kart w powłokach ═══ */

/* Rzut techniczny: obraz na pełną szerokość karty, w ramce jak dokument. */
.m-rzut {
    margin: var(--montero-odstep-3) 0;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
    text-align: center;
}

.m-rzut img {
    max-width: 100%;
    height: auto;
}

/* Dokument do pobrania — pozycja listy, która jest LINKIEM (nowa karta przeglądarki). */
.m-dokument {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--montero-odstep-3);
    color: var(--montero-tekst);
    text-decoration: none;
}

.m-dokument:hover { background: var(--montero-hover); }

.m-dokument-nazwa { font-weight: 600; }

.m-dokument-typ {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--montero-tekst-slaby);
}

.m-instrukcja {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--montero-tekst);
}

.m-brak-etykiety { margin-top: var(--montero-odstep-3); }

/* ═══ Oznakowanie CE (KartaOkna) — znak obok czterech danych, w ramce jak etykieta ═══ */

.m-ce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-4);
    margin: var(--montero-odstep-3) 0;
    padding: var(--montero-odstep-3) var(--montero-odstep-4);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    background: var(--montero-panel);
}

/* Znak rysowany currentColor — bierze kolor tekstu, więc nie ma tu żadnego literału. */
.m-znak-ce { flex: 0 0 auto; color: var(--montero-tekst); }

.m-ce-dane { flex: 1 1 12rem; min-width: 0; margin: 0; }

.m-ce-dane > div:last-child { border-bottom: none; }

/* ═══ Karta publiczna (/q/{token}) — strona bez sesji i bez nawigacji ═══ */

.m-karta-publiczna { max-width: 640px; margin: 0 auto; }

/*
    Nagłówek karty publicznej niesie WŁASNE tło w kolorze powłoki. Klasy znaku
    (.m-logowanie-nazwa, .m-logowanie-podpis) są pisane pod ekran logowania, gdzie tłem jest
    cała strona w kolorze powłoki — na jasnym tle karty biała nazwa po prostu znikała.
    Pas z własnym tłem jest czytelny niezależnie od tła strony, tak samo jak nagłówek
    zalogowanych powłok (.m-naglowek).
*/
.m-karta-publiczna-znak {
    margin-bottom: var(--montero-odstep-4);
    padding: var(--montero-odstep-3) var(--montero-odstep-4);
    border-radius: var(--montero-promien);
    background: var(--montero-powloka);
}

.m-karta-publiczna .m-panel + .m-panel { margin-top: var(--montero-odstep-4); }

/* Przełącznik języka karty publicznej (od 1.8): zwykłe linki, bo karta jest statyczna; bieżący język wyróżniony. */
.m-jezyk-linki { margin-left: auto; display: flex; gap: var(--montero-odstep-1); }
.m-jezyk-linki a {
    padding: var(--montero-odstep-1) var(--montero-odstep-2);
    border-radius: var(--montero-promien-maly);
    color: var(--montero-tekst-powloki);
    font-size: 13px;
    text-decoration: none;
}
.m-jezyk-linki a.aktywny { background: var(--montero-akcent); color: var(--montero-tekst-na-akcencie); }

/* ═══════════════════════════════════════════════════════════════
   Potwierdzenie akcji w treści ekranu (PotwierdzenieAkcji) — zamiast window.confirm.
   Ramka w kolorze „uwaga": akcja jest odwracalna, ale wycofuje naliczenie, więc ma zatrzymać wzrok.
   ═══════════════════════════════════════════════════════════════ */
.m-potwierdzenie {
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-uwaga);
    border-radius: var(--montero-promien-maly);
    background: var(--montero-panel);
}

.m-potwierdzenie p { margin: 0 0 var(--montero-odstep-3); }

.m-potwierdzenie-przyciski {
    display: flex;
    gap: var(--montero-odstep-2);
}

/* Szerszy ekran: więcej miejsca na belki wydarzeń w kaflu dnia. */
@media (min-width: 768px) {
    .m-siatka-dni { grid-auto-rows: 88px; }
}

/* ═══ Powiadomienia push (od 1.11) — pasek pod nagłówkiem powłoki terenowej i arkusz ustawień ═══ */
.m-pasek-push {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--montero-odstep-2) var(--montero-odstep-3);
    margin: var(--montero-odstep-3) var(--montero-odstep-4) 0;
    padding: var(--montero-odstep-3);
    border: 1px solid var(--montero-akcent);
    border-radius: var(--montero-promien);
    background: var(--montero-tlo-akcent);
    color: var(--montero-tekst);
    font-size: 14px;
}

.m-pasek-push-tekst { flex: 1 1 200px; }
.m-pasek-push .m-przycisk { flex: 0 0 auto; width: auto; }

.m-ustawienie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--montero-odstep-3);
    padding: var(--montero-odstep-3) 0;
    border-bottom: 1px solid var(--montero-linia);
}

.m-ustawienie input[type="checkbox"] { width: 22px; height: 22px; }