/* ===== Custom styles for Infra Designer ===== */

:root {
  --color-brand: #6366f1;
  --color-nutanix: #024DA1;
  --color-vmware: #00B7A8;
  --color-kubernetes: #326CE5;
}

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

/* Platform card glow effect on hover */
.platform-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-card:hover {
  transform: translateY(-4px);
}
.platform-card.active {
  ring: 2px;
}

/* Vendor card */
.vendor-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vendor-card:hover {
  transform: translateY(-2px);
}

/* Step indicator line */
.step-line {
  height: 2px;
  flex: 1;
  transition: background-color 0.3s ease;
}

/* Diagram container */
.diagram-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.35s ease forwards;
}

/* Pulse for generate button */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }

/* Range input */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #334155;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: 2px solid #fff;
}

/* Number input arrows hidden on mobile */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 0.5;
}

/* Toast notification */
@keyframes slideInOut {
  0%   { transform: translateY(100px); opacity: 0; }
  15%  { transform: translateY(0); opacity: 1; }
  85%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100px); opacity: 0; }
}
.toast { animation: slideInOut 3s ease forwards; }

/* Mobile nav */
@media (max-width: 640px) {
  .diagram-svg { min-width: 700px; }
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
}