/* Motor Box and Controls - Premium Hydro Style */

/* The Main Card */
.motor-box {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 32px;

  /* CHANGE THIS LINE: Top=24, Right=24, Bottom=12 (Tight), Left=24 */
  padding: 24px 24px 12px 24px !important;

  width: 340px;
  max-width: 94vw;
  margin: 10px auto 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

/* The Display Area (Inner Dark Box) */
.motor-blackbox {
  background: rgba(0, 0, 0, 0.4); /* Darker inset */
  border-radius: 20px;
  padding: 18px 20px;
  margin: 10px 10px 0px 10px;
  min-height: 102px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); /* Inner shadow for depth */
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Label & Edit Controls */
.motor-label-editable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  min-height: 40px;
}

.motor-label-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.motor-label {
  display: inline-block;
  color: #e2e8f0; /* Bright text */
  background: none;
  font-family: "League Spartan", sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 60px;
  transition: all 0.2s;
}

.motor-label[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-colour);
  outline: none;
}

/* Timer Display */
.motor-timer {
  color: #fff;
  font-family: "League Spartan", sans-serif;
  font-size: 2.8em;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 5px 0 0 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Glowing Status Indicator */
.motor-status-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #64748b; /* Default Gray */
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.2); /* Ring effect */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* Active Status Glows */
.motor-status-indicator.green {
  background: #22c55e;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.2),
    0 0 20px rgba(34, 197, 94, 0.6); /* Green Glow */
}

.motor-status-indicator.red {
  background: #ef4444;
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.2),
    0 0 20px rgba(239, 68, 68, 0.6); /* Red Glow */
}

.motor-status-indicator.yellow {
  background: #eab308;
  box-shadow:
    0 0 0 4px rgba(234, 179, 8, 0.2),
    0 0 20px rgba(234, 179, 8, 0.6);
}

/* Action Buttons Container */
.motor-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* Space between buttons */
  margin-top: 5px;
  padding-bottom: 5px;
}

/* Common Button Style */
.btn {
  border: none;
  outline: none;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Glassy Button Base */
  background: #334155;
  box-shadow:
    0 10px 20px -5px rgba(0, 0, 0, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.1);
}

.btn:active {
  transform: scale(0.95) translateY(2px);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
}

/* Start Button (Hydro Green Gradient) */
.start-btn {
  background: linear-gradient(145deg, #22c55e, #15803d);
  box-shadow: 0 8px 25px -5px rgba(34, 197, 94, 0.5);
}

.start-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Stop Button (Warning Red Gradient) */
.stop-btn {
  background: linear-gradient(145deg, #ef4444, #b91c1c);
  box-shadow: 0 8px 25px -5px rgba(239, 68, 68, 0.5);
}

.stop-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Icon Buttons (Edit, History) */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05); /* Subtle glass background */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn svg {
  width: 1.4em;
  height: 1.4em;
  display: block;
  fill: #94a3b8; /* Muted slate color */
  transition: fill 0.2s;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.icon-btn:hover svg {
  fill: #f1f5f9;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

/* Duration Text */
.motor-duration {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary-colour);
  text-align: center;
  opacity: 0.9;
}

/* === PREMIUM DIGITAL TIMER INPUT === */

/* The Container */
.timer-section {
  margin-top: 15px !important;
  margin-bottom: 5px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* The Input Field - Overriding JS inline styles */
input.timer-input {
  /* Dimensions & Spacing */
  width: 140px !important; /* Wider for easier tapping */
  padding: 12px 0 !important;
  font-size: 1.6rem !important; /* Large digital text */
  text-align: center !important;

  /* Premium Dark Tech Look */
  background: #020617 !important; /* Deepest black/blue */
  color: #38bdf8 !important; /* Neon Cyan text */
  font-family: "League Spartan", monospace !important;
  font-weight: 700 !important;

  /* Borders & Depth */
  border: 1px solid #1e293b !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.6),
    /* Sunken screen effect */ 0 1px 0 rgba(255, 255, 255, 0.05) !important; /* Bottom lip */

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;

  /* Fix for Firefox */
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Focus State - When user taps to type */
input.timer-input:focus {
  border-color: #0ea5e9 !important;
  background: #0f172a !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(14, 165, 233, 0.2) !important; /* Cyan Glow */
  transform: scale(1.02);
}

/* Placeholder text */
input.timer-input::placeholder {
  color: #334155 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Hide the ugly up/down arrows in Chrome/Safari */
input.timer-input::-webkit-outer-spin-button,
input.timer-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* === PREMIUM DIGITAL STEPPER === */

/* === WIDE CONTROL BAR STYLE === */

.timer-stepper {
  /* Match the margins of the box above so widths align */
  margin: 0 10px 8px 10px !important;

  display: flex;
  align-items: center;
  justify-content: space-between; /* Push buttons to far left/right */
  gap: 10px;

  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* The Display (NOW STRETCHES) */
.step-display {
  /* Remove fixed width */
  width: auto !important;

  /* Grow to fill the gap between buttons */
  flex: 1;

  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #020617; /* Deep Black */
  color: #38bdf8; /* Neon Cyan */
  font-family: "League Spartan", monospace;
  font-size: 1.6rem;
  font-weight: 700;

  border: 1px solid #1e293b;
  border-radius: 10px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);

  transition: all 0.2s;
  user-select: none;
}

/* AUTOMATIC "SET:" LABEL */
.step-display::before {
  content: "SET:"; /* The text to add */
  font-size: 0.45em; /* Smaller than the numbers */
  color: #64748b; /* Muted slate color */
  margin-right: 12px; /* Space between label and number */
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 4px; /* Visual alignment */
}

/* Placeholder style for "SET TIMER" */
.step-display[data-value="0"] {
  font-size: 1.1rem !important; /* Smaller text size */
  color: #64748b !important; /* Muted Grey */
  letter-spacing: 2px;
  text-shadow: none !important; /* Remove neon glow */
}

/* Also ensure the "SET:" label is hidden (You already have this, but keep it) */
.step-display[data-value="0"]::before {
  display: none;
}

/* Pulse animation */
.step-display.pulse {
  animation: numPulse 0.2s ease-out;
  color: #e0f2fe;
}
@keyframes numPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* The Buttons (+ / -) */
.step-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s;

  /* Metallic / Industrial Dark Look */
  background: linear-gradient(145deg, #334155, #1e293b);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
}

.step-btn svg {
  width: 24px;
  height: 24px;
  stroke: #cbd5e1;
  stroke-width: 3;
}

/* Button Press Effect */
.step-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Specific colors for actions */
.step-btn.minus:active svg {
  stroke: #ef4444;
}
.step-btn.plus:active svg {
  stroke: #22c55e;
}

/* "OFF" State style for display */
.step-display[data-value="0"] {
  color: #64748b; /* Dimmed out */
  text-shadow: none;
}