/**
 * Proplexa brand color system
 * Primary reference: Light Listing button (#8A00C4 default, #7a00b3 hover)
 */
:root {
    --proplexa-purple-primary: #8A00C4;
    --proplexa-purple-hover: #7a00b3;
    --proplexa-purple-light: #F3E5FA;
    --proplexa-purple-light-border: rgba(138, 0, 196, 0.22);
    --proplexa-purple-muted: rgba(138, 0, 196, 0.12);
    --proplexa-purple-rgb: 138, 0, 196;

    /* Bootstrap / Metronic primary alignment */
    --bs-primary: #8A00C4;
    --bs-primary-rgb: 138, 0, 196;
    --bs-primary-active: #7a00b3;
    --bs-primary-text-emphasis: #5c0089;
    --bs-primary-bg-subtle: #F3E5FA;
    --bs-primary-border-subtle: rgba(138, 0, 196, 0.25);
    --bs-link-color: #8A00C4;
    --bs-link-hover-color: #7a00b3;
}

/* Utility classes */
.proplexa-purple,
.bg-proplexa-purple {
    background-color: var(--proplexa-purple-primary) !important;
}

.proplexa-purple-hover:hover,
.hover\:proplexa-purple-hover:hover {
    background-color: var(--proplexa-purple-hover) !important;
}

.proplexa-purple-text,
.text-proplexa-purple {
    color: var(--proplexa-purple-primary) !important;
}

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

.bg-proplexa-purple-light {
    background-color: var(--proplexa-purple-light) !important;
}

/* CTA buttons (header, landing) — prefer classes over inline hex */
.btn-proplexa,
a.btn-proplexa {
    background-color: var(--proplexa-purple-primary) !important;
    border-color: var(--proplexa-purple-primary) !important;
    color: #fff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-proplexa:hover,
a.btn-proplexa:hover {
    background-color: var(--proplexa-purple-hover) !important;
    border-color: var(--proplexa-purple-hover) !important;
    color: #fff !important;
}

.btn-proplexa-outline {
    color: var(--proplexa-purple-primary) !important;
    border: 1px solid var(--proplexa-purple-primary) !important;
    background-color: transparent !important;
}

.btn-proplexa-outline:hover {
    color: #fff !important;
    background-color: var(--proplexa-purple-primary) !important;
}

/* SVG icons inherit brand color from parent */
.text-proplexa-purple svg,
.proplexa-purple-text svg,
.icon-proplexa-purple {
    color: var(--proplexa-purple-primary);
    stroke: currentColor;
}

.badge-proplexa {
    background-color: var(--proplexa-purple-primary) !important;
    color: #fff !important;
}

.accent-proplexa {
    accent-color: var(--proplexa-purple-primary);
}

/* Dashboard & auth: primary buttons (replaces multi-color btn-grad gradient) */
.btn-grad,
.btn-primary,
.btn.btn-primary,
.analytics-table .dt-buttons .dt-button,
nav ul.pagination li.page-item.active .page-link,
.app-sidebar-footer .btn-primary {
    color: #fff !important;
    border-color: var(--proplexa-purple-primary) !important;
    background-color: var(--proplexa-purple-primary) !important;
    background-image: linear-gradient(135deg, var(--proplexa-purple-primary) 0%, var(--proplexa-purple-hover) 100%) !important;
    background-size: 100% 100% !important;
    box-shadow: 0 4px 14px 0 rgba(var(--proplexa-purple-rgb), 0.28) !important;
}

.btn-grad:hover,
.btn-primary:hover,
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary,
.analytics-table .dt-buttons .dt-button:hover,
nav ul.pagination li.page-item.active .page-link:hover,
.app-sidebar-footer .btn-primary:hover {
    color: #fff !important;
    border-color: var(--proplexa-purple-hover) !important;
    background-color: var(--proplexa-purple-hover) !important;
    background-image: linear-gradient(135deg, var(--proplexa-purple-hover) 0%, var(--proplexa-purple-primary) 100%) !important;
    background-position: 0 0 !important;
}

/* Outline / light primary variants */
.btn-light-primary {
    color: var(--proplexa-purple-primary) !important;
    background-color: var(--proplexa-purple-light) !important;
    border-color: var(--proplexa-purple-light-border) !important;
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary.active {
    color: #fff !important;
    background-color: var(--proplexa-purple-primary) !important;
    border-color: var(--proplexa-purple-primary) !important;
}

.btn-outline-primary,
.btn.btn-outline.btn-outline-primary {
    color: var(--proplexa-purple-primary) !important;
    border-color: var(--proplexa-purple-primary) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--proplexa-purple-primary) !important;
    border-color: var(--proplexa-purple-primary) !important;
}

/* Metronic text/bg primary tokens */
.text-primary {
    color: var(--proplexa-purple-primary) !important;
}

.bg-light-primary {
    background-color: var(--proplexa-purple-light) !important;
}

.border-primary,
.border-hover-primary:hover {
    border-color: var(--proplexa-purple-primary) !important;
}

.text-hover-primary:hover {
    color: var(--proplexa-purple-primary) !important;
}

.bg-hover-light-primary:hover {
    background-color: var(--proplexa-purple-light) !important;
}

/* Progress bars & steppers */
.progress-bar,
#progress-line {
    background-color: var(--proplexa-purple-primary) !important;
}

