/* Enhanced dropdown styling */
#user-profile .absolute button {
position: relative;
overflow: hidden;
}

#user-profile .absolute button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
/* Use primary color with opacity - rgba(24, 127, 232, 0.1) matches --pp-primary-500 */
background: linear-gradient(90deg, transparent, rgba(24, 127, 232, 0.1), transparent);
transition: left 0.3s ease;
}

#user-profile .absolute button:hover::before {
left: 100%;
}

#user-profile .absolute button:hover {
background-color: var(--pp-neutral-50);
transform: translateX(2px);
transition: all 0.2s ease;
}

#user-profile .absolute button:active {
transform: translateX(1px);
background-color: var(--pp-neutral-200);
}

/* Dark mode: Button hover states */
html.dark #user-profile .absolute button:hover {
background-color: var(--pp-neutral-800);
}

html.dark #user-profile .absolute button:active {
background-color: var(--pp-neutral-700);
}

/* Special styling for logout button - using error color with opacity (rgb(239, 68, 68) = --pp-error-500) */
#user-profile .absolute button[onclick*="SignOut"]:hover {
background-color: rgba(239, 68, 68, 0.1);
border-left: 3px solid var(--pp-error-500);
}

#user-profile .absolute button[onclick*="SignOut"]:active {
background-color: rgba(239, 68, 68, 0.15);
}

/* Dark mode: Sign out button */
html.dark #user-profile .absolute button[onclick*="SignOut"]:hover {
background-color: rgba(239, 68, 68, 0.15);
}

html.dark #user-profile .absolute button[onclick*="SignOut"]:active {
background-color: rgba(239, 68, 68, 0.2);
}

/* Ensure dropdown is above everything */
#user-profile .absolute {
position: absolute !important;
z-index: 10001 !important;
pointer-events: auto !important;
}

/* Force dropdown to be clickable */
#user-profile .absolute * {
pointer-events: auto !important;
}

/* Ensure navbar is above hero section and builder preview */
nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10000 !important; /* ensure dropdown sits above builder preview (z=1000) and everything else */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
background-color: transparent !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: none !important;
}

/* Enhanced backdrop blur when scrolled - no background */
nav.scrolled {
background-color: transparent !important;
backdrop-filter: blur(30px) !important;
-webkit-backdrop-filter: blur(30px) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
border-bottom: none !important;
}

/* Navbar Variants System */
/* Default: Glass morphism (current default behavior) - uses default styles above */

/* App mode: Completely transparent navbar */
nav[data-nav-mode="app"] {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
}

nav[data-nav-mode="app"].scrolled {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
}

/* Reading mode: Opaque, sticky navbar for article pages */
nav[data-nav-mode="reading"] {
background-color: var(--pp-surface) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid var(--pp-border) !important;
}

nav[data-nav-mode="reading"].scrolled {
background-color: var(--pp-surface) !important;
box-shadow: var(--pp-shadow-card) !important;
border-bottom: 1px solid var(--pp-border) !important;
}

/* Legacy support: body.app-page (will be deprecated) */
body.app-page nav {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
}

body.app-page nav.scrolled {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
}

/* No padding needed since navbar is transparent */

/* Smooth scrolling for better UX */
html {
scroll-behavior: smooth !important;
}

/* Ensure navbar has proper spacing */
nav {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}

/* Glass morphism effect for navbar links */
nav a {
position: relative !important;
transition: all 0.3s ease !important;
}

/* Hover effect for navbar links with glass morphism - no shifting */
nav a:hover:not(#auth-buttons a) {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px) !important;
border-radius: 8px !important;
}

/* Enhanced logo visibility with minimal glass effect */
nav .text-2xl a {
background-color: transparent !important;
backdrop-filter: blur(5px) !important;
border-radius: 12px !important;
padding: 8px 16px !important;
transition: all 0.3s ease !important;
}

/* Ensure logo sizing is consistent between light and dark mode variants */
/* Force exact dimensions to overcome viewBox aspect ratio differences */
#navbar-logo {
height: 2.5rem !important;
width: 11.3rem !important; /* 180.6px - matches black logo natural width */
max-height: 2.5rem !important;
max-width: 11.3rem !important;
object-fit: contain !important;
object-position: left center !important;
display: inline-block !important;
vertical-align: middle;
}

nav .text-2xl a:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
}

/* Prevent layout shift by setting initial flex state */
.navbar-container {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
width: 100% !important;
}

/* Ensure navbar elements are positioned correctly from start */
.navbar-container > div {
flex-shrink: 0 !important;
}

