@tailwind base;
@tailwind components;
@tailwind utilities;

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* Ensure transparent background for the scrollbar area */
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece {
    background: transparent !important;
}

/* Dark mode */
.dark ::-webkit-scrollbar {
    background: black !important;
}

.dark ::-webkit-scrollbar-track {
    background: black !important;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #475569 !important;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #64748b !important;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #1d2127;
}

.dark * {
    scrollbar-color: #475569 #1d212799 !important;
}

/* For Internet Explorer */
body {
    -ms-overflow-style: auto;
}

/* Remove default white background in dark mode */
.dark ::-webkit-scrollbar,
.dark ::-webkit-scrollbar-track,
.dark ::-webkit-scrollbar-corner,
.dark ::-webkit-scrollbar-track-piece {
    background-color: transparent !important;
}

/* Ensure the app background extends properly */
html,
body {
    background: inherit;
}

/* Scrollbar Styling für Investment Form */
.scrollbar-styled {
    scrollbar-gutter: stable both-edges;
    overflow-y: scroll !important;
}

.scrollbar-styled::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
}

.scrollbar-styled::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
}

.scrollbar-styled::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
    min-height: 40px;
}

.scrollbar-styled::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* Dark mode */
.dark .scrollbar-styled::-webkit-scrollbar-thumb {
    background-color: #475569;
}

.dark .scrollbar-styled::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* Firefox */
.scrollbar-styled {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

.dark .scrollbar-styled {
    scrollbar-color: #475569 transparent;
}
