/* ========================================= */
/* COLORS.CSS - COLOR SCHEME & THEMING */
/* ========================================= */

/* ========================================= */
/* CSS CUSTOM PROPERTIES & ROOT VARIABLES */
/* ========================================= */

:root {
    /* Primary Color Palette */
    --primary-color: #D9E9B8;
    --accent-color: #07242D;
    --tertiary-color: #5e0b1b;
    /* Bootstrap Override Variables */
    --bs-primary: #D9E9B8 !important;
    --bs-secondary: #74788d !important;
    --bs-accent: #07242D !important;
    --bs-tertiary: #5e0b1b !important;
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #07242D 0%, #D9E9B8 100%);
    --gradient-accent: linear-gradient(135deg, #07242D 0%, #5e0b1b 100%);
    --gradient-tertiary: linear-gradient(135deg, #5e0b1b 0%, #7d0e23 100%);
    /* Status Colors */
    --color-success: #7CB342;
    --color-warning: #FF8F00;
    --color-danger: #C62828;
    --color-info: #1976D2;
    /* Layout Colors */
    --bg-primary: #F5F6F8;
    --bg-secondary: #f8f9fa;
    --bg-card: #FFFFFF;
    --text-primary: #07242D;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    /* Border Colors */
    --border-color: #e9ecef;
    --border-primary: var(--primary-color);
    --border-accent: var(--accent-color);
    --primary-pastel-color: #C4D89A; /* deeper sage pastel */
    --secondary-pastel-color: #E9A7A7; /* richer blush pastel */
    --accent-pastel-color: #9FC9E6; /* stronger sky pastel */
    --primary-wash: #F0F8E4; /* slightly deeper light sage for base */
}

/* ========================================= */
/* LIGHT THEME (DEFAULT) */
/* ========================================= */

body {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.page-content {
    background-color: var(--bg-primary);
}

.card {
    background: var(--bg-card);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

.modal-title h1,
.modal-title h2,
.modal-title h3,
.modal-title h4,
.modal-title h5,
.modal-title h6, .modal-title {
    color: white;
}

p, strong {
    color: var(--text-secondary);
}

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

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

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

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

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

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

.text-default {
    color: var(--primary-color);
}

.text-tertiary {
    color: var(--tertiary-color);
}

.required-text {
    color: var(--tertiary-color);
}

a {
    color: var(--accent-color);
}

    a:hover {
        color: var(--tertiary-color);
    }

/* ========================================= */
/* CARD COLORS */
/* ========================================= */
.info-item, .info-item strong {
    color: rgba(255,255,255,0.9) !important;
}

.card-header {
    background: var(--primary-color);
    color: var(--accent-color);
}

    .card-header:first-child {
        background-color: var(--primary-color);
        color: var(--accent-color);
    }

.content-card {
    background: var(--bg-card);
    border-color: var(--primary-color);
}

.content-body::before {
    background: var(--gradient-primary);
}

.content-text {
    color: var(--text-secondary);
}

    .content-text h1,
    .content-text h2,
    .content-text h3,
    .content-text h4,
    .content-text h5,
    .content-text h6 {
        color: var(--accent-color);
    }

    .content-text blockquote {
        border-left-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(217, 233, 184, 0.1), rgba(217, 233, 184, 0.05));
        color: var(--accent-color);
    }

    .content-text code {
        background: rgba(7, 36, 45, 0.1);
        color: var(--accent-color);
    }

    .content-text pre {
        background: rgba(7, 36, 45, 0.05);
        border-color: rgba(7, 36, 45, 0.1);
    }

        .content-text pre::before {
            background: var(--gradient-primary);
        }

.content-footer {
    background: var(--bg-secondary);
}

/* ========================================= */
/* BUTTON COLORS */
/* ========================================= */
.btn-primary {
    /* Default state */
    --bs-btn-bg: #D9E9B8;
    --bs-btn-border-color: #D9E9B8;
    --bs-btn-color: #07242D;
    /* Hover state */
    --bs-btn-hover-bg: #c8d6a3;
    --bs-btn-hover-border-color: #c8d6a3;
    --bs-btn-hover-color: #07242D;
    /* Focus state */
    --bs-btn-focus-bg: #c8d6a3;
    --bs-btn-focus-border-color: #c8d6a3;
    --bs-btn-focus-color: #07242D;
    --bs-btn-focus-shadow-rgb: 184, 198, 147; /* RGB of #b8c693 */
    /* Active/Pressed state */
    --bs-btn-active-bg: #b8c693;
    --bs-btn-active-border-color: #b8c693;
    --bs-btn-active-color: #07242D;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    /* Disabled state */
    --bs-btn-disabled-bg: #D9E9B8;
    --bs-btn-disabled-border-color: #D9E9B8;
    --bs-btn-disabled-color: #07242D;
    --bs-btn-disabled-opacity: 0.65;
}
/* For secondary/accent buttons */
.btn-secondary {
    --bs-btn-bg: #07242D;
    --bs-btn-border-color: #07242D;
    --bs-btn-hover-bg: #051a20;
    --bs-btn-active-bg: #5e0b1b; /* Your tertiary */
    --bs-btn-color: #D9E9B8;
}

/* Secondary Buttons */
.btn-secondary {
    color: white;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: white;
        background-color: #0a2d39;
        border-color: #0a2d39;
        box-shadow: 0 4px 8px rgba(7, 36, 45, 0.3);
    }

    .btn-secondary:active,
    .btn-secondary.active {
        color: white;
        background-color: #052028;
        border-color: #052028;
    }

    .btn-secondary:disabled,
    .btn-secondary.disabled {
        color: white;
        background-color: #4a6b75;
        border-color: #4a6b75;
    }

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--bs-btn-active-bg);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color) !important;
    background: transparent;
}

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

    .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(7, 36, 45, 0.5);
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        color: white;
        background: var(--accent-color);
        border-color: var(--accent-color);
    }

