#pca-dock {
}


#pca-dock-button-courses, 
#pca-dock-button-profile, 
#pca-dock-button-more {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Only apply hover effects on devices that support hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    #pca-dock-button-courses:hover, 
    #pca-dock-button-profile:hover, 
    #pca-dock-button-more:hover {
        background-color: var(--color-base-200) !important;
    }
}

/* Focus states for keyboard navigation */
/* #pca-dock-button-courses:focus, 
#pca-dock-button-profile:focus, 
#pca-dock-button-more:focus {
    background-color: var(--color-base-200) !important;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
} */

/* Active/pressed state for touch devices */
/* #pca-dock-button-courses:active, 
#pca-dock-button-profile:active, 
#pca-dock-button-more:active {
    background-color: var(--color-base-300) !important;
    transform: scale(0.98);
    transition: transform 0.1s ease;
} */

/*********************** Active  ***********************/
#pca-dock [data-active="1"] .pca-dock-stroke-non-base {
  stroke: var(--color-primary) !important;
}

#pca-dock [data-active="1"] .pca-dock-fill-non-base {
  fill: var(--color-primary) !important;
}

#pca-dock [data-active="1"] .pca-dock-stroke-base {
  stroke: var(--color-base-100) !important;
}
#pca-dock [data-active="1"] .pca-dock-label {
    color: var(--color-primary) !important;
}



/* *********************** Inactive  ***********************/
#pca-dock [data-active="0"] .pca-dock-stroke-non-base {
  stroke: var(--color-base-content) !important;
}

#pca-dock [data-active="0"] .pca-dock-fill-non-base {
  fill: var(--color-base-100) !important;
}

#pca-dock [data-active="0"] .pca-dock-stroke-base {
  stroke: var(--color-base-content) !important;
}

#pca-dock [data-active="0"] .pca-dock-label {
  color: var(--color-base-content) !important;
  font-weight: 300 !important;
}