/*
 * Kolor szkoły — wyłącznie frontend (web zna tylko jedną szkołę naraz).
 * `--school` ustawia `SchoolColorsProvider` na każdym elemencie z `data-school`
 * (src/lib/schoolColors.tsx); wartości to tokeny DS `--c-*`, wybierane przez
 * użytkownika. Wypełnienia liczone względem `--surface`, więc tryb ciemny
 * dzieje się sam.
 */

/* Etykieta szkoły przy wpisie: kropka + nazwa. */
.kf-school-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 1px 8px 1px 6px;
  border-radius: 9999px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--ink);
  background: var(--surface);
  background: color-mix(in srgb, var(--school, var(--muted)) 14%, var(--surface));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--school, var(--muted)) 38%, var(--surface));
}
.kf-school-tag::before,
.kf-school-dot {
  content: "";
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--school, var(--muted));
}
.kf-school-dot {
  vertical-align: middle;
}
.kf-school-dot--sm {
  width: 6px;
  height: 6px;
}

/* Rozbicie sumy na szkoły (`SchoolSplit`): „● Wrocław 5” — kropka w kolorze szkoły,
   krótka nazwa widoczna (sama kropka była nieczytelna, uwaga właściciela 2026-10-13). */
.kf-school-split {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 2px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.kf-school-split-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.kf-school-split-name {
  font-weight: 500;
}

/* `SchoolTag short`: kropka + krótka nazwa szkoły w ciasnym miejscu (wiersz, karta). */
.kf-school-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}
.kf-school-mini .kf-school-dot {
  flex: none;
}
.kf-school-split--on-fill {
  color: var(--on-fill);
}
.kf-school-split--on-fill .kf-school-dot {
  box-shadow: 0 0 0 1.5px var(--on-fill);
}

/* Blok w siatce (kalendarz, plan): obwódka w kolorze szkoły, wypełnienie zostaje
   kolorem przedmiotu jak w webie. */
.kf-school-ring {
  box-shadow: 0 0 0 2px var(--school, transparent);
}

/* Wiersz listy/tabeli ze szkoły — pasek na samym brzegu wiersza. */
.kf-school-row {
  box-shadow: inset 3px 0 0 var(--school, transparent);
}

/* Strona osadzona z kilku szkół naraz (nieprzeniesiona do Reacta): nagłówek sekcji. */
.kf-school-section + .kf-school-section {
  margin-top: var(--sp-8, 32px);
}
.kf-school-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 80rem;
  margin: 0 auto var(--sp-4, 16px);
  padding: 8px 14px;
  border-radius: 12px;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--ink);
  background: var(--surface);
  background: color-mix(in srgb, var(--school, var(--muted)) 12%, var(--surface));
}
.kf-school-section-head .kf-school-dot {
  width: 10px;
  height: 10px;
}

/* Menu boczne: pozycja dostępna tylko w części szkół konta. */
.kf-nav-schools {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin-left: auto;
  padding-left: 6px;
  min-width: 0;
}
.kf-nav-school {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  color: var(--muted);
}
.kf-nav-school .kf-school-dot {
  flex: none;
}
/* Oznaczenia szkół nie kurczą się: przy długiej nazwie pozycji („Zamknięcie frekwencji”,
   „Panel wychowawcy”) kontener schodził do kilku pikseli, a jego treść wylewała się w lewo
   na nazwę (1280 px). Miejsce oddaje nazwa — zawija się do drugiej linii. */
