/* Extends assessment_review.css's variables/login-screen/tiny-btn and
   sales_pipeline.css's sp-toolbar/sp-primary-btn/sp-modal-* - same
   dark/gold CRM styling, just a plain list instead of a board.
   "Marketing module" card, 2026-08-24. */

.ctas-screen {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.ctas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-card {
  background: var(--rv-panel);
  border: 2px solid var(--rv-panel-light);
  border-radius: 10px;
  padding: 16px 18px;
}

.cta-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.cta-card-name { font-size: 15px; font-weight: bold; }
.cta-card-time { font-size: 11px; color: var(--rv-muted); }

.cta-card-preview {
  font-size: 12px;
  color: var(--rv-muted);
  margin-bottom: 10px;
}
.cta-card-preview strong { color: var(--rv-text); }

.cta-card-actions { display: flex; gap: 8px; }

.cta-field-hint { font-weight: normal; font-size: 11px; color: var(--rv-muted); }

.sp-modal-form label {
  display: block;
  font-size: 12px;
  color: var(--rv-muted);
  margin-bottom: 10px;
}

.cta-input,
.cta-textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border-radius: 6px;
  border: 2px solid var(--rv-panel-light);
  background: var(--rv-panel-dark);
  color: var(--rv-text);
  box-sizing: border-box;
}

.cta-textarea { resize: vertical; }

/* Modal grows tall once the form-fields builder below has a few rows in it
   - "Marketing module" card follow-up, 2026-08-24. */
#cta-modal .sp-modal { max-height: 88vh; overflow-y: auto; }

.cta-has-form-toggle { display: flex; align-items: center; gap: 8px; }
.cta-has-form-toggle input { margin: 0; }

.cta-form-fields-section {
  border: 1px dashed var(--rv-panel-light);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.cta-form-fields-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.cta-field-row {
  background: var(--rv-panel-dark);
  border: 1px solid var(--rv-panel-light);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-field-row-top,
.cta-field-row-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cta-field-row-top .cta-input { flex: 1 1 160px; margin-top: 0; }
.cta-field-row-mid .cta-input { flex: 1 1 160px; margin-top: 0; }

.cta-field-required {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rv-text);
  white-space: nowrap;
  margin: 0;
}
.cta-field-required input { margin: 0; }