/* ============================================================================
   PASEK NA TELEFONIE (UX-7, 22.10.2026 — 4z179 a) — razem z js/core/pasek-telefonu.js; na końcu szybkie poprawki (karta C)
   ============================================================================
   Ładowany w index.html zaraz przed js/journal/dziennik-widok.css (ten zostaje ostatnim arkuszem — tests/dziennik-widok.test.js [7b]),
   po chat-style.css i teacher-notes.css (tamte pliki mają ponad 1000 linii — poprawki Poczty i Notatek stoją tutaj i wygrywają kolejnością).
   Reguły paska działają tylko z klasą pt-wlaczony na body, którą zakłada moduł (telefon z menu z kafelkami, ten arkusz wczytany) — bez
   modułu albo bez tego arkusza pasek jak przed UX-7. Wariant B (decyzja właściciela 22.10): sam złoty „← Menu”, w Dzienniku obok
   klasa i przedmiot; nazwa ekranu tylko dla czytnika ekranu (Poczta ma nagłówek „Wiadomości”, Dziennik „Klasa X · Przedmiot”).
   !important: przyciski paska mają style w atrybutach (index.html, firebase-logic.js), a style.css (poziomo) wymusza wysokość paska
   z !important. Żadnej reguły display na samym .top-nav — pokazuje go i chowa showPage (ui-logic.js).
   env(safe-area-inset-top): strona z ekranu początkowego iPhone'a sięga pod pasek stanu; w zwykłej przeglądarce 0.
   Test: tests/ux7-pasek.test.js; plan: _DOCS/SESJA_UX7.md. */

/* Znacznik wersji: moduł włącza się tylko przy tym arkuszu (stara kopia z CDN tuż po wgraniu = pasek jak dziś) */
body { --pasek-telefonu: 1; }

body.pt-wlaczony .top-nav {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 4px 8px !important;
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    background: #1a1a2e !important;
    border-bottom: 1px solid rgba(225, 177, 44, 0.4) !important;
    overflow: visible !important;
}

/* Przyciski menu (są kafelkami), „Pełny ekran” (decyzja 3), „Moje konto” i „Wyloguj” (stopka menu), wybór dziecka (bez wpływu na Pocztę) */
body.pt-wlaczony .top-nav > .nav-group,
body.pt-wlaczony .top-nav > #studentSelectContainer,
body.pt-wlaczony .top-nav > #btn-fullscreen,
body.pt-wlaczony .top-nav > #btn-account,
body.pt-wlaczony .top-nav > #logout-btn {
    display: none !important;
}

body.pt-wlaczony .top-nav > .pt-menu {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px !important;
    border: 0;
    border-radius: 12px;
    background: #e1b12c;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
body.pt-wlaczony .top-nav > .pt-menu:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* Nazwa ekranu tylko dla czytnika ekranu */
body.pt-wlaczony .top-nav > .pt-nazwa {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Dziennik: klasa i przedmiot obok „← Menu”; na bardzo wąskim ekranie przedmiot spada do drugiego rzędu (flex-wrap) */
body.pt-wlaczony .top-nav > #classSelectContainer { flex: 0 0 auto; gap: 0 !important; }
body.pt-wlaczony .top-nav > #subjectSelectContainer { flex: 1 1 112px; min-width: 112px; gap: 0 !important; }
body.pt-wlaczony .top-nav select {
    height: 44px !important;
    margin: 0;
    padding: 0 24px 0 8px !important;
    border: 0;
    border-radius: 10px;
    background-color: #ffffff;
    color: #1a1a2e;
    font-size: 16px !important;
    font-weight: 700;
}
body.pt-wlaczony .top-nav > #subjectSelectContainer select { width: 100%; }
/* Poziomo: przedmiot nie rozciąga się na cały ekran */
@media (max-height: 500px) {
    body.pt-wlaczony .top-nav > #subjectSelectContainer { flex: 0 1 240px; }
}

/* ============================================================================
   SZYBKIE POPRAWKI (UX-7, karta C z przeglądu strony na telefonie 22.10)
   ============================================================================ */

/* 4z179 i — Notatki ze szkoły: kategoria dziedziczyła jasny kolor tekstu strony (#ecf0f1 na #f0f0f0) — napis niewidoczny, także na komputerze */
#pn-overlay .pn-note-cat { color: #2c3e50; }

/* Notatki ze szkoły na telefonie: „← Menu” jak w pasku (napis ustawia js/parent/parent-notes.js), pasek Notatek pod paskiem stanu iPhone'a */
body.pt-wlaczony #pn-overlay .pn-overlay-topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
body.pt-wlaczony #pn-overlay .pn-overlay-back {
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #e1b12c;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
body.pt-wlaczony #pn-overlay .pn-overlay-back:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* 4z179 m — Poczta na telefonie: „Nowa rozmowa”, „Nowy pokój”, „Wróć” i zakładki ≥ 44 px; ikony przy dymkach ≥ 24×24 (WCAG 2.2 AA)
   bez rozpychania krótkich wiadomości (do 4 ikon jedna nad drugą obok dymka) */
body.pt-wlaczony .chat-new-btn,
body.pt-wlaczony .chat-back-btn,
body.pt-wlaczony .chat-tab { min-height: 44px; }
body.pt-wlaczony .chat-reply-btn { min-width: 32px; min-height: 28px; }

/* 4z179 n — logowanie na niskim ekranie: treść da się przewinąć do „WEJDŹ” (bez klasy na body — działa przed zalogowaniem;
   gdy wszystko się mieści, nic nie widać); mniejsze logo i odstępy tylko na telefonie — laptop z niskim oknem bez zmian */
@media (max-height: 700px) {
    #login-screen { overflow-y: auto; }
}
@media (max-height: 700px) and (max-width: 768px) {
    #login-screen { padding-top: 16px; padding-bottom: 16px; }
    #login-screen .login-main-title { margin-bottom: 12px; }
    #login-screen .login-content-wrapper { gap: 16px; }
    #login-screen .login-logo { max-width: 110px; max-height: 110px; }
    #login-screen .login-box { padding: 20px; }
    #login-screen .login-school-info { margin-top: 12px; }
}