/* ============================================================================
   UX-8 (23.10.2026) — NOWY WIDOK PLANU LEKCJI (js/plan/plan-widok.js) na student-plan.html
   Znacznik wersji --plan-widok: bez niego moduł się nie włącza (zostaje stara tabela). WSZYSTKIE reguły pod body.pw-wlaczony —
   ekran logowania tej strony i widok zapasowy zostają nietknięte. Kolory i czcionka jak nowa Agora: tło #f4f6f3, karty białe,
   zieleń #2e6b4e, czcionka systemowa; napisy ≥ 14 px (≥ 12 px tylko w tabeli tygodnia na telefonie — [data-pw-maly]), przyciski
   ≥ 44 px, kontrast ≥ 4,5:1. !important tam, gdzie wygrywają dziś student-plan-style.css (≤ 768 px, pełny ekran wirtualny)
   i style z atrybutu. Złoty „← Menu” (#btn-back-to-game.pt-powrot) rysuje js/core/powrot-do-menu.js — tu nienadpisywany.
   ============================================================================ */
:root { --plan-widok: 1; }

/* strona: jasne tło; stary pasek tygodnia, stara tabela, stary wybór ucznia, „Ukryj panel” i „Wyloguj” schowane
   (zostają w HTML dla starej kopii skryptu z CDN — decyzja właściciela 23.10: bez „Wyloguj” i „Ukryj panel”) */
