/* Header styles */
header, footer, header a, footer a, .nav-link {
    color: black;
    background-color: white;
}
header a, footer a, .nav-link {
    color: var(--bs-body-color);
    text-decoration: none;
}
/* Nagłówek aplikacji, ustawienie tła */
body {
    background-color: rgba(248, 249, 250, 1);  /* lekko szare tło pod nagłówkiem */
}
#app > header:first-child {
    background-color: transparent;
}
#app header nav > div:first-of-type {
    background-color: rgba(255, 255, 255, 1);
}
.icons-section a, footer a {
    color: blue;
    text-decoration: none;
}

#graph-modal .modal-dialog {  /* dopasowanie modala do grafu i wypośrodkowanie */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none !important;
    width: auto !important; /* lub określona wartość */
}

@media (max-width: 768px) {
    header {
        padding: 0.5rem 1rem;
    }
    .navbar-brand img {
        max-width: 7rem; /* Zmniejszenie logo na małych ekranach */
    }
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: auto; /* Szerokość dostosowana do elementów */
        color: white;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* cień */
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
        box-shadow: 12px 24px 24px rgba(0, 0, 0, 0.7);
        border: 1px solid #0031e8; /* Obwódka w kolorze niebieskim */
        border-radius: 5px; /* Zaokrąglenie narożników */
        padding: 10px; /* Odstęp wewnętrzny */
        background-color: rgba(255, 255, 255, 0.9); /* Białe tło z lekką przezroczystością */
        background-color: white; /* Tło dla menu */
        z-index: 1050;
    }
    .navbar-nav {
        flex-direction: column; /* Ustaw elementy w kolumnie */
    }
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem; /* Czytelne odstępy */
    }
    .navbar-toggler {
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    }
    .navbar-toggler:focus-visible {
        /* box-shadow: 0px 0px 5px rgba(30, 136, 229, 0.7); */
        /* box-shadow: 12px 24px 24px rgba(0, 0, 0, 0.7); */
        /* box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.7); */
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /* Cień w kolorze focus */
        outline: none; /* Usuń domyślną obwódkę */
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .navbar-collapse {
        display: flex !important; /* Rozwinięcie menu na średnich ekranach */
        flex-direction: row;
        position: static;
        background-color: rgba(255, 255, 255, 0.9); /* Białe tło z lekką przezroczystością */
        width: 100%;
        flex-wrap: nowrap; /* Zapobiega łamaniu się elementów */
    }
    .navbar-nav {
        flex-direction: row;
    }
    .navbar-nav .nav-link {
        padding: 0.4rem 0.6rem; /* Zmniejszenie odstępów */
    }
    .navbar-brand img {
        max-width: 6rem; /* Zmniejszenie logo na średnich ekranach */
    }
    .icons-section {
        gap: 0.4rem; /* Zmniejszenie odstępów między ikonami */
    }
    .navbar-toggler {
        display: none; /* Ukrycie kanapki na średnich ekranach */
    }
}
@media (min-width: 1200px) {
}