/* app/assets/stylesheets/nps_dashboard.css */
.nps-dashboard {
  padding: var(--size-4);
}

.dashboard-card {
  background: var(--layer-surface);
  border-radius: var(--radius-medium);
  padding: var(--size-4);
  margin-bottom: var(--size-4);
  box-shadow: var(--shadow-1);
  flex: 1;
}

.full-width {
  width: 100%;
}

.nps-score-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  margin: var(--size-4) 0;
  border-radius: var(--radius-medium);
  position: relative;
}

.nps-score {
  font-size: 3rem;
  font-weight: var(--font-weight-7);
  color: var(--on-primary);
}

/* NPS Color Variables */
[data-color-scheme="light"] {
  :root {
    --color-excellent: #4CAF50;
    --color-good: #8BC34A;
    --color-neutral: #FFC107;
    --color-poor: #FF9800;
    --color-critical: #F44336;
    --on-excellent: white;
    --on-good: white;
    --on-neutral: rgba(0, 0, 0, 0.87);
    --on-poor: rgba(0, 0, 0, 0.87);
    --on-critical: white;
    --color-yes: #4CAF50;
    --color-no: #F44336;
    --color-meh: #FFC107;
  }
}


[data-color-scheme='dark'] {
  --color-excellent: #43A047;
  --color-good: #7CB342;
  --color-neutral: #FDD835;
  --color-poor: #FB8C00;
  --color-critical: #E53935;
  --on-excellent: #ffffff;
  --on-good: #ffffff;
  --on-neutral: #ffffff;
  --on-poor: #ffffff;
  --on-critical: #ffffff;
  --color-yes: #43A047;
  --color-no: #E53935;
  --color-meh: #FDD835;
}


/* NPS Color Classes */
.nps-excellent {
  background-color: var(--color-excellent);
  color: var(--on-excellent);
}

.nps-good {
  background-color: var(--color-good);
  color: var(--on-good);
}

.nps-neutral {
  background-color: var(--color-neutral);
  color: var(--on-neutral);
}

.nps-poor {
  background-color: var(--color-poor);
  color: var(--on-poor);
}

.nps-critical {
  background-color: var(--color-critical);
  color: var(--on-critical);
}

/* NPS Legend */
.nps-legend {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: var(--size-3);
}

.nps-legend-item {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  font-size: var(--font-size-body-small);
}

.nps-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* Reaction Summary */
.reaction-summary {
  display: flex;
  justify-content: space-between;
  padding: var(--size-3) 0;
}

.reaction-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reaction-icon {
  font-size: 2rem;
  margin-bottom: var(--size-2);
}

.reaction-count {
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-weight-6);
}

.reaction-label {
  font-size: var(--font-size-body-small);
  color: var(--on-surface-variant);
}

/* Reaction types */
.reaction-yes {
  color: var(--color-yes);
}

.reaction-meh {
  color: var(--color-meh);
}

.reaction-no {
  color: var(--color-no);
}

.reaction-total {
  color: var(--primary);
}

/* Table styles */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--size-3);
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
}

.data-table th {
  font-weight: var(--font-weight-6);
  color: var(--on-surface-variant);
}
td.avatar-group{
  padding-block: 2.5rem !important;

}

/* Comment cards */
.comments-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--size-3);
}

.comment-card {
  background: var(--layer-surface-variant);
  border-radius: var(--radius-small);
  padding: var(--size-3);
  margin-bottom: var(--size-3);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  margin-bottom: var(--size-2);
}

.comment-reaction {
  font-size: 1.5rem;
}

.comment-reaction.yes {
  color: var(--color-yes);
}

.comment-reaction.no {
  color: var(--color-no);
}

.comment-reaction.meh {
  color: var(--color-meh);
}

.comment-talk {
  font-size: var(--font-size-body-small);
  color: var(--on-surface-variant);
}

.comment-body {
  margin-bottom: var(--size-2);
  font-size: var(--font-size-body-medium);
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-body-small);
  color: var(--on-surface-variant);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .reaction-summary {
    flex-wrap: wrap;
    gap: var(--size-3);
  }
  
  .reaction-metric {
    flex: 1 0 40%;
  }
  
  .comments-container {
    grid-template-columns: 1fr;
  }
}