/* public/assets/css/style.css */

/* Apply variables to elements */
        body {
            background-color: var(--background-color);
            color: var(--text-color-primary);
        }

/* Native smooth scrolling where supported */
html { scroll-behavior: smooth; }

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes pulseSlow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-pulse-slow {
    animation: pulseSlow 3s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Scroll Animation (JavaScript will add 'is-visible' class) */
.scroll-animation {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animation.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tailwind CSS Integration (if not already included via CDN or build process) */
/* If you are using a Tailwind CSS build process, these might not be necessary here.
   However, for a quick fix, we can include some basic directives. */
/* Tailwind directives removed (using CDN build or precompiled CSS in project) */

/* Custom Scrollbar for Sidebar */
.flex-1.overflow-y-auto::-webkit-scrollbar {
    display: none;
}

.flex-1.overflow-y-auto {
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    scrollbar-width: none;  /* For Firefox */
}

/* Enhanced Active Navigation Item */
.active-nav {
    background-color: transparent !important; /* Make parent transparent to show pseudo-element */
    color: #000 !important;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    margin-left: 0.5rem; /* px-2 */
    margin-right: 0.5rem; /* px-2 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    position: relative; /* Needed for positioning the pseudo-element */
    overflow: hidden; /* Hide parts of the pseudo-element that go outside */
}

.active-nav svg {
    color: #000 !important;
}

.active-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    z-index: 0; /* Behind the content */
    clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%); /* The angled cut shape */
    transition: clip-path 0.3s ease-out; /* Animate the shape */
}

.active-nav span, .active-nav i {
    position: relative; /* Bring content above the pseudo-element */
    z-index: 1;
    color: #000 !important;
}


/* Specific elements from sidebar */
.hidden.md\:flex.flex-col.w-64.bg-white.shadow-lg.border-r-2.border-orange-500 { 
            background-color: var(--surface-color) !important;
            border-color: var(--primary-color) !important;
            box-shadow: var(--shadow-color) !important;
        }

        /* Specific elements from dashboard */
        .bg-white.p-4.rounded-lg.shadow-md {
            background-color: var(--surface-color) !important;
            box-shadow: var(--shadow-color) !important;
        }

        /* Specific elements from index.php */
        .bg-gray-900.overflow-hidden { background-color: var(--secondary-color) !important; }
        .text-gray-300 { color: var(--text-color-secondary) !important; }
        .bg-gray-800 { background-color: var(--surface-color) !important; }

        /* User profile dropdown links */
        #userProfileContent a {
            color: var(--text-color-primary) !important;
        }
        #userProfileContent a:hover {
            background-color: var(--background-color) !important;
        }

                /* Sidebar user info */
        .p-4.border-t #userProfileToggle p {
            color: var(--text-color-primary) !important;
        }
        .p-4.border-t #userProfileToggle p.text-xs {
            color: var(--text-color-secondary) !important;
        }

        /* Specific background for feature card in dark/oled */
        [data-theme="dark"] .feature-card > div {
            background-color: #1f2937 !important; /* Gray-800 */
        }
        [data-theme="oled"] .feature-card > div {
            background-color: #0a0a0a !important; /* Near black */
        }

        /* D3.js Universe Visualization Theme Adjustments */
        .links line {
            stroke: var(--border-color) !important; /* Links should adapt to theme */
        }

        .nodes path {
            stroke: var(--background-color) !important; /* Node borders */
        }

        /* Hide scrollbar for elements with overflow-y-auto */
        .overflow-y-auto::-webkit-scrollbar {
            display: none; /* For Chrome, Safari, and Opera */
        }

        .overflow-y-auto {
            -ms-overflow-style: none;  /* For Internet Explorer and Edge */
            scrollbar-width: none;  /* For Firefox */
        }



/* ==========================
   Hero / Parallax styles
   ========================== */
.hero {
    position: relative;
    height: 100vh !important; /* force full viewport height */
    min-height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-attachment: fixed; /* parallax fallback for many desktop browsers */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-image set inline in template to guarantee correct BASE_URL path */
}

/* removed problematic full-bleed duplicate that caused horizontal shifts */

