/**
 * EyeCC Metadata Renderer Styles
 *
 * Default styles for metadata rendering
 * Used by both admin preview and frontend [spring] shortcode
 */

/* ========================================
   GENERIC STYLES
   ======================================== */

.echo-meta-empty {
  color: #999;
  font-style: italic;
  padding: 15px;
  background: #f5f5f5;
  border-left: 3px solid #ddd;
}

.echo-meta-list {
  list-style: disc;
  margin-left: 20px;
  line-height: 1.6;
}

.echo-meta-list li {
  margin-bottom: 8px;
}

.echo-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.echo-meta-grid-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  background: #fff;
}

.echo-meta-grid-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.echo-meta-grid-content {
  color: #666;
}

.echo-meta-json {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
}

/* ========================================
   MOVIE EXAMPLES
   ======================================== */

.echo-meta-movies-list {
  margin: 20px 0;
}

.echo-movie-example {
  border-left: 4px solid #e50914;
  padding: 15px;
  margin-bottom: 20px;
  background: #f9f9f9;
}

.echo-movie-example .movie-title {
  color: #e50914;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.echo-movie-example .movie-scene {
  color: #555;
  margin: 8px 0;
}

.echo-movie-example .movie-quote {
  font-style: italic;
  color: #333;
  margin: 10px 0 0 0;
  padding: 10px;
  background: #fff;
  border-left: 3px solid #ccc;
}

.echo-meta-movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.echo-movie-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.echo-movie-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.echo-movie-card .movie-card-title {
  font-weight: bold;
  font-size: 16px;
  color: #e50914;
  margin-bottom: 12px;
}

.echo-movie-card .movie-card-scene {
  color: #555;
  margin-bottom: 10px;
  font-size: 14px;
}

.echo-movie-card .movie-card-quote {
  font-style: italic;
  color: #666;
  font-size: 13px;
  padding: 8px;
  background: #f9f9f9;
  border-left: 3px solid #e50914;
}

/* ========================================
   PSYCHOLOGY EXAMPLES
   ======================================== */

.echo-meta-psychology-list {
  margin: 20px 0;
}

.echo-psychology-example {
  border-left: 4px solid #4caf50;
  padding: 15px;
  margin-bottom: 20px;
  background: #f9f9f9;
}

.echo-psychology-example .psychology-concept {
  color: #4caf50;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.echo-psychology-example .psychology-explanation {
  color: #555;
  line-height: 1.6;
  margin: 10px 0;
}

.echo-psychology-example .psychology-source {
  color: #999;
  font-size: 13px;
  margin-top: 10px;
}

.echo-meta-psychology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.echo-psychology-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.echo-psychology-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.echo-psychology-card .psychology-card-concept {
  font-weight: bold;
  font-size: 16px;
  color: #4caf50;
  margin-bottom: 12px;
}

.echo-psychology-card .psychology-card-explanation {
  color: #555;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 14px;
}

.echo-psychology-card .psychology-card-source {
  color: #999;
  font-size: 12px;
  font-style: italic;
}

/* ========================================
   CONTRIBUTORS
   ======================================== */

.echo-meta-contributors-list {
  margin: 20px 0;
}

.echo-contributor {
  border-left: 4px solid #2196f3;
  padding: 15px;
  margin-bottom: 20px;
  background: #f9f9f9;
}

.echo-contributor .contributor-name {
  color: #2196f3;
  margin: 0 0 8px 0;
  font-size: 18px;
}

.echo-contributor .contributor-year {
  color: #666;
  font-weight: normal;
  font-size: 14px;
}

.echo-contributor .contributor-contribution {
  color: #555;
  line-height: 1.6;
  margin: 8px 0 0 0;
}

.echo-meta-contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.echo-contributor-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.echo-contributor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.echo-contributor-card .contributor-card-name {
  font-weight: bold;
  font-size: 16px;
  color: #2196f3;
  margin-bottom: 8px;
}

.echo-contributor-card .contributor-card-year {
  color: #999;
  font-size: 13px;
  margin-bottom: 10px;
}

