/* DonHelp - wspólny motyw wizualny wszystkich stron */

/* Zmienne motywu - domyślnie ciemny (dotychczasowy wygląd, bez zmian). Jasny motyw
   nadpisuje je w bloku [data-theme="light"] (patrz niżej) - żadna inna reguła w tym
   pliku nie zna kolorów wprost, wszystko idzie przez te zmienne. */
:root {
    --c-bg: #0b0f19;
    --c-card: #121826;
    --c-cardhover: #1a2234;
    --c-edge: #232d42;
    --c-soft: #8b95ab;
    --c-body-bg: #070b14;
    --c-body-text: #e6eaf2;
    --c-card-glass: rgba(15, 21, 36, 0.72);
    --c-heading: #ffffff;
    --c-overlay-5: rgba(255, 255, 255, 0.05);
    --c-overlay-10: rgba(255, 255, 255, 0.10);
    --c-overlay-20: rgba(255, 255, 255, 0.20);
    --c-scrollbar: #232d42;
    --c-scrollbar-hover: #2d3a56;
    --c-selection: rgba(99, 102, 241, 0.4);
    color-scheme: dark;
}
:root[data-theme="light"] {
    --c-bg: #eef0f5;
    --c-card: #ffffff;
    --c-cardhover: #f3f4f8;
    --c-edge: #dde1e8;
    --c-soft: #5b6579;
    --c-body-bg: #f4f5f9;
    --c-body-text: #161b26;
    --c-card-glass: rgba(255, 255, 255, 0.85);
    --c-heading: #0f172a;
    --c-overlay-5: rgba(15, 23, 42, 0.05);
    --c-overlay-10: rgba(15, 23, 42, 0.08);
    --c-overlay-20: rgba(15, 23, 42, 0.14);
    --c-scrollbar: #d7dbe3;
    --c-scrollbar-hover: #c3c9d4;
    --c-selection: rgba(99, 102, 241, 0.25);
    color-scheme: light;
}

/* html BEZ własnego background - przeglądarka wtedy z automatu "podnosi" background body
   na canvas/viewport (specyfikacja CSS, propagacja tła root<-body), co maluje je PONIŻEJ
   warstwy o ujemnym z-index (body::before niżej) - dlatego animowane poświaty były
   NIEWIDOCZNE niezależnie od opacity/rozmiaru. Jawny background na html wyłącza tę propagację. */
html {
    background: var(--c-body-bg);
}
body {
    background: var(--c-body-bg);
    color: var(--c-body-text);
    font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* Własny kontekst stackowania - dzięki temu z-index:-1 na body::before liczy się
       WZGLĘDEM body (nad jego tłem, pod resztą treści), a nie ucieka do korzenia dokumentu. */
    isolation: isolate;
}