/* Logo section - left aligned (first column) */
.navbar-container > div:first-child {
grid-column: 1;
justify-self: start !important;
}

/* Menu section - centered (second column) */
.navbar-container > div.hidden.lg\\:flex {
grid-column: 2;
justify-self: center !important;
}

/* Ensure desktop nav links are visible at lg+ (fallback if Tailwind responsive utils missing) */
@media (min-width: 1024px) {
.navbar-container > div.hidden.lg\\:flex {
display: flex !important;
}
}

/* Auth/Profile container - right aligned (third column) */
#auth-profile-container {
grid-column: 3;
flex: 0 0 auto !important;
min-width: 200px !important; /* Reserve space to prevent layout shift */
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important; /* Right align within container */
justify-self: end !important; /* Right align in grid */
}

/* Ensure user-profile maintains flex layout from start to prevent layout shift */
#user-profile {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
}

/* Server-side rendered sections are visible immediately */
/* Only hide elements that have the 'hidden' class (set by server-side or client-side) */
#auth-buttons,
#user-profile,
#mobile-auth-buttons,
#mobile-user-profile {
flex: 0 0 auto !important;
transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* When hidden, remove from layout flow to prevent layout shift */
#auth-buttons.hidden,
#user-profile.hidden,
#mobile-auth-buttons.hidden,
#mobile-user-profile.hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

/* When visible, ensure proper display and visibility */
#auth-buttons:not(.hidden),
#user-profile:not(.hidden),
#mobile-auth-buttons:not(.hidden),
#mobile-user-profile:not(.hidden) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: relative !important;
}

/* Mobile-specific display adjustments */
#mobile-auth-buttons:not(.hidden) {
display: block !important;
}

#mobile-user-profile:not(.hidden) {
display: block !important;
}

/* Glass morphism for auth buttons */
#auth-buttons a {
background-color: transparent !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 25px !important;
padding: 12px 24px !important;
font-size: 16px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}

#auth-buttons a:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Glass morphism for user profile */
#user-profile .cursor-pointer {
background-color: transparent !important;
backdrop-filter: blur(10px) !important;
border: none !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
}

#user-profile .cursor-pointer:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Hide learn section on app pages */
.app-hidden {
display: none !important;
}

/* Smooth hover transitions for profile trigger */
#user-profile .cursor-pointer {
transition: all 0.2s ease;
}

#user-profile .cursor-pointer:hover {
/* Using primary-500 RGB (24, 127, 232) for consistency */
background-color: rgba(24, 127, 232, 0.05);
transform: translateY(-1px);
}

/* Enhanced dropdown hover behavior */
#user-profile .absolute {
transition: all 0.2s ease;
}

/* Prevent dropdown from closing too quickly */
#user-profile .absolute:hover {
opacity: 1 !important;
visibility: visible !important;
}

/* Active/current page link styling */
.nav-link.active,
.nav-link.current-page {
color: var(--pp-primary-500) !important;
font-weight: 600;
cursor: default;
pointer-events: none;
}

.nav-link.active:hover,
.nav-link.current-page:hover {
color: var(--pp-primary-500) !important;
background-color: transparent !important;
}

/* Mobile and Tablet active link styling */
@media (max-width: 1023px) {
.nav-link.active,
.nav-link.current-page {
background-color: rgba(24, 127, 232, 0.1) !important;
color: var(--pp-primary-500) !important;
}
}

/* Mobile and Tablet optimizations */
@media (max-width: 1023px) {
/* Ensure navbar is properly positioned on mobile */
nav {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}

/* Mobile menu button styling */
#menu-toggle {
background-color: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#menu-toggle:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile menu animations */
#mobile-menu {
transform-origin: top right;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu:not(.hidden) {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

/* Touch-friendly mobile menu items */
#mobile-menu a,
#mobile-menu button {
min-height: 44px !important; /* iOS touch target minimum */
display: flex !important;
align-items: center !important;
}

/* Mobile user profile styling */
#mobile-user-profile .bg-gray-50 {
background-color: var(--pp-neutral-50) !important;
backdrop-filter: blur(10px) !important;
}

/* Dark mode: Mobile user profile */
html.dark #mobile-user-profile .bg-gray-50 {
background-color: var(--pp-neutral-800) !important;
}

/* Mobile profile avatar optimization */
#user-profile .cursor-pointer {
padding: 0.5rem !important; /* Reduce padding on mobile */
}

#user-profile .w-10.h-10 {
width: 2.5rem !important; /* Slightly smaller avatar on mobile */
height: 2.5rem !important;
}
}

