.navbar {
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* background-color: #fff; */
    /* border-bottom: 1px solid #ddd; */
    width: 100%;
    box-sizing: border-box;
    position: fixed;  /* Change to fixed */
    top: 0;          /* Pin to top */
    left: 0;         /* Ensure full width alignment */
    z-index: 1000;   /* Keep navbar above other content */
    background-color: rgba(255, 255, 255, 0); /* start transparent */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
    will-change: background-color, box-shadow, backdrop-filter;
}

/* Create a left section for brand and nav */
.navbar-left {
    display: flex;
    align-items: center;
    margin-right: auto;  /* Push user info to the right */
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 30px;  /* Space between brand and nav links */
}

/* Center the icon palette to the page, independent of left/right widths */
.navbar-center {
    position: absolute;   /* Remove from flex flow and center to viewport */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    height: 60px;         /* Match navbar height for vertical centering */
    z-index: 1;           /* Keep above background but below overlays */
}

.nav-links {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile styles */
@media screen and (max-width: 900px) {
    .navbar {
        height: auto;
        padding: 10px;
        flex-direction: column;
        justify-content: center;  /* Center the brand container */
    }

    .navbar-left {
        justify-content: center;  /* Center contents */
        width: 100%;             /* Take full width */
        margin-right: 0;         /* Remove right margin */
    }

    .brand-container {
        margin-left: 0px !important;  /* Remove margin to allow true centering */
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin: 10px 0;
    }

    .user-info {
        width: 100%;
        padding-left: 10px;
        flex-wrap: wrap;
        text-align: center;
    }

    .user-details {
        align-items: center;
        text-align: center;
        padding-right: 20px;
    }

    .user-name, .user-email {
        font-size: 0.9em;
    }

    .profile-pic {
        width: 32px;
        height: 32px;
        align-items: right;
    }

    .nav-link {
        font-size: 16px;  /* Slightly larger font for touch */
    }

    .login-button {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .hamburger-menu {
        display: block !important;  /* Force display for testing */
        background-color: rgba(0,0,0,0.1);
        padding: 15px;
    }

    .desktop-nav {
        display: none;  /* Hide desktop nav on mobile */
    }

    .navbar .brand-container {
        margin-left: 50px;
    }
    
    .mobilebar .brand-container {
        padding: 20px;
        border-bottom: 1px solid #eee;
    }

    .desktop-only {
        display: none !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    .nav-links {
        flex-direction: column;
        gap: 5px;
    }

    .nav-link {
        width: 100%;
        text-align: center;
    }
}

/* Apply the same hover effects to profile pictures as profile initials */
.profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-pic:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Add the pulse animation to profile pics on hover */
.profile-pic:hover {
    animation: pulse 1.5s infinite;
}

.nav-link {
    color: #4285f4;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 8px;
    border-radius: 4px;
}

/* Center icon navigation */
.icon-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Bordered palette container, slightly below the navbar baseline */
.icon-palette {
    display: inline-flex;
    border: 1px solid #1f1f1f;
    border-radius: 48px;
    padding: 10px 18px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.12);
    background: #fff;
    position: relative;
    top: 10px; /* offset below the line */
}

/* (moved) Contact icon styles live with other icon declarations below */

.icon-button {
    position: relative;
    width: 50px;   /* 2x size from previous */
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible; /* allow tooltip to extend */
    z-index: 0; /* establish stacking context */
    will-change: transform;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.icon-button img { display: none; }

/* Hover circle */
.icon-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f0f0f0; /* light gray */
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 0; /* behind icon */
}

.icon-button:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Icon rendering via CSS variables and ::after so hover circle stays behind */
.icon-button { --icon: none; }

.icon-button::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1; /* above hover circle */
    pointer-events: none;
}

.icon-patterns { --icon: url('/static/images/navicons/navgray-patterns.png'); }
.icon-library { --icon: url('/static/images/navicons/navgray-library.png'); }
.icon-competition { --icon: url('/static/images/navicons/navgray-competition.png'); }
.icon-mission { --icon: url('/static/images/navicons/navgray-mission.png'); }
.icon-contact { --icon: url('/static/images/navicons/navgray-contact.png'); }

.icon-patterns.is-active { --icon: url('/static/images/navicons/nav-patterns.png'); }
.icon-library.is-active { --icon: url('/static/images/navicons/nav-library.png'); }
.icon-competition.is-active { --icon: url('/static/images/navicons/nav-competition.png'); }
.icon-mission.is-active { --icon: url('/static/images/navicons/nav-mission.png'); }
.icon-contact.is-active { --icon: url('/static/images/navicons/nav-contact.png'); }

/* Tooltip styling */
.icon-button .tooltip {
    position: absolute;
    top: calc(100% + 12px); /* appear just below icon */
    left: 50%;
    transform: translateX(-50%);
    background: #333;      /* dark gray */
    color: #fff;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 2; /* above everything */
}

.icon-button:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}

