/*
  Camper Dashboard
  Path: css/dashboard.css

  Reuses .camper-card, .field, .btn, .status-tag from the existing
  design system. This file only adds what's new: the dashboard shell,
  locked-field request rows, announcement cards, and the feedback form.
*/

.dash-shell {
  max-width: 760px;
  padding-block: 48px 96px;
}

.dash-card-header {
  margin-bottom: 40px;
}

.dash-section {
  margin-bottom: 44px;
}

.dash-section h3 {
  margin-bottom: 4px;
}

.dash-section .section-hint {
  margin-bottom: 20px;
}

.dash-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .dash-field-grid { grid-template-columns: 1fr; }
}

.dash-save-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* Locked fields, read only with a request-change affordance */

.locked-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  margin-bottom: 10px;
}

.locked-field-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.locked-field-value {
  font-weight: 600;
}

.locked-field-pending {
  font-size: var(--fs-xs);
  color: var(--color-warning);
  margin-top: 4px;
}

.request-change-form {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  background-color: var(--color-surface-raised);
  margin-top: 10px;
  display: none;
}

.request-change-form.is-open {
  display: block;
}

/* Announcements */

.announcement-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
  background-color: var(--color-surface);
}

.announcement-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Feedback */

.feedback-rating-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.feedback-rating-option {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.feedback-rating-option.is-selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.feedback-submitted-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background-color: var(--color-success-bg);
  color: var(--color-sage);
  font-weight: 600;
}
/* Consent box */

.consent-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background-color: var(--color-surface);
  margin-bottom: 20px;
}

.consent-link-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.consent-link-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.consent-status-pending {
  color: var(--color-warning);
  font-weight: 600;
}

.consent-status-done {
  color: var(--color-sage);
  font-weight: 600;
}