/* === USTAWIENIA OGÓLNE STRONY === */
body {
  padding: 0 30px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
  padding-top: 0; /* Ustawia odstęp wewnętrzny od góry */
  margin: 0; /* Ustawia zewnętrzny odstęp wokół elementu */
  background-color: #fdfaf5; /* Ustawia kolor tła */
}

/* === NAGŁÓWEK STRONY === */
h1 {
  text-align: center;
  font-weight: bold;      /* pogrubienie */
  text-decoration: underline;  /* podkreślenie */
}

/* === GŁÓWNA TABELA WIDOKU === */
table.tabela-glowna {
  margin: 4px 0 0 0; /* Ustawia zewnętrzny odstęp wokół elementu */
  border-collapse: collapse; /* Łączy granice komórek tabeli w jedną linię */
  max-width: 90%; /* Określa maksymalną szerokość elementu */
  width: auto; /* Określa szerokość elementu */
}

table.tabela-glowna,
table.tabela-glowna th,
table.tabela-glowna td {
  border: 1px solid black;
}

/* === KOMÓRKI TABELI - OGÓLNE USTAWIENIA === */
td {
  padding: 4px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
}

/* === KOMÓRKI UKRYTE - DO FILTROWANIA LUB TECHNICZNE === */
.ukryta-komorka {
  display: none; /* Określa sposób wyświetlania elementu */
}

/* === WIERSZ L01 - PODŚWIETLONY === */
tr.L01 td {
  font-size: 14px; /* Określa rozmiar czcionki */
  padding: 3px 6px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
  background-color: #E9D8B9; /* Ustawia kolor tła */
  font-weight: bold; /* Pogrubienie tekstu */
}

/* === WIERSZE L02-L07 - STANDARDOWE WIERSZE Z DANYMI === */
tr.L02 td,
tr.L03 td,
tr.L04 td,
tr.L05 td,
tr.L06 td,
tr.L07 td {
  font-size: 14px; /* Określa rozmiar czcionki */
  padding: 3px 6px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
}

/* === WIERSZ L08 - SPECJALNY DOLNY WIERSZ === */
tr.L08 td {
  padding: 3px 6px; /* Ustawia odstęp wewnętrzny elementu (od krawędzi do zawartości) */
  height: 20px; /* Ustawia wysokość elementu */
}

/* === DRUGA KOLUMNA TABELI - FORMATOWANIE SZCZEGÓLNE === */
td:nth-child(2) {
  white-space: nowrap; /* Steruje zawijaniem tekstu */
  width: 1%; /* Określa szerokość elementu */
}

/* === OBRAMOWANIA DLA NIEPUSTYCH KOMÓREK === */
td:not(:empty) {
  border: 1px solid #000; /* Określa styl obramowania */
}

/* === BRAK OBRAMOWANIA DLA PUSTYCH KOMÓREK === */
td:empty {
  border: none; /* Określa styl obramowania */
}
/* === OGÓLNY STYL DLA ELEMENTÓW Z KLASĄ .tooltip === */
.tooltip {
  position: relative; /* Ustawia pozycjonowanie względem samego siebie (dla podrzędnych elementów jak span) */
  cursor: pointer; /* Zmienia kursor na "rączkę", sugerując interaktywność */
  text-decoration: underline; /* Podkreślenie tekstu (wizualna wskazówka, że można kliknąć) */
  color: blue; /* Kolor tekstu: niebieski (często kojarzony z linkami) */
}

/* === DYMKI (SPAN) WEWNĄTRZ ELEMENTÓW Z KLASĄ .tooltip === */
.tooltip span {
  position: absolute;
  display: none;
  padding: 6px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  border: 1px solid #ccc;
  text-align: center;
  max-width: 300px;
  min-width: 100px;
  z-index: 9999;
   top: 100%;               /* dymek poniżej tekstu */
}

/* === OBRAZKI W DYMKU TOOLTIPA === */
.tooltip span img {
  max-width: 100%; /* Obrazek nie wyjdzie poza obszar dymka */
  height: 400px; /* Stała wysokość obrazka */
}

/* === DYMKI W WIERSZACH O KLASIE L04 – WERSJA MINI === */
tr.L04 .tooltip span {
  position: absolute;
  display: none;
  padding: 6px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  border: 1px solid #ccc;
  text-align: center;
  max-width: 300px;
  min-width: 100px;
  z-index: 9999;
}

/* === OBRAZKI W DYMKU DLA L04 === */
tr.L04 .tooltip span img {
  height: 130px; /* Zmniejszona wysokość obrazka do 130px */
  max-width: 100%; /* Obrazek nie wyjdzie poza dymek */
}

