/*
 * Sunparadise Marketing Support - Brand Extension Theme
 * Brand Colors (available as CSS variables):
 * - Sunparadise Teal: #0a95bb
 * - Sunparadise Gold: #F5B800
 *
 * Note: This extends the base theme without overriding the color picker.
 * Users can still change colors via theme settings.
 */

:root {
    /* Sunparadise Brand Colors - Available for custom use */
    --sp-teal: #0a95bb;
    --sp-teal-rgb: 10, 149, 187;
    --sp-teal-dark: #07748f;
    --sp-teal-light: #4DC4D6;
    --sp-teal-lighter: #E5F6F9;

    --sp-gold: #F5B800;
    --sp-gold-rgb: 245, 184, 0;
    --sp-gold-dark: #D4A000;
    --sp-gold-light: #FFD54F;
    --sp-gold-lighter: #FFF8E1;
}

/* Sunparadise specific utility classes */
.sp-text-teal {
    color: var(--sp-teal) !important;
}

.sp-text-gold {
    color: var(--sp-gold) !important;
}

.sp-bg-teal {
    background-color: var(--sp-teal) !important;
}

.sp-bg-teal-light {
    background-color: var(--sp-teal-lighter) !important;
}

.sp-bg-gold {
    background-color: var(--sp-gold) !important;
}

.sp-bg-gold-light {
    background-color: var(--sp-gold-lighter) !important;
}

.sp-border-teal {
    border-color: var(--sp-teal) !important;
}

.sp-border-gold {
    border-color: var(--sp-gold) !important;
}

/* Premium Member Badge - Always gold regardless of theme */
.badge-premium-member {
    background-color: var(--sp-gold) !important;
    color: #212529 !important;
}

/* Standard Member Badge - Always teal regardless of theme */
.badge-standard-member {
    background-color: var(--sp-teal) !important;
    color: #fff !important;
}

/* Certified Partner Badge - Always teal regardless of theme */
.badge-certified-partner {
    background-color: var(--sp-teal) !important;
    color: #fff !important;
}

/* Welcome Banner with Brand Gradient */
.welcome-banner {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 2rem;
}

.welcome-banner .gold-accent {
    color: var(--sp-gold);
}

/* Stats Cards with Brand Colors */
.stat-card {
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.stat-card .stat-icon.sp-teal {
    background-color: var(--sp-teal-lighter);
    color: var(--sp-teal);
}

.stat-card .stat-icon.sp-gold {
    background-color: var(--sp-gold-lighter);
    color: var(--sp-gold-dark);
}

/* Card with brand accent */
.card-sp-accent {
    border-top: 3px solid var(--sp-teal);
}

.card-sp-gold-accent {
    border-top: 3px solid var(--sp-gold);
}

/* Auth Page Brand Styling */
.auth-brand-banner {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%);
}

/* Portal specific styles */
.portal-header {
    border-bottom: 2px solid var(--sp-gold);
}

/* Kanban Board Brand Colors */
.kanban-header.sp-branded {
    background-color: var(--sp-teal);
    color: #fff;
}

/* Timeline Brand Color */
.timeline-brand::before {
    background-color: var(--sp-teal);
}

/* Custom Button Variants */
.btn-sp-teal {
    background-color: var(--sp-teal);
    border-color: var(--sp-teal);
    color: #fff;
}

.btn-sp-teal:hover,
.btn-sp-teal:focus {
    background-color: var(--sp-teal-dark);
    border-color: var(--sp-teal-dark);
    color: #fff;
}

.btn-sp-gold {
    background-color: var(--sp-gold);
    border-color: var(--sp-gold);
    color: #212529;
}

.btn-sp-gold:hover,
.btn-sp-gold:focus {
    background-color: var(--sp-gold-dark);
    border-color: var(--sp-gold-dark);
    color: #212529;
}

.btn-outline-sp-teal {
    color: var(--sp-teal);
    border-color: var(--sp-teal);
    background-color: transparent;
}

.btn-outline-sp-teal:hover {
    background-color: var(--sp-teal);
    border-color: var(--sp-teal);
    color: #fff;
}

.btn-outline-sp-gold {
    color: var(--sp-gold-dark);
    border-color: var(--sp-gold);
    background-color: transparent;
}

.btn-outline-sp-gold:hover {
    background-color: var(--sp-gold);
    border-color: var(--sp-gold);
    color: #212529;
}

/* Logo Container */
.logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-container .logo-icon {
    width: 32px;
    height: 32px;
}

.logo-container .logo-text {
    height: 24px;
}

/* Responsive logo */
@media (max-width: 991.98px) {
    .logo-lg {
        display: none !important;
    }
    .logo-sm {
        display: block !important;
    }
}

/* Premium Member indicator */
.premium-member-indicator {
    position: relative;
}

.premium-member-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background-color: var(--sp-gold);
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Marketing Package Section Icons */
.marketing-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

.marketing-icon.teal {
    background-color: var(--sp-teal-lighter);
    color: var(--sp-teal);
}

.marketing-icon.gold {
    background-color: var(--sp-gold-lighter);
    color: var(--sp-gold-dark);
}

/* Portal Navigation Active State */
.portal-nav .nav-link.active {
    border-left: 3px solid var(--sp-teal);
    background-color: var(--sp-teal-lighter);
}

/* Footer Brand */
.footer-brand {
    color: var(--sp-teal);
    font-weight: 600;
}

/* Loading Spinner Brand Color */
.spinner-sp {
    color: var(--sp-teal);
}

/* Progress Bar Brand */
.progress-bar-sp {
    background-color: var(--sp-teal);
}

.progress-bar-sp-gold {
    background-color: var(--sp-gold);
}

