/* ============================================================================
   DZIENNIK NAUCZYCIELA — WIDOK KLASY (etap E1, czesc B — 06.10.2026)
   Projekt: _DOCS/SESJA_DZIENNIK_PROJEKT.md (§3, §11), makieta wariant A
   (_DOCS/makiety/dziennik-2026-10-04/Main.dc.html, Telefon.dc.html, Okna.dc.html).
   ----------------------------------------------------------------------------
   Zasady pliku:
   - tylko klasy dz-* oraz klasy kontraktu ocen (grade-buttons-grid, grade-pill,
     pill-*, active) i motywu (theme-*) — zawsze pod korzeniem .dz-dziennik
     (widok ucznia, Komnata i Raport uzywaja tych samych klas ocen i NIE moga
     sie zmienic);
   - karty materialow (.dz-karta*, .dz-przycisk) dzialaja tez bez korzenia
     (sesja 5: tablica.html);
   - okna sa w body pod .dz-okno-tlo (poza #app-container);
   - style.css nie rosnie (decyzja wlasciciela 05.10.2026); pierwszy
     @media (max-height: 500px) w style.css zostaje nietkniety (test 4z65).
   Linkowany w index.html po wszystkich arkuszach (wygrywa kolejnoscia).
   ============================================================================ */

/* --- 1. akcent przedmiotu (motywy jak w style.css: theme-red/purple/blue/green) ---
   --dz-akcent        linie, podkreslenia, ramka zaznaczonej lekcji
   --dz-akcent-tekst  naglowki, daty, aktywna zakladka (kontrast >= 9:1 na bialym)
   --dz-akcent-mocny  tlo przycisku „Zapisz” pod bialym tekstem (czerwony motyw: bordo,
                      zeby „Zapisz” nie wygladal jak „Usuń”)
   --dz-akcent-jasny  tlo zaznaczonego wiersza listy
   --dz-akcent-linia  delikatne ramki paneli */
.dz-dziennik, .dz-okno-tlo {
    --dz-akcent: #27ae60;
    --dz-akcent-tekst: #145a32;
    --dz-akcent-mocny: #1e8449;
    --dz-akcent-jasny: #eefaf2;
    --dz-akcent-linia: #b9d7c4;
}
.dz-dziennik.theme-blue, .dz-okno-tlo.theme-blue {
    --dz-akcent: #2980b9;
    --dz-akcent-tekst: #154360;
    --dz-akcent-mocny: #1f618d;
    --dz-akcent-jasny: #ebf3fa;
    --dz-akcent-linia: #b5d3ea;
}
.dz-dziennik.theme-red, .dz-okno-tlo.theme-red {
    --dz-akcent: #c0392b;
    --dz-akcent-tekst: #7b241c;
    --dz-akcent-mocny: #7b241c;
    --dz-akcent-jasny: #fcefed;
    --dz-akcent-linia: #e8b9b2;
}
.dz-dziennik.theme-purple, .dz-okno-tlo.theme-purple {
    --dz-akcent: #8e44ad;
    --dz-akcent-tekst: #4a235a;
    --dz-akcent-mocny: #7d3c98;
    --dz-akcent-jasny: #f6effa;
    --dz-akcent-linia: #d7c2e3;
}

/* --- 2. korzen (body ma jasny tekst #ecf0f1 — tu jawnie ciemny) --- */
.dz-dziennik {
    color: #2c3e50;
    background: #f5f5f5;
    font-size: 15px;
    line-height: 1.4;
}
.dz-dziennik [hidden], .dz-okno-tlo [hidden] { display: none !important; }
/* :where() — reset ma specyficznosc (0,0,1), wiec nie przebija regul z jedna klasa (kolory przyciskow, stare panele) */
:where(.dz-dziennik) button, :where(.dz-okno-tlo) button { font: inherit; color: inherit; cursor: pointer; }
.dz-dziennik button:disabled, .dz-okno-tlo button:disabled { cursor: default; opacity: 0.45; }
/* zawijanie dlugich slow tylko na elementach tekstu (nie na panelach — stare tabele w .dz-przewin) */
.dz-tekst, .dz-wl-temat, .dz-temat, .dz-dzial-nazwa, .dz-karta-tytul, .dz-pojecie-tekst, .dz-imie, .dz-opis-lekcji {
    overflow-wrap: anywhere;
}
.dz-przewin { overflow-x: auto; max-width: 100%; overflow-wrap: normal; }

/* --- 3. przyciski ogolne (tez na kartach materialow poza dziennikiem) --- */
.dz-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #cfd8de;
    border-radius: 8px;
    background: #fff;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.dz-przycisk.dz-maly { min-height: 30px; padding: 0 10px; border-radius: 6px; font-size: 13px; }
