.sky-color {
    background: linear-gradient(to bottom, #4d98dd, #0052cc) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* force icons to use the same color as text */
.sky-color i,
.sky-color svg {
    fill: currentColor !important;
    color: inherit !important;
}

.sky-color:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* Sidebar button styles */
.sky-sidebar-buttons {
    background: linear-gradient(to bottom, #4d98dd, #230b91) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* force icons to use the same color as text */
.sky-sidebar-buttons i,
.sky-sidebar-buttons svg {
    fill: currentColor !important;
    color: inherit !important;
}

.sky-sidebar-buttons:hover {
    background: #ffffff !important; /* replaces gradient completely */
    color: #000000 !important;
    border-color: #000000 !important;
}

.sky-sidebar-buttons:hover i,
.sky-sidebar-buttons:hover svg {
    fill: currentColor !important;
    color: inherit !important;
}

/* Active/selected state (same as hover) */
.sky-sidebar-buttons.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.sky-sidebar-buttons.active i,
.sky-sidebar-buttons.active svg {
    fill: currentColor !important;
    color: inherit !important;
}

a.sky-sidebar-buttons.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

a.sky-sidebar-buttons.active i,
a.sky-sidebar-buttons.active svg {
    fill: currentColor !important;
    color: inherit !important;
}


/* on hover, icons switch to black with text */
.sky-color:hover i,
.sky-color:hover svg {
    fill: currentColor !important;
    color: inherit !important;
}

.sky-header-icons {
    margin: 0 4px;
    position: relative;
    font-weight: 500;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff; /* White background */
    color: #000000; /* Black icon color */
}

.sky-header-icons::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: var(--pc-active-background);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.08s cubic-bezier(0.37, 0.24, 0.53, 0.99);
}

.sky-header-icons>img,
.sky-header-icons>span,
.sky-header-icons>svg,
.sky-header-icons>i {
    position: relative;
    z-index: 5;
    transition: all 0.08s cubic-bezier(0.37, 0.24, 0.53, 0.99);
}

.sky-header-icons>i {
    font-size: 20px;
}

.sky-header-icons>i>svg,
.sky-header-icons>svg {
    width: 16px;
    height: 16px;
}

.sky-header-icons:hover {
    background-color: #0f04ab; /* Light gray on hover */
    color: #ffffff; /* Keep icon color white on hover */
}

.sky-header-icons:hover i,
.sky-header-icons:hover svg {
    color: inherit; /* or explicitly set the icon color */  
}