/* ============================================================
   FD CALCULATOR STYLES
   Tradesala ToolSpot
   ============================================================ */

/* ── Override Core Theme Color ── */
.container {
  /* Dark mode: softer, lighter red for better contrast */
  --tool-red: #ff6b6b;
  --tool-red-soft: rgba(255, 107, 107, 0.12);
  --fd-c1: #ff6b6b;
  --fd-c2: #ffb3b3;
}

html[data-theme="light"] .container {
  /* Light mode: aggressive Ferrari Red */
  --tool-red: #ff2800;
  --tool-red-soft: rgba(255, 40, 0, 0.12);
  --fd-c1: #ff2800;
  --fd-c2: #a81010;
}

/* ── Compounding Frequency Toggle ── */
.freq-toggle {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.freq-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.freq-btn:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.03);
}

.freq-btn.active {
  background: var(--surface-light);
  color: var(--text-1);
  border-color: var(--glass-border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

html[data-theme="light"] .freq-toggle {
  background: rgba(0,0,0,0.03);
}

html[data-theme="light"] .freq-btn:hover {
  color: var(--text-1);
  background: rgba(0,0,0,0.05);
}

html[data-theme="light"] .freq-btn.active {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ── Compounding Frequency Grid Override ── */
.freq-toggle-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0;
}

/* ── Tenure Dual Grid ── */
.tenure-grid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
  margin-bottom: 24px;
}

/* ── KPI Grid (replaces inline styles) ── */
.rd-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px; /* Safari fallback */
  gap: 16px;
  margin-bottom: 32px;
  min-width: 0;
}

/* Safari-compatible span: use explicit line numbers not span notation */
.kpi-span-full {
  grid-column: 1 / -1;
}

/* Prevent grid children overflowing on Safari */
.rd-kpi-grid > * {
  min-width: 0;
}

/* ── Mobile Layout Adjustments ── */
@media (max-width: 1024px) {
  /* Use display:block — more universally supported than changing grid columns */
  .main-grid {
    display: block !important;
  }
  .left-col,
  .right-col {
    display: block;
    width: 100%;
    min-width: 0;
    position: static;
    top: auto;
  }
  .right-col {
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px 80px;
  }
  /* Tenure grid: use display:block for best Safari compat */
  .tenure-grid {
    display: block !important;
  }
  .tenure-grid > * {
    margin-bottom: 16px;
  }
  .tenure-grid > *:last-child {
    margin-bottom: 0;
  }
  /* KPI grid: single column */
  .rd-kpi-grid {
    grid-template-columns: 1fr;
  }
  /* span-full collapses cleanly in 1-col grid */
  .kpi-span-full {
    grid-column: 1 / -1;
  }
  /* Frequency toggle: 2x2 on narrow screens */
  .freq-toggle-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 4px !important;
    gap: 4px !important;
  }
  .tool-header h1 {
    font-size: 2rem;
    letter-spacing: -1px;
  }
}