#sidebar .kf-nav-schools {
  flex: none;
  max-width: 76px;
}
#sidebar :has(> .kf-nav-schools) > .kp-label.flex-1 {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* Link „Przejdź do treści” — jak `.skip-link` w `base.html` Kropki (2026-10-19). Kopia
   oprawy (`ks/_chrome/head-2.css`) jest sprzed tej reguły, więc stoi tutaj. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 120ms;
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* Panel konta: kolory szkół. */
.kf-school-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}
.kf-school-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.kf-school-picker-row:hover {
  background: var(--paper);
}
.kf-school-picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kf-school-picker-role {
  color: var(--muted);
  font-size: 11px;
}
.kf-swatch {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  transition: transform 120ms;
}
.kf-swatch:active {
  transform: scale(0.92);
}
.kf-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ink);
}
.kf-swatches {
  display: grid;
  grid-template-columns: repeat(6, 18px);
  gap: 8px;
  padding: 6px 10px 10px 38px;
}
.kf-school-picker-reset {
  align-self: flex-start;
  margin: 2px 10px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.kf-school-picker-reset:hover {
  color: var(--ink);
}

/* Strona osadzona (WebFallback): treść szkoły jeszcze się wczytuje. */
.kf-embed-loading {
  max-width: 80rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
}

/* Wybór szkoły nad formularzem tworzenia na widoku wspólnym (WebFallback). */
.kf-school-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 80rem;
  margin: 0 auto 16px;
}
.kf-school-choice-label {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.kf-school-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 13px/18px var(--font-body, Inter, sans-serif);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.kf-school-choice-btn[aria-checked="true"] {
  border-color: var(--school, var(--blue-600));
  background: var(--surface);
  background: color-mix(in srgb, var(--school, var(--blue-600)) 12%, var(--surface));
}
.kf-school-choice-btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* Kalendarz i plan: szkoła na karcie to tylko kropka w linii meta (`SchoolTag dot`), a gdy
   w widoku jest jedna szkoła — nic; pełna nazwa w title, legenda raz nad siatką. Wąska karta
   przy równoczesnych wpisach (WeekGrid `ev-card--split`): tytuł zawija się do dwóch linii. */
.ev-card--split .ev-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 11.5px;
  line-height: 13px;
}
.ev-card--split .ev-card-body {
  padding-left: 5px;
  padding-right: 4px;
}
.kf-school-dot--card {
  width: 7px;
  height: 7px;
  align-self: center;
}
.ev-card-top-left .ev-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Priorytet treści przy zwężeniu: przedmiot > godzina > sala/oddział. Karta jest kontenerem
   `kal-ev` (calendar.css), więc sala znika po szerokości karty, nie okna. */
@container kal-ev (max-width: 130px) {
  .ev-room { display: none; }
}

/* Legenda szkół nad siatką: „● Białystok ● Wrocław”. */
.kf-school-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 8px 4px 10px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--muted);
}
.kf-school-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Przełącznik szkoły nad ekranem konfiguracji (`SchoolSwitch` — ustawienia, edytor paska):
   ten sam przycisk co wybór szkoły przy tworzeniu, ale w nagłówku strony, bez centrowania. */
.kf-school-choice--bar {
  max-width: none;
  margin: var(--sp-4, 16px) 0 0;
}
.kf-school-choice-btn:hover {
  border-color: var(--school, var(--border));
}
.kf-school-choice-btn:active {
  transform: scale(0.98);
}

/* Operacja tylko w starym interfejsie szkoły (`src/lib/legacy.ts`): informacja + przycisk. */
.kf-legacy-notice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.kf-legacy-notice .kp-alert { align-self: stretch; }

/* ── Pasek boczny: ucinanie, fokus, szuflada ───────────────────────────────────────────────
   Nagłówek folderu to od 2026-11-06 jeden przycisk `sidebar-group-toggle` ze strzałką w środku,
   jak w webie (`templates/base.html`) — style wiersza z osobnym przyciskiem strzałki zniknęły. */

/* Długie nazwy przy widocznych podpisach zawijają się do drugiej linii (jak dotąd —
   wielokropek obok „● Wrocław” zostawiał z nazwy kilka liter). Przy zwiniętym pasku podpis
   ma szerokość 0 i zawijał się słowo pod słowem, rozciągając wiersz na kilkaset pikseli
   (dziury między ikonami) — tam `nowrap`. */
