/* Vehicle Display Styles */
.vehrow{margin-top:8px;position:relative}
.veh-info{display:flex;justify-content:space-between;align-items:center;gap:8px}
.veh-left{display:flex;gap:8px;align-items:center}
.veh-right{display:flex;gap:4px;align-items:center}
.vehname{font-size:13px;font-weight:500}
.vehsoc{font-weight:700;color:#fff;text-shadow:0 0 3px rgba(0,0,0,0.8)}
.veh-kwh{font-size:11px;opacity:0.7}
.veh-charging-power{font-size:12px;font-weight:700;color:#ff5c5c;text-shadow:0 0 3px rgba(0,0,0,0.8)}
.vehbar{width:100%;height:14px;background:#0e1622;border:1px solid #1b293c;border-radius:7px;position:relative;margin-top:2px}
.vehfill{height:100%;width:0%;border-radius:7px;background:#36d275}
.vehbadge{font-size:11px;border-radius:999px;border:1px solid var(--edge);padding:2px 6px}
.vehbadge.stale{background:#1a180d;color:#ffe17a}
.vehbadge.dead{background:#1a0d0d;color:#ff8a8a}

/* Electric Charging Animation - Many Diagonal Stripes */
@-webkit-keyframes electric-flow {
  0% { background-position: 0 0; }
  100% { background-position: 160px 0; }
}
@keyframes electric-flow {
  0% { background-position: 0 0; }
  100% { background-position: 160px 0; }
}

.vehfill.charging {
  -webkit-animation: electric-flow 6s linear infinite;
  animation: electric-flow 6s linear infinite;
}

/* Red/Yellow stripes for critical SOC (< 10%) */
.vehfill.charging.critical {
  background-image: repeating-linear-gradient(
    45deg,
    #ff5c5c 0px,
    #ff5c5c 4px,
    #ffd75e 4px,
    #ffd75e 8px
  );
}

/* Yellow/Green stripes for low SOC (10-25%) */
.vehfill.charging.low {
  background-image: repeating-linear-gradient(
    45deg,
    #ffd75e 0px,
    #ffd75e 4px,
    #36d275 4px,
    #36d275 8px
  );
}

/* Green/Cyan stripes for normal SOC (> 25%) */
.vehfill.charging.normal {
  background-image: repeating-linear-gradient(
    45deg,
    #36d275 0px,
    #36d275 4px,
    #00d9ff 4px,
    #00d9ff 8px
  );
}