/* Modern PadelMatcher Styling with Bootstrap 5.3+ Native Dark Mode */

/* Custom Properties for Modern Design */

/* Lit Theme Toggle - Usa classi Bootstrap native */
pm-theme-toggle {
  display: inline-block;
}

/* ========================================
   TOP RIGHT ACTIONS BAR (DESKTOP ONLY)
   ======================================== */
.pm-topbar-actions {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .pm-topbar-actions {
    background: rgba(33, 37, 41, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Notification dropdown positioning from topbar */
@media (min-width: 992px) {
    .pm-topbar-actions pm-notification-bell::part(dropdown),
    .pm-topbar-actions pm-notification-bell .dropdown-menu {
        position: fixed !important;
        top: 4.5rem !important;
        right: 1rem !important;
        left: auto !important;
        bottom: auto !important;
        width: 320px !important;
        max-width: 320px !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* Legacy button styles for backward compatibility */
.custom-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}

.custom-user { 
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius:6px;
    border-color: rgba(255, 255, 255, 0.5);
}

.nav-link-custom {
    padding: 0;
}

.profile-pict-custom {
    width: 60px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius:6px;
    object-fit: cover;
}

/* ========================================
   LIT COMPONENTS SUPPORT
   ======================================== */

/* Hover effects for cards */
.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Legacy compatibility - will be auto-migrated */
.stats-counter {
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--bs-primary);
}

/* Hero parallax container */
.hero-parallax {
    will-change: transform;
}

    .pm-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        background: linear-gradient(145deg, #0d6efd 0%, #001b44 100%);
        color: white;
        padding: 0;
        z-index: 1040;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 
            4px 0 20px rgba(0, 0, 0, 0.3),
            2px 0 10px rgba(0, 0, 0, 0.2),
            8px 0 40px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    /* Disabilita transizioni durante il resize per evitare effetti visivi strani */
    .pm-sidebar.resizing {
        transition: none !important;
    }

    /* Ombra più chiara per dark mode */
    [data-bs-theme="dark"] .pm-sidebar {
        box-shadow: 
            4px 0 20px rgba(255, 255, 255, 0.1),
            2px 0 10px rgba(255, 255, 255, 0.08),
            8px 0 40px rgba(255, 255, 255, 0.05),
            4px 0 30px rgba(13, 110, 253, 0.2);
    }

    /* Sidebar on mobile: slides from right */
    @media (max-width: 991.98px) {
        .pm-sidebar {
            left: auto;
            right: 0;
            transform: translateX(100%);
            box-shadow: none !important; /* No shadow when hidden */
        }
        
        /* Override dark mode shadow on mobile when closed */
        [data-bs-theme="dark"] .pm-sidebar {
            box-shadow: none !important;
        }
        
        .pm-sidebar.show {
            transform: translateX(0);
            box-shadow: 
                -4px 0 20px rgba(0, 0, 0, 0.3),
                -2px 0 10px rgba(0, 0, 0, 0.2),
                -8px 0 40px rgba(0, 0, 0, 0.15) !important;
        }

        /* Shadow for dark mode on mobile when open */
        [data-bs-theme="dark"] .pm-sidebar.show {
            box-shadow: 
                -4px 0 20px rgba(255, 255, 255, 0.1),
                -2px 0 10px rgba(255, 255, 255, 0.08),
                -8px 0 40px rgba(255, 255, 255, 0.05),
                -4px 0 30px rgba(13, 110, 253, 0.2) !important;
        }
        
        /* Overlay for mobile */
        .pm-sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1039;
            display: none;
        }
        
        .pm-sidebar-overlay.show {
            display: block;
        }
    }

    /* Logo section */
    .pm-sidebar__logo {
        padding: 0.5rem 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .pm-sidebar__logo img {
        max-height: 60px;
        width: auto;
    }

    /* Hide logo on mobile (already visible in mobile navbar) */
    @media (max-width: 991.98px) {
        .pm-sidebar__logo {
            display: none;
        }
    }

    /* Menu items */
    .pm-sidebar__menu {
        padding: 1rem 0;
        list-style: none;
        margin: 0;
        flex: 1; /* Occupa tutto lo spazio disponibile, spingendo il menù utente in fondo */
        overflow-y: auto; /* Permette scroll se il menù è troppo lungo */
    }

    .pm-sidebar__menu-item {
        margin: 0.25rem 0.5rem;
    }

    .pm-sidebar__menu-link {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .pm-sidebar__menu-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .pm-sidebar__menu-link i {
        margin-right: 0.75rem;
        width: 20px;
        text-align: center;
    }

    /* Submenu */
    .pm-sidebar__submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .pm-sidebar__menu-item.active .pm-sidebar__submenu {
        max-height: 1000px;
    }

    .pm-sidebar__submenu-item {
        padding-left: 1rem;
    }

    .pm-sidebar__submenu-link {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }

    .pm-sidebar__submenu-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .pm-sidebar__submenu-link i {
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }

    /* Divider */
    .pm-sidebar__divider {
        margin: 0.5rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pm-sidebar__submenu-header {
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* User section at bottom - sempre attaccato al fondo */
    .pm-sidebar__user {
        position: relative; /* Necessario per il position: absolute del menu */
        margin-top: auto; /* Spinge il menù utente sempre in fondo con flexbox */
        flex-shrink: 0; /* Non si comprime mai */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        overflow: visible;
    }

    /* User section: same behavior on mobile */
    @media (max-width: 991.98px) {
        .pm-sidebar__user {
            margin-top: auto;
        }
    }

    /* User toggle button (clickable profile area) */
    .pm-sidebar__user-toggle {
        display: flex;
        align-items: center;
        padding: 1rem;
        cursor: pointer;
        transition: background 0.2s ease;
        gap: 0.75rem;
    }

    .pm-sidebar__user-toggle:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    /* User avatar */
    .pm-sidebar__user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .pm-sidebar__user-avatar--placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.5rem;
    }

    /* User info (name + email) */
    .pm-sidebar__user-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        margin-left: 0.9rem;
    }

    .pm-sidebar__user-name {
        font-weight: 600;
        font-size: 0.9rem;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pm-sidebar__user-email {
        display: block;
        opacity: 0.6;
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Chevron icon */
    .pm-sidebar__user-chevron {
        transform: rotate(180deg);
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
        transition: transform 0.3s ease, color 0.2s ease;
        flex-shrink: 0;
    }

    .pm-sidebar__user.menu-open .pm-sidebar__user-chevron {
        transform: rotate(0deg);
        color: rgba(255, 255, 255, 0.9);
    }

    /* User menu (opens upward su desktop e mobile) */
    .pm-sidebar__user-menu {
        bottom: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #1a1d29 0%, #0f1116 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pm-sidebar__user.menu-open .pm-sidebar__user-menu {
        max-height: 500px;
    }

    /* User menu: stesso comportamento upward su mobile */
    @media (max-width: 991.98px) {
        .pm-sidebar__user-menu {
            /* Mantiene bottom: 100% per aprirsi verso l'alto */
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        }

        .pm-sidebar__user.menu-open .pm-sidebar__user-menu {
            max-height: 400px; /* Ridotto per mobile */
            overflow-y: auto;
        }
    }

    /* User menu list */
    .pm-sidebar__user-menu-list {
        list-style: none;
        padding: 0.5rem 0;
        margin: 0;
    }

    .pm-sidebar__user-menu-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.2s ease;
    }

    .pm-sidebar__user-menu-link:hover {
        background: rgba(255, 255, 255, 0.05);
        color: white;
        padding-left: 1.25rem;
    }

    .pm-sidebar__user-menu-link i {
        width: 18px;
        font-size: 0.9rem;
        opacity: 0.7;
    }

    .pm-sidebar__user-menu-link--logout {
        color: rgba(255, 100, 100, 0.9);
    }

    .pm-sidebar__user-menu-link--logout:hover {
        background: rgba(255, 100, 100, 0.1);
        color: #ff6b6b;
    }

    /* Menu divider */
    .pm-sidebar__user-menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0.5rem 0;
    }

    /* Dark mode toggle & notifications in user menu */
    .pm-sidebar__user-menu-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.2);
    }

    /* Non-authenticated user login button */
    .pm-sidebar__user-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem;
        color: white;
        text-decoration: none;
        font-weight: 600;
        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
        transition: all 0.2s ease;
    }

    .pm-sidebar__user-login:hover {
        background: linear-gradient(135deg, #0b5ed7 0%, #084298 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }

    /* Mobile navbar (top bar on mobile) */
    .pm-mobile-navbar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
        color: white;
        padding: 0.5rem 1rem;
        z-index: 1041;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 991.98px) {
        .pm-mobile-navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .pm-sidebar {
            top: 60px;
            height: calc(100vh - 60px);
        }
    }

    .pm-mobile-navbar__logo img {
        height: 40px;
    }

    .pm-mobile-navbar__actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .pm-mobile-navbar__toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.5rem 0.75rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pm-mobile-navbar__toggle:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

    .pm-mobile-navbar__toggle:active {
        transform: scale(0.95);
    }

    /* Content adjustment for desktop - ONLY for pages with sidebar */
    @media (min-width: 992px) {
        body.has-sidebar {
            padding-left: 280px;
        }
    }

    /* Content adjustment for mobile (avoid navbar overlap) */
    @media (max-width: 991.98px) {
        body {
            padding-top: 0; /* Reset body padding */
        }

        /* Add padding to main content container to avoid navbar overlap */
        main.container {
            padding-top: 60px !important; /* Height of mobile navbar */
            margin-top: 0 !important;
        }
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-reveal {
        transform: translateY(20px);
    }
    
    .scroll-reveal.slide-left,
    .scroll-reveal.slide-right {
        transform: translateY(20px);
    }
    
    .scroll-reveal.slide-left.revealed,
    .scroll-reveal.slide-right.revealed {
        transform: translateY(0);
    }
    
    .stats-counter {
        font-size: 2rem;
    }
}

/* ========================================
   DARK MODE FIXES
   ======================================== */

/* Fix btn-outline-dark visibility in dark mode */
[data-bs-theme="dark"] .btn-outline-dark {
    border-color: #f8f9fa !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-bs-theme="dark"] .btn-outline-dark:focus {
    border-color: #f8f9fa !important;
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.25) !important;
}

[data-bs-theme="dark"] .btn-outline-dark:active,
[data-bs-theme="dark"] .btn-outline-dark.active {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Fix other outline buttons that might have visibility issues */
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: #adb5bd !important;
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-bs-theme="dark"] .custom-btn {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Additional dark mode fixes for legacy components */
[data-bs-theme="dark"] .custom-user {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .pm-match-card {
    background: rgba(255, 255, 255, 0.2);
}