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

/* Strzałka „Rozwiń / zwiń” folderu. Nosi `.kp-label` (chowa się razem z podpisami przy
   zwiniętym pasku), a `head-2.css` daje KAŻDEMU `#sidebar .kp-label` `pointer-events: none`
   („kliki obsługuje rodzic”). Rodzicem jest tu przycisk nagłówka, który przechodzi do
   pierwszej pozycji — więc klik w strzałkę nawigował zamiast zwijać, a folderu nie dało się
   zwinąć. Oddajemy jej kliki wtedy, gdy podpisy są widoczne: pasek przypięty albo rozwinięty
   najechaniem. Przy zwiniętym pasku zostaje niewidoczna i nieklikalna, jak reszta podpisów. */
html:not([data-sidebar-pinned="0"]) #sidebar .sidebar-group-toggle > .kf-group-chevron,
html[data-sidebar-pinned="0"] #sidebar:hover .sidebar-group-toggle > .kf-group-chevron {
  pointer-events: auto;
  cursor: pointer;
}

/* 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: wąska karta przy równoczesnych wpisach (WeekGrid `ev-card--split`) —
   tytuł zawija się do dwóch linii, krótka nazwa szkoły nie ucina się. */
.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;
}
.ev-card--split .kf-school-mini {
  font-size: 10.5px;
  gap: 3px;
}

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