/* Logo over hero */
.site-logo {
    position: absolute;
    top: 18px;
    left: 24px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.site-logo img { height: 42px; width: auto; display: block; }

/* full bleed hero without causing horizontal scroll */
.hero.full-bleed {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

/* prevent accidental horizontal scroll */
body { overflow-x: hidden; }

.hero-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center;
}

/* ensure the main/content inside hero fills height for true centering */
.hero-inner > main {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Readability wrapper for hero lead text */
.lead-wrap {
    display: inline-block;
    background: rgba(0,0,0,0.66); /* stronger semi-transparent dark for contrast */
    backdrop-filter: blur(6px);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    max-width: 760px;
}

.lead {
    color: #f3f4f6 !important; /* near-white */
    line-height: 1.75;
    font-weight: 400;
    font-size: 1.05rem;
    opacity: 0.98;
}

/* Heading contrast */
.hero h1 {
    text-shadow: 0 6px 22px rgba(0,0,0,0.65);
}

@media (min-width: 1024px) {
    .lead-wrap { background: rgba(0,0,0,0.56); }
    .lead { font-size: 1.125rem; }
}

@media (max-width: 640px) {
    .lead-wrap { padding: 0.9rem 1rem; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.35) 40%, rgba(2,6,23,0.6) 100%);
    backdrop-filter: blur(3px);
    z-index: 5;
}

/* Small tweak for the decorative image card */
.hover\:scale-102:hover { transform: scale(1.02); }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero { height: 70vh; background-attachment: scroll; }
}

@media (max-width: 640px) {
    .hero { min-height: 50vh; padding-top: 3rem; padding-bottom: 3rem; }
    .hero .text-4xl { font-size: 1.75rem; }
}

/* Slight entrance animation for hero content */
.hero-inner { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.hero.show .hero-inner { opacity: 1; transform: translateY(0); }

/* Improve contrast for accessibility on overlay */
.hero a { outline: none; }
.hero a:focus { box-shadow: 0 0 0 4px rgba(164,254,122,0.45); }

/* Panels to match hero aesthetic (stable stacking, no negative margins) */
.panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0; /* internal content uses px classes on its inner container */
    background-color: var(--surface-color);
    color: var(--text-color-primary);
}

/* Ensure the left sidebar always fills the viewport and uses the theme surface color
   This forces the background to continue to the bottom even when other layout
   rules or browser defaults would leave a gap. */
#sidebar {
    background-color: var(--surface-color) !important;
    min-height: 100vh !important;
    height: 100vh !important;
}

/* Make sure the internal scroll area stretches so bottom controls sit on the surface */
#sidebar .flex-1 {
    min-height: 0; /* allow flex child to shrink properly and keep footer at bottom */
}

/* Stronger guarantees: ensure the sidebar is a column flex and its nav fills available space
   so the bottom profile sits on the same surface color. Also reduce the shadow so it doesn't
   visually cut off at the bottom. */
#sidebar {
    display: flex !important;
    flex-direction: column !important;
    border-right: 2px solid var(--primary-color) !important;
    box-shadow: 0 0 0 0 transparent !important; /* remove heavy shadow that can create card look */
    z-index: 60 !important; /* keep sidebar above main content to avoid overlap */
    border-radius: 0 !important; /* ensure no rounded corners cause visible cut */
    overflow: visible !important;
}

#sidebar > .flex-1 {
    flex: 1 1 auto !important;
    background: var(--surface-color) !important; /* explicitly fill inner scroll area */
}

#sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* If some inner element forces a white background at the bottom, make sure it stretches */
#sidebar .p-4.border-t {
    background: transparent !important;
}

/* Profile dropdown positioning */
.user-profile-dropdown {
    position: absolute;
    right: 0;
    top: auto;
    /* place the dropdown above the toggle and lift it a bit so it visually overlaps */
    bottom: calc(100% + 8px) !important;
    transform: translateY(0) !important;
    z-index: 100000 !important; /* ensure it overlays everything */
    pointer-events: auto;
    /* subtle floating shadow and thin border to separate from background */
    box-shadow: 0 10px 30px rgba(2,6,23,0.12) !important;
    border: 1px solid rgba(2,6,23,0.06) !important;
}

/* Pop-in / pop-out animation for dropdowns */
.user-profile-dropdown {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    will-change: transform, opacity;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
}

.user-profile-dropdown.showing {
    animation: popIn 260ms cubic-bezier(.2,.85,.2,1) both;
}
.user-profile-dropdown.hiding {
    animation: popOut 220ms ease both;
}

/* Decorative arrow pointing downwards from the dropdown to the toggle */
.user-profile-dropdown::before {
    content: '';
    position: absolute;
    bottom: -6px; /* sits just below the dropdown so it points to the toggle */
    right: 12px;
    width: 12px;
    height: 12px;
    background: var(--surface-color);
    transform: rotate(45deg);
    box-shadow: -1px -1px 0 rgba(0,0,0,0.03), 0 6px 18px rgba(2,6,23,0.08);
    display: block;
}

/* On very small screens where there might not be enough room above, fall back to showing under the toggle */
@media (max-height: 420px) {
    .user-profile-dropdown {
        bottom: auto !important;
        top: calc(100% + 6px) !important;
    }
    .user-profile-dropdown::before {
        bottom: auto !important;
        top: -6px !important; /* arrow now points up */
        transform: rotate(45deg) !important;
    }
}