/* Hide icon nav on small screens */
@media screen and (max-width: 900px) {
    .navbar-center { display: none; }
}

/* For links that should have hover effect */
.nav-link.hover-active {
    transition: background-color 0.5s;
}

.nav-link.hover-active:hover {
    background-color: rgba(66, 133, 244, 0.1);
}

/* For links that shouldn't have hover effect */
.nav-link.hover-none:hover {
    background-color: transparent;
}

.user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-name {
    font-weight: bold;
    color: #333;
}

.user-email {
    font-size: 0.8em;
    color: #666;
}

.logout-text {
    font-size: 0.8em;
    color: #dc3545;
    cursor: pointer;
}

.login-button {
    background-color: #4285f4;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.login-button:hover {
    background-color: #357abd;
}

.loading-indicator-container {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    vertical-align: middle;
}

.loading-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.loading-percentage {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Add at the top with other core navbar elements */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 100;
    position: absolute;  /* Position independently */
    left: 0px;         /* Align with navbar padding */
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #5b5b5b;
    margin: 5px 0;
    /* Ensure spans are visible */
    position: relative;
    border-radius: 3px;
}

/* Add these new styles */
.mobilebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background-color: #fff;
    z-index: 999;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;  /* Start transparent */
    transition: opacity 0.3s ease;  /* Add fade transition */
}

.mobilebar.active {
    left: 0;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;  /* Fade to visible */
}

/* Add these styles for sidebar navigation */
.mobilebar-nav {
    display: block; /* stack items vertically */
    padding: 20px;
}

.mobilebar-nav .nav-link {
    display: block;
    width: 100%;
    padding: 12px 25px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    text-align: left !important; /* force left alignment on mobile sidebar */
}

.mobilebar-nav .nav-link:last-child {
    border-bottom: 1px solid #eee; /* keep divider under last item */
}

/* Section labels inside mobile sidebar */
.mobilebar-nav .section-label {
    display: block;
    width: 100%;
    margin-top: 20px;    /* increased space above label */
    margin-bottom: 8px;  /* slightly more space below */
    padding: 0 10px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #9aa0a6; /* muted gray */
    text-transform: uppercase;
    writing-mode: horizontal-tb; /* ensure normal orientation */
    transform: none !important;
    align-self: center;
}

/* Add divider above the first item in each section */
.mobilebar-nav .section-label + .nav-link {
    border-top: 1px solid #eee;
}

.section-label:last-child {
    margin-top: 50px;
}

/* Style sidebar user info */
.mobilebar-user {
    margin-top: auto;  /* Push to bottom */
    padding: 20px;
    border-top: 1px solid #eee;
}

