/* Enhanced styles for the Simple Harmonic Motion simulator */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Global styles */
body {
  font-family: 'Poppins', sans-serif;
}

/* Increase canvas size by 1.5x */
#plots {
  height: 600px !important; /* 1.5x of original 400px */
  width: 975px !important; /* 1.5x of original 650px */
  margin: 20px auto !important;
}

#plotpanel {
  height: 80% !important;
  width: 975px !important; /* 1.5x of original 650px */
}

/* Background gradient */
#plottingPanel {
  background: linear-gradient(to bottom, #e0f7fa 0%, #ffffff 100%) !important;
}

/* Path styling for the panel */
#\.myPanel {
  fill: transparent !important;
  stroke: rgba(0, 0, 0, 0.1) !important;
}

/* Spring styling - thicker and metallic color */
.ejss_drawing2d_spring {
  stroke: #00bcd4 !important; /* Cyan color */
  stroke-width: 2px !important; /* Thicker spring */
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) !important;
}

/* Mass styling - change to rounded rectangle with gradient */
.ejss_drawing2d_shape[id="springBob"] {
  fill: url(#massGradient) !important;
  stroke: rgba(0, 0, 0, 0.3) !important;
  stroke-width: 1px !important;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)) !important;
  rx: 8px !important; /* Rounded corners */
  ry: 8px !important;
}

/* Font styling for all labels */
#animationPanel button, 
#animationPanel fieldset,
#animationPanel label,
#animationPanel input,
.ejss_drawing2d_label,
.ejss_drawing2d_text {
  font-family: 'Poppins', sans-serif !important;
}

/* Add SVG definitions for gradients */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
}

/* Adjust the wall color */
.ejss_drawing2d_shape[id="wall"] {
  fill: #455a64 !important;
}

/* Improve velocity arrow */
.ejss_drawing2d_arrow {
  stroke: #3f51b5 !important;
  fill: #3f51b5 !important;
}

/* Adjust grid lines for better visibility */
#plottingPanel\.gridX, #plottingPanel\.gridY {
  stroke: rgba(0, 0, 0, 0.1) !important;
  stroke-width: 0.5px !important;
}

/* Improve trace lines */
#plottingPanel path.trace {
  stroke-width: 2.5px !important;
}