/* Ensure icons and text inside the profile dropdown are vertically aligned */
.user-profile-dropdown a {
    display: flex !important;
    align-items: center !important; /* vertical centering */
    gap: 0.5rem !important;
}

.user-profile-dropdown a i,
.user-profile-dropdown a .fa,
.user-profile-dropdown a .fas,
.user-profile-dropdown a .far {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.user-profile-dropdown a span {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Rotate chevrons when dropdowns are open */
#userProfileToggle i.fa-chevron-down,
#seasonStatusToggle i.fa-chevron-down {
    transition: transform 0.18s ease; /* smooth rotate */
    display: inline-block;
}

#userProfileToggle.open i.fa-chevron-down,
#seasonStatusToggle.open i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Make the sidebar sticky on desktop so it remains visible and its background
   continues while the main content scrolls. This keeps the sidebar visually
   intact even when the page is taller than the viewport. */
@media (min-width: 768px) {
    #sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 9999 !important; /* ensure above most content */
    }
}

/* ensure inner container keeps the standard page paddings */
.panel > .max-w-7xl,
.panel > .max-w-4xl {
    padding-left: 1rem;
    padding-right: 1rem;
}

.panel-dark {
    background: linear-gradient(180deg, rgba(6,10,15,0.95), rgba(2,6,23,0.95));
    color: #e6eef8;
}

/* Make content cards/light surfaces stand out */
.panel-dark .sport-card,
.panel-dark .feature-card > div,
.panel-dark .testimonial-card {
    background-color: var(--surface-color) !important;
    color: var(--text-color-primary) !important;
}

.panel-dark .text-gray-900 { color: #e6eef8 !important; }
.panel-dark .text-gray-800 { color: #dbe8f5 !important; }
.panel-dark .text-gray-700 { color: rgba(230,238,248,0.92) !important; }
.panel-dark .text-gray-600 { color: rgba(230,238,248,0.78) !important; }

/* Force higher contrast for common text elements inside dark panels */
.panel-dark h1,
.panel-dark h2,
.panel-dark h3,
.panel-dark h4,
.panel-dark h5,
.panel-dark h6 {
    color: #e6eef8 !important; /* near-white headings */
}

.panel-dark p,
.panel-dark li,
.panel-dark .lead,
.panel-dark .text-base,
.panel-dark .text-sm,
.panel-dark .muted,
.panel-dark small {
    color: rgba(230,238,248,0.9) !important; /* slightly off-white for body text */
}

.panel-dark a,
.panel-dark a:link,
.panel-dark a:visited {
    color: #ff6a00 !important; /* brand accent for links */
}
.panel-dark a:hover,
.panel-dark a:focus {
    color: #ffa04d !important;
    text-decoration: underline;
}

/* Utility overrides when Tailwind classes are used inside panels */
.panel-dark .text-gray-300 { color: rgba(230,238,248,0.85) !important; }
.panel-dark .text-gray-400 { color: rgba(230,238,248,0.72) !important; }
.panel-dark .text-gray-500 { color: rgba(230,238,248,0.6) !important; }

/* Leaderboard specific tweaks */

/* Ensure panels adapt to the chosen theme. In dark theme, keep the darker surface; in light, use the surface color. */
[data-theme="dark"] .panel {
    background: linear-gradient(180deg, rgba(6,10,15,0.95), rgba(2,6,23,0.95));
    color: var(--text-color-primary);
}

[data-theme="oled"] .panel {
    background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(6,6,6,0.96));
    color: var(--text-color-primary);
}

.panel { padding: 1rem; }
.panel .fa-trophy { display: inline-block; }
.panel .fa-trophy.fa-3x { font-size: 1.75rem; }
.panel .fa-trophy.fa-2x { font-size: 1.25rem; }

/* Table adjustments for leaderboard */
table.min-w-full { border-collapse: separate; border-spacing: 0 0.5rem; }
/* Theme-aware table header color */
table.min-w-full thead th { color: rgba(0,0,0,0.6); }
/* Light theme row backgrounds */
[data-theme="light"] table.min-w-full tbody tr { background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.03)); }
[data-theme="light"] table.min-w-full tbody tr:hover { background: rgba(0,0,0,0.04); }
/* Dark theme row backgrounds */
[data-theme="dark"] table.min-w-full thead th { color: rgba(230,238,248,0.75); }
[data-theme="dark"] table.min-w-full tbody tr { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); }
[data-theme="dark"] table.min-w-full tbody tr:hover { background: rgba(255,255,255,0.02); }
[data-theme="oled"] table.min-w-full thead th { color: rgba(230,238,248,0.65); }
[data-theme="oled"] table.min-w-full tbody tr { background: rgba(255,255,255,0.01); }
table.min-w-full td, table.min-w-full th { border: none; }