#sidebar .kp-nav-item > .kp-label.flex-1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* zawijanie po słowach; słowo dłuższe niż wiersz — wielokropek, nie „Komunik/acja”
     (baza ma `overflow-wrap: anywhere`) */
  overflow-wrap: normal;
}
@media (min-width: 768px) {
  html[data-sidebar-pinned="0"] #sidebar:not(:hover) .kp-nav-item > .kp-label.flex-1 {
    white-space: nowrap;
  }
}
#sidebar .kp-nav-item > .kp-badge,
#sidebar .kp-nav-item > .kf-nav-schools {
  flex-shrink: 0;
}

/* Widoczny fokus z klawiatury (wiersze mają zaokrąglenie pigułki, więc obrys do środka). */
#sidebar .kp-nav-item:focus-visible,
#sidebar .sidebar-pinbtn:focus-visible,
#sidebar a:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
}

/* Telefon: zamknięta szuflada jest poza ekranem, ale jej linki łapały Tab — chowamy je
   po zakończeniu animacji zamykania, a przy otwieraniu odsłaniamy od razu. */
@media (max-width: 767px) {
  #sidebar:not(.mobile-open) {
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
  }
  #sidebar {
    max-width: 100vw;
    overscroll-behavior: contain;
  }
}
nav[aria-label="Nawigacja główna"] {
  overscroll-behavior: contain;
}

/* ── Przełącznik szkoły przy logo (`SchoolScopePicker`, 2026-11-09) ─────────────────────── */

/* Stos znaczków szkół (litera w kolorze szkoły): ikona „Wszystkie szkoły” i oznaczenie pozycji menu dostępnej
   w kilku szkołach. Znaczki nachodzą na siebie jak awatary — przy 3–4 szkołach zajmują tyle
   miejsca co jedna nazwa, zamiast kolumny nazw. */
.kf-dot-stack {
  display: inline-flex;
  align-items: center;
  flex: none;
}
/* Kółko szkoły w stosie: kolor szkoły, bez litery; obwódka w kolorze tła oddziela nachodzące
   kółka (decyzja właściciela 2026-11-09 — mniejsze kółko zamiast znaczka z literą). */
.kf-school-badge {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: var(--school, var(--muted));
  box-shadow: 0 0 0 1.5px var(--surface);
}
.kf-dot-stack .kf-school-badge + .kf-school-badge {
  margin-left: -3px;
}
.kf-dot-stack-more {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#sidebar .kf-nav-schools--stack {
  flex-direction: row;
  align-items: center;
  max-width: none;
}
/* Na aktywnej pozycji (wypełnienie akcentem) obwódka znaczków w kolorze wypełnienia, nie bieli. */
#sidebar .kp-nav-item.active .kf-school-badge {
  box-shadow: 0 0 0 1.5px var(--kp-color, var(--blue-600));
}

/* Znak Kropki w kolorze szkoły, którą widać. */
.kp-brand-mark.kf-brand-school {
  background: var(--school, var(--blue-600));
  transition: background-color 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.kf-scope {
  position: relative;
  margin: -14px 0 12px;
}
#sidebar .kf-scope-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
}
#sidebar .kf-scope-btn:hover {
  background: var(--surface);
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}
.kf-scope-icon {
  display: grid;
  place-items: center;
}
.kf-scope-dot {
  width: 12px;
  height: 12px;
}
.kf-scope-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.kf-scope-caption {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}
.kf-scope-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.kf-scope-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.kf-scope-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 120ms;
}
.kf-scope-opt:hover:not(:disabled),
.kf-scope-opt:focus-visible {
  background: var(--surface);
  background: color-mix(in srgb, var(--school, var(--ink)) 9%, var(--surface));
  outline: none;
}
.kf-scope-opt[aria-selected="true"] {
  font-weight: 600;
}
.kf-scope-opt:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: not-allowed;
}
.kf-scope-opt > .kf-school-dot {
  width: 10px;
  height: 10px;
}
.kf-scope-opt > svg {
  margin-left: auto;
  flex: none;
  color: var(--blue-600);
}
.kf-scope-opt-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kf-scope-opt-role {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.kf-scope-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.kf-scope-note {
  margin: 4px 10px 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}
/* Zwinięty pasek: otwarta lista trzyma go rozwiniętym (jak najechanie), inaczej podpisy
   gasną, gdy kursor zjedzie z paska w trakcie wyboru. */
@media (min-width: 768px) {
  html[data-sidebar-pinned="0"] #sidebar:has(.kf-scope-menu) {
    width: 248px;
    box-shadow: var(--shadow-card);
  }
  html[data-sidebar-pinned="0"] #sidebar:has(.kf-scope-menu) .kp-label {
    opacity: 1;
    pointer-events: auto;
  }
  html[data-sidebar-pinned="0"] #sidebar:not(:hover):not(:has(.kf-scope-menu)) .kf-scope-btn {
    border-color: transparent;
    background: transparent;
  }
}

