/* Modern Live Map Styles - TİTREMESİZ VE ANİMASYONSUZ */

/* Map Container - Flex Layout for Map + List */
#map-container {
    display: flex !important;
    position: relative;
    z-index: 1; /* Navbar (z:1000) ve bildirimlerin (z:99999) altında kal */
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    flex-direction: row; /* Yan yana yerleşim */
    align-items: stretch; /* Her iki öğe de tam yükseklik */
}

#map {
    flex: 1 1 auto;
    min-width: 0; /* Flex içinde sağdaki listeye yer açmak için shrink'e izin ver */
    height: 100%;
    background: linear-gradient(to bottom right, #f8fafc, #dbeafe, #e0e7ff);
    position: relative;
    transition: all 0.3s ease-in-out;
}

/* Haritanın içindeki Leaflet container */
#map .leaflet-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Desktop'ta sidebar collapsed olduğunda haritayı genişlet */
@media (min-width: 1024px) {
    /* Sidebar kapalıyken leaflet haritayı sola genişlet */
    body.desktop-menu-collapsed #map .leaflet-container {
        left: -210px;
        width: calc(100% + 210px) !important;
    }
    
    /* Map container border-radius ayarı - sol köşeyi düzleştir */
    body.desktop-menu-collapsed #map-container {
        border-radius: 0 16px 16px 0;
    }
    
    /* Haritanın overflow'unun dışına taşmasını engelle */
    body.desktop-menu-collapsed #map {
        overflow: hidden;
        border-radius: 0 16px 16px 0;
    }
    
    /* Normal durumda harita normal pozisyonda */
    body:not(.desktop-menu-collapsed) #map .leaflet-container {
        left: 0;
        width: 100% !important;
    }
    
    /* Normal durumda yuvarlak köşeler */
    body:not(.desktop-menu-collapsed) #map-container {
        border-radius: 16px;
    }
    
    body:not(.desktop-menu-collapsed) #map {
        overflow: hidden;
        border-radius: 16px 0 0 16px;
    }
}

/* Live Map Badge - Başlık Sağında */
.live-map-badge-header {
    background: rgba(99, 102, 241, 0.06);
    backdrop-filter: blur(10px);
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #e0e7ff;
}

/* Yanıp Sönen Nokta - Slate/Indigo */
.live-indicator {
    width: 10px;
    height: 10px;
    background: #6366f1;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
        background: #6366f1;
    }
    50% {
        box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);
        background: #818cf8;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
        background: #6366f1;
    }
}

