/* ===================================
   Bootstrap Color Override System
   =================================== */

/* Override Bootstrap's default color classes with our variables */

/* Background Color Classes */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--gray-600) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-danger {
    background-color: var(--error) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-light {
    background-color: var(--gray-50) !important;
}

.bg-dark {
    background-color: var(--gray-800) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

/* Text Color Classes */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--error) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-light {
    color: var(--gray-100) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-white {
    color: var(--white) !important;
}

/* Button Classes */
.btn-primary {
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: var(--white);
}

.btn-secondary {
    background-color: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
    color: var(--white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--btn-secondary-hover) !important;
    border-color: var(--btn-secondary-hover) !important;
    color: var(--white) !important;
}

.btn-success {
    background-color: var(--btn-success) !important;
    border-color: var(--btn-success) !important;
    color: var(--white) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--btn-success-hover) !important;
    border-color: var(--btn-success-hover) !important;
    color: var(--white) !important;
}

.btn-danger {
    background-color: var(--btn-danger)!important;
    border-color: var(--btn-danger) !important;
    color: var(--white) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--white);
}

.btn-warning {
    background-color: var(--btn-warning);
    border-color: var(--btn-warning);
    color: var(--white);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-hover);
    color: var(--white);
}

.btn-info {
    background-color: var(--btn-info);
    border-color: var(--btn-info);
    color: var(--white);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--btn-info-hover);
    border-color: var(--btn-info-hover);
    color: var(--white);
}

.btn-light {
    background-color: var(--btn-light);
    border-color: var(--btn-light);
    color: var(--text-primary);
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--btn-light-hover);
    border-color: var(--btn-light-hover);
    color: var(--text-primary);
}

.btn-dark {
    background-color: var(--btn-dark);
    border-color: var(--btn-dark);
    color: var(--white);
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--btn-dark-hover);
    border-color: var(--btn-dark-hover);
    color: var(--white);
}

/* Outline Button Classes */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-outline-secondary {
    color: var(--btn-secondary);
    border-color: var(--btn-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--btn-secondary);
    border-color: var(--btn-secondary);
    color: var(--white);
}

/* Border Color Classes */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--border-medium) !important;
}

.border-success {
    border-color: var(--success) !important;
}

.border-danger {
    border-color: var(--error) !important;
}

.border-warning {
    border-color: var(--warning) !important;
}

.border-info {
    border-color: var(--info) !important;
}

.border-light {
    border-color: var(--border-light) !important;
}

.border-dark {
    border-color: var(--border-dark) !important;
}

/* Alert Classes */
.alert-primary {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.alert-secondary {
    background-color: var(--gray-50);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.alert-success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--success-dark);
}

.alert-danger {
    background-color: var(--error-light);
    border-color: var(--error);
    color: var(--error-dark);
}

.alert-warning {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning-dark);
}

.alert-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info-dark);
}

/* Badge Classes */
.badge-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.badge-secondary {
    background-color: var(--btn-secondary);
    color: var(--white);
}

.badge-success {
    background-color: var(--success);
    color: var(--white);
}

.badge-danger {
    background-color: var(--error);
    color: var(--white);
}

.badge-warning {
    background-color: var(--warning);
    color: var(--white);
}

.badge-info {
    background-color: var(--info);
    color: var(--white);
}

.badge-light {
    background-color: var(--btn-light);
    color: var(--text-primary);
}

.badge-dark {
    background-color: var(--btn-dark);
    color: var(--white);
}

/* Form Control Colors */
.form-control:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Link Colors */
.link-primary {
    color: var(--primary-color);
}

.link-primary:hover,
.link-primary:focus {
    color: var(--primary-dark);
}

.link-secondary {
    color: var(--text-secondary);
}

.link-secondary:hover,
.link-secondary:focus {
    color: var(--text-primary);
}

/* Table Colors */
.table-primary {
    background-color: rgba(102, 126, 234, 0.1);
}

.table-secondary {
    background-color: var(--gray-50);
}

.table-success {
    background-color: var(--success-light);
}

.table-danger {
    background-color: var(--error-light);
}

.table-warning {
    background-color: var(--warning-light);
}

.table-info {
    background-color: var(--info-light);
}

/* List Group Colors */
.list-group-item-primary {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.list-group-item-secondary {
    background-color: var(--gray-50);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.list-group-item-success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--success-dark);
}

.list-group-item-danger {
    background-color: var(--error-light);
    border-color: var(--error);
    color: var(--error-dark);
}

.list-group-item-warning {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning-dark);
}

.list-group-item-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info-dark);
}