body.pw-wlaczony { background: #f4f6f3 !important; background-image: none !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iPhone poziomo nie powiększa napisów (jak Agora; przegląd K8, D5) */
body.pw-wlaczony .student-plan-container {
  background: #f4f6f3 !important; background-image: none !important; overflow: visible !important; max-width: none !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1e2a24; font-size: 16px; line-height: 1.4;
}
body.pw-wlaczony.virtual-fullscreen-student .student-plan-container { overflow: auto !important; }
body.pw-wlaczony #student-selector, body.pw-wlaczony #btn-toggle-panel, body.pw-wlaczony #logout-btn, body.pw-wlaczony .week-navigation,
body.pw-wlaczony .schedule-grid-wrapper, body.pw-wlaczony #mobile-day-view { display: none !important; }

/* nagłówek: „← Menu” / „← Wioska”, „Plan lekcji”, dziecko, „← Powrót” (kadra) — przyklejony, z wcięciem iPhone'a */
/* flex-direction: row — student-plan-style.css (≤ 768 px) ustawia column: nagłówek był w trzech rzędach zamiast jednego (podgląd K7) */
body.pw-wlaczony .student-plan-header {
  position: sticky !important; top: 0; z-index: 20; display: flex; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px;
  flex-wrap: wrap; min-height: 60px !important; box-sizing: border-box; background: #fff !important; color: #1e2a24 !important;
  border-bottom: 1px solid #dce3de !important; box-shadow: none !important;
  padding: 8px 12px !important; padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-left: max(12px, calc((100% - 736px) / 2), env(safe-area-inset-left)) !important;
  padding-right: max(12px, calc((100% - 736px) / 2), env(safe-area-inset-right)) !important;
}
body.pw-wlaczony.pw-komputer .student-plan-header {
  padding-top: max(10px, env(safe-area-inset-top)) !important; padding-bottom: 10px !important;
  padding-left: max(24px, calc((100% - 1132px) / 2), env(safe-area-inset-left)) !important;
  padding-right: max(24px, calc((100% - 1132px) / 2), env(safe-area-inset-right)) !important;
}
body.pw-wlaczony.virtual-fullscreen-student .student-plan-header { position: sticky !important; top: 0; }
body.pw-wlaczony .student-plan-header h1 {
  order: 1; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; font-family: inherit;
  font-size: 20px !important; font-weight: 800; line-height: 1.2 !important; color: #1e2a24 !important; text-shadow: none !important;
}
body.pw-wlaczony .student-plan-header .header-buttons { display: contents; }
body.pw-wlaczony #btn-back-to-game { order: 0; }
body.pw-wlaczony #pw-dziecko { order: 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
body.pw-wlaczony #btn-back-to-planer { order: 3; }
body.pw-wlaczony .header-buttons > button:not(.pt-powrot) {
  min-height: 44px !important; padding: 0 16px !important; border: 1px solid #c9d3cc !important; border-radius: 22px !important;
  background: #fff !important; color: #1e2a24 !important; font-family: inherit; font-size: 15px !important; font-weight: 600 !important;
  line-height: 1.2 !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; cursor: pointer;
}
body.pw-wlaczony .header-buttons > button:not(.pt-powrot):hover { background: #f1f7f3 !important; }

/* wybór dziecka: napis (1 dziecko, uczeń), przyciski (komputer), przycisk okna (telefon), lista kadry */
body.pw-wlaczony #pw-dziecko .pw-dzieci { display: flex; gap: 8px; flex-wrap: wrap; }
body.pw-wlaczony #pw-dziecko .pw-dziecko {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px !important; max-width: 100%; padding: 0 14px 0 6px !important;
  border: 1px solid #c9d3cc !important; border-radius: 22px !important; background: #fff !important; color: #1e2a24 !important;
  font-family: inherit; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap;
  box-shadow: none !important; text-shadow: none !important; transform: none !important;
}
body.pw-wlaczony #pw-dziecko button.pw-dziecko { cursor: pointer; }
body.pw-wlaczony #pw-dziecko .pw-dziecko.pw-jedno { border-color: transparent !important; background: transparent !important; }
body.pw-wlaczony #pw-dziecko .pw-dziecko[aria-pressed="true"] { background: #2e6b4e !important; border-color: #2e6b4e !important; color: #fff !important; }
body.pw-wlaczony .pw-kolko {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #2e6b4e; color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px;
}
body.pw-wlaczony #pw-dziecko .pw-dziecko[aria-pressed="true"] .pw-kolko { background: #fff; color: #1f4d36; }
body.pw-wlaczony #pw-dziecko .pw-uczen { display: inline-flex; max-width: 100%; }
body.pw-wlaczony #pw-dziecko select {
  min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid #c9d3cc; border-radius: 22px; background: #fff; color: #1e2a24;
  font-family: inherit; font-size: 16px; cursor: pointer;
}
body.pw-wlaczony .pw-ukryte {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.pw-wlaczony #pw-root :focus-visible, body.pw-wlaczony #pw-dziecko :focus-visible { outline: 3px solid #2e6b4e; outline-offset: 2px; }

/* korzeń widoku — width: 100%: w kolumnie flex (.student-plan-container) margin auto bez szerokości zwężał treść do szerokości kart (podgląd K7) */
body.pw-wlaczony #pw-root {
  display: block; width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; color: #1e2a24; font-size: 16px; line-height: 1.4;
  padding: 0 max(12px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
body.pw-wlaczony.pw-komputer #pw-root {
  max-width: 1180px; padding: 0 max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left));
}
body.pw-wlaczony #pw-root *, body.pw-wlaczony #pw-root *::before, body.pw-wlaczony #pw-root *::after { box-sizing: border-box; }
body.pw-wlaczony #pw-root button { font-family: inherit; cursor: pointer; }
body.pw-wlaczony #pw-root .pw-komunikat {
  margin: 16px 0; padding: 18px 12px; text-align: center; color: #3d4a42; background: #fff; border: 1px solid #dce3de; border-radius: 12px; font-size: 16px;
}

