/* Custom Navbar Container */
.navbar-container {
    background: white;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 0.8rem 0.5rem; /* Padding inside the navbar */
    width: 100%; /* Full width within the container */
    display: flex;
    align-items: center;
}

/* Hover Effect for Links and Buttons */
.hover-effect {
    transition: all 0.3s ease;
}

    .hover-effect:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }

/* Navbar Links */
.nav-link {
    position: relative;
    padding: 0.5rem 1rem; /* Add padding for better click area */
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #007bff; /* Underline color */
        transition: width 0.3s ease;
    }

    .nav-link:hover::after {
        width: 100%;
    }

/* Buttons */
.btn {
    transition: all 0.3s ease;
    padding: 0.5rem 1rem; /* Add padding for better click area */
}

    .btn:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Button shadow on hover */
    }

/* Base Button Styles */
.btn-form, .btn-status, .btn-login {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    transition: all 0.3s ease;
}

/* FORM Button */
.btn-form {
    border-color: #4a90e2;
}

    .btn-form:hover {
        background-color: rgba(74, 144, 226, 0.1);
        border-color: #4a90e2;
    }

/* STATUS Button */
.btn-status {
    border-color: #f5a623;
}

    .btn-status:hover {
        background-color: rgba(245, 166, 35, 0.1);
        border-color: #f5a623;
    }

/* LOGIN Button */
.btn-login {
    border-color: #7ed321;
}

    .btn-login:hover {
        background-color: rgba(126, 211, 33, 0.1);
        border-color: #7ed321;
    }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .navbar-container {
        width: 100%; /* Full width on smaller screens */
        border-radius: 12px; /* Keep rounded corners */
        flex-direction: row; /* Keep items in a row */
        justify-content: space-between; /* Space between logo and hamburger */
        padding: 0.7rem; /* Increase padding for better height */
        min-height: 60px; /* Set a minimum height for the navbar */
    }

    .navbar-brand {
        margin-right: 0; /* Remove margin on mobile */
    }

    .navbar-toggler {
        display: flex;
        padding: 0.5rem; /* Add padding to the toggle button */
    }

    .navbar-collapse {
        position: absolute;
        top: 100%; /* Position below the navbar */
        left: 0;
        right: 0;
        background: white; /* Background for the expanded menu */
        z-index: 1000; /* Ensure it appears above other content */
        padding: 1rem; /* Consistent padding */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for the expanded menu */
        border-radius: 0 0 12px 12px; /* Rounded corners at the bottom */
        margin: 0 1rem; /* Align with navbar container */
        width: calc(100% - 2rem); /* Match navbar container width */
    }

    .navbar-nav {
        width: 100%; /* Full width for nav links */
        text-align: center; /* Center align links */
    }

    .nav-item {
        margin: 0.5rem 0; /* Add spacing between nav items */
    }

    .d-flex {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 0.75rem; /* Increase space between stacked buttons */
        width: 100%; /* Full width for buttons on mobile */
        align-items: center; /* Center align buttons */
    }

    .btn {
        width: 100%; /* Full width for buttons */
        padding: 0.75rem; /* Increase button padding for better touch targets */
    }

    .navbar-collapse {
        flex-direction: column; /* Stack items vertically */
    }
}