.btn-outline-secondary {
    color: var(--accent-color);
    border-color: var(--primary-color) !important;
    background: transparent;
}

    .btn-outline-secondary:hover {
        color: var(--accent-color);
        background-color: var(--primary-color);
        border-color: var(--primary-color) !important;
    }


/* Default Buttons */
.btn-default {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border-color: var(--primary-color);
}

    .btn-default:hover {
        color: white !important;
        background: linear-gradient(135deg, #d7ebab 0%, var(--accent-color) 100%) !important;
        border-color: var(--accent-color) !important;
    }

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

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

.btn-outline-default {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-outline-default:hover {
        color: white;
        background-color: var(--primary-color);
        border-color: var(--accent-color);
    }

    .btn-outline-default:focus {
        box-shadow: 0 0 0 0.2rem rgba(217, 233, 184, 0.5);
    }

    .btn-outline-default:active,
    .btn-outline-default.active {
        color: white;
        background: var(--gradient-primary);
        border-color: var(--accent-color);
    }

    .btn-outline-default:disabled,
    .btn-outline-default.disabled {
        color: #84caf3;
        background-color: transparent;
        border-color: #84caf3;
    }

/* Status Buttons */
.btn-success {
    color: white;
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

    .btn-success:hover {
        color: white;
        background-color: #689F38;
        border-color: #689F38;
        box-shadow: 0 4px 8px rgba(124, 179, 66, 0.3);
    }

.btn-outline-success {
    color: var(--color-success);
    border-color: var(--color-success) !important;
}

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

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

    .btn-warning:hover {
        color: white;
        background-color: #F57C00;
        border-color: #F57C00;
        box-shadow: 0 4px 8px rgba(255, 143, 0, 0.3);
    }

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning) !important;
}

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

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

    .btn-danger:hover {
        color: white;
        background-color: #B71C1C;
        border-color: #B71C1C;
        box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
    }

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger) !important;
}

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

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

    .btn-info:hover {
        color: white;
        background-color: #1565C0;
        border-color: #1565C0;
        box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
    }

.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info) !important;
}

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

.btn-light {
    color: var(--primary-color);
}

/* ========================================= */
/* FORM COLORS */
/* ========================================= */

