/* MCARS PH Brand Colors */
:root {
    /* Brand Colors */
    --brand-red: #9B2C2C;        /* Primary red */
    --brand-red-light: #C53030;  /* Light red */
    --brand-red-dark: #742A2A;   /* Dark red */
    --brand-black: #1A1A1A;      /* Primary black */
    --brand-white: #FFFFFF;      /* Pure white */
    --brand-bg: #F0F8FF;         /* Alice Blue background */
    
    /* UI Shades */
    --gray-100: #F7F7F7;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #A3A3A3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    
    /* Feedback Colors */
    --success: #276749;
    --success-light: #C6F6D5;
    --warning: #975A16;
    --warning-light: #FEFCBF;
    --error: #9B2C2C;
    --error-light: #FED7D7;
}

/* Badge Colors */
.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

.badge i {
    margin-right: 0.375rem;
}

/* Rest of your existing CSS */
${existingCss}