/* ========================================
   🎨 Кастомный скроллбар для Chrome/Edge
   ======================================== */

/* Ширина скроллбара */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Трек (фон скроллбара) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin: 4px 0;
}

/* Ползунок (thumb) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
    transition: background 0.2s;
}

/* Ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0a58ca 0%, #084298 100%);
    cursor: pointer;
}

/* Ползунок при клике */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #084298 0%, #052c65 100%);
}

/* Угол (когда есть горизонтальный и вертикальный скроллбары) */
::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* ========================================
   🌙 Тёмная тема (если нужно)
   ======================================== */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: #2d3748;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #4299e1 0%, #3182ce 100%);
        border-color: #2d3748;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #3182ce 0%, #2c5282 100%);
    }

    ::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg, #2c5282 0%, #2a4365 100%);
    }

    ::-webkit-scrollbar-corner {
        background: #2d3748;
    }
}

/* ========================================
   📱 Тонкий скроллбар для узких элементов
   ======================================== */
.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    border-width: 1px;
}

/* ========================================
   🎯 Скрытый скроллбар (с возможностью прокрутки)
   ======================================== */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;     /* Firefox */
}

/* ========================================
   🌈 Альтернативные цветовые схемы
   ======================================== */

/* Success (зелёный) */
.scrollbar-success::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #198754 0%, #146c43 100%);
}

.scrollbar-success::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #146c43 0%, #0f5132 100%);
}

/* Danger (красный) */
.scrollbar-danger::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc3545 0%, #bb2d3b 100%);
}

.scrollbar-danger::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #bb2d3b 0%, #b02a37 100%);
}

/* Warning (жёлтый) */
.scrollbar-warning::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffc107 0%, #ffca2c 100%);
}

.scrollbar-warning::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffca2c 0%, #ffd43b 100%);
}

/* Info (голубой) */
.scrollbar-info::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0dcaf0 0%, #3dd5f3 100%);
}

.scrollbar-info::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3dd5f3 0%, #6edff6 100%);
}

/* Dark (тёмный) */
.scrollbar-dark::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #212529 0%, #343a40 100%);
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #343a40 0%, #495057 100%);
}