/* Canlı Harita Yazısı */
.live-text {
    color: #4f46e5;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Leaflet Container */
.leaflet-container {
    background: linear-gradient(to bottom right, #f8fafc, #dbeafe, #e0e7ff) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Leaflet Pane Z-Index Hierarchy */
.leaflet-tile-pane {
    z-index: 200;
}

/* Grayscale tiles - Mapnik Gri Tonlama */
.grayscale-tiles {
    filter: grayscale(100%) brightness(0.95) contrast(1.05);
    opacity: 0.9 !important;
}

.leaflet-overlay-pane {
    z-index: 400 !important; /* Geo-fence'ler marker'ların ALTINDA olmalı */
}

/* Heat Map Pane - Marker'ların altında, overlay'in üstünde */
.leaflet-heatmap-pane {
    z-index: 350 !important; /* Geo-fence ile marker arası */
}

.leaflet-shadow-pane {
    z-index: 500;
}

.leaflet-marker-pane {
    z-index: 600 !important; /* En üstte - cluster sayıları görünsün */
}

/* Cluster overlay pane özel z-index */
.leaflet-map-pane .leaflet-overlay-pane {
    z-index: 400 !important;
}

.leaflet-tooltip-pane {
    z-index: 1100; /* Marker'ların üstünde, popup'ların altında */
}

/* Wagon Hover Tooltip - Küçük Modern Kart */
.wagon-tooltip {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #4b5563 !important;
    opacity: 1 !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.wagon-tooltip::before {
    border-top-color: #ffffff !important;
}

.leaflet-popup-pane {
    z-index: 9999 !important;
}

/* PERFORMANS - TİTREMEYİ ÖNLE */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    will-change: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* TÜM ZOOM ANİMASYONLARINI KAPAT */
.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: auto !important;
    transition: none !important;
    animation: none !important;
}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
    transition: none !important;
}

.leaflet-fade-anim .leaflet-tile {
    will-change: auto !important;
    transition: none !important;
}

.leaflet-fade-anim .leaflet-popup {
    transition: none !important;
}

.leaflet-zoom-animated {
    transform-origin: 0 0;
    will-change: auto !important;
}

/* Wagon Marker - HİÇ TİTREME YOK */
.wagon-marker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    /* Arka plan rengi veritabanından gelecek (inline style) */
    border: 2px solid white !important; /* BEYAZ ÇERÇEVE */
    color: white !important; /* İCON BEYAZ */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    position: relative !important;
    opacity: 1 !important;
    image-rendering: crisp-edges !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    
    /* ANİMASYON KAPALI AMA TRANSFORM İZİNLİ */
    transition: none !important;
    /* transform: none KALDIRILDI - Leaflet pozisyonlama için gerekli */
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* ISI HARİTASI MODUNDAKİ TEKLİ MARKER - RENKLİ OPAK GRADIENT */
.heatmap-active .wagon-marker {
    /* JavaScript tarafından dinamik renk atanacak */
    /* Varsayılan yeşil-sarı gradient (orta yoğunluk) */
    background: linear-gradient(135deg, 
                rgba(136, 255, 0, 0.95) 0%,
                rgba(255, 255, 0, 0.85) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3),
                0 3px 12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Isı haritası modunda ikonu gizle */
.heatmap-active .wagon-marker i {
    display: none !important;
}

/* Isı haritası modunda label'ı göster - BEYAZ SAYI */
.heatmap-active .wagon-marker .wagon-label {
    display: flex !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6),
                 0 4px 16px rgba(0, 0, 0, 0.4),
                 0 0 20px rgba(0, 0, 0, 0.3) !important;
    position: static !important;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Wagon marker icon */
.wagon-marker i {
    color: white !important; /* İCON BEYAZ */
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    transition: none !important;
}

/* Wagon marker wrapper - TİTREME YOK */
.wagon-marker-wrapper {
    z-index: 600 !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    /* transform: none KALDIRILDI - pozisyonlama için gerekli */
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* ========= ZOOM SEVİYESİ BOYUTLANDIRMA (CSS ile - JS createWagonMarker çağrısı yok) ========= */
/* Varsayılan: far (zoom < 8) */
#map.zoom-level-far .wagon-marker { width: 20px !important; height: 20px !important; }
#map.zoom-level-far .wagon-marker i { font-size: 10px !important; }
/* Low: zoom 8-10 */
#map.zoom-level-low .wagon-marker { width: 24px !important; height: 24px !important; }
#map.zoom-level-low .wagon-marker i { font-size: 12px !important; }
/* Mid: zoom 11-13 */
#map.zoom-level-mid .wagon-marker { width: 28px !important; height: 28px !important; }
#map.zoom-level-mid .wagon-marker i { font-size: 14px !important; }
/* High: zoom >= 14 */
#map.zoom-level-high .wagon-marker { width: 32px !important; height: 32px !important; }
#map.zoom-level-high .wagon-marker i { font-size: 16px !important; }

/* Wagon hover efekti - SADECE SCALE */
.wagon-marker:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.12) !important;
    border-width: 3px !important;
}

.wagon-marker:hover i {
    color: white !important; /* İkon beyaz kalır */
}

/* Isı haritası modunda hover - dengeli */
.heatmap-active .wagon-marker:hover {
    transform: scale(1.2) !important;
    filter: brightness(1.12) saturate(115%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
                0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(255, 255, 255, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    border-width: 2px !important;
}


/* Status Effects - MOVING - DIŞARIYA YANIP SÖNEN HALKA */
.wagon-marker.status-MOVING {
    opacity: 1 !important;
    position: relative;
}

/* Dışarıya genişleyen yeşil halka efekti - 1. halka */
.wagon-marker.status-MOVING::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #10b981; /* Yeşil renk */
    transform: translate(-50%, -50%);
    animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    pointer-events: none;
    z-index: -1;
}

/* İkinci halka - daha yavaş, daha açık yeşil */
.wagon-marker.status-MOVING::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #34d399; /* Açık yeşil */
    transform: translate(-50%, -50%);
    animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;
    pointer-events: none;
    z-index: -1;
}

/* ISI HARİTASI MODUNDA TÜM ANİMASYONLARI KAPAT */
.heatmap-active .wagon-marker.status-MOVING::before,
.heatmap-active .wagon-marker.status-MOVING::after {
    display: none !important;
}

/* Dışarıya genişleyip kaybolan halka animasyonu */
@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        border-width: 3px;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
        border-width: 0;
    }
}

/* Vagon kendisi de hafif yanıp sönsün */
@keyframes wagonPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                    0 0 0 4px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25),
                    0 0 0 6px rgba(16, 185, 129, 0.5);
    }
}

