/* Payslashes Brand Colors - Professional Blue Palette */

:root {
    /* Brand Color Palette */
    --brand-primary: #3498db;      /* Professional Blue */
    --brand-secondary: #2c3e50;    /* Dark Blue-Gray */
    --brand-accent: #2980b9;       /* Darker Blue */
    --brand-light: #85c1e9;        /* Light Blue */
    --brand-lighter: #d6eaf8;      /* Very Light Blue */
    --brand-dark: #1b4f72;         /* Very Dark Blue */
    
    /* Text Colors */
    --brand-text-primary: #2c3e50;
    --brand-text-secondary: #34495e;
    --brand-text-light: #7f8c8d;
    --brand-text-white: #ffffff;
    
    /* Background Colors */
    --brand-bg-primary: #3498db;
    --brand-bg-secondary: #ecf0f1;
    --brand-bg-light: #f8f9fa;
}

/* Global Yellow Color Overrides */
.text-warning,
.text-yellow,
[class*="yellow"],
[class*="warning"] {
    color: var(--brand-primary) !important;
}

.bg-warning,
.bg-yellow,
[class*="bg-yellow"],
[class*="bg-warning"] {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

.border-warning,
.border-yellow,
[class*="border-yellow"],
[class*="border-warning"] {
    border-color: var(--brand-primary) !important;
}

/* Button Overrides */
.btn-warning,
.btn-yellow {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

.btn-warning:hover,
.btn-yellow:hover {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--brand-text-white) !important;
}

.btn-outline-warning,
.btn-outline-yellow {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}

.btn-outline-warning:hover,
.btn-outline-yellow:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Alert Overrides */
.alert-warning,
.alert-yellow {
    background-color: var(--brand-lighter) !important;
    border-color: var(--brand-light) !important;
    color: var(--brand-dark) !important;
}

/* Badge Overrides */
.badge-warning,
.badge-yellow {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Form Control Focus States */
.form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

/* Link Colors */
a {
    color: var(--brand-primary) !important;
}

a:hover {
    color: var(--brand-secondary) !important;
}

/* Primary Color Overrides */
.text-primary {
    color: var(--brand-primary) !important;
}

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

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

/* Navigation Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* List Group Active Items */
.list-group-item.active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Custom Controls */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Range Sliders */
.custom-range::-webkit-slider-thumb {
    background-color: var(--brand-primary) !important;
}

.custom-range::-moz-range-thumb {
    background-color: var(--brand-primary) !important;
}

.custom-range::-ms-thumb {
    background-color: var(--brand-primary) !important;
}

/* Progress Bars */
.progress-bar {
    background-color: var(--brand-primary) !important;
}

/* Dropdown Active Items */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Table Active Rows */
.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(52, 152, 219, 0.1) !important;
}

/* Specific Overrides for Common Yellow Hex Values */
[style*="#fed700"],
[style*="#ffd700"],
[style*="#ffed4e"],
[style*="#fff3b2"],
[style*="#cbac00"],
[style*="#d8b700"] {
    color: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Focus States */
*:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

/* Hover States for Interactive Elements */
.btn:hover,
.nav-link:hover,
.dropdown-item:hover {
    color: var(--brand-secondary) !important;
}

/* Brand Specific Classes */
.brand-primary {
    color: var(--brand-primary) !important;
}

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

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

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

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

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

/* Ensure High Specificity for Important Elements */
.u-header .btn-primary,
.navbar .btn-primary,
.card .btn-primary,
.modal .btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

.u-header .btn-primary:hover,
.navbar .btn-primary:hover,
.card .btn-primary:hover,
.modal .btn-primary:hover {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--brand-text-white) !important;
}

/* Shopping Cart and E-commerce Specific */
.cart-badge,
.price-badge,
.discount-badge {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-white) !important;
}

/* Product Cards */
.product-card:hover {
    border-color: var(--brand-primary) !important;
}

.product-badge.featured {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: var(--brand-text-white) !important;
}

/* Responsive Design Considerations */
@media (max-width: 768px) {
    .btn-primary {
        background-color: var(--brand-primary) !important;
        border-color: var(--brand-primary) !important;
    }
}

/* Print Styles */
@media print {
    .text-primary,
    .btn-primary {
        color: var(--brand-dark) !important;
        background-color: transparent !important;
        border-color: var(--brand-dark) !important;
    }
}