.dz-przycisk.dz-usun, .dz-przycisk.dz-przycisk-usun { border-color: #f0b5ad; color: #a93226; }
.dz-przycisk.dz-przycisk-link { border-color: #a9cce3; color: #1f618d; }
/* UX-1 R5: „Jak zobaczy uczeń” przy lekcji (dziennik-klasa.js linkPodgladu) — makieta Kadra.dc.html */
.dz-przycisk.dz-podglad-ucznia { border-color: #2f5ea8; background: #2f5ea8; color: #fff; }
.dz-przycisk.dz-glowny { background: var(--dz-akcent-mocny, #1e8449); border-color: var(--dz-akcent-mocny, #1e8449); color: #fff; font-weight: 700; }
.dz-przycisk.dz-glowny:disabled { background: #9aa7b1; border-color: #9aa7b1; opacity: 1; }
.dz-przycisk.dz-ciemny { background: #1b2a38; border-color: #1b2a38; color: #fff; }
.dz-blad { color: #a93226; font-size: 13px; font-weight: 600; }

/* --- 4. pasek przedmiotu, zakladki dzialow, naglowek dzialu --- */
.dz-pasek-przedmiotu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #dfe6ea;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.dz-tytul-przedmiotu { margin: 0; font-size: 20px; font-weight: 700; color: #1b2a38; }
.dz-lektura { margin-bottom: 12px; max-width: 100%; overflow-x: auto; }
/* E2 część B: karta lektury (polski) — tytuł i termin, „Zmień” / „Usuń”; wpisywanie w oknie #dz-okno-lektury */
.dz-lektura-karta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #a9dfbf;
    border-left: 5px solid #27ae60;
    border-radius: 10px;
    background: #fff;
    color: #2c3e50;
}
.dz-lektura-opis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.dz-lektura-etykieta { font-weight: 800; color: #1e8449; }
.dz-lektura-tytul { font-size: 16px; color: #1b2a38; overflow-wrap: anywhere; }
.dz-lektura-termin { font-size: 14px; color: #2c3e50; }
.dz-lektura-meta, .dz-lektura-brak { font-size: 13px; color: #5f6b76; }
.dz-lektura-blad { font-size: 13px; font-weight: 700; color: #a93226; }
.dz-lektura-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-dzialy {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 2px solid var(--dz-akcent-linia, #cfd8de);
    margin-top: 4px;
}
.dz-dzial-zakladka {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    margin-bottom: -2px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #34495e;
    font-size: 15px;
    white-space: nowrap;
    max-width: 22em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dz-dzial-zakladka.dz-aktywna {
    background: #fff;
    border-color: var(--dz-akcent-linia, #cfd8de);
    border-bottom: 3px solid var(--dz-akcent, #27ae60);
    color: var(--dz-akcent-tekst, #145a32);
    font-weight: 700;
}
.dz-dodaj-dzial {
    flex: 0 0 auto;
    min-height: 40px;
    margin: 0 0 4px 4px;
    padding: 8px 14px;
    border: 1px dashed var(--dz-akcent, #27ae60);
    border-radius: 8px;
    background: transparent;
    color: var(--dz-akcent-tekst, #145a32);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.dz-dzial {
    background: #fff;
    border: 1px solid var(--dz-akcent-linia, #cfd8de);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 16px 18px 22px;
}
.dz-dzialy-pusto {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dfe6ea;
    color: #455a64;
}
/* klasa bez uczniow (A3): pelny dziennik dla prawdziwego admina */
.dz-pasek-pustej-klasy {
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #f0d9b5;
    border-radius: 10px;
    background: #fff8e1;
    color: #2c3e50;
    font-weight: 700;
}
.dz-dzial-naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dz-dzial-nazwa { margin: 0; font-size: 24px; font-weight: 700; color: var(--dz-akcent-tekst, #145a32); min-width: 0; }
/* menu „Ustawienia działu ▾” — panel w przeplywie strony (nic go nie przycina) */
.dz-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    background: #f6f8f9;
    border: 1px solid #dfe6ea;
    border-radius: 10px;
}
.dz-uszkodzony {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdecea;
    border: 1px solid #f0b5ad;
    color: #7b241c;
    font-weight: 600;
}

/* --- 5. zakladki dzialu (Lekcje / Sprawdź się / Podsumowanie; GB-Z 26.10.2026: bez Final Bossa) --- */
.dz-zakladki {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
    padding: 4px;
    background: #eef2f4;
    border-radius: 10px;
}
.dz-zakladki.dz-zakladki-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-zakladki.dz-zakladki-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-zakladka {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 600;
}
.dz-zakladka.dz-aktywna { background: var(--dz-akcent-tekst, #145a32); color: #fff; font-weight: 700; }
.dz-kr { display: none; }
.dz-panel { display: none; margin-top: 16px; }
.dz-panel.dz-aktywny { display: block; }

/* --- 6. lekcje: lista + jedna otwarta (wariant A) --- */
.dz-uklad-lekcji { display: block; }
.dz-lista { display: flex; flex-direction: column; gap: 8px; }
.dz-lekcje { min-width: 0; }
.dz-nowa-lekcja {
    width: 100%;
    min-height: 44px;
    border: 2px dashed var(--dz-akcent, #27ae60);
    border-radius: 10px;
    background: #fff;
    color: var(--dz-akcent-tekst, #145a32);
    font-size: 15px;
    font-weight: 700;
}
.dz-pusto {
    padding: 14px 16px;
    border-radius: 10px;
    background: #f6f8f9;
    color: #455a64;
    font-size: 15px;
}
.dz-wiersz-listy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid #d5dde3;
    border-radius: 10px;
    background: #fff;
    color: #2c3e50;
    font-size: 14px;
}
.dz-wiersz-listy.dz-zaznaczona {
    border-color: var(--dz-akcent, #27ae60);
    border-left: 6px solid var(--dz-akcent, #27ae60);
    background: var(--dz-akcent-jasny, #eefaf2);
}
.dz-wl-gora { display: flex; align-items: center; gap: 8px; }
.dz-wl-data { font-weight: 700; color: var(--dz-akcent-tekst, #145a32); white-space: nowrap; }
.dz-wl-temat { color: #1b2a38; line-height: 1.35; }
.dz-etykiety { display: flex; flex-wrap: wrap; gap: 4px; }
.dz-etykieta { padding: 2px 6px; border-radius: 6px; background: #eceff1; color: #37474f; font-size: 11px; font-weight: 600; }
/* licznik „5/8”: kolor z atrybutu data-kolor (licznik na zywo nie zmienia klas) */
.dz-licznik {
    display: inline-block;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eceff1;
    color: #455a64;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.dz-licznik[data-kolor="czesc"] { background: #fff3cd; color: #7a5a00; }
.dz-licznik[data-kolor="wszyscy"] { background: #d5f5e3; color: #145a32; }

/* otwarta lekcja: rozmiar wiersza ocen liczony od SZEROKOSCI LEKCJI (container),
   nie okna — lista obok zabiera miejsce */
.dz-lekcja {
    display: none;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--dz-akcent-linia, #cfd8de);
    border-top: 5px solid var(--dz-akcent, #27ae60);
    border-radius: 14px;
    container: dzlekcja / inline-size;
}
.dz-lekcja.dz-otwarta { display: flex; }
.dz-pasek-telefonu { display: flex; align-items: center; gap: 6px; }
.dz-odstep { flex: 1 1 auto; }
.dz-strzalka { min-width: 44px; font-size: 18px; }
.dz-lekcja-naglowek { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dz-lekcja-tytul { flex: 1 1 320px; min-width: 0; }
.dz-temat { margin: 0; font-size: 24px; line-height: 1.25; color: #1b2a38; }
.dz-opis-lekcji { margin-top: 4px; font-size: 14px; color: #5f6b76; }
.dz-lekcja-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-dodaj { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #f6f8f9; border-radius: 10px; }
.dz-dodaj-przycisk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cfd8de;
    border-radius: 8px;
    background: #fff;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.dz-plus { font-size: 18px; font-weight: 700; color: var(--dz-akcent-mocny, #1e8449); }
.dz-sekcja-tytul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1b2a38;
}
.dz-sekcja-tytul .dz-licznik { margin-left: 0; }
.dz-tylko-temat { padding: 14px 16px; border-radius: 10px; background: #f6f8f9; color: #455a64; font-size: 15px; }

/* --- 7. oceny: wiersz ucznia (domyslnie 3 linie jak na telefonie; wieksze — z @container) --- */
.dz-oceny-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.dz-oceny-naglowek .dz-sekcja-tytul { margin: 0; }
.dz-legenda { font-size: 12px; color: #5f6b76; }
/* skok 15 (1.11.2026): „Wszyscy obecni” (js/journal/dziennik-oceny.js) zaraz za tytulem sekcji, legenda po prawej; 44 px wysokosci,
   napis w jednej linii — na waskim ekranie (320 px) naglowek sie zawija i przycisk przechodzi pod tytul (nie wylewa sie) */
.dz-oceny-naglowek .dz-obecni {
    min-height: 44px;
    max-width: 100%;
    margin-right: auto;
    border-color: var(--dz-akcent, #27ae60);
    background: #fff;
    color: var(--dz-akcent-tekst, #145a32);
}
@media (hover: hover) {
    .dz-oceny-naglowek .dz-obecni:hover:not(:disabled) { background: var(--dz-akcent-jasny, #eefaf2); }   /* waga wyższa niż .dz-przycisk:hover:not(:disabled) */
}
.dz-tabela-ocen { margin-top: 10px; border: 1px solid #e1e7eb; border-radius: 10px; }
.dz-wiersz {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "uczen" "lekcja" "pd";
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
    border-top: 1px solid #e9eef1;
}
.dz-wiersz:first-child { border-top: 0; }
.dz-wiersz:nth-child(even) { background: #f8fbf9; }
.dz-wiersz-naglowek {
    display: none;
    background: #f2f5f7;
    color: #455a64;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.dz-kom-uczen { grid-area: uczen; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dz-kom-lekcja { grid-area: lekcja; min-width: 0; }
.dz-kom-pd { grid-area: pd; min-width: 0; }
/* GB-Z (26.10.2026, decyzja 55): bez kolumny „Wynik w dziale” (procent i ranga działu); skok 11: kolumna „Praca własna” zawsze */
.dz-imie { font-size: 15px; font-weight: 600; color: #1b2a38; }
.dz-matryca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid #f0c27b;
    border-radius: 8px;
    background: #fff8ec;
    color: #b9770e;
    font-size: 16px;
}
/* 2 linie: [imię · ⚡] / [2 1 NB 0 W · zal. ost. PW Wszystkie] — skok 11: od 520 px, bo 244 + 8 + 232 + 24 odstepow + 2 ramki = 510
   (przy 480 px wiersz by sie przelewal); ponizej 520 px przyciski pracy stoja pod ocenami */
@container dzlekcja (min-width: 520px) {
    .dz-wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-areas: "uczen uczen" "lekcja pd"; }
}
/* Kazdy wiersz (takze naglowek) to osobna siatka — sciezki Lekcja i Praca wlasna maja STALA szerokosc (nie max-content),
   inaczej naglowek z krotkim tekstem dostaje inne kolumny niz wiersz z przyciskami (5 × 44 + 4 × 6 = 244 px; 2 × 112 + 8 = 232 px). */
/* 3 kolumny: 130 + 244 + 232 + 2 przerwy + 24 + 2 = 648 < 700 */
@container dzlekcja (min-width: 700px) {
    .dz-wiersz { grid-template-columns: minmax(130px, 1fr) 244px 232px; grid-template-areas: "uczen lekcja pd"; }
    .dz-wiersz-naglowek { display: grid; }
}

/* przyciski ocen — nadpisania TYLKO w nowym dzienniku (>= 3 klasy; globalne .grade-pill/.pill-* bez zmian) */
.dz-dziennik .dz-oceny .grade-buttons-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.dz-dziennik .dz-oceny .grade-buttons-grid.dz-przyciski { flex-wrap: nowrap; }
.dz-dziennik .dz-oceny .grade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 2px solid #b8c7d1;
    border-radius: 22px;
    background: #fff;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 800;
    text-transform: none;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dz-dziennik .dz-oceny .grade-buttons-grid.dz-przyciski .grade-pill { flex: 1 1 0; }
.dz-dziennik .dz-oceny .grade-pill.pill-2 { background: #fff; color: #1e7a3c; border-color: #9fd3ae; }
.dz-dziennik .dz-oceny .grade-pill.pill-1 { background: #fff; color: #7a6400; border-color: #e8d68a; }
.dz-dziennik .dz-oceny .grade-pill.pill-nb { background: #fff; color: #8a4b0f; border-color: #efc39b; }
.dz-dziennik .dz-oceny .grade-pill.pill-0 { background: #fff; color: #a93226; border-color: #f0b5ad; }
.dz-dziennik .dz-oceny .grade-pill.pill-x { background: #fff; color: #2c3e50; border-color: #b8c7d1; }
.dz-dziennik .dz-oceny .grade-pill.pill-2.active { background: #1e8449; color: #fff; border-color: #1e8449; box-shadow: none; transform: none; }
.dz-dziennik .dz-oceny .grade-pill.pill-1.active { background: #f1c40f; color: #1b2a38; border-color: #d4ac0d; box-shadow: none; transform: none; }
.dz-dziennik .dz-oceny .grade-pill.pill-nb.active { background: #e67e22; color: #1b2a38; border-color: #ca6f1e; box-shadow: none; transform: none; }
.dz-dziennik .dz-oceny .grade-pill.pill-0.active { background: #c0392b; color: #fff; border-color: #a93226; box-shadow: none; transform: none; }
.dz-dziennik .dz-oceny .grade-pill.pill-x.active { background: #2c3e50; color: #fff; border-color: #2c3e50; box-shadow: none; transform: none; }
.dz-dziennik .dz-oceny .grade-pill.pill-ps { height: auto; min-height: 44px; border-color: transparent; }
/* skok 11 (makieta 27.10, wariant C): „Ostatnia” i „Wszystkie” — dwa przyciski tej samej wielkosci w kolumnie „Praca własna”;
   skok 17: napis „zal. ost. PW” / „✓ Zaliczona” w jednej linii (112 - 2 × 6 - 2 × 1,5 = 97 px na tekst; podglad mierzy); stylu dawnych przyciskow PD juz nie ma */
.dz-pw { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.dz-dziennik .dz-oceny .grade-pill.dz-pw-ost {
    flex: 0 0 112px;
    width: 112px;
    padding: 0 6px;
    white-space: nowrap;
    border-width: 1.5px;
    border-color: #a9cce3;
    color: #1f618d;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}
.dz-dziennik .dz-oceny .grade-pill.dz-pw-ost.active { background: #2471a3; color: #fff; border-color: #2471a3; box-shadow: none; transform: none; }
/* skok 14 (makieta 27.10): spinacz — dziecko oddało plik (data-dz-pw-plik; dziennik-klasa.js i dziennik-prace.js). „Ostatnia” z plikiem
   bursztynowa (#7a5200 na #fffaf0 — 6,6:1); kółko w rogu wystaje najwyżej 6 px (telefon 320 px: wiersz ma 7 px zapasu) i nie łapie kliknięć */
.dz-dziennik .dz-oceny .grade-pill.dz-pw-ost[data-dz-pw-plik]:not(.active) { background: #fffaf0; border-color: #e0b45a; color: #7a5200; }
.dz-dziennik .dz-oceny .grade-pill.dz-pw-ost[data-dz-pw-plik]::after, .dz-dziennik .dz-oceny .dz-pw-wsz[data-dz-pw-plik]::after {
    content: '📎';
    position: absolute;
    top: -6px;
    right: -6px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1.5px solid #e0b45a;
    border-radius: 10px;
    background: #fff3d6;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}
.dz-dziennik .dz-oceny .dz-pw-wsz {
    display: inline-flex;
    flex: 0 0 112px;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 44px;
    padding: 0 6px;
    border: 1.5px solid #b8c7d1;
    border-radius: 22px;
    background: #fff;
    color: #455a64;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
}
.dz-dziennik .dz-oceny .dz-pw [aria-busy="true"], .dz-okno .dz-pw-zalicz[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.dz-pw-info {
    margin: 10px 0 0;
    padding: 8px 12px;
    border: 1px solid #cfe2ef;
    border-radius: 8px;
    background: #eef5fa;
    color: #1b2a38;
    font-size: 13.5px;
    line-height: 1.5;
}
.dz-pw-ikona {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid #a9cce3;
    border-radius: 10px;
    background: #fff;
    color: #1f618d;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}
@container dzlekcja (min-width: 520px) {
    .dz-dziennik .dz-oceny .grade-buttons-grid.dz-przyciski .grade-pill { flex: 0 0 auto; }
}
.dz-dziennik .dz-oceny .grade-buttons-grid.dz-cele { margin-top: 6px; }
.dz-ps-z-apki {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #fdebd0;
    color: #7e5109;
    font-size: 12px;
    font-weight: 700;
}

/* znaczek wyniku „54% · BASIC” i ranga w Podsumowaniu — paleta z makiety (kolor z data-ranga) */
.dz-znaczek, .dz-ranga {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #dde3e7;
    border-radius: 999px;
    background: #f2f4f5;
    color: #455a64;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.dz-znaczek[data-ranga="basic"], .dz-ranga[data-ranga="basic"] { border-color: #a9dfbf; background: #d5f5e3; color: #145a32; }
.dz-znaczek[data-ranga="expert"], .dz-ranga[data-ranga="expert"] { border-color: #aed6f1; background: #d6eaf8; color: #1a5276; }
.dz-znaczek[data-ranga="master"], .dz-ranga[data-ranga="master"] { border-color: #d2b4de; background: #f4ecf7; color: #6c3483; }

/* --- 8. tresc, praca wlasna, slowniczek, stopka --- */
.dz-akapity { display: flex; flex-direction: column; gap: 14px; }
.dz-tekst { margin: 0; font-size: 16px; line-height: 1.6; color: #1b2a38; white-space: pre-wrap; }
.dz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: #5f6b76; }
.dz-tresc-lekcji .dz-materialy, .dz-praca-wlasna .dz-materialy { margin-top: 10px; }
.dz-zadanie {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #e1e7eb;
    border-left: 5px solid var(--dz-akcent, #27ae60);
    border-radius: 10px;
}
.dz-zadanie-nr { font-size: 16px; font-weight: 800; color: var(--dz-akcent-tekst, #145a32); }
.dz-zadanie-tresc { flex: 1 1 auto; min-width: 0; }
.dz-zadanie-tresc .dz-tekst { line-height: 1.45; }
.dz-zadanie-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.dz-klodka { font-size: 12px; color: #5f6b76; }
.dz-pojecie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid #eef2f4; }
.dz-pojecie:first-of-type { border-top: 0; }
.dz-pojecie-tekst { flex: 1 1 300px; min-width: 0; font-size: 16px; line-height: 1.45; color: #1b2a38; white-space: pre-wrap; }
.dz-akcje { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-stopka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eef2f4;
    font-size: 13px;
    color: #5f6b76;
}

/* --- 9. karty materialow (bez zaleznosci od korzenia — sesja 5: tablica.html) --- */
.dz-materialy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dz-karta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe6ea;
    border-radius: 12px;
    background: #fff;
    color: #2c3e50;
}
.dz-karta-miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #f2f5f7;
    text-decoration: none;
    cursor: pointer;
}
div.dz-karta-miniatura { cursor: default; }
.dz-karta-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-karta-film .dz-karta-miniatura { background: #1f2a33; }
.dz-karta-film .dz-karta-ikona { color: #fff; }
.dz-karta-ikona { font-size: 20px; font-weight: 800; color: #5f6b76; }
.dz-typ-pdf .dz-karta-miniatura { background: #fdf2f0; }
.dz-typ-pdf .dz-karta-ikona { color: #c0392b; }
.dz-typ-arkusz .dz-karta-miniatura { background: #eaf5ee; }
.dz-typ-arkusz .dz-karta-ikona { color: #1e7145; }
.dz-typ-prezentacja .dz-karta-miniatura { background: #fdf0e8; }
.dz-typ-prezentacja .dz-karta-ikona { color: #b7472a; }
.dz-karta-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; }
.dz-karta-tytul { font-size: 14px; font-weight: 600; line-height: 1.3; color: #1b2a38; }
.dz-karta-meta { font-size: 12px; color: #5f6b76; }
.dz-karta-akcje { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dz-karta-akcje .dz-przycisk { min-height: 32px; padding: 4px 10px; border-radius: 6px; font-size: 13px; white-space: normal; text-align: center; }

/* --- 10. stare zakladki (Final Boss, Podsumowanie — przeniesione bez przerobek; karty wyników „Sprawdź się” zastąpiła tabela prób, E3 rozmowa 2) --- */
.dz-dziennik .campaign-summary-table tbody tr:hover,
.dz-dziennik .student-row-even:hover,
.dz-dziennik .student-row-odd:hover { opacity: 1; background-color: #eef2f4; }

/* --- 11. okna w body (+ Dział, Data, podglad obrazka) --- */
.dz-okno-tlo {
    position: fixed;
    inset: 0;
    z-index: 20000;
    overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: rgba(20, 30, 40, 0.5);
    color: #1b2a38;
}
.dz-okno {
    position: relative;
    width: min(480px, 100%);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 10vh auto 0;
    overflow-y: auto;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
    color: #1b2a38;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    line-height: 1.4;
}
.dz-okno.dz-okno-szerokie { width: min(720px, 100%); margin-top: 6vh; }
.dz-okno-tytul { margin: 0 48px 12px 0; font-size: 20px; font-weight: 700; color: #1b2a38; overflow-wrap: anywhere; }
.dz-okno label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #34495e; }
.dz-okno input[type="text"], .dz-okno input[type="date"], .dz-okno input[type="url"] {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #b8c7d1;
    border-radius: 8px;
    background: #fff;
    color: #1b2a38;
    font-size: 16px;
}
/* E2 B, rozmowa 4: okna lekcji (lesson-modals.js) — pole na kilka linii (16 px: iPhone nie powiększa), odstęp między polami */
.dz-okno textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid #b8c7d1;
    border-radius: 8px;
    background: #fff;
    color: #1b2a38;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}
.dz-okno-pole ~ .dz-okno-pole { margin-top: 12px; }
.dz-okno input[type="file"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px dashed #b8c7d1;
    border-radius: 8px;
    background: #f8fafb;
    color: #1b2a38;
    font-size: 16px;
}
/* strefa wklejania (okno „Plik / obrazek”): pole pliku i pole wklejania, nasłuch CTRL+V na całej strefie */
.dz-okno-wklej { padding: 12px; border: 1px solid #dfe6ea; border-radius: 10px; background: #f8fafb; }
.dz-okno-wklej textarea { min-height: 72px; }
/* napis „📎 Wklejone obrazki:” (style.css: #1976d2, kontrast 4,4:1) ciemniejszy — 5,5:1 */
.dz-okno-tlo .clipboard-preview-container::before { color: #1565c0; }
/* pole zaznaczenia z napisem w jednym wierszu (np. „Dla chętnych”); .dz-okno label ma wyzsza wage niz sama klasa */
.dz-okno .dz-okno-wybor { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 15px; font-weight: 400; color: #1b2a38; }
.dz-okno .dz-okno-wybor input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; font-size: 16px; }
.dz-okno-podpowiedz { margin-top: 8px; font-size: 13px; color: #5f6b76; }
.dz-okno-meta { font-size: 13px; color: #5f6b76; overflow-wrap: anywhere; }
.dz-okno-akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dz-okno-akcje .dz-przycisk { min-height: 44px; padding: 0 16px; font-size: 15px; }
/* skok 11: okno „Wszystkie” (js/journal/dziennik-prace.js) — wiersz: dzien, temat, stan | przycisk stalej szerokosci */
.dz-pw-lista { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid #dfe6ea; border-radius: 10px; max-height: min(55vh, 520px); overflow-y: auto; }
.dz-pw-praca { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid #eef2f4; }
.dz-pw-praca:last-child { border-bottom: 0; }
.dz-okno .dz-pw-opis p { margin: 0; overflow-wrap: anywhere; }
.dz-okno .dz-pw-dzien { font-size: 13px; color: #5f6b76; }
.dz-okno .dz-pw-temat { margin-top: 2px; font-size: 15px; font-weight: 700; color: #1b2a38; }
.dz-okno .dz-pw-stan { margin-top: 2px; font-size: 13px; color: #5f6b76; }
.dz-okno .dz-pw-stan.dz-pw-stan-zal { color: #1f618d; font-weight: 600; }
.dz-okno .dz-pw-zalicz {
    width: 132px;
    min-height: 44px;
    padding: 0 8px;
    border: 1.5px solid #a9cce3;
    border-radius: 22px;
    background: #fff;
    color: #1f618d;
    font-size: 14px;
    font-weight: 700;
}
.dz-okno .dz-pw-zalicz.dz-pw-zal { background: #2471a3; border-color: #2471a3; color: #fff; }
.dz-okno .dz-pw-pusto { margin: 12px 0 0; font-size: 14px; color: #5f6b76; }
/* skok 14: w wierszu okna „Wszystkie” „📎 oddana … · Zobacz plik” (#7a5200 na bialym — 6,9:1); okno „Oddana praca” — plik po pliku:
   nazwa i rozmiar, podglad zdjecia, link do nowej karty (adres z tokenem tylko na czas otwarcia okna) */
.dz-okno .dz-pw-plik { margin-top: 2px; font-size: 13px; font-weight: 600; color: #7a5200; }
.dz-okno .dz-pw-zobacz { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #7a5200; font-size: 13px; font-weight: 700; text-decoration: underline; }
.dz-pw-pliki { margin: 12px 0 0; padding: 0; list-style: none; }
.dz-pw-plik-poz { padding: 10px 0; border-top: 1px solid #eef2f4; }
.dz-pw-plik-poz:first-child { border-top: 0; }
.dz-okno .dz-pw-plik-nazwa { margin: 0; font-size: 15px; font-weight: 600; color: #1b2a38; overflow-wrap: anywhere; }
.dz-okno .dz-pw-plik-stan { margin: 6px 0 0; font-size: 14px; color: #5f6b76; }
.dz-okno .dz-pw-plik-stan.dz-pw-plik-blad { color: #a93226; font-weight: 600; }
.dz-okno .dz-pw-plik-zal { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #1f618d; }
.dz-pw-plik-obraz { display: block; max-width: 100%; max-height: 60vh; max-height: 60dvh; margin: 8px 0 0; border: 1px solid #e1e7eb; border-radius: 8px; background: #f2f5f7; object-fit: contain; }
.dz-okno .dz-pw-plik-link { display: inline-flex; align-items: center; min-height: 44px; color: #1f618d; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .dz-pw-praca { grid-template-columns: minmax(0, 1fr) 112px; }
    .dz-okno .dz-pw-zalicz { width: 112px; }
}
/* skok 15: okno „Wszyscy obecni” (js/journal/dziennik-oceny.js) — lista dzieci do wpisu (imie | stan zapisu), linia postepu (role="status") */
.dz-obecni-wstep { margin: 8px 0 0; font-size: 15px; color: #1b2a38; }
.dz-obecni-lista { margin: 10px 0 0; padding: 0; list-style: none; border: 1px solid #dfe6ea; border-radius: 10px; max-height: min(45vh, 420px); overflow-y: auto; }
.dz-obecni-dziecko { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 40px; padding: 6px 12px; border-bottom: 1px solid #eef2f4; }
.dz-obecni-dziecko:last-child { border-bottom: 0; }
.dz-obecni-imie { min-width: 0; font-size: 15px; font-weight: 600; color: #1b2a38; overflow-wrap: anywhere; }
.dz-obecni-stan { font-size: 13px; color: #5f6b76; }
.dz-obecni-stan[data-stan="zapisano"] { color: #1e7a3c; font-weight: 700; }
.dz-obecni-stan[data-stan="blad"] { color: #a93226; font-weight: 700; }
.dz-obecni-postep { margin: 12px 0 0; font-size: 14px; color: #34495e; }
.dz-obecni-postep.dz-blad { color: #a93226; }
.dz-obecni-brak { margin: 10px 0 0; }
/* E2 (07.10.2026): okno wynikow sprawdzianu (js/journal/dziennik-wyniki.js) — wiersz: imie | pole | % | blad pod spodem */
.dz-wyniki-wstep { margin: 0 0 12px; font-size: 14px; color: #34495e; }
.dz-wyniki-lista { margin: 12px 0 8px; border: 1px solid #dfe6ea; border-radius: 10px; max-height: 50vh; overflow-y: auto; }
.dz-wyniki-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 88px 20px; align-items: center; gap: 4px 8px; padding: 6px 10px; border-bottom: 1px solid #eef2f4; }
.dz-wyniki-wiersz:last-child { border-bottom: 0; }
.dz-okno .dz-wyniki-wiersz .dz-wyniki-imie { margin: 0; font-size: 15px; font-weight: 600; color: #1b2a38; overflow-wrap: anywhere; }
.dz-okno .dz-wyniki-wiersz input[type="text"] { padding: 0 8px; text-align: center; }
.dz-wyniki-proc { font-size: 14px; color: #5f6b76; }
.dz-wyniki-wiersz .dz-blad { grid-column: 1 / -1; margin: 0; }
.dz-wyniki-podsumowanie { margin: 4px 0 0; font-size: 14px; color: #34495e; }
.dz-okno .dz-wyniki-uwaga { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff4e5; color: #7a4100; font-weight: 600; }
/* E3 (sesja 4c, 09.10.2026): okno zapowiedzi sprawdzianu (js/journal/dziennik-zapowiedz.js) — dwie sekcje: dla uczniow i tylko dla kadry */
.dz-zap-sekcja { margin: 12px 0; padding: 12px 14px; border: 1px solid #dfe6ea; border-radius: 10px; background: #fbfcfd; color: #1b2a38; }
.dz-zap-sekcja.dz-zap-kadra { background: #f2f4f5; border-color: #d5dbe0; }
.dz-zap-sekcja-tytul { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #34495e; }
.dz-zap-plik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border: 1px solid #dfe6ea; border-radius: 8px; background: #fff; color: #1b2a38; }
.dz-zap-plik-nazwa { flex: 1 1 12em; min-width: 0; font-weight: 600; overflow-wrap: anywhere; color: #1b2a38; }
.dz-zap-plik-zly { color: #a93226; font-size: 14px; }
.dz-zap-stan { margin: 6px 0 2px; font-size: 14px; color: #34495e; overflow-wrap: anywhere; }
.dz-zap-postep { margin: 8px 0 0; font-size: 14px; color: #34495e; }
.dz-okno .dz-zap-sekcja input[type="date"]:disabled { background: #eef1f3; color: #7f8c8d; }
/* E3 (sesja 4c): karta zapowiedzi w zakladce „Sprawdź się” (js/journal/dziennik-sprawdzian.js; makieta z 04.10) */
.dz-zapowiedz { margin: 0 0 20px; padding: 16px 18px; border: 1px solid #dfe6ea; border-radius: 14px; background: #fff; color: #1b2a38; }
.dz-zapowiedz-naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dz-zapowiedz-tytul { margin: 0; font-size: 18px; color: #1b2a38; }
.dz-zapowiedz-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-zapowiedz-termin { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: #145a32; }
.dz-zapowiedz-zakres { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #1b2a38; white-space: pre-wrap; overflow-wrap: anywhere; }
.dz-zapowiedz-etykieta { font-weight: 700; }
.dz-zapowiedz-plik { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid #dfe6ea; border-radius: 10px; background: #fff; color: #1b2a38; }
.dz-zapowiedz-plik-typ { padding: 4px 6px; border-radius: 4px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; }
.dz-zapowiedz-plik-nazwa { flex: 1 1 10em; min-width: 0; font-size: 14px; color: #1b2a38; overflow-wrap: anywhere; }
.dz-zapowiedz-plik-meta { font-size: 12px; color: #5f6b76; }
.dz-zapowiedz-plik-zly { font-size: 14px; color: #a93226; }
.dz-zapowiedz-kadra { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f2f4f5; color: #34495e; font-size: 14px; overflow-wrap: anywhere; }
.dz-zapowiedz-uczniowie { margin: 10px 0 0; font-size: 13px; color: #5f6b76; }
.dz-zapowiedz-pusta { margin: 0 0 10px; font-size: 15px; color: #455a64; }
/* E3 (sesja 4c, rozmowa 2): tabela prób „uczeń × próby” w zakładce „Sprawdź się” (js/journal/dziennik-sprawdzian.js; makieta z 04.10).
   Ramka przewija się w bok sama (strona stoi), kolumna imion przyklejona z lewej (border-collapse: separate, inaczej linie nie jadą
   z przyklejoną komórką). scroll-padding-left ramki = PEŁNA szerokość kolumny imion (imię najwyżej 8em = 120 px przy 15 px + 2 x 12 px
   paddingu + 1 px linii): przycisk z fokusem schowany pod imionami wysuwa się spod nich (WCAG 2.4.11). Chrome przewija tylko przycisk
   prawie całkiem zasłonięty (widoczne mniej niż ok. 32 px) — częściowo zasłonięty zostaje (zmierzone w podglądzie 09.10; scroll-margin
   przycisków nie pomaga). Komórki bez kolorów (makieta); fokus rysowany do środka przycisku. */
.dz-proby { margin: 0 0 20px; padding: 16px 18px; border: 1px solid #dfe6ea; border-radius: 14px; background: #fff; color: #1b2a38; }
.dz-proby-naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dz-proby-tytul { margin: 0; font-size: 18px; color: #1b2a38; }
.dz-proby-pusto { margin: 10px 0 0; font-size: 15px; color: #455a64; }
.dz-proby-przewin { margin-top: 12px; max-width: 100%; overflow-x: auto; border: 1px solid #e1e7eb; border-radius: 10px; font-size: 15px; scroll-padding-left: calc(8em + 25px); }
/* cień przy prawej krawędzi, gdy tabela ciągnie się dalej w bok (biały pas „local” jedzie z treścią i na jej końcu zakrywa cień);
   pas cienia równy na całej wysokości (długa klasa — widać go przy każdym wierszu) */
.dz-proby-przewin { background: linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    linear-gradient(to left, rgba(27, 42, 56, 0.2), rgba(27, 42, 56, 0)) right center / 14px 100% no-repeat scroll, #fff; }
.dz-proby-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; color: #1b2a38; font-variant-numeric: tabular-nums; }
.dz-proby-tabela th, .dz-proby-tabela td { padding: 0 12px; border-bottom: 1px solid #e9eef1; text-align: center; vertical-align: middle; font-weight: 400; }
.dz-proby-tabela thead th { padding: 9px 12px; background: #f2f5f7; color: #455a64; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.dz-proby-rog, .dz-proby-uczen { position: sticky; left: 0; z-index: 1; border-right: 1px solid #e1e7eb; }
.dz-proby-tabela .dz-proby-rog { background: #f2f5f7; text-align: left; }
.dz-proby-tabela .dz-proby-uczen { padding: 9px 12px; background: #fff; color: #1b2a38; font-weight: 600; text-align: left; }
.dz-proby-imie { display: block; max-width: 8em; overflow-wrap: break-word; }
.dz-proby-wynik { white-space: nowrap; }
.dz-proby-zmien { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #1b2a38; font-size: 15px; }
.dz-proby-zmien.dz-proby-brak { color: #5f6b76; }
.dz-proby-zmien:focus-visible { outline: 3px solid var(--dz-akcent-tekst, #145a32); outline-offset: -3px; }
/* sam tekst (data w starym zapisie, kilka wyników z dnia) — szary kursywą: nie przycisk; wyjaśnienie w uwagach pod tabelą */
.dz-proby-tabela .dz-proby-stary { padding: 9px 12px; color: #5f6b76; font-style: italic; }
.dz-proby-tabela thead th.dz-proby-data-stara { white-space: normal; overflow-wrap: anywhere; min-width: 6em; }
.dz-proby-tabela td.dz-proby-naj { font-weight: 700; white-space: nowrap; }
.dz-proby-tabela td.dz-proby-pkt { font-weight: 700; color: #145a32; white-space: nowrap; }
.dz-proby-tabela tfoot th, .dz-proby-tabela tfoot td { padding: 8px; border-bottom: 0; }
.dz-proby-tabela tfoot .dz-proby-uczen { color: #455a64; font-size: 13px; }
.dz-proby-akcje-data { display: block; margin: 0 0 6px; color: #455a64; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.dz-proby-akcje-w { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dz-proby-legenda { margin: 8px 0 0; font-size: 13px; color: #5f6b76; }
.dz-proby-uwagi { margin: 8px 0 0; padding-left: 1.2em; font-size: 13px; color: #7a4100; overflow-wrap: anywhere; }
.dz-proby-zasady { margin: 12px 0 0; font-size: 13px; color: #455a64; }
.dz-zamknij-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 1px solid #cfd8de;
    border-radius: 8px;
    background: #fff;
    color: #2c3e50;
    font-size: 20px;
    line-height: 1;
}
.dz-podglad-obraz { margin-top: 12px; padding: 4px; border: 1px solid #e1e7eb; border-radius: 10px; background: #f2f5f7; text-align: center; }
.dz-podglad-obraz img {
    display: block;
    max-width: 100%;
    max-height: min(420px, calc(100vh - 200px));
    max-height: min(420px, calc(100dvh - 200px));
    margin: 0 auto;
    object-fit: contain;
}

/* --- 12. dotyk i najechanie --- */
@media (hover: hover) {
    .dz-przycisk:hover:not(:disabled), .dz-dodaj-przycisk:hover, .dz-wiersz-listy:hover:not(.dz-zaznaczona) { background: #f6f8f9; }
    /* glowny przycisk okien: ogolna regula wyzej ma (0,3,0) i dawala bialy napis na prawie bialym tle */
    .dz-przycisk.dz-glowny:hover:not(:disabled) { background: var(--dz-akcent-tekst, #145a32); border-color: var(--dz-akcent-tekst, #145a32); color: #fff; }
    /* UX-1 R5 (przeglad): „Jak zobaczy uczeń” — ta sama pulapka co wyzej (bialy napis na #f6f8f9 = 1,05:1); #24497f z bialym = ok. 9:1 */
    .dz-przycisk.dz-podglad-ucznia:hover:not(:disabled) { background: #24497f; border-color: #24497f; color: #fff; }
    /* skok 20: ta sama pułapka przy „Otwórz w ZPE” */
    .dz-przycisk.dz-zpe-otworz:hover:not(:disabled) { background: #24497f; border-color: #24497f; color: #fff; }
    .dz-dziennik .dz-oceny .grade-pill:not(.active):hover { background: #f6f8f9; }
    .dz-proby-zmien:hover { background: #f2f5f7; }
}
@media (pointer: coarse), (max-width: 599.98px) {
    .dz-dziennik button, .dz-okno-tlo button, .dz-przycisk { min-height: 44px; }
    .dz-przycisk.dz-maly { min-height: 44px; }
    .dz-karta-akcje .dz-przycisk { min-height: 44px; }
    .dz-zamknij-x { width: 44px; height: 44px; }
    /* × na miniaturze wklejonego obrazka (clipboard-paste.js) zostaje kółkiem 24 px, nie pigułką 24×44 */
    .dz-okno-tlo .clipboard-preview-remove { min-height: 24px; }
    /* ...ale pole dotyku 44 px wokół kółka (przegląd C, 08.10.2026) */
    .dz-okno-tlo .clipboard-preview-remove::after { content: ''; position: absolute; inset: -10px; }
    .dz-matryca { width: 44px; height: 44px; }
}

/* --- 13. szerokosci okna --- */
/* >= 1000 px: lista (260 px) obok otwartej lekcji; budzet przy 1100 px: 1100 - 38 - 260 - 16 = 786 na lekcje */
@media (min-width: 1000px) {
    .dz-uklad-lekcji { display: flex; align-items: flex-start; gap: 16px; }
    .dz-lista { flex: 0 0 260px; }
    .dz-lekcje { flex: 1 1 auto; }
    .dz-pasek-telefonu { display: none; }
}
/* < 1000 px: tryb „lekcja” (domyslny) albo „lista” na cala szerokosc */
@media (max-width: 999.98px) {
    .dz-tryb-lekcja .dz-lista { display: none; }
    .dz-tryb-lista .dz-lekcje { display: none; }
    .dz-materialy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* tabela prób: zwarte komórki, „POPRAWA 09.10” w dwóch liniach, krótkie „Najl.” i „Pkt” (pełne nazwy w aria-label), węższe „Zmień” / „Usuń (N)” —
       2 daty z „Najlepszy” i „Punkty” mieszczą się od 600 px; telefon przesuwa tabelę w bok w jej ramce (decyzja właściciela 3, 09.10) */
    .dz-proby-tabela th, .dz-proby-tabela td { padding: 0 6px; }
    .dz-proby-tabela thead th, .dz-proby-tabela .dz-proby-uczen, .dz-proby-tabela .dz-proby-stary { padding: 8px 6px; }
    .dz-proby-tabela thead th.dz-proby-data { white-space: normal; }
    .dz-proby-tabela tfoot th, .dz-proby-tabela tfoot td { padding: 8px 4px; }
    .dz-proby-tabela .dz-dl { display: none; }
    .dz-proby-tabela .dz-kr { display: inline; }
    .dz-proby-zmien { padding: 0 4px; }
    .dz-proby-akcje .dz-przycisk.dz-maly { padding: 0 6px; }
    .dz-proby-przewin { scroll-padding-left: calc(8em + 13px); }
}
/* < 600 px: telefon */
@media (max-width: 599.98px) {
    .dz-pasek-przedmiotu { padding: 10px 12px; }
    .dz-tytul-przedmiotu { font-size: 17px; }
    .dz-dzialy, .dz-dodaj { flex-wrap: nowrap; overflow-x: auto; }
    .dz-dzial { padding: 12px 0 16px; border-left: 0; border-right: 0; border-radius: 0; }
    .dz-dzial-naglowek, .dz-zakladki, .dz-menu { margin-left: 0; margin-right: 0; }
    .dz-dzial-nazwa { font-size: 20px; }
    .dz-zakladka { font-size: 13px; }
    .dz-dl { display: none; }
    .dz-kr { display: inline; }
    .dz-lekcja { padding: 12px 10px; gap: 14px; border-radius: 12px; }
    .dz-temat { font-size: 20px; }
    .dz-wiersz { padding: 10px 0; }
    .dz-tabela-ocen { border-left: 0; border-right: 0; border-radius: 0; }
    /* tabela prób: karta bez bocznych ramek (4 px — miejsce na pierścień fokusu ramki); zwarte komórki — reguły < 1000 px wyżej */
    .dz-proby { padding: 12px 4px 14px; border-left: 0; border-right: 0; border-radius: 0; }
    .dz-proby-przewin { border-left: 0; border-right: 0; border-radius: 0; }
    .dz-materialy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dz-karta-plik { grid-column: 1 / -1; }
    .dz-karta-miniatura { height: 90px; }
    .dz-tekst, .dz-pojecie-tekst { font-size: 15px; }
}
@media (max-width: 359.98px) {
    .dz-dziennik .dz-oceny .grade-buttons-grid { gap: 4px; }
    /* skok 11 (podglad 320 px): wiersz miał 227 px, a oceny 236 px (5 × 44 + 4 × 4) i przyciski pracy 232 px — węższy margines karty lekcji
       daje 239 px; przyciski zostają >= 44 px */
    .dz-lekcja { padding-left: 4px; padding-right: 4px; }
}
/* okna na cały ekran: telefon ALBO niski ekran (laptop z powiekszeniem, telefon poziomo) */
@media (max-width: 599.98px), (max-height: 500px) {
    .dz-okno-tlo { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
    .dz-okno, .dz-okno.dz-okno-szerokie { width: 100%; min-height: 100%; max-height: none; margin: 0; border-radius: 0; }
}

/* --- 11. Biurko (E3, sesja 4c) — js/journal/teacher-desk.js; poza korzeniem .dz-dziennik (kontener dziennika) --- */
.dz-biurko { max-width: 960px; margin: 0 auto; padding: 16px; color: #1b2a38; }
.dz-biurko-naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #e67e22; }
.dz-biurko-tytul { margin: 0; font-size: 22px; color: #874a12; }
.dz-biurko-opis { margin: 4px 0 0; font-size: 14px; color: #5f6b76; }
.dz-biurko-licznik { margin: 0; padding: 8px 14px; border: 1px solid #f0d9b5; border-radius: 10px; background: #fff9f0; color: #874a12; font-size: 14px; text-align: center; }
.dz-biurko-licznik strong { display: block; font-size: 22px; }
.dz-biurko-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.dz-biurko-filtr .dz-przycisk { white-space: normal; text-align: left; }
.dz-biurko-filtr .dz-przycisk[aria-pressed="true"] { background: #1b2a38; border-color: #1b2a38; color: #fff; }
.dz-biurko-filtr .dz-przycisk:disabled { opacity: .6; cursor: default; }
.dz-biurko-uwaga { margin: 10px 0; padding: 10px 12px; border: 1px solid #f0d9b5; border-radius: 10px; background: #fff8e1; color: #6e4b00; font-size: 14px; }
.dz-biurko-pusto, .dz-biurko-podpowiedz { margin: 0 0 10px; font-size: 14px; color: #5f6b76; }
.dz-biurko-pusty { margin: 24px 0; padding: 20px; border: 1px dashed #c9d3dc; border-radius: 12px; text-align: center; color: #34495e; }
.dz-biurko-sekcja { margin: 18px 0 0; }
.dz-biurko-sekcja-tytul, .dz-biurko-sekcja > summary { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #1b2a38; }
.dz-biurko-sekcja > summary { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; background: #f2f4f5; cursor: pointer; }
.dz-biurko-sekcja > summary::-webkit-details-marker { display: none; }
.dz-biurko-sekcja > summary::before { content: '▸'; margin-right: 8px; color: #5f6b76; }
.dz-biurko-sekcja[open] > summary::before { content: '▾'; }
.dz-biurko-karta { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #dfe6ea; border-radius: 12px; background: #fff; color: #1b2a38; overflow-wrap: anywhere; }
.dz-biurko-karta.dz-biurko-usunieta { border-style: dashed; background: #f7f8f9; }
.dz-biurko-karta-gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dz-biurko-termin { margin: 0; font-size: 17px; font-weight: 700; color: #145a32; }
.dz-biurko-termin.dz-bez-terminu { color: #6e4b00; }
.dz-biurko-dni { padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; background: #eef2f4; color: #34495e; }
.dz-biurko-dni.dz-dni-dzis { background: #a93226; color: #fff; }
.dz-biurko-dni.dz-dni-jutro { background: #a04000; color: #fff; }
.dz-biurko-dni.dz-dni-blisko { background: #fdebd0; color: #6e2c00; }
.dz-biurko-co { margin: 6px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.dz-biurko-usunieta-uwaga { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #7b241c; }
.dz-biurko-zakres { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #34495e; white-space: pre-wrap; overflow-wrap: anywhere; }
.dz-biurko-pliki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.dz-biurko-postep { display: block; margin-top: 6px; font-size: 13px; color: #34495e; }
.dz-biurko-plik { min-width: 0; padding: 10px 12px; border: 1px dashed #c9d3dc; border-radius: 10px; background: #f8f9fa; font-size: 14px; }
.dz-biurko-plik.dz-jest { border-style: solid; border-color: #a9cce3; background: #f4f9fd; }
.dz-biurko-plik-tytul { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #5f6b76; }
.dz-biurko-plik-nazwa { display: block; margin: 0 0 8px; color: #1b2a38; overflow-wrap: anywhere; }
.dz-biurko-plik-akcje, .dz-biurko-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-biurko-material { margin: 10px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.dz-biurko-material a { color: #1f618d; }
.dz-biurko-stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f4; font-size: 13px; color: #5f6b76; }
.dz-biurko-notka { font-size: 12px; color: #5f6b76; }
.dz-biurko-zly { color: #a93226; }

/* skok 20, rozmowa 2: stałe miejsce na ZPE (dziennik-klasa.js sekcjaZpe) — niska ramka nad ocenami, osobny kolor, nie karta wśród plików */
.dz-zpe { margin: 12px 0; padding: 8px 14px; border: 1px solid #b7cdea; border-left: 5px solid #2f5ea8; border-radius: 10px; background: #f3f7fd; }
.dz-zpe-gora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dz-zpe-gora .dz-sekcja-tytul { margin: 0; }
.dz-zpe-brak { flex: 1 1 auto; color: #455a64; font-size: 14px; }
.dz-zpe-dodaj { margin-left: auto; }
@media (max-width: 560px) { .dz-zpe-brak { display: none; } }
.dz-zpe-temat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #d5e2f3; }
.dz-zpe-opis { flex: 1 1 240px; min-width: 0; color: #1b2a38; font-size: 15px; overflow-wrap: anywhere; }
.dz-zpe-kod { color: #2f5ea8; font-weight: 700; }
.dz-zpe-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-przycisk.dz-zpe-otworz { max-width: 100%; border-color: #2f5ea8; background: #2f5ea8; color: #fff; white-space: normal; text-align: left; overflow-wrap: anywhere; }
/* skok 20, rozmowa 3: temat z podręcznika (ramka ma ten sam układ co ZPE, ale spokojniejszy kolor) i okno „Linki” (dziennik-zpe.js) */
.dz-podrecznik { border-color: #cfd8dc; border-left-color: #607d8b; background: #f6f8f9; }
.dz-spis-strona { margin-left: auto; color: #5f6b76; font-size: 13px; white-space: nowrap; }
.dz-link-wiersz { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-top: 1px solid #eef2f4; }
.dz-link-wiersz:first-child { border-top: 0; }
.dz-okno .dz-link-wybor { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; margin: 0; color: #1b2a38; font-size: 15px; font-weight: 400; overflow-wrap: anywhere; cursor: pointer; }
.dz-okno .dz-link-wybor input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
.dz-link-otworz { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; color: #2f5ea8; font-size: 14px; white-space: nowrap; }
/* okno „Podepnij temat z ZPE” (dziennik-zpe.js): lista w osobnym przewijanym polu, adres widoczny bez przewijania listy */
.dz-zpe-lista { max-height: 36vh; margin-top: 10px; overflow-y: auto; border: 1px solid #dfe6ea; border-radius: 10px; background: #fff; }
.dz-zpe-rozdzial { margin: 0; padding: 8px 12px 6px; background: #f6f8f9; color: #455a64; font-size: 13px; font-weight: 700; }
.dz-zpe-wybor { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-top: 1px solid #eef2f4; background: #fff; color: #1b2a38; font-size: 15px; text-align: left; }
.dz-zpe-wybor:hover:not(:disabled) { background: #eaf2fb; }
.dz-zpe-jest { margin-left: auto; color: #5f6b76; font-size: 13px; white-space: nowrap; }
.dz-zpe-wlasny { margin-top: 14px; padding-top: 12px; border-top: 1px solid #dfe6ea; }
.dz-typ-link .dz-karta-miniatura { background: #eaf2fb; }
.dz-typ-link .dz-karta-ikona { color: #1f618d; }
/* skok 20a: okno „Kolejność działów” (dziennik-kolejnosc.js); przyciski stoją nad listą, bo okno się przewija */
.dz-kolejnosc-ruch { display: flex; gap: 8px; margin: 12px 0 8px; }
.dz-kolejnosc-ruch .dz-przycisk { flex: 1 1 0; min-height: 44px; padding: 0 12px; font-size: 15px; touch-action: manipulation; }
.dz-kolejnosc-lista { display: grid; gap: 6px; max-height: 45vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.dz-kolejnosc-wiersz { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #cfd8dc; border-radius: 10px; background: #fff; color: #1b2a38; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.dz-kolejnosc-wiersz:hover:not(:disabled) { background: #f2f6f8; }
.dz-kolejnosc-wiersz[aria-pressed="true"], .dz-kolejnosc-wiersz[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--dz-akcent-mocny, #1e8449); background: #e9f5ee; box-shadow: inset 0 0 0 1px var(--dz-akcent-mocny, #1e8449); font-weight: 700; }
.dz-kolejnosc-nr { flex: 0 0 auto; min-width: 1.6em; color: #5f6b76; }
.dz-kolejnosc-nazwa { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dz-kolejnosc-lista + .dz-blad { margin: 10px 0 0; }