/* Diğer statuslar */
.wagon-marker.status-STOPPED,
.wagon-marker.status-NO_DATA,
.wagon-marker.status-UNPAIRED {
    opacity: 1 !important;
}

/* Wagon Label - Normal modda gizli */
.wagon-label {
    display: none !important;
}

/* Isı haritası modunda label göster - sayı olarak */
.heatmap-active .wagon-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #1e293b !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* CLUSTER - TİTREMESİZ - DOĞRU KONUMLAMA */
.marker-cluster-contact {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    /* position: relative kaldırıldı - Leaflet absolute positioning kullanır */
    
    /* ANİMASYON YOK AMA TRANSFORM İZİNLİ */
    transition: none !important;
    animation: none !important;
    /* transform: none KALDIRILDI - pozisyonlama için gerekli */
    will-change: auto !important;
}

/* Aynı konumdaki cluster merkezi için konum pini - EMERALD */
.cluster-location-pin {
    width: 100%;
    height: 100%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: transparent !important;
}
.cluster-location-pin i { 
    color: #10b981 !important; /* Emerald-500 */
    font-size: 26px !important;
}

.marker-cluster {
    /* Güzel bir açılış animasyonu */
    animation: clusterAppear 0.3s ease-out !important;
}

@keyframes clusterAppear {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Cluster circle */
.cluster-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;

    /* Emerald/Teal gradient - Kurumsal tema */
    background: linear-gradient(135deg,
                #10b981 0%,     /* emerald-500 */
                #14b8a6 50%,    /* teal-500 */
                #0d9488 100%) !important;  /* teal-600 */
    
    /* Beyaz çerçeve */
    border: 2px solid white !important;
    
    /* Profesyonel gölge */
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25),
                0 0 0 3px rgba(16, 185, 129, 0.08) !important;
    
    /* Keskin render */
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    
    /* ANİMASYON YOK */
    transition: none !important;
    animation: none !important;
}

