/*
 * Domyślne tokeny motywu Blazor Blueprint UI (OKLCH) — zastępuje ręczny, węższy zestaw
 * HSL, który wcześniej żył w Styles/tailwind-input.css (PLAN.md "Dashboard: UI" spike,
 * zakończony wyborem Blazor Blueprint UI). To jest fallback dla selektorów root i dark
 * czytany przez skompilowany _content/BlazorBlueprint.Components/blazorblueprint.css
 * (patrz blazorblueprint-input.css: "radius-lg: var(radius)" itd. — pakiet NIE definiuje
 * tych zmiennych sam, oczekuje ich od konsumenta) oraz przez naszą własną
 * Styles/tailwind-input.css (klasy typu bg-background/text-foreground/border-border).
 *
 * Uwaga przy edycji tego pliku: unikać sekwencji znaków gwiazdka-ukośnik w komentarzach
 * (np. przy wypisywaniu nazw zmiennych z końcówką "-cokolwiek") — przedwcześnie zamyka to
 * komentarz CSS i po cichu psuje resztę pliku (tak właśnie ten plik został raz zepsuty:
 * ":root" wypadło całkowicie, zostawiając tylko ciemny motyw).
 *
 * Konwencja .dark (nie tylko prefers-color-scheme) zachowana 1:1 — patrz
 * wwwroot/js/theme.js (localStorage + toggle) i tailwind.config.js (darkMode: "class").
 */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  --alert-success: oklch(0.55 0.20 142);
  --alert-success-foreground: oklch(0.30 0.09 142);
  --alert-success-bg: oklch(0.993 0.003 142);
  --alert-info: oklch(0.50 0.20 255);
  --alert-info-foreground: oklch(0.30 0.10 255);
  --alert-info-bg: oklch(0.993 0.003 255);
  --alert-warning: oklch(0.68 0.18 55);
  --alert-warning-foreground: oklch(0.35 0.10 55);
  --alert-warning-bg: oklch(0.995 0.003 55);
  --alert-danger: oklch(0.55 0.22 27);
  --alert-danger-foreground: oklch(0.30 0.12 27);
  --alert-danger-bg: oklch(0.993 0.003 27);

  --chart-1: oklch(0.81 0.10 252);
  --chart-2: oklch(0.62 0.19 260);
  --chart-3: oklch(0.55 0.22 263);
  --chart-4: oklch(0.49 0.22 264);
  --chart-5: oklch(0.42 0.18 266);

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --radius: 0.625rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, monospace;

  --sidebar-width: 16rem;
  --sidebar-width-mobile: 18rem;
  --sidebar-width-icon: 3rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.275 0 0);
  --input: oklch(0.325 0 0);
  --ring: oklch(0.556 0 0);

  --alert-success: oklch(0.60 0.18 142);
  --alert-success-foreground: oklch(0.90 0.06 142);
  --alert-success-bg: oklch(0.18 0.008 142);
  --alert-info: oklch(0.55 0.18 255);
  --alert-info-foreground: oklch(0.90 0.05 255);
  --alert-info-bg: oklch(0.18 0.008 255);
  --alert-warning: oklch(0.65 0.16 55);
  --alert-warning-foreground: oklch(0.92 0.06 55);
  --alert-warning-bg: oklch(0.19 0.008 55);
  --alert-danger: oklch(0.55 0.20 27);
  --alert-danger-foreground: oklch(0.90 0.06 27);
  --alert-danger-bg: oklch(0.18 0.008 27);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.275 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/*
 * Ręcznie pisane odpowiedniki garstki klas Tailwind, których nasze .razor jeszcze
 * używają, a których nie ma w skompilowanym blazorblueprint.css (ten zawiera tylko
 * klasy, których biblioteka faktycznie sama używa wewnętrznie). Zastępuje własny build
 * Tailwind (usunięty) — patrz uzasadnienie usunięcia: blazorblueprint.css (Tailwind v4)
 * i nasz poprzedni własny build (Tailwind v3) współdzieliły nazwę zmiennej
 * --tw-translate-x dla dwóch RÓŻNYCH mechanizmów (composited transform w v3 vs natywna
 * właściwość CSS "translate" w v4) — nasz unlayered reset (*,:after,:before{--tw-translate-x:0})
 * bił w kaskadzie warstwowe reguły blazorblueprint.css niezależnie od kolejności/specyficzności
 * (CSS Cascade Layers: reguły spoza @layer zawsze wygrywają z regułami W @layer), po cichu
 * zerując każdą animację/przesunięcie opartą o translate w komponentach Bb* (stąd np. switch,
 * który zmieniał tylko tło, nie pozycję kciuka).
 */
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--ring)); }
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: var(--ring); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.hover\:text-sidebar-accent-foreground:hover { color: var(--sidebar-accent-foreground); }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.max-w-\[20rem\] { max-width: 20rem; }
.max-w-\[10rem\] { max-width: 10rem; }
.max-w-\[6rem\] { max-width: 6rem; }
.min-w-\[10rem\] { min-width: 10rem; }
.min-w-\[12rem\] { min-width: 12rem; }
.mb-0 { margin-bottom: 0; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}