/* kolory przedmiotów — kategorie z planera (config/subject_colors), w jasnych odcieniach */
body.pw-wlaczony #pw-root .kat-red { --k-tlo: #fbeceb; --k-pasek: #c0392b; --k-tekst: #8f1f17; }
body.pw-wlaczony #pw-root .kat-green { --k-tlo: #e6f4ea; --k-pasek: #2e7d4f; --k-tekst: #1e5e3a; }
body.pw-wlaczony #pw-root .kat-blue { --k-tlo: #e8f0fb; --k-pasek: #2f6fb5; --k-tekst: #1d4f91; }
body.pw-wlaczony #pw-root .kat-purple { --k-tlo: #f3eaf8; --k-pasek: #7b3fa0; --k-tekst: #5e2a7e; }
body.pw-wlaczony #pw-root .kat-orange, body.pw-wlaczony #pw-root .kat-yellow { --k-tlo: #fdf0e1; --k-pasek: #c46a10; --k-tekst: #7a4108; }
body.pw-wlaczony #pw-root .kat-pink { --k-tlo: #fbe9f1; --k-pasek: #b83d78; --k-tekst: #7d1f4f; }
body.pw-wlaczony #pw-root .kat-teal { --k-tlo: #e2f3f1; --k-pasek: #1f8a80; --k-tekst: #155e57; }
body.pw-wlaczony #pw-root .kat-brown { --k-tlo: #f2ebe5; --k-pasek: #8a6346; --k-tekst: #5c3f2a; }

/* pasek tygodnia */
body.pw-wlaczony #pw-root .pw-tydzien { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
body.pw-wlaczony.pw-komputer #pw-root .pw-tydzien { max-width: 560px; margin: 16px auto; }
body.pw-wlaczony #pw-root .pw-strzalka {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0 0 3px; border-radius: 12px; border: 1px solid #c9d3cc; background: #fff; color: #1f4d36;
  font-size: 26px; font-weight: 800; line-height: 1;
}
body.pw-wlaczony #pw-root .pw-zakres { flex: 1 1 auto; min-width: 0; text-align: center; }
body.pw-wlaczony #pw-root .pw-zakres b { display: block; font-size: 17px; }
body.pw-wlaczony #pw-root .pw-zakres span { display: block; font-size: 14px; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-dzis {
  min-height: 44px; flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 22px; background: #2e6b4e; color: #fff; font-size: 15px; font-weight: 700;
}
body.pw-wlaczony #pw-root .pw-dzis[aria-disabled="true"] { background: #e4e9e5; color: #3d4a42; cursor: default; }

/* telefon: Dzień | Tydzień, dni */
body.pw-wlaczony #pw-root .pw-segmenty { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 12px; background: #e4e9e5; }
body.pw-wlaczony #pw-root .pw-segment {
  flex: 1 1 0; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #3d4a42; font-size: 15px; font-weight: 700;
}
body.pw-wlaczony #pw-root .pw-segment[aria-pressed="true"] { background: #fff; color: #1e2a24; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
body.pw-wlaczony #pw-root .pw-zakladki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
body.pw-wlaczony #pw-root .pw-zakladka {
  min-height: 56px; padding: 4px 2px; border: 1px solid #c9d3cc; border-radius: 10px; background: #fff; color: #1e2a24;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
body.pw-wlaczony #pw-root .pw-zakladka b { font-size: 15px; }
body.pw-wlaczony #pw-root .pw-zakladka span { font-size: 14px; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-zakladka.pw-dzis-dzien { border: 2px solid #2e6b4e; }
body.pw-wlaczony #pw-root .pw-zakladka[aria-pressed="true"] { background: #2e6b4e; border-color: #2e6b4e; color: #fff; }
body.pw-wlaczony #pw-root .pw-zakladka[aria-pressed="true"] span { color: #fff; }
body.pw-wlaczony #pw-root .pw-dzien-tytul { margin: 4px 0 10px; font-size: 17px; font-weight: 700; }
body.pw-wlaczony #pw-root .pw-pusto {
  margin: 0; padding: 18px 12px; text-align: center; color: #3d4a42; background: #fff; border: 1px dashed #c9d3cc; border-radius: 12px; font-size: 15px;
}

