/* finance-calculators.css
   Modern light & dark theme variables + component styles
   Place in: wp-content/plugins/finance-calculators/assets/css/finance-calculators.css
*/

/* Light theme defaults */
:root{
  --fc-bg: #f6f8fb;
  --fc-card: #ffffff;
  --fc-accent: #2563eb;
  --fc-accent-2: #06b6d4;
  --fc-text: #0b1220;
  --fc-muted: #667085;
  --fc-border: #e6eef6;
  --fc-success: #16a34a;
  --fc-danger: #ef4444;
  --fc-radius: 12px;
  --fc-gap: 14px;
  --fc-shadow: 0 6px 18px rgba(16,24,40,0.06);
  --fc-input-bg: #fbfdff;
  --fc-input-border: #e6eef6;
}

/* Dark theme overrides */
html[data-fc-theme="dark"]{
  --fc-bg: #071027;
  --fc-card: #071127; /* slightly different so card stands out */
  --fc-accent: #60a5fa;
  --fc-accent-2: #06b6d4;
  --fc-text: #e6eef8;
  --fc-muted: #93a4b5;
  --fc-border: rgba(255,255,255,0.06);
  --fc-shadow: 0 8px 26px rgba(2,6,23,0.6);
  --fc-input-bg: rgba(255,255,255,0.02);
  --fc-input-border: rgba(255,255,255,0.06);
}

/* Component base */
.fc-calculator{
  background:var(--fc-card);
  border-radius:var(--fc-radius);
  padding:18px;
  box-shadow:var(--fc-shadow);
  margin:18px 0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fc-text);
  border:1px solid var(--fc-border);
}

/* Header */
.fc-calculator h3{
  margin:0 0 12px 0;
  font-size:1.06rem;
  color:var(--fc-accent);
  font-weight:700;
}

/* Form grid */
.fc-form{ display:block; }
.fc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--fc-gap); }
.fc-form label{ display:block; font-size:.95rem; color:var(--fc-text); }
.fc-form input[type=number],
.fc-form input[type=text],
.fc-form select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--fc-input-border);
  border-radius:8px;
  margin-top:8px;
  background:var(--fc-input-bg);
  color:var(--fc-text);
  box-sizing:border-box;
  outline:none;
  transition:box-shadow .12s, border-color .12s, transform .06s;
}
.fc-form input:focus, .fc-form select:focus{
  box-shadow:0 4px 18px rgba(37,99,235,0.12);
  border-color:var(--fc-accent);
  transform:translateY(-1px);
}

/* Submit */
.fc-submit{
  margin-top:14px;
  padding:10px 14px;
  border:none; color:white;
  background:linear-gradient(90deg,var(--fc-accent),var(--fc-accent-2));
  border-radius:10px; cursor:pointer; font-weight:700;
  box-shadow:0 6px 18px rgba(37,99,235,0.12);
}
.fc-submit:hover{ transform:translateY(-1px); }

/* Results */
.fc-results{ margin-top:12px; color:var(--fc-text); }
.fc-small{ font-size:.95rem; color:var(--fc-muted); }
.fc-note{ font-size:.9rem; color:var(--fc-muted); margin-top:8px; }

/* Table */
.fc-table{ width:100%; border-collapse:collapse; margin-top:12px; max-height:320px; overflow:auto; display:block; border-radius:8px; background:transparent; }
.fc-table thead th{ position:sticky; top:0; background:transparent; color:var(--fc-text); }
.fc-table th, .fc-table td{
  border-bottom:1px solid transparent;
  padding:10px 12px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  color:var(--fc-text);
}
/* subtle divider */
.fc-calculator .fc-table tr + tr td { border-top: 1px solid var(--fc-border); }

/* Chart canvas */
.fc-chart{ width:100%; height:300px; display:block; border-radius:8px; }

/* Debt rows & add/remove button */
.fc-debt-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.fc-debt-row input[type="text"], .fc-debt-row input[type="number"]{
  padding:8px 10px; border-radius:8px; border:1px solid var(--fc-input-border); background:var(--fc-input-bg);
}
.fc-add-debt { margin-top:10px; padding:8px 10px; border-radius:8px; border:none; background:linear-gradient(90deg,var(--fc-accent),var(--fc-accent-2)); color:#fff; cursor:pointer; }
.fc-debt-remove { background:transparent; border:none; color:var(--fc-danger); cursor:pointer; font-weight:700; padding:6px; border-radius:6px; }

/* ---- Export CSV button & debt/car UI ---- */
.fc-export-wrap { display:flex; gap:8px; align-items:center; margin-top:6px; }
button.fc-export-csv{ padding:8px 12px; border-radius:8px; border:none; background:linear-gradient(90deg,var(--fc-accent),var(--fc-accent-2)); color:#fff; cursor:pointer; font-weight:700; }
.fc-debt-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.fc-debt-row input[type="text"], .fc-debt-row input[type="number"]{ padding:8px 10px; border-radius:8px; border:1px solid var(--fc-input-border); background:var(--fc-input-bg); }
.fc-add-debt { margin-top:10px; padding:8px 10px; border-radius:8px; border:none; background:linear-gradient(90deg,var(--fc-accent),var(--fc-accent-2)); color:#fff; cursor:pointer; }
.fc-debt-remove { background:transparent; border:none; color:var(--fc-danger); cursor:pointer; font-weight:700; padding:6px; border-radius:6px; }


/* Responsive tweaks */
@media (max-width:640px){
  .fc-grid{ grid-template-columns:1fr; }
  .fc-form input, .fc-form select{ font-size:1rem; }
}