/* Base Setup based on Tailwind Defaults + Custom Overrides */
:root {
    --color-bg-main: #0f172a;
    /* Slate 900 */
    --color-card: #1e293b;
    /* Slate 800 */
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--color-bg-main);
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Navigation Styles */
.nav-item {
    @apply flex items-center w-full px-3 py-2 text-sm text-slate-400 transition-all duration-200 hover:text-white rounded-lg -ml-3 pl-3;
}

.nav-item.active {
    @apply text-white;
}

/* Typography Headings */
.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}


/* Component Styles */
.card {
    @apply bg-slate-900 border border-slate-800 rounded-xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-80;
}

.stat-card {
    @apply card p-6 flex items-center gap-4 hover:border-indigo-500/30 transition-colors;
}

.icon-box {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-xl shadow-lg;
}

.btn-primary {
    @apply w-auto inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-lg transition-all transform active:scale-95 shadow-lg shadow-indigo-500/25;
}

.form-group label {
    @apply block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1;
}

.form-input {
    @apply w-full bg-slate-900 border border-slate-700 rounded-lg py-3 pr-4 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all text-sm placeholder-slate-500;
}

/* Ensure select dropdowns have a proper background for options */
.form-input option {
    background-color: #0f172a;
    /* Slate 900 */
    color: #f1f5f9;
    /* Slate 100 */
}

/* Filter Buttons (Analytics) */
.filter-button {
    @apply px-4 py-1.5 text-xs font-medium text-slate-400 rounded-md transition-all;
}

.filter-button.active {
    @apply bg-slate-700 text-white shadow;
}

.filter-button:hover:not(.active) {
    @apply text-slate-200;
}

/* Markdown Content Styling */
.prose-invert strong {
    color: #818cf8;
    /* Indigo 400 */
}

.prose ul>li::marker {
    color: #6366f1;
    /* Indigo 500 */
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

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

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

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    border-top-color: #6366f1;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}