@import url("common.css");

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

::-webkit-scrollbar-thumb {
    background-color: rgba(192, 192, 192, 0.8);
    border-radius: 1rem;
    border: 0.25rem solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(192, 192, 192, 1);
}

@media screen and (max-width: 768px) {
    html {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

html[data-bs-theme="light"] .btn-theme-auto {
    color: var(--bs-dark);
    background-color: var(--bs-gray-100);
}

html[data-bs-theme="dark"] .btn-theme-auto {
    color: var(--bs-light);
    background-color: var(--bs-gray-800);
}

html[data-bs-theme="dark"] .btn-theme-auto:hover:not(.nav-link.active) {
    color: var(--bs-light);
    background-color: var(--bs-gray-600);
}

html[data-bs-theme="light"] .btn-theme-auto:hover:not(.nav-link.active) {
    color: var(--bs-dark);
    background-color: var(--bs-gray-300);
}

.logout:hover {
    color: var(--bs-light) !important;
    background-color: var(--bs-danger) !important;
}

/* Stats Cards Gradients & Hover Elevation */
#pills-home .row > div > .rounded-4.shadow.p-3.border-0 {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#pills-home .row > div > .rounded-4.shadow.p-3.border-0:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}

#pills-home .row > div:nth-child(1) > .rounded-4.shadow.p-3.border-0 {
    background: linear-gradient(135deg, #8573f1 0%, #6352cb 100%) !important;
}

#pills-home .row > div:nth-child(2) > .rounded-4.shadow.p-3.border-0 {
    background: linear-gradient(135deg, #7a5cd9 0%, #5337b5 100%) !important;
}

#pills-home .row > div:nth-child(3) > .rounded-4.shadow.p-3.border-0 {
    background: linear-gradient(135deg, #6546b1 0%, #442a8b 100%) !important;
}

#pills-home .row > div:nth-child(4) > .rounded-4.shadow.p-3.border-0 {
    background: linear-gradient(135deg, #4f3392 0%, #301a65 100%) !important;
}