.station-row:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd !important;
    transform: translateX(5px);
}

/* Favorite/Pinned Styles */
.station-item {
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-bottom: 1px solid #eee;
}

.station-item.is-favorite {
    background-color: #f8f9fa; /* Subtle highlight */
    border-left: 4px solid #0d6efd; /* Blue "Pinned" indicator */
}

.fav-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
}

.fav-btn.active {
    color: #ffca28; /* Gold Star */
}

.fav-btn:hover {
    color: #ffca28;
}

#station-list::-webkit-scrollbar {
    width: 6px;
}
#station-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

.status-pulse {
    width: 8px;
    height: 8px;
    background-color: #666; /* Gray when off */
    border-radius: 50%;
    transition: background-color 0.3s;
}

.status-pulse.active {
    background-color: #2ecc71; /* Green when playing */
    box-shadow: 0 0 8px #2ecc71;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(0.95); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(0.95); opacity: 1; }
}

/* Highlighting the active station */
.station-row.is-playing {
    border-color: #ff4d4d !important;
    background-color: rgba(255, 77, 77, 0.05) !important;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
}

.station-row.is-playing .text-primary {
    color: #ff4d4d !important; /* Match the play icon to the pulse */
}

/* Fix for invisible legend text in Dark Header */
.table-dark .text-muted {
    color: rgba(255, 255, 255, 0.6) !important; 
}

/* Ensure the x-small legend doesn't wrap awkwardly */
.table th div.x-small {
    font-size: 0.65rem;
    line-height: 1;
    margin-top: 2px;
    letter-spacing: 0.02em;
}