/* Shared & Utility Styles */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    /* slab-300 */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Navigation active state styling */
.nav-btn {
    color: #475569;
    /* slate-600 */
}

.nav-btn:hover {
    background-color: #F8FAFC;
    /* slate-50 */
    color: #0F172A;
    /* slate-900 */
}

.nav-btn.active {
    background-color: rgba(30, 58, 138, 0.05);
    /* theme-primary/5 */
    color: #1E3A8A;
    /* theme-primary */
}

/* 3D Flip Card Animation Logic */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.is-flipped {
    transform: rotateY(180deg);
}

/* Word item in browse list */
.word-item {
    transition: all 0.2s;
}

.word-item:hover {
    border-color: #1E3A8A;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    z-index: 10;
}