/* Scale With AI - View-Specific Pages Styles */

/* ONBOARDING VIEW */
.onboarding-screen {
  max-width: 540px;
  margin: 40px auto;
  text-align: center;
}

.onboarding-header {
  margin-bottom: var(--spacing-xl);
}

.onboarding-progress-steps {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.onboarding-step-indicator {
  width: 40px;
  height: 6px;
  background-color: var(--border-color);
  border-radius: var(--radius-full);
}

.onboarding-step-indicator.active {
  background-color: var(--primary-color);
}

.role-option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.role-card-option {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.role-card-option:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-light);
}

.role-card-option.selected {
  border-color: var(--primary-color);
  background-color: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-color);
}

.role-card-option svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
  margin-bottom: var(--spacing-sm);
}

.role-card-option.selected svg {
  stroke: var(--primary-color);
}

/* READINESS ASSESSMENT */
.assessment-intro {
  max-width: 700px;
  margin: 0 auto var(--spacing-xl);
  text-align: center;
}

.assessment-question-card {
  margin-bottom: var(--spacing-lg);
}

.assessment-question-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.assessment-answers-row {
  display: flex;
  justify-content: justify-between;
  gap: var(--spacing-sm);
}

.assessment-answer-option {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.assessment-answer-option:hover {
  background-color: var(--bg-secondary);
}

.assessment-answer-option.selected {
  background-color: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.assessment-results-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.readiness-gauge {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.gauge-circle {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  border: 12px solid var(--border-color);
  border-top-color: var(--primary-color);
  margin: 0 auto var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
}

/* HOME DASHBOARD VIEW */
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 550;
}

.dashboard-layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

/* PROMPT VAULT VIEW */
.prompt-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.prompt-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.prompt-card-content {
  flex: 1;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.825rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 150px;
  overflow-y: auto;
}

.prompt-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

/* LEARNING HUB VIEW */
.modules-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.module-row {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.module-row:hover {
  border-color: var(--primary-color);
}

.module-meta {
  display: flex;
  justify-content: justify-between;
  align-items: center;
}

.module-lessons-list {
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  padding-top: var(--spacing-md);
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.module-row.expanded .module-lessons-list {
  display: flex;
}

.lesson-list-item {
  display: flex;
  align-items: center;
  justify-content: justify-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: border var(--transition-fast);
}

.lesson-list-item:hover {
  border-color: var(--primary-color);
}

/* PROJECT WORKSPACE VIEW */
.project-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.project-task-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: var(--spacing-md);
}

/* PROMPT BUILDER */
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.builder-output-box {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.builder-output-content {
  flex: 1;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-y: auto;
  white-space: pre-wrap;
  min-height: 350px;
}