/* Narrow viewports (e.g. below 425px): prevent navbar + profile dropdown from causing horizontal overflow */
@media (max-width: 480px) {
/* Allow profile container to shrink so navbar fits in viewport */
#auth-profile-container {
min-width: 0 !important;
}

/* Keep profile dropdown inside viewport; allow content to wrap/truncate */
#user-profile .absolute {
max-width: min(20rem, calc(100vw - 2rem)) !important;
width: max(12rem, min(20rem, calc(100vw - 2rem))) !important;
min-width: 0 !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

#user-profile .absolute .truncate {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* Role toggle: allow wrapping so "Free" / "Premium" don't force overflow */
#user-profile .role-toggle-banner {
min-width: 0 !important;
}

#user-profile .role-toggle-switch {
flex-wrap: wrap !important;
}

#user-profile .role-toggle-option {
white-space: nowrap !important;
}
}

/* Role toggle banner inside profile dropdown */
.role-toggle-banner {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem 0.85rem;
background: var(--pp-neutral-50);
border: 1px solid var(--pp-border);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Dark mode: Role toggle banner */
html.dark .role-toggle-banner {
background: var(--pp-neutral-800);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.role-toggle-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--pp-text-secondary);
}

.role-toggle-switch {
display: inline-flex;
gap: 0.35rem;
background: var(--pp-neutral-200);
border-radius: 9999px;
padding: 0.15rem;
}

/* Dark mode: Role toggle switch */
html.dark .role-toggle-switch {
background: var(--pp-neutral-700);
}

.role-toggle-option {
border: none;
background: transparent;
color: var(--pp-text-secondary);
font-weight: 600;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
}

.role-toggle-option:hover {
color: var(--pp-primary-700);
}

.role-toggle-option.active {
background: var(--pp-grad-brand);
color: var(--pp-surface);
box-shadow: 0 6px 16px rgba(24, 127, 232, 0.2);
}

.role-toggle-status {
font-size: 0.75rem;
color: var(--pp-text-secondary);
font-weight: 500;
}

/* Ensure feedback modal doesn't affect layout when hidden */
/* Modal uses position:fixed which already takes it out of document flow */
/* The hidden class (display:none) ensures it takes no space when hidden */
#feedbackModal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}

#feedbackModal.hidden {
display: none !important;
}

/* Shine effect for Provide Feedback button */
#user-profile .absolute button[onclick*="ProvideFeedback"] {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--pp-neutral-50) 0%, var(--pp-neutral-100) 100%);
border-left: 3px solid var(--pp-primary-500);
font-weight: 500;
color: var(--pp-primary-700);
}

/* Dark mode: Provide Feedback button */
html.dark #user-profile .absolute button[onclick*="ProvideFeedback"] {
background: linear-gradient(135deg, var(--pp-neutral-800) 0%, var(--pp-neutral-700) 100%);
color: var(--pp-primary-300);
}

#user-profile .absolute button[onclick*="ProvideFeedback"]::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
rgba(24, 127, 232, 0.3),
rgba(255, 255, 255, 0.6),
transparent
);
animation: shine 3s ease-in-out infinite;
pointer-events: none;
}

@keyframes shine {
0% {
left: -100%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 150%;
opacity: 0;
}
}

#user-profile .absolute button[onclick*="ProvideFeedback"]:hover {
background: linear-gradient(135deg, var(--pp-primary-50) 0%, var(--pp-primary-100) 100%);
border-left-color: var(--pp-primary-500);
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(24, 127, 232, 0.15);
}

/* Dark mode: Provide Feedback button hover - using primary-900 and primary-700 (primary-800 doesn't exist) */
html.dark #user-profile .absolute button[onclick*="ProvideFeedback"]:hover {
background: linear-gradient(135deg, var(--pp-primary-900) 0%, var(--pp-primary-700) 100%);
}

#user-profile .absolute button[onclick*="ProvideFeedback"]:hover::after {
animation: shine 1.5s ease-in-out infinite;
}

/* Style the BETA badge */
#user-profile .absolute button[onclick*="ProvideFeedback"] span {
background: var(--pp-grad-brand);
box-shadow: 0 2px 4px rgba(24, 127, 232, 0.3);
animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 2px 4px rgba(24, 127, 232, 0.3);
}
50% {
box-shadow: 0 2px 8px rgba(24, 127, 232, 0.5), 0 0 12px rgba(124, 58, 237, 0.3);
}
}

#user-profile .absolute button[onclick*="ProvideFeedback"]:hover span {
animation: pulse-glow 1s ease-in-out infinite;
transform: scale(1.05);
}