/*
 * Ciemny Motyw - Wersja z dokładnym tłem z oryginalnego pliku
 */

:root {
    /* Powierzchnie i tekst bazowy */
    --text-primary-dark: rgba(255, 255, 255, 0.85);
    --text-secondary-dark: rgba(255, 255, 255, 0.6);
    --bg-card-dark: rgba(30, 35, 40, 0.75);
    --border-color-dark: rgba(255, 255, 255, 0.1);

    /* Aliasy zgodności — kilka reguł używało błędnej (niezdefiniowanej)
       nazwy --text-dark-primary/secondary zamiast --text-primary-dark itd.
       Definiujemy je, aby te deklaracje przestały być nieważne. */
    --text-dark-primary: var(--text-primary-dark);
    --text-dark-secondary: var(--text-secondary-dark);

    /* Paleta motywu — skonsolidowane, wcześniej rozproszone literały
       (te same wartości; jedno miejsce do zmiany). */
    --dt-text: #e5e7eb;            /* tekst pól / przycisków pomocniczych */
    --dt-text-strong: #e8edf7;     /* mocniejszy tekst (patch auth) */
    --dt-link: #9ec5ff;            /* linki w kartach */
    --dt-link-hover: #cfe4ff;
    --dt-focus: #23d997;           /* pierścień fokusu pól (rozważ = akcent) */
    --dt-accent-blue: #3b82f6;     /* przyciski primary (gradient) */
    --dt-accent-blue-2: #60a5fa;   /* fokus/hover auth */
    --dt-accent-green: #22c55e;    /* przyciski success (gradient) */
    --dt-on-success: #0b1b10;      /* tekst na zielonym przycisku */
    --icon-on-dark: #e7f1ff;       /* ikony paska na ciemnym tle */
    --icon-on-light: #1b3b6a;      /* ikony paska na jasnym tle */
}

body[data-bs-theme="dark"] {
    /* DOKŁADNY KOD TŁA Z TWOJEGO PLIKU STYLE.CSS */
    background:
        radial-gradient(900px 600px at 70% 5%, rgba(255, 210, 80, 0.28), transparent 60%),
        radial-gradient(900px 700px at 20% 35%, rgba(160, 70, 255, 0.25), transparent 60%),
        radial-gradient(800px 600px at 85% 35%, rgba(80, 220, 255, 0.25), transparent 60%),
        radial-gradient(800px 600px at 40% 80%, rgba(255, 90, 120, 0.18), transparent 60%),
        linear-gradient(180deg, #0b1623 0%, #0a1320 35%, #0a111b 100%);
    background-attachment: fixed;
    color: var(--text-primary-dark); /* Zachowujemy poprawiony, jasny kolor tekstu */
}

/* Pozostałe style (karty, nawigacja, kafelki, itd.) pozostają bez zmian */
.card {
    background-color: var(--bg-card-dark);
    border: 1px solid var(--border-color-dark);
    backdrop-filter: blur(10px);
}

.list-group-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color-dark);
    color: var(--text-primary-dark);
}

.list-group-item-action:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar {
    background-color: var(--bg-card-dark) !important;
    backdrop-filter: blur(10px);
}

.form-control {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--border-color-dark);
    color: white;
}

.form-control:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--dt-focus);
    box-shadow: 0 0 0 0.25rem rgba(35, 217, 151, 0.25);
    color: white;
}

.interactive-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color-dark);
}

.interactive-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.interactive-tile:hover .interactive-tile-img {
    transform: scale(1.1);
}

.interactive-tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0) 60%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.interactive-tile-title {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.quiz-style-default .list-group-item {
    transition: background-color 0.3s;
}

.quiz-style-default .list-group-item.bg-success,
.quiz-style-default .list-group-item.bg-danger {
    color: white !important;
}

/* Style dla przyklejonego navbara w ciemnym motywie */
#main-navbar.is-fixed {
    /* Używamy istniejących zmiennych dla tła navbar-app, ale z mniejszą przezroczystością */
    background-color: rgba(10, 12, 15, 0.85) !important; 
    backdrop-filter: blur(8px);
     /* Używamy istniejącej zmiennej dla koloru ramki */
    border-bottom: 1px solid var(--border-color-dark) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Dodajemy subtelny cień */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* === Auth & Onboarding polish === */
.auth-hero { border-radius: 1rem; overflow: hidden; }

.interactive-tile {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color-dark);
  background: rgba(255,255,255,.02);
  transition: transform .2s ease, box-shadow .2s ease;
}
.interactive-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.interactive-tile-overlay {
  background: linear-gradient(to top, rgba(10,15,25,.85) 0%, rgba(10,15,25,.2) 60%, rgba(10,15,25,0) 100%);
  padding: 1rem 1.25rem;
}

/* === UPIĘKSZENIA EKRANU LOGOWANIA/REJESTRACJI (bez zmian logiki) === */

