/* Palette de couleurs personnalisée pour les états des points de charge */
.cp-state-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 2px;
    border: 2px solid rgba(0,0,0,0.1);
    vertical-align: middle;
}

/* Conteneur pour centrer les cercles dans la colonne */
.cp-circles-container {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* États des CP avec couleurs distinctes - MÊME CODE COULEUR QUE STATION.JS */
.cp-state-available {
    background-color: green;  /* État 0 - Disponible */
    box-shadow: 0 0 4px rgba(0, 128, 0, 0.4);
}

.cp-state-preparing {
    background-color: #81e154;  /* État 1 - En préparation */
    box-shadow: 0 0 4px rgba(129, 225, 84, 0.4);
}

.cp-state-charging {
    background-color: #2f6edd;  /* État 2 - Charge en cours */
    box-shadow: 0 0 4px rgba(47, 110, 221, 0.4);
    animation: pulse-charging 2s infinite;
}

.cp-state-paused-evse {
    background-color: #1fc7e6;  /* État 3 - Charge en pause */
    box-shadow: 0 0 4px rgba(31, 199, 230, 0.4);
}

.cp-state-paused-ev {
    background-color: #110988;  /* État 4 - Charge terminée */
    box-shadow: 0 0 4px rgba(17, 9, 136, 0.4);
}

.cp-state-finished {
    background-color: #780988;  /* État 5 - En attente de libération */
    box-shadow: 0 0 4px rgba(120, 9, 136, 0.4);
}

.cp-state-reserved {
    background-color: #fbfd17;  /* État 6 - Réservé */
    box-shadow: 0 0 4px rgba(251, 253, 23, 0.4);
    border: 1px solid rgba(0,0,0,0.3); /* Bordure plus visible pour le jaune */
}

.cp-state-unavailable {
    background-color: #eca825;  /* État 7 - Indisponible */
    box-shadow: 0 0 4px rgba(236, 168, 37, 0.4);
}

.cp-state-faulted {
    background-color: red;  /* État 8 - Défectueux */
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.4);
    animation: pulse-error 1s infinite;
}

.cp-state-unknown {
    background-color: #505050;  /* État 9 ou inconnu */
    box-shadow: 0 0 4px rgba(80, 80, 80, 0.4);
}

/* Animations pour les états spéciaux */
@keyframes pulse-charging {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes pulse-error {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Tooltip pour afficher l'état au survol */
.cp-state-circle[data-bs-toggle="tooltip"] {
    cursor: help;
}

.station-state-green{
    background-color: green; /* Couleur pour l'état vert */
}

.station-state-orange{
    background-color: orange; /* Couleur pour l'état orange */
}

.station-state-red{
    background-color: red; /* Couleur pour l'état rouge */
}

.station-state-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 2px;
    border: 2px solid rgba(0,0,0,0.1);
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

/* Styles pour la table des stations */
.table.datatable {
    width: 100%;
    min-width: 1400px;
    max-width: 100vw;
}