.form-label {
    color: var(--text-primary);
}

.form-control {
    border-color: var(--border-color);
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(217, 233, 184, 0.25);
    }

.form-check-input {
    border-color: var(--primary-color);
}

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

    .form-check-input[type="checkbox"]:indeterminate {
        background-color: var(--accent-color);
        border-color: var(--primary-color);
    }

    .form-check-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(217, 233, 184, 0.25);
    }

.select2.bg-secondary + span > span > span {
    background-color: var(--bg-secondary);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--text-secondary);
}

/* ========================================= */
/* NAVIGATION COLORS */
/* ========================================= */

.nav-link {
    color: #F7E035;
    font-weight: bold;
    border: 1px solid #afafaf;
    background-color: #f2f2f2;
}

    .nav-link:hover {
        color: var(--tertiary-color);
    }

.nav-tabs-custom .nav-item .nav-link.active {
    border-bottom-color: var(--primary-color);
    color: var(--accent-color);
}

.nav-tabs-custom .nav-item .nav-link::after {
    background: var(--gradient-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--accent-color);
    background: var(--gradient-primary);
    border: 1px solid var(--accent-color);
}

.nav-pills > li > a,
.nav-tabs > li > a {
    color: #afafaf;
    font-weight: 600;
}

.nav-right {
    border-right: 0px !important;
}

.nav-left {
    border-left: 0px !important;
}
/* Sidebar Default Link Styles */
.mm-active {
    color: var(--accent-color) !important
}

#sidebar-menu ul li a {
    color: var(--text-primary);
}

    #sidebar-menu ul li a i {
        color: var(--text-primary);
    }

    /* Active Leaf Link (Exact match) */
    #sidebar-menu ul li a.active {
        background-color: var(--accent-color) !important;
        color: white !important;
    }

        #sidebar-menu ul li a.active i {
            color: white !important;
        }

        #sidebar-menu ul li a.active span {
            color: white !important;
        }

    /* Parent .has-arrow items (should not have background even if mm-active) */
    #sidebar-menu ul li a.has-arrow.mm-active {
        background-color: transparent !important;
        color: var(--text-primary) !important;
    }

        #sidebar-menu ul li a.has-arrow.mm-active i {
            color: var(--text-primary) !important;
        }

body[data-sidebar-size="sm"] #sidebar-menu ul li a.has-arrow.mm-active {
    background-color: var(--bs-sidebar-menu-item-active-bg-color) !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    width: 100% !important;
}
/* Optionally, slightly highlight expanded parent arrow */
#sidebar-menu ul li a.has-arrow[aria-expanded="true"] {
    color: var(--accent-color);
    font-weight: 500;
}

/* Sub-menu links */
#sidebar-menu ul li ul.sub-menu li a {
    color: var(--text-primary);
}

    #sidebar-menu ul li ul.sub-menu li a i {
        color: var(--text-primary);
    }

/* Optional: dark-bar section styles (if you have sidebar sections like dividers) */
#sidebar-menu ul li.mm-active.dark-bar > a {
    background-color: var(--accent-color);
    color: white;
}

    #sidebar-menu ul li.mm-active.dark-bar > a i {
        color: white;
    }

    #sidebar-menu ul li.mm-active.dark-bar > a.active {
        background-color: var(--accent-color) !important;
        color: white !important;
    }

        #sidebar-menu ul li.mm-active.dark-bar > a.active span {
            color: white !important;
        }

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: var(--accent-color);
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    color: var(--accent-color);
}

.mm-active > a {
    background-color: #f2f2f2;
    color: var(--accent-color) !important;
}

    .mm-active > a i {
        color: var(--accent-color) !important;
    }
/* ========================================= */
/* BADGE COLORS */
/* ========================================= */
.badge-primary {
    color: var(--accent-color);
    background: var(--gradient-primary);
}

.badge-secondary {
    color: white;
    background: var(--gradient-accent);
}

.badge-success {
    color: white;
    background-color: var(--color-success);
}

.badge-danger {
    color: white;
    background-color: var(--color-danger);
}

