/* ===========================================
   VERTICAL PROGRESS BAR - CSS
   Reusable component for any webpage
   =========================================== */

/* Main progress indicator container - PC only */
.vpb-container {
    position: fixed;
    top: 50%; /* Center vertically */
    right: 2rem;
    transform: translateY(-50%); /* Perfect vertical centering */
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center; /* Center alignment for bar and numbers */
    z-index: 10000; /* ensure it's above all other elements */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    pointer-events: none;
}

/* Show only on desktop screens (1025px and above) */
@media (min-width: 1025px) {
    .vpb-container {
        display: flex;
    }
}

/* Hide the vertical bar whenever the hamburger menu is open */
body.menu-open .vpb-container {
    display: none !important;
}

/* Progress counter - number display */
.vpb-counter {
    display: flex;
    align-items: baseline;
    justify-content: center; /* Center the numbers */
    margin-bottom: 1rem;
    width: 100%; /* Full width for centering */
}

/* Current section number - much larger bold white */
.vpb-current {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.025em;
}

/* Total sections - much larger lighter white */
.vpb-total {
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    letter-spacing: 0.025em;
    margin-left: 0.125rem;
}

/* Progress track - straight gradient vertical bar */
.vpb-track {
    width: 4px; /* Reduced from 8px to 4px */
    height: 350px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 20%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.05) 95%,
        transparent 100%
    );
    position: relative;
    border-radius: 0px; /* Straight edges */
    margin: 0 auto; /* Center the bar */
}

/* Progress marker - straight horizontal cap */
.vpb-marker {
    width: 16px; /* Reduced from 20px to 16px */
    height: 6px;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    left: -6px; /* Adjusted to center with 4px bar */
    top: 0px;
    transition: top 0.3s ease-out;
    border-radius: 0px; /* Straight edges */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

/* Animation for number changes */
.vpb-current {
    transition: all 0.3s ease-out;
}

.vpb-current.updating {
    transform: scale(1.1);
    color: #ffd700;
}

/* Desktop only - full size for PC screens (1025px and above) */
@media (min-width: 1025px) {
    .vpb-current {
        font-size: 2rem;
    }
    
    .vpb-total {
        font-size: 1.75rem;
    }
    
    .vpb-track {
        width: 6px; /* Reduced from 12px to 6px */
        height: 400px;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.7) 20%,
            rgba(255, 255, 255, 0.4) 40%,
            rgba(255, 255, 255, 0.2) 60%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 255, 255, 0.05) 95%,
            transparent 100%
        );
        border-radius: 0px; /* Straight edges */
        margin: 0 auto; /* Center the bar */
    }
    
    .vpb-marker {
        width: 22px; /* Reduced from 28px to 22px */
        height: 8px;
        left: -8px; /* Adjusted to center with 6px bar */
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
        border-radius: 0px; /* Straight edges */
    }
}

/* Theme variations - DIFFERENT colors for day and night mode */
.vpb-container.theme-dark {
    /* Dark theme styles - white bar and numbers */
}

.vpb-container.theme-light {
    /* Light theme styles - dark bar and numbers */
}

/* Light mode (day) - Purple bar and numbers */
.vpb-container.theme-light .vpb-current,
.vpb-container.theme-light .vpb-total {
    color: #8b5cf6 !important; /* Purple in light mode */
}

.vpb-container.theme-light .vpb-track {
    background: linear-gradient(
        180deg,
        rgba(139, 92, 246, 0.9) 0%,
        rgba(139, 92, 246, 0.7) 20%,
        rgba(139, 92, 246, 0.4) 40%,
        rgba(139, 92, 246, 0.2) 60%,
        rgba(139, 92, 246, 0.1) 80%,
        rgba(139, 92, 246, 0.05) 95%,
        transparent 100%
    ) !important; /* Purple gradient in light mode */
}

.vpb-container.theme-light .vpb-marker {
    background: rgba(139, 92, 246, 0.9) !important; /* Purple marker in light mode */
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.8) !important;
}

