/* Custom scrollbar styles for Windmill Dashboard */
/* Compatible with light and dark themes */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f4f5f7; /* gray-100 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #9e9e9e; /* gray-400 */
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #707275; /* gray-500 */
}

/* Dark theme scrollbar */
.theme-dark ::-webkit-scrollbar-track {
    background: #24262d; /* dark:bg-gray-700 */
}

.theme-dark ::-webkit-scrollbar-thumb {
    background: #4c4f52; /* dark:bg-gray-600 */
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #707275; /* dark:bg-gray-500 */
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #9e9e9e #f4f5f7; /* thumb track */
}

.theme-dark * {
    scrollbar-color: #4c4f52 #24262d; /* dark theme */
}

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Main content area scroll improvements */
main {
    scroll-behavior: smooth;
    overflow-anchor: none; /* Prevents scroll jumping */
}

/* Prevent scroll jumping on content changes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Ensure consistent scroll position */
.overflow-y-auto {
    scroll-behavior: smooth;
    overflow-anchor: none;
}

/* Fix for table scroll in containers */
.overflow-x-auto {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* Prevent layout shift during loading */
.container {
    min-height: 0; /* Prevents flex container issues */
}

/* Stable scroll container */
.scroll-container {
    position: relative;
    overflow-anchor: auto;
}

/* Custom utility for smooth transitions */
.smooth-scroll {
    scroll-behavior: smooth;
    overflow-anchor: none;
}

/* Prevent scroll restoration issues */
.no-scroll-restoration {
    overflow-anchor: none;
}