.badge-warning {
    color: white;
    background-color: var(--color-warning);
}

.badge-info {
    color: white;
    background-color: var(--color-info);
}

.badge-light {
    color: var(--accent-color);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.badge-dark {
    color: white;
    background: linear-gradient(135deg, var(--accent-color) 0%, #000 100%);
}

/* Video/Document Badges */
.badge-video {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

.badge-document {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

/* ========================================= */
/* BACKGROUND COLORS */
/* ========================================= */

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

.bg-secondary {
    background-color: var(--accent-color) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
    color: white !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
    color: white !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
    color: white !important;
}

.bg-info {
    background-color: var(--color-info) !important;
    color: white !important;
}

.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-secondary {
    background: var(--gradient-accent) !important;
}

.bg-gradient-tertiary {
    background: var(--gradient-tertiary) !important;
}

.bg-gradient-success {
    background-color: var(--color-success) !important;
}

.bg-gradient-warning {
    background-color: var(--color-warning) !important;
}

.bg-gradient-danger {
    background-color: var(--color-danger) !important;
}

.bg-gradient-info {
    background-color: var(--color-info) !important;
}

/* ========================================= */
/* PAGINATION COLORS */
/* ========================================= */

.page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: var(--accent-color);
    color: white;
}

.pagination-modern .page-link {
    border-color: var(--primary-color);
    color: var(--accent-color);
}

.pagination-modern .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pagination-modern .page-link:hover {
    background: var(--primary-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ========================================= */
/* HEADER COLORS */
/* ========================================= */

.page-header,
.news-header,
.ebooks-header,
.podcasts-header,
.training-header,
.dashboard-header {
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm0 0c0 11.046 8.954 20 20 20s20-8.954 20-20-8.954-20-20-20-20 8.954-20 20z'/%3E%3C/g%3E%3C/svg%3E") repeat, var(--gradient-primary);
    color: white;
}

.page-title, .dashboard-title {
    color: white;
}

.page-subtitle, .dashboard-subtitle {
    color: white;
}

.page-legend {
    color: #7B8190;
}

.stat-item {
    color: white;
}

.text-banner {
    background-color: #F7E035;
    border: solid #B9D9EA 5px;
    color: var(--accent-color);
}

.banner-icon {
    color: #B9D9EA;
}

.podcast-hero {
    background: var(--gradient-primary);
    color: white;
}
/* ========================================= */
/* MEDIA COMPONENT COLORS */
/* ========================================= */

/* News Articles */
.news-article {
    background: var(--bg-card);
}

    .news-article:hover {
        border-color: var(--primary-color);
    }

    .news-article.featured {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    }

.article-title {
    color: var(--accent-color);
}

    .article-title a {
        color: var(--text-secondary);
    }

        .article-title a:hover {
            color: var(--primary-color);
        }

.article-meta {
    color: var(--text-muted);
}

.description {
    color: var(--text-secondary);
}

.image-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
}

.featured-badge {
    background: var(--gradient-primary);
    color: var(--accent-color);
}

.article-full-content {
    border-top-color: var(--primary-color);
    background: var(--bg-secondary);
}

/* E-books */
.ebook-card {
    background: var(--bg-card);
}

.cover-placeholder {
    background: var(--gradient-primary);
    color: white;
}

.book-title a {
    color: var(--text-secondary);
}

    .book-title a:hover {
        color: var(--primary-color);
    }

.book-meta {
    color: var(--text-muted);
}

.book-description {
    color: var(--text-muted);
}

.premium-badge {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
}

.action-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    color: white;
}

    .action-btn:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.5);
        color: white;
    }

.premium-btn {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffc107;
}

/* Podcasts */
.podcast-card {
    background: var(--bg-card);
}

.podcast-title a {
    color: var(--text-secondary);
}

    .podcast-title a:hover {
        color: var(--primary-color);
    }

.podcast-meta {
    color: var(--text-muted);
}

.podcast-description {
    color: var(--text-muted);
}

.play-overlay {
    background: rgba(0,0,0,0.8);
}

.play-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    color: white;
}

    .play-btn:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.5);
        color: white;
    }