/* Save button used across admin pages */
.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.06s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    border: 1px solid transparent;
}

/* Theme-aware defaults: use primary color variable */
.btn-save {
    background-color: var(--primary-color);
    color: #10210F;
}
.btn-save:hover { background-color: var(--primary-hover-color); transform: translateY(-1px); }
.btn-save:active { transform: translateY(0); }
.btn-save:focus { outline: none; box-shadow: 0 0 0 4px rgba(164,254,122,0.45); }

/* Edit and Delete button variants used in admin lists */
.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-color-primary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-edit .fa { color: var(--primary-color); }
.btn-edit:hover { background-color: rgba(0,0,0,0.03); }

.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
    background: #dc2626; /* red-600 */
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
}
.btn-delete:hover { background: #b91c1c; }

[data-theme="dark"] .btn-edit:hover { background-color: rgba(255,255,255,0.03); }
[data-theme="dark"] .btn-edit { color: rgba(230,238,248,0.92); }
[data-theme="dark"] .btn-delete { background: #dc2626; }

/* Lighter appearance on light theme */
[data-theme="light"] .btn-save {
    background-color: var(--primary-color);
    color: #10210F;
}

[data-theme="dark"] .btn-save {
    background-color: var(--primary-color);
    color: #10210F;
}

[data-theme="oled"] .btn-save {
    background-color: var(--primary-color);
    color: #10210F;
}

/* Ensure icons and small meta elements are visible */
.panel-dark .icon,
.panel-dark .meta {
    color: rgba(230,238,248,0.78) !important;
}

/* CTA stack: force vertical layout for the final call-to-action */
.cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cta-stack h2 { margin-bottom: 0.25rem; }
.cta-stack p { max-width: 52rem; }

@media (max-width: 640px) {
    .cta-stack .inline-flex.rounded-md { width: 100%; }
    .cta-stack a.inline-flex { width: 100%; justify-content: center; }
}

/* Force the button container to be vertical on all sizes */
.cta-stack > .mt-8 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem;
    align-items: center;
}
.cta-stack > .mt-8 .inline-flex.rounded-md { width: auto; }

/* Fade-in animation for registration steps */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step container styling */
.step-container {
    transition: all 0.3s ease-in-out;
    min-height: 320px; /* Ensure consistent height for better UX */
}

.step-container.hidden {
    display: none;
}

/* Input field improvements */
.step-container input[type="text"],
.step-container input[type="email"],
.step-container input[type="password"] {
    transition: all 0.2s ease;
}

.step-container input[type="text"]:focus,
.step-container input[type="email"]:focus,
.step-container input[type="password"]:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}

/* Button improvements */
.step-container button {
    transition: all 0.2s ease;
}

.step-container button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Password requirement styling */
.step-container #req-length,
.step-container #req-uppercase,
.step-container #req-special {
    transition: all 0.3s ease;
    padding: 0.25rem 0;
}

/* Custom checkbox styling for terms */
input[type="checkbox"]:checked {
    background-color: #ea580c;
    border-color: #ea580c;
}

input[type="checkbox"]:focus {
    --tw-ring-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

/* Account type selection styling */
.account-radio {
    transition: all 0.2s ease;
}

.account-radio.border-orange-500 {
    border-color: #ea580c;
}

#free-account-option:hover,
#zoneplus-account-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#free-account-option.border-orange-500,
#zoneplus-account-option.border-orange-500 {
    box-shadow: 0 0 0 1px #ea580c, 0 4px 12px rgba(234, 88, 12, 0.15);
}

/* Mobile responsive improvements for registration */
@media (max-width: 640px) {
    /* Ensure registration container has proper spacing on mobile */
    .fade-in {
        margin: 0.5rem !important;
        padding: 1rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    
    /* Adjust input fields for mobile */
    .step-container input[type="text"],
    .step-container input[type="email"],
    .step-container input[type="password"] {
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Adjust button spacing for mobile */
    .step-container .flex.space-x-3,
    .step-container .flex.space-x-2 {
        gap: 0.5rem;
    }
    
    /* Stack buttons on very small screens */
    @media (max-width: 480px) {
        .step-container .flex.space-x-3,
        .step-container .flex.space-x-2 {
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .step-container .flex.space-x-3 button,
        .step-container .flex.space-x-2 button {
            width: 100%;
        }
    }
    
    /* Adjust password requirements box for mobile */
    .step-container .bg-gray-50 {
        padding: 1rem;
    }
    
    /* Ensure proper spacing for progress bar */
    .w-full.bg-gray-200 {
        margin: 0.5rem 0;
    }
}