/* Karta */
.quiz-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.05), transparent 60%)
              ,rgba(20,24,34,.65);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Zakładki (Logowanie / Rejestracja) */
.quiz-card .nav-tabs { border-bottom: 0; gap: .5rem; }
.quiz-card .nav-tabs .nav-link {
  color: #9ca3af;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: .6rem 1rem;
  transition: all .15s ease;
}
.quiz-card .nav-tabs .nav-link:hover {
  color: var(--dt-text);
  background: rgba(255,255,255,.04);
}
.quiz-card .nav-tabs .nav-link.active {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

/* Pola */
.quiz-card .form-control {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--dt-text);
  border-radius: 12px;
}
.quiz-card .form-control::placeholder { color: #9aa4b2; }
.quiz-card .form-control:focus {
  border-color: var(--dt-accent-blue-2);
  box-shadow: 0 0 0 .2rem rgba(96,165,250,.25);
}

/* Przycisk „Pokaż/Ukryj” przy haśle */
.quiz-card .input-group .btn {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--dt-text);
}
.quiz-card .input-group .btn:hover {
  background: rgba(255,255,255,.10);
}

/* PRZYCISKI – wyraźne obramowanie + kontrast */
.quiz-card .btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Primary: Zaloguj się */
.quiz-card .btn-primary {
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, var(--dt-accent-blue) 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 8px 20px rgba(29,78,216,.35);
}
.quiz-card .btn-primary:hover {
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 28px rgba(29,78,216,.45);
  transform: translateY(-1px);
}
.quiz-card .btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Success: Utwórz konto */
.quiz-card .btn-success {
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, var(--dt-accent-green) 0%, #16a34a 100%);
  color: var(--dt-on-success);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 8px 20px rgba(22,163,74,.30);
}
.quiz-card .btn-success:hover {
  filter: brightness(1.04);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 28px rgba(22,163,74,.42);
  transform: translateY(-1px);
}
.quiz-card .btn-success:active { transform: translateY(0); }

/* Outline (Google / pomocnicze) */
.quiz-card .btn-outline-light,
.quiz-card .btn-outline-secondary {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: var(--dt-text);
}
.quiz-card .btn-outline-light:hover,
.quiz-card .btn-outline-secondary:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.34);
}

/* Focus dla wszystkich przycisków – wyraźny pierścień */
.quiz-card .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45), 0 0 0 1px rgba(255,255,255,.2) inset;
}

/* Link „Nie pamiętasz hasła?” – lepsza widoczność */
.quiz-card a {
  color: var(--dt-link);
}
.quiz-card a:hover {
  color: var(--dt-link-hover);
  text-decoration: underline;
}

/* === AUTH: KONTRAST PRZYCISKÓW I PÓL (PATCH) === */
/* UPEWNIJ SIĘ, ŻE TO JEST NA SAMYM KOŃCU CSS! */

body[data-bs-theme="dark"] .quiz-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
    rgba(20,24,34,.72) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Zakładki */
body[data-bs-theme="dark"] .quiz-card .nav-tabs { border-bottom: 0; gap: .5rem; }
body[data-bs-theme="dark"] .quiz-card .nav-tabs .nav-link {
  color: #aab4c3 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.03) !important;
  padding: .6rem 1rem !important;
}
body[data-bs-theme="dark"] .quiz-card .nav-tabs .nav-link.active {
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
}

/* Pola */
body[data-bs-theme="dark"] .quiz-card .form-control {
  background: rgba(0,0,0,.30) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: var(--dt-text-strong) !important;
  border-radius: 12px !important;
}
body[data-bs-theme="dark"] .quiz-card .form-control::placeholder { color: #98a4b5 !important; }
body[data-bs-theme="dark"] .quiz-card .form-control:focus {
  border-color: var(--dt-accent-blue-2) !important;
  box-shadow: 0 0 0 .25rem rgba(96,165,250,.25) !important;
}

/* Przyciski — WYRAŹNA RAMKA + KONTRAST */
body[data-bs-theme="dark"] .quiz-card .btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  background-clip: padding-box; /* ramka nie zlewa się z tłem */
}

/* Primary = Zaloguj się */
body[data-bs-theme="dark"] .quiz-card .btn-primary {
  border: 1.5px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg, var(--dt-accent-blue) 0%, #1e40af 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 26px rgba(30,64,175,.45) !important;
}
body[data-bs-theme="dark"] .quiz-card .btn-primary:hover {
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 14px 34px rgba(30,64,175,.55) !important;
  transform: translateY(-1px);
}
body[data-bs-theme="dark"] .quiz-card .btn-primary:active { transform: translateY(0); }