/* karty lekcji (telefon, „Dzień”) */
body.pw-wlaczony #pw-root .pw-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.pw-wlaczony #pw-root .pw-lekcja { display: flex; min-height: 72px; overflow: hidden; background: #fff; border: 1px solid #dce3de; border-radius: 12px; }
body.pw-wlaczony #pw-root .pw-pasek { width: 6px; flex: 0 0 6px; background: var(--k-pasek, #8fa89a); }
body.pw-wlaczony #pw-root .pw-czas { flex: 0 0 82px; padding: 10px 0 10px 12px; display: flex; flex-direction: column; gap: 1px; }
body.pw-wlaczony #pw-root .pw-czas b { font-size: 17px; }
body.pw-wlaczony #pw-root .pw-czas span, body.pw-wlaczony #pw-root .pw-czas small { font-size: 14px; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-tresc { flex: 1 1 auto; min-width: 0; padding: 10px 12px 10px 4px; display: flex; flex-direction: column; gap: 3px; }
body.pw-wlaczony #pw-root .pw-przedmiot { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
body.pw-wlaczony #pw-root .pw-sala { font-size: 14px; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-inna { align-self: flex-start; padding: 1px 8px; border-radius: 10px; background: #fdf0e1; color: #7a4108; font-size: 14px; }

/* telefon, „Tydzień”: tabela w szerokości ekranu (12 px) */
body.pw-wlaczony #pw-root .pw-siatka { width: 100%; margin: 0 -3px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
body.pw-wlaczony #pw-root .pw-siatka col.pw-kol-czas { width: 44px; }
body.pw-wlaczony #pw-root .pw-siatka thead th {
  padding: 0; font-size: 13px; font-weight: 700; color: #1e2a24; background: #fff; border: 1px solid #dce3de; border-radius: 8px;
}
body.pw-wlaczony #pw-root .pw-siatka thead th.pw-pusty-rog { background: transparent; border: 0; }
body.pw-wlaczony #pw-root .pw-siatka thead th > button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 2px 0;
  font-size: 13px; font-weight: 700; color: inherit; background: transparent; border: 0;
}
body.pw-wlaczony #pw-root .pw-siatka thead th > button small { font-size: 12px; font-weight: 600; }
body.pw-wlaczony #pw-root .pw-siatka thead th.pw-dzis-dzien { background: #2e6b4e; border-color: #2e6b4e; color: #fff; }
body.pw-wlaczony #pw-root .pw-siatka tbody th { padding: 6px 0 0; vertical-align: top; text-align: center; font-size: 12px; font-weight: 700; color: #1e2a24; }
body.pw-wlaczony #pw-root .pw-siatka tbody th small { display: block; font-size: 12px; font-weight: 600; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-siatka td {
  height: 62px; padding: 5px 4px; vertical-align: top; border-radius: 8px; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto;
}
body.pw-wlaczony #pw-root .pw-siatka td.pw-kratka { background: var(--k-tlo); color: var(--k-tekst); border-top: 3px solid var(--k-pasek); }
body.pw-wlaczony #pw-root .pw-siatka td.pw-kratka b { display: block; font-size: 12px; font-weight: 700; }
body.pw-wlaczony #pw-root .pw-siatka td.pw-kratka span { display: block; margin-top: 2px; font-size: 12px; }
body.pw-wlaczony #pw-root .pw-siatka td.pw-pusta { text-align: center; vertical-align: middle; color: #5b6a62; background: #fff; border: 1px dashed #dce3de; }
body.pw-wlaczony #pw-root .pw-siatka td.pw-dzis-dzien.pw-pusta { background: #f1f7f3; }
body.pw-wlaczony #pw-root .pw-podpowiedz { margin: 8px 2px 0; font-size: 14px; color: #3d4a42; }

