/**
 * STYLES DES MODES DE TRANSPORT
 * Couleurs et icônes spécifiques selon standard GTFS
 * Date: 2025-11-04
 */

/* ============================================
   COULEURS PAR MODE DE TRANSPORT (GTFS)
   ============================================ */

/* Tramway (route_type = 0) - VERT */
.transport-mode-tram,
.transport-mode-tramway {
    color: #10B981 !important;
    background-color: #10B981 !important;
}

.transport-mode-tram-icon {
    color: #10B981 !important;
}

/* Métro (route_type = 1) - BLEU */
.transport-mode-metro,
.transport-mode-subway {
    color: #3B82F6 !important;
    background-color: #3B82F6 !important;
}

.transport-mode-metro-icon {
    color: #3B82F6 !important;
}

/* Train (route_type = 2) - VIOLET */
.transport-mode-train,
.transport-mode-rail {
    color: #8B5CF6 !important;
    background-color: #8B5CF6 !important;
}

.transport-mode-train-icon {
    color: #8B5CF6 !important;
}

/* Bus (route_type = 3) - ORANGE */
.transport-mode-bus {
    color: #F59E0B !important;
    background-color: #F59E0B !important;
}

.transport-mode-bus-icon {
    color: #F59E0B !important;
}

/* Téléphérique / Câble (route_type = 5) - ROUGE */
.transport-mode-cable,
.transport-mode-cable-car,
.transport-mode-téléphérique {
    color: #EF4444 !important;
    background-color: #EF4444 !important;
}

.transport-mode-cable-icon {
    color: #EF4444 !important;
}

/* Ferry (route_type = 4) - CYAN */
.transport-mode-ferry {
    color: #06B6D4 !important;
    background-color: #06B6D4 !important;
}

.transport-mode-ferry-icon {
    color: #06B6D4 !important;
}

/* ============================================
   BADGES AVEC ICÔNES
   ============================================ */

.transport-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.transport-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.transport-badge i {
    font-size: 16px;
}

/* Badges spécifiques */
.transport-badge-bus {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.transport-badge-tram {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.transport-badge-metro {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.transport-badge-train {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.transport-badge-cable {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.transport-badge-ferry {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

/* ============================================
   ICÔNES DANS LE MENU ANALYSE COMPORTEMENTALE
   ============================================ */

#submenu-clients-profiling .qcity-third-level-item i.fa-subway {
    color: #3B82F6 !important; /* Bleu - Métro */
}

#submenu-clients-profiling .qcity-third-level-item i.fa-train {
    color: #10B981 !important; /* Vert - Tram */
}

#submenu-clients-profiling .qcity-third-level-item i.fa-bus {
    color: #F59E0B !important; /* Orange - Bus */
}

#submenu-clients-profiling .qcity-third-level-item i.fa-train-tram {
    color: #8B5CF6 !important; /* Violet - Train */
}

#submenu-clients-profiling .qcity-third-level-item i.fa-cable-car {
    color: #EF4444 !important; /* Rouge - Téléphérique */
}

/* Hover effect */
#submenu-clients-profiling .qcity-third-level-item:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ============================================
   CARDS DES MODES DE TRANSPORT
   ============================================ */

.mode-card {
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.mode-card-bus {
    border-left-color: #F59E0B !important;
}

.mode-card-bus:hover {
    background-color: #FEF3C7 !important;
}

.mode-card-tram {
    border-left-color: #10B981 !important;
}

.mode-card-tram:hover {
    background-color: #D1FAE5 !important;
}

.mode-card-metro {
    border-left-color: #3B82F6 !important;
}

.mode-card-metro:hover {
    background-color: #DBEAFE !important;
}

.mode-card-train {
    border-left-color: #8B5CF6 !important;
}

.mode-card-train:hover {
    background-color: #EDE9FE !important;
}

.mode-card-cable {
    border-left-color: #EF4444 !important;
}

.mode-card-cable:hover {
    background-color: #FEE2E2 !important;
}

/* ============================================
   SELECT OPTIONS AVEC EMOJI
   ============================================ */

#transport_mode_select option[value="bus"]::before {
    content: "🚌 ";
}

#transport_mode_select option[value="tram"]::before {
    content: "🚊 ";
}

#transport_mode_select option[value="metro"]::before {
    content: "🚇 ";
}

#transport_mode_select option[value="train"]::before {
    content: "🚆 ";
}

#transport_mode_select option[value="cable"]::before {
    content: "🚡 ";
}

/* ============================================
   STATISTIQUES PAR MODE
   ============================================ */

.stat-card-bus {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-left: 4px solid #F59E0B;
}

.stat-card-tram {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border-left: 4px solid #10B981;
}

.stat-card-metro {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-left: 4px solid #3B82F6;
}

.stat-card-train {
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
    border-left: 4px solid #8B5CF6;
}

.stat-card-cable {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-left: 4px solid #EF4444;
}

.stat-card-ferry {
    background: linear-gradient(135deg, #CFFAFE 0%, #A5F3FC 100%);
    border-left: 4px solid #06B6D4;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .transport-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .transport-badge i {
        font-size: 14px;
    }
}