/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background: #f4f6f9;
  color: #222;
}

/* ── Nav / Header ────────────────────────────────────────────────────────── */
.study-header {
  background: #1A3E5C;
  color: #fff;
  padding: 10px 0;
  border-bottom: 4px solid #2C5F8A;
}
.study-header .header-title {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
.study-header .instructions-link {
  color: #a8d4f5;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.study-container {
  max-width: 820px;
  margin: 32px auto 60px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  padding: 32px 40px;
}

/* ── Section heading underline style ─────────────────────────────────────── */
.section-divider {
  font-size: 1rem;
  font-weight: bold;
  color: #2C5F8A;
  border-bottom: 3px solid #2C5F8A;
  padding-bottom: 4px;
  margin: 24px 0 12px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary-exp {
  background: #2C5F8A;
  color: #fff;
  border: none;
  padding: 10px 32px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary-exp:hover { background: #1A3E5C; }
.btn-continue {
  float: right;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-bar-wrap {
  height: 10px;
  background: #dce6ef;
  border-radius: 5px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.progress-bar-fill {
  height: 100%;
  background: #2C5F8A;
  transition: width .3s;
}

/* ── Selection counter badge ─────────────────────────────────────────────── */
.selection-counter {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: bold;
  color: #1A3E5C;
  margin-bottom: 6px;
}

/* ── Selection page (compact, fits one screen) ──────────────────────────── */
.selection-page {
  max-width: 720px;
  padding: 20px 28px;
}

/* ── Option row (selection list) ─────────────────────────────────────────── */
.option-row {
  display: flex;
  align-items: center;
  border: 1px solid #d0dce8;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 3px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.option-row:hover {
  border-color: #2C5F8A;
  background: #f0f6fc;
}
.option-row.selected {
  border-color: #2C5F8A;
  background: #dceef9;
}
.option-row.disabled {
  opacity: .45;
  cursor: not-allowed;
  background: #f5f5f5;
}
.option-row .radio-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #2C5F8A;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
}
.option-row.selected .radio-dot::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2C5F8A;
}
.option-row .option-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1A3E5C;
}
.option-row .portfolio-note {
  font-weight: normal;
  color: #667;
  font-size: 0.8rem;
}

/* ── Alert banner (limit reached) ───────────────────────────────────────── */
.limit-alert {
  display: none;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #856404;
}
.limit-alert.show { display: block; }

/* ── Statistics table (results screen) ──────────────────────────────────── */
.stats-table th {
  background: #2C5F8A;
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 10px 8px;
}
.stats-table td {
  text-align: center;
  padding: 9px 8px;
  font-size: 0.9rem;
}
.stats-table tr:nth-child(even) td { background: #f0f6fc; }
.stats-table .negative { color: #c0392b; font-weight: bold; }

/* ── Likert scale ───────────────────────────────────────────────────────── */
.likert-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  width: 100%;
}
.likert-row > label {
  font-size: 0.78rem;
  color: #555;
  flex: 0 0 80px;
  text-align: center;
}
.likert-row .options {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.78rem;
  flex: 1 1 0;
  min-width: 0;
}
.likert-option input { margin-bottom: 2px; }

/* ── Conditional follow-up text ─────────────────────────────────────────── */
.follow-up-block {
  display: none;
  margin-top: 8px;
}
.follow-up-block.show { display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.study-footer {
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-sidebar { background: #1A3E5C; min-height: 100vh; padding: 0; }
.admin-sidebar a { color: #a8d4f5; display: block; padding: 10px 20px; text-decoration: none; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: #2C5F8A; color: #fff; }
.admin-content { padding: 24px; }
.status-badge { padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: bold; }
.status-badge.active  { background: #d4edda; color: #155724; }
.status-badge.draft   { background: #e2e3e5; color: #383d41; }
.status-badge.paused  { background: #fff3cd; color: #856404; }
.status-badge.closed  { background: #f8d7da; color: #721c24; }