.stepper-links .stepper-nav .step-item.active .step-circle,
.stepper-links .stepper-nav .step-item.completed .step-circle {
    background-color: var(--proplexa-purple-primary) !important;
    color: #fff !important;
}

.stepper-links .stepper-nav .step-item.active .step-label {
    color: var(--proplexa-purple-primary) !important;
}

/* Form focus rings */
.form-control:focus,
.form-select:focus {
    border-color: var(--proplexa-purple-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--proplexa-purple-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--proplexa-purple-primary);
    border-color: var(--proplexa-purple-primary);
}

/* Links */
a:not(.btn):not(.menu-link):not(.nav-link):not(.dropdown-item) {
    --bs-link-color: var(--proplexa-purple-primary);
    --bs-link-hover-color: var(--proplexa-purple-hover);
}

/* Tailwind purple utilities (landing, pricing, about) */
.bg-purple-50 { background-color: var(--proplexa-purple-light) !important; }
.bg-purple-100 { background-color: var(--proplexa-purple-muted) !important; }
.bg-purple-200 { background-color: rgba(var(--proplexa-purple-rgb), 0.18) !important; }
.bg-purple-600,
.bg-purple-700,
.bg-purple-800,
.bg-purple-900 {
    background-color: var(--proplexa-purple-primary) !important;
}
.hover\:bg-purple-50:hover { background-color: var(--proplexa-purple-light) !important; }
.hover\:bg-purple-700:hover,
.hover\:bg-purple-800:hover,
.hover\:bg-purple-900:hover {
    background-color: var(--proplexa-purple-hover) !important;
}
.text-purple-200 { color: rgba(var(--proplexa-purple-rgb), 0.55) !important; }
.text-purple-600,
.text-purple-700,
.text-purple-900 {
    color: var(--proplexa-purple-primary) !important;
}
.border-purple-200,
.border-purple-600 {
    border-color: var(--proplexa-purple-light-border) !important;
}
.border-purple-600 { border-color: var(--proplexa-purple-primary) !important; }
.hover\:border-purple-200:hover {
    border-color: var(--proplexa-purple-light-border) !important;
}
.from-purple-50 { --tw-gradient-from: var(--proplexa-purple-light) var(--tw-gradient-from-position) !important; }
.to-purple-100\/50 { --tw-gradient-to: rgba(var(--proplexa-purple-rgb), 0.08) var(--tw-gradient-to-position) !important; }
.from-purple-600 { --tw-gradient-from: var(--proplexa-purple-primary) var(--tw-gradient-from-position) !important; }
.to-purple-700 { --tw-gradient-to: var(--proplexa-purple-hover) var(--tw-gradient-to-position) !important; }
.from-purple-700 { --tw-gradient-from: var(--proplexa-purple-primary) var(--tw-gradient-from-position) !important; }
.to-purple-800 { --tw-gradient-to: var(--proplexa-purple-hover) var(--tw-gradient-to-position) !important; }
.hover\:from-purple-800:hover { --tw-gradient-from: var(--proplexa-purple-hover) var(--tw-gradient-from-position) !important; }
.hover\:to-purple-900:hover { --tw-gradient-to: var(--proplexa-purple-hover) var(--tw-gradient-to-position) !important; }
.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(var(--proplexa-purple-rgb), 0.45) !important;
}
.bg-purple-300 { background-color: rgba(var(--proplexa-purple-rgb), 0.35) !important; }