/* =========================================
   THEME ENGINE (Tailwind UI Syntax)
   Exact colors from https://syntax.tailwindui.com
   ========================================= */
:root {
    /* Neutral base – slate scale */
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);

    /* Primary accent – sky */
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-sky-900: oklch(39.1% .09 240.876);

    /* Other accents (kept for chart‑use) */
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-teal-200: oklch(91% .096 180.426);
    --color-cyan-400: oklch(78.9% .154 211.53);

    /* Light mode – based on slate */
    --background: var(--color-slate-50);                 /* very light gray */
    --foreground: var(--color-slate-900);                /* near black */
    --card: oklch(1 0 0);                                 /* pure white */
    --card-foreground: var(--foreground);
    --popover: var(--card);
    --popover-foreground: var(--foreground);
    --primary: var(--color-sky-500);                      /* vibrant blue */
    --primary-foreground: oklch(1 0 0);                   /* white */
    --secondary: var(--color-slate-100);
    --secondary-foreground: var(--foreground);
    --muted: var(--color-slate-100);
    --muted-foreground: var(--color-slate-500);
    --accent: var(--color-slate-200);
    --accent-foreground: var(--foreground);
    --destructive: oklch(0.637 0.237 25.331);             /* soft red */
    --destructive-foreground: oklch(1 0 0);
    --border: var(--color-slate-200);
    --input: var(--color-slate-200);
    --ring: var(--color-sky-300);
    --chart-1: var(--color-sky-500);
    --chart-2: var(--color-indigo-400);
    --chart-3: var(--color-teal-200);
    --chart-4: var(--color-amber-400);
    --chart-5: var(--color-pink-400);
    --radius: 0.5rem;
    --sidebar: var(--color-slate-50);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    
    /* Derived aliases (backward compatibility) */
    --bg-color: var(--background);
    --surface-color: var(--card);
    --surface-alt: var(--secondary);
    --border-color: var(--border);
    --text-main: var(--foreground);
    --text-muted: var(--muted-foreground);
    --primary-500: var(--primary);
    --primary-600: var(--color-sky-600);                  /* darker variant */
    --primary-glow: rgba(59,130,246,0.1);
    --scroll-thumb: var(--border);
    --grid-color: rgba(0,0,0,0.02);
    --toast-success: #10b981;
    --toast-error: #ef4444;
    --toast-info: #3b82f6;
}

.dark {
    /* Dark mode – inverted slate */
    --background: var(--color-slate-900);                  /* very dark gray */
    --foreground: var(--color-slate-50);                   /* off‑white */
    --card: var(--color-slate-800);
    --card-foreground: var(--foreground);
    --popover: var(--color-slate-800);
    --popover-foreground: var(--foreground);
    --primary: var(--color-sky-400);                        /* bright blue */
    --primary-foreground: var(--color-slate-900);
    --secondary: var(--color-slate-800);
    --secondary-foreground: var(--foreground);
    --muted: var(--color-slate-800);
    --muted-foreground: var(--color-slate-400);
    --accent: var(--color-slate-700);
    --accent-foreground: var(--foreground);
    --destructive: oklch(0.637 0.237 25.331);
    --destructive-foreground: oklch(1 0 0);
    --border: var(--color-slate-700);
    --input: var(--color-slate-700);
    --ring: var(--color-sky-600);
    --chart-1: var(--color-sky-400);
    --chart-2: var(--color-indigo-200);
    --chart-3: var(--color-teal-200);
    --chart-4: var(--color-amber-500);
    --chart-5: var(--color-pink-400);
    --sidebar: var(--color-slate-800);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--color-slate-900);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    
    /* Derived aliases */
    --bg-color: var(--background);
    --surface-color: var(--card);
    --surface-alt: var(--secondary);
    --border-color: var(--border);
    --text-main: var(--foreground);
    --text-muted: var(--muted-foreground);
    --primary-500: var(--primary);
    --primary-600: var(--color-sky-500);                  /* slightly brighter */
    --primary-glow: rgba(56,189,248,0.2);
    --scroll-thumb: var(--border);
    --grid-color: rgba(255,255,255,0.02);
}

