/**
 * Sidebar Colour Switcher Styles
 * CSS classes for different sidebar background colours
 */

/* Sidebar background colour variations */

/* Blue - Deep ocean blue gradient */
.sidebar[data-color="blue"],
.sidebar.sidebar-background-blue {
    background: linear-gradient(0deg, #1e3a8a, #3b82f6) !important;
}

.sidebar[data-color="blue"]:after,
.sidebar.sidebar-background-blue:after {
    background: #3b82f6 !important;
}

/* Green - Forest to emerald gradient */
.sidebar[data-color="green"],
.sidebar.sidebar-background-green {
    background: linear-gradient(0deg, #065f46, #10b981) !important;
}

.sidebar[data-color="green"]:after,
.sidebar.sidebar-background-green:after {
    background: #10b981 !important;
}

/* Orange - Sunset gradient */
.sidebar[data-color="orange"],
.sidebar.sidebar-background-orange {
    background: linear-gradient(0deg, #c2410c, #f97316) !important;
}

.sidebar[data-color="orange"]:after,
.sidebar.sidebar-background-orange:after {
    background: #f97316 !important;
}

/* Red - Ruby gradient */
.sidebar[data-color="red"],
.sidebar.sidebar-background-red {
    background: linear-gradient(0deg, #991b1b, #ef4444) !important;
}

.sidebar[data-color="red"]:after,
.sidebar.sidebar-background-red:after {
    background: #ef4444 !important;
}

/* Yellow - Gold gradient */
.sidebar[data-color="yellow"],
.sidebar.sidebar-background-yellow {
    background: linear-gradient(0deg, #ca8a04, #fbbf24) !important;
}

.sidebar[data-color="yellow"]:after,
.sidebar.sidebar-background-yellow:after {
    background: #fbbf24 !important;
}

/* Ensure smooth transitions */
.sidebar {
    transition: background 0.3s ease-in-out;
}

.sidebar:after {
    transition: background 0.3s ease-in-out;
}