/* ── FormFlow design system ─────────────────────────────────────────────
   Single brand palette + component polish on top of stock Bootstrap 5.3.
   Bootstrap component colors are compiled from Sass, so we override the
   per-component CSS custom properties (--bs-btn-*, etc.) rather than the
   global --bs-primary alone. No external assets (CSP: self only). */

:root {
  --ff-primary:        #4f46e5;   /* indigo 600 */
  --ff-primary-hover:  #4338ca;   /* indigo 700 */
  --ff-primary-soft:   #eef2ff;   /* indigo 50  */
  --ff-primary-border: #c7d2fe;   /* indigo 200 */
  --ff-body-bg:        #f6f7fb;
  --ff-card-border:    #e5e7eb;
  --ff-radius:         .625rem;
  --ff-shadow-sm:      0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --ff-shadow:         0 4px 12px rgba(16, 24, 40, .08);
}

body {
  background: var(--ff-body-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1f2937;
}

h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.01em; }

a { color: var(--ff-primary); }
a:hover { color: var(--ff-primary-hover); }

/* ── Buttons ── */
.btn { border-radius: .5rem; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--ff-primary);
  --bs-btn-border-color: var(--ff-primary);
  --bs-btn-hover-bg: var(--ff-primary-hover);
  --bs-btn-hover-border-color: var(--ff-primary-hover);
  --bs-btn-active-bg: var(--ff-primary-hover);
  --bs-btn-active-border-color: var(--ff-primary-hover);
  --bs-btn-disabled-bg: var(--ff-primary);
  --bs-btn-disabled-border-color: var(--ff-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ff-primary);
  --bs-btn-border-color: var(--ff-primary-border);
  --bs-btn-hover-bg: var(--ff-primary-soft);
  --bs-btn-hover-color: var(--ff-primary-hover);
  --bs-btn-hover-border-color: var(--ff-primary);
  --bs-btn-active-bg: var(--ff-primary);
  --bs-btn-active-border-color: var(--ff-primary);
}
.btn-outline-secondary { --bs-btn-border-color: #d1d5db; }

/* ── Focus rings ── */
.form-control:focus, .form-select:focus, .btn:focus-visible, .form-check-input:focus {
  border-color: var(--ff-primary-border);
  box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}
.form-check-input:checked { background-color: var(--ff-primary); border-color: var(--ff-primary); }

/* ── Cards / surfaces ── */
.card {
  border-color: var(--ff-card-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
}
.modal-content { border-radius: var(--ff-radius); border: none; box-shadow: var(--ff-shadow); }
.offcanvas { box-shadow: var(--ff-shadow); }
.alert { border-radius: .5rem; }

/* ── Navbar ── */
.navbar-ff {
  background: #fff;
  border-bottom: 1px solid var(--ff-card-border);
  box-shadow: var(--ff-shadow-sm);
}
.navbar-ff .navbar-brand {
  font-weight: 700;
  letter-spacing: -.02em;
  color: #111827;
}
.navbar-ff .navbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;
  background: var(--ff-primary);
  color: #fff;
  font-size: .95rem;
}
.navbar-ff .nav-link { color: #4b5563; font-weight: 500; border-radius: .5rem; }
.navbar-ff .nav-link:hover { color: #111827; background: #f3f4f6; }
.navbar-ff .nav-link.active { color: var(--ff-primary); background: var(--ff-primary-soft); }

/* ── Tables ── */
.table { --bs-table-hover-bg: #f9fafb; }
.table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  font-weight: 600;
  background: #f9fafb;
  border-bottom-width: 1px;
}
.table-wrap {
  background: #fff;
  border: 1px solid var(--ff-card-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
  overflow: hidden;
}
.table-wrap .table { margin-bottom: 0; }

/* ── Status badges (dot style) ── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 2rem;
}
.badge-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; }
.badge-status.published { background: #ecfdf5; color: #047857; }
.badge-status.published::before { background: #10b981; }
.badge-status.draft { background: #f3f4f6; color: #6b7280; }
.badge-status.draft::before { background: #9ca3af; }

/* ── Builder ── */
.nav-tabs .nav-link { color: #6b7280; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--ff-primary); font-weight: 600; }
.fld-card { background: #fff; border-radius: .5rem !important; }
.fld-card:hover { box-shadow: var(--ff-shadow-sm); }
.fld-card.expanded { box-shadow: 0 0 0 2px var(--ff-primary-border), var(--ff-shadow-sm) !important; }
.fld-card .fld-head .badge { font-weight: 500; }
#palette .btn {
  border-color: var(--ff-card-border);
  color: #374151;
  background: #fff;
}
#palette .btn:hover {
  border-color: var(--ff-primary-border);
  background: var(--ff-primary-soft);
  color: var(--ff-primary-hover);
}
#onboard-card { border-left: 3px solid var(--ff-primary); }