/* PrivateJets Nav User - WordPress Plugin Styles */
/* Matching NextJS NavUser component design with DaisyUI dark theme */

/* Integration with GreenShift header */
.pj-header-integration {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.pj-nav-user {
    position: relative;
    display: flex;
    align-items: center;
    font-family: 'Satoshi', sans-serif;
    /* Remove width and height constraints */
}

/* Login button and user icon for unauthenticated users - matching NextJS exactly */
.pj-header-right-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Tailwind utility class support */
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.flex { display: flex; }
.gap-4 { gap: 1rem; }
.hidden { display: none; }
@media (min-width: 768px) { 
    .md\:flex { display: flex; } 
    .md\:hidden { display: none; }
}
@media (max-width: 767px) { 
    .md\:hidden { display: block; }
}

/* NextJS exact styling for login button */
.pj-login-btn {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: inline-block;
}

/* Tailwind classes for login button */
.border { border-width: 1px; }
.border-gray-100 { border-color: rgba(255, 255, 255, 0.4); } /* White border for dark theme */
.pj-login-border { 
    border: 1px solid rgba(255, 255, 255, 0.4); /* Exact match to NextJS border */
}
.rounded-3xl { border-radius: 1.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pl-3 { padding-left: 0.75rem; }

.pj-login-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    text-decoration: none;
}

.pj-user-icon-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* NextJS exact styling for user icon */
.pj-user-icon {
    color: #ffffff;
    transition: background-color 0.2s ease;
    width: 39px;
    height: 39px;
}

/* Tailwind classes for user icon */
.bg-neutral { 
    background-color: rgba(128, 128, 128, 0.6); /* Match NextJS neutral color on dark bg */
}
.p-1 { padding: 0.25rem; }
.rounded-full { border-radius: 50%; }
.h-\[2\.7em\] { 
    height: 2.7em; 
    width: 39px; /* Ensure width matches exactly */
}

/* Force exact 39x39 pixel sizing */
.pj-icon-39 {
    width: 39px !important;
    height: 39px !important;
}

/* Additional Tailwind utilities for logged-in functionality */
.relative { position: relative; }
.absolute { position: absolute; }
.right-0 { right: 0; }
.mt-2 { margin-top: 0.5rem; }
.w-80 { width: 20rem; }
.bg-white { background-color: #ffffff; }
.rounded-2xl { border-radius: 1rem; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.border-gray-200 { border-color: #e5e7eb; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.z-50 { z-index: 50; }
.transform { transform: translate(0, 0); }
.transition-all { transition: all 0.2s ease-out; }
.duration-200 { transition-duration: 0.2s; }
.ease-out { transition-timing-function: ease-out; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.border-b { border-bottom-width: 1px; }
.border-gray-100 { border-color: #f3f4f6; }
.items-center { align-items: center; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.font-medium { font-weight: 500; }
.text-gray-900 { color: #111827; }
.text-sm { font-size: 0.875rem; }
.text-gray-500 { color: #6b7280; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.w-full { width: 100%; }
.items-start { align-items: flex-start; }
.text-left { text-align: left; }
.block { display: block; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.text-lg { font-size: 1.125rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.flex-1 { flex: 1; }
.text-xs { font-size: 0.75rem; }
.text-xxs { font-size: 0.625rem; }
.border-t { border-top-width: 1px; }
.justify-end { justify-content: flex-end; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.bg-gray-100 { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.text-gray-700 { color: #374151; }
.text-center { text-align: center; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.duration-200 { transition-duration: 0.2s; }
.p-1 { padding: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.border-gray-300 { border-color: #d1d5db; }
.font-medium { font-weight: 500; }

.pj-user-icon:hover {
    background-color: rgba(128, 128, 128, 0.8);
}

/* User dropdown for authenticated users */
.pj-user-dropdown {
    position: relative;
}

.pj-user-dropdown button,
.pj-user-dropdown label,
.pj-user-dropdown .swap {
    cursor: pointer !important;
}

.pj-user-avatar-btn {
    display: flex;
    align-items: center;
    space: 0.5rem;
    padding: 0.25rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

.pj-user-avatar-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.pj-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer !important;
}

/* Dropdown menu */
.pj-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 3.5rem;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: none !important;
    padding: 0.75rem 0;
    z-index: 50;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-out;
    overflow: hidden;
    box-sizing: border-box;
}

.pj-dropdown-menu.show {
    transform: scale(1);
    opacity: 1;
}

/* User info header */
.pj-user-info {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pj-user-details {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pj-user-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.pj-user-text {
    flex: 1;
}

.pj-user-name {
    font-weight: 500;
    color: #111827;
    font-size: 0.875rem;
}

.pj-user-email {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Menu items */
.pj-menu-items {
    padding: 0.5rem 0;
}

.pj-menu-item {
    width: 100%;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: background-color 0.2s ease;
    color: inherit;
    text-decoration: none;
}

.pj-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
}

.pj-menu-icon {
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.pj-menu-content {
    flex: 1;
}

.pj-menu-label {
    font-weight: 500;
    color: #111827;
    font-size: 0.875rem;
}

.pj-menu-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

/* Footer actions */
.pj-menu-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pj-signout-btn {
    padding: 0.5rem 1rem;
    background-color: #f3f4f6 !important;
    border: none !important;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pj-signout-btn:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Links */
.pj-menu-links {
    padding: 0.5rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6b7280;
}

.pj-menu-links a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pj-menu-links a:hover {
    color: #374151;
    text-decoration: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pj-header-right-wrapper {
        display: none;
    }
    
    .pj-dropdown-menu {
        width: calc(100vw - 2rem);
        max-width: 22rem;
        right: 0;
        left: auto;
    }
}

/* WordPress Block Theme specific positioning */
.wp-block-template-part .pj-nav-user,
.wp-block-template-part[data-theme-part="header"] .pj-nav-user,
.wp-block-group .pj-nav-user,
.site-header .pj-nav-user,
.header .pj-nav-user {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* Site Editor specific styles */
.wp-block-privatejets-nav-user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 40px;
}

/* GreenShift header integration */
.header-right-part .wp-block-privatejets-nav-user,
.header-right-part .pj-nav-user {
    margin: 0;
    padding: 0;
    min-height: auto;
    height: 100%;
}

/* Fix the main header container to be flexbox */
.wp-site-blocks .header,
div.header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Mobile-first layout: logo left, user right */
.wp-site-blocks .header .container,
div.header div.container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    gap: 1rem !important;
}

/* Desktop layout - three columns with centered logo */
@media (min-width: 769px) {
    .wp-site-blocks .header .container,
    div.header div.container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-areas: "nav logo user" !important;
        align-items: center !important;
    }
}

/* Logo positioning */
.wp-site-blocks .header .container img,
div.header div.container img {
    order: 1 !important;
}

/* NavUser positioning */
.wp-site-blocks .header .container .wp-block-privatejets-nav-user,
div.header div.container .wp-block-privatejets-nav-user {
    order: 2 !important;
}

/* Desktop grid positioning */
@media (min-width: 769px) {
    /* Navigation on left */
    .wp-site-blocks .header .container .wp-block-navigation,
    div.header div.container nav.wp-block-navigation {
        grid-area: nav !important;
        justify-self: start !important;
    }

    /* Logo in center */
    .wp-site-blocks .header .container img,
    div.header div.container img {
        grid-area: logo !important;
        justify-self: center !important;
        order: unset !important;
    }

    /* NavUser on right */
    .wp-site-blocks .header .container .wp-block-privatejets-nav-user,
    div.header div.container .wp-block-privatejets-nav-user {
        grid-area: user !important;
        justify-self: end !important;
        order: unset !important;
    }
}

/* Fix header-right-part to use flexbox instead of absolute positioning */
.wp-site-blocks .header .header-right-part,
div.header .header-right-part {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    z-index: 20 !important;
}

/* Fix for remote production when NavUser is inside header-right-part */
.header-right-part .wp-block-privatejets-nav-user {
    width: auto !important;
    justify-content: flex-start !important;
}

.header-right-part .pj-header-integration {
    width: auto !important;
    justify-content: flex-start !important;
}

.header-right-part .pj-header-right-wrapper {
    justify-content: flex-start !important;
    width: auto !important;
}

/* Override inline styles when inside header-right-part - more specific selector */
div.header-right-part .wp-block-privatejets-nav-user[style] {
    justify-content: flex-start !important;
}

div.header-right-part .wp-block-privatejets-nav-user {
    justify-content: flex-start !important;
}

/* Maximum specificity override for inline styles */
div.header-right-part > .wp-block-privatejets-nav-user.pj-header-integration[style*="justify-content"] {
    justify-content: flex-start !important;
}

/* Fallback using attribute selectors with full path */
div.header-right-part .wp-block-privatejets-nav-user[style*="justify-content: flex-end"] {
    justify-content: flex-start !important;
}

/* Ensure proper fit within GreenShift container */
.header .container .pj-header-right-wrapper {
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Better integration with WordPress block themes */
.wp-site-blocks .pj-nav-user {
    font-family: var(--wp--preset--font-family--satoshi, 'Satoshi', sans-serif);
}

/* Override WordPress block editor styles */
.pj-nav-user,
.pj-nav-user * {
    box-sizing: border-box !important;
}

/* Ensure visibility over WordPress blocks */
#pj-nav-user-container {
    z-index: 999 !important;
}

.pj-dropdown-menu {
    z-index: 9999 !important;
}

/* Override WordPress default styles */
.pj-nav-user * {
    box-sizing: border-box;
}

/* Override Tailwind border classes in dropdown */
.pj-dropdown-menu .border,
.pj-dropdown-menu .border-gray-200,
.pj-dropdown-menu .border-gray-100 {
    border: none !important;
}

/* Force logout button visibility with Tailwind class overrides */
button.bg-gray-100.hover\:bg-gray-200 {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border: none !important;
}

button.bg-gray-100.hover\:bg-gray-200:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Clean header styling without debug borders */
.header {
    min-height: 80px;
    padding: 0;
}

.header .container {
    min-height: 60px;
}

/* Dark theme colors for WordPress (matching your current site) */
body.dark .pj-dropdown-menu,
.dark .pj-dropdown-menu {
    background-color: #1f2937;
    border: none;
}

.dark .pj-user-name {
    color: #f9fafb;
}

.dark .pj-user-email {
    color: #d1d5db;
}

.dark .pj-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .pj-menu-label {
    color: #f9fafb;
}

.dark .pj-menu-description {
    color: #d1d5db;
}

.dark .pj-signout-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
    border: none !important;
}

.dark .pj-signout-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #f9fafb !important;
}

.dark .pj-menu-links,
.dark .pj-menu-links a {
    color: #9ca3af;
}

.dark .pj-menu-links a:hover {
    color: #d1d5db;
}

.dark .pj-user-info,
.dark .pj-menu-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Hamburger Menu Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer !important;
    text-decoration: none;
    background-color: transparent;
    color: inherit;
}

.btn-circle {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    padding: 0;
}

.swap {
    position: relative;
    display: inline-grid;
    place-content: center;
    cursor: pointer !important;
}

.swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition: all 0.2s ease;
}

.swap input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.swap input:not(:checked) ~ .swap-on {
    opacity: 0;
    transform: scale(0.5);
}

.swap input:checked ~ .swap-off {
    opacity: 0;
    transform: scale(0.5);
}

.swap input:checked ~ .swap-on {
    opacity: 1;
    transform: scale(1);
}

.swap-rotate input:checked ~ .swap-off {
    transform: rotate(-45deg) scale(0.5);
}

.swap-rotate input:checked ~ .swap-on {
    transform: rotate(0deg) scale(1);
}

.swap-off,
.swap-on {
    grid-column: 1;
    grid-row: 1;
    transition: all 0.3s ease;
    fill: currentColor;
    color: #ffffff;
    width: 24px;
    height: 24px;
    cursor: pointer !important;
}

/* Mobile Menu Dropdown */
#pj-mobile-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e5e7eb;
    padding: 0.75rem 0;
    z-index: 9999;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-out;
    overflow: hidden;
    box-sizing: border-box;
}

/* Sub-link styling */
.space-y-1 > * + * {
    margin-top: 0.25rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.pl-16 {
    padding-left: 4rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-600 {
    color: #4b5563;
}

.hover\:text-gray-900:hover {
    color: #111827;
}

/* Additional Tailwind utilities for sub-links */
.space-x-3 > * + * {
    margin-left: 0.75rem;
}

/* Dark theme support for mobile menu and sub-links */
.dark #pj-mobile-menu {
    background-color: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .text-gray-600 {
    color: #d1d5db;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

.dark .hover\:text-gray-900:hover {
    color: #f9fafb;
}

.dark .text-gray-900 {
    color: #f9fafb;
}

.dark .text-gray-500 {
    color: #9ca3af;
}

.dark .text-gray-700 {
    color: #d1d5db;
}

.dark .border-gray-100 {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Menu item text wrapping and overflow handling */
.pj-dropdown-menu a,
#pj-mobile-menu a,
#pj-user-menu a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.pj-dropdown-menu .flex-1,
#pj-mobile-menu .flex-1,
#pj-user-menu .flex-1 {
    min-width: 0;
    flex: 1;
}

.pj-dropdown-menu .text-sm,
#pj-mobile-menu .text-sm,
#pj-user-menu .text-sm {
    white-space: normal;
    word-break: break-word;
}

/* Mobile header layout fixes */
@media (max-width: 768px) {
    /* Ensure header container uses flexbox layout */
    .header .container,
    div.header div.container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    
    /* Logo on the left */
    .header .container img:not(.rounded-full),
    div.header div.container img:not(.rounded-full) {
        order: 1 !important;
        margin-right: auto !important;
    }
    
    /* Avatar images should maintain 40x40 size */
    .header .container img.rounded-full,
    div.header div.container img.rounded-full {
        width: 40px !important;
        height: 40px !important;
        object-fit: cover !important;
    }
    
    /* NavUser on the right */
    .header .container .wp-block-privatejets-nav-user,
    div.header div.container .wp-block-privatejets-nav-user {
        order: 2 !important;
        margin-left: auto !important;
    }

    #pj-mobile-menu {
        width: calc(100vw - 2rem);
        max-width: 18rem;
        right: 1rem;
        left: auto;
    }
    
    .swap-off,
    .swap-on {
        width: 32px;
        height: 32px;
    }
    
    .pl-16 {
        padding-left: 2rem;
    }
}

@media (max-width: 480px) {
    #pj-mobile-menu {
        width: calc(100vw - 1rem);
        max-width: none;
        right: 0.5rem;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .pl-16 {
        padding-left: 1.5rem;
    }
}