:root {
    /* Colors for Pending Status */
    --color-pending-start: #69788c;
    --color-pending-end: #5d6c80;
    --color-pending-hover-start: #5d6c80;
    --color-pending-hover-end: #4f5e70;
    --color-pending-border: rgba(105, 120, 140, 0.6);
    --color-pending-border-hover: rgba(105, 120, 140, 0.8);
    --shadow-pending-hover: 0px 3px 8px rgba(105, 120, 140, 0.2);

    /* Colors for Completed/Active Status */
    --color-active-start: #12b76a;
    --color-active-end: #0fa35e;
    --color-active-hover-start: #0fa35e;
    --color-active-hover-end: #0c8e50;
    --color-active-border: rgba(18, 183, 106, 0.6);
    --color-active-border-hover: rgba(18, 183, 106, 0.8);
    --shadow-active-hover: 0px 3px 8px rgba(18, 183, 106, 0.2);

    --color-danger-start: #ff0000;
    --color-danger-end: #e50000;
    --color-danger-hover-start: #e50000;
    --color-danger-hover-end: #c80000;
    --color-danger-border: rgba(255, 0, 0, 0.6);
    --color-danger-border-hover: rgba(255, 0, 0, 0.8);
    --shadow-danger-hover: 0px 3px 8px rgba(255, 0, 0, 0.2);

    --ch-standard-border: 1px solid rgba(255, 255, 255, 0.2);
    --ch-standard-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    --ch-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);

    /* Shadows */
    --shadow-badge: 0px 2px 5px rgba(0, 0, 0, 0.11);
    --shadow-badge-hover: 0px 3px 8px rgba(0, 0, 0, 0.2);
    --badge-special-shadow: 0px 2px 6px rgba(58, 94, 225, 0.4);

    /* Special Gradient Color */
    --color-special: linear-gradient(
        145deg,
        #6A5ACD 5%,
        #636EDC 30%,
        #5A73E8 55%,
        #4A7DF1 75%,
        #3B82F6 95%
    );

    --color-special-2: linear-gradient(90deg, transparent, #6a11cb, #2575fc, transparent);

    --color-special-3: linear-gradient(145deg,
        #5A49C8 5%,
        #575FCE 30%,
        #4F6CE1 55%,
        #3F75EB 75%,
        #2F6AEF 95%
    );

    /* THEME COLORS */

    /* [DEFAULT] Bluewave colors */
    --color-bluewave-solid: #346BFC;
    --color-bluewave-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(55, 112, 255, 1) 0%,
            rgba(31, 72, 236, 1) 50%,
            rgba(28, 38, 143, 1) 100%
    );
    --color-bluewave-bg-component: #FFFFFF;
    --color-bluewave-bg-main: #F9F9F9;
    --color-bluewave-important-title: #2c3e50;
    --color-bluewave-file-pond-bg: #F1F0EF;
    --color-bluewave-form-border-color: #dee2e6;
    --color-bluewave-link-text: #346BFC;
    --color-bluewave-item-hover-bg: #f2f2f2;
    --color-bluewave-ai-user-container-bg: #efeeee;
    --color-bluewave-ai-response-container-bg: white;
    --color-bluewave-task-tab-border-color: #b0b5c0;
    /* Ocean Breeze Colors */
    --color-ocean-breeze-solid: #2DAAE1;
    --color-ocean-breeze-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(45, 170, 225, 0.7) 0%,
            rgba(45, 170, 225, 0.9) 50%,
            rgba(45, 170, 225, 1) 100%
    );

    /* Midnight Shade Colors [! THIS IS ALSO A DARK MODE COLORS] */
    --color-midnight-shade-solid: #34495E;
    --color-midnight-shade-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(29, 41, 53, 0.9) 100%,
            rgba(26, 37, 47, 0.95) 50%,
            rgba(23, 32, 41, 1) 0
    );
    --color-midnight-shade-bg-component: #1E2430;
    --color-midnight-shade-bg-main: #171B28;
    --color-midnight-shade-important-title: #9bb1f5;
    --color-midnight-shade-file-pond-bg: #4f4f4f;
    --color-midnight-shade-form-border-color: #3a4150;
    --color-midnight-shade-link-text: #2DAAE1;
    --color-midnight-shade-item-hover-bg: #262c38;
    --color-midnight-shade-ai-user-container-bg: #3a4150;
    --color-midnight-shade-ai-response-container-bg: transparent;
    --color-midnight-task-tab-border-color: #ffffff;
    /* Blue Horizon Colors */
    --color-blue-horizon-solid: #1445E1;
    --color-blue-horizon-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(77, 114, 232, 0.7) 100%,
            rgba(77, 114, 232, 0.9) 50%,
            rgba(77, 114, 232, 1) 0%
    );

    /* Crystal Drift Colors */
    --color-crystal-drift-solid: #3e82fe;
    --color-crystal-drift-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(55, 112, 255, 1) 0%,
            rgba(31, 72, 236, 1) 50%,
            rgba(28, 38, 143, 1) 100%
    );

    /* Deep Current Colors */
    --color-deep-current-solid: #3651d3;
    --color-deep-current-gradient: radial-gradient(
            circle at 30% 0%,
            rgba(53, 81, 211, 0.7) 100%,
            rgba(53, 81, 211, 0.9) 50%,
            rgba(53, 81, 211, 1) 0%
    );


    --color-solid-alpha-40: rgba(52, 107, 252, 0.4); /* 40% opacity of #346BFC */
    --color-solid-alpha-0: rgba(52, 107, 252, 0); /* 0% opacity */

    --color-warning-border: rgba(255, 193, 7, 0.9);

    /* Theme global variables */
    --color-solid: var(--color-bluewave-solid);
    --color-gradient: var(--color-bluewave-gradient);
    --color-main-bg: var(--color-bluewave-bg-main);
    --color-component-bg: var(--color-bluewave-bg-component);
    --color-important-title: var(--color-bluewave-important-title);
    --color-file-pond-bg: var(--color-bluewave-file-pond-bg);
    --color-border-color: var(--color-bluewave-form-border-color);
    --color-link-text: var(--color-bluewave-link-text);
    --color-item-hover-bg: var(--color-bluewave-item-hover-bg);
    --color-ai-user-container-bg: var(--color-bluewave-ai-user-container-bg);
    --color-ai-response-container-bg: var(--color-bluewave-ai-response-container-bg);
    --color-task-border-card-color: var(--color-bluewave-task-tab-border-color)
}

.ch-body-bg {
    background-color: var(--color-main-bg) !important;
}

.active-page {
    background-color: var(--color-solid) !important;
}

.theme-color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

.pulse-border {
    animation: pulseBorder 2s infinite;
}
    
@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 0 0 var(--color-solid-alpha-40);
    }
    70% {
        box-shadow: 0 0 0 6px var(--color-solid-alpha-0);
    }
    100% {
        box-shadow: 0 0 0 0 var(--color-solid-alpha-0);
    }
}

.list-group-item {
    background-color: var(--color-component-bg);
    color: var(--color-text-default);
}

.modal-header,
.modal-footer,
.modal-body {
    background-color: var(--color-component-bg);
}

.dropdown-menu {
    background-color: var(--color-component-bg);
}

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

.offcanvas-header {
    background-color: var(--color-component-bg) !important;
}

.offcanvas-body {
    background-color: var(--color-component-bg) !important;
}