/* 
 * Modern Purple/Blue Gradient Theme Override
 * This file applies the new color palette across the entire system
 */

/* Primary Button Styles with Gradient */
.btn-primary,
.save-btn,
.submit-btn,
.login-btn,
.btn-search,
.modern-login-btn,
.multiple-button-group .multi-delete-btn,
button[type="submit"]:not(.cancel-btn):not(.reset-btn):not(.btn-no) {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover,
.save-btn:hover,
.submit-btn:hover,
.login-btn:hover,
.btn-search:hover,
.modern-login-btn:hover,
button[type="submit"]:not(.cancel-btn):not(.reset-btn):not(.btn-no):hover {
    background: var(--gradient-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Cancel Button - Outline Style with Primary Color */
.cancel-btn {
    border: 2px solid var(--clr-primary) !important;
    color: var(--clr-primary) !important;
    background-color: transparent !important;
}

.cancel-btn:hover {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Sidebar Active State */
.side-bar-manu li:hover > a,
.side-bar-manu li.active > a,
.side-bar-manu .dropdown.active .active,
.side-bar-manu .dropdown.active > .dropdown-menu .dropdown.active > a,
.side-bar-manu li .dropdown-menu li li:hover > a,
.side-bar-manu li .dropdown-menu li li.active > a {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

/* Sidebar Background - Darker to match theme */
.side-bar {
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
}

/* Active Nav Pills and Dropdowns */
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--gradient-primary) !important;
}

/* Table Links and Primary Text */
.table-product-qt,
.dashboard-table-header a,
a.link-primary,
.text-primary {
    color: var(--clr-primary) !important;
}

/* Custom Tabs Active State */
.custom-tabs .tab-item.active {
    color: var(--clr-primary);
    border-bottom: 2px solid var(--clr-primary);
    background: linear-gradient(
        180deg,
        rgba(102, 126, 234, 0.05) 0%,
        rgba(102, 126, 234, 0.1) 55.15%,
        rgba(102, 126, 234, 0.15) 100%
    );
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Checkbox and Radio Checked State */
.form-check-input:checked {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Links Hover */
a:hover:not(.btn):not(.cancel-btn) {
    color: var(--clr-primary-dark) !important;
}

/* Badge Primary */
.badge-primary,
.badge.bg-primary {
    background: var(--gradient-primary) !important;
}

/* Pagination Active */
.pagination .page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Alert Primary */
.alert-primary {
    background-color: var(--clr-primary-light) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary-dark) !important;
}

/* Progress Bar */
.progress-bar {
    background: var(--gradient-primary) !important;
}

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

/* Background Primary */
.bg-primary {
    background: var(--gradient-primary) !important;
}

/* Custom Modal Buttons */
.custom-modal .btn-yes {
    background: var(--gradient-primary) !important;
    border: none !important;
}

.custom-modal .btn-yes:hover {
    background: var(--gradient-primary-hover) !important;
}

/* Category and Brand Buttons */
.btn-category {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

.btn-category:hover {
    background: var(--gradient-primary-hover) !important;
}

/* Warning Button with Primary Color */
.btn-custom-warning {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
}

.btn-custom-warning:hover {
    background: var(--gradient-primary-hover) !important;
}

/* Switch/Toggle Active State */
.form-switch .form-check-input:checked {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Select2 Focus (if using Select2) */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--clr-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--clr-primary) !important;
}

/* DataTables (if using DataTables) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gradient-primary) !important;
    border-color: var(--clr-primary) !important;
    color: white !important;
}

/* Scrollbar Styling for Modern Look */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-primary-hover);
}

/* Loading Spinner */
.spinner-border.text-primary {
    color: var(--clr-primary) !important;
}

/* Card Headers with Primary */
.card-header.bg-primary {
    background: var(--gradient-primary) !important;
}

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

/* Tooltip */
.tooltip-inner {
    background-color: var(--clr-primary) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--clr-primary) !important;
}

/* Popover */
.popover-header {
    background-color: var(--clr-primary-light) !important;
    border-bottom: 1px solid var(--clr-primary) !important;
}

/* Nav Tabs Active */
.nav-tabs .nav-link.active {
    color: var(--clr-primary) !important;
    border-color: var(--clr-gray2) var(--clr-gray2) #fff !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--clr-gray3) var(--clr-gray3) var(--clr-gray2) !important;
    color: var(--clr-primary) !important;
}

/* Breadcrumb Active */
.breadcrumb-item.active {
    color: var(--clr-primary) !important;
}

/* Table Hover Row */
.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Custom File Input */
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Range Slider */
input[type="range"]::-webkit-slider-thumb {
    background: var(--clr-primary) !important;
}

input[type="range"]::-moz-range-thumb {
    background: var(--clr-primary) !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
}

.accordion-button:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Modal Header with Primary */
.modal-header.bg-primary {
    background: var(--gradient-primary) !important;
}

/* Text Selection */
::selection {
    background-color: var(--clr-primary) !important;
    color: white !important;
}

::-moz-selection {
    background-color: var(--clr-primary) !important;
    color: white !important;
}

/* SVG Icon Fill for Primary Elements */
.text-primary svg,
.btn-primary svg {
    fill: currentColor;
}

/* Sidebar Logo Border */
.side-bar-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dashboard Stats Icons/Indicators */
.business-stat-container {
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.business-stat-container:hover {
    border-left-color: var(--clr-primary);
    box-shadow: 0px 6px 35px 0px rgba(102, 126, 234, 0.15);
}

/* Status Badges */
.badge.badge-success {
    background-color: var(--clr-green) !important;
}

.badge.badge-warning {
    background-color: var(--clr-orange) !important;
}

.badge.badge-danger {
    background-color: var(--clr-red) !important;
}

.badge.badge-info {
    background-color: var(--clr-blue) !important;
}

/* Chart Colors (if you have any chart libraries) */
.chart-primary {
    color: var(--clr-primary) !important;
}

/* Floating Action Button */
.fab,
.floating-btn {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

.fab:hover,
.floating-btn:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
}

/* Dropdown Menu Hover */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
}

/* Card Border Primary */
.card.border-primary {
    border-color: var(--clr-primary) !important;
}

.card.border-primary .card-header {
    background-color: var(--clr-primary-light) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .btn-primary,
    .save-btn,
    .submit-btn,
    button[type="submit"]:not(.cancel-btn) {
        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
    }
    
    .btn-primary:hover,
    .save-btn:hover,
    .submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
}


/* Additional color overrides for comprehensive theme coverage */

/* Yes Badge */
.yes-badge {
    background-color: var(--clr-green) !important;
}

/* Paid Badge */
.paid-badge {
    background-color: var(--clr-green) !important;
}

/* Login Button List */
.login-button-list li:nth-child(3) a {
    background: var(--gradient-primary) !important;
}

/* Color Gradient Classes */
.color-7 {
    background: var(--gradient-primary) !important;
}

/* Tagify Focus */
.tagify.tagify--focus {
    border-color: var(--clr-primary) !important;
}

.tagify__tag {
    background: var(--clr-primary-light) !important;
}

/* Swiper Theme Color */
.swiper-pagination-bullet-active {
    background: var(--clr-primary) !important;
}

/* Top Button Custom Active */
.top-btn-custom:hover,
.top-btn-custom:active,
.top-btn-custom.active {
    color: var(--clr-primary) !important;
}

/* Custom Primary Text */
.custom-primary {
    color: var(--clr-primary) !important;
}

/* Add Feature Button */
.add-feature-btn {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.add-feature-btn:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Verify Button and Similar Action Buttons */
.verify-btn,
.success-btn,
.confirm-btn {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.verify-btn:hover,
.success-btn:hover,
.confirm-btn:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Verify Modal Input Focus */
.verify-modal-body .code-input input:focus,
.verify-modal-body .code-input input:focus-visible {
    border: 2px solid var(--clr-primary) !important;
}

/* Reset Link Color */
.verify-modal-body .des .reset {
    color: var(--clr-primary) !important;
}

/* Table Custom Checkbox */
.table-hidden-checkbox:checked + .table-custom-checkmark {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Increment/Decrement Hover */
.incre-decre:hover {
    background-color: var(--clr-primary-light) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

/* File Manager / Folders */
.folder-item:hover,
.file-item:hover {
    border-color: var(--clr-primary) !important;
    background-color: var(--clr-primary-light) !important;
}

/* Status Indicators */
.status-active,
.status-approved,
.status-completed {
    background-color: var(--clr-green) !important;
    color: white !important;
}

/* Quick Actions Buttons - Settings Screenshot */
.quick-act-btn,
.action-btn {
    transition: all 0.3s ease;
}

.quick-act-btn:hover,
.action-btn:hover {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Settings Tab Active State */
.settings-tabs .nav-link.active,
.settings-tabs .nav-item.show .nav-link {
    color: var(--clr-primary) !important;
    border-bottom: 3px solid var(--clr-primary) !important;
    background-color: transparent !important;
}

/* Settings Cards Hover */
.settings-card:hover,
.setting-item:hover {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15) !important;
}

/* Premium Badge / Subscription Badge */
.premium-badge,
.subscription-badge,
.badge-premium {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Upgrade Button */
.upgrade-btn,
.btn-upgrade,
button.upgrade {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.upgrade-btn:hover,
.btn-upgrade:hover,
button.upgrade:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

/* Notification Badge */
.notification-badge,
.badge-notification {
    background: var(--clr-primary) !important;
}

/* Charts and Graphs Primary Color */
.chart-bar-primary,
.chart-line-primary {
    fill: var(--clr-primary) !important;
    stroke: var(--clr-primary) !important;
}

/* Toggle Switch Active */
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--clr-primary) !important;
}

/* Steps / Wizard Active Step */
.step.active,
.wizard-step.active {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.step.active::after,
.wizard-step.active::after {
    border-left-color: var(--clr-primary) !important;
}

/* Calendar Active Date */
.calendar-day.active,
.datepicker-day.active {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Search Input Focus */
.search-input:focus,
input[type="search"]:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Filter Dropdown Active */
.filter-option.active,
.filter-item.active {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Action Icons Hover */
.action-icon:hover,
.table-action:hover {
    color: var(--clr-primary) !important;
}

/* Slider Track */
.slider-track-high {
    background: var(--clr-primary) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--clr-primary) 0%, var(--clr-gray3) 0%);
}

/* Mentions / Tags */
.mention,
.tag-item {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Loading Bar / Progress */
.loading-bar,
.progress-indicator {
    background: var(--gradient-primary) !important;
}

/* Star Rating Active */
.star-rating .star.active,
.rating-star.filled {
    color: var(--clr-primary) !important;
}

/* Expansion Panel Header Active */
.expansion-panel.active .panel-header {
    background-color: var(--clr-primary-light) !important;
    border-left: 4px solid var(--clr-primary) !important;
}

/* Image Upload Drag Zone Active */
.upload-zone.dragover,
.dropzone.dz-drag-hover {
    border-color: var(--clr-primary) !important;
    background-color: var(--clr-primary-light) !important;
}

/* Success Icons */
.success-icon,
.icon-success {
    color: var(--clr-green) !important;
}

/* Info Icons */
.info-icon,
.icon-info {
    color: var(--clr-blue) !important;
}

/* Warning Icons */
.warning-icon,
.icon-warning {
    color: var(--clr-orange) !important;
}

/* Error/Danger Icons */
.error-icon,
.danger-icon,
.icon-error,
.icon-danger {
    color: var(--clr-red) !important;
}

/* Sidebar Submenu Active */
.sidebar-submenu .active,
.sub-menu-item.active {
    background: var(--gradient-primary) !important;
    border-left: 4px solid var(--clr-primary-dark) !important;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle:hover,
.hamburger-menu:hover {
    color: var(--clr-primary) !important;
}

/* Price Tag / Badge */
.price-tag,
.price-badge {
    color: var(--clr-primary) !important;
    font-weight: 600;
}

/* Feature List Check Icons */
.feature-check,
.check-icon {
    color: var(--clr-green) !important;
}

/* Stats Card Accent */
.stat-card-accent,
.metric-card::before {
    background: var(--gradient-primary) !important;
}

/* Invoice/Receipt Header */
.invoice-header,
.receipt-header {
    border-bottom: 3px solid var(--clr-primary) !important;
}

/* Timeline Item Active */
.timeline-item.active::before {
    background: var(--clr-primary) !important;
}

/* Kanban Card Active Column */
.kanban-column.active {
    border-top: 4px solid var(--clr-primary) !important;
}

/* Code Editor Selection */
.code-editor .CodeMirror-selected {
    background: var(--clr-primary-light) !important;
}

/* Video Player Controls */
.video-controls .play-button:hover {
    color: var(--clr-primary) !important;
}

/* Audio Player Progress */
.audio-player .progress-filled {
    background: var(--gradient-primary) !important;
}

/* Print Button for Reports */
.print-btn,
.btn-print {
    border: 2px solid var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

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

/* Export Button */
.export-btn,
.btn-export {
    border: 2px solid var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

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

/* Language Selector Active */
.language-selector .active,
.lang-option.active {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Settings Icon in Header */
.settings-icon:hover,
.config-icon:hover {
    color: var(--clr-primary) !important;
}

/* User Profile Dropdown Active */
.user-dropdown .dropdown-item:hover {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Notification Dropdown */
.notification-item:hover {
    background-color: var(--clr-primary-light) !important;
}

.notification-item.unread {
    border-left: 3px solid var(--clr-primary) !important;
}


/* ============================================
   REPLACE ALL RED/PINK ACCENT COLORS WITH PRIMARY PURPLE-BLUE
   ============================================ */

/* Settings Tab Active - Red to Purple */
#settingsTab .nav-link.settings-link.active {
    color: var(--clr-primary) !important;
    border-bottom: 3px solid var(--clr-primary) !important;
}

/* Text Red - Change to Primary */
.text-red {
    color: var(--clr-primary) !important;
}

/* Loss Color - Keep semantic but adjust tone */
.bus-profit .loss {
    color: var(--clr-red) !important;
}

/* No Badge - Change from red to primary */
.no-badge {
    background-color: var(--clr-primary) !important;
    color: white !important;
}

/* Border Button - Red to Primary */
.border-btn {
    border: 1px solid var(--clr-primary) !important;
    background: none !important;
    color: var(--clr-primary) !important;
}

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

/* Canceled Status - Keep as warning/error color */
.canceled {
    background: rgba(245, 101, 101, 0.1);
    color: var(--clr-red);
}

/* Subscription Plan Buttons */
.subscription-plan-tabs .content .features .alert-circle svg:hover path {
    stroke: var(--clr-primary) !important;
}

.subscription-plan-tabs .content .btns button:first-child {
    color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

.subscription-plan-tabs .content .btns button:first-child:hover {
    background: var(--clr-primary) !important;
    color: white !important;
}

/* Deactive Status - Change to primary */
.dective-status {
    color: var(--clr-primary) !important;
    background-color: var(--clr-primary-light) !important;
}

/* Withdrawal Header */
.Withdrawal-header p span {
    color: var(--clr-primary) !important;
}

/* Save Publish Button */
.save-publish-btn {
    color: var(--clr-primary) !important;
    background-color: var(--clr-primary-light) !important;
}

.save-publish-btn:hover {
    color: var(--clr-primary) !important;
    border: 1px solid var(--clr-primary) !important;
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Product Settings Hover */
.product-settings:hover svg path {
    stroke: var(--clr-primary) !important;
}

/* Radio Button Checked */
.form-check-input[type="radio"]:checked {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Custom Modal No Button - Keep as danger/cancel */
.custom-modal .btn-no {
    border: 1px solid var(--clr-red) !important;
    color: var(--clr-red) !important;
}

.custom-modal .btn-no:hover {
    background: var(--clr-red) !important;
    color: white !important;
}

/* Expense Amount */
.expense-ammount {
    color: var(--clr-primary) !important;
}

/* Rejected Status - Keep as error */
.rejected-status {
    color: var(--clr-red) !important;
    border: 1px solid var(--clr-red) !important;
    background-color: rgba(245, 101, 101, 0.1) !important;
}

/* Select Batch Hover */
.select-batch:hover {
    background-color: var(--clr-primary-light) !important;
}

/* Remove Icon - Keep as danger indicator */
.remove-list .remove-one i {
    color: var(--clr-red) !important;
}

/* Dashboard Button - Change to primary theme */
.sales-container .dashboard-btn {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

.sales-container .dashboard-btn:hover {
    background: var(--clr-primary) !important;
    color: white !important;
}

/* Invoice/PDF Headers - Change from red to primary */
.in-table-header .head-red {
    background-color: var(--clr-primary) !important;
}

.in-table-row-bottom .total-amound {
    background-color: var(--clr-primary) !important;
}

/* Invoice Footer */
.invoice-footer,
.pdf-footer {
    background-color: var(--clr-primary) !important;
}

/* Payout Down Color */
.aff-stat-content .payout .down {
    color: var(--clr-red) !important;
}

/* Error Page Button */
.error-btn {
    border: 1px solid var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

.error-btn:hover {
    background: var(--clr-primary) !important;
    color: white !important;
}

/* Alert List SVG */
.alert-list svg path {
    fill: var(--clr-red) !important;
}

/* Gradient Color Classes */
.color-2 {
    background: var(--gradient-primary) !important;
}

.gpt-dashboard-card .couter-box:nth-child(4) {
    background: var(--gradient-primary) !important;
}

/* Status Indicators with Dots */
.status-dot-red,
.dot-indicator.red {
    background-color: var(--clr-red) !important;
}

.status-dot-primary,
.dot-indicator.primary {
    background-color: var(--clr-primary) !important;
}

/* Settings Icons - Change red/pink to primary purple */
.settings-card .icon-wrapper,
.setting-item .icon-box {
    color: var(--clr-primary) !important;
}

.settings-card .icon-wrapper svg,
.setting-item .icon-box svg {
    stroke: var(--clr-primary) !important;
    fill: var(--clr-primary-light) !important;
}

/* Tab Navigation - All Settings Active */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--clr-primary) !important;
    border-bottom-color: var(--clr-primary) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--clr-primary) !important;
}

/* Icon Circles/Backgrounds in Settings */
.icon-circle-red,
.icon-bg-red {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Settings Section Icons */
.setting-icon,
.config-icon-wrapper {
    background: var(--clr-primary-light) !important;
}

.setting-icon svg,
.config-icon-wrapper svg {
    color: var(--clr-primary) !important;
    fill: var(--clr-primary) !important;
}

/* Notification Icons */
.notification-icon-red {
    color: var(--clr-primary) !important;
}

/* Payments CSS Override */
body .payment-primary,
body .payment-accent {
    color: var(--clr-primary) !important;
}

/* Important: Override any lingering red colors in components */
[class*="red"]:not(.text-danger):not(.bg-danger):not(.badge-danger):not(.btn-danger):not(.alert-danger) {
    color: var(--clr-primary) !important;
}

[class*="Red"]:not(.text-danger):not(.bg-danger):not(.badge-danger):not(.btn-danger):not(.alert-danger) {
    color: var(--clr-primary) !important;
}

/* Keep actual danger/error states as red for semantic meaning */
.text-danger,
.bg-danger,
.badge-danger,
.btn-danger,
.alert-danger,
.error-message,
.danger-state {
    /* These remain red for error indication */
}


/* ============================================
   FORCE OVERRIDE ALL INLINE SVG COLORS
   ============================================ */

/* Settings Page Icon SVG Overrides */
.settings-icon svg,
.settings-icon svg path,
.settings-icon svg circle,
.settings-icon svg rect,
.setting-box svg,
.setting-box svg path,
.setting-box svg circle,
.setting-box svg rect {
    stroke: var(--clr-primary) !important;
    fill: none !important;
}

/* Settings Icon Background */
.settings-icon {
    background: var(--clr-primary-light) !important;
    border-radius: 8px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Override any SVG with red stroke color */
svg[stroke="var(--clr-primary)"],
svg[stroke="var(--clr-primary)"],
svg path[stroke="var(--clr-primary)"],
svg path[stroke="var(--clr-primary)"],
svg circle[stroke="var(--clr-primary)"],
svg circle[stroke="var(--clr-primary)"] {
    stroke: var(--clr-primary) !important;
}

/* Override any SVG with red fill color */
svg[fill="var(--clr-primary)"],
svg[fill="var(--clr-primary)"],
svg path[fill="var(--clr-primary)"],
svg path[fill="var(--clr-primary)"],
svg circle[fill="var(--clr-primary)"],
svg circle[fill="var(--clr-primary)"] {
    fill: var(--clr-primary) !important;
}

/* Settings Box Hover Effect */
.setting-box {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
    background: white;
}

.setting-box:hover {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15) !important;
    background: var(--clr-primary-light) !important;
}

.setting-box:hover h6 {
    color: var(--clr-primary) !important;
}

.setting-box:hover .settings-icon {
    background: var(--clr-primary) !important;
}

.setting-box:hover .settings-icon svg,
.setting-box:hover .settings-icon svg path,
.setting-box:hover .settings-icon svg circle {
    stroke: white !important;
}

/* Settings Box Container Grid */
.settings-box-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Ensure settings link active state uses primary color */
.nav-link.settings-link.active {
    color: var(--clr-primary) !important;
    border-bottom: 3px solid var(--clr-primary) !important;
}

.nav-link.settings-link:hover {
    color: var(--clr-primary) !important;
}

/* Additional SVG Override for Any Icon Container */
.icon-wrapper svg,
.icon-box svg,
.icon-container svg,
[class*="icon"] svg {
    stroke: var(--clr-primary);
}

.icon-wrapper svg path,
.icon-box svg path,
.icon-container svg path,
[class*="icon"] svg path {
    stroke: var(--clr-primary);
}

/* Sync Icon Fill Override */
svg[fill="var(--clr-primary)"] path {
    fill: var(--clr-primary) !important;
}

/* Product Settings Info Icon */
.title svg path {
    fill: var(--clr-gray) !important;
    stroke: var(--clr-gray) !important;
}

/* Make sure all icons in settings section use primary color */
#settingsTab ~ .tab-content svg path[stroke*="#"],
#settingsTab ~ .tab-content svg path[stroke*="rgb"],
#settingsTab ~ .tab-content svg circle[stroke*="#"],
#settingsTab ~ .tab-content svg circle[stroke*="rgb"] {
    stroke: var(--clr-primary) !important;
}

/* Specifically target the manage settings page */
.erp-table-section .setting-box svg,
.erp-table-section .settings-icon svg {
    color: var(--clr-primary) !important;
}

.erp-table-section .setting-box svg path,
.erp-table-section .settings-icon svg path {
    stroke: var(--clr-primary) !important;
}

/* Force all stroke attributes to use primary color in settings */
body .setting-box svg[viewBox] path[stroke],
body .settings-icon svg[viewBox] path[stroke],
body .setting-box svg[viewBox] circle[stroke],
body .settings-icon svg[viewBox] circle[stroke] {
    stroke: var(--clr-primary) !important;
}


/* ============================================
   COMPREHENSIVE SYSTEM-WIDE COLOR FIXES
   ============================================ */

/* Dashboard Stat Cards - Replace colored backgrounds with primary gradient */
.bus-stat-icon,
.stat-icon,
.dashboard-stat-icon,
.counter-icon,
.stats-icon-wrapper {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Stat Cards with Specific Colors */
.stat-card .icon-wrapper,
.dashboard-card .icon-box,
[class*="stat-"] .icon,
[class*="counter-"] .icon {
    background: var(--gradient-primary) !important;
}

/* Override Individual Stat Card Colors */
.stat-purple, .stat-violet,
.stat-blue, .stat-cyan,
.stat-orange, .stat-red,
.stat-pink, .stat-magenta,
.bg-purple, .bg-violet,
.bg-blue-custom, .bg-cyan-custom,
.bg-orange-custom, .bg-red-custom {
    background: var(--gradient-primary) !important;
}

/* Premium Button Styling */
.premium-btn,
button.premium,
.upgrade-premium,
a[href*="premium"],
a[href*="upgrade"] {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

/* Sync Page Icons - Use Primary Color */
.sync-icon,
.connection-icon,
.sync-action-icon {
    color: var(--clr-primary) !important;
}

/* Sync Page SVGs */
.sync-actions svg,
.sync-section svg,
.connection-status svg {
    stroke: var(--clr-primary) !important;
    fill: var(--clr-primary-light) !important;
}

/* Alert/Warning Icons that should be primary */
.info-circle:not(.error):not(.danger):not(.warning),
.alert-icon:not(.error):not(.danger):not(.warning) {
    color: var(--clr-primary) !important;
}

/* Dashboard Revenue Chart Colors */
.chart-primary-color {
    color: var(--clr-primary) !important;
}

/* Notification Badge Red to Primary */
.notification-badge,
.badge-count,
.alert-count {
    background: var(--clr-primary) !important;
}

/* Sidebar Menu Active Gradient */
.side-bar-manu li.active > a,
.side-bar-manu li:hover > a {
    background: var(--gradient-primary) !important;
}

/* Toggle Switch Primary Color */
.form-switch .form-check-input:checked,
.toggle-input:checked + .toggle-label {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Checkbox Primary Color */
input[type="checkbox"]:checked {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

/* Select Dropdown Focus */
.form-select:focus,
.choices__inner:focus,
select:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Data Table Active Row */
.dataTable tbody tr.selected,
.table tbody tr.active {
    background-color: var(--clr-primary-light) !important;
}

/* Badge Colors - Replace all colored badges with primary */
.badge-purple, .badge-violet,
.badge-pink, .badge-magenta,
.badge-orange:not(.badge-warning),
.badge-red:not(.badge-danger) {
    background: var(--clr-primary) !important;
    color: white !important;
}

/* Card Header Colored Backgrounds */
.card-header-purple,
.card-header-violet,
.card-header-pink,
.card-header-blue:not(.card-header-info),
.card-header-orange:not(.card-header-warning),
.card-header-red:not(.card-header-danger) {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Icon Backgrounds in Various Components */
.icon-bg-purple,
.icon-bg-violet,
.icon-bg-pink,
.icon-bg-blue,
.icon-bg-orange,
.icon-bg-red,
.icon-circle-purple,
.icon-circle-violet,
.icon-circle-pink,
.icon-circle-blue,
.icon-circle-orange,
.icon-circle-red {
    background: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Status Dots - Keep semantic colors but add primary option */
.status-dot-purple,
.status-dot-violet,
.status-dot-pink,
.status-dot-blue,
.status-dot-orange {
    background-color: var(--clr-primary) !important;
}

/* Timeline Item Colors */
.timeline-item-purple,
.timeline-item-violet,
.timeline-item-pink,
.timeline-item-blue,
.timeline-item-orange,
.timeline-item-red {
    border-left-color: var(--clr-primary) !important;
}

.timeline-item-purple::before,
.timeline-item-violet::before,
.timeline-item-pink::before,
.timeline-item-blue::before,
.timeline-item-orange::before,
.timeline-item-red::before {
    background: var(--clr-primary) !important;
}

/* Progress Bar Variants */
.progress-bar-purple,
.progress-bar-violet,
.progress-bar-pink,
.progress-bar-blue,
.progress-bar-orange,
.progress-bar-red {
    background: var(--gradient-primary) !important;
}

/* Chip/Tag Components */
.chip-purple, .chip-violet,
.chip-pink, .chip-blue,
.chip-orange, .chip-red,
.tag-purple, .tag-violet,
.tag-pink, .tag-blue,
.tag-orange, .tag-red {
    background: var(--clr-primary-light) !important;
    color: var(--clr-primary) !important;
}

/* Avatar Backgrounds */
.avatar-purple, .avatar-violet,
.avatar-pink, .avatar-blue,
.avatar-orange, .avatar-red {
    background: var(--gradient-primary) !important;
}

/* Ribbon/Corner Badges */
.ribbon-purple, .ribbon-violet,
.ribbon-pink, .ribbon-blue,
.ribbon-orange, .ribbon-red {
    background: var(--gradient-primary) !important;
}

/* Slider/Range Thumb Colors */
input[type="range"]::-webkit-slider-thumb {
    background: var(--clr-primary) !important;
}

input[type="range"]::-moz-range-thumb {
    background: var(--clr-primary) !important;
}

/* Calendar/Datepicker Active Date */
.calendar-active,
.datepicker-active,
.flatpickr-day.selected {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Tabs with Colored Underlines */
.nav-tabs-purple .nav-link.active,
.nav-tabs-violet .nav-link.active,
.nav-tabs-pink .nav-link.active,
.nav-tabs-blue .nav-link.active,
.nav-tabs-orange .nav-link.active,
.nav-tabs-red .nav-link.active {
    border-bottom-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

/* Stepper Active Step */
.stepper-item.active,
.step-item.active {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.stepper-item.active .stepper-circle,
.step-item.active .step-circle {
    background: white !important;
    color: var(--clr-primary) !important;
}

/* Kanban Board Colors */
.kanban-purple, .kanban-violet,
.kanban-pink, .kanban-blue,
.kanban-orange, .kanban-red {
    border-top-color: var(--clr-primary) !important;
}

/* Toast/Notification Info (not error/warning) */
.toast-info:not(.toast-error):not(.toast-warning) {
    background: var(--clr-primary) !important;
}

/* Loading Spinner Primary */
.spinner-primary {
    border-top-color: var(--clr-primary) !important;
}

/* Search Highlight */
mark.highlight,
.search-highlight {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
}

/* Pricing Card Featured */
.pricing-card.featured,
.plan-card.highlighted {
    border-color: var(--clr-primary) !important;
}

.pricing-card.featured .card-header,
.plan-card.highlighted .card-header {
    background: var(--gradient-primary) !important;
}

/* Stats/Metrics Comparison Colors */
.metric-up,
.trend-up,
.increase-indicator {
    color: var(--clr-green) !important;
}

.metric-down,
.trend-down,
.decrease-indicator {
    color: var(--clr-red) !important;
}

/* Sidebar Submenu Arrow/Chevron */
.side-bar-manu .dropdown.active::before {
    color: white !important;
}

/* Low Stock Alert - Keep Red */
.low-stock-alert,
.stock-warning,
.alert-low-stock {
    color: var(--clr-red) !important;
}

/* Connection Status Offline - Keep Red */
.connection-offline,
.status-offline,
.offline-indicator {
    color: var(--clr-red) !important;
}

/* But keep "Offline" text color semantic */
.connection-status .offline-text {
    color: var(--clr-red) !important;
}

/* Force Override Any Remaining Background Colors */
[style*="background-color: var(--clr-primary)"],
[style*="background-color:var(--clr-primary)"],
[style*="background: var(--clr-primary)"],
[style*="background:var(--clr-primary)"] {
    background: var(--clr-primary) !important;
}

[style*="color: var(--clr-primary)"],
[style*="color:var(--clr-primary)"] {
    color: var(--clr-primary) !important;
}

/* Dashboard Specific Card Icons */
.dashboard .card-icon,
.dashboard .stat-icon,
.erp-dashboard .icon-wrapper {
    background: var(--gradient-primary) !important;
}

/* Invoice/Receipt Status */
.invoice-paid,
.receipt-completed,
.status-completed:not(.status-cancelled) {
    background: var(--clr-green-light) !important;
    color: var(--clr-green) !important;
}

/* Specific Color Class Overrides */
.text-purple, .text-violet,
.text-pink, .text-magenta,
.text-orange:not(.text-warning),
.text-blue:not(.text-info) {
    color: var(--clr-primary) !important;
}

.bg-purple, .bg-violet,
.bg-pink, .bg-magenta,
.bg-orange:not(.bg-warning),
.bg-blue:not(.bg-info) {
    background: var(--gradient-primary) !important;
}

/* Border Color Overrides */
.border-purple, .border-violet,
.border-pink, .border-magenta,
.border-orange:not(.border-warning),
.border-blue:not(.border-info) {
    border-color: var(--clr-primary) !important;
}


/* ============================================
   SIDEBAR PREMIUM/SUBSCRIPTION SECTION
   ============================================ */

/* Premium/Subscription Badge in Sidebar */
.sidebar-free-plan,
#sidebar_plan,
.lg-sub-plan,
.sub-plan {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-radius: 12px;
}

.sidebar-free-plan h3,
.sidebar-free-plan h5,
#sidebar_plan h3,
#sidebar_plan h5 {
    color: white !important;
}

/* Upgrade Button */
.upgrate-btn,
.upgrade-btn,
button.upgrade,
a[href*="upgrade"],
a[href*="subscriptions"] {
    background: white !important;
    color: var(--clr-primary) !important;
    border: 2px solid white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.upgrate-btn:hover,
.upgrade-btn:hover {
    background: var(--clr-primary-dark) !important;
    color: white !important;
    border-color: white !important;
    transform: translateY(-2px);
}

/* Sub Plan Icon */
.sub-plan img {
    filter: brightness(0) invert(1);
}


/* ============================================
   FORCE PREMIUM BADGE GRADIENT - HIGHEST PRIORITY
   ============================================ */

/* Ultra-specific selectors for Premium badge */
.side-bar .sidebar-free-plan,
.side-bar #sidebar_plan,
.side-bar .lg-sub-plan > div,
.side-bar-manu .sidebar-free-plan,
nav.side-bar .lg-sub-plan,
body .side-bar .sidebar-free-plan,
html body .side-bar #sidebar_plan {
    background: var(--gradient-primary) !important;
    background-image: var(--gradient-primary) !important;
    background-color: var(--clr-primary) !important;
    color: white !important;
}

/* Remove any conflicting gradients */
.sidebar-free-plan[style*="background"],
#sidebar_plan[style*="background"],
.lg-sub-plan[style*="background"] {
    background: var(--gradient-primary) !important;
    background-image: var(--gradient-primary) !important;
}

/* Ensure text is white */
.side-bar .sidebar-free-plan *,
.side-bar #sidebar_plan *,
.side-bar .lg-sub-plan * {
    color: white !important;
}

/* Upgrade button with even higher specificity */
.side-bar .upgrate-btn,
.side-bar .upgrade-btn,
.sidebar-free-plan .upgrate-btn,
#sidebar_plan .upgrate-btn,
#sidebar_plan a.btn,
.lg-sub-plan .btn {
    background: white !important;
    background-image: none !important;
    color: var(--clr-primary) !important;
    border: 2px solid white !important;
}

.side-bar .upgrate-btn:hover,
.side-bar .upgrade-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.05);
}


/* ============================================
   SIDEBAR LOGO WITH TEXT
   ============================================ */

/* Logo container */
.side-bar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.side-bar-logo .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    text-decoration: none;
}

/* Logo image */
.side-bar-logo .logo-img {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Logo text - NOVA POS */
.side-bar-logo .logo-text {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* When sidebar is minimized (active class) */
.side-bar.active .logo-text {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

/* Show text on hover when minimized */
.side-bar.active:hover .logo-text {
    opacity: 1;
    transform: translateX(0);
}

/* Adjust logo size when minimized */
.side-bar.active .logo-img {
    height: 32px;
}

.side-bar.active:hover .logo-img {
    height: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .side-bar-logo .logo-text {
        font-size: 20px;
    }
}