/* ===== Modern Custom Scrollbars with Arrows ===== */

/* Scrollbar for all scrollable elements */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) var(--bg-primary);
}

/* Webkit Scrollbar Styling */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}

::-webkit-scrollbar-thumb:active {
    background: var(--orange);
    opacity: 0.9;
}

/* Scrollbar Buttons (Arrows) */
::-webkit-scrollbar-button {
    width: 4px;
    height: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: block;
}

::-webkit-scrollbar-button:hover {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-button:active {
    background: var(--orange);
}

/* Up Arrow */
::-webkit-scrollbar-button:vertical:decrement {
    background: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fb923c' d='M4 1L1 5h6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Down Arrow */
::-webkit-scrollbar-button:vertical:increment {
    background: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fb923c' d='M4 7L1 3h6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Left Arrow */
::-webkit-scrollbar-button:horizontal:decrement {
    background: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fb923c' d='M1 4L5 1v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Right Arrow */
::-webkit-scrollbar-button:horizontal:increment {
    background: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fb923c' d='M7 4L3 1v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover effects for arrows */
::-webkit-scrollbar-button:vertical:decrement:hover {
    background-color: var(--bg-tertiary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23f97316' d='M4 1L1 5h6z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:increment:hover {
    background-color: var(--bg-tertiary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23f97316' d='M4 7L1 3h6z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
    background-color: var(--bg-tertiary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23f97316' d='M1 4L5 1v6z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:horizontal:increment:hover {
    background-color: var(--bg-tertiary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23f97316' d='M7 4L3 1v6z'/%3E%3C/svg%3E");
}

/* Sidebar Scrollbars */
.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: var(--radius-sm);
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}

/* Properties Panel Scrollbar */
#propertiesPanel::-webkit-scrollbar {
    width: 4px;
}

#propertiesPanel::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

#propertiesPanel::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: var(--radius-sm);
}

#propertiesPanel::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}