/* Brand Colors CSS - Cyan (#0CC0DF) and Blue (#004AAD) */

/* Replace all teal colors with brand cyan */
.text-teal-500, .text-teal-600, .text-teal-700 {
    color: #0CC0DF !important;
}

.bg-teal-50 {
    background-color: rgba(12, 192, 223, 0.1) !important;
}

.bg-teal-500, .bg-teal-600 {
    background-color: #0CC0DF !important;
}

.border-teal-200 {
    border-color: rgba(12, 192, 223, 0.3) !important;
}

.border-teal-500, .border-teal-600 {
    border-color: #0CC0DF !important;
}

.hover\:text-teal-500:hover, .hover\:text-teal-600:hover {
    color: #0CC0DF !important;
}

.hover\:bg-teal-50:hover {
    background-color: rgba(12, 192, 223, 0.1) !important;
}

.hover\:border-teal-500:hover {
    border-color: #0CC0DF !important;
}

.focus\:ring-teal-500:focus {
    --tw-ring-color: rgba(12, 192, 223, 0.5) !important;
}

.focus\:border-teal-500:focus {
    border-color: #0CC0DF !important;
}

/* Gradient backgrounds */
.bg-gradient-to-r.from-teal-500.to-teal-600,
.from-teal-500.to-teal-600 {
    background: linear-gradient(to right, #0CC0DF, #004AAD) !important;
}

.hover\:from-teal-600:hover.hover\:to-teal-700:hover {
    background: linear-gradient(to right, #004AAD, #003580) !important;
}

/* Pagination active state */
.bg-teal-500.text-white {
    background-color: #0CC0DF !important;
}

/* Custom brand utilities */
.brand-cyan {
    color: #0CC0DF;
}

.brand-blue {
    color: #004AAD;
}

.bg-brand-cyan {
    background-color: #0CC0DF;
}

.bg-brand-blue {
    background-color: #004AAD;
}

.border-brand-cyan {
    border-color: #0CC0DF;
}

.border-brand-blue {
    border-color: #004AAD;
}

.brand-gradient {
    background: linear-gradient(to right, #0CC0DF, #004AAD);
}

/* Hover states */
.hover\:brand-cyan:hover {
    color: #0CC0DF;
}

.hover\:bg-brand-cyan:hover {
    background-color: #0CC0DF;
}