body {
    font-family: 'Inter', sans-serif;
}

:root {
    --theme-light-serene-primary: #3B82F6;
    --theme-light-citrus-primary: #F59E0B;
    --theme-light-rose-primary: #EC4899;
    --theme-light-mint-primary: #14B8A6;
    --theme-light-sky-primary: #0c4a6e;
    --theme-dark-slate-primary: #38BDF8;
    --theme-dark-forest-primary: #A3E635;
    --theme-dark-ocean-primary: #5AB2FF;
    --theme-dark-grape-primary: #A855F7;
    --theme-dark-sunset-primary: #F08080;
    /* Default to light-serene if no theme is set */
    --color-bg-primary: #f0f9ff; /* sky-50 */
    --color-bg-secondary: #FFFFFF;
    --color-text-primary: #0c4a6e; /* sky-900 */
    --color-text-secondary: #075985; /* sky-800 */
    --color-border: #e0f2fe; /* sky-100 */
    --color-primary: #0c4a6e; /* sky-500 */
    --color-primary-hover: #0284c7; /* sky-600 */
    --color-primary-text: #FFFFFF;
    --color-secondary: #38bdf8; /* sky-400 */
    --color-secondary-hover: #0ea5e9; /* sky-500 */
    --color-secondary-text: #FFFFFF;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-danger-text: #FFFFFF;
}

        /* ------------------------- */
        /* LIGHT THEMES              */
        /* ------------------------- */

.theme-light-serene { /* Default Theme */
    --color-bg-primary: #F3F4F6;
    --color-bg-secondary: #FFFFFF;
    --color-text-primary: #1F2937;
    --color-text-secondary: #4B5563;
    --color-border: #D1D5DB;
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-primary-text: #FFFFFF;
    --color-secondary: #10B981;
    --color-secondary-hover: #059669;
    --color-secondary-text: #FFFFFF;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-danger-text: #FFFFFF;
}

        .theme-light-citrus {
            --color-bg-primary: #FEFCE8;
            --color-bg-secondary: #FFFFFF;
            --color-text-primary: #3F3F46;
            --color-text-secondary: #71717A;
            --color-border: #E4E4E7;
            --color-primary: #F59E0B;
            --color-primary-hover: #D97706;
            --color-primary-text: #FFFFFF;
            --color-secondary: #84CC16;
            --color-secondary-hover: #65A30D;
            --color-secondary-text: #FFFFFF;
            --color-danger: #EF4444;
            --color-danger-hover: #DC2626;
            --color-danger-text: #FFFFFF;
        }

        .theme-light-rose {
            --color-bg-primary: #FFF1F2;
            --color-bg-secondary: #FFFFFF;
            --color-text-primary: #4C0519;
            --color-text-secondary: #831843;
            --color-border: #FECDD3;
            --color-primary: #EC4899;
            --color-primary-hover: #DB2777;
            --color-primary-text: #FFFFFF;
            --color-secondary: #F472B6;
            --color-secondary-hover: #E11D48;
            --color-secondary-text: #FFFFFF;
            --color-danger: #E11D48;
            --color-danger-hover: #BE123C;
            --color-danger-text: #FFFFFF;
        }

        .theme-light-mint {
            --color-bg-primary: #F0FDFA;
            --color-bg-secondary: #FFFFFF;
            --color-text-primary: #0F766E;
            --color-text-secondary: #134E4A;
            --color-border: #CCFBF1;
            --color-primary: #14B8A6;
            --color-primary-hover: #0D9488;
            --color-primary-text: #FFFFFF;
            --color-secondary: #2DD4BF;
            --color-secondary-hover: #14B8A6;
            --color-secondary-text: #134E4A;
            --color-danger: #F43F5E;
            --color-danger-hover: #E11D48;
            --color-danger-text: #FFFFFF;
        }

