/*
    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; }

/* Korzeń Blazora — bez tego łańcuch wysokości urywa się tuż nad powłoką. */
#app { height: 100%; }

/*
    Łańcuch wysokości html → body → #app → .m-powloka. Świadomie 100%, a NIE 100vh:
    w BlazorWebView jednostki vh rozwiązują się względem initial containing block, który
    po zmianie rozmiaru okna potrafi zostać przy poprzedniej wysokości. Dokument robił się
    wtedy wyższy od okna, dolny pasek lądował pod jego krawędzią i wracał dopiero po
    zmaksymalizowaniu. Procent liczy się od realnego pudełka rodzica przy każdym przeliczeniu
    układu, więc ten sam błąd nie ma jak wrócić.

    ANDROID (etap późniejszy): tam właściwą jednostką byłoby 100dvh, bo pasek adresu chowa
    się i pokazuje w trakcie przewijania. Na Windows dvh niczego nie zmienia, więc nie
    komplikujemy — ale przy dokładaniu TFM-u androidowego to jest miejsce do sprawdzenia.

    overflow: hidden na dokumencie jest częścią kontraktu: przewija się WYŁĄCZNIE obszar
    treści, nigdy cała strona. Inaczej powłoka i pasek dałyby się „wyscrollować" za krawędź.
*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    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;
    height: 100%;
    min-height: 0;
}

.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);
    /* Nagłówek stoi POZA obszarem przewijania, więc sticky jest już niepotrzebne —
       nic pod nim nie przesuwa całej strony. */
    flex: 0 0 auto;
    z-index: 10;
}

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

.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 dołem okna. Sam NIE przewija i nie ma paddingu — jest tylko
    ramą o znanej wysokości. Przewijanie i marginesy należą do ekranu w środku: strona bez
    własnej ramy bierze .m-przewijane, a ekran budowy .m-ramka z paskiem poza scrollerem.
    min-height: 0 jest obowiązkowe — bez niego element flex nie kurczy się poniżej treści
    i scroller w środku nigdy nie dostanie ograniczenia.
*/
.m-tresc {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scroller ekranów bez własnej ramy (Moje budowy, komunikat „nie ma takiego ekranu"). */
.m-przewijane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--montero-odstep-6) var(--montero-odstep-4);
}

/* Pas błędu siedzi nad treścią, poza scrollerem — ma być widoczny niezależnie od przewinięcia. */
.m-pas-bledu {
    flex: 0 0 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;
}

.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); }

/* ═══ 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);
}

/* ═══ Ekran logowania ═══
   Pełna wysokość z łańcucha procentów, nie z vh — powód jak przy html/body wyżej. */
.m-logowanie {
    height: 100%;
    overflow-y: auto;
    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; }

.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: kolumna wypełniająca .m-tresc. Nagłówek budowy i dolny pasek są sztywne,
    przewija się wyłącznie środek. Dzięki temu pasek nie potrzebuje position: fixed ani
    rezerwy w postaci padding-bottom — jest zwykłym elementem układu i fizycznie nie ma
    jak wyjść poza krawędź okna.
*/
.m-ramka {
    flex: 1 1 auto;
    min-height: 0;
    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: 1 1 auto;
    min-height: 0;
    overflow-y: 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.

   ŚWIADOMIE bez position: fixed — pasek jest ostatnim wierszem kolumny .m-ramka,
   więc trzyma się dolnej krawędzi okna z samego układu, a nie z pozycjonowania
   względem viewportu (to ono zawodziło przy niezmaksymalizowanym oknie). */
.m-nawigacja {
    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); }

.m-pietro-nazwa {
    margin: 0 0 var(--montero-odstep-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--montero-tekst-slaby);
}

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

.m-pomieszczenie-nazwa {
    margin: 0 0 var(--montero-odstep-2);
    font-size: 11px;
    color: var(--montero-nieaktywny);
}

.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;
}

/* 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-dozrobienia { background: var(--montero-status-dozrobienia); }
.m-status-wtrakcie { background: var(--montero-status-wtrakcie); }
.m-status-zamontowane { background: var(--montero-status-zamontowane); }
.m-status-gotowedoodbioru { background: var(--montero-status-gotowedoodbioru); }
.m-status-odebrane { background: var(--montero-status-odebrane); }
.m-status-dopoprawki { background: var(--montero-status-dopoprawki); }

.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 egzemplarza — 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; }

.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 egzemplarza,
   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);
}

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

/* Oś statusów — etapy nieosiągnięte są wygaszone, nie ukryte: widać, gdzie sztuka 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 egzemplarza jako pełny ekran (a nie arkusz) — shelle zewnętrzne wchodzą w nią adresem. */
.m-karta-egzemplarza {
    background: var(--montero-panel);
    border: 1px solid var(--montero-obramowanie);
    border-radius: var(--montero-promien);
    padding: var(--montero-odstep-5);
}

.m-karta-egzemplarza 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 egzemplarza, 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; }

/* ═══════════════════════════════════════════════════════════════
   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ŚĆ SIATKI WYNIKA Z KOLUMNY, NIGDY Z SZEROKOŚCI. Poprzednia wersja
   ustawiała kaflowi aspect-ratio, przez co na szerokim oknie rzędy rosły razem
   z szerokością kolumny i miesiąc uciekał poza ekran. Teraz kalendarz jest
   kolumną flex: góra i legenda są sztywne, a siatka i agenda dzielą resztę —
   rzędy siatki są równe (grid-auto-rows: minmax(0, 1fr)) i kurczą się razem
   z oknem. Bez vh i bez position: fixed — patrz „Pułapki layoutu" w CLAUDE.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: 1 1 0;
    /* min-height: 0 pozwala kolumnie ścisnąć siatkę poniżej jej treści; max-height liczy się
       od wysokości kalendarza (łańcuch procentów jest domknięty), więc agenda zawsze dostaje
       przynajmniej połowę ekranu. */
    min-height: 0;
    max-height: 52%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    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: elastyczne dziecko kolumny kalendarza i JEDYNY obszar przewijany na tym ekranie.
   Zbite marginesy, żeby pod siatką mieściły się 3–4 kafelki. */
.m-agenda {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: 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); }

.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); }