/* ISI HARİTASI MODUNDAKİ CLUSTER - RENKLİ OPAK GRADIENT */
.heatmap-active .cluster-circle {
    /* JavaScript tarafından dinamik renk atanacak */
    /* Varsayılan yeşil-sarı gradient (orta yoğunluk) */
    background: linear-gradient(135deg, 
                rgba(136, 255, 0, 0.95) 0%,
                rgba(255, 255, 0, 0.85) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3),
                0 3px 12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.heatmap-active .cluster-circle span {
    /* Beyaz sayı - her zaman okunabilir */
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6),
                 0 4px 16px rgba(0, 0, 0, 0.4),
                 0 0 20px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.cluster-circle span {
    color: white !important; /* Beyaz sayı */
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Cluster hover efekti - GÜZEL AMA SABİT */
.marker-cluster-contact:hover .cluster-circle {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35),
                0 0 0 5px rgba(16, 185, 129, 0.12) !important;
    transform: scale(1.05);
}

/* Isı haritası modunda cluster hover - dengeli */
.heatmap-active .marker-cluster-contact:hover .cluster-circle {
    transform: scale(1.1);
    filter: brightness(1.12) saturate(115%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
                0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(255, 255, 255, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Geofence Styles - İNCE DÜZ ÇİZGİ */
.leaflet-interactive[stroke] {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5 !important; /* Çok ince çizgi */
    stroke-dasharray: none !important; /* Kesikli çizgi kaldırıldı */
    transition: all 0.3s ease;
    cursor: pointer;
}

.leaflet-interactive[stroke]:hover {
    stroke-width: 2.5 !important; /* Hover'da biraz daha kalın */
    stroke-opacity: 1 !important;
    fill-opacity: 0.3 !important;
    stroke-dasharray: none !important; /* Hover'da da düz çizgi */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Spiderfier Lines - DÜZ BEYAZ ÇİZGİ */
.leaflet-cluster-anim .leaflet-marker-spider-leg,
.leaflet-marker-spider-leg {
    stroke: #ffffff !important; /* Beyaz çizgi */
    stroke-width: 2.5 !important;
    stroke-opacity: 1 !important;
    stroke-linecap: round !important;
    stroke-dasharray: none !important; /* Düz çizgi - kesikli yok */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) !important;
    
    /* ANİMASYON YOK */
    transition: none !important;
    animation: none !important;
}

/* Zoom sırasında spider bacaklarını tamamen gizle */
.suppress-spider .leaflet-marker-spider-leg {
    opacity: 0 !important;
}

/* Spiderfied wagons - TİTREMESİZ */
/* 2'li cluster dahil TÜM spiderfied marker'ları ZORLA görünür yap */
.leaflet-cluster-spider .wagon-marker-wrapper,
.leaflet-cluster-spider .wagon-marker-wrapper.leaflet-marker-cluster-hidden,
.leaflet-cluster-spider .leaflet-marker-icon,
.leaflet-cluster-spider .leaflet-marker-icon.leaflet-marker-cluster-hidden {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2000 !important;
    
    /* ANİMASYON YOK */
    transition: none !important;
    animation: none !important;
}

/* JavaScript'ten eklenen force-visible class - EN YÜKSEK ÖNCELİK */
.spider-force-visible,
.spider-force-visible.leaflet-marker-cluster-hidden,
.leaflet-marker-pane .spider-force-visible {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2500 !important;
}

.leaflet-cluster-spider .wagon-marker {
    opacity: 1 !important;
    /* Arka plan rengi veritabanından gelecek (inline style) */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                0 0 0 6px rgba(255, 255, 255, 0.4) !important;
    border: 2px solid white !important; /* Beyaz çerçeve */
    border-width: 3px !important;
    
    /* Keskin render */
    image-rendering: -webkit-optimize-contrast !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Spider'daki ikonlar beyaz */
.leaflet-cluster-spider .wagon-marker i {
    color: white !important;
}

.leaflet-cluster-spider .wagon-marker:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
                0 0 0 8px rgba(255, 255, 255, 0.5) !important;
    z-index: 3000 !important;
    /* Arka plan rengi korunur */
}

.leaflet-cluster-spider .wagon-marker:hover i {
    color: white !important; /* İkon beyaz kalır */
}

/* Isı haritası modunda spiderfied marker'lar - renkli */
.heatmap-active .leaflet-cluster-spider .wagon-marker {
    background: linear-gradient(135deg, 
                rgba(136, 255, 0, 0.95) 0%,
                rgba(255, 255, 0, 0.85) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3),
                0 3px 12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.15) !important;
}

.heatmap-active .leaflet-cluster-spider .wagon-marker:hover {
    filter: brightness(1.12) saturate(115%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
                0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

/* Active spiderfied cluster (merkezdeki) */
.leaflet-cluster-spider {
    opacity: 0.3 !important;
    pointer-events: none !important;
}
/* Spider açıldığında merkezdeki sayı çemberini tamamen gizle */
.leaflet-cluster-spider .marker-cluster { opacity: 0 !important; }

/* Spider merkez pini - EMERALD */
.spider-center-pin-wrapper { pointer-events: none; z-index: 4000 !important; }
.spider-center-pin {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
}
.spider-center-pin i { 
    color: #10b981 !important; /* Emerald-500 */
    font-size: 26px !important;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

/* ZOOM SIRASINDA TİTREMEYİ ÖNLE */
.leaflet-zoom-anim .leaflet-zoom-animated,
.leaflet-zoom-anim .wagon-marker-wrapper,
.leaflet-zoom-anim .wagon-marker,
.leaflet-zoom-anim .marker-cluster-contact,
.leaflet-zoom-anim .marker-cluster {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    /* transform: none KALDIRILDI - zoom için gerekli */
    will-change: auto !important;
}

/* PAN SIRASINDA TİTREMEYİ ÖNLE */
.leaflet-pan-anim .leaflet-pane {
    transition: none !important;
}

/* Leaflet marker icon - TİTREMESİZ */
.leaflet-marker-icon {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Cluster içindeki marker'ları gizle - TÜM YÖNTEMLERLE */
.marker-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-icon,
.marker-cluster .leaflet-marker-icon,
.leaflet-marker-pane .leaflet-marker-icon.leaflet-marker-cluster-hidden,
.leaflet-marker-cluster-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Cluster içindeki wagon marker wrapper'ları da gizle */
.marker-cluster-anim .wagon-marker-wrapper,
.leaflet-cluster-anim .wagon-marker-wrapper,
.marker-cluster .wagon-marker-wrapper,
.leaflet-marker-pane .wagon-marker-wrapper.leaflet-marker-cluster-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Info Card Popup */
.wagon-info-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(17, 24, 39, 0.25);
    border: 1px solid #e5e7eb; /* Nötr kenar */
    padding: 0;
    min-width: 360px;
    max-width: 440px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wagon-info-card.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

.info-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.info-card-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Info card header */
.info-card-header {
    padding: 16px 18px;
    background: linear-gradient(135deg, #10b981, #14b8a6, #0d9488); /* Emerald/Teal gradient */
    color: #f8fafc;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-card-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-card-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.2); /* Slate-400/20 */
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e2e8f0; /* Slate-200 */
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

.info-card-close:hover {
    background: rgba(148, 163, 184, 0.35);
    transform: scale(1.05);
}

/* Info card status */
.info-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* IMEI badge - kartın başlığında */
.info-card-imei-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Uyarı Badge'leri - Header İçinde Yan Yana */
.info-card-warnings-inline {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.info-card-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    border: 2px solid;
    white-space: nowrap;
}

.info-card-warning i {
    font-size: 12px;
}

/* Kritik Batarya Uyarısı - Beyaz Arka Plan */
.info-card-warning.critical-battery {
    background: #ffffff;
    border-color: #ef4444;
    color: #dc2626;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.info-card-warning.critical-battery i {
    color: #ef4444;
}

/* Geo-fence Alan İçinde - Beyaz Arka Plan */
.info-card-warning.inside-geofence {
    background: #ffffff;
    border-color: #10b981;
    color: #047857;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.info-card-warning.inside-geofence i {
    color: #10b981;
}

/* Geo-fence Alan Dışında - Beyaz Arka Plan */
.info-card-warning.outside-geofence {
    background: #ffffff;
    border-color: #f97316;
    color: #c2410c;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
}

.info-card-warning.outside-geofence i {
    color: #f97316;
}

.status-moving {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.status-stopped {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    color: #92400e;
}

.status-no-data {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
}

/* Info card body */
.info-card-body {
    padding: 18px;
}

.info-card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

.info-card-row:last-child {
    border-bottom: none;
}

.info-card-label {
    color: #64748b; /* Slate-500 */
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-card-label i {
    width: 20px;
    text-align: center;
    color: #9ca3af;
}

.info-card-value {
    color: #0f172a; /* Slate-900 */
    font-weight: 700;
    font-size: 13px;
}

/* Info card footer */
.info-card-footer {
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    display: flex;
    gap: 10px;
}

.info-card-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.info-card-btn-primary {
    background: linear-gradient(135deg, #10b981, #14b8a6, #0d9488); /* Emerald/Teal gradient */
    color: #ffffff;
}

.info-card-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.info-card-btn-secondary {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.info-card-btn-secondary:hover {
    background: #f9fafb;
    color: #111827;
}

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.25);
    padding: 0;
    border: 3px solid #10b981;
    z-index: 9999 !important;
}

.leaflet-popup-content {
    margin: 0;
    padding: 0;
}

/* Modern Kapatma Butonu - Minimal */
.leaflet-popup-close-button {
    color: #9ca3af !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    padding: 4px 8px !important;
    transition: all 0.2s ease;
    right: 4px !important;
    top: 4px !important;
    opacity: 0.6;
}

.leaflet-popup-close-button:hover {
    color: #111827 !important;
    opacity: 1;
}

.leaflet-popup-tip {
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Modern Ok - Sade Beyaz */
.geofence-popup-wrapper .leaflet-popup-tip {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom popup content */
.wagon-popup {
    min-width: 240px;
}

/* Geo-fence popup wrapper - MODERN KURUMSAL TASARIM */
.geofence-popup-wrapper {
    z-index: 10000 !important;
}

.geofence-popup-wrapper .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Geo-fence popup - MODERN KURUMSAL */
.geofence-popup {
    min-width: 180px;
    max-width: 240px;
    padding: 0;
    background: #ffffff;
}

/* Başlık - Sade Beyaz Minimal */
.geofence-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    padding: 14px 16px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.geofence-popup-title i {
    font-size: 14px;
    color: #10b981;
    filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
}

/* Açıklama - Minimal Beyaz */
.geofence-popup-description {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    padding: 12px 16px;
    margin: 0;
    font-weight: 400;
    background: #ffffff;
}

.popup-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #10b981, #0d9488);
    color: white;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.popup-body {
    padding: 12px 16px;
}

.popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.popup-row:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.popup-label {
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.popup-label i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.popup-value {
    color: #111827;
    font-weight: 600;
}

.popup-footer {
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
}

.popup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.popup-link:hover {
    color: #0d9488;
}

/* Stats overlay - Leaflet control (haritanın sağ altı) */
.map-stats-overlay {
    background: white;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 150px;
}

.map-stats-overlay .stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 16px;
}

.map-stats-overlay .stat-item:last-child {
    margin-bottom: 0;
}

.map-stats-overlay .stat-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.map-stats-overlay .stat-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.map-stats-overlay .stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    min-width: 20px;
    text-align: right;
}

/* Loading overlay */
.map-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Cluster içindeki marker'ları kesinlikle gizle */
/* Leaflet cluster'a eklenmiş marker'lar inline style ile display:none alır */
.wagon-marker-wrapper[style*="display: none"],
.wagon-marker-wrapper[style*="display:none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Cluster animasyonu sırasında marker'ları gizle */
.leaflet-marker-icon[style*="opacity: 0"],
.wagon-marker-wrapper[style*="opacity: 0"] {
    display: none !important;
}

/* Varsayılan: Görünür marker'lar tam opak */
.wagon-marker-wrapper:not([style*="display: none"]):not([style*="opacity: 0"]) {
    opacity: 1;
}

/* Cluster pane içindeki child marker'ları gizle */
.leaflet-cluster-pane .wagon-marker-wrapper,
.leaflet-cluster-pane .leaflet-marker-icon {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .wagon-marker {
        border: 2px solid white !important; /* Beyaz çerçeve */
        /* Arka plan rengi korunur */
    }
    
    .wagon-marker:hover {
        transform: scale(1.15) !important;
        border-width: 3px !important;
        /* Arka plan rengi korunur */
    }
    
    .wagon-marker i {
        color: white !important; /* Beyaz ikon */
    }
    
    .map-stats-overlay-custom {
        right: 10px;
        bottom: 70px;
        padding: 12px;
        min-width: 150px;
    }
    
    .wagon-info-card {
        min-width: 280px;
        max-width: calc(100vw - 40px);
    }
}

/* Battery Filter Styles */
.battery-quick-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.battery-quick-btn:hover {
    background: #f9fafb;
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.battery-quick-btn.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 600;
}

.battery-quick-btn i {
    font-size: 12px;
}

/* Custom Range Slider */
#battery-slider {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

#battery-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#battery-slider::-webkit-slider-thumb:hover {
    background: #d97706;
    transform: scale(1.1);
}

#battery-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#battery-slider::-moz-range-thumb:hover {
    background: #d97706;
    transform: scale(1.1);
}

/* Print */
@media print {
    .map-controls,
    .map-stats-overlay {
        display: none;
    }
}

/* ==================== WAGON LIST SIDEBAR - MINIMAL DESIGN ==================== */

/* Sidebar Container */
.wagon-list-sidebar {
    width: 300px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    display: flex !important;
    flex-direction: column;
    z-index: 10;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Desktop: Sidebar kapalı */
.wagon-list-sidebar.collapsed {
    width: 0 !important;
    overflow: hidden !important;
    border-left: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Desktop: Toggle buton (harita sağ kenarında) */
.wagon-list-toggle-btn {
    position: absolute;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 24px;
    height: 48px;
    background: linear-gradient(135deg, #475569, #334155);
    border: none;
    border-radius: 8px 0 0 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    transition: right 0.3s ease, background 0.2s;
    font-size: 12px;
}
.wagon-list-toggle-btn:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
}
.wagon-list-toggle-btn.sidebar-closed {
    right: 0;
}
.wagon-list-toggle-btn.sidebar-closed i {
    transform: rotate(180deg);
}

/* Desktop: Header içi collapse buton */
.wagon-list-collapse-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 12px;
    transition: all 0.2s;
}
.wagon-list-collapse-btn:hover {
    background: rgba(0,0,0,0.1);
    color: #374151;
}

/* Sidebar Header */
.wagon-list-header {
    padding: 16px 18px;
    background: linear-gradient(to right, #f1f5f9, #e0e7ff);
    border-bottom: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wagon-list-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Mobile close button */
.mobile-close-list {
    display: none; /* Desktop'ta gizli */
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: #10b981;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-close-list:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #059669;
}

.mobile-close-list i {
    font-size: 14px;
}

.wagon-list-title i {
    display: none; /* İkon gizlendi */
}

.wagon-list-count {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 4px;
}

/* Search Container */
.wagon-search-container {
    padding: 12px 12px 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid #f3f4f6;
}

.wagon-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.wagon-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
}

.wagon-search-box input {
    width: 100%;
    padding: 8px 36px 8px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    transition: all 0.2s;
}

.wagon-search-box input:focus {
    outline: none;
    border-color: #10b981;
    background: #fafafa;
}

.wagon-search-box input::placeholder {
    color: #9ca3af;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: #e5e7eb;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 10px;
}

.search-clear-btn:hover {
    background: #d1d5db;
    color: #374151;
}

/* Sidebar Body - Scrollable List */
.wagon-list-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
}

/* Custom Scrollbar */
.wagon-list-body::-webkit-scrollbar {
    width: 6px;
}

.wagon-list-body::-webkit-scrollbar-track {
    background: transparent;
}

.wagon-list-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.wagon-list-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Loading State */
.wagon-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 13px;
}

.wagon-list-loading i {
    font-size: 20px;
    color: #10b981;
}

/* Empty State */
.wagon-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}

.wagon-list-empty i {
    font-size: 28px;
    color: #d1d5db;
}

/* Wagon List Item - MINIMAL FLAT DESIGN */
.wagon-list-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.wagon-list-item:hover {
    border-color: #10b981;
    background: #f9fafb;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
}

.wagon-list-item:active {
    background: #f3f4f6;
}

/* Device Item - Cihaz olduğunu göster */
.wagon-list-item.device-item {
    background: #f3f4f6; /* Açık gri arka plan */
    border-left: 3px solid #9ca3af; /* Sol kenarda gri çizgi */
}

.wagon-list-item.device-item:hover {
    background: #e5e7eb;
    border-color: #6b7280;
}

.wagon-list-item.device-item .wagon-item-number {
    color: #374151; /* Koyu gri yazı */
}

.wagon-list-item.device-item .wagon-item-number i {
    color: #6b7280; /* Gri ikon */
}

/* Wagon Item Header - Number & Status */
.wagon-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.wagon-item-number {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wagon-item-number i {
    font-size: 12px;
    color: #9ca3af;
}

/* Status Badge in List - FLAT COLORS */
.wagon-item-status {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Status Colors - FLAT NO GRADIENT */
.wagon-item-status.status-moving {
    background: #d1fae5;
    color: #065f46;
}

.wagon-item-status.status-stopped {
    background: #fef3c7;
    color: #92400e;
}

.wagon-item-status.status-no-data {
    background: #fee2e2;
    color: #991b1b;
}

.wagon-item-status.status-unpaired {
    background: #f3f4f6;
    color: #4b5563;
}

/* Wagon Item Details */
.wagon-item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    color: #6b7280;
}

.wagon-item-detail-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wagon-item-detail-row i {
    width: 12px;
    font-size: 9px;
    color: #9ca3af;
}

/* No Results Message */
.wagon-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
}

.wagon-no-results i {
    font-size: 24px;
    color: #d1d5db;
}

/* Harita güncelleme bildirimi */
.update-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 185, 129, 0.95);
    color: white;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: notifFadeInOut 2s ease-in-out forwards;
}

@keyframes notifFadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    75% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Mobile Toggle Button */
.mobile-wagon-list-toggle {
    display: none; /* Desktop'ta gizli */
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: linear-gradient(135deg, #475569, #334155);
    color: white;
    border: none;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-wagon-list-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(51, 65, 85, 0.4);
}

.mobile-wagon-list-toggle i {
    font-size: 18px;
}

.toggle-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Desktop (993px ve üzeri) - Sidebar her zaman görünür */
@media (min-width: 993px) {
    #map-container {
        display: flex !important;
        flex-direction: row !important;
    }
    
    #map {
        flex: 1 1 auto !important;
        width: auto !important;
    }
    
    .wagon-list-sidebar {
        position: relative !important;
        transform: translateX(0) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 300px !important;
        flex-shrink: 0 !important;
    }
    
    /* Desktop collapsed: !important override */
    .wagon-list-sidebar.collapsed {
        width: 0 !important;
        overflow: hidden !important;
        border-left: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    
    .wagon-list-toggle-btn {
        display: flex !important;
    }
    
    .wagon-list-collapse-btn {
        display: flex !important;
    }
    
    .mobile-wagon-list-toggle {
        display: none !important;
    }
    
    .mobile-close-list {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .wagon-list-sidebar {
        width: 280px;
    }
}

@media (max-width: 992px) {
    /* Harita tam genişlikte */
    #map {
        width: 100% !important;
    }
    
    .wagon-list-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Mobilde collapsed durumu override - mobil kendi toggle mekanizmasını kullanır */
    .wagon-list-sidebar.collapsed {
        width: 280px !important;
        overflow: visible !important;
        border-left: 1px solid #e5e7eb !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .wagon-list-sidebar.active {
        transform: translateX(0);
    }
    
    /* Mobil toggle button göster */
    .mobile-wagon-list-toggle {
        display: flex;
    }
    
    /* Mobil close button göster */
    .mobile-close-list {
        display: flex;
    }
    
    /* Desktop toggle butonları mobilde gizle */
    .wagon-list-toggle-btn {
        display: none !important;
    }
    
    .wagon-list-collapse-btn {
        display: none !important;
    }
    
    /* KKY rapor bölümü mobil düzenlemeler */
    #kky-report-section .flex.items-center.justify-between {
        flex-direction: column;
        align-items: stretch;
    }
    
    #kky-pagination {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .wagon-list-sidebar {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================
   Statistics Indicators Styles
   ============================================ */

/* Stat Card Base */
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Stat Card Header */
.stat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f3f4f6;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.stat-icon-wagon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon-device {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon-total {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-icon-alarm {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    flex: 1;
}

/* Stat Body */
.stat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.stat-body-centered {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Stat Items (for wagon status) */
.stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.stat-item:hover {
    background: #f3f4f6;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.stat-dot-moving {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.stat-dot-stopped {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.stat-dot-nodata {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.stat-dot-unpaired {
    background: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

.stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-count {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.stat-percent {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Device Status Circle */
.device-stat-main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.device-stat-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.device-progress-ring {
    transform: rotate(-90deg);
}

.device-progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    stroke-linecap: round;
}

.device-progress-ring-circle-bg {
    stroke-dasharray: 326.73;
}

.device-stat-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.device-stat-percent {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}

.device-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 2px;
}

/* Device Details */
.device-stat-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.device-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f9fafb;
    border-radius: 6px;
}

.device-stat-icon {
    font-size: 14px;
}

.device-stat-icon-online {
    color: #10b981;
}

.device-stat-icon-offline {
    color: #ef4444;
}

.device-stat-text {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.device-stat-text span {
    font-weight: 700;
    color: #111827;
}

/* Large Numbers (for total wagons and alarms) */
.stat-large-number {
    font-size: 48px;
    font-weight: 800;
    color: #3b82f6;
    line-height: 1;
    margin: 8px 0;
}

.stat-large-number-alarm {
    color: #ef4444;
}

.stat-large-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
}

.stat-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #10b981;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.stat-trend i {
    font-size: 10px;
}

.stat-alarm-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #10b981;
    background: #ecfdf5;
    padding: 6px 12px;
    border-radius: 6px;
    margin-top: 8px;
}

.stat-alarm-status.has-alarms {
    color: #ef4444;
    background: #fef2f2;
}

.stat-alarm-status i {
    font-size: 12px;
}

/* ==================== STATION MARKERS (OPTIMIZED) ==================== */

/* Station Cluster Wrapper */
.station-cluster-wrapper {
    z-index: 350 !important;
}

/* Station Cluster - Ev/Bina ikonu ile */
.station-cluster {
    width: 100%;
    height: 100%;
    border-radius: 6px !important; /* Köşeli - vagonlardan farklı */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; /* Mor gradient */
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4) !important;
    cursor: pointer !important;
    gap: 1px;
}

.station-cluster i {
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.station-cluster span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.station-cluster-wrapper:hover .station-cluster {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5) !important;
}

/* ==================== Individual Station Pin ==================== */

/* Station Pin Wrapper */
.station-pin-wrapper {
    z-index: 300 !important;
}

/* Station Pin - Damla şeklinde pin */
.station-pin {
    width: 18px;
    height: 24px;
    position: relative;
    cursor: pointer !important;
}

/* Pin şekli - CSS ile damla */
.station-pin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: #8b5cf6; /* Mor */
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

/* Pin içindeki nokta - tam ortada */
.station-pin::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

/* Pin hover */
.station-pin-wrapper:hover .station-pin::before {
    background: #7c3aed; /* Koyu mor */
    transform: rotate(-45deg) scale(1.15);
}

/* Station Tooltip */
.station-tooltip {
    background: #7c3aed !important; /* Mor */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3) !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-tooltip i {
    margin-right: 5px;
    font-size: 10px;
}

.station-tooltip::before {
    border-top-color: #7c3aed !important;
}

/* Leaflet tooltip arrow for stations */
.station-tooltip.leaflet-tooltip-top::before {
    border-top-color: #7c3aed !important;
}

.station-tooltip.leaflet-tooltip-bottom::before {
    border-bottom-color: #7c3aed !important;
}

/* Isı haritası modunda istasyonları biraz soluklaştır */
.heatmap-active .station-cluster,
.heatmap-active .station-pin {
    opacity: 0.6 !important;
}

.heatmap-active .station-cluster:hover,
.heatmap-active .station-pin-wrapper:hover .station-pin {
    opacity: 1 !important;
}

/* Responsive adjustments for statistics */
@media (max-width: 1024px) {
    .stat-card {
        padding: 14px;
    }
    
    .stat-large-number {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .stat-card {
        padding: 12px;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .stat-title {
        font-size: 13px;
    }
    
    .stat-large-number {
        font-size: 32px;
    }
    
    .device-stat-circle {
        width: 100px;
        height: 100px;
    }
    
    .device-progress-ring {
        width: 100px;
        height: 100px;
    }
    
    .device-progress-ring-circle,
    .device-progress-ring-circle-bg {
        r: 42;
    }
    
    .device-stat-percent {
        font-size: 20px;
    }
}