/* Membership Level Indicators */
.membership-certified {
    background: linear-gradient(135deg, var(--sp-teal-light) 0%, var(--sp-teal) 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.membership-premium {
    background: linear-gradient(135deg, var(--sp-gold-light) 0%, var(--sp-gold) 100%);
    color: #212529;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Development Plan Status Colors */
.dev-status-new {
    border-left: 4px solid var(--sp-teal);
}

.dev-status-progress {
    border-left: 4px solid var(--sp-gold);
}

.dev-status-done {
    border-left: 4px solid #28a745;
}

/* ========================================
   Theme Color Picker - Sunparadise Theme
   ======================================== */

/* SP Teal Theme */
[data-theme-colors="sp"] {
    --bs-primary: #0a95bb;
    --bs-primary-rgb: 10, 149, 187;
    --bs-link-color: #0a95bb;
    --bs-link-hover-color: #07748f;
}

[data-theme-colors="sp"] .btn-primary {
    background-color: #0a95bb;
    border-color: #0a95bb;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .btn-primary:hover,
[data-theme-colors="sp"] .btn-primary:focus,
[data-theme-colors="sp"] .btn-primary:active {
    background-color: #07748f;
    border-color: #07748f;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .btn-outline-primary {
    color: #0a95bb;
    border-color: #0a95bb;
}

[data-theme-colors="sp"] .btn-outline-primary:hover {
    background-color: #0a95bb;
    border-color: #0a95bb;
    color: #fff;
}

[data-theme-colors="sp"] .bg-primary {
    background-color: #0a95bb !important;
}

[data-theme-colors="sp"] .text-primary {
    color: #0a95bb !important;
}

[data-theme-colors="sp"] .border-primary {
    border-color: #0a95bb !important;
}

[data-theme-colors="sp"] a {
    color: #0a95bb;
}

[data-theme-colors="sp"] a:hover {
    color: #07748f;
}

[data-theme-colors="sp"] .nav-link.active,
[data-theme-colors="sp"] .nav-pills .nav-link.active {
    background-color: #0a95bb;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .page-item.active .page-link {
    background-color: #0a95bb;
    border-color: #0a95bb;
    color: #ffffff !important;
}

/* Ensure all btn-primary variants have white text */
[data-theme-colors="sp"] .btn-primary.disabled,
[data-theme-colors="sp"] .btn-primary:disabled {
    background-color: #0a95bb;
    border-color: #0a95bb;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .badge.bg-primary {
    color: #ffffff !important;
}

[data-theme-colors="sp"] .form-check-input:checked {
    background-color: #0a95bb;
    border-color: #0a95bb;
}

[data-theme-colors="sp"] .form-switch .form-check-input:checked {
    background-color: #0a95bb;
}

/* SP Gold Theme */
[data-theme-colors="sp-gold"] {
    --bs-primary: #F5B800;
    --bs-primary-rgb: 245, 184, 0;
    --bs-link-color: #D4A000;
    --bs-link-hover-color: #B38900;
}

[data-theme-colors="sp-gold"] .btn-primary {
    background-color: #F5B800;
    border-color: #F5B800;
    color: #212529;
}

[data-theme-colors="sp-gold"] .btn-primary:hover,
[data-theme-colors="sp-gold"] .btn-primary:focus {
    background-color: #D4A000;
    border-color: #D4A000;
    color: #212529;
}

[data-theme-colors="sp-gold"] .bg-primary {
    background-color: #F5B800 !important;
}

[data-theme-colors="sp-gold"] .text-primary {
    color: #D4A000 !important;
}

/* Right bar customizer styles */
.right-bar {
    position: fixed !important;
    right: -320px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 300px !important;
    max-width: 100%;
    background-color: #fff !important;
    z-index: 9999 !important;
    box-shadow: -2px 0 12px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    overflow: hidden;
}

body.right-bar-enabled .right-bar {
    right: 0 !important;
}

.right-bar-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.4);
    z-index: 9998 !important;
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.right-bar-enabled .right-bar-backdrop {
    display: block !important;
    opacity: 1;
}

.rightbar-title {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rightbar-title h5 {
    margin: 0;
}

.rightbar-body {
    padding: 1rem;
    height: calc(100% - 60px);
    overflow-y: auto;
}

/* Theme Color Button */
.theme-color-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.theme-color-btn span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.theme-color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.theme-color-btn:focus {
    outline: none;
}

.theme-color-btn.active {
    border-color: #212529;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-bs-theme="dark"] .theme-color-btn.active {
    border-color: #ffffff;
}

/* Dark mode support for right-bar */
[data-bs-theme="dark"] .right-bar {
    background-color: #1e1e2d;
    color: #c4c4c4;
}

[data-bs-theme="dark"] .rightbar-title {
    border-bottom-color: #2d2d3f;
}

[data-bs-theme="dark"] .rightbar-title h5 {
    color: #ffffff;
}

[data-bs-theme="dark"] .rightbar-body h6 {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .right-bar .btn-outline-secondary {
    color: #c4c4c4;
    border-color: #3d3d5c;
}

[data-bs-theme="dark"] .right-bar .btn-outline-secondary:hover,
[data-bs-theme="dark"] .right-bar .btn-check:checked + .btn-outline-secondary {
    background-color: var(--sp-teal);
    border-color: var(--sp-teal);
    color: #ffffff;
}

[data-bs-theme="dark"] .right-bar .border-top {
    border-top-color: #2d2d3f !important;
}

/* Logo max height in navbar */
.navbar-logo-box .logo img {
    max-height: 32px;
    width: auto;
}

/* ========================================
   Avatar Styling - Elegant Initials
   ======================================== */

/* Navbar user avatar - remove background, keep only circle */
.admin-user-info .avatar {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-user-info .avatar-title {
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(10, 149, 187, 0.3);
}

/* Dropdown menu avatar */
.dropdown-menu .avatar-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Avatar in tables (Dealers list, etc.) */
.avatar-xs {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.avatar-xs .avatar-title {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 50% !important;
}

/* SP Teal background gradient for avatars */
.avatar-title.sp-bg-teal,
.sp-bg-teal .avatar-title,
.sp-bg-teal.avatar-title {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(10, 149, 187, 0.25);
}

/* Ensure avatar-title in sp-bg-teal container is properly styled */
.avatar-xs.sp-bg-teal {
    background: transparent !important;
}

.avatar-xs.sp-bg-teal .avatar-title {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%) !important;
}

/* Avatar with primary background */
[data-theme-colors="sp"] .avatar-title.bg-primary,
[data-theme-colors="sp"] .bg-primary .avatar-title {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%) !important;
    color: #ffffff !important;
}

/* Larger avatars */
.avatar-sm .avatar-title {
    font-size: 14px;
    font-weight: 600;
}

.avatar-md .avatar-title {
    font-size: 18px;
    font-weight: 600;
}

.avatar-lg .avatar-title {
    font-size: 24px;
    font-weight: 600;
}

.avatar-xl .avatar-title {
    font-size: 32px;
    font-weight: 600;
}

/* Ensure all avatar-title have proper border-radius */
.avatar-title {
    border-radius: 50% !important;
}

/* Default avatar-title styling (when no bg class specified) */
[data-theme-colors="sp"] .avatar-xs .avatar-title:not([class*="bg-"]) {
    background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-teal-dark) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(10, 149, 187, 0.25);
}

/* ========================================
   Sunparadise Teal Theme (SP) CSS Variables
   Only applies when data-theme-colors="sp"
   ======================================== */

/* SP Theme - Primary colors */
[data-theme-colors="sp"] {
    --bs-primary: #0a95bb;
    --bs-primary-rgb: 10, 149, 187;
    --bs-link-color: #0a95bb;
    --bs-link-hover-color: #07748f;
    --theme-color: #0a95bb;
    --primary-color: #0a95bb;
    --primary: #0a95bb;
    --sidebar-active-color: #0a95bb;
    --menu-active-color: #0a95bb;
    --accent-color: #0a95bb;
}

/* Override soft primary backgrounds - SP theme only */
[data-theme-colors="sp"] .bg-primary-subtle,
[data-theme-colors="sp"] .bg-soft-primary {
    background-color: rgba(10, 149, 187, 0.1) !important;
}

/* Override btn-soft-primary - SP theme only */
[data-theme-colors="sp"] .btn-soft-primary {
    background-color: rgba(10, 149, 187, 0.1) !important;
    color: #0a95bb !important;
}

[data-theme-colors="sp"] .btn-soft-primary:hover,
[data-theme-colors="sp"] .btn-soft-primary:focus {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Override primary button - SP theme only */
[data-theme-colors="sp"] .btn-primary {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .btn-primary:hover,
[data-theme-colors="sp"] .btn-primary:focus,
[data-theme-colors="sp"] .btn-primary:active,
[data-theme-colors="sp"] .btn-primary.active {
    background-color: #07748f !important;
    border-color: #07748f !important;
    color: #ffffff !important;
}

/* Override outline primary - SP theme only */
[data-theme-colors="sp"] .btn-outline-primary {
    color: #0a95bb !important;
    border-color: #0a95bb !important;
}

[data-theme-colors="sp"] .btn-outline-primary:hover,
[data-theme-colors="sp"] .btn-outline-primary:focus,
[data-theme-colors="sp"] .btn-outline-primary:active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Override text-primary - SP theme only */
[data-theme-colors="sp"] .text-primary {
    color: #0a95bb !important;
}

/* Override bg-primary - SP theme only */
[data-theme-colors="sp"] .bg-primary {
    background-color: #0a95bb !important;
}

/* Override border-primary - SP theme only */
[data-theme-colors="sp"] .border-primary {
    border-color: #0a95bb !important;
}

/* Override badge bg-primary - SP theme only */
[data-theme-colors="sp"] .badge.bg-primary {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Override links - SP theme only */
[data-theme-colors="sp"] a {
    color: #0a95bb;
}

[data-theme-colors="sp"] a:hover {
    color: #07748f;
}

/* Override dropdown active/hover states - SP theme only */
[data-theme-colors="sp"] .dropdown-item.active,
[data-theme-colors="sp"] .dropdown-item:active {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Override nav tabs active state - SP theme only */
[data-theme-colors="sp"] .nav-tabs .nav-link.active {
    color: #0a95bb !important;
}

/* Card header tabs with filled background need white text */
[data-theme-colors="sp"] .nav-tabs.card-header-tabs .nav-link.active,
[data-theme-colors="sp"] .card-header .nav-tabs .nav-link.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .nav-pills .nav-link.active {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Override pagination active - SP theme only */
[data-theme-colors="sp"] .page-item.active .page-link {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

[data-theme-colors="sp"] .page-link {
    color: #0a95bb;
}

[data-theme-colors="sp"] .page-link:hover {
    color: #07748f;
}

/* Override form controls focus state - SP theme only */
[data-theme-colors="sp"] .form-control:focus,
[data-theme-colors="sp"] .form-select:focus {
    border-color: #0a95bb !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 149, 187, 0.25) !important;
}

/* Override form check inputs - SP theme only */
[data-theme-colors="sp"] .form-check-input:checked {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

[data-theme-colors="sp"] .form-check-input:focus {
    border-color: #0a95bb !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 149, 187, 0.25) !important;
}

/* Override form switch - SP theme only */
[data-theme-colors="sp"] .form-switch .form-check-input:checked {
    background-color: #0a95bb !important;
}

/* Override progress bar - SP theme only */
[data-theme-colors="sp"] .progress-bar {
    background-color: #0a95bb !important;
}

/* Override alert primary - SP theme only */
[data-theme-colors="sp"] .alert-primary {
    background-color: rgba(10, 149, 187, 0.1) !important;
    border-color: rgba(10, 149, 187, 0.2) !important;
    color: #07748f !important;
}

/* Override list-group active - SP theme only */
[data-theme-colors="sp"] .list-group-item.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

/* Override sidebar/menu active states - only for SP theme */
/* Using html selector for higher specificity */
html[data-theme-colors="sp"] .sidebar-left .left-menu li a.active,
html[data-theme-colors="sp"] .sidebar-left .left-menu li.active > a,
html[data-theme-colors="sp"] .left-menu > li > a.active,
html[data-theme-colors="sp"] .left-menu > li.mm-active > a,
html[data-theme-colors="sp"] .left-menu li.mm-active > a,
html[data-theme-colors="sp"] .sidebar-left .left-menu > li.mm-active > a,
html[data-theme-colors="sp"] #side-menu > li.mm-active > a,
html[data-theme-colors="sp"] #side-menu li.mm-active > a {
    color: #0a95bb !important;
    background-color: rgba(10, 149, 187, 0.1) !important;
}

/* Active menu item indicator (::before) - SP theme - VERY HIGH SPECIFICITY */
html[data-theme-colors="sp"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="sp"] .left-menu > li > a.active::before,
html[data-theme-colors="sp"] .left-menu > li > a:hover::before,
html[data-theme-colors="sp"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="sp"] #side-menu > li > a:hover::before,
html[data-theme-colors="sp"] .sidebar-left .left-menu > li.mm-active > a::before,
html[data-theme-colors="sp"] .sidebar-left .left-menu > li > a:hover::before,
html[data-theme-colors="sp"] .sidebar-left #side-menu > li.mm-active > a::before {
    background-color: #0a95bb !important;
    background: #0a95bb !important;
}

/* Also override ::after in case that's used */
html[data-theme-colors="sp"] .left-menu > li.mm-active > a::after,
html[data-theme-colors="sp"] #side-menu > li.mm-active > a::after {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

/* Sidebar hover states - SP theme */
html[data-theme-colors="sp"] .sidebar-left .left-menu li a:hover,
html[data-theme-colors="sp"] .left-menu > li > a:hover,
html[data-theme-colors="sp"] .left-menu li a:hover,
html[data-theme-colors="sp"] #side-menu li a:hover {
    color: #0a95bb !important;
}

/* Sub-menu active states - SP theme */
html[data-theme-colors="sp"] .left-menu > li ul.sub-menu li.mm-active > a,
html[data-theme-colors="sp"] .left-menu .sub-menu li.active > a,
html[data-theme-colors="sp"] .left-menu .sub-menu li a.active,
html[data-theme-colors="sp"] #side-menu .sub-menu li.mm-active > a {
    color: #0a95bb !important;
}

/* Sidebar primary color elements - SP theme */
html[data-theme-colors="sp"] .sidebar-left .text-primary,
html[data-theme-colors="sp"] .sidebar-left .badge.bg-primary {
    color: #0a95bb !important;
}

/* Override any inline primary color in sidebar - SP theme */
html[data-theme-colors="sp"] .sidebar-left [style*="color"] a.active,
html[data-theme-colors="sp"] .sidebar-left .mm-active a,
html[data-theme-colors="sp"] #side-menu .mm-active a {
    color: #0a95bb !important;
}

/* Force --bs-primary variable for SP theme */
html[data-theme-colors="sp"] {
    --bs-primary: #0a95bb !important;
    --bs-primary-rgb: 10, 149, 187 !important;
}

/* Override card header primary - SP theme only */
[data-theme-colors="sp"] .card-header.bg-primary {
    background-color: #0a95bb !important;
}

/* Override table primary - SP theme only */
[data-theme-colors="sp"] .table-primary {
    background-color: rgba(10, 149, 187, 0.1) !important;
}

/* Override selection/highlight colors - SP theme only */
[data-theme-colors="sp"] ::selection {
    background-color: rgba(10, 149, 187, 0.3);
}

/* Override accordion active - SP theme only */
[data-theme-colors="sp"] .accordion-button:not(.collapsed) {
    color: #0a95bb !important;
    background-color: rgba(10, 149, 187, 0.1) !important;
}

[data-theme-colors="sp"] .accordion-button:focus {
    border-color: #0a95bb !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 149, 187, 0.25) !important;
}

/* Override spinner primary - SP theme only */
[data-theme-colors="sp"] .spinner-border.text-primary {
    color: #0a95bb !important;
}

/* Override breadcrumb active - SP theme only */
[data-theme-colors="sp"] .breadcrumb-item.active {
    color: #0a95bb;
}

/* Override close button focus - SP theme only */
[data-theme-colors="sp"] .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(10, 149, 187, 0.25) !important;
}

/* Override toast primary - SP theme only */
[data-theme-colors="sp"] .toast.bg-primary {
    background-color: #0a95bb !important;
}

/* Ensure white text on primary backgrounds - SP theme only */
[data-theme-colors="sp"] .bg-primary,
[data-theme-colors="sp"] .btn-primary,
[data-theme-colors="sp"] .badge.bg-primary,
[data-theme-colors="sp"] .list-group-item.active,
[data-theme-colors="sp"] .page-item.active .page-link,
[data-theme-colors="sp"] .nav-pills .nav-link.active {
    color: #ffffff !important;
}

/* ========================================
   Theme Color Picker - All Theme Variants
   Sidebar active colors for each theme
   Using html prefix for higher specificity
   ======================================== */

/* Default/Blue Theme (#556ee6) */
html[data-theme-colors="default"] {
    --bs-primary: #556ee6 !important;
    --bs-primary-rgb: 85, 110, 230 !important;
    --theme-color: #556ee6;
}

html[data-theme-colors="default"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="default"] .left-menu > li.mm-active > a,
html[data-theme-colors="default"] .left-menu li a.active,
html[data-theme-colors="default"] #side-menu > li.mm-active > a,
html[data-theme-colors="default"] #side-menu li.mm-active > a {
    color: #556ee6 !important;
    background-color: rgba(85, 110, 230, 0.1) !important;
}

html[data-theme-colors="default"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="default"] .left-menu > li > a:hover::before,
html[data-theme-colors="default"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="default"] #side-menu > li > a:hover::before,
html[data-theme-colors="default"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #556ee6 !important;
    background: #556ee6 !important;
}

html[data-theme-colors="default"] .left-menu li a:hover,
html[data-theme-colors="default"] #side-menu li a:hover {
    color: #556ee6 !important;
}

html[data-theme-colors="default"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="default"] .left-menu .sub-menu li a.active {
    color: #556ee6 !important;
}

/* Orange Theme (#fd7e14) */
html[data-theme-colors="orange"] {
    --bs-primary: #fd7e14 !important;
    --bs-primary-rgb: 253, 126, 20 !important;
    --theme-color: #fd7e14;
}

html[data-theme-colors="orange"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="orange"] .left-menu > li.mm-active > a,
html[data-theme-colors="orange"] .left-menu li a.active,
html[data-theme-colors="orange"] #side-menu > li.mm-active > a,
html[data-theme-colors="orange"] #side-menu li.mm-active > a {
    color: #fd7e14 !important;
    background-color: rgba(253, 126, 20, 0.1) !important;
}

html[data-theme-colors="orange"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="orange"] .left-menu > li > a:hover::before,
html[data-theme-colors="orange"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="orange"] #side-menu > li > a:hover::before,
html[data-theme-colors="orange"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #fd7e14 !important;
    background: #fd7e14 !important;
}

html[data-theme-colors="orange"] .left-menu li a:hover,
html[data-theme-colors="orange"] #side-menu li a:hover {
    color: #fd7e14 !important;
}

html[data-theme-colors="orange"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="orange"] .left-menu .sub-menu li a.active {
    color: #fd7e14 !important;
}

/* Sky Blue Theme (#0dcaf0) */
html[data-theme-colors="skyblue"] {
    --bs-primary: #0dcaf0 !important;
    --bs-primary-rgb: 13, 202, 240 !important;
    --theme-color: #0dcaf0;
}

html[data-theme-colors="skyblue"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="skyblue"] .left-menu > li.mm-active > a,
html[data-theme-colors="skyblue"] .left-menu li a.active,
html[data-theme-colors="skyblue"] #side-menu > li.mm-active > a,
html[data-theme-colors="skyblue"] #side-menu li.mm-active > a {
    color: #0dcaf0 !important;
    background-color: rgba(13, 202, 240, 0.1) !important;
}