/* === BANER INFORMACYJNY === */
.info-banner {
  background-color: #f0f8ff; /* Jasnoniebieskie tło – sugeruje informację lub neutralny komunikat */
  border: 1px solid #ccd; /* Cienka ramka wokół całego banera */
  border-left: 5px solid #336699; /* Grubszy pasek po lewej stronie – wizualny akcent */
  padding: 10px 16px; /* Wewnętrzny margines: 10px góra/dół, 16px lewo/prawo */
  margin: 20px auto; /* 20px z góry i z dołu, auto – wyśrodkowanie poziome */
  max-width: 800px; /* Maksymalna szerokość banera – zapobiega rozciągnięciu na całą stronę */
  font-size: 16px; /* Rozmiar tekstu – czytelny dla komunikatu */
  color: #333; /* Kolor tekstu – ciemnoszary dla lepszej czytelności */
  border-radius: 4px; /* Zaokrąglone rogi banera */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05); /* Delikatny cień – efekt wypukłości */
}

/* Linki wewnątrz banera informacyjnego */
.info-banner a {
  color: #336699; /* Kolor linku dopasowany do akcentu graficznego */
  text-decoration: underline; /* Podkreślenie tekstu – sugeruje link */
}

.info-banner a:hover {
  color: #003366; /* Ciemniejszy odcień niebieskiego przy najechaniu kursorem */
}


/* === PANEL FILTRÓW WIERSZY – np. checkboxy nad tabelą === */
#filtry-wierszy {
  background-color: #E9D8B9; /* Bardzo jasne, neutralne tło panelu */
  padding: 2px; /* Mały odstęp wewnętrzny */
  margin-bottom: 0px; /* Brak odstępu dolnego – przylega do kolejnego elementu */
  border: 2px solid #ccc; /* Jasnoszara ramka dookoła */
  border-radius: 4px; /* Zaokrąglone rogi */
  display: inline-block; /* Traktowany jak tekst, ale zachowuje cechy bloku */
  width: auto; /* Dostosowuje szerokość do zawartości */
}

/* Wyróżnienie tekstu np. „Filtruj według:” */
#filtry-wierszy strong {
  display: block; /* Pokazuje tekst jako blok – nowa linia */
  margin-bottom: 0px; /* Brak odstępu pod spodem */
  color: #333; /* Ciemnoszary tekst */
}

/* Styl etykiet filtrów (np. tekst obok checkboxów) */
#filtry-wierszy label {
  margin-right: 10px; /* Odstęp między etykietami – estetyczne rozmieszczenie */
}

/* === PRZYCISKI NAWIGACYJNE (np. "Poprzedni", "Następny") === */
.nav-buttons {
  display: flex; /* Ustawia przyciski w linii obok siebie */
  gap: 8px; /* Odstęp 8px między przyciskami */
  flex-wrap: wrap; /* Pozwala zawinąć przyciski do następnego wiersza, jeśli braknie miejsca */
  margin: 8px 0 0 0; /* Górny margines 8px, reszta 0 */
}

/* Styl pojedynczego przycisku nawigacyjnego */
.nav-btn {
  background-color: #E9D8B9; /* Niebieskie tło przycisku */
  color: black; /* Biały tekst */
  padding: 10px 20px; /* Wewnętrzny odstęp: 10px góra/dół, 20px lewo/prawo */
  text-decoration: none; /* Brak podkreślenia – wygląda jak przycisk, nie jak link */
  border-radius: 6px; /* Zaokrąglenie rogów */
  font-weight: bold; /* Pogrubienie tekstu */
  transition: background-color 0.3s; /* Płynne przejście koloru tła przy najechaniu */
}

/* Styl przycisku po najechaniu */
.nav-btn:hover {
  background-color: #D2C0A1; /* Ciemniejszy niebieski przy najechaniu */
}

/* Styl przycisku, gdy jest nieaktywny/wyłączony */
.nav-btn:disabled,
.nav-btn[disabled] {
  background-color: #ccc; /* Jasnoszare tło */
  color: #666; /* Przygaszony kolor tekstu */
  pointer-events: none; /* Wyłącza możliwość kliknięcia */
}


/* === BLOK Z FILTRAMI I PRZYCISKAMI (np. nad tabelą) === */
.filtry-i-przyciski {
  display: flex; /* Ustawia elementy w jednym rzędzie */
  align-items: center; /* Wyrównuje elementy w pionie do środka */
  flex-wrap: wrap; /* Zawija zawartość w kolejne linie jeśli potrzeba */
  gap: 12px; /* Odstęp 12px między elementami */
  margin-bottom: 2px; /* Dolny margines: 2px */
}


/* === STOPKA STRONY === */
.Stopka {
  background-color: #E9D8B9; /* Beżowe tło stopki */
  border-top: 2px solid #ccc; /* Górna ramka – oddziela stopkę od treści */
  padding: 20px; /* Wewnętrzny margines 20px dookoła */
  margin-top: 20px; /* Górny margines 20px – odstęp od treści powyżej */
  font-family: "Segoe UI", sans-serif; /* Nowoczesna, czytelna czcionka */
}

/* Tytuł sekcji w stopce */
.stopka-title {
  text-align: center; /* Wyśrodkowanie tekstu tytułu */
  font-size: 18px; /* Rozmiar czcionki tytułu */
  color: #444; /* Ciemnoszary kolor tekstu */
  margin-top: 0; /* Brak górnego marginesu */
  margin-bottom: 12px; /* Odstęp 12px pod tytułem */
  padding-top: 1px; /* Minimalny wewnętrzny margines od góry */
}

