.navbar {
    background-color: rgb(255, 255, 255, 0.5); /* Semi-transparent white background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth and separation */
    padding: 1rem; /* Inner spacing for comfortable content padding */
    width: 100%; /* Full width to span across the viewport */
    top: 0; /* Position at the very top of the viewport */
    z-index: 1000; /* High stacking context to stay above other elements */
    position: sticky; /* Keep navbar visible at top on scroll */
    
    display: flex; /* Use flexbox for layout of child elements */
    justify-content: space-between; /* Distribute child elements evenly with space between */
    align-items: center; /* Vertically align children in the center */
}

/* Container for the left section of the navbar, using flexbox for horizontal layout */
.navbar__left-section {
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 12px; /* Space between child elements */
}   
    
/* Logo styling, fixed height to maintain consistent size */
.navbar__logo {
    height: 90px;
}   
    
/* Container for title and subtitle stacked vertically */
.navbar__title-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 12px; /* Space between title and subtitle */
}       
   
/* Common color for both title and subtitle */
.navbar__title,
.navbar__subtitle {
    color: #005140;
}   

/* Main title font size */
.navbar__title {
    font-size: 24pt;
}       
    
/* Subtitle font size, smaller than the main title */
.navbar__subtitle {
    font-size: 10pt;
}

.navbar__logout {
    height: 3rem; /* Fixed height to align with navbar height */
    padding: 0 1.5rem; /* Horizontal padding for button content */
    font-size: 1.1rem; /* Slightly larger font for readability */
    font-weight: 600; /* Semi-bold text for emphasis */
    color: #ffffff; /* White text for contrast on dark background */
    background-color: #005140; /* Dark green background */
    border: none; /* Remove default button border */
    border-radius: 10px; /* Rounded corners for modern look */
    cursor: pointer; /* Pointer cursor to indicate clickable */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover/focus transitions */
    box-shadow: 0 4px 8px rgba(0, 81, 64, 0.2); /* Subtle shadow for depth */
    user-select: none; /* Prevent text selection on click */
    text-decoration: none; /* Remove underline if used as a link */
    display: inline-flex; /* Flex container to center content */
    align-items: center; /* Vertically center button content */
    justify-content: center; /* Horizontally center button content */
}

.navbar__logout:hover,
.navbar__logout:focus {
    background-color: #00725d; /* Slightly lighter green on hover/focus */
    box-shadow: 0 6px 12px rgba(0, 114, 93, 0.3); /* Stronger shadow on hover/focus */
    outline: none; /* Remove default focus outline for cleaner look */
}

/* Tablet and smaller devices */
@media (max-width: 768px) {
    .navbar {
        padding: 12px 20px; /* Reduce navbar padding for smaller screens */
    }

    .navbar__logo {
        height: 45px; /* Shrink logo height to fit better on small screens */
        margin-right: 12px; /* Add some spacing to the right of logo */
    }

    .navbar__title {
        font-size: 1.25rem; /* Reduce main title font size */
    }

    .navbar__subtitle {
        font-size: 0.9rem; /* Reduce subtitle font size */
    }

    .navbar__logout {
        font-size: 0.9rem; /* Smaller logout button font size */
        padding: 6px 12px; /* Smaller padding for compact button */
    }
}

/* Mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .navbar {
        padding: 10px 16px; /* Further reduce padding for smaller screens */
    }

    .navbar__logo {
        height: 35px; /* Make logo smaller for mobile */
        margin-right: 8px; /* Reduce spacing next to logo */
    }

    .navbar__title {
        font-size: 1rem; /* Smaller main title for limited space */
    }

    .navbar__subtitle {
        font-size: 0.8rem; /* Smaller subtitle for readability */
    }

    .navbar__logout {
        font-size: 0.85rem; /* Slightly smaller button text */
        padding: 5px 10px; /* Compact padding for smaller tap target */
    }
}