html[data-theme-colors="skyblue"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="skyblue"] .left-menu > li > a:hover::before,
html[data-theme-colors="skyblue"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="skyblue"] #side-menu > li > a:hover::before,
html[data-theme-colors="skyblue"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #0dcaf0 !important;
    background: #0dcaf0 !important;
}

html[data-theme-colors="skyblue"] .left-menu li a:hover,
html[data-theme-colors="skyblue"] #side-menu li a:hover {
    color: #0dcaf0 !important;
}

html[data-theme-colors="skyblue"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="skyblue"] .left-menu .sub-menu li a.active {
    color: #0dcaf0 !important;
}

/* Purple Theme (#6f42c1) */
html[data-theme-colors="purple"] {
    --bs-primary: #6f42c1 !important;
    --bs-primary-rgb: 111, 66, 193 !important;
    --theme-color: #6f42c1;
}

html[data-theme-colors="purple"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="purple"] .left-menu > li.mm-active > a,
html[data-theme-colors="purple"] .left-menu li a.active,
html[data-theme-colors="purple"] #side-menu > li.mm-active > a,
html[data-theme-colors="purple"] #side-menu li.mm-active > a {
    color: #6f42c1 !important;
    background-color: rgba(111, 66, 193, 0.1) !important;
}

html[data-theme-colors="purple"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="purple"] .left-menu > li > a:hover::before,
html[data-theme-colors="purple"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="purple"] #side-menu > li > a:hover::before,
html[data-theme-colors="purple"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #6f42c1 !important;
    background: #6f42c1 !important;
}