/* Układ linków w stopce */
.stopka-grid {
  display: grid; /* Układ siatki */
  grid-template-columns: repeat(4, 1fr); /* 4 kolumny o równej szerokości */
  gap: 4px 16px; /* Pionowe: 4px, poziome: 16px odstępu między elementami */
  max-width: 1000px; /* Maksymalna szerokość siatki */
  margin: 0 auto; /* Wyśrodkowanie siatki */
}

/* Linki w stopce */
.stopka-grid a {
  color: #336699; /* Niebieski tekst linków */
  text-decoration: none; /* Brak podkreślenia – do momentu najechania */
  font-size: 13px; /* Mała, czytelna czcionka */
  line-height: 1.4; /* Wysokość linii – poprawia czytelność */
  transition: color 0.3s; /* Płynna zmiana koloru tekstu */
}

/* Link po najechaniu */
.stopka-grid a:hover {
  color: #003366; /* Ciemniejszy niebieski */
  text-decoration: underline; /* Podkreślenie po najechaniu */
}

         /* === Styl głównego kontenera wyszukiwarki === */
         #wyszukiwarka {
         margin-bottom: 5px;            /* Odstęp dolny od kolejnych elementów */
         padding: 2px 5px;              /* Wewnętrzne odstępy od krawędzi */
         background-color: #E9D8B9;      /* Kolor tła kontenera */
         border: 2px solid #ccc;         /* Obramowanie */
         border-radius: 6px;             /* Zaokrąglenie rogów */
         display: inline-block;          /* Dopasowanie do zawartości */
         }
         /* === Styl nagłówka h2 wewnątrz wyszukiwarki === */
         #wyszukiwarka h2 {
         margin-top: 0;                  /* Usunięcie górnego marginesu */
         font-size: 16px;                /* Rozmiar czcionki */
		 margin-bottom: 0; 
         }
         /* === Styl pola tekstowego do wpisywania wyszukiwanego tekstu === */
         #wyszukiwarka input[type="text"] {
         margin-top: 0px;                /* Odstęp górny od nagłówka */
         width: 358px;                   /* Szerokość pola tekstowego */
         }
         /* === Styl przycisków (Szukaj i Wyczyść) === */
         #wyszukiwarka button {
         margin-left: 5px;               /* Odstęp między przyciskami */
         padding: 4px 10px;              /* Wewnętrzne marginesy dla lepszego wyglądu */
         font-size: 12px;                /* Rozmiar tekstu */
         cursor: pointer;                /* Wskaźnik ręki przy najechaniu */
         }
         /* === Kolory podświetlenia kolejnych wyszukanych wyrazów === */
         .highlight-1 { background-color: yellow; color: black; }       /* Pierwsze słowo */
         .highlight-2 { background-color: lightgreen; color: black; }   /* Drugie słowo */
         .highlight-3 { background-color: orange; color: black; }       /* Trzecie słowo */
         .highlight-4 { background-color: lightblue; color: black; }    /* Czwarte słowo */
         .highlight-5 { background-color: pink; color: black; }         /* Piąte słowo */
         .highlight-6 { background-color: violet; color: black; }       /* Szóste słowo */
		 
		 
 .highlight-match {
  background-color: yellow;
  font-weight: bold;
}


body.has-audio {
  padding-top: 15px;
}

.audio-player-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #d2b48c;
  padding: 4px 10px;
  box-shadow: 0 2px 6px rgba(139, 69, 19, 0.4);
  z-index: 9999;
  border-bottom: 1px solid #8b5e3c;
  display: flex;
  align-items: center;
  gap: 20px;
}

.audio-player {
  flex-grow: 1;
  max-width: 100%;
  height: 30px;
  min-height: 30px;
}

.audio-speed-wrapper {
  font-family: sans-serif;
  font-size: 14px;
  color: #4b2e17;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-speed-wrapper input[type="range"] {
  width: 100px;
  accent-color: #8b5e3c;
}

.play-button {
  display: inline-block;
  padding: 4px 10px; /* mniejsze odstępy wewnątrz */
  background-color: #deb887;
  border: 2px solid #8b5e3c;
  border-radius: 6px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;  /* mniejszy tekst */
  font-weight: bold;
  text-decoration: none;
  color: #4b2e17;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease;
}

.play-button:hover {
  background-color: #d2a679;
}

.audio-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 24px;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:active {
  color: red;
}

#modalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

#myMsgBox {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: #e6d1b6;
    border: 4px double #333;
    color: black;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 10000;
    min-width: 280px;
    font-family: sans-serif;
    font-size: 14px;
    border-radius: 8px;
    animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.msgbox-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.msgbox-text {
    margin-bottom: 15px;
}

.msgbox-buttons {
    text-align: right;
}

.msgbox-btn {
    padding: 5px 12px;
    margin-left: 8px;
}