.button,
.flat-bg,
.gradient-bg,
.gradient-lg-bg,
.gradient-selected-bg,
.gradient-bg-secondary,
.flatpickr-calendar {

    --bs-card-bg: #ffffff;

}

html[data-bs-theme="dark"] .button,
html[data-bs-theme="dark"] .flat-bg,
html[data-bs-theme="dark"] .gradient-bg,
html[data-bs-theme="dark"] .gradient-lg-bg,
html[data-bs-theme="dark"] .gradient-selected-bg,
html[data-bs-theme="dark"] .gradient-bg-secondary,
html[data-bs-theme="dark"] .flatpickr-calendar {

    --bs-card-bg: #1e1e2d;

}

.flat-bg {
    background: var(--bs-card-bg);
    color: inherit;
    border: 1px solid rgb(182, 235, 235) !important;
}

html[data-bs-theme="dark"] .flat-bg {
    border: 1px solid hsla(220, 50%, 47%, 0.20) !important;
}

.button {
    cursor: pointer;
}

.accordion-button {
    background: transparent !important;
    color: inherit !important;
}

.btn.button,
.card.button,
.accordion-item,
.gradient-bg,
.flatpickr-calendar {
    --start-color: rgba(182, 235, 235, 0.25);
    --end-color: rgba(62, 92, 100, 0.20);

    background:
        linear-gradient(155deg, var(--start-color) 0%, var(--end-color) 100%),
        var(--bs-card-bg);
    color: inherit;
    border: 1px solid rgb(182, 235, 235) !important;
}

html[data-bs-theme="dark"] .btn.button,
html[data-bs-theme="dark"] .card.button,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .gradient-bg,
html[data-bs-theme="dark"] .flatpickr-calendar {
    background:
        linear-gradient(136deg,
            hsla(220, 50%, 47%, 0.15) 0%,
            rgba(10, 20, 60, 0.20) 100%),
        var(--bs-card-bg);
    border: 1px solid hsla(220, 50%, 47%, 0.20) !important;
}


.gradient-selected-bg.reverse-bg {
    --start-color: var(--bs-body-bg);
    --end-color: #f3f6f7;

    background:
        linear-gradient(315deg, var(--start-color) 0%, var(--end-color) 60%),
        var(--bs-card-bg);
    color: inherit;
}

html[data-bs-theme="dark"] .gradient-selected-bg.reverse-bg {
    --start-color: var(--bs-body-bg);
    --end-color: #1a1a28;
    background:
        linear-gradient(315deg, var(--start-color) 0%, var(--end-color) 60%),
        var(--bs-card-bg);
        border: 0 !important;
}

.gradient-selected-bg {
    --start-color: var(--bs-body-bg);
    --end-color: hsl(192, 20%, 96%);

    background:
        linear-gradient(136deg, var(--start-color) 0%, var(--end-color) 60%),
        var(--bs-card-bg);
    color: inherit;
}

html[data-bs-theme="dark"] .gradient-selected-bg {
    --start-color: var(--bs-body-bg);
    --end-color: #1a1a28;
    background:
        linear-gradient(136deg, var(--start-color) 0%, var(--end-color) 60%),
        var(--bs-card-bg);
        border: 0 !important;
}


html[data-bs-theme="dark"] .card.button.circleButton {
    border: 1px solid hsla(220, 50%, 70%, 0.20) !important;
}

.gradient-bg-secondary {
    background:
        linear-gradient(135deg,
            hsl(220deg 41.74% 79.46% / 15%) 0%,
            rgb(92 103 145 / 20%) 100%),
        var(--bs-card-bg);
    color: inherit;
}

html[data-bs-theme="dark"] .gradient-bg-secondary {
    background:
        linear-gradient(136deg,
            hsla(220, 50%, 47%, 0.15) 0%,
            rgba(28, 68, 110, 0.20) 100%),
        var(--bs-card-bg);
    color: inherit;
}

.card.bg-custom-dark {
    background:
        linear-gradient(136deg,
            hsla(220, 50%, 47%, 0.15) 0%,
            rgba(28, 68, 110, 0.20) 100%),
        var(--bs-card-bg);
}

html[data-bs-theme="dark"] .card.bg-custom-dark {
    background:
        linear-gradient(136deg,
            hsla(220, 50%, 47%, 0.15) 0%,
            rgba(28, 68, 110, 0.20) 100%),
        var(--bs-card-bg);
}

.card.button:hover .text-hover-primary {
    color: #9D6FFF !important;
}

.card.button.selected {
    background-color: #00000038;
}

html[data-bs-theme="dark"] .card.button:hover .text-hover-primary {
    color: #793AFF !important;
}

html[data-bs-theme="dark"] .card.button.selected {
    background-color: #00000050;
}

/* --- Responsive --- */
@media (min-width: 992px) {
    .gradient-lg-bg {
        --start-color: rgba(182, 235, 235, 0.25);
        --end-color: rgba(62, 92, 100, 0.20);

        background:
            linear-gradient(155deg, var(--start-color) 0%, var(--end-color) 100%),
            var(--bs-card-bg);
        color: inherit;
        border: 1px solid rgb(182, 235, 235) !important;
    }

    html[data-bs-theme="dark"] .gradient-lg-bg {
        background:
            linear-gradient(136deg,
                hsla(220, 50%, 47%, 0.15) 0%,
                rgba(10, 20, 60, 0.20) 100%),
            var(--bs-card-bg);
        border: none !important;
    }
}