/* Dashbal CDN - Custom Styles */

/* Modern Scrollbar - Matching Frontend */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(163, 163, 163, 0.4);
    /* neutral-400 */
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(115, 115, 115, 0.6);
    /* neutral-500 */
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Gradient Mask for horizontally scrolling breadcrumbs */
.mask-gradient-right {
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* Auth Modal Animation */
.animate-modal-in {
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Custom Toast Animation */
.toast-enter {
    animation: toastEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* File Card Hover Effects */
.file-card-hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.file-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Selection */
::selection {
    background-color: rgba(199, 97, 61, 0.2);
    color: inherit;
}

.bg-checkboard {
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f5f5f5 75%), linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #ffffff;
}