/* 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;
}

/* SoC bar when throttled — orange pulsing */
.soc-bar-throttled {
    background: linear-gradient(90deg, #f97316 0%, #eab308 50%, #f97316 100%);
    background-size: 200% 100%;
    animation: throttle-bar-move 2s linear infinite;
    transition: width 1s ease-in-out;
}
@keyframes throttle-bar-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 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-frequent-traveller { 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;
}

/* CPO status badges */
.cpo-online { background: #22c55e20; color: #22c55e; }
.cpo-offline { background: #ef444420; color: #ef4444; }
.cpo-pending { background: #eab30820; color: #eab308; }

/* CPO message direction badges */
.msg-in { background: #3b82f620; color: #3b82f6; }
.msg-out { background: #a855f720; color: #a855f7; }

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

/* CPO charge point card */
.cp-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.cp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* CPO log entry animation */
@keyframes cpo-flash {
    0% { background: #22c55e20; }
    100% { background: transparent; }
}
.cpo-new-entry {
    animation: cpo-flash 1s ease-out;
}

/* ===== Energy & Load Management ===== */

/* Throttle pulse on station cards */
@keyframes throttle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.throttle-pulse {
    animation: throttle-pulse 1.5s ease-in-out infinite;
}

/* Throttled session card highlight */
.throttled-session {
    border-left: 2px solid #f97316;
    padding-left: 6px;
    margin-left: -8px;
}

/* Price tick animation */
@keyframes price-tick-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.price-tick {
    animation: price-tick-anim 0.3s ease-out;
}

/* Savings counter pulse */
@keyframes savings-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; text-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
    100% { opacity: 1; }
}
.savings-counter {
    animation: savings-pulse 3s ease-in-out infinite;
}

/* Achievement unlock shimmer */
@keyframes achievement-shimmer {
    0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(234, 179, 8, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}
.achievement-unlocked {
    animation: achievement-shimmer 2s ease-in-out 1;
}

/* Achievement toast notification */
.achievement-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #1e293b;
    border: 1px solid #eab308;
    border-radius: 12px;
    padding: 16px 20px;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 179, 8, 0.2);
    transform: translateX(120%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.achievement-toast.show {
    transform: translateX(0);
}

/* Price ticker flash */
@keyframes ticker-flash {
    0% { background: #eab30830; }
    100% { background: transparent; }
}
.ticker-flash {
    animation: ticker-flash 1s ease-out;
}

/* Grid power slider orange accent */
#grid-power-slider::-webkit-slider-thumb,
#energy-grid-slider::-webkit-slider-thumb {
    background: #f97316;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}
#grid-power-slider::-webkit-slider-thumb:hover,
#energy-grid-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.8);
}
#grid-power-slider::-moz-range-thumb,
#energy-grid-slider::-moz-range-thumb {
    background: #f97316;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}