: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;
}

/* Custom Range Slider */
.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--color-space-800);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    position: relative;
    background-image: linear-gradient(to right, var(--range-color) 0%, var(--range-color) 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px var(--range-color-glow);
    cursor: pointer;
    margin-top: -6px;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--range-color-glow);
}

.custom-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px var(--range-color-glow);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.custom-range::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--range-color-glow);
}

/* Color Variants */
.custom-range-purple {
    --range-color: var(--color-neon-purple);
    --range-color-glow: rgba(168, 85, 247, 0.5);
}
.custom-range-green {
    --range-color: var(--color-neon-green);
    --range-color-glow: rgba(34, 197, 94, 0.5);
}
.custom-range-cyan {
    --range-color: var(--color-neon-cyan);
    --range-color-glow: rgba(6, 182, 212, 0.5);
}
.custom-range-yellow {
    --range-color: var(--color-neon-yellow);
    --range-color-glow: rgba(234, 179, 8, 0.5);
}
.custom-range-accent {
    --range-color: var(--color-neon-cyan); /* Default accent to cyan if needed, or match DaisyUI */
    --range-color-glow: rgba(6, 182, 212, 0.5);
}