.echo-contributor-card .contributor-card-contribution {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

/* ========================================
   USER INTERESTS
   ======================================== */

.echo-meta-interests-list {
  margin: 20px 0;
}

.echo-meta-interests-list h4 {
  color: #ff9800;
  margin: 15px 0 10px 0;
  font-size: 16px;
}

.interests-list {
  list-style: disc;
  margin-left: 20px;
  line-height: 1.8;
}

.interest-category {
  margin: 10px 0;
  padding: 10px;
  background: #f9f9f9;
  border-left: 3px solid #ff9800;
}

.echo-meta-interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.interest-tag {
  display: inline-block;
  padding: 8px 15px;
  background: #ff9800;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  transition: background 0.2s;
}

.interest-tag:hover {
  background: #f57c00;
}

.interest-category-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  background: #fff;
  width: 100%;
}

.category-title {
  font-weight: bold;
  color: #ff9800;
  margin-bottom: 10px;
  font-size: 15px;
}

.category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-item {
  display: inline-block;
  padding: 5px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 13px;
  color: #666;
}

/* ========================================
   ONBOARDING PLAN
   ======================================== */

.echo-meta-onboarding-list {
  margin: 20px 0;
}

.onboarding-steps {
  list-style: none;
  counter-reset: step-counter;
  margin: 0;
  padding: 0;
}

.onboarding-step {
  counter-increment: step-counter;
  position: relative;
  padding: 20px 20px 20px 60px;
  margin-bottom: 20px;
  background: #f9f9f9;
  border-left: 4px solid #9c27b0;
}

.onboarding-step::before {
  content: counter(step-counter);
  position: absolute;
  left: 15px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #9c27b0;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.step-title {
  color: #9c27b0;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.step-description {
  color: #555;
  line-height: 1.6;
  margin: 8px 0;
}

.step-duration {
  color: #999;
  font-size: 13px;
  margin: 8px 0 0 0;
}

.echo-meta-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.onboarding-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.onboarding-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.step-number {
  display: inline-block;
  background: #9c27b0;
  color: #fff;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
}

.step-card-title {
  font-weight: bold;
  font-size: 16px;
  color: #9c27b0;
  margin-bottom: 10px;
}

.step-card-description {
  color: #555;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 14px;
}

.step-card-duration {
  color: #999;
  font-size: 12px;
  font-style: italic;
}

/* ========================================
   ACTIVITY STEPS
   ======================================== */

.echo-meta-activity-steps-list {
  margin: 20px 0;
}

.activity-steps {
  list-style: none;
  counter-reset: activity-step-counter;
  margin: 0;
  padding: 0;
}

.activity-step {
  counter-increment: activity-step-counter;
  position: relative;
  padding: 20px 20px 20px 60px;
  margin-bottom: 20px;
  background: #fff3e0;
  border-left: 4px solid #ff9800;
}

.activity-step::before {
  content: counter(activity-step-counter);
  position: absolute;
  left: 15px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #ff9800;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.activity-step .step-title {
  color: #e65100;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.activity-step .step-description {
  color: #555;
  line-height: 1.6;
  margin: 8px 0;
}

.activity-step .step-duration {
  color: #999;
  font-size: 13px;
  margin: 8px 0 0 0;
}

.echo-meta-activity-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.activity-step-card {
  border: 1px solid #ffb74d;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.1);
  transition: transform 0.2s;
}

.activity-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.activity-step-card .step-number {
  display: inline-block;
  background: #ff9800;
  color: #fff;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
}

.activity-step-card .step-card-title {
  font-weight: bold;
  font-size: 16px;
  color: #e65100;
  margin-bottom: 10px;
}

.activity-step-card .step-card-description {
  color: #555;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 14px;
}

.activity-step-card .step-card-duration {
  color: #ff9800;
  font-size: 13px;
  font-weight: 500;
}

/* ========================================
   ACTIVITY MATERIALS
   ======================================== */

.echo-meta-activity-materials-list {
  margin: 20px 0;
}

.activity-materials {
  list-style: none;
  margin: 0;
  padding: 0;
}

.material-item {
  padding: 15px;
  margin-bottom: 10px;
  background: #f5f5f5;
  border-left: 4px solid #607d8b;
  position: relative;
}