/* =========================================
   CUSTOM COMPONENT STYLES (unchanged)
   ========================================= */

/* Glass Header Sync */
.glass {
    background: rgba(var(--surface-color), 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

/* Code Editor Window */
#editor-view {
    background-color: var(--bg-color);
}
#file-tabs {
    background-color: var(--surface-alt);
    border-bottom: 1px solid var(--border-color);
}
.file-tab:hover {
    background-color: var(--accent);
}
.file-tab.active {
    background-color: var(--bg-color);
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

/* Navigation Active State */
.nav-item.active {
    background-color: var(--accent);
    color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Code output area */
#code-container {
    background-color: var(--bg-color);
}
pre[class*="language-"] {
    background: var(--bg-color) !important;
    text-shadow: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: 80%;
        max-width: 300px;
    }
    #config-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        width: 100% !important;
        background: var(--surface-color);
    }
    #editor-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: var(--bg-color);
    }
    #dashboard-view {
        padding: 1rem;
    }
}

/* Toast styling */
#toast-container {
    z-index: 100;
}
.toast {
    background: var(--surface-color);
    border-left: 4px solid var(--primary);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
    color: var(--text-main);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: auto;
    animation: slideUp 0.3s ease forwards;
    max-width: 300px;
    word-break: break-word;
    border: 1px solid var(--border-color);
}
.toast-success { border-left-color: var(--toast-success); }
.toast-error { border-left-color: var(--toast-error); }
.toast-exit {
    animation: fadeOut 0.3s ease forwards;
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Custom scrollbar using theme */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 3px;
}

/* Additional utility classes (unchanged) */
.tag-os {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    color: var(--text-main);
}

.filter-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.filter-chip.active {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1rem;
    color: var(--text-muted);
}
.loading-spinner::after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-left: 0.75rem;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================
   FILE TAB OVERRIDES (fix theme change)
   Force hard‑coded Tailwind classes to use our variables
   ========================================= */
.bg-white {
    background-color: var(--card) !important;
}
.dark .dark\:bg-\[\#1e1e1e\] {
    background-color: var(--card) !important;
}
.text-slate-500 {
    color: var(--muted-foreground) !important;
}
.dark .dark\:text-gray-300 {
    color: var(--foreground) !important;
}
.hover\:bg-slate-100:hover {
    background-color: var(--accent) !important;
}
.dark .dark\:hover\:bg-\[\#333\]:hover {
    background-color: var(--accent) !important;
}
.border-slate-200 {
    border-color: var(--border) !important;
}
.dark .dark\:border-\[\#333\] {
    border-color: var(--border) !important;
}
.border-t-primary-500 {
    border-top-color: var(--primary) !important;
}

/* =========================================
   LIGHT MODE DASHBOARD ENHANCEMENTS
   ========================================= */
:root:not(.dark) #dashboard-view {
    background-image: radial-gradient(var(--border) 0.8px, transparent 0.8px);
    background-size: 24px 24px;
}

:root:not(.dark) #dashboard-view h1,
:root:not(.dark) #dashboard-view .text-white {
    color: var(--foreground) !important;
}

:root:not(.dark) #dashboard-view .bg-surface {
    background-color: white;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
}

:root:not(.dark) #dashboard-view .bg-sky-500\/10,
:root:not(.dark) #dashboard-view .bg-emerald-500\/10,
:root:not(.dark) #dashboard-view .bg-purple-500\/10 {
    background-color: rgba(0,0,0,0.02);
}

:root:not(.dark) #dashboard-view .hover\:shadow-lg:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important;
}

/* =========================================
   LIGHT MODE FILE TABS – improved visibility
   ========================================= */
:root:not(.dark) #file-tabs button {
    color: var(--muted-foreground);
    transition: all 0.15s ease;
}

:root:not(.dark) #file-tabs button:hover {
    background-color: var(--color-slate-200) !important; /* noticeably darker than tab bar */
    color: var(--foreground) !important;
}

:root:not(.dark) #file-tabs button.active {
    background-color: var(--card) !important;           /* pure white */
    color: var(--primary) !important;                    /* blue */
    border-bottom: 2px solid var(--primary) !important;
}