/* Success = Utwórz konto */
body[data-bs-theme="dark"] .quiz-card .btn-success {
  border: 1.5px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg, var(--dt-accent-green) 0%, #15803d 100%) !important;
  color: var(--dt-on-success) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 26px rgba(21,128,61,.35) !important;
}
body[data-bs-theme="dark"] .quiz-card .btn-success:hover {
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 14px 34px rgba(21,128,61,.45) !important;
  transform: translateY(-1px);
}

/* Secondary / Outline (Google, pomocnicze) */
body[data-bs-theme="dark"] .quiz-card .btn-outline-light,
body[data-bs-theme="dark"] .quiz-card .btn-outline-secondary {
  border: 1.5px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--dt-text-strong) !important;
}
body[data-bs-theme="dark"] .quiz-card .btn-outline-light:hover,
body[data-bs-theme="dark"] .quiz-card .btn-outline-secondary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.38) !important;
}

/* Focus ring dla wszystkich przycisków */
body[data-bs-theme="dark"] .quiz-card .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.45), 0 0 0 1px rgba(255,255,255,.22) inset !important;
}

/* Link „Nie pamiętasz hasła?” itp. */
body[data-bs-theme="dark"] .quiz-card a { color: var(--dt-link) !important; }
body[data-bs-theme="dark"] .quiz-card a:hover { color: var(--dt-link-hover) !important; text-decoration: underline; }

/* Przycisk „Pokaż” w polu hasła (input-group) */
body[data-bs-theme="dark"] .quiz-card .input-group .btn {
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: var(--dt-text-strong) !important;
}
body[data-bs-theme="dark"] .quiz-card .input-group .btn:hover {
  background: rgba(255,255,255,.16) !important;
}

/* =================================== */
/* === Stylizacja Karty Logowania === */
/* =================================== */

/* Stosujemy "szkło" do obu kart na stronie logowania */
[data-bs-theme="dark"] .login-card {
    /* Efekt szkła (glassmorphism) */
    background: rgba(33, 37, 41, 0.8) !important; /* Półprzezroczyste tło */
    backdrop-filter: blur(10px); /* Rozmycie tła */
    
    /* Lepsze krawędzie i cienie */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Subtelna ramka */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important; /* Głęboki cień */
}

/* * Ustawiamy tło dla nagłówka z zakładkami 
 * (inaczej będzie miało podwójne tło) 
*/
[data-bs-theme="dark"] .login-card .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Poprawiamy pola formularza wewnątrz tej karty */
[data-bs-theme="dark"] .login-card .form-control {
    background: rgba(255, 255, 255, 0.08); /* Lekko widoczne pole */
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-dark-primary); 
}

/* Poprawiamy focus na polu */
[data-bs-theme="dark"] .login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #86b7fe; /* Standardowy focus Bootstrapa */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Poprawiamy placeholder */
[data-bs-theme="dark"] .login-card .form-control::placeholder {
    color: var(--text-dark-secondary);
}

/* Poprawiamy linki wewnątrz karty */
[data-bs-theme="dark"] .login-card a {
    color: var(--dt-link); /* Jaśniejszy niebieski dla lepszej czytelności */
}
[data-bs-theme="dark"] .login-card a:hover {
    color: var(--dt-link-hover);
}

/* Poprawiamy przyciski "Pokaż" */
[data-bs-theme="dark"] .login-card .input-group .btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-dark-secondary);
}
[data-bs-theme="dark"] .login-card .input-group .btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.tech-list {
  margin: 0;
  padding-left: 18px;
}

.tech-list li {
  margin-bottom: 3px;
  line-height: 1.4;
}

/* ===================================================================
   POPRAWKI KONTRASTU — CIEMNY MOTYW
   Klasy .bg-white/.bg-light/.table-light w Bootstrap 5.3 mają STAŁY
   biały/jasny kolor (nie reagują na data-bs-theme), więc na ciemnym tle
   tworzą „jasne łaty" z niewidocznym (jasnym) tekstem. Mapujemy je na
   ciemne powierzchnie motywu. Plik ładowany tylko przy schemacie „dark".
   =================================================================== */
.bg-white { background-color: var(--bs-secondary-bg, #23272b) !important; }
.bg-light { background-color: var(--bs-tertiary-bg, #2a2f36) !important; }
.table-light,
.table-light > th,
.table-light > td {
  background-color: var(--bs-tertiary-bg, #2a2f36) !important;
  color: var(--bs-body-color) !important;
}
.bg-white, .bg-light { border-color: var(--bs-border-color, rgba(255, 255, 255, .13)) !important; }

/* Tekst wymuszony na ciemno (.text-dark) NA/WEWNĄTRZ tych powierzchni byłby
   niewidoczny — przywracamy czytelny kolor. Samodzielnych badge'y
   (np. .bg-warning.text-dark) to celowo NIE dotyczy. */
.bg-white .text-dark, .bg-white.text-dark,
.bg-light .text-dark, .bg-light.text-dark {
  color: var(--bs-body-color) !important;
}