/* ═══════════════════════════════════════ ZMIENNE KOLORÓW (CSS Custom Properties) ═══════════════════════════════════════ */ :root { --accent: #3C2A21; --accent-light: color-mix(in srgb, #3C2A21 12%, transparent); --accent-muted: color-mix(in srgb, #3C2A21 60%, #888); --accent-subtle: color-mix(in srgb, #3C2A21 10%, white); /* Tło kafelków planu lekcji — jasny kolor z pełną nieprzezroczystością */ --accent-light-no-opacity: color-mix(in srgb, var(--accent) 8%, white); --color-accent: var(--accent); /* kompatybilność z Tailwind v4 */ } /* Fallbacki ról — zawsze aktywne; nadpisywane przez motywy z bazy */ body.role-super_admin, body.role-admin, body.role-director { --accent: #3C2A21; --accent-light: color-mix(in srgb, #3C2A21 12%, transparent); --accent-muted: color-mix(in srgb, #3C2A21 60%, #888); --accent-subtle: color-mix(in srgb, #3C2A21 10%, white); } body.role-teacher, body.role-pedagogue { --accent: #2A3C31; --accent-light: color-mix(in srgb, #2A3C31 12%, transparent); --accent-muted: color-mix(in srgb, #2A3C31 60%, #888); --accent-subtle: color-mix(in srgb, #2A3C31 10%, white); } body.role-student, body.role-parent { --accent: #21303C; --accent-light: color-mix(in srgb, #21303C 12%, transparent); --accent-muted: color-mix(in srgb, #21303C 60%, #888); --accent-subtle: color-mix(in srgb, #21303C 10%, white); } /* Motywy z bazy danych — nadpisują fallbacki powyżej */ /* ═══════════════════════════ KLASY POMOCNICZE ═══════════════════════════ */ .custom-accent-text { color: var(--accent) !important; } .custom-accent-muted { color: var(--accent-muted) !important; } .custom-accent-svg { stroke: var(--accent) !important; } .custom-accent-bg { background-color: var(--accent) !important; } .custom-accent-border { border-color: var(--accent) !important; } .custom-accent-subtle-bg { background-color: var(--accent-subtle) !important; } /* ═══════════════════════════ SIDEBAR — nowy design (klasy .kp-*) ─────────────────────────── Pasek jest WYSPĄ na tokenach design systemu: nie używa --accent ani klas custom-accent-*, tylko --surface/--border/--muted i palety kategorycznej --c-*. Reszta aplikacji zostaje na akcencie roli. Kolor pojedynczej pozycji wjeżdża zmienną --kp-color ustawianą inline przy elemencie (wartość to token var(--c-…), nigdy hex). ═══════════════════════════ */ #sidebar { background: var(--surface); /* Ramka TYLKO z prawej. Rozpisana na trzy własności, żeby pozostałe krawędzie wróciły do wartości początkowych CSS zamiast zostawać na `solid` z preflightu Tailwinda — niewidoczne przy zerowej szerokości, ale mierzalne. (Obie gałęzie naprawiły to niezależnie: tu została wersja z `main`, rozpisana na longhandy; wariant `border: none` + `border-right` daje ten sam computed style, ale wymaga pilnowania kolejności, bo skrót kasuje prawą krawędź.) */ border-style: none solid none none; border-color: currentColor var(--border) currentColor currentColor; border-width: 0 1px 0 0; /* Pasek jest wyspą na tokenach, ale sam KONTENER dziedziczył typografię i kolor po z klasami Tailwinda: stos `ui-sans-serif` zamiast `--font-body`, `line-height: 24px` zamiast `normal` i `rgb(17,24,39)` (gray-900) zamiast `--ink`. Pozycje mają własne deklaracje, więc rozjazd był widoczny dopiero w pomiarze kontenera, nie gołym okiem. */ font-family: var(--font-body); line-height: normal; color: var(--ink); /* Fallback koloru pozycji. MUSI stać tutaj, a nie na .kp-nav-item: własność niestandardowa zadeklarowana na samym elemencie wygrywa z wartością odziedziczoną, więc deklaracja na .kp-nav-item zablokowałaby --kp-color ustawiane na kontenerze (stopka paska, blok dzieci folderu). */ --kp-color: var(--muted); } /* Szyna nawigacji bez WIDOCZNEGO paska przewijania. Przewijanie zostaje (`overflow-y: auto` na