@font-face {
    font-family: 'Hume';
    src: url('../css/font/hume.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html {
    font-family: 'Hume', sans-serif !important;
}

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

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

@media print {

    #rightSidebar,
    header,
    #sidebar,
    .no-print,
    .breadcrumbcontainer {
        display: none;
    }

    .print-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .break-inside-avoid {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}