/* ============================================================================
   SCDC DocuSign Integration - Style additions
   Append to (or load alongside) existing dashboard style.css.
   Uses the SCDC brand: black background, gold (#C1AC51), white text.
   ============================================================================ */

/* ---- Onboarding form layout ---- */
.onboarding-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  background: #000;
}
.onboarding-card {
  width: 100%;
  max-width: 640px;
  background: #0d0d0d;
  border: 1px solid #C1AC51;
  border-radius: 12px;
  padding: 40px;
  color: #fff;
  box-shadow: 0 4px 32px rgba(193, 172, 81, 0.12);
}
.onboarding-logo {
  display: block;
  max-width: 180px;
  margin: 0 auto 24px;
}
.onboarding-card h1 {
  color: #C1AC51;
  text-align: center;
  font-size: 1.75rem;
  margin: 0 0 12px;
}
.onboarding-intro {
  text-align: center;
  color: #ccc;
  margin: 0 0 32px;
  line-height: 1.5;
}

/* ---- Form fields ---- */
.form-row { display: block; margin-bottom: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .onboarding-card { padding: 24px; }
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  color: #C1AC51;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.field .req { color: #d44; margin-left: 2px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.field input:focus {
  outline: none;
  border-color: #C1AC51;
  box-shadow: 0 0 0 2px rgba(193, 172, 81, 0.2);
}
.field input.field-invalid { border-color: #d44; }
.field-error { display: block; color: #d44; font-size: 0.85rem; margin-top: 4px; min-height: 1em; }
.field-help  { display: block; color: #888; font-size: 0.8rem; margin-top: 4px; }

/* ---- Consent checkboxes ---- */
.consent-block {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  background: #111;
}
.consent-block legend {
  color: #C1AC51;
  font-weight: 600;
  padding: 0 8px;
  font-size: 0.95rem;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  color: #ddd;
  font-size: 0.9rem;
  line-height: 1.5;
}
.consent:last-child { margin-bottom: 0; }
.consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #C1AC51;
  cursor: pointer;
}
.consent strong { color: #fff; }
.consent a      { color: #C1AC51; }

/* ---- Buttons ---- */
.btn-primary {
  display: block;
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(90deg, #C1AC51, #d4bf6c);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.02em;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(193, 172, 81, 0.3);
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  padding: 8px 16px;
  background: #1a1a1a;
  color: #C1AC51;
  border: 1px solid #C1AC51;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-link {
  background: none;
  border: none;
  color: #C1AC51;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
  font-size: 0.9rem;
}
.btn-link.danger { color: #d44; }

.form-footer {
  text-align: center;
  color: #777;
  font-size: 0.8rem;
  margin: 20px 0 0;
}

/* ---- Flash messages ---- */
.flash-stack { margin: 0 0 20px; }
.flash {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.flash-error    { background: rgba(220, 68, 68, 0.15); color: #f88; border-left: 3px solid #d44; }
.flash-warning  { background: rgba(212, 175, 55, 0.15); color: #f5d97a; border-left: 3px solid #C1AC51; }
.flash-success  { background: rgba(60, 180, 100, 0.15); color: #8c8; border-left: 3px solid #4a4; }
.flash-info     { background: rgba(100, 150, 220, 0.15); color: #8bf; border-left: 3px solid #48a; }

/* ---- Onboarding complete page ---- */
.onboarding-complete-card { text-align: center; }
.success-icon { margin: 0 auto 20px; }
.success-message { color: #ddd; font-size: 1.05rem; line-height: 1.5; margin: 0 0 24px; }
.generic-thanks-detail { color: #ccc; font-size: 0.95rem; margin: 24px 0; line-height: 1.5; }

#status-message {
  padding: 16px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #ccc;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.status-pending { border-left: 3px solid #C1AC51; }
.status-success { border-left: 3px solid #4a4; color: #8c8; }
.status-warning { border-left: 3px solid #d44; color: #f88; }
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #444;
  border-top-color: #C1AC51;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.email-backup-note { font-size: 0.85rem; color: #888; margin-top: 24px; line-height: 1.5; }

/* ---- Admin DocuSign tab ---- */
.admin-section h1   { color: #C1AC51; margin-top: 0; }
.admin-section .muted { color: #888; }
.admin-section .small { font-size: 0.85rem; }

.admin-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px; align-items: center;
}
.admin-filters input,
.admin-filters select {
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
}

.admin-table {
  width: 100%; border-collapse: collapse;
  background: #0d0d0d; color: #ddd; font-size: 0.85rem;
}
.admin-table th,
.admin-table td { padding: 8px 10px; border-bottom: 1px solid #222; text-align: left; vertical-align: middle; }
.admin-table th { color: #C1AC51; font-weight: 600; background: #111; }
.admin-table .empty { text-align: center; color: #666; padding: 32px; }
.admin-table .mono  { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

.status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}
.status-docusign_pending     { background: rgba(212,175,55,0.2);  color: #f5d97a; }
.status-docusign_redirected  { background: rgba(100,150,220,0.2); color: #8bf;    }
.status-docusign_completed   { background: rgba(60,180,100,0.2);  color: #8c8;    }
.status-portal_sent          { background: rgba(212,175,55,0.2);  color: #f5d97a; }
.status-portal_completed     { background: rgba(60,180,100,0.2);  color: #8c8;    }
.status-withdrawn            { background: rgba(120,120,120,0.2); color: #aaa;    }
.status-expired              { background: rgba(220,68,68,0.2);   color: #f88;    }

.consent-record { background: #0d0d0d; padding: 24px; border-radius: 8px; margin: 20px 0; }
.consent-record h2 { color: #C1AC51; font-size: 1.1rem; margin: 24px 0 12px; }
.consent-record h2:first-child { margin-top: 0; }
.kv {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 16px; margin: 0; color: #ddd; font-size: 0.9rem;
}
.kv dt { color: #888; }
.kv dd { margin: 0; }