/* navbar.css */

/* General styles for the navigation bar */
nav {
    background-color: #ffffff; /* White background */
    border-bottom: 1px solid #e0e0e0; /* Light gray border */
    height: 60px; /* Height of the navbar */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    padding: 0 2px; /* Reduced horizontal padding */
    position: sticky; /* Make the navbar sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 1000; /* Ensure it stays above other content */
    background-color: white; /* Set a background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for depth */
}

/* Logo styles */
.site-logo {
    display: flex;
    align-items: center;
    margin-left: 0; /* Remove left margin */
    padding-left: 0; /* Remove left padding */
}

/* Logo image size */
.logo {
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

/* Mobile adjustments */
@media only screen and (max-width: 600px) {
    nav {
        padding: 0 1px; /* Even less padding for mobile */
    }

    .site-logo {
        margin-left: 0;
    }

    .logout-button {
        margin-right: 0;
    }
    
    .logo {
        height: 35px; /* Slightly smaller logo for mobile if needed */
    }
}

/* Styles for the navigation links */
.nav-links {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center the icons in the middle */
    flex-grow: 1; /* Allow this section to grow and take available space */
}

/* Logout button styles */
.logout-button {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    margin-right: 0; /* Remove right margin */
    padding-right: 0; /* Remove right padding */
}

/* Logout and Login button styles */
.btn-login, .btn-logout {
    background-color: #1877f2; /* Facebook blue */
    color: white; /* White text */
    padding: 10px 15px; /* Padding for the button */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    margin-left: 10px; /* Space between logout button and icons */
    transition: background-color 0.2s ease; /* Smooth background transition */
}

.btn-login:hover, .btn-logout:hover {
    background-color: #165eab; /* Darker blue on hover */
}

/* Icon container styles */
.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px; /* Default width for mobile view */
    height: 50px; /* Height of the rounded square */
    border-radius: 12px; /* Rounded corners */
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.2s ease; /* Smooth background transition */
}

/* Icon styles */
nav a svg {
    width: 24px; /* Icon size */
    height: 24px; /* Icon size */
    color: inherit; /* Inherit color from parent */
    transition: fill 0.2s ease; /* Smooth fill transition */
}

/* Active link styles */
nav a.text-blue-500 {
    color: #1877f2; /* Facebook blue for active link */
}

/* Hover effects */
nav a:hover .icon-container {
    background-color: #e4e6eb; /* Light gray on hover */
}

/* Tooltip styles */
.tooltip {
    background-color: #4b4f54; /* Dark gray background */
    color: #ffffff; /* White text color */
    padding: 4px 8px; /* Padding for tooltip */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    position: absolute; /* Positioning for tooltip */
    bottom: -30px; /* Position below the icon */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center adjustment */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease; /* Smooth transition */
    z-index: 10; /* Ensure it appears above other elements */
}

/* Show tooltip on hover */
nav a:hover .tooltip {
    opacity: 1; /* Show tooltip on hover */
}

/* Underline effect for active links */
nav a div {
    height: 2px; /* Height of the underline */
    background-color: transparent; /* Default transparent */
    transition: background-color 0.2s ease; /* Smooth transition */
}

/* Active underline */
.active-underline {
    height: 2px; /* Height of the underline */
    background-color: transparent; /* Default transparent */
    transition: background-color 0.2s ease; /* Smooth transition */
}

.active-underline.active {
    background-color: #1877f2; /* Blue underline color */
    margin-top: 4px; /* Space between icon and underline */
}

/* CSS for the logo */
.logo {
    height: 40px; /* Adjust height as needed */
    max-width: 100%; /* Ensure it doesn't exceed its container */
    object-fit: contain; /* Maintain aspect ratio */
}

/* Add this CSS to your stylesheet */
@media only screen and (max-width: 600px) {
    .nav-links {
        flex-direction: row; /* Keep icons in a row */
        justify-content: center; /* Center the icons */
    }

    .nav-links a {
        margin: 0 1px; /* Reduce the gap between icons to 1px */
        padding: 3px 5px; /* Adjust padding for smaller screens to bring icons closer */
        font-size: 14px; /* Optionally reduce font size for better fit */
    }

    /* .icon-container { 
        width: 30px; 
        height: 30px; 
    } */

    nav a svg {
        width: 16px; /* Reduce icon size for mobile view */
        height: 16px; /* Reduce icon size for mobile view */
    }

    .icon-container {
        width: 40px; /* Optionally adjust the container size if needed */
        height: 40px; /* Optionally adjust the container size if needed */
    }

    .logout-button {
        display: flex; /* Ensure logout button is displayed as flex */
        justify-content: center; /* Center the logout button */
    }

    .logout-button a {
        margin: 0 1px; /* Reduce the gap for logout button to 1px */
        padding: 3px 1px; /* Adjust padding for logout button */
    }

    /* Hide the Idea Board icon on mobile view */
    .hide-idea-icon {
        display: none; 
    }
}

/* Add this CSS to your stylesheet */
@media only screen and (max-width: 600px) {
    .mobile-logout {
        padding-bottom: 10px; /* Add padding to the bottom of the logout button */
    }
}

/* Default styles for icon links */
.icon-link {
    padding: 8px 10px; /* Default padding */
}

/* Styles for desktop view */
@media only screen and (min-width: 601px) {
    .icon-link {
        padding: 12px 20px; /* Wider padding for desktop view */
        margin: 0 10px; /* Increase space between icons */
    }

    .icon-container {
        display: flex; /* Ensure the icon and text are aligned */
        justify-content: center; /* Center the content */
        align-items: center; /* Center the content vertically */
    }
}

/* Default styles for icons */

/* Common styles for all nav icons */
.nav-icon {
    fill: none; /* Default fill for hollow icons */
    stroke: currentColor; /* Use current text color for stroke */
}

/* Active state for all icons */
.nav-icon.active-icon {
    fill: #007bff; /* Set the fill color to match the dashboard icon's active color */
    stroke: #007bff; /* Set the stroke color to match the dashboard icon's active color */
}