:root {
    --color-space-950: #09090b;
    --color-space-900: #0f0f11;
    --color-space-850: #121214;
    --color-space-800: #18181b;
    --color-space-border: #27272a;
    --color-neon-purple: #a855f7;
    --color-neon-green: #22c55e;
    --color-neon-cyan: #06b6d4;
    --color-neon-yellow: #eab308;
    --color-neon-red: #ef4444;
    --color-text-main: #d1d5db; /* gray-300 */
    --color-text-dim: #71717a;  /* zinc-400 */
    --color-text-muted: #6b7280; /* gray-500 */
    --color-text-bright: #ffffff;

    /* Gradient Accents */
    --color-green-400: #4ade80;
    --color-yellow-400: #facc15;
    --color-red-400: #f87171;

    /* Chart Colors */
    --color-chart-1: #a855f7;
    --color-chart-2: #c084fc;
    --color-chart-3: #e879f9;
    --color-chart-4: #d946ef;
    --color-chart-5: #22c55e;
    --color-chart-6: #4ade80;
    --color-chart-7: #86efac;
    --color-chart-8: #10b981;
    --color-chart-9: #06b6d4;
    --color-chart-10: #f59e0b;
    --color-chart-11: #ef4444;
    --color-chart-12: #ec4899;
    --color-chart-13: #8b5cf6;
    --color-chart-14: #14b8a6;
    --color-chart-15: #f97316;
    --color-chart-16: #6366f1;
}

[x-cloak] {
    display: none !important;
}

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

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

::-webkit-scrollbar-thumb {
    @apply bg-space-800 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-space-border;
}

/* Animations */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

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

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

/* Utility */
.glass-panel {
    background: theme('colors.space.900 / 70%');
    backdrop-filter: blur(12px);
    border: 1px solid theme('colors.white / 8%');
}

.nav-item.active {
    background: linear-gradient(90deg, theme('colors.neon.purple / 15%') 0%, transparent 100%);
    @apply border-l-4 border-neon-purple text-white;
}

.nav-item {
    @apply border-l-4 border-transparent transition-all duration-200;
}

.progress-gradient-success::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--color-neon-green), var(--color-green-400));
}

.progress-gradient-warning::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--color-neon-yellow), var(--color-yellow-400));
}

.progress-gradient-error::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--color-neon-red), var(--color-red-400));
}

/* Dashboard Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Tooltip Customization */
.tooltip:before {
    @apply bg-space-800 border border-space-border text-gray-200 font-mono text-xs;
}

.tooltip-left:before {
    margin-right: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Refactored Global Utilities                                                */
/* -------------------------------------------------------------------------- */

/* View Containers */
.view-container {
    @apply mx-auto p-6 space-y-6 animate-fade-in;
    /* Responsive max-width: use most of screen on small displays,
       but cap at 1600px on large displays for reading comfort */
    max-width: min(95%, 1600px);
}

/* Section Headers */
.section-header {
    @apply flex justify-between items-center mb-6;
}
.section-title {
    @apply text-2xl font-bold text-white tracking-tight;
}
.section-desc {
    @apply text-gray-500 text-sm;
}

/* Component Unification */
.standard-table {
    @apply table w-full border-separate border-spacing-0;
}
.standard-table thead {
    @apply bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border;
}
.standard-table tbody tr {
    @apply hover:bg-white/5 transition-colors border-b border-space-border/30 last:border-0;
}