.theme-light-sky {
    --color-bg-primary: #f0f9ff; /* sky-50 */
    --color-bg-secondary: #FFFFFF;
    --color-text-primary: #0c4a6e; /* sky-900 */
    --color-text-secondary: #075985; /* sky-800 */
    --color-border: #e0f2fe; /* sky-100 */
    --color-primary: #0c4a6e; /* sky-500 */
    --color-primary-hover: #0284c7; /* sky-600 */
    --color-primary-text: #FFFFFF;
    --color-secondary: #38bdf8; /* sky-400 */
    --color-secondary-hover: #0ea5e9; /* sky-500 */
    --color-secondary-text: #FFFFFF;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-danger-text: #FFFFFF;
    /* Theme-specific primary colors for theme switcher UI */
}
     

        /* ------------------------- */
        /* DARK THEMES               */
        /* ------------------------- */
        
        .theme-dark-slate {
            --color-bg-primary: #0F172A;
            --color-bg-secondary: #1E293B;
            --color-text-primary: #F1F5F9;
            --color-text-secondary: #94A3B8;
            --color-border: #334155;
            --color-primary: #38BDF8;
            --color-primary-hover: #7DD3FC;
            --color-primary-text: #0F172A;
            --color-secondary: #4ADE80;
            --color-secondary-hover: #86EFAC;
            --color-secondary-text: #1E293B;
            --color-danger: #F87171;
            --color-danger-hover: #FCA5A5;
            --color-danger-text: #0F172A;
        }

        .theme-dark-forest {
            --color-bg-primary: #1A2E05;
            --color-bg-secondary: #2A400A;
            --color-text-primary: #D4E2B8;
            --color-text-secondary: #A8C08C;
            --color-border: #3F522B;
            --color-primary: #A3E635;
            --color-primary-hover: #BEF264;
            --color-primary-text: #1A2E05;
            --color-secondary: #65A30D;
            --color-secondary-hover: #84CC16;
            --color-secondary-text: #D4E2B8;
            --color-danger: #F87171;
            --color-danger-hover: #FCA5A5;
            --color-danger-text: #1A2E05;
        }
        
        .theme-dark-ocean {
            --color-bg-primary: #0C2A4D;
            --color-bg-secondary: #183A60;
            --color-text-primary: #C3DAF7;
            --color-text-secondary: #9AB2D3;
            --color-border: #2E4C70;
            --color-primary: #5AB2FF;
            --color-primary-hover: #8BC9FF;
            --color-primary-text: #0C2A4D;
            --color-secondary: #2E79C2;
            --color-secondary-hover: #4891D8;
            --color-secondary-text: #C3DAF7;
            --color-danger: #F87171;
            --color-danger-hover: #FCA5A5;
            --color-danger-text: #0C2A4D;
        }

        .theme-dark-grape {
            --color-bg-primary: #281B3D;
            --color-bg-secondary: #3B2A56;
            --color-text-primary: #E9D5FF;
            --color-text-secondary: #C084FC;
            --color-border: #581C87;
            --color-primary: #A855F7;
            --color-primary-hover: #C084FC;
            --color-primary-text: #F3F4F6;
            --color-secondary: #D8B4FE;
            --color-secondary-hover: #E9D5FF;
            --color-secondary-text: #281B3D;
            --color-danger: #F472B6;
            --color-danger-hover: #F9A8D4;
            --color-danger-text: #281B3D;
        }
        
        .theme-dark-sunset {
            --color-bg-primary: #4B1D1D;
            --color-bg-secondary: #632828;
            --color-text-primary: #FADBD4;
            --color-text-secondary: #F4B2A3;
            --color-border: #7B3333;
            --color-primary: #F08080;
            --color-primary-hover: #F29E9E;
            --color-primary-text: #4B1D1D;
            --color-secondary: #DC5A5A;
            --color-secondary-hover: #E47777;
            --color-secondary-text: #FADBD4;
            --color-danger: #FB7185;
            --color-danger-hover: #FDA4AF;
            --color-danger-text: #4B1D1D;
        }

        /* Helper class for the active theme button's ring color */
        .active-theme {
          --tw-ring-color: var(--color-primary);
        }

body, header, aside, main, input, button, a, div, svg {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Add margin-left to sidebar transition to allow smooth collapse */
#sidebar {
    transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out;
}
/* --- Animation & Transition Utilities --- */

.hidden {
    display: none;
}

/* Sidebar */
#sidebar {
    transform: translateX(-100%); /* Default state: closed on mobile */
}

#sidebar.is-open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    #sidebar {
        transform: translateX(0); 
        position: relative; 
    }
    #sidebar.is-open {
        transform: translateX(-100%);
        margin-left: -16rem;
    }
    #sidebar-overlay {
        display: none;
    }
}

/* Dropdowns */
.dropdown {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out;
    transform-origin: top right;
}

.dropdown.is-closed {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
}

.dropdown.is-open {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}
#components-reconnect-modal,
#components-reconnect-failed,
#components-reconnect-rejected {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-failed.components-reconnect-show,
    #components-reconnect-rejected.components-reconnect-show {
        display: flex;
    }