/* ROI page-specific polish aligned with Styling Guide */

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

.anim-pop-in { animation: pop-in 0.5s ease-out both; }

.calculator-card {
  transition: all 0.3s ease;
  animation: float 6s ease-in-out infinite;
  box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
}

.calculator-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.4); }

/* Fancy inputs */
.fancy-input {
  margin-top: 0.25rem;
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dark .fancy-input { background-color: #111827; border-color: #374151; color: #fff; }

.fancy-input:focus { outline: none; border-color: #93c5fd; transform: scale(1.02); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }

/* Tabs and selectors */
.tab-button.active { background-color: #2563eb !important; color: #fff !important; }

.roi-type-option { transition: all 0.2s ease; }
.roi-type-option.selected { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); }
.dark .roi-type-option.selected { background-color: rgba(59, 130, 246, 0.2); }

/* Table hover */
#cash-flow-body tr:hover { background-color: rgba(59, 130, 246, 0.06); }
.dark #cash-flow-body tr:hover { background-color: rgba(59, 130, 246, 0.12); }

/* Border top utility for related section if not using Tailwind border classes inline */
.border-top { border-top: 1px solid rgba(148, 163, 184, 0.35); }
.dark .border-top { border-top-color: rgba(71, 85, 105, 0.7); }

/* Calculation mode visibility */
.calculation-mode { display: none; }
.calculation-mode.active { display: block; }