/* Average Return page-specific styles aligned with the design system */

.calculator-card {
  box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.25);
}

.calculator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(59, 130, 246, 0.35);
}

.anim-pop-in {
  animation: anim-pop-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes anim-pop-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Inputs */
.fancy-input,
input.period-value,
input.cash-flow {
  width: 100%;
  appearance: textfield;
  -moz-appearance: textfield;
  background: rgba(255, 255, 255, 0.8);
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.5rem; /* 8px */
  padding: 0.625rem 0.75rem; /* 10px 12px */
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.fancy-input:focus,
input.period-value:focus,
input.cash-flow:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.95);
}

/* Dark mode */
.dark .fancy-input,
.dark input.period-value,
.dark input.cash-flow {
  background: rgba(31, 41, 55, 0.6);
  border-color: rgba(71, 85, 105, 0.6);
}

.dark .fancy-input:focus,
.dark input.period-value:focus,
.dark input.cash-flow:focus {
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(147, 197, 253, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Tab state helpers hooked by JS with classes existing in HTML */
.calculation-mode { display: none; }
.calculation-mode.active { display: block; }
.calculation-mode.hidden { display: none; }
.calculation-tabs .tab-button.active {
  background: rgb(37, 99, 235); /* blue-600 */
  color: #fff;
}

.return-type-selector .return-type-option.selected {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

/* Tables */
table {
  border-collapse: collapse;
}
thead th { font-weight: 600; }
tbody tr:hover { background: rgba(59, 130, 246, 0.06); }

/* Buttons */
.remove-btn { line-height: 1; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.8); color: #1f2937; transition: background-color 160ms ease, border-color 160ms ease; }
.remove-btn:hover { background: rgba(243,244,246,0.9); }
.dark .remove-btn { background: rgba(31,41,55,0.6); color: #E5E7EB; border-color: rgba(71,85,105,0.6); }
.dark .remove-btn:hover { background: rgba(55,65,81,0.7); }

.add-period-btn {
  line-height: 1.2;
}