/* komputer: siatka tygodnia */
body.pw-wlaczony #pw-root .pw-siatka-k { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
body.pw-wlaczony #pw-root .pw-siatka-k col.pw-kol-czas { width: 128px; }
body.pw-wlaczony #pw-root .pw-siatka-k thead th {
  padding: 8px 6px; font-size: 15px; font-weight: 800; color: #1e2a24; background: #fff; border: 1px solid #dce3de; border-radius: 10px;
}
body.pw-wlaczony #pw-root .pw-siatka-k thead th span { display: block; font-size: 14px; font-weight: 600; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-siatka-k thead th.pw-dzis-dzien { background: #2e6b4e; border-color: #2e6b4e; color: #fff; }
body.pw-wlaczony #pw-root .pw-siatka-k thead th.pw-dzis-dzien span { color: #fff; }
body.pw-wlaczony #pw-root .pw-siatka-k thead th.pw-pusty-rog { background: transparent; border: 0; }
body.pw-wlaczony #pw-root .pw-siatka-k tbody th { padding: 10px 8px; vertical-align: top; text-align: left; font-weight: 400; }
body.pw-wlaczony #pw-root .pw-siatka-k tbody th b { display: block; font-size: 15px; }
body.pw-wlaczony #pw-root .pw-siatka-k tbody th small { display: block; font-size: 14px; color: #3d4a42; }
body.pw-wlaczony #pw-root .pw-siatka-k td {
  height: 80px; padding: 8px 10px; vertical-align: top; background: #fff; border: 1px solid #dce3de; border-radius: 10px;
}
body.pw-wlaczony #pw-root .pw-siatka-k td.pw-dzis-dzien { background: #f1f7f3; }
body.pw-wlaczony #pw-root .pw-siatka-k td.pw-kratka { border-left: 6px solid var(--k-pasek); }
body.pw-wlaczony #pw-root .pw-siatka-k .pw-przedmiot { font-size: 15px; }
body.pw-wlaczony #pw-root .pw-siatka-k .pw-inna { margin-top: 4px; }

/* telefon: okno wyboru dziecka */
body.pw-wlaczony #pw-root .pw-tlo-arkusza { position: fixed; inset: 0; z-index: 50; background: rgba(20, 28, 24, .45); }
body.pw-wlaczony #pw-root .pw-arkusz {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; display: grid; gap: 8px; background: #fff; border-radius: 16px 16px 0 0;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body.pw-wlaczony #pw-root .pw-arkusz h2 { margin: 0 0 4px; font-size: 17px; }
body.pw-wlaczony #pw-root .pw-opcja {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 12px; border: 1px solid #dce3de; border-radius: 12px;
  background: #fff; color: #1e2a24; font-size: 16px; font-weight: 600; text-align: left;
}
body.pw-wlaczony #pw-root .pw-opcja[aria-pressed="true"] { border: 2px solid #2e6b4e; background: #f1f7f3; }
body.pw-wlaczony #pw-root .pw-zamknij { min-height: 44px; border: 0; border-radius: 12px; background: #e4e9e5; color: #1e2a24; font-size: 15px; font-weight: 700; }
/* skok 25b: odwołanie albo zastępstwo w konkretnym dniu — przedmiot przekreślony przy odwołaniu, napis i komentarz admina */
body.pw-wlaczony #pw-root .pw-odwolana .pw-przedmiot, body.pw-wlaczony #pw-root .pw-siatka td.pw-odwolana b { text-decoration: line-through; opacity: 0.75; }
body.pw-wlaczony #pw-root .pw-zmiana-napis { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: 10px; background: #a1522e; color: #fff; font-size: 14px; font-weight: 700; }
body.pw-wlaczony #pw-root .pw-zastepstwo .pw-zmiana-napis { background: #1f5f8b; }
body.pw-wlaczony #pw-root .pw-zmiana-kom { margin-top: 2px; color: #3d2a12; font-size: 14px; overflow-wrap: anywhere; }
body.pw-wlaczony #pw-root .pw-siatka td.pw-kratka .pw-zmiana-ikona { display: block; margin-top: 2px; font-size: 14px; line-height: 1; }