/**
 * Brand Color Overrides
 * Updated: October 6, 2025
 * Primary Gradient: linear-gradient(135deg, #667eea 0%, #00aef0 100%)
 */

:root {
    /* Primary Colors */
    --primary-rgb: 102, 126, 234;
    --primary-color: #667eea;
    --primary-hover: #5568d3;
    --primary-active: #4451bb;
    --primary-border: #667eea;
    
    /* Secondary Colors */
    --secondary-rgb: 0, 174, 240;
    --secondary-color: #00aef0;
    --secondary-hover: #0096d1;
    --secondary-active: #007eb2;
    
    /* Brand Gradient */
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #00aef0 100%);
    --brand-gradient-hover: linear-gradient(135deg, #5568d3 0%, #0096d1 100%);
    --brand-gradient-reverse: linear-gradient(135deg, #00aef0 0%, #667eea 100%);
    
    /* Primary Opacity Variants */
    --primary01: rgba(102, 126, 234, 0.1);
    --primary02: rgba(102, 126, 234, 0.2);
    --primary03: rgba(102, 126, 234, 0.3);
    --primary04: rgba(102, 126, 234, 0.4);
    --primary05: rgba(102, 126, 234, 0.5);
    --primary06: rgba(102, 126, 234, 0.6);
    --primary07: rgba(102, 126, 234, 0.7);
    --primary08: rgba(102, 126, 234, 0.8);
    --primary09: rgba(102, 126, 234, 0.9);
    --primary005: rgba(102, 126, 234, 0.05);
}

/* ===============================================
   DARK MODE OVERRIDES
   =============================================== */

[data-theme-mode="dark"] {
    --primary-color: #7b8cf5;
    --primary-hover: #8d9cf7;
    --brand-gradient: linear-gradient(135deg, #7b8cf5 0%, #00c8ff 100%);
    --brand-gradient-hover: linear-gradient(135deg, #8d9cf7 0%, #1ad1ff 100%);
}

/* ===============================================
   RTL SUPPORT
   =============================================== */

[dir="rtl"] .gradient-primary,
[dir="rtl"] .bg-primary,
[dir="rtl"] .btn-primary {
    background: var(--brand-gradient-reverse) !important;
}

/* Button Primary - Gradient Style */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #5568d3 0%, #0096d1 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:active {
    background: linear-gradient(135deg, #4451bb 0%, #007eb2 100%) !important;
    transform: translateY(0);
}

/* Button Outline Primary */
.btn-outline-primary {
    border-color: #667eea !important;
    color: #667eea !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

/* Button Light Primary */
.btn-primary-light {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
    border: none !important;
}

.btn-primary-light:hover {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #667eea !important;
}

/* Badge Primary */
.badge.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

.badge.bg-primary-transparent {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

/* Text Primary */
.text-primary {
    color: #667eea !important;
}

/* Background Primary */
.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

.bg-primary-transparent {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* Border Primary */
.border-primary {
    border-color: #667eea !important;
}

/* Alert Primary */
.alert-primary {
    background-color: rgba(102, 126, 234, 0.1) !important;
    border-color: rgba(102, 126, 234, 0.2) !important;
    color: #667eea !important;
}

/* Form Controls Focus */
.form-control:focus,
.form-select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Checkbox & Radio Primary */
.form-check-input:checked {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

.form-check-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25) !important;
}

/* Progress Bar Primary */
.progress-bar {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Links */
a.text-primary:hover {
    color: #5568d3 !important;
}

/* Dropdown Active */
.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    color: white !important;
}

/* Nav Pills Active */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Pagination Active */
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    border-color: transparent !important;
}

.pagination .page-link {
    color: #667eea !important;
}

.pagination .page-link:hover {
    color: #5568d3 !important;
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* List Group Active */
.list-group-item.active {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    border-color: transparent !important;
}

/* Card Header with Primary */
.card-header.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Spinner Primary */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #667eea !important;
}

/* Switch/Toggle Primary */
.form-switch .form-check-input:checked {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

/* Avatar with Primary Background */
.avatar.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

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

/* Modal Header Primary */
.modal-header.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Sidebar Active Link */
.app-sidebar .side-menu__item.active,
.app-sidebar .slide-menu .slide.active > a {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    color: white !important;
}

/* Chart/Graph Colors */
.chart-primary {
    fill: #667eea !important;
    stroke: #667eea !important;
}

/* Icon Colors */
.icon-primary {
    color: #667eea !important;
}

.icon-bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Tooltip Primary */
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #667eea !important;
}

/* Header Icon Hover */
.header-link:hover,
.header-link:focus {
    color: #667eea !important;
}

/* Calendar/Datepicker Primary */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    border-color: transparent !important;
}

/* Select2/Choices Primary */
.choices__item--selectable.is-highlighted,
.select2-container--default .select2-results__option--highlighted {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Vueform Primary Colors */
.vf-primary {
    --vf-primary: #667eea;
    --vf-primary-darker: #5568d3;
}

/* Timeline Primary */
.timeline-item.timeline-primary .timeline-icon {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Scrollbar Primary (for custom scrollbars) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Custom Gradient Classes */
.gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

.gradient-primary-hover:hover {
    background: linear-gradient(135deg, #5568d3 0%, #0096d1 100%) !important;
}

/* Box Shadow Primary */
.shadow-primary {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.shadow-primary-lg {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4) !important;
}

/* Dark Mode Adjustments */
[data-theme-mode="dark"] .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
}

[data-theme-mode="dark"] .text-primary {
    color: #00aef0 !important;
}

[data-theme-mode="dark"] .bg-primary-transparent {
    background-color: rgba(0, 174, 240, 0.15) !important;
}

/* RTL Support - No changes needed for colors */
[dir="rtl"] .gradient-primary {
    background: linear-gradient(-135deg, #667eea 0%, #00aef0 100%) !important;
}

/* Utility Classes */
.hover-gradient-primary:hover {
    background: linear-gradient(135deg, #667eea 0%, #00aef0 100%) !important;
    color: white !important;
    transition: all 0.3s ease;
}

.border-gradient-primary {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #667eea 0%, #00aef0 100%) border-box;
}