html[data-theme-colors="purple"] .left-menu li a:hover,
html[data-theme-colors="purple"] #side-menu li a:hover {
    color: #6f42c1 !important;
}

html[data-theme-colors="purple"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="purple"] .left-menu .sub-menu li a.active {
    color: #6f42c1 !important;
}

/* Green Theme (#198754) */
html[data-theme-colors="green"] {
    --bs-primary: #198754 !important;
    --bs-primary-rgb: 25, 135, 84 !important;
    --theme-color: #198754;
}

html[data-theme-colors="green"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="green"] .left-menu > li.mm-active > a,
html[data-theme-colors="green"] .left-menu li a.active,
html[data-theme-colors="green"] #side-menu > li.mm-active > a,
html[data-theme-colors="green"] #side-menu li.mm-active > a {
    color: #198754 !important;
    background-color: rgba(25, 135, 84, 0.1) !important;
}

html[data-theme-colors="green"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="green"] .left-menu > li > a:hover::before,
html[data-theme-colors="green"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="green"] #side-menu > li > a:hover::before,
html[data-theme-colors="green"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #198754 !important;
    background: #198754 !important;
}

html[data-theme-colors="green"] .left-menu li a:hover,
html[data-theme-colors="green"] #side-menu li a:hover {
    color: #198754 !important;
}

html[data-theme-colors="green"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="green"] .left-menu .sub-menu li a.active {
    color: #198754 !important;
}

/* Pink Theme (#d63384) */
html[data-theme-colors="pink"] {
    --bs-primary: #d63384 !important;
    --bs-primary-rgb: 214, 51, 132 !important;
    --theme-color: #d63384;
}

html[data-theme-colors="pink"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="pink"] .left-menu > li.mm-active > a,
html[data-theme-colors="pink"] .left-menu li a.active,
html[data-theme-colors="pink"] #side-menu > li.mm-active > a,
html[data-theme-colors="pink"] #side-menu li.mm-active > a {
    color: #d63384 !important;
    background-color: rgba(214, 51, 132, 0.1) !important;
}

html[data-theme-colors="pink"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="pink"] .left-menu > li > a:hover::before,
html[data-theme-colors="pink"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="pink"] #side-menu > li > a:hover::before,
html[data-theme-colors="pink"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #d63384 !important;
    background: #d63384 !important;
}

html[data-theme-colors="pink"] .left-menu li a:hover,
html[data-theme-colors="pink"] #side-menu li a:hover {
    color: #d63384 !important;
}

html[data-theme-colors="pink"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="pink"] .left-menu .sub-menu li a.active {
    color: #d63384 !important;
}

/* SP Gold Theme (#F5B800) */
html[data-theme-colors="sp-gold"] {
    --bs-primary: #F5B800 !important;
    --bs-primary-rgb: 245, 184, 0 !important;
    --theme-color: #F5B800;
}