/* Dark mode (night) - Purple bar and numbers */
.vpb-container.theme-dark .vpb-current,
.vpb-container.theme-dark .vpb-total {
    color: #8b5cf6 !important; /* Purple in dark mode */
}

.vpb-container.theme-dark .vpb-track {
    background: linear-gradient(
        180deg,
        rgba(139, 92, 246, 0.9) 0%,
        rgba(139, 92, 246, 0.7) 20%,
        rgba(139, 92, 246, 0.4) 40%,
        rgba(139, 92, 246, 0.2) 60%,
        rgba(139, 92, 246, 0.1) 80%,
        rgba(139, 92, 246, 0.05) 95%,
        transparent 100%
    ) !important; /* Purple gradient in dark mode */
}

.vpb-container.theme-dark .vpb-marker {
    background: rgba(139, 92, 246, 0.9) !important; /* Purple marker in dark mode */
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.8) !important;
}

/* Section-based number color changes */
.vpb-container.section-purple .vpb-current,
.vpb-container.section-purple .vpb-total {
    color: #8B5CF6 !important; /* Purple for purple sections */
}

.vpb-container.section-pink .vpb-current,
.vpb-container.section-pink .vpb-total {
    color: #EC4899 !important; /* Pink for pink sections */
}

.vpb-container.section-cyan .vpb-current,
.vpb-container.section-cyan .vpb-total {
    color: #22D3EE !important; /* Cyan for cyan sections */
}

.vpb-container.section-orange .vpb-current,
.vpb-container.section-orange .vpb-total {
    color: #FCD34D !important; /* Orange for orange sections */
}

.vpb-container.section-green .vpb-current,
.vpb-container.section-green .vpb-total {
    color: #4ADE80 !important; /* Green for green sections */
}

.vpb-container.section-red .vpb-current,
.vpb-container.section-red .vpb-total {
    color: #F87171 !important; /* Red for red sections */
}

.vpb-container.section-violet .vpb-current,
.vpb-container.section-violet .vpb-total {
    color: #A78BFA !important; /* Violet for violet sections */
}

.vpb-container.section-magenta .vpb-current,
.vpb-container.section-magenta .vpb-total {
    color: #F472B6 !important; /* Magenta for magenta sections */
}

.vpb-container.section-blue .vpb-current,
.vpb-container.section-blue .vpb-total {
    color: #60A5FA !important; /* Blue for blue sections */
}

/* Desktop theme variations - DIFFERENT colors for day and night mode */
@media (min-width: 1025px) {
    /* Light mode (day) - Purple bar and numbers - Desktop */
    .vpb-container.theme-light .vpb-track {
        background: linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.9) 0%,
            rgba(139, 92, 246, 0.7) 20%,
            rgba(139, 92, 246, 0.4) 40%,
            rgba(139, 92, 246, 0.2) 60%,
            rgba(139, 92, 246, 0.1) 80%,
            rgba(139, 92, 246, 0.05) 95%,
            transparent 100%
        ) !important;
        border-radius: 0px;
    }

    .vpb-container.theme-light .vpb-marker {
        background: rgba(139, 92, 246, 0.9) !important;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.8) !important;
        border-radius: 0px;
    }

    /* Dark mode (night) - Purple bar and numbers - Desktop */
    .vpb-container.theme-dark .vpb-track {
        background: linear-gradient(
            180deg,
            rgba(139, 92, 246, 0.9) 0%,
            rgba(139, 92, 246, 0.7) 20%,
            rgba(139, 92, 246, 0.4) 40%,
            rgba(139, 92, 246, 0.2) 60%,
            rgba(139, 92, 246, 0.1) 80%,
            rgba(139, 92, 246, 0.05) 95%,
            transparent 100%
        ) !important;
        border-radius: 0px;
    }

    .vpb-container.theme-dark .vpb-marker {
        background: rgba(139, 92, 246, 0.9) !important;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.8) !important;
        border-radius: 0px;
    }
}