/* Velzon Override CSS - Integration with RankAI Dark Theme */

/* Ensure dark theme consistency */
:root {
    --vz-primary: #8B5CF6;
    --vz-primary-rgb: 139, 92, 246;
    --vz-secondary: #EC4899;
    --vz-secondary-rgb: 236, 72, 153;
    --vz-success: #10B981;
    --vz-info: #06B6D4;
    --vz-warning: #F59E0B;
    --vz-danger: #EF4444;
    --vz-light: #374151;
    --vz-dark: #111827;
    --vz-gray-300: #6B7280;
    --vz-body-bg: #0A0A0B;
    --vz-body-color: #FFFFFF;
}

/* Override Bootstrap/Velzon backgrounds */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    backdrop-filter: blur(10px);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.table-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-light th {
    color: var(--text-secondary) !important;
}

.btn-primary {
    background: var(--gradient-accent) !important;
    border: none !important;
}

.btn-primary:hover {
    box-shadow: var(--shadow-purple) !important;
    transform: translateY(-2px);
}

.alert-primary {
    background-color: rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
    color: var(--text-primary) !important;
}

.bg-primary-subtle {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.text-primary {
    color: var(--accent-primary) !important;
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.text-success {
    color: #10B981 !important;
}

/* Dropdown styling */
.dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Badge styling */
.badge {
    font-weight: 500;
}

/* Progress bar styling */
.progress {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Avatar styling */
.avatar-title {
    font-weight: 600;
}

/* Counter animation */
.counter-value {
    display: inline-block;
}

/* Apex Charts dark theme */
.apexcharts-canvas {
    background: transparent !important;
}

.apexcharts-text {
    fill: var(--text-secondary) !important;
}

.apexcharts-gridline {
    stroke: var(--border-primary) !important;
}

/* Form controls */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
}

/* Table styling */
.table {
    color: var(--text-primary) !important;
}

.table-borderless tbody tr td {
    border-bottom: 1px solid var(--border-secondary) !important;
}

/* Page title */
.page-title-box {
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
}

.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* Animations */
.card-animate {
    transition: all 0.3s ease;
}

.card-animate:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-purple) !important;
}

/* Spinner */
.spinner-border {
    border-color: var(--accent-primary) !important;
    border-right-color: transparent !important;
}