/* Media queries for showing/hiding appropriate versions */
@media screen and (max-width: 900px) {
    .desktop-user {
        display: none;  /* Hide desktop user info on mobile */
    }
    
    .mobilebar-user .user-details {
        align-items: flex-start;  /* Left align text */
        margin-bottom: 10px;
    }

    /* When mobile sidebar is open, hide navbar brand and hamburger */
    .mobilebar.active ~ .navbar .brand-container {
        display: none !important;
    }
    .mobilebar.active ~ .navbar .hamburger-menu {
        display: none !important;
    }

    /* When mobile sidebar is open, neutralize the navbar fade background */
    .mobilebar.active ~ .navbar {
        background-color: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media screen and (min-width: 901px) {
    .mobilebar-user {
        display: none;  /* Hide sidebar user info on desktop */
    }

    .mobile-only {
        display: none !important;
    }

    /* Fully hide the mobile sidebar and overlay on desktop widths */
    .mobilebar,
    .mobile-overlay {
        display: none !important;
    }
}

/* Update brand styling */
.brand-logo {
    height: 30px;  /* Adjust size as needed */
    width: auto;
}

.brand {
    font-family: 'Georgia', serif;
    font-size: 1.4rem;
    color: #333;
}

/* Add padding to body to prevent content from hiding under navbar */
body {
    padding-top: 60px;  /* Same as navbar height */
}

/* Make sure this style is present */
.nav-link.active {
    font-weight: bold;
    color: #4285f4;
}

/* Add specific styles for mobile active state */
.mobilebar .nav-link.active {
    font-weight: bold;
    color: #4285f4;
}

/* Brand link styling with fancy underline effect */
.brand-container a {
    text-decoration: none;
    position: relative;
    color: inherit;
}

/* Text underline effect */
.brand-container a.brand::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #4285f4;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-container a.brand:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Logo growth effect */
.brand-container a img.brand-logo {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.brand-container a:hover img.brand-logo {
    transform: scale(1.11);
}

.beta-signup-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.beta-email-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 250px;
}

.beta-join-button {
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.beta-join-button:hover {
    background-color: #3367d6;
}

/* For mobile view */
.mobilebar-user .beta-signup-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.mobilebar-user .beta-email-input,
.mobilebar-user .beta-join-button {
    width: 100%;
    margin-bottom: 8px;
}

.profile-initial {
    width: 36px;
    height: 36px;
    box-sizing: border-box;    border-radius: 50%;
    background-color: white;
    color: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', serif;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid rgb(0, 0, 0,0.2);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
    overflow: hidden;
}

.profile-initial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, transparent 1%, rgba(66, 133, 244, 0.03) 1%);
    background-position: center;
    background-size: 15000%;
    opacity: 0;
    transition: background 0.5s, opacity 0.5s;
    border-radius: 50%;
}

.profile-initial:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.profile-initial:active::after {
    background-size: 100%;
    opacity: 1;
    transition: 0s;
}

/* Optional: Add a subtle pulse animation on hover */
@keyframes pulse {
    0% { box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05); }
    50% { box-shadow: 0 4px 10px rgba(66, 133, 244, 0.15), 0 2px 4px rgba(66, 133, 244, 0.1); }
    100% { box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05); }
}

.profile-initial:hover {
    animation: pulse 1.5s infinite;
}

/* Profile dropdown styling */
.profile-container {
    position: relative;
    cursor: pointer;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    width: 250px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
}

.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.dropdown-value {
    color: #202124;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-label {
    display: none;
}

.dropdown-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 8px 0;
}

.dropdown-link {
    color: #4285f4;
    text-decoration: none;
    font-weight: 500;
    display: block;
    transition: background-color 0.2s;
}

.dropdown-link:hover {
    background-color: #f5f5f5;
}

/* Add a small arrow/triangle to the dropdown */
.profile-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 16px;
    width: 16px;
    height: 16px;
    background-color: white;
    transform: rotate(45deg);
    border-top: 1px solid rgba(0,0,0,0.08);
    border-left: 1px solid rgba(0,0,0,0.08);
}

/* Mobile adjustments */
.mobilebar .profile-dropdown {
    position: static;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.08);
}

.mobilebar .profile-dropdown::before {
    display: none;
}

/* Make profile pic/initial clickable */
.profile-pic, .profile-initial {
    cursor: pointer;
}

/* Remove any default underlines from all navbar links */
.navbar a, .mobilebar a {
    text-decoration: none;
}

/* Keep the fancy underline effect ONLY for the brand text */
.brand-container a.brand::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #4285f4;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-container a.brand:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Ensure nav-links never have underlines */
.nav-links .nav-link {
    text-decoration: none !important;
}

/* Ensure dropdown links never have underlines */
.dropdown-link {
    text-decoration: none !important;
}

/* Beta email display with join button */
.beta-email-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.beta-email-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.beta-user-email {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    text-align: right;
}

.reset-form {
    margin: 0;
}

.beta-reset-text {
    background: none;
    border: none;
    color: #4285f4;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-align: right;
}

.beta-reset-text:hover {
    text-decoration: underline;
}

/* Mobile-specific styles */
@media screen and (max-width: 900px) {
    .mobilebar-user .beta-email-display {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .mobilebar-user .beta-email-container {
        margin-bottom: 10px;
    }
    
    .mobilebar-user .beta-join-button {
        width: 100%;
    }
}

/* Add styles for the outlined version of the beta-join-button */
.beta-join-button.outline {
    background-color: transparent;
    color: #4285f4;
    border: 1px solid #4285f4;
}

.beta-join-button.outline:hover {
    background-color: rgba(66, 133, 244, 0.1);
}