html[data-theme-colors="sp-gold"] .sidebar-left .left-menu li.mm-active > a,
html[data-theme-colors="sp-gold"] .left-menu > li.mm-active > a,
html[data-theme-colors="sp-gold"] .left-menu li a.active,
html[data-theme-colors="sp-gold"] #side-menu > li.mm-active > a,
html[data-theme-colors="sp-gold"] #side-menu li.mm-active > a {
    color: #D4A000 !important;
    background-color: rgba(245, 184, 0, 0.1) !important;
}

html[data-theme-colors="sp-gold"] .left-menu > li.mm-active > a::before,
html[data-theme-colors="sp-gold"] .left-menu > li > a:hover::before,
html[data-theme-colors="sp-gold"] #side-menu > li.mm-active > a::before,
html[data-theme-colors="sp-gold"] #side-menu > li > a:hover::before,
html[data-theme-colors="sp-gold"] .sidebar-left .left-menu > li.mm-active > a::before {
    background-color: #F5B800 !important;
    background: #F5B800 !important;
}

html[data-theme-colors="sp-gold"] .left-menu li a:hover,
html[data-theme-colors="sp-gold"] #side-menu li a:hover {
    color: #D4A000 !important;
}

html[data-theme-colors="sp-gold"] .left-menu .sub-menu li.mm-active > a,
html[data-theme-colors="sp-gold"] .left-menu .sub-menu li a.active {
    color: #D4A000 !important;
}

/* ========================================
   Button Primary Overrides for All Themes
   ======================================== */

[data-theme-colors="default"] .btn-primary {
    background-color: #556ee6 !important;
    border-color: #556ee6 !important;
}

[data-theme-colors="default"] .btn-primary:hover {
    background-color: #4458c9 !important;
    border-color: #4458c9 !important;
}