/* ── Siatka kalendarza przy równoległych wpisach (WeekGrid `kal-grid--lanes`, 2026-11-09) ──
   `--kal-col-min` ustawia WeekGrid z liczby pasów, więc przy wąskim oknie siatka przewija się
   w poziomie zamiast ściskać karty. Oś godzin zostaje wtedy przyklejona do lewej krawędzi. */
.kal-grid--lanes > .kal-axis,
.kal-grid--lanes > div:first-child,
.kal-grid--lanes > .kal-allday-axis {
  position: sticky;
  left: -20px;
  z-index: 75;
  background: var(--surface);
  box-shadow: 8px 0 0 var(--surface);
}
/* Karta węższa niż ~70 px (telefon, wiele pasów mimo przewijania): godzinę niesie położenie
   karty i podpowiedź, zostaje tytuł — „0…” nie mówiło nic. */
@container kal-ev (max-width: 72px) {
  .ev-card-top-left .ev-meta { display: none; }
}

/* Jeden alert dla kilku szkół (pulpit — zamknięcie frekwencji): przejście do każdej szkoły. */
.kf-alert-schools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.kf-alert-school {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms;
}
a.kf-alert-school:hover {
  border-color: var(--school, var(--border));
}
/* Ikona przełącznika ma szerokość ikony menu — kółka ciaśniej nachodzące. */
.kf-scope-icon .kf-dot-stack .kf-school-badge + .kf-school-badge {
  margin-left: -4px;
}

/* Wybór szkoły nad stroną jednej szkoły naraz (`PageSchoolBar`, 2026-11-09). Stoi nad treścią
   strony, w tej samej kolumnie co jej nagłówek; kolor szkoły na obwódce i kropce. */
.kf-page-school {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 80rem;
  margin: 0 auto var(--sp-4, 16px);
}
.kf-page-school-caption {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.kf-page-school-wrap {
  position: relative;
}
.kf-page-school-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--school, var(--border)) 55%, var(--surface));
  border-radius: 9999px;
  background: var(--surface);
  background: color-mix(in srgb, var(--school, var(--surface)) 10%, var(--surface));
  color: var(--ink);
  font: 600 13px/18px var(--font-body, Inter, sans-serif);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.kf-page-school-btn:hover:not(.is-static) {
  border-color: var(--school, var(--border));
}
.kf-page-school-btn:active:not(.is-static) {
  transform: scale(0.98);
}
.kf-page-school-btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}
.kf-page-school-btn.is-static {
  cursor: default;
}
.kf-page-school-btn > svg {
  color: var(--muted);
}
.kf-page-school-menu {
  right: auto;
  min-width: 260px;
}

/* Baner „Część danych może być niepełna”: tekst ma szerokość bazową, więc przy wąskim
   ekranie przyciski schodzą pod niego (dotąd `flex-basis: 0` ściskał tekst do jednego słowa). */
.kf-missing .kp-alert__body {
  flex: 1 1 260px;
}
.kf-missing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}