/* Custom styles for Virtual Charging Site Simulator */

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Range slider custom styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #1e293b;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #1e293b;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

/* SoC progress bar colors */
.soc-bar {
    background: linear-gradient(90deg, #ef4444 0%, #eab308 40%, #22c55e 70%);
    transition: width 1s ease-in-out;
}

/* Status badge colors */
.status-available { background: #22c55e20; color: #22c55e; }
.status-occupied { background: #3b82f620; color: #3b82f6; }
.status-charging { background: #3b82f620; color: #3b82f6; }
.status-finishing { background: #eab30820; color: #eab308; }
.status-faulted { background: #ef444420; color: #ef4444; }
.status-offline { background: #6b728020; color: #6b7280; }
.status-inactive { background: #4b556320; color: #4b5563; opacity: 0.6; }

/* Pulse animation for charging */
@keyframes charge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.charging-pulse {
    animation: charge-pulse 2s ease-in-out infinite;
}

/* Car animation */
@keyframes car-slide-in {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes car-slide-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(50px); opacity: 0; }
}
.car-arriving {
    animation: car-slide-in 0.8s ease-out forwards;
}
.car-departing {
    animation: car-slide-out 0.8s ease-in forwards;
}

/* Activity feed entry animation */
@keyframes feed-slide-in {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.feed-entry {
    animation: feed-slide-in 0.3s ease-out;
}

/* Animated counter */
.counter-animate {
    transition: all 0.5s ease-out;
}

/* Leaderboard bar */
.leaderboard-bar {
    transition: width 1s ease-in-out;
    min-width: 4px;
}

/* Station card hover */
.station-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.station-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Gauge arc transition */
#gauge-voltage-arc,
#gauge-current-arc,
#gauge-power-arc {
    transition: stroke-dashoffset 1s ease-in-out;
}

/* Site map station slot */
.map-station-slot {
    cursor: pointer;
    transition: transform 0.2s;
}
.map-station-slot:hover {
    transform: scale(1.05);
}

/* Connection status indicator */
.ws-connected { background-color: #22c55e; box-shadow: 0 0 6px #22c55e; }
.ws-disconnected { background-color: #ef4444; box-shadow: 0 0 6px #ef4444; }
.ws-connecting { background-color: #eab308; box-shadow: 0 0 6px #eab308; }

/* EMP Tariff badges */
.tariff-standard { background: #3b82f620; color: #3b82f6; }
.tariff-vielfahrer { background: #a855f720; color: #a855f7; }

/* Modal overlay */
.modal-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* OCPI status badges */
.ocpi-connected { background: #22c55e20; color: #22c55e; }
.ocpi-planned { background: #eab30820; color: #eab308; }
.ocpi-offline { background: #ef444420; color: #ef4444; }
.ocpi-suspended { background: #6b728020; color: #6b7280; }

/* OCPI reconciliation badges */
.recon-match { background: #22c55e20; color: #22c55e; }
.recon-diff { background: #eab30820; color: #eab308; }
.recon-none { background: #ef444420; color: #ef4444; }

/* OCPI tab styles */
.ocpi-tab {
    cursor: pointer;
    transition: all 0.2s;
}
.ocpi-tab.active {
    color: #3b82f6;
    border-bottom: 2px solid #3b82f6;
}
.ocpi-tab:hover:not(.active) {
    color: #cbd5e1;
}

/* OCPI log entry animation */
@keyframes ocpi-flash {
    0% { background: #3b82f620; }
    100% { background: transparent; }
}
.ocpi-new-entry {
    animation: ocpi-flash 1s ease-out;
}