/* Podstawowe style dla menu */
.navbar {
    justify-content: flex-start; /* Wyrównaj elementy nawigacji do lewej */
    background: linear-gradient(45deg, #0B4987, #002347); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Dodanie cienia */
    background-color: #343a40; /* Dodatkowe tło w przypadku problemów z gradientem */
}

.navbar-toggler {
    padding: .25rem .75rem;
    margin: .5rem;
    z-index: 1080; /* Ustawienie na wierzchu */
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	padding-left: 15px;
	padding-right: 15px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #0dcaf0; /* Zmiana koloru podświetlenia */
    background: rgba(255,255,255,0.10); /* Tło podświetlenia */
    border-radius: 4px; /* Zaokrąglenie rogów */
}

.navbar-nav .nav-link i {
    margin-right: 10px;
}

.bg-pending { background-color: #ffc107; }
.bg-approved { background-color: #28a745; }
.bg-denied { background-color: #dc3545; }

@media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
        display: none; /* Ukryj domyślne dropdowny Bootstrapa */
        border-radius: 5px; /* Zaokrąglenia w dropdownach */
    }

    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block; /* Pokaż dropdown przy najechaniu */
        opacity: 1;
        visibility: visible;
        margin-top: 0; /* Odsunięcie menu dropdown od elementu nadrzędnego */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Dodanie cienia */
    }

    /* Opóźnienie przy chowaniu dropdownów */
    .navbar-nav .dropdown-menu {
        transition: visibility 0.3s linear, opacity 0.3s linear;
        transition-delay: 0.5s; /* Opóźnienie chowania menu */
        padding: 0;
    }

    /* Anulowanie opóźnienia przy najechaniu myszką */
    .navbar-nav .dropdown:hover .dropdown-menu {
        transition-delay: 0s;
    }

    /* Zmiana wyglądu opcji przy najechaniu */
    .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu .dropdown-item:focus {
        background-color: #0dcaf0; /* Jasne tło dla lepszego kontrastu */
        color: #343a40; /* Kolor tekstu */
        border-radius: 5px; /* Zaokrąglenie rogów */
    }

    .navbar-nav .nav-item {
        margin: 0 10px;
    }
}

@media (max-width: 992px) {
    .navbar {
        flex-wrap: nowrap;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(45deg, #0B4987, #002347); 
        background-color: #343a40; /* Dodatkowe tło w przypadku problemów z gradientem */
        padding-top: 56px; /* Odstęp od góry, można dostosować */
        z-index: 1050; /* Upewnij się, że menu jest na wierzchu */
        display: flex;
        flex-direction: column; /* Dzieci w kolumnie, jedno pod drugim */
        justify-content: flex-start; /* Wyrównanie do góry */
        overflow-y: auto; /* Włączenie przewijania, jeśli zawartość jest za długa */
        transition: transform 0.3s ease, visibility 0.3s ease; /* Animacja przejścia */
    }

    .navbar-collapse.show {
        transform: translateX(0); /* Przesunięcie menu z powrotem na ekran */
    }

    .navbar-nav {
        display: flex;
        flex-direction: column; /* Dzieci w kolumnie, jedno pod drugim */
        width: 100%; /* Pełna szerokość dla każdego elementu nav-item */
    }

    .navbar-nav .nav-item {
        width: 100%; /* Pełna szerokość dla każdego elementu nav-item */
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem; /* Odpowiedni padding dla linków */
        width: 100%; /* Pełna szerokość dla linków */
        text-align: left; /* Tekst wyrównany do lewej */
    }

    .dropdown-menu {
        position: static;
        width: 100%; /* Pełna szerokość dla menu dropdown */
        background: #2c3034; /* Lekko różni się od głównego paska menu dla lepszej widoczności */
        margin-top: 0.5rem; /* Odstęp od góry dropdown */
        border-radius: 5px; /* Zaokrąglenia w dropdownach */
        border: none;
        padding: 0; /* Brak paddingu */
        transition: visibility 0.3s linear, opacity 0.3s linear; /* Animacja przejścia */
        box-shadow: none; /* Brak cienia */
        visibility: visible; /* Zawsze widoczne */
        opacity: 1; /* Pełna przejrzystość */
    }

    .dropdown-menu .dropdown-item {
        color: #ffffff;
        padding: 0.5rem 1rem; /* Odpowiedni padding dla elementów */
        padding-left: 2.5rem; /* Dodatkowy lewy padding dla tekstów */
        width: 100%; /* Pełna szerokość dla elementów dropdown-item */
        text-align: left; /* Tekst wyrównany do lewej */
    }

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: #0dcaf0; /* Jasne tło dla lepszego kontrastu */
        color: #343a40; /* Kolor tekstu */
        border-radius: 5px; /* Zaokrąglenie rogów */
    }

    .navbar-nav .nav-item {
        margin: 0; /* Brak marginesów dla nav-item, aby uniknąć przestrzeni między nimi */
    }
}

/* Nowoczesne i profesjonalne style dla listy wniosków urlopowych */
.list-group-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    min-height: 80px; /* Stała wysokość dla wszystkich elementów */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.list-group-item h6 {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}

.list-group-item .action-buttons button {
    min-width: 36px;
}

.list-group-item .leave-balance {
    text-align: center;
    font-size: 0.875rem;
}

.bg-success-light {
    background-color: rgba(52,208,123,0.25); /* Żywa lekka zieleń */
}

.bg-danger-light {
    background-color: rgba(223,27,64,0.25); /* Żywa lekka czerwień */
}

.bg-warning-light {
    background-color: rgba(231,173,0,0.25); /* Żywy lekki żółty */
}

.bg-secondary-light {
    background-color: rgba(123,136,148,0.60); /* Żywy lekki szary */
}

.modal-header {
    background-color: #343a40;
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.modal-footer .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
}

@media (max-width: 768px) {
    .list-group-item {
        padding: 10px;
    }

    .list-group-item .row {
        width: 100%;
    }

    .list-group-item .row > div {
        width: 50%;
        margin-bottom: 0px;
    }

    .list-group-item .action-buttons {
        justify-content: center;
        align-items: center;
    }
}