/* ============================================================
   RD CALCULATOR STYLES
   Tradesala ToolSpot | Rose Red Theme
   ============================================================ */

/* ── Override Core Theme Color ── */
.container {
  /* Dark mode: Standard Rose Red */
  --tool-red: #fb7185;
  --tool-red-soft: rgba(251, 113, 133, 0.12);
  --fd-c1: #fb7185;
  --fd-c2: #fecdd3;
}

html[data-theme="light"] .container {
  /* Light mode: Standard Rose Red */
  --tool-red: #e11d48;
  --tool-red-soft: rgba(225, 29, 72, 0.12);
  --fd-c1: #e11d48;
  --fd-c2: #991b1b;
}

/* ── Glow Lines Custom Coloring (using standard pink/crimson colors) ── */
.kpi-card.red::before {
  background: linear-gradient(90deg, #fb7185, #fecdd3) !important;
}

.kpi-card.crimson::before {
  background: linear-gradient(90deg, #991b1b, #ef4444) !important;
}

.kpi-card.purple::before {
  background: linear-gradient(90deg, #a78bfa, #c4b5fd) !important; /* Leave tax as purple */
}

/* ── 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;
}

/* ── Tenure Dual Grid (Desktop: side-by-side Years + Months) ── */
.tenure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px; /* Safari fallback */
  gap: 16px;
  margin-bottom: 24px;
}

/* Zero out the inline margin-bottom on input-groups inside tenure-grid */
.tenure-grid .input-group {
  margin-bottom: 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;
  }
  /* !important overrides inline style="margin-bottom: 0" on child items */
  .tenure-grid > * {
    margin-bottom: 16px !important;
  }
  .tenure-grid > *:last-child {
    margin-bottom: 0 !important;
  }
  /* 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;
  }
}