/* Custom styling overrides beyond Tailwind */
@layer base {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer components {
    /* Glass card pattern recommended by ui-ux-pro-max */
    .glass-card {
        @apply bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md border border-zinc-200 dark:border-zinc-800 rounded-xl hover:bg-zinc-50 dark:hover:bg-zinc-800/80 hover:shadow-lg transition-all duration-300 p-6;
    }
}

/* Scrollbar customization for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #d4d4d8; 
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.bg-dotted {
    background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.2px, transparent 1.5px);
    background-size: 24px 24px;
}
.dark .bg-dotted {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 0.2px, transparent 1.5px);
    background-size: 24px 24px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #3f3f46; 
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa; 
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #52525b; 
}