/* ========================================= */
/* AUDIO PLAYER COLORS */
/* ========================================= */

.audio-player-container {
    background: var(--bg-card);
}

.player-cover {
    background: var(--bg-secondary);
}

.player-title {
    color: var(--text-primary);
}

.player-subtitle {
    color: var(--text-muted);
}

.control-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

    .control-btn:hover {
        background: var(--primary-color);
        color: var(--accent-color);
    }

.play-pause-btn {
    background: var(--gradient-primary);
    color: var(--accent-color);
}

.time-display {
    color: var(--text-muted);
}

.progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.progress-handle {
    background: white;
    border-color: var(--primary-color);
}

.volume-btn {
    color: var(--text-muted);
}

.volume-slider input {
    background: #e9ecef;
}

.action-btn {
    color: var(--text-muted);
}

    .action-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

/* ========================================= */
/* TRAINING COMPONENT COLORS */
/* ========================================= */

.training-category-card {
    background: var(--bg-card);
}

.category-header:hover {
    background: var(--bg-secondary);
}

.category-icon {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

.category-title {
    color: var(--text-secondary);
}

.category-meta {
    color: var(--text-muted);
}

.training-item {
    background: var(--bg-card);
    border-color: transparent;
}

    .training-item:hover {
        border-color: var(--primary-color);
    }

    .training-item.completed {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
        border-color: var(--color-success);
    }

.training-check-label {
    border-color: #dee2e6;
    background: white;
}

    .training-check-label i {
        color: white;
    }

.check-training:checked + .training-check-label {
    background: var(--color-success);
    border-color: var(--color-success);
}

.training-number {
    background-color: var(--accent-color);
    color: white;
}

h1.training-title {
    color: white;
}

.category-content {
    background: var(--text-primary);
}

.progress-modern {
    background: #e9ecef;
}

    .progress-modern .progress-bar {
        background: var(--gradient-primary);
    }

.progress-percentage {
    color: var(--accent-color));
}

.milestone {
    color: var(--text-muted);
    background: white;
    border-color: #dee2e6;
}

/* ========================================= */
/* UTILITY COLORS */
/* ========================================= */

.progress {
    background: #e9ecef;
}

.progress-bar {
    background: var(--gradient-primary);
}

.progress-group {
    background-color: #d1d6dc;
}

.loading-overlay {
    background: rgba(255,255,255,0.9);
}

.text-title {
    color: var(--text-secondary);
}

.text-date {
    color: var(--text-muted);
}

.more {
    color: var(--text-muted);
}

.download-button {
    color: var(--primary-color);
}

.open-note {
    color: var(--text-secondary);
}

/* ========================================= */
/* MODAL COLORS */
/* ========================================= */

.modal-header {
    background: var(--gradient-primary);
    color: white;
}

.share-platform-btn:hover {
    background: var(--bg-secondary);
}

/* ========================================= */
/* TABLE COLORS */
/* ========================================= */

.table-light > tr > th {
    color: var(--accent-color) !important;
}

.table-rep-plugin .fixed-solution .sticky-table-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #d7ebab 100%);
    border-color: var(--primary-color);
}

    .table-rep-plugin .fixed-solution .sticky-table-header table {
        color: var(--accent-color);
    }

/* ========================================= */
/* SUPPORT CHAT COLORS */
/* ========================================= */

.supportContainer .chat-rightsidebar {
    background-color: #F5F5F5;
}

.supportContainer .topics a.nav-link {
    color: var(--accent-color);
}

.supportContainer .bg-primary {
    background-color: #5F1664 !important;
}

.supportContainer .support-ticket:hover {
    background-color: #F5F5F5;
}

.supportContainer .support-ticket.active {
    background-color: #C1BEBE;
}