[data-theme-colors="orange"] .btn-primary {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

[data-theme-colors="orange"] .btn-primary:hover {
    background-color: #e96b02 !important;
    border-color: #e96b02 !important;
}

[data-theme-colors="skyblue"] .btn-primary {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

[data-theme-colors="skyblue"] .btn-primary:hover {
    background-color: #0aa2c0 !important;
    border-color: #0aa2c0 !important;
}

[data-theme-colors="purple"] .btn-primary {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}

[data-theme-colors="purple"] .btn-primary:hover {
    background-color: #5a32a3 !important;
    border-color: #5a32a3 !important;
}

[data-theme-colors="green"] .btn-primary {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

[data-theme-colors="green"] .btn-primary:hover {
    background-color: #146c43 !important;
    border-color: #146c43 !important;
}

[data-theme-colors="pink"] .btn-primary {
    background-color: #d63384 !important;
    border-color: #d63384 !important;
}

[data-theme-colors="pink"] .btn-primary:hover {
    background-color: #b02a6f !important;
    border-color: #b02a6f !important;
}

[data-theme-colors="sp-gold"] .btn-primary {
    background-color: #F5B800 !important;
    border-color: #F5B800 !important;
    color: #212529 !important;
}

[data-theme-colors="sp-gold"] .btn-primary:hover {
    background-color: #D4A000 !important;
    border-color: #D4A000 !important;
    color: #212529 !important;
}

/* ========================================
   Background Primary Overrides for All Themes
   ======================================== */

[data-theme-colors="default"] .bg-primary {
    background-color: #556ee6 !important;
}

[data-theme-colors="orange"] .bg-primary {
    background-color: #fd7e14 !important;
}

[data-theme-colors="skyblue"] .bg-primary {
    background-color: #0dcaf0 !important;
}

[data-theme-colors="purple"] .bg-primary {
    background-color: #6f42c1 !important;
}

[data-theme-colors="green"] .bg-primary {
    background-color: #198754 !important;
}

[data-theme-colors="pink"] .bg-primary {
    background-color: #d63384 !important;
}

[data-theme-colors="sp-gold"] .bg-primary {
    background-color: #F5B800 !important;
}

/* ========================================
   Text Primary Overrides for All Themes
   ======================================== */

[data-theme-colors="default"] .text-primary {
    color: #556ee6 !important;
}

[data-theme-colors="orange"] .text-primary {
    color: #fd7e14 !important;
}

[data-theme-colors="skyblue"] .text-primary {
    color: #0dcaf0 !important;
}

[data-theme-colors="purple"] .text-primary {
    color: #6f42c1 !important;
}

[data-theme-colors="green"] .text-primary {
    color: #198754 !important;
}

[data-theme-colors="pink"] .text-primary {
    color: #d63384 !important;
}

[data-theme-colors="sp-gold"] .text-primary {
    color: #D4A000 !important;
}

/* ========================================
   Link Colors for All Themes
   ======================================== */

[data-theme-colors="default"] a { color: #556ee6; }
[data-theme-colors="default"] a:hover { color: #4458c9; }

[data-theme-colors="orange"] a { color: #fd7e14; }
[data-theme-colors="orange"] a:hover { color: #e96b02; }

[data-theme-colors="skyblue"] a { color: #0dcaf0; }
[data-theme-colors="skyblue"] a:hover { color: #0aa2c0; }

[data-theme-colors="purple"] a { color: #6f42c1; }
[data-theme-colors="purple"] a:hover { color: #5a32a3; }

[data-theme-colors="green"] a { color: #198754; }
[data-theme-colors="green"] a:hover { color: #146c43; }

[data-theme-colors="pink"] a { color: #d63384; }
[data-theme-colors="pink"] a:hover { color: #b02a6f; }

[data-theme-colors="sp-gold"] a { color: #D4A000; }
[data-theme-colors="sp-gold"] a:hover { color: #B38900; }

/* ========================================
   Translation Tabs Active State Fix
   Ensures text is readable on active tab
   ======================================== */

/* Custom nav tabs - active state with white text - HIGH SPECIFICITY */
ul.nav.nav-tabs.nav-tabs-custom .nav-item .nav-link.active,
ul.nav.nav-tabs.nav-tabs-custom > li > a.nav-link.active,
.nav.nav-tabs.nav-tabs-custom .nav-link.active,
.card-body .nav-tabs-custom .nav-link.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

/* Inactive tabs should have darker text */
ul.nav.nav-tabs.nav-tabs-custom .nav-item .nav-link:not(.active),
ul.nav.nav-tabs.nav-tabs-custom > li > a.nav-link:not(.active),
.nav.nav-tabs.nav-tabs-custom .nav-link:not(.active),
.card-body .nav-tabs-custom .nav-link:not(.active) {
    color: #495057 !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

ul.nav.nav-tabs.nav-tabs-custom .nav-link:not(.active):hover,
.nav.nav-tabs.nav-tabs-custom .nav-link:not(.active):hover {
    color: #0a95bb !important;
    background-color: #e9ecef !important;
}

/* ========================================
   Sidebar Expand/Collapse Arrow Fix
   MetisMenu uses border-color for arrows
   ======================================== */

/* MetisMenu arrow uses border - override border-color NOT color */
.metismenu .has-arrow::after,
.sidebar-left .has-arrow::after,
#side-menu .has-arrow::after,
.left-menu .has-arrow::after {
    border-color: #6c757d !important;
}

/* When menu is expanded (mm-active), make arrow visible with contrast */
.metismenu .mm-active > .has-arrow::after,
.metismenu li.mm-active > a.has-arrow::after,
.sidebar-left li.mm-active > a.has-arrow::after,
#side-menu li.mm-active > a.has-arrow::after,
.left-menu li.mm-active > a.has-arrow::after,
#side-menu > li.mm-active > a.has-arrow::after {
    border-color: #0a95bb !important;
}

/* Hover state for arrows */
.metismenu .has-arrow:hover::after,
.sidebar-left .has-arrow:hover::after,
#side-menu .has-arrow:hover::after,
.left-menu .has-arrow:hover::after {
    border-color: #0a95bb !important;
}

/* Fix for mm-active menu items - ensure text contrast */
html[data-theme-colors="sp"] #side-menu li.mm-active > a,
html[data-theme-colors="sp"] .left-menu li.mm-active > a {
    color: #0a95bb !important;
    background-color: rgba(10, 149, 187, 0.1) !important;
}

/* Submenu text when parent is active */
html[data-theme-colors="sp"] #side-menu li.mm-active .sub-menu li a,
html[data-theme-colors="sp"] .left-menu li.mm-active .sub-menu li a {
    color: #545a6d !important;
}

html[data-theme-colors="sp"] #side-menu li.mm-active .sub-menu li a:hover,
html[data-theme-colors="sp"] .left-menu li.mm-active .sub-menu li a:hover,
html[data-theme-colors="sp"] #side-menu li.mm-active .sub-menu li.mm-active > a,
html[data-theme-colors="sp"] .left-menu li.mm-active .sub-menu li.mm-active > a {
    color: #0a95bb !important;
}



/* ========================================
   Service Page Hero Sections
   Content styling for dynamic hero areas
   ======================================== */

/* Hero content wrapper */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero HTML content styling - ensures readability on colored backgrounds */
.hero-html-content {
    color: inherit;
}

.hero-html-content h4,
.hero-html-content h5,
.hero-html-content h6 {
    color: inherit !important;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.hero-html-content h4:first-child,
.hero-html-content h5:first-child {
    margin-top: 0;
}

.hero-html-content p {
    color: inherit;
    opacity: 0.95;
    margin-bottom: 0.75rem;
}

.hero-html-content ul,
.hero-html-content ol {
    color: inherit;
    opacity: 0.95;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.hero-html-content li {
    margin-bottom: 0.35rem;
}

.hero-html-content strong {
    color: inherit;
    font-weight: 600;
}

.hero-html-content a {
    color: inherit;
    text-decoration: underline;
}

.hero-html-content a:hover {
    opacity: 0.85;
}

/* Responsive adjustments for hero sections */
@media (max-width: 991.98px) {
    .hero-content {
        min-height: auto !important;
    }
}

/* ========================================
   Nav Tabs - Better contrast for active state
   ======================================== */

/* Regular nav-tabs inside cards - filled active state */
[data-theme-colors="sp"] .card .nav-tabs .nav-link.active,
[data-theme-colors="sp"] .card-body .nav-tabs .nav-link.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb #0a95bb transparent !important;
    color: #ffffff !important;
}

/* Ensure inactive tabs have good contrast */
[data-theme-colors="sp"] .card .nav-tabs .nav-link:not(.active),
[data-theme-colors="sp"] .card-body .nav-tabs .nav-link:not(.active) {
    color: #495057 !important;
    background-color: transparent;
}

[data-theme-colors="sp"] .card .nav-tabs .nav-link:not(.active):hover,
[data-theme-colors="sp"] .card-body .nav-tabs .nav-link:not(.active):hover {
    color: #0a95bb !important;
    border-color: #e9ecef #e9ecef #dee2e6;
}

/* ========================================
   Form Select / Dropdown Text Color Fix
   Ensures dropdown text is always readable
   Works with both light and dark modes
   ======================================== */

/* Standard Bootstrap form-select - inherit from form-control */
.form-select,
select.form-control {
    color: var(--bs-body-color, #212529) !important;
    background-color: var(--bs-tertiary-bg, #eff2f7) !important;
}

.form-select option,
select.form-control option {
    color: #212529 !important;
    background-color: #ffffff !important;
}

/* Select2 container - match form-control styling */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--bs-tertiary-bg, #eff2f7) !important;
    border-color: var(--bs-border-color, #ced4da) !important;
}

/* Select2 dropdown text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color, #212529) !important;
}

.select2-dropdown {
    background-color: var(--bs-body-bg, #fff) !important;
    border-color: var(--bs-border-color, #ced4da) !important;
}

.select2-container--default .select2-results__option,
.select2-search__field {
    color: var(--bs-body-color, #212529) !important;
}

/* Select2 highlighted option */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--bs-primary, #0a95bb) !important;
    color: #ffffff !important;
}

/* Select2 selected option (currently chosen value in the list) */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--bs-primary-rgb, 10, 149, 187), 0.15) !important;
    color: var(--bs-body-color, #212529) !important;
}

.select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: var(--bs-primary, #0a95bb) !important;
    color: #ffffff !important;
}

/* Unselected, non-highlighted options: never let ambient rules hide the label. */
.select2-container--default .select2-results__option,
.select2-container--default .select2-results__option--selectable,
.select2-dropdown .select2-results__option,
.select2-search__field {
    color: var(--bs-body-color, #212529) !important;
}

/* Select2 dropdown panel (fix dark-mode contrast too) */
.select2-dropdown,
.select2-container--default .select2-dropdown {
    background-color: var(--bs-body-bg, #fff) !important;
    border-color: var(--bs-border-color, #ced4da) !important;
}

[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--bs-body-bg, #1a1d21) !important;
    color: var(--bs-body-color, #e9ecef) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option,
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selectable,
[data-bs-theme="dark"] .select2-search__field {
    color: var(--bs-body-color, #e9ecef) !important;
}

/* Bootstrap dropdown menu items */
.dropdown-menu,
.dropdown-item {
    color: #212529;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #212529;
    background-color: #f8f9fa;
}

/* ========================================
   Button Text Color Fix
   Ensures all button text is always readable
   ======================================== */

/* Secondary button */
.btn-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #ffffff !important;
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

/* Outline secondary */
.btn-outline-secondary {
    color: #495057 !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Outline info - darker text for visibility */
.btn-outline-info {
    color: #0a7c8c !important;
    border-color: #17a2b8 !important;
    background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

/* Outline primary - darker text for visibility */
.btn-outline-primary {
    color: #0056b3 !important;
    border-color: #007bff !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #ffffff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

/* Outline success - darker text for visibility */
.btn-outline-success {
    color: #1e7e34 !important;
    border-color: #28a745 !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    color: #ffffff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .btn-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary.active {
    color: #ffffff !important;
    background-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-info {
    color: #5bc0de !important;
    border-color: #17a2b8 !important;
}

[data-bs-theme="dark"] .btn-outline-info:hover,
[data-bs-theme="dark"] .btn-outline-info.active {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #6ea8fe !important;
    border-color: #007bff !important;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary.active {
    color: #ffffff !important;
    background-color: #007bff !important;
}

[data-bs-theme="dark"] .btn-outline-success {
    color: #75b798 !important;
    border-color: #28a745 !important;
}

[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-success.active {
    color: #ffffff !important;
    background-color: #28a745 !important;
}

/* ============================================================
   UNIVERSAL BUTTON + BADGE CONTRAST FIX
   Bootstrap 5.3 ships .btn-primary with --bs-btn-color: #000
   (hardcoded, computed via color-contrast on the build-time
   --bs-primary). When the user switches theme color at runtime,
   --bs-primary changes but --bs-btn-* variables stay frozen, so
   the button text+bg ended up unreadable on several theme variants.

   Force btn-primary to follow --bs-primary (bg) + always-white text,
   and mirror for badge/alert/link-like primary coloring. Applies in
   every theme-colors mode and every Bootstrap color scheme.
   ============================================================ */
.btn-primary,
[data-bs-theme="light"] .btn-primary,
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #ffffff !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-color: #ffffff !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover { filter: brightness(0.92); }

/* Solid primary backgrounds across contexts always need white text.
   Exclude the Bootstrap opacity utilities — .bg-primary.bg-opacity-10
   (and siblings) tint the fill toward white, so text-primary stays on
   top of a near-white surface and needs to keep its dark colour. */
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75),
.badge.bg-primary,
.alert-primary,
.list-group-item.active,
.page-item.active .page-link,
.nav-pills .nav-link.active {
    color: #ffffff !important;
}

/* Subtle primary variants keep dark-on-light text (Bootstrap default
   picks #000 from --bs-primary-text-emphasis). Force readable contrast
   without hardcoding a color so each theme keeps its own emphasis tint. */
.bg-primary-subtle,
.text-bg-primary-subtle {
    color: var(--bs-primary-text-emphasis, var(--bs-emphasis-color, #212529)) !important;
}

/* Outline primary: border + text follow --bs-primary so theme switches
   recolor the button correctly. */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
}

/* ============================================================
   BADGE CONTRAST — make sure no .badge ends up color-less.
   Some member-badge classes were defined for Premium only; standard
   member fell through to an undefined class (white-on-white).
   ============================================================ */
.badge-standard-member {
    background-color: var(--sp-teal, #0a95bb) !important;
    color: #ffffff !important;
}

/* Bootstrap semantic .bg-* badges: lock text color per variant so a
   theme switch or dark-mode flip can't wipe them out.
   Exclude opacity utilities — bg-*.bg-opacity-10 is a light tint fill,
   so the original dark-emphasis text should stay. */
.badge.bg-warning:not([class*="bg-opacity-"]),
.badge.bg-info:not([class*="bg-opacity-"]),
.badge.bg-light:not([class*="bg-opacity-"]) {
    color: #212529 !important;
}

.badge.bg-primary:not([class*="bg-opacity-"]),
.badge.bg-secondary:not([class*="bg-opacity-"]),
.badge.bg-success:not([class*="bg-opacity-"]),
.badge.bg-danger:not([class*="bg-opacity-"]),
.badge.bg-dark:not([class*="bg-opacity-"]) {
    color: #ffffff !important;
}

/* Subtle badge variants are light fills + emphasis text */
.badge.bg-primary-subtle   { color: var(--bs-primary-text-emphasis,   #084298) !important; }
.badge.bg-secondary-subtle { color: var(--bs-secondary-text-emphasis, #41464b) !important; }
.badge.bg-success-subtle   { color: var(--bs-success-text-emphasis,   #0f5132) !important; }
.badge.bg-info-subtle      { color: var(--bs-info-text-emphasis,      #055160) !important; }
.badge.bg-warning-subtle   { color: var(--bs-warning-text-emphasis,   #664d03) !important; }
.badge.bg-danger-subtle    { color: var(--bs-danger-text-emphasis,    #842029) !important; }

/* Dark-mode equivalents: subtle pills get lighter text on darker fills. */
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .badge.bg-danger-subtle {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* ============================================================
   Module help panel
   Collapsible tip card rendered at the top of every admin page.
   Title+body come from UiTranslations (@T) so the copy follows
   the admin's active language.
   ============================================================ */
.sp-module-help {
    border-left: 3px solid var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.sp-module-help .card-header {
    background-color: transparent;
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.15);
}

.sp-module-help .sp-module-help-toggle {
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.sp-module-help .sp-module-help-toggle:hover {
    color: var(--bs-primary) !important;
    opacity: 0.75;
}

.sp-module-help .sp-module-help-chevron {
    transition: transform 200ms ease-in-out;
    font-size: 1.25rem;
    line-height: 1;
}

.sp-module-help.is-collapsed .sp-module-help-chevron {
    transform: rotate(180deg);
}

.sp-module-help.is-collapsed .sp-module-help-body {
    display: none;
}

.sp-module-help .sp-module-help-body p:last-child,
.sp-module-help .sp-module-help-body ul:last-child {
    margin-bottom: 0;
}

[data-bs-theme="dark"] .sp-module-help {
    background-color: rgba(var(--bs-primary-rgb), 0.10);
}

/* ============================================================
   DARK-MODE READABILITY SWEEP for elements we add translated text
   into (card headers / lang-aware cards / validation summaries).
   ============================================================ */
[data-bs-theme="dark"] .alert-danger {
    color: #f1aeb5 !important;
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

[data-bs-theme="dark"] .sp-lang-aware-card .card-header.bg-primary.bg-opacity-10 {
    background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
}

[data-bs-theme="dark"] .flag-icon {
    filter: brightness(1.05);
}

/* ============================================================
   CRITICAL: restore --bs-bg-opacity behaviour for .bg-primary
   Earlier theme-scoped overrides (`[data-theme-colors="X"] .bg-primary
   { background-color: #SOLID !important }`) ignored the Bootstrap
   --bs-bg-opacity variable, which broke the .bg-opacity-10 utility —
   card headers using `bg-primary bg-opacity-10` rendered as a SOLID
   primary fill, so the sibling `text-primary` heading (same hue)
   became invisible.

   Force every `bg-primary` paired with an opacity utility back onto
   rgba() with the CSS variable. Chained 3-class selector (0,3,0) wins
   over the theme override (0,2,0) even without the !important.
   ============================================================ */
.bg-primary.bg-opacity-10,
.bg-primary.bg-opacity-25,
.bg-primary.bg-opacity-50,
.bg-primary.bg-opacity-75,
.card-header.bg-primary.bg-opacity-10,
.card-header.bg-primary.bg-opacity-25,
.card-header.bg-primary.bg-opacity-50,
.card-header.bg-primary.bg-opacity-75 {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

/* ============================================================
   Low-contrast text fix on TINTED primary backgrounds.
   Markup like `.badge.bg-primary.bg-opacity-10.text-primary` paints
   the same hue at 10% on top of... itself — the label ends up nearly
   invisible. Swap the foreground for a darker emphasis colour (or a
   lighter one in dark mode) while preserving the theme's hue.
   ============================================================ */
.badge.bg-primary[class*="bg-opacity-"].text-primary,
.badge.bg-primary[class*="bg-opacity-"] .text-primary,
.bg-primary[class*="bg-opacity-"].text-primary,
.bg-primary[class*="bg-opacity-"] .text-primary {
    color: color-mix(in srgb, var(--bs-primary) 65%, #000) !important;
}

[data-bs-theme="dark"] .badge.bg-primary[class*="bg-opacity-"].text-primary,
[data-bs-theme="dark"] .badge.bg-primary[class*="bg-opacity-"] .text-primary,
[data-bs-theme="dark"] .bg-primary[class*="bg-opacity-"].text-primary,
[data-bs-theme="dark"] .bg-primary[class*="bg-opacity-"] .text-primary {
    color: color-mix(in srgb, var(--bs-primary) 55%, #fff) !important;
}

/* Safari < 16.2 fallback (no color-mix): use a static darker shade per
   theme so the label is still readable without the calc. */
@supports not (color: color-mix(in srgb, red, blue)) {
    [data-theme-colors="sp"]      .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #005c6a !important; }
    [data-theme-colors="sp-gold"] .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #8a6600 !important; }
    [data-theme-colors="default"] .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #2a3a8a !important; }
    [data-theme-colors="orange"]  .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #8a4200 !important; }
    [data-theme-colors="skyblue"] .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #07698a !important; }
    [data-theme-colors="purple"]  .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #3f2570 !important; }
    [data-theme-colors="green"]   .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #0a4a2f !important; }
    [data-theme-colors="pink"]    .badge.bg-primary[class*="bg-opacity-"].text-primary { color: #7a1a4c !important; }
}

/* ============================================================
   FORCED BRAND PRIMARY (Sunparadise Blue · #0a95bb)
   --------------------------------------------------------------
   Daniel's Round-6 feedback: the primary brand colour must be
   #0a95bb everywhere. The legacy theme picker (default Bootstrap
   indigo/violet, orange, green, pink …) was leaving stale values
   in localStorage that bled through onto the welcome banner,
   download buttons and other primary surfaces. We now force the
   brand colour with !important so cached selections cannot win.
   This block must remain the LAST entry in the file.
   ============================================================ */
:root,
[data-theme-colors],
[data-theme-colors="sp"],
[data-theme-colors="sp-gold"],
[data-theme-colors="default"],
[data-theme-colors="orange"],
[data-theme-colors="skyblue"],
[data-theme-colors="purple"],
[data-theme-colors="green"],
[data-theme-colors="pink"] {
    --bs-primary: #0a95bb !important;
    --bs-primary-rgb: 10, 149, 187 !important;
    --bs-link-color: #0a95bb !important;
    --bs-link-color-rgb: 10, 149, 187 !important;
    --bs-link-hover-color: #07748f !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.bg-primary,
.bg-primary.bg-gradient {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.show,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: #07748f !important;
    border-color: #07748f !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #0a95bb !important;
    border-color: #0a95bb !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

.text-primary,
a.text-primary,
a.text-primary:hover,
a.text-primary:focus {
    color: #0a95bb !important;
}

.border-primary {
    border-color: #0a95bb !important;
}

.bg-primary-subtle {
    background-color: rgba(10, 149, 187, 0.15) !important;
}

.text-primary-emphasis {
    color: #07748f !important;
}

.link-primary {
    color: #0a95bb !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #07748f !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

.page-item.active .page-link {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

.form-check-input:checked {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #0a95bb !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 149, 187, 0.25) !important;
}

.progress-bar {
    background-color: #0a95bb !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #0a95bb !important;
}

.list-group-item.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
}

.alert-primary {
    background-color: rgba(10, 149, 187, 0.15) !important;
    border-color: rgba(10, 149, 187, 0.4) !important;
    color: #07748f !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* ============================================================
   FORCED BRAND PRIMARY — Bootstrap "info" mapping
   --------------------------------------------------------------
   The custom Bootstrap palette in this project ships --bs-info as
   #7588de (a violet/lila), which made every bg-info / btn-info /
   text-info chip look purple — including the "Coaching" badge and
   the "What to expect?" card header on the ServiceRequest pages.
   Daniel's "no purple anywhere" rule means we re-map info to the
   brand blue, including its dark-mode variant. Status colours
   (success / warning / danger) are intentionally NOT overridden —
   they stay semantic.
   ============================================================ */
:root,
[data-theme-colors],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-info: #0a95bb !important;
    --bs-info-rgb: 10, 149, 187 !important;
    --bs-info-text-emphasis: #07748f !important;
    --bs-info-bg-subtle: rgba(10, 149, 187, 0.15) !important;
    --bs-info-border-subtle: rgba(10, 149, 187, 0.4) !important;
}

.bg-info,
.bg-info.bg-gradient,
.text-bg-info {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.show {
    background-color: #07748f !important;
    border-color: #07748f !important;
    color: #ffffff !important;
}

.btn-outline-info {
    color: #0a95bb !important;
    border-color: #0a95bb !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

.text-info,
a.text-info,
a.text-info:hover,
a.text-info:focus {
    color: #0a95bb !important;
}

.border-info {
    border-color: #0a95bb !important;
}

.bg-info-subtle {
    background-color: rgba(10, 149, 187, 0.15) !important;
}

.alert-info {
    background-color: rgba(10, 149, 187, 0.15) !important;
    border-color: rgba(10, 149, 187, 0.4) !important;
    color: #07748f !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: #0a95bb !important;
    color: #ffffff !important;
}

/* ============================================================
   Subtle / soft surfaces — keep dark-on-light text readable.
   On dark mode the brand colour stays unchanged but text shifts
   to a lighter shade for contrast.
   ============================================================ */
.bg-primary-subtle .card-title,
.card-header.bg-primary-subtle,
.bg-info-subtle .card-title,
.card-header.bg-info-subtle {
    color: #07748f !important;
}

[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-info,
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-info {
    background-color: #0a95bb !important;
    border-color: #0a95bb !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .bg-primary-subtle,
[data-bs-theme="dark"] .bg-info-subtle {
    background-color: rgba(10, 149, 187, 0.25) !important;
    color: #cfe9f1 !important;
}

[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-info {
    color: #4dc4d6 !important;
}

/* ============================================================
   Solid primary / info backgrounds — keep heading text white
   --------------------------------------------------------------
   On a card-header.bg-primary text-white, Bootstrap's default
   --bs-card-title-color was beating .text-white, so the title
   ("What to expect?", "Coaching Request Details", …) ended up
   dark on the brand-blue header. Force descendant headings to
   inherit white in light mode; the *-subtle blocks above keep
   the dark colour for subtle (light) backgrounds.
   ============================================================ */
.bg-primary,
.bg-info,
.card-header.bg-primary,
.card-header.bg-info {
    color: #ffffff !important;
}

.bg-primary .card-title,
.bg-info .card-title,
.card-header.bg-primary .card-title,
.card-header.bg-info .card-title,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-info h1, .bg-info h2, .bg-info h3,
.bg-info h4, .bg-info h5, .bg-info h6,
.card-header.bg-primary h1, .card-header.bg-primary h2,
.card-header.bg-primary h3, .card-header.bg-primary h4,
.card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-info h1, .card-header.bg-info h2,
.card-header.bg-info h3, .card-header.bg-info h4,
.card-header.bg-info h5, .card-header.bg-info h6 {
    color: #ffffff !important;
}

/* In dark mode the same selectors keep white text — the brand
   blue is the same hue regardless of theme, so contrast is
   identical to light mode. */
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-info,
[data-bs-theme="dark"] .card-header.bg-primary,
[data-bs-theme="dark"] .card-header.bg-info,
[data-bs-theme="dark"] .bg-primary .card-title,
[data-bs-theme="dark"] .bg-info .card-title,
[data-bs-theme="dark"] .card-header.bg-primary .card-title,
[data-bs-theme="dark"] .card-header.bg-info .card-title {
    color: #ffffff !important;
}

/* ============================================================
   Card-title CSS variable override
   --------------------------------------------------------------
   The previous selector was already !important, but Bootstrap's
   .card-title pulls its colour from --bs-card-title-color (which
   inherits from --bs-body-color, i.e. dark). When the variable
   wins, even an !important class colour can lose to a more local
   variable assignment. Override the variable itself on solid
   primary / info card-headers so card-title resolves to white
   without us needing to repeat selectors in every theme.
   ============================================================ */
.card-header.bg-primary,
.card-header.bg-info,
.bg-primary > .card-header,
.bg-info > .card-header {
    --bs-card-title-color: #ffffff !important;
    --bs-card-cap-color: #ffffff !important;
    --bs-card-subtitle-color: #ffffff !important;
    --bs-heading-color: #ffffff !important;
    color: #ffffff !important;
}

.card-header.bg-primary > *,
.card-header.bg-info > *,
.card-header.bg-primary .card-title,
.card-header.bg-info .card-title,
.card-header.bg-primary .card-subtitle,
.card-header.bg-info .card-subtitle {
    color: #ffffff !important;
}