/* Custom Styles for FlowSync */

@layer base {
    body {
        @apply bg-dark-bg text-text-main font-sans;
    }
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    @apply bg-transparent;
}
::-webkit-scrollbar-thumb {
    @apply bg-dark-border rounded-full hover:bg-text-sub transition-colors;
}

/* Grid Dot Pattern */
.grid-dot {
    background-image: radial-gradient(circle, #2A2D3A 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Layout Specifics */
.sidebar-active {
    @apply bg-primary/20 text-primary border-l-4 border-primary;
}

.avatar-stack {
    @apply flex -space-x-2 overflow-hidden;
}
.avatar-stack img, .avatar-stack .avatar-placeholder {
    @apply inline-block h-8 w-8 rounded-full ring-2 ring-dark-card object-cover;
}

/* Animation Utilities */
.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal Backdrops */
.modal-backdrop {
    @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-opacity;
}

/* Input Styles */
input, select, textarea {
    @apply bg-[#1F222D] border border-dark-border rounded-lg outline-none focus:border-primary transition-all;
}