/* Garage Theme CSS for OBD2 Assistant - Enhanced Workshop Aesthetic */

:root {
  /* Workshop/Garage Colors */
  --color-asphalt: #2c2c2c;
  --color-concrete: #4a4a4a;
  --color-oil-stain: #1a1a1a;
  --color-tool-red: #dc2626;
  --color-safety-yellow: #fbbf24;
  --color-workshop-blue: #2563eb;
  --color-grease: #0f0f0f;
  --color-chrome: #e5e7eb;
  --color-rust: #92400e;
  --color-rubber: #171717;
  --color-steel: #71717a;
  --color-warning-orange: #ff6b35;
  --color-hydraulic-fluid: #00d4ff;
  
  /* Textures and Gradients */
  --gradient-metal: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #606060 51%, #404040 100%);
  --gradient-carbon: repeating-linear-gradient(45deg, #2a2a2a 0px, #2a2a2a 2px, #1a1a1a 2px, #1a1a1a 4px);
  --gradient-diamond-plate: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.1) 3px, rgba(255,255,255,0.1) 6px),
                            repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px);
}

/* Enhanced Workshop Background */
body {
  background-color: var(--color-oil-stain);
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    var(--gradient-diamond-plate),
    linear-gradient(180deg, var(--color-grease) 0%, var(--color-asphalt) 100%);
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.01) 100px,
      rgba(255, 255, 255, 0.01) 101px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.01) 100px,
      rgba(255, 255, 255, 0.01) 101px
    );
  pointer-events: none;
  z-index: 1;
}

/* Workshop Floor Pattern with Oil Stains */
.workshop-floor {
  background-color: var(--color-concrete);
  background-image: 
    radial-gradient(ellipse at 25% 25%, rgba(0, 0, 0, 0.2) 0%, transparent 25%),
    radial-gradient(ellipse at 75% 75%, rgba(0, 0, 0, 0.15) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 35%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 40px
    );
  position: relative;
}

/* Tool Box Style Cards - Enhanced */
.tool-card {
  background: linear-gradient(135deg, var(--color-concrete), var(--color-asphalt));
  border: 2px solid var(--color-tool-red);
  border-radius: 8px;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-safety-yellow),
    var(--color-safety-yellow) 10px,
    var(--color-oil-stain) 10px,
    var(--color-oil-stain) 20px
  );
}

.tool-card::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.5) 50%, 
    transparent
  );
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 12px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 107, 53, 0.2);
}

/* Metal Plate Headers */
.metal-plate {
  background: var(--gradient-metal);
  border: 2px solid var(--color-steel);
  border-radius: 4px;
  padding: 15px 20px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
}

.metal-plate::before,
.metal-plate::after {
  content: '⬢';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-steel);
  font-size: 20px;
}

.metal-plate::before {
  left: 10px;
}

.metal-plate::after {
  right: 10px;
}

/* Garage Door Animation - Enhanced */
.garage-door {
  background: 
    repeating-linear-gradient(
      180deg,
      var(--color-chrome) 0px,
      var(--color-chrome) 2px,
      var(--color-steel) 2px,
      var(--color-steel) 18px,
      var(--color-concrete) 18px,
      var(--color-concrete) 20px
    );
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.garage-door::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--color-warning-orange);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.garage-door.open {
  transform: translateY(-100%);
}

/* Chrome Text Effect - Enhanced */
.chrome-text {
  background: linear-gradient(
    180deg,
    #eee 0%,
    #ccc 45%,
    #999 50%,
    #777 55%,
    #555 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 -1px 0 rgba(0, 0, 0, 0.7);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Diagnostic Terminal Style - Enhanced */
.diagnostic-terminal {
  background: var(--color-grease);
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.03) 2px,
      rgba(0, 255, 0, 0.03) 4px
    );
  border: 2px solid var(--color-workshop-blue);
  border-radius: 4px;
  padding: 20px;
  font-family: 'Courier New', monospace;
  color: #00ff00;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  box-shadow: 
    inset 0 0 30px rgba(0, 255, 0, 0.1),
    inset 0 0 60px rgba(37, 99, 235, 0.05),
    0 0 20px rgba(37, 99, 235, 0.3);
  position: relative;
  overflow: hidden;
}

.diagnostic-terminal::before {
  content: '>';
  color: var(--color-safety-yellow);
  animation: blink 1s infinite;
}

.diagnostic-terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 0, 0.1),
    transparent
  );
  animation: scan 8s linear infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Gauge Style Elements - Enhanced */
.gauge {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 50%),
    radial-gradient(circle at center, var(--color-chrome), var(--color-concrete));
  border: 4px solid var(--color-asphalt);
  border-radius: 50%;
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.4),
    inset 0 -5px 10px rgba(0, 0, 0, 0.3),
    inset 0 5px 10px rgba(255, 255, 255, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.5);
  position: relative;
}

.gauge::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 50%;
}

/* Warning Stripe - Enhanced */
.warning-stripe {
  background: repeating-linear-gradient(
    45deg,
    var(--color-safety-yellow),
    var(--color-safety-yellow) 10px,
    var(--color-oil-stain) 10px,
    var(--color-oil-stain) 20px
  );
  padding: 10px;
  border: 2px solid var(--color-safety-yellow);
  box-shadow: 
    0 0 10px rgba(251, 191, 36, 0.3),
    inset 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.warning-stripe::before,
.warning-stripe::after {
  content: '⚠';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-oil-stain);
}

.warning-stripe::before {
  left: 20px;
}

.warning-stripe::after {
  right: 20px;
}

/* Oil Stain Effect - Enhanced */
.oil-stain {
  position: relative;
}

.oil-stain::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 20px;
  background: 
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 60%),
    radial-gradient(ellipse at 30% 50%, rgba(138, 43, 226, 0.1), transparent 40%),
    radial-gradient(ellipse at 70% 50%, rgba(0, 212, 255, 0.1), transparent 40%);
  filter: blur(8px);
}

/* Carbon Fiber Texture */
.carbon-fiber {
  background: 
    var(--gradient-carbon),
    var(--color-rubber);
  border: 1px solid var(--color-steel);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Hydraulic Button */
.hydraulic-button {
  background: linear-gradient(135deg, var(--color-hydraulic-fluid), var(--color-workshop-blue));
  border: 2px solid var(--color-steel);
  border-radius: 4px;
  padding: 12px 24px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.hydraulic-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.hydraulic-button:hover::before {
  left: 100%;
}

.hydraulic-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 212, 255, 0.3);
}

/* Tire Track Pattern */
.tire-tracks {
  position: relative;
  overflow: hidden;
}

.tire-tracks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 20px,
    rgba(0, 0, 0, 0.1) 20px,
    rgba(0, 0, 0, 0.1) 22px,
    transparent 22px,
    transparent 24px,
    rgba(0, 0, 0, 0.1) 24px,
    rgba(0, 0, 0, 0.1) 26px,
    transparent 26px,
    transparent 46px
  );
  opacity: 0.5;
  pointer-events: none;
}

/* Speedometer Animation */
@keyframes speedometer-needle {
  0% { transform: rotate(-135deg); }
  50% { transform: rotate(45deg); }
  100% { transform: rotate(-135deg); }
}

.speedometer-needle {
  animation: speedometer-needle 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .metal-plate {
    padding: 10px 15px;
    letter-spacing: 1px;
  }
  
  .chrome-text {
    letter-spacing: 1px;
  }
  
  .warning-stripe::before,
  .warning-stripe::after {
    display: none;
  }
}