/* Renue Research Portal — Shared Styles
   Included by all authenticated pages (dashboard, surveys, profile, etc.)
   Brand colours, typography, form controls, buttons, cards, toasts.
*/

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* ===== Brand Colours (CSS Variables) ===== */
:root {
  --brand-dark: #062F56;
  --brand-teal: #0f766e;
  --brand-teal-light: #E6F5F3;
  --text-primary: #0B0B0B;
  --text-secondary: #666666;
  --text-muted: #858A88;
  --text-placeholder: #858A88;
  --border: #D7D7D7;
  --border-light: #EBEBEB;
  --bg-page: #F5F5F5;
  --bg-card: #ffffff;
  --success: #059669;
  --success-light: #D4F0D4;
  --error: #ef4444;
  --error-light: #FEF2F2;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

/* ===== Typography ===== */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Brand Header ===== */
.brand { text-align: center; margin-bottom: 24px; }
.brand-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-teal));
  display: flex; align-items: center; justify-content: center;
}
.brand-icon svg { width: 28px; height: 28px; color: #ffffff; }
.brand-name img { height: 36px; width: auto; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 24px;
}

/* ===== Buttons ===== */
.btn-primary {
  width: 100%; padding: 12px 24px;
  background: var(--brand-dark); color: #ffffff;
  border: none; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.btn-primary:hover { background: #041e3a; }
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ===== Form Controls ===== */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-size: 14px; font-weight: 500;
  color: var(--text-primary); margin-bottom: 8px;
}
.form-label-hint { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--border);
  font-size: 14px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-card);
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-placeholder); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.1);
}
.form-textarea { min-height: 80px; resize: vertical; }

/* ===== Toggle Buttons (Yes/No) ===== */
.toggle-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toggle-btn {
  padding: 7px 18px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.toggle-btn:hover { border-color: #B0B0B0; color: var(--text-primary); }
.toggle-btn.active-yes { background: var(--success-light); border-color: var(--success); color: var(--success); font-weight: 600; }
.toggle-btn.active-no { background: var(--error-light); border-color: var(--error); color: var(--error); font-weight: 600; }

/* ===== Rating Pills (1-5) ===== */
.rating-group { display: flex; gap: 6px; }
.rating-pill {
  width: 40px; height: 36px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; display: flex; align-items: center;
  justify-content: center; font-family: inherit;
}
.rating-pill:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.rating-pill.selected { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }

/* ===== Messages / Toasts ===== */
.message {
  padding: 12px 16px; margin-bottom: 20px; font-size: 13px;
  line-height: 1.5; display: none;
}
.message.success { background: var(--brand-teal-light); border: 1px solid var(--brand-teal); color: var(--brand-teal); }
.message.error { background: var(--error-light); border: 1px solid var(--error); color: var(--error); }

.toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--success); color: #fff;
  padding: 12px 24px; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(5,150,105,0.3);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: all 0.3s ease;
  pointer-events: none; z-index: 9999; font-family: inherit;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-error { background: var(--error); box-shadow: 0 8px 24px rgba(239,68,68,0.3); }

/* ===== Back Link ===== */
.back-link { text-align: center; margin-top: 24px; }
.back-link a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.back-link a:hover { color: var(--brand-dark); }
.back-link a svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ===== Question Numbers (Surveys) ===== */
.q-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-teal); color: #fff;
  font-size: 13px; font-weight: 600; margin-right: 10px;
  flex-shrink: 0; vertical-align: middle;
}

/* ===== Conditional Fields ===== */
.conditional-field { display: none; margin-top: 12px; }
.conditional-field.visible { display: block; }

/* ===== Form Dividers ===== */
.form-divider { border: none; border-top: 1px solid var(--border-light); margin: 24px 0; }

/* ===== Phase Badge ===== */
.phase-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-teal-light); color: var(--brand-teal);
  font-size: 11px; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase;
}
.phase-badge-dot {
  width: 6px; height: 6px; background: var(--brand-teal);
  border-radius: 50%; animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .form-row-compact { grid-template-columns: 1fr !important; }
}