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