/* ===================================================================
   app-layout.css — WSPÓLNY, NIE-MOTYWOWY CSS (układ, pasek mobilny,
   dropdowny). Wcześniej skopiowany bajt-w-bajt w dark-theme.css oraz
   light-theme.css (~217 linii duplikatu). Wyciągnięty tutaj i ładowany
   ZAWSZE, obok arkusza motywu. Reguły są theme-aware przez --bs-*/--icon-*.
   Kolory specyficzne dla motywu pozostają w dark-/light-theme.css.
   =================================================================== */

/* Nowe globalne style dla widoków quizu */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

main.container {
    flex-grow: 1; /* Upewnia się, że główny kontener się rozciąga */
    display: flex; /* Użyj flexboxa dla kontenera main */
    flex-direction: column; /* Ułóż elementy w kolumnie */
    justify-content: center; /* Wyśrodkuj zawartość pionowo */
    padding-top: var(--bs-gutter-x, 1.5rem); /* Zachowaj paddingi głównego kontenera */
    padding-bottom: var(--bs-gutter-x, 1.5rem);
}

/* Specyficzne style dla nowego układu quizu */
.quiz-page-container {
    flex-grow: 1; /* Pozwól temu kontenerowi zajmować całą dostępną przestrzeń */
    width: 100%;
    max-width: 1400px; /* Maksymalna szerokość dla czytelności na bardzo dużych ekranach */
    margin: 0 auto; /* Wycentruj quiz-page-container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.max-w-quiz-lg {
    max-width: 900px; /* Maksymalna szerokość karty quizu */
}

/* Układ Flexbox dla pytania i obrazka */
.quiz-area > .d-flex {
    flex-grow: 1; /* Pozwól sekcji pytania się rozciągać */
}

.question-content-col {
    flex: 1; /* Pozwól sekcji pytań zajmować całą dostępną szerokość */
    min-height: 250px; /* Minimalna wysokość, aby karta nie była zbyt mała */
    max-height: 100%; /* Upewnij się, że nie wychodzi poza rodzica */
    overflow-y: auto; /* Przewijanie tylko dla tekstu pytania/odpowiedzi */
}

