/* Styl dla całej strony */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #103b46; /* Ciemny odcień niebieskiego */
    color: #fdf6e3; /* Jasny kolor tekstu dla kontrastu */
}

/* Nagłówek */
header {
    background-color: #002b36; /* Ciemny odcień niebieskiego */
    padding: 10px;
    text-align: center;
    border-bottom: 5px solid #dc143c; /* Czerwony akcent */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flaga Polski w nagłówku */
.flaga {
    width: 40px;
    height: 30px;
    background: linear-gradient(to bottom, white 50%, #dc143c 50%);
    margin-right: 10px;
    border: 1px solid #ccc;
}

/* Tekst w nagłówku */
.naglowek-tekst {
    font-size: 1.5em;
    font-weight: bold;
    color: #fdf6e3; /* Jasny kolor tekstu */
}

/* Kontener na panele boczne i główny */
.container {
    display: flex;
    flex: 1;
}

/* Panel boczny lewy */
.panel-lewy {
    width: 200px;
    background-color: #002b36; /* Ciemny odcień niebieskiego */
    color: #fdf6e3; /* Jasny kolor tekstu */
    padding: 10px;
}

/* Zakładki w panelu lewym */
.zakladki {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zakladki button {
    padding: 10px;
    background-color: #073642; /* Nieco jaśniejszy odcień niebieskiego */
    color: #fdf6e3; /* Jasny kolor tekstu */
    border: none;
    cursor: pointer;
    text-align: left;
}

.zakladki button:hover {
    background-color: #586e75; /* Jaśniejszy odcień dla efektu hover */
}

/* Panel główny (środkowy) */
.panel-glowny {
    flex: 1;
    max-width: 960px; /* Szerokość panelu głównego */
    background-color: #f5f5f5; /* Bardzo jasne tło */
    padding: 20px;
    margin: 0 auto; /* Wyśrodkowanie panelu głównego */
    color: #002b36; /* Ciemny kolor tekstu dla kontrastu */
}

/* Panel boczny prawy */
.panel-prawy {
    width: 200px;
    background-color: #002b36; /* Ciemny odcień niebieskiego */
    color: #fdf6e3; /* Jasny kolor tekstu */
    padding: 10px;
}

/* Stopka */
footer {
    background-color: #002b36; /* Ciemny odcień niebieskiego */
    color: #fdf6e3; /* Jasny kolor tekstu */
    padding: 10px;
    text-align: center;
    border-top: 5px solid #dc143c; /* Czerwony akcent */
}

/* Styl dla ramki wpisu */
.ramka-wpisu {
    border: 1px solid #ccc; /* Jasne obramowanie */
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background-color: #ffffff; /* Białe tło ramki */
}

/* Styl dla wpisu głównego */
.wpis-glowny {
    font-size: 1.2em;
    font-weight: bold;
    color: #002b36; /* Ciemny kolor tekstu */
}

/* Styl dla wpisu pomocniczego */
.wpis-pomocniczy {
    font-size: 0.9em;
    color: #586e75; /* Szarawy odcień dla tekstu pomocniczego */
    margin-top: 5px;
    white-space: pre-line; /* Zachowaj podziały linii */
}

/* Kolorystyka dla podstrony "Problemy" */
body.problemy header {
    border-bottom-color: #1e90ff; /* Niebieski akcent */
}

body.problemy footer {
    border-top-color: #1e90ff; /* Niebieski akcent */
}

body.problemy .flaga {
    background: linear-gradient(to bottom, white 50%, ##dc143c 50%); /* Niebieski zamiast czerwonego */
}
/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
    /* Ukryj panele boczne na małych ekranach */
    .panel-lewy, .panel-prawy {
        display: none;
    }

    /* Dostosuj panel główny do pełnej szerokości ekranu */
    .panel-glowny {
        max-width: 100%;
        padding: 10px;
        margin: 0;
    }

    /* Zmniejsz czcionkę w nagłówku na małych ekranach */
    .naglowek-tekst {
        font-size: 1.2em;
    }

    /* Dostosuj przyciski zakładek do mniejszych ekranów */
    .zakladki button {
        padding: 8px;
        font-size: 0.9em;
    }

    /* Zmniejsz marginesy i paddingi w ramkach wpisów */
    .ramka-wpisu {
        padding: 10px;
        margin: 5px 0;
    }

    /* Dostosuj stopkę do mniejszych ekranów */
    footer {
        padding: 5px;
        font-size: 0.9em;
    }
}