.createRequestsDropDownBtn {
    color: white !important;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.supportContainer .topics .nav-link.active {
    border-bottom-color: #000;
}

.supportContainer .mdi-send {
    color: #000 !important;
}

.chat-conversation .right .conversation-list .ctext-wrap-content {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.chat-conversation .conversation-list .ctext-wrap-content {
    background-color: var(--bg-card);
}

.supportContainer .border-1 {
    border-color: #D1D6DC !important;
}

.supportContainer .error-message {
    color: red;
}

.chat-top-menu {
    background-color: var(--bg-card);
}

.chat-ticket {
    background-color: var(--bg-secondary) !important;
}

.conversation-text {
    color: var(--text-primary);
}

.conversation-name {
    color: var(--text-primary);
}

.supportContainer .text {
    color: black;
}

/* ========================================= */
/* BREADCRUMB COLORS */
/* ========================================= */

.breadcrumb {
    background: rgba(7, 36, 45, 0.1);
    border-color: rgba(7, 36, 45, 0.1);
}

.breadcrumb-item a {
    color: rgba(255,255,255,0.8);
}

    .breadcrumb-item a:hover {
        color: var(--tertiary-color);
    }

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: white;
}

/* ========================================= */
/* WAVE ANIMATION COLORS */
/* ========================================= */

.wave-bar {
    background: linear-gradient(to top, var(--primary-color), var(--accent-color));
}

.waveform-container {
    background: var(--bg-secondary);
}

/* ========================================= */
/* CUSTOM SCROLLBAR COLORS */
/* ========================================= */

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

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

    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-color);
    }

.chat-input::-webkit-scrollbar-track,
.ticketsTabsContainer::-webkit-scrollbar-track,
.chat-conversation-msgs::-webkit-scrollbar-track {
    background: #888;
}

.chat-input::-webkit-scrollbar-thumb,
.ticketsTabsContainer::-webkit-scrollbar-thumb,
.chat-conversation-msgs::-webkit-scrollbar-thumb {
    background: #000;
}

/* ========================================= */
/* PROGRESS BAR SYSTEM COLORS */
/* ========================================= */

#progress_bar {
    background: var(--gradient-primary);
    color: white;
}

.campaign-progress {
    background-color: #d1d6dc;
}

#current-level {
    background-color: #00a2ff;
    color: white;
}

#current-level-border {
    border-right-color: #00a2ff;
}

#prev-level-border {
    border-right-color: #00a2ff;
}

#minimum-level-border,
#minimum-level-border-team {
    border-right-color: red;
}

#minimum-level {
    background-color: #d1d6dc;
}

#total-level-border {
    background-color: #215FA9;
    color: white;
}

#total-level-border-text {
    color: white;
}

.bars {
    background-color: none;
}

.bars-text {
    background-color: none;
}

#total-level-text {
    color: #ac97cc;
}

#minimum-level-text,
#minimum-level-text-team {
    color: var(--text-muted);
}

#current-level-minimum-text {
    color: var(--text-muted);
}

#maximum-level-text,
#maximum-level-text-team {
    color: var(--text-muted);
}

#current-value-text {
    color: #00a2ff;
}

/* ========================================= */
/* SPECIALTY COMPONENT COLORS */
/* ========================================= */

.wizard-box {
    background: #dcecf4;
}

    .wizard-box.active {
        background: #b9d9ea;
    }

.numberCircle {
    border-color: var(--text-muted);
}

.node {
    border-color: lightgray;
}

.button-container {
    color: #aeaeae;
    background-color: white;
    border-color: #aeaeae;
}

.node-text {
    color: var(--accent-color);
}

.node-text-invert {
    color: white;
}

.rank-box {
    background-color: #00a2ff;
    color: white;
}

.rank-box-revert {
    border-color: #00a2ff;
    color: #00a2ff;
}

.rank-box-text {
    color: #979797;
}

.subscription-box {
    border-color: #00a2ff;
}

.color-invert {
    background-color: white !important;
}

.node-text-invert {
    color: #07242D;
}

#sidebar-menu ul li ul.sub-menu li a {
    color: var(--accent-color);
}
.bundle-price {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

.original-price {
    color: var(--tertiary-color);
}
.promotion-badge {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: #fff;
}

#apply {
    background: linear-gradient(45deg, #5e0b1b, #c0392b);
    color: #fff;
}