.material-item strong {
  color: #37474f;
  font-size: 15px;
}

.material-quantity {
  color: #607d8b;
  font-weight: normal;
  margin-left: 5px;
}

.material-optional {
  display: inline-block;
  padding: 2px 8px;
  background: #90a4ae;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 8px;
}

.material-notes {
  display: block;
  margin-top: 8px;
  color: #666;
  font-size: 13px;
}

.echo-meta-activity-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.material-card {
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(96, 125, 139, 0.1);
  transition: transform 0.2s;
}

.material-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(96, 125, 139, 0.15);
}

.material-card-name {
  font-weight: bold;
  font-size: 15px;
  color: #37474f;
  margin-bottom: 8px;
}

.material-card-quantity {
  color: #607d8b;
  font-size: 13px;
  margin-bottom: 8px;
}

.material-card-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #90a4ae;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  margin-bottom: 8px;
}

.material-card-notes {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
}

/* ========================================
   ACTIVITY OUTCOMES
   ======================================== */

.echo-meta-activity-outcomes-list {
  margin: 20px 0;
}

.activity-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.outcome-item {
  padding: 15px;
  margin-bottom: 15px;
  background: #f9f9f9;
  border-left: 4px solid #4caf50;
}

.outcome-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 8px;
}

.outcome-type.outcome-emotional {
  background: #e91e63;
  color: #fff;
}

.outcome-type.outcome-cognitive {
  background: #2196f3;
  color: #fff;
}

.outcome-type.outcome-behavioral {
  background: #ff9800;
  color: #fff;
}

.outcome-timeframe {
  color: #999;
  font-size: 12px;
}

.echo-meta-activity-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.outcome-card {
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
  transition: transform 0.2s;
}

.outcome-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.15);
}

.outcome-card-type {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.outcome-card-type.outcome-emotional {
  background: #e91e63;
  color: #fff;
}

.outcome-card-type.outcome-cognitive {
  background: #2196f3;
  color: #fff;
}

.outcome-card-type.outcome-behavioral {
  background: #ff9800;
  color: #fff;
}

.outcome-card-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
  font-size: 14px;
}

.outcome-card-timeframe {
  color: #4caf50;
  font-size: 12px;
  font-weight: 500;
}

/* ========================================
   ACTIVITY SAFETY
   ======================================== */

.echo-meta-activity-safety-list {
  margin: 20px 0;
}

.activity-safety {
  list-style: none;
  margin: 0;
  padding: 0;
}

.safety-item {
  padding: 15px;
  margin-bottom: 15px;
  background: #fff3e0;
  border-left: 4px solid #ff9800;
}

.safety-item.safety-critical {
  background: #ffebee;
  border-left-color: #f44336;
}

.safety-item.safety-important {
  background: #fff3e0;
  border-left-color: #ff9800;
}

.safety-level {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 8px;
  background: #ff9800;
  color: #fff;
}

.safety-item.safety-critical .safety-level {
  background: #f44336;
}

.echo-meta-activity-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.safety-card {
  border: 1px solid #ffb74d;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.1);
  transition: transform 0.2s;
}

.safety-card.safety-card-critical {
  border-color: #ef5350;
  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.1);
}

.safety-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15);
}

.safety-card.safety-card-critical:hover {
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.2);
}

.safety-card-level {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: #ff9800;
  color: #fff;
}

.safety-card-critical .safety-card-level {
  background: #f44336;
}

.safety-card-warning {
  color: #e65100;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 15px;
}

.safety-card-critical .safety-card-warning {
  color: #c62828;
}

.safety-card-recommendation {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .echo-meta-grid,
  .echo-meta-movies-grid,
  .echo-meta-psychology-grid,
  .echo-meta-contributors-grid,
  .echo-meta-onboarding-grid,
  .echo-meta-activity-steps-grid,
  .echo-meta-activity-materials-grid,
  .echo-meta-activity-outcomes-grid,
  .echo-meta-activity-safety-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-step,
  .activity-step {
    padding-left: 50px;
  }

  .onboarding-step::before,
  .activity-step::before {
    left: 10px;
    width: 25px;
    height: 25px;
    font-size: 14px;
  }
}