/* -----------------------------------------------------------------------------
 * APPLY TO: QuoteFlow (Bootstrap-compatible custom CSS)
 * TARGET: public/assets/css/style.css
 * PURPOSE: Minimal styling for setup screen; safe to keep even after Bootstrap.
 * -----------------------------------------------------------------------------
 */

:root {
  --qf-bg: #f7f7f8;
  --qf-card: #ffffff;
  --qf-border: rgba(0,0,0,0.08);
  --qf-text: #111827;
  --qf-subtle: rgba(17,24,39,0.7);
  --qf-ok: #16a34a;
  --qf-bad: #dc2626;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--qf-bg);
  color: var(--qf-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.4;
}

.qf-container {
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
}

.qf-subtle {
  color: var(--qf-subtle);
}

.qf-card {
  background: var(--qf-card);
  border: 1px solid var(--qf-border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

h1 { font-size: 28px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 12px; }

code {
  background: rgba(0,0,0,0.04);
  padding: 2px 6px;
  border-radius: 6px;
}

.qf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.qf-table th, .qf-table td {
  border-top: 1px solid var(--qf-border);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.qf-table thead th {
  border-top: none;
  font-weight: 600;
  color: rgba(17,24,39,0.85);
}

.qf-ok { color: var(--qf-ok); font-weight: 600; }
.qf-bad { color: var(--qf-bad); font-weight: 600; }