/* ==========================================================================
   MASTER CUSTOM COLOR UTILITIES (Bootstrap & MUI Hybrid)
   Includes: bg-, text-, border-, btn-, btn-outline-, glow-, and effects
   ========================================================================== */

/* --- MUI PRIMARY (#1976d2) --- */
.bg-mui-primary { background-color: #1976d2 !important; color: #fff !important; }
.text-mui-primary { color: #1976d2 !important; }
.border-mui-primary { border-color: #1976d2 !important; }
.btn-mui-primary { background-color: #1976d2; color: #fff; border: 1px solid #1976d2; transition: 0.3s; }
.btn-mui-primary:hover { background-color: #1565c0; border-color: #1565c0; color: #fff; }
.btn-outline-mui-primary { color: #1976d2; border: 1px solid #1976d2; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-primary:hover { background-color: #1976d2; color: #fff; }
.glow-mui-primary { box-shadow: 0 0 15px 2px rgba(25, 118, 210, 0.5) !important; }
.bg-light-mui-primary { background-color: #e3f2fd !important; color: #1976d2 !important; }
.text-light-mui-primary { color: #90caf9 !important; }
.btn-light-mui-primary { background-color: #e3f2fd; color: #1976d2; border: 1px solid #90caf9; transition: 0.3s; }
.btn-light-mui-primary:hover { background-color: #bbdefb; }
.glow-light-mui-primary { box-shadow: 0 0 12px 2px rgba(144, 202, 249, 0.6) !important; }

/* --- MUI SECONDARY (#9c27b0) --- */
.bg-mui-secondary { background-color: #9c27b0 !important; color: #fff !important; }
.text-mui-secondary { color: #9c27b0 !important; }
.border-mui-secondary { border-color: #9c27b0 !important; }
.btn-mui-secondary { background-color: #9c27b0; color: #fff; border: 1px solid #9c27b0; transition: 0.3s; }
.btn-mui-secondary:hover { background-color: #7b1fa2; border-color: #7b1fa2; color: #fff; }
.btn-outline-mui-secondary { color: #9c27b0; border: 1px solid #9c27b0; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-secondary:hover { background-color: #9c27b0; color: #fff; }
.glow-mui-secondary { box-shadow: 0 0 15px 2px rgba(156, 39, 176, 0.5) !important; }
.bg-light-mui-secondary { background-color: #f3e5f5 !important; color: #9c27b0 !important; }
.text-light-mui-secondary { color: #ce93d8 !important; }
.btn-light-mui-secondary { background-color: #f3e5f5; color: #9c27b0; border: 1px solid #ce93d8; transition: 0.3s; }
.btn-light-mui-secondary:hover { background-color: #e1bee7; }
.glow-light-mui-secondary { box-shadow: 0 0 12px 2px rgba(206, 147, 216, 0.6) !important; }

/* --- MUI SUCCESS (#2e7d32) --- */
.bg-mui-success { background-color: #2e7d32 !important; color: #fff !important; }
.text-mui-success { color: #2e7d32 !important; }
.border-mui-success { border-color: #2e7d32 !important; }
.btn-mui-success { background-color: #2e7d32; color: #fff; border: 1px solid #2e7d32; transition: 0.3s; }
.btn-mui-success:hover { background-color: #1b5e20; border-color: #1b5e20; color: #fff; }
.btn-outline-mui-success { color: #2e7d32; border: 1px solid #2e7d32; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-success:hover { background-color: #2e7d32; color: #fff; }
.glow-mui-success { box-shadow: 0 0 15px 2px rgba(46, 125, 50, 0.5) !important; }
.bg-light-mui-success { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.text-light-mui-success { color: #a5d6a7 !important; }
.btn-light-mui-success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; transition: 0.3s; }
.btn-light-mui-success:hover { background-color: #c8e6c9; }
.glow-light-mui-success { box-shadow: 0 0 12px 2px rgba(165, 214, 167, 0.6) !important; }

/* --- MUI ERROR (#d32f2f) --- */
.bg-mui-error { background-color: #d32f2f !important; color: #fff !important; }
.text-mui-error { color: #d32f2f !important; }
.border-mui-error { border-color: #d32f2f !important; }
.btn-mui-error { background-color: #d32f2f; color: #fff; border: 1px solid #d32f2f; transition: 0.3s; }
.btn-mui-error:hover { background-color: #c62828; border-color: #c62828; color: #fff; }
.btn-outline-mui-error { color: #d32f2f; border: 1px solid #d32f2f; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-error:hover { background-color: #d32f2f; color: #fff; }
.glow-mui-error { box-shadow: 0 0 15px 2px rgba(211, 47, 47, 0.5) !important; }
.bg-light-mui-error { background-color: #ffebee !important; color: #d32f2f !important; }
.text-light-mui-error { color: #ef9a9a !important; }
.btn-light-mui-error { background-color: #ffebee; color: #d32f2f; border: 1px solid #ef9a9a; transition: 0.3s; }
.btn-light-mui-error:hover { background-color: #ffcdd2; }
.glow-light-mui-error { box-shadow: 0 0 12px 2px rgba(239, 154, 154, 0.6) !important; }

/* --- MUI WARNING (#ed6c02) --- */
.bg-mui-warning { background-color: #ed6c02 !important; color: #fff !important; }
.text-mui-warning { color: #ed6c02 !important; }
.border-mui-warning { border-color: #ed6c02 !important; }
.btn-mui-warning { background-color: #ed6c02; color: #fff; border: 1px solid #ed6c02; transition: 0.3s; }
.btn-mui-warning:hover { background-color: #e65100; border-color: #e65100; color: #fff; }
.btn-outline-mui-warning { color: #ed6c02; border: 1px solid #ed6c02; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-warning:hover { background-color: #ed6c02; color: #fff; }
.glow-mui-warning { box-shadow: 0 0 15px 2px rgba(237, 108, 2, 0.5) !important; }
.bg-light-mui-warning { background-color: #fff3e0 !important; color: #ed6c02 !important; }
.text-light-mui-warning { color: #ffcc80 !important; }
.btn-light-mui-warning { background-color: #fff3e0; color: #ed6c02; border: 1px solid #ffcc80; transition: 0.3s; }
.btn-light-mui-warning:hover { background-color: #ffe0b2; }
.glow-light-mui-warning { box-shadow: 0 0 12px 2px rgba(255, 204, 128, 0.6) !important; }

/* --- MUI INFO (#0288d1) --- */
.bg-mui-info { background-color: #0288d1 !important; color: #fff !important; }
.text-mui-info { color: #0288d1 !important; }
.border-mui-info { border-color: #0288d1 !important; }
.btn-mui-info { background-color: #0288d1; color: #fff; border: 1px solid #0288d1; transition: 0.3s; }
.btn-mui-info:hover { background-color: #01579b; border-color: #01579b; color: #fff; }
.btn-outline-mui-info { color: #0288d1; border: 1px solid #0288d1; background-color: transparent; transition: 0.3s; }
.btn-outline-mui-info:hover { background-color: #0288d1; color: #fff; }
.glow-mui-info { box-shadow: 0 0 15px 2px rgba(2, 136, 209, 0.5) !important; }
.bg-light-mui-info { background-color: #e1f5fe !important; color: #0288d1 !important; }
.text-light-mui-info { color: #81d4fa !important; }
.btn-light-mui-info { background-color: #e1f5fe; color: #0288d1; border: 1px solid #81d4fa; transition: 0.3s; }
.btn-light-mui-info:hover { background-color: #b3e5fc; }
.glow-light-mui-info { box-shadow: 0 0 12px 2px rgba(129, 212, 250, 0.6) !important; }




/* --- 1. PURPLE SERIES --- */
.bg-purple { background-color: #6f42c1 !important; color: #fff !important; }
.text-purple { color: #6f42c1 !important; }
.border-purple { border-color: #6f42c1 !important; }
.btn-purple { background-color: #6f42c1; color: #fff; border: 1px solid #6f42c1; transition: 0.3s; }
.btn-purple:hover { background-color: #59359a; border-color: #59359a; color: #fff; }
.btn-outline-purple { color: #6f42c1; border: 1px solid #6f42c1; background-color: transparent; transition: 0.3s; }
.btn-outline-purple:hover { background-color: #6f42c1; color: #fff; }
.glow-purple { box-shadow: 0 0 15px 2px rgba(111, 66, 193, 0.5) !important; }

.bg-light-purple { background-color: #f3e5f5 !important; color: #6f42c1 !important; }
.text-light-purple { color: #d1c4e9 !important; }
.btn-light-purple { background-color: #f3e5f5; color: #6f42c1; border: 1px solid #d1c4e9; transition: 0.3s; }
.btn-light-purple:hover { background-color: #e1bee7; }
.glow-light-purple { box-shadow: 0 0 12px 2px rgba(225, 190, 231, 0.6) !important; }

/* --- 2. MAGENTA SERIES --- */
.bg-magenta { background-color: #d80073 !important; color: #fff !important; }
.text-magenta { color: #d80073 !important; }
.border-magenta { border-color: #d80073 !important; }
.btn-magenta { background-color: #d80073; color: #fff; border: none; transition: 0.3s; }
.btn-magenta:hover { background-color: #a00055; color: #fff; }
.btn-outline-magenta { color: #d80073; border: 1px solid #d80073; background-color: transparent; transition: 0.3s; }
.btn-outline-magenta:hover { background-color: #d80073; color: #fff; }
.glow-magenta { box-shadow: 0 0 15px 2px rgba(216, 0, 115, 0.5) !important; }

.bg-light-magenta { background-color: #fce4ec !important; color: #d80073 !important; }
.text-light-magenta { color: #f06292 !important; }
.glow-light-magenta { box-shadow: 0 0 12px 2px rgba(248, 187, 208, 0.6) !important; }

/* --- 3. PINK SERIES --- */
.bg-pink { background-color: #e91e63 !important; color: #fff !important; }
.text-pink { color: #e91e63 !important; }
.border-pink { border-color: #e91e63 !important; }
.btn-pink { background-color: #e91e63; color: #fff; border: none; transition: 0.3s; }
.btn-pink:hover { background-color: #c2185b; color: #fff; }
.btn-outline-pink { color: #e91e63; border: 1px solid #e91e63; background-color: transparent; transition: 0.3s; }
.btn-outline-pink:hover { background-color: #e91e63; color: #fff; }
.glow-pink { box-shadow: 0 0 15px 2px rgba(233, 30, 99, 0.5) !important; }

.bg-light-pink { background-color: #fff0f6 !important; color: #e91e63 !important; }
.text-light-pink { color: #f48fb1 !important; }

/* --- 4. ORANGE SERIES --- */
.bg-orange { background-color: #fd7e14 !important; color: #fff !important; }
.text-orange { color: #fd7e14 !important; }
.border-orange { border-color: #fd7e14 !important; }
.btn-orange { background-color: #fd7e14; color: #fff; border: none; transition: 0.3s; }
.btn-orange:hover { background-color: #e66a00; color: #fff; }
.btn-outline-orange { color: #fd7e14; border: 1px solid #fd7e14; background-color: transparent; transition: 0.3s; }
.btn-outline-orange:hover { background-color: #fd7e14; color: #fff; }
.glow-orange { box-shadow: 0 0 15px 2px rgba(253, 126, 20, 0.5) !important; }

.bg-light-orange { background-color: #fff3e0 !important; color: #fd7e14 !important; }
.text-light-orange { color: #ffb74d !important; }
.glow-light-orange { box-shadow: 0 0 12px 2px rgba(255, 224, 178, 0.6) !important; }

/* --- 5. MODERN PRIMARIES (Indigo, Teal, Azure) --- */
.bg-indigo { background-color: #6610f2 !important; color: #fff !important; }
.text-indigo { color: #6610f2 !important; }
.btn-indigo { background-color: #6610f2; color: #fff; border: none; transition: 0.3s; }
.btn-outline-indigo { color: #6610f2; border: 1px solid #6610f2; background-color: transparent; transition: 0.3s; }
.btn-outline-indigo:hover { background-color: #6610f2; color: #fff; }
.glow-indigo { box-shadow: 0 0 15px 2px rgba(102, 16, 242, 0.5) !important; }

.bg-teal { background-color: #20c997 !important; color: #fff !important; }
.text-teal { color: #20c997 !important; }
.btn-teal { background-color: #20c997; color: #fff; border: none; transition: 0.3s; }
.btn-outline-teal { color: #20c997; border: 1px solid #20c997; background-color: transparent; transition: 0.3s; }
.btn-outline-teal:hover { background-color: #20c997; color: #fff; }
.glow-teal { box-shadow: 0 0 15px 2px rgba(32, 201, 151, 0.5) !important; }

.bg-azure { background-color: #007fff !important; color: #fff !important; }
.text-azure { color: #007fff !important; }
.btn-outline-azure { color: #007fff; border: 1px solid #007fff; background-color: transparent; transition: 0.3s; }
.btn-outline-azure:hover { background-color: #007fff; color: #fff; }
.glow-azure { box-shadow: 0 0 15px 2px rgba(0, 127, 255, 0.5) !important; }

/* --- 6. DEEP & EARTH TONES (Forest, Charcoal, Plum, Rose, Crimson, Olive) --- */
.bg-charcoal { background-color: #36454f !important; color: #fff !important; }
.text-charcoal { color: #36454f !important; }
.btn-outline-charcoal { color: #36454f; border: 1px solid #36454f; background-color: transparent; transition: 0.3s; }
.btn-outline-charcoal:hover { background-color: #36454f; color: #fff; }
.glow-charcoal { box-shadow: 0 0 15px 2px rgba(54, 69, 79, 0.4) !important; }

.bg-forest { background-color: #228b22 !important; color: #fff !important; }
.text-forest { color: #228b22 !important; }
.btn-outline-forest { color: #228b22; border: 1px solid #228b22; background-color: transparent; transition: 0.3s; }
.btn-outline-forest:hover { background-color: #228b22; color: #fff; }
.glow-forest { box-shadow: 0 0 15px 2px rgba(34, 139, 34, 0.5) !important; }

.bg-plum { background-color: #673ab7 !important; color: #fff !important; }
.text-plum { color: #673ab7 !important; }
.btn-outline-plum { color: #673ab7; border: 1px solid #673ab7; background-color: transparent; transition: 0.3s; }
.btn-outline-plum:hover { background-color: #673ab7; color: #fff; }
.glow-plum { box-shadow: 0 0 15px 2px rgba(103, 58, 183, 0.5) !important; }

.bg-rose { background-color: #ff66b2 !important; color: #fff !important; }
.text-rose { color: #ff66b2 !important; }
.btn-outline-rose { color: #ff66b2; border: 1px solid #ff66b2; background-color: transparent; transition: 0.3s; }
.btn-outline-rose:hover { background-color: #ff66b2; color: #fff; }
.glow-rose { box-shadow: 0 0 15px 2px rgba(255, 102, 178, 0.5) !important; }

.bg-crimson { background-color: #dc143c !important; color: #fff !important; }
.text-crimson { color: #dc143c !important; }
.btn-outline-crimson { color: #dc143c; border: 1px solid #dc143c; background-color: transparent; transition: 0.3s; }
.btn-outline-crimson:hover { background-color: #dc143c; color: #fff; }
.glow-crimson { box-shadow: 0 0 15px 2px rgba(220, 20, 60, 0.5) !important; }

.btn-olive { background-color: #808000; color: #fff; border: 1px solid #808000; transition: 0.3s}
.btn-olive:hover { background-color: #666600; border-color: #666600; color: #fff; }

.btn-outline-olive { color: #808000; border: 1px solid #808000; background-color: transparent; transition: 0.3s; }
.btn-outline-olive:hover { background-color: #808000; color: #fff; }

/* Light Olive Button (for a softer look) */
.btn-light-olive { background-color: #f9fbe7; color: #808000; border: 1px solid #dce775; transition: 0.3s; }
.btn-light-olive:hover { background-color: #f0f4c3; }

/* --- 7. METALLIC SERIES (Gradients) --- */
.bg-gold { background: linear-gradient(145deg, #ffd700, #b8860b) !important; color: #000 !important; }
.text-gold { color: #d4af37 !important; font-weight: bold; }
.border-gold { border: 2px solid #d4af37 !important; }
.btn-gold { background: linear-gradient(145deg, #ffec8b, #d4af37); color: #000; border: none; transition: 0.3s; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5); }
.btn-outline-gold { color: #b8860b; border: 1px solid #d4af37; background-color: transparent; font-weight: bold; transition: 0.3s; }
.btn-outline-gold:hover { background: linear-gradient(145deg, #ffd700, #b8860b); color: #000; }
.glow-gold { box-shadow: 0 0 20px 3px rgba(255, 215, 0, 0.6) !important; }

.bg-silver { background: linear-gradient(145deg, #e0e0e0, #a9a9a9) !important; color: #000 !important; }
.text-silver { color: #8a8a8a !important; }
.border-silver { border: 2px solid #a9a9a9 !important; }
.btn-silver { background: linear-gradient(145deg, #ffffff, #a9a9a9); color: #000; border: none; transition: 0.3s; }
.btn-silver:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(169, 169, 169, 0.5); }
.btn-outline-silver { color: #707070; border: 1px solid #a9a9a9; background-color: transparent; transition: 0.3s; }
.btn-outline-silver:hover { background: linear-gradient(145deg, #e0e0e0, #a9a9a9); color: #000; }
.glow-silver { box-shadow: 0 0 20px 3px rgba(192, 192, 192, 0.5) !important; }

.bg-bronze { background: linear-gradient(145deg, #cd7f32, #8b4513) !important; color: #fff !important; }
.text-bronze { color: #cd7f32 !important; }
.border-bronze { border: 2px solid #8b4513 !important; }
.btn-bronze { background: linear-gradient(145deg, #e3a671, #8b4513); color: #fff; border: none; transition: 0.3s; }
.btn-bronze:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(139, 69, 19, 0.5); }
.btn-outline-bronze { color: #8b4513; border: 1px solid #cd7f32; background-color: transparent; transition: 0.3s; }
.btn-outline-bronze:hover { background: linear-gradient(145deg, #cd7f32, #8b4513); color: #fff; }
.glow-bronze { box-shadow: 0 0 20px 3px rgba(205, 127, 50, 0.5) !important; }

/* --- 8. UNIVERSAL EFFECTS (Emboss, Glass, Generic Glow) --- */
.emboss {
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.4), 
                inset -2px -2px 4px rgba(0, 0, 0, 0.2),      
                2px 2px 10px rgba(0, 0, 0, 0.1);             
    border: none !important;
    transition: 0.2s;
}
.emboss:active {
    box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4), 
                inset 2px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.glass {
    background: rgba(255, 255, 255, 0.2) !important; 
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); 
}

.glass-dark {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glow { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }