/**
 * 100x Life Planning System - Assessment Styles
 * Styles for assessment forms, coach checklist, user viewer, and import diff
 */

/* ── Assessment Modal ─────────────────────────────────────────────── */

.assessment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.assessment-modal {
  max-width: 800px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.assessment-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assessment-modal .modal-header h3 {
  font-family: var(--font-heading);
  font-size: calc(1.25rem + var(--text-bump));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assessment-modal-close {
  background: none;
  border: none;
  font-size: calc(1.5rem + var(--text-bump));
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.assessment-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.assessment-modal-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ── Assessment Form Shared ───────────────────────────────────────── */

.assessment-form-desc {
  color: var(--text-secondary);
  font-size: calc(0.875rem + var(--text-bump));
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ── Foundation Assessment Form ───────────────────────────────────── */

.foundation-csv-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.foundation-score-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.foundation-grid-header {
  display: grid;
  grid-template-columns: 1fr 60px 100px 100px 100px;
  gap: 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary);
  align-items: center;
}

.foundation-grid-row {
  display: grid;
  grid-template-columns: 1fr 60px 100px 100px 100px;
  gap: 0;
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border-light);
  align-items: center;
}

.foundation-grid-row:nth-child(even) {
  background: var(--bg-secondary);
}

.foundation-area-col {
  font-size: calc(0.85rem + var(--text-bump));
  padding-right: 0.5rem;
}

.foundation-score-col,
.foundation-rater-col {
  text-align: center;
}

.foundation-score-input {
  width: 50px;
  padding: 0.25rem;
  text-align: center;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: calc(0.85rem + var(--text-bump));
  background: var(--bg-primary);
  color: var(--text-dark);
}

.foundation-score-input:focus {
  outline: none;
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(72, 156, 184, 0.2);
}

.foundation-rater-name {
  width: 90px;
  padding: 0.25rem;
  text-align: center;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: calc(0.8rem + var(--text-bump));
  background: var(--bg-primary);
  color: var(--text-dark);
}

.foundation-rater-name:focus {
  outline: none;
  border-color: var(--teal-accent);
}

/* ── CliftonStrengths Form ────────────────────────────────────────── */

.clifton-theme-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.clifton-theme-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
}

.clifton-theme-row.required {
  font-weight: 500;
}

.clifton-rank {
  width: 28px;
  text-align: right;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  font-weight: 600;
}

.clifton-theme-row.required .clifton-rank {
  color: var(--teal-accent);
}

.clifton-theme-select {
  flex: 1;
  max-width: 250px;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.85rem + var(--text-bump));
  background: var(--bg-primary);
  color: var(--text-dark);
}

.clifton-theme-select:focus {
  outline: none;
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(72, 156, 184, 0.2);
}

.clifton-domain {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  min-width: 140px;
}

.clifton-toggle-optional {
  margin-top: 0.75rem;
}

/* ── Strengths Matrix Form ────────────────────────────────────────── */

.matrix-field {
  margin-bottom: 1rem;
}

.matrix-label {
  display: block;
  font-weight: 600;
  font-size: calc(0.875rem + var(--text-bump));
  margin-bottom: 0.375rem;
  color: var(--text-dark);
}

.matrix-textarea {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.85rem + var(--text-bump));
  font-family: var(--font-body);
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

.matrix-textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(72, 156, 184, 0.2);
}

/* ── Life Story Form ──────────────────────────────────────────────── */

.lifestory-textarea {
  width: 100%;
  min-height: 300px;
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.9rem + var(--text-bump));
  font-family: var(--font-body);
  line-height: 1.6;
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

.lifestory-textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(72, 156, 184, 0.2);
}

/* ── Coach Assessment Checklist ───────────────────────────────────── */

.assessment-checklist {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.assessment-checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.assessment-checklist-header h3 {
  font-family: var(--font-heading);
  font-size: calc(1.1rem + var(--text-bump));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assessment-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.assessment-progress-fill {
  height: 100%;
  background: var(--teal-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.assessment-progress-label {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assessment-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.assessment-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  transition: background 0.15s;
}

.assessment-checklist-item:hover {
  background: var(--bg-secondary);
}

.assessment-checklist-item.loaded {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.assessment-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1rem + var(--text-bump));
  flex-shrink: 0;
}

.assessment-checklist-item.loaded .assessment-item-icon {
  background: var(--teal-accent);
  color: white;
}

.assessment-checklist-item:not(.loaded) .assessment-item-icon {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.assessment-item-info {
  flex: 1;
  min-width: 0;
}

.assessment-item-name {
  font-weight: 600;
  font-size: calc(0.9rem + var(--text-bump));
}

.assessment-item-desc {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
}

.assessment-item-meta {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.assessment-item-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.assessment-item-actions .btn {
  font-size: calc(0.75rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
}

/* ── User Assessment Viewer (Settings) ────────────────────────────── */

.user-assessments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-assessment-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem;
  transition: background 0.15s;
}

.user-assessment-card:hover {
  background: var(--bg-secondary);
}

.user-assessment-card.loaded {
  border-left: 3px solid var(--teal-accent);
}

.user-assessment-card.empty {
  border-style: dashed;
}

.user-assessment-card.empty .user-assessment-preview {
  color: var(--text-muted);
}

.user-assessment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.user-assessment-title {
  font-weight: 600;
  font-size: calc(0.95rem + var(--text-bump));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-assessment-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-assessment-actions .btn {
  font-size: calc(0.75rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.user-assessment-remove-btn {
  color: var(--text-muted);
}

.user-assessment-remove-btn:hover {
  color: #c53030;
  background: rgba(197, 48, 48, 0.08);
}

@media (max-width: 600px) {
  .user-assessment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .user-assessment-actions {
    width: 100%;
  }
}

.user-assessment-preview {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.5;
}

.user-assessment-meta {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ── Import Diff Modal ────────────────────────────────────────────── */

.import-diff-modal {
  max-width: 700px;
}

.import-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.85rem + var(--text-bump));
}

.import-diff-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}

.import-diff-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.import-diff-table tr:hover td {
  background: var(--bg-secondary);
}

.import-diff-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary);
}

.import-diff-new {
  color: var(--teal-accent);
  font-weight: 500;
}

.import-diff-overwrite {
  color: var(--gold);
}

.import-diff-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.import-diff-bulk {
  display: flex;
  gap: 0.5rem;
}

/* ── Extraction Review Modal ──────────────────────────────────────── */

.extraction-review-modal {
  max-width: 900px;
}

.extraction-review-desc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal-accent);
  border-radius: 4px;
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.extraction-review-desc i {
  color: var(--teal-accent);
  flex-shrink: 0;
}

/* CliftonStrengths Review Table */

.extraction-review-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.extraction-review-header {
  display: grid;
  grid-template-columns: 50px 1fr 140px 1fr;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary);
}

.extraction-review-row {
  display: grid;
  grid-template-columns: 50px 1fr 140px 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border-light);
  align-items: center;
}

.extraction-review-row.top5 {
  background: var(--teal-light);
}

.er-col-rank {
  font-weight: 600;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  text-align: center;
}

.extraction-review-row.top5 .er-col-rank {
  color: var(--teal-accent);
}

.er-col-theme .er-theme-select {
  width: 100%;
  max-width: 200px;
}

.er-col-snippet {
  min-width: 0;
}

.er-snippet-text {
  font-style: italic;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  max-height: 3.5em;
  overflow-y: auto;
  display: block;
  line-height: 1.4;
}

/* CliftonStrengths Theme Descriptions */

.er-desc-toggle {
  font-size: calc(0.75rem + var(--text-bump)) !important;
  padding: 0.125rem 0.375rem !important;
  color: var(--teal-accent);
}

.er-theme-descriptions {
  padding: 0.75rem 0.75rem 0.75rem 3.5rem;
  border-top: 1px dashed var(--border-light);
  background: var(--bg-secondary);
}

.er-desc-field {
  margin-bottom: 0.625rem;
}

.er-desc-field:last-child {
  margin-bottom: 0;
}

.er-desc-label {
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--teal-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.er-desc-text {
  font-size: calc(0.825rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Description toggle in manual form */
.clifton-theme-row .er-desc-toggle {
  margin-left: auto;
}

.clifton-optional-desc {
  margin-left: 2.5rem;
  margin-bottom: 0.375rem;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

/* Strengths Matrix Review */

.er-field-block {
  margin-bottom: 1.25rem;
}

.er-field-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.er-field-textarea {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.85rem + var(--text-bump));
  font-family: var(--font-body);
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

.er-field-textarea:focus {
  outline: none;
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(72, 156, 184, 0.2);
}

.er-field-snippet-label {
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.er-field-snippet-text {
  font-style: italic;
  font-size: calc(0.825rem + var(--text-bump));
  color: var(--text-secondary);
  padding: 0.625rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  max-height: 6em;
  overflow-y: auto;
  line-height: 1.5;
}

/* ── Assessment Status Pills (User Cards) ────────────────────────── */

.admin-user-assessment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0;
}

.assessment-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: calc(0.7rem + var(--text-bump));
  font-weight: 500;
  white-space: nowrap;
}

.assessment-pill.loaded {
  background: var(--teal-light);
  color: var(--teal-accent);
  border: 1px solid var(--teal-accent);
}

.assessment-pill.loaded i {
  font-size: calc(0.65rem + var(--text-bump));
}

.assessment-pill.empty {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

/* Upload Progress Overlay */

.assessment-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 10;
}

.assessment-upload-spinner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--teal-accent);
  font-weight: 500;
}

.assessment-upload-spinner .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .assessment-modal {
    max-height: 95vh;
    margin: 0.5rem;
  }

  .foundation-grid-header,
  .foundation-grid-row {
    grid-template-columns: 1fr 50px 70px 70px 70px;
    font-size: calc(0.75rem + var(--text-bump));
  }

  .foundation-score-input {
    width: 40px;
    font-size: calc(0.8rem + var(--text-bump));
  }

  .foundation-rater-name {
    width: 60px;
    font-size: calc(0.7rem + var(--text-bump));
  }

  .clifton-theme-select {
    max-width: 180px;
  }

  .clifton-domain {
    display: none;
  }

  .assessment-checklist-item {
    flex-wrap: wrap;
  }

  .assessment-item-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.25rem;
  }

  .extraction-review-modal {
    max-width: 100%;
  }

  .extraction-review-header,
  .extraction-review-row {
    grid-template-columns: 40px 1fr;
    gap: 0.25rem;
  }

  .er-col-domain,
  .extraction-review-header .er-col-domain {
    display: none;
  }

  .er-col-snippet {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
  }

  .extraction-review-header .er-col-snippet {
    display: none;
  }

  .er-field-columns {
    grid-template-columns: 1fr;
  }
}