/* Delikatne poświaty w tle - nadają głębię bez rozpraszania, ale user chciał żeby faktycznie
   PRZEMIESZCZAŁY SIĘ po całym ekranie, nie tylko delikatnie drgały w miejscu. Zamiast animować
   transform CAŁEJ warstwy naraz (poprzednie podejście - trzy plamy poruszały się jako jedna
   sztywna grupa o tę samą deltę, więc nawet przy dużej amplitudzie wyglądało to jak drganie,
   nie wędrówka) - teraz każda plama to OSOBNA warstwa background z własnym `background-size`
   (kotwica większa niż viewport, 140-160vw/vh) i animowanym NIEZALEŻNIE `background-position`
   między odległymi rogami. To realnie animowalna właściwość CSS (w przeciwieństwie do "at X% Y%"
   zaszytego wewnątrz samego radial-gradient(), które jest statyczne) - każda plama wędruje
   własną trasą, więc ruch jest oczywisty i nie wygląda jak sztywny blok. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(70rem 40rem, rgba(139, 92, 246, 0.26), transparent 70%),
        radial-gradient(60rem 34rem, rgba(99, 102, 241, 0.24), transparent 70%),
        radial-gradient(55rem 40rem, rgba(14, 165, 233, 0.16), transparent 70%);
    background-size: 160vw 160vh, 150vw 150vh, 140vw 140vh;
    background-position: 90% -10%, -10% 10%, 50% 110%;
    animation: bg-float 18s ease-in-out infinite alternate;
}
:root[data-theme="light"] body::before {
    background-image:
        radial-gradient(70rem 40rem, rgba(139, 92, 246, 0.15), transparent 70%),
        radial-gradient(60rem 34rem, rgba(99, 102, 241, 0.14), transparent 70%),
        radial-gradient(55rem 40rem, rgba(14, 165, 233, 0.1), transparent 70%);
}
@keyframes bg-float {
    0%   { background-position: 90% -10%, -10% 10%, 50% 110%; }
    50%  { background-position: 15% 55%,  75% 70%,  25% 15%; }
    100% { background-position: 5% 95%,   95% -5%,  85% 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

h1, h2, h3 { letter-spacing: -0.02em; }

::selection { background: var(--c-selection); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--c-scrollbar); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hover); }

input, textarea, select { color-scheme: inherit; }
input[type=checkbox] { accent-color: #6366f1; width: 1.1rem; height: 1.1rem; cursor: pointer; flex-shrink: 0; }

.bg-indigo-600 {
    background-image: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px -6px rgba(99, 102, 241, 0.45);
}
.hover\:bg-indigo-500:hover {
    background-image: linear-gradient(135deg, #7679f5, #9d6ef8);
    box-shadow: 0 6px 20px -6px rgba(99, 102, 241, 0.6);
}

/* Karty: minimalna szklana głębia */
.bg-card {
    background-color: var(--c-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Gradientowy tekst akcentowy (nagłówki landing) */
.text-grad {
    background: linear-gradient(120deg, #818cf8, #c084fc 60%, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* "Biały" tekst/tło w reszcie aplikacji oznacza semantycznie "maksymalny kontrast /
   neutralna nakładka", nie dosłownie kolor biały - w jasnym motywie białe napisy na
   jasnym tle byłyby niewidoczne, więc te klasy Tailwind są tu świadomie nadpisane
   zmiennymi motywu. WAŻNE: w przeciwieństwie do bg-card/text-soft itd. (które działają,
   bo tailwind.config w app.php sam już wskazuje na te same zmienne), "white" to WBUDOWANY
   kolor Tailwind (nie zmieniany w config), a jego <style> z CDN faktycznie ląduje w DOM PO
   tym pliku (zweryfikowane w przeglądarce) - więc bez !important tu przegrywa w kaskadzie.
   Bez !important w dark mode wygląda identycznie (obie strony dają #fff), stąd błąd ujawnił
   się dopiero przy realnym teście jasnego motywu, nie od razu. */
.text-white { color: var(--c-heading) !important; }
.hover\:text-white:hover { color: var(--c-heading) !important; }
.bg-white\/5 { background-color: var(--c-overlay-5) !important; }
.bg-white\/10 { background-color: var(--c-overlay-10) !important; }
.bg-white\/20 { background-color: var(--c-overlay-20) !important; }
.hover\:bg-white\/5:hover { background-color: var(--c-overlay-5) !important; }
.hover\:bg-white\/10:hover { background-color: var(--c-overlay-10) !important; }
.hover\:bg-white\/20:hover { background-color: var(--c-overlay-20) !important; }
.peer:checked ~ .peer-checked\:border-white { border-color: var(--c-heading) !important; }

/* Przyciski z NASYCONYM, jednolitym tłem (indigo/emerald/red - główne CTA, "Uruchom tutaj",
   błędny toast) mają zawsze biały tekst, niezależnie od motywu - w przeciwieństwie do
   .text-white wyżej (który adaptuje się do motywu dla zwykłego tekstu na karcie), tu tło
   jest zawsze nasycone więc tekst MUSI zostać biały w obu motywach. MUSI być PO regule
   .text-white powyżej: aktywna zakładka nawigacji ("Dziś" gdy wybrana) ma jednocześnie
   bg-indigo-600 ORAZ text-white - obie reguły mają !important, więc przy równej
   specyficzności wygrywa ta zadeklarowana PÓŹNIEJ w tym pliku (musi być ta biała). */
.bg-indigo-600, .hover\:bg-indigo-500:hover, .bg-emerald-600, .hover\:bg-emerald-500:hover, .bg-red-600 {
    color: #fff !important;
}

/* Odznaki/chipy na przezroczystym tle indigo (PRO, "aktywny", inicjały członka, przycisk
   "Asystent" na liście zadań) - jasny tekst (text-indigo-300) na wąskiej poświacie indigo
   (bg-indigo-600/N, różne N: 20/30/40 w różnych miejscach) miał sens tylko na ciemnym tle;
   w jasnym motywie robił się blady i mało czytelny. Selektor atrybutowy (podciąg w nazwie
   klasy) łapie WSZYSTKIE użyte ułamki opacity naraz, bez wymieniania każdego z osobna.
   Celowo NIE dotyka samego text-indigo-300 używanego gdzie indziej jako zwykły akcent
   tekstowy (np. przy nazwie osoby przypisanej) - tam kontrast na białej karcie wystarcza. */
:root[data-theme="light"] [class*="bg-indigo-600/"][class*="text-indigo-300"] {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: #4338ca !important;
}

.task-done { text-decoration: line-through; opacity: 0.45; }
.modal-open { overflow: hidden; }
.ai-response { white-space: pre-wrap; }