.question-image-col {
    flex-shrink: 0; /* Nie zmniejszaj kolumny z obrazkiem */
    width: 100%; /* Domyślna szerokość dla małych ekranów */
    max-height: 300px; /* Ograniczenie wysokości obrazka na małych ekranach */
    overflow: hidden; /* Ukryj nadmiar, jeśli obrazek jest za duży */
    position: relative;
    background-color: var(--bs-light-bg-subtle, #f0f8ff); /* Domyślne tło dla obrazka */
}

.question-image-col img {
    object-fit: contain; /* Dopasuj obrazek, zachowując proporcje */
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

/* Responsywność dla większych ekranów */
@media (min-width: 992px) { /* Medium devices (desktops, 992px and up) */
    .quiz-page-container {
        padding: 0; /* Usuń padding na większych ekranach, aby quiz zajął więcej miejsca */
    }
    .max-w-quiz-lg {
        max-width: 1200px; /* Większa szerokość karty na desktopach */
    }
    .question-content-col {
        max-height: 80vh; /* Ogranicz maksymalną wysokość pytania na desktopach */
    }
    .question-image-col {
        width: 40%; /* Obrazek zajmuje 40% szerokości */
        max-width: 400px; /* Ogranicz maksymalną szerokość kolumny z obrazkiem */
        max-height: 100%; /* Umożliwia rozciągnięcie do wysokości karty */
        border-top-right-radius: var(--bs-card-border-radius);
        border-bottom-right-radius: var(--bs-card-border-radius);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .quiz-style-aurora-dark .question-image-col {
        background-color: rgba(0,0,0,0.2); /* Przyciemnione tło dla Dark Aurora */
    }
    .quiz-style-aurora-light .question-image-col {
        background-color: rgba(255,255,255,0.2); /* Jasne tło dla Light Aurora */
    }
}

/* Wygaszanie domyślnego paddingu w karcie, gdy jest obrazek */
.quiz-card-wrapper .card-body.p-0 > .d-flex {
    padding: 0; /* Usuń padding z głównego flex-kontenera */
}
.quiz-card-wrapper .card-body .question-content-col {
    padding: 1.5rem; /* Zastosuj padding tylko do kolumny z treścią */
}

@media (min-width: 992px) {
    .quiz-card-wrapper .card-body .question-content-col {
        padding: 2rem 2rem 2rem 2rem; /* Większy padding na desktopach */
    }
}
/* Ulepszenie dla wersji mobilnej powitania */
.navbar .nav-link.fw-semibold {
  font-weight: 600;
  border-radius: .5rem;
  padding: .4rem .75rem;
}

[data-bs-theme="dark"] .navbar .nav-link.fw-semibold {
  color: #a7d0ff !important;
}

[data-bs-theme="light"] .navbar .nav-link.fw-semibold {
  color: #0056b3 !important;
}
/* Pasek akcji na mobile */
.cdu-mobile-toolbar {
  padding: .25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
  overflow-x: auto; /* w razie bardzo wąskich ekranów */
}

.cdu-icon-btn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
  transition: transform .15s ease, background-color .15s ease;
}
.cdu-icon-btn:hover { transform: translateY(-1px); }
.cdu-icon-btn i { font-size: 1.05rem; line-height: 1; }

/* Light/Dark lekkie różnice koloru ikony (opcjonalnie) */
:root[data-bs-theme="dark"] .cdu-icon-btn i { color: var(--icon-on-dark); }
:root[data-bs-theme="light"] .cdu-icon-btn i { color: var(--icon-on-light); }

/* === Pasek akcji na mobile (toolbar) === */
.cdu-mobile-toolbar {
  padding: .25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
  overflow-x: auto;
}
.cdu-icon-btn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
  transition: transform .15s ease, background-color .15s ease;
}
.cdu-icon-btn:hover { transform: translateY(-1px); }
.cdu-icon-btn i { font-size: 1.05rem; line-height: 1; }

/* Delikatna różnica koloru ikon w motywach */
:root[data-bs-theme="dark"] .cdu-icon-btn i { color: var(--icon-on-dark); }
:root[data-bs-theme="light"] .cdu-icon-btn i { color: var(--icon-on-light); }

/* Na mobile ukryj „stare” pionowe ikony z prawej kolumny — wszystko co desktopowe */
@media (max-width: 991.98px){
  .navbar-app .d-none.d-lg-block { display: none !important; }
}
/* NIE przycinamy zawartości – pozwól dropdownowi wyjść poza pasek */
.cdu-mobile-toolbar{
  overflow: visible;            /* zamiast: overflow-x: auto; */
}

/* Ustaw rodzica dropdownu na statyczny, by menu liczyło pozycję względem okna */
.cdu-mobile-toolbar .dropdown{
  position: static;
}

/* Menu motywów na mobile – pełne, bez przewijania w jednej linii */
#themePaletteMenuMobile{
  max-height: none;             /* brak ograniczenia wysokości */
  overflow: visible;            /* nie przycinaj */
  width: auto;
  min-width: 260px;
  z-index: 1055;                /* nad paskiem */
}

/* Na bardzo wąskich ekranach pozwól rosnąć do szerokości okna */
@media (max-width: 576px){
  #themePaletteMenuMobile{ width: calc(100vw - 2rem); }
}
/* Pasek mobilny – pozwól dropdownowi rozszerzać się poza pasek */
.cdu-mobile-toolbar{
  margin-top:.5rem;
  padding:.25rem;
  border-radius:14px;
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
  overflow: visible;   /* <-- zamiast overflow-x:auto; */
}

/* Pozycjonowanie rodzica dropdownu: statycznie, by menu liczyło się do viewportu */
.cdu-mobile-toolbar .dropdown{
  position: static;
}

/* Samo menu na mobile: nieograniczona wysokość, żadnego przycinania */
#themePaletteMenuMobile{
  max-height: none;
  overflow: visible;
  min-width: 260px;
  width: auto;
  z-index: 1055;
}

/* Gdy bardzo wąsko, menu dopasowuje się do okna */
@media (max-width: 576px){
  #themePaletteMenuMobile{ width: calc(100vw - 2rem); }
}