<template>
  <AppLayout>
    <div class="results-page">

      <!-- ── Page Header ── -->
      <div class="results-header">
        <div class="results-header__inner">
          <div class="results-header__left">
            <Link :href="route('member.surveys.index')" class="results-back">
              <i class="ti ti-arrow-left"></i>
              {{ locale === 'ar' ? 'الاستبيانات' : 'Surveys' }}
            </Link>
            <h1 class="results-header__title">
              📊
              {{ locale === 'ar' && surveyData.title_ar ? surveyData.title_ar : surveyData.title_en }}
            </h1>
          </div>
          <span class="results-status" :class="`results-status--${surveyData.status}`">
            {{ statusLabel(surveyData.status) }}
          </span>
        </div>
      </div>

      <div class="results-body">

        <!-- ── KPI Strip ── -->
        <div class="results-kpis">
          <div class="results-kpi">
            <p class="results-kpi__label">{{ locale === 'ar' ? 'إجمالي الإجابات' : 'Total Responses' }}</p>
            <p class="results-kpi__value">{{ demographics.total }}</p>
          </div>
          <div class="results-kpi">
            <p class="results-kpi__label">{{ locale === 'ar' ? 'الأسئلة' : 'Questions' }}</p>
            <p class="results-kpi__value">{{ questions.length }}</p>
          </div>
          <div class="results-kpi">
            <p class="results-kpi__label">{{ locale === 'ar' ? 'الشركات' : 'Companies' }}</p>
            <p class="results-kpi__value">{{ Object.keys(demographics.companies ?? {}).length }}</p>
          </div>
          <div class="results-kpi">
            <p class="results-kpi__label">{{ locale === 'ar' ? 'الحالة' : 'Status' }}</p>
            <p class="results-kpi__value results-kpi__value--status"
              :class="surveyData.status === 'active' ? 'results-kpi__value--active' : 'results-kpi__value--closed'">
              {{ surveyData.status === 'active'
                ? (locale === 'ar' ? '🟢 يقبل إجابات' : '🟢 Accepting')
                : (locale === 'ar' ? '🔴 مغلق'         : '🔴 Closed') }}
            </p>
          </div>
        </div>

        <!-- ── Main grid ── -->
        <div class="results-grid">

          <!-- Left: Question analysis -->
          <div class="results-questions">
            <h2 class="results-section-title">
              {{ locale === 'ar' ? 'تحليل الأسئلة' : 'Question Analysis' }}
            </h2>

            <div v-if="demographics.total === 0" class="results-no-data">
              <div class="results-no-data__icon">📭</div>
              <p class="results-no-data__title">
                {{ locale === 'ar' ? 'لا توجد إجابات بعد' : 'No responses yet' }}
              </p>
              <p class="results-no-data__sub">
                {{ locale === 'ar'
                  ? 'شارك رابط الاستبيان لتبدأ الإجابات بالوصول.'
                  : 'Share your survey link and responses will appear here.' }}
              </p>
            </div>

            <div
              v-for="(q, qi) in questions"
              :key="q.id"
              class="results-q-card"
            >
              <!-- Q header -->
              <div class="results-q-header">
                <span class="results-q-num">{{ qi + 1 }}</span>
                <div class="results-q-header__right">
                  <p class="results-q-text" :dir="locale === 'ar' ? 'rtl' : 'ltr'">
                    {{ locale === 'ar' && q.question_ar ? q.question_ar : q.question_en }}
                  </p>
                  <span class="results-q-type-badge" :class="`results-q-type-badge--${q.type}`">
                    {{ typeLabel(q.type) }}
                  </span>
                </div>
              </div>

              <!-- No data -->
              <div v-if="!q.analytics || q.analytics.total === 0" class="results-q-empty">
                {{ locale === 'ar' ? 'لا توجد إجابات على هذا السؤال.' : 'No responses for this question yet.' }}
              </div>

              <!-- MCQ / Multi-select / Yes-No — bar chart -->
              <div
                v-else-if="['multiple_choice', 'multi_select', 'yes_no'].includes(q.type)"
                class="results-bars"
              >
                <div
                  v-for="opt in q.analytics.distribution"
                  :key="opt.label"
                  class="results-bar-row"
                >
                  <div class="results-bar-row__label-row">
                    <span class="results-bar-row__label"
                      :dir="locale === 'ar' ? 'rtl' : 'ltr'"
                    >
                      {{ resolveOptionLabel(q, opt.label) }}
                    </span>
                    <span class="results-bar-row__count">
                      {{ opt.count }}
                      <span class="results-bar-row__pct">({{ opt.pct }}%)</span>
                    </span>
                  </div>
                  <div class="results-bar-track">
                    <div
                      class="results-bar-fill"
                      :class="barColor(q.type, opt.label)"
                      :style="`width: ${opt.pct}%`"
                    ></div>
                  </div>
                </div>
                <p class="results-total-note">
                  {{ q.analytics.total }}
                  {{ locale === 'ar' ? 'إجابة' : 'responses' }}
                </p>
              </div>

              <!-- Rating -->
              <div v-else-if="q.type === 'rating'" class="results-rating">
                <!-- Average score row -->
                <div class="results-rating__avg-row">
                  <div class="results-rating__avg-box">
                    <p class="results-rating__avg-num">{{ q.analytics.avg ?? '—' }}</p>
                    <p class="results-rating__avg-sub">
                      {{ locale === 'ar' ? 'من' : 'out of' }} {{ q.rating_max }}
                    </p>
                  </div>
                  <div class="results-rating__avg-bar-wrap">
                    <div class="results-rating__avg-track">
                      <div
                        class="results-rating__avg-fill"
                        :style="`width: ${q.analytics.avg ? (q.analytics.avg / q.rating_max * 100) : 0}%`"
                      ></div>
                    </div>
                    <p class="results-rating__avg-note">
                      {{ q.analytics.total }} {{ locale === 'ar' ? 'إجابة' : 'responses' }}
                    </p>
                  </div>
                </div>
                <!-- Distribution -->
                <div class="results-rating__dist">
                  <div
                    v-for="d in [...(q.analytics.distribution ?? [])].reverse()"
                    :key="d.label"
                    class="results-rating__dist-row"
                  >
                    <span class="results-rating__dist-label">{{ d.label }}</span>
                    <div class="results-rating__dist-track">
                      <div
                        class="results-rating__dist-fill"
                        :style="`width: ${d.pct}%`"
                      ></div>
                    </div>
                    <span class="results-rating__dist-count">
                      {{ d.count }} <span class="results-rating__dist-pct">({{ d.pct }}%)</span>
                    </span>
                  </div>
                </div>
              </div>

              <!-- Text responses -->
              <div v-else-if="q.type === 'text'" class="results-texts">
                <div v-if="!q.analytics.answers?.length" class="results-q-empty">
                  {{ locale === 'ar' ? 'لا توجد إجابات نصية بعد.' : 'No text responses yet.' }}
                </div>
                <template v-else>
                  <div
                    v-for="(txt, ti) in (showAll[q.id] ? q.analytics.answers : q.analytics.answers.slice(0, 5))"
                    :key="ti"
                    class="results-text-item"
                    :dir="locale === 'ar' ? 'rtl' : 'ltr'"
                  >
                    "{{ txt }}"
                  </div>
                  <button
                    v-if="q.analytics.answers.length > 5 && !showAll[q.id]"
                    @click="showAll[q.id] = true"
                    class="results-show-more"
                  >
                    + {{ locale === 'ar' ? 'عرض' : 'Show' }}
                    {{ q.analytics.answers.length - 5 }}
                    {{ locale === 'ar' ? 'إجابة أخرى' : 'more responses' }}
                  </button>
                  <p class="results-total-note">
                    {{ q.analytics.total }} {{ locale === 'ar' ? 'إجابة' : 'responses' }}
                  </p>
                </template>
              </div>

            </div>
          </div><!-- /results-questions -->

          <!-- Right: Demographics sidebar -->
          <div class="results-sidebar">

            <!-- Gender -->
            <div class="results-panel">
              <h3 class="results-panel__title">
                {{ locale === 'ar' ? 'توزيع الجنس' : 'Gender Breakdown' }}
              </h3>
              <div v-if="!Object.keys(demographics.gender ?? {}).length" class="results-panel__empty">
                {{ locale === 'ar' ? 'لا بيانات جنس.' : 'No gender data.' }}
              </div>
              <div v-else class="results-panel__rows">
                <div v-for="(count, gender) in demographics.gender" :key="gender" class="results-demo-row">
                  <span class="results-demo-row__label">{{ genderLabel(gender) }}</span>
                  <span class="results-demo-row__count">{{ count }}</span>
                </div>
                <div class="results-bar-track" style="margin-top:var(--space-2);">
                  <template v-for="(count, gender) in demographics.gender" :key="gender">
                    <div
                      :class="genderBarColor(gender)"
                      :style="`width: ${demographics.total > 0 ? Math.round(count/demographics.total*100) : 0}%; height:100%; display:inline-block;`"
                    ></div>
                  </template>
                </div>
              </div>
            </div>

            <!-- Age groups -->
            <div class="results-panel">
              <h3 class="results-panel__title">
                {{ locale === 'ar' ? 'الفئات العمرية' : 'Age Groups' }}
              </h3>
              <div class="results-panel__rows">
                <template v-for="(count, group) in demographics.ageGroups" :key="group">
                  <div v-if="group !== 'Not provided' || count > 0" class="results-age-row">
                    <span class="results-age-row__label">{{ ageGroupLabel(group) }}</span>
                    <div class="results-bar-track results-bar-track--thin">
                      <div
                        class="results-bar-fill results-bar-fill--info"
                        :style="`width: ${demographics.total > 0 ? Math.round(count/demographics.total*100) : 0}%`"
                      ></div>
                    </div>
                    <span class="results-age-row__count">{{ count }}</span>
                  </div>
                </template>
              </div>
            </div>

            <!-- Top companies -->
            <div v-if="Object.keys(demographics.companies ?? {}).length" class="results-panel">
              <h3 class="results-panel__title">
                {{ locale === 'ar' ? 'أبرز الشركات' : 'Top Companies' }}
              </h3>
              <div class="results-panel__rows">
                <div
                  v-for="(count, company) in demographics.companies"
                  :key="company"
                  class="results-company-row"
                >
                  <span class="results-company-row__name">{{ company }}</span>
                  <span class="results-company-row__count">{{ count }}</span>
                </div>
              </div>
            </div>

            <!-- Recent respondents -->
            <div v-if="demographics.recent?.length" class="results-panel">
              <h3 class="results-panel__title">
                {{ locale === 'ar' ? 'آخر المجيبين' : 'Recent Respondents' }}
              </h3>
              <div class="results-panel__rows">
                <div
                  v-for="r in demographics.recent"
                  :key="r.date"
                  class="results-respondent"
                >
                  <div class="results-respondent__avatar">
                    {{ (r.name ?? '?').charAt(0).toUpperCase() }}
                  </div>
                  <div class="results-respondent__info">
                    <p class="results-respondent__name">{{ r.name ?? (locale === 'ar' ? 'مجهول' : 'Anonymous') }}</p>
                    <p class="results-respondent__sub">
                      {{ r.title }}{{ r.title && r.company ? ' · ' : '' }}{{ r.company }}
                    </p>
                  </div>
                </div>
              </div>
            </div>

          </div><!-- /results-sidebar -->

        </div><!-- /results-grid -->
      </div><!-- /results-body -->
    </div><!-- /results-page -->
  </AppLayout>
</template>

<script setup>
import { reactive } from 'vue'
import { Link }     from '@inertiajs/vue3'
import AppLayout    from '@/Layouts/AppLayout.vue'
import { useAuthStore } from '@/Stores/useAuthStore'

const props = defineProps({
  surveyData:   { type: Object, required: true },
  questions:    { type: Array,  default: () => [] },
  demographics: { type: Object, default: () => ({}) },
})

const authStore = useAuthStore()
const locale     = computed(() => authStore.locale)
const showAll   = reactive({})

// ── Helpers ────────────────────────────────────────────────────
const statusLabel = (s) => {
  const map = {
    draft:  locale === 'ar' ? 'مسودة' : 'Draft',
    active: locale === 'ar' ? 'نشط'   : 'Active',
    closed: locale === 'ar' ? 'مغلق'  : 'Closed',
  }
  return map[s] ?? s
}

const typeLabel = (t) => {
  const map = {
    multiple_choice: 'MCQ',
    multi_select:    locale === 'ar' ? 'متعدد' : 'Multi',
    yes_no:          locale === 'ar' ? 'نعم/لا' : 'Yes/No',
    rating:          locale === 'ar' ? 'تقييم'  : 'Rating',
    text:            locale === 'ar' ? 'نص'     : 'Text',
  }
  return map[t] ?? t
}

// Resolve bar label to localized option text
const resolveOptionLabel = (q, indexOrLabel) => {
  // analytics distribution label is the option index (number) for MCQ/multi
  // for yes_no it's 'yes'/'no' string
  if (q.type === 'yes_no') {
    if (indexOrLabel === 'yes') return locale === 'ar' ? 'نعم' : 'Yes'
    if (indexOrLabel === 'no')  return locale === 'ar' ? 'لا'  : 'No'
    return indexOrLabel
  }
  const options = locale === 'ar' && q.options_ar?.length ? q.options_ar : q.options_en
  const idx = Number(indexOrLabel)
  if (!isNaN(idx) && options?.[idx]) return options[idx]
  return indexOrLabel
}

const barColor = (type, label) => {
  if (type === 'yes_no') {
    if (label === 'yes') return 'results-bar-fill--success'
    if (label === 'no')  return 'results-bar-fill--danger'
  }
  return 'results-bar-fill--primary'
}

const genderLabel = (g) => {
  const map = {
    male:              locale === 'ar' ? 'ذكر'          : 'Male',
    female:            locale === 'ar' ? 'أنثى'         : 'Female',
    prefer_not_to_say: locale === 'ar' ? 'لا أفضل الإفصاح' : 'Prefer not to say',
  }
  return map[g] ?? g
}

const genderBarColor = (g) => ({
  male:              'results-bar-fill--info',
  female:            'results-bar-fill--pink',
  prefer_not_to_say: 'results-bar-fill--muted',
}[g] ?? 'results-bar-fill--muted')

const ageGroupLabel = (g) => {
  if (locale !== 'ar') return g
  const map = {
    'Under 25': 'أقل من 25', '25–34': '25–34', '35–44': '35–44',
    '45–54': '45–54', '55+': '55+', 'Not provided': 'غير محدد',
  }
  return map[g] ?? g
}
</script>

<style scoped>
.results-page {
  min-height: 100vh;
  background: var(--color-bg);
}

/* ── Header ── */
.results-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  padding: var(--space-5) var(--space-5);
}

.results-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.results-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.results-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.results-back:hover { color: #fff; opacity: 1; }

.results-header__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-header-text);
  line-height: 1.3;
}

.results-status {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: var(--space-5);
}

.results-status--draft  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.results-status--active { background: var(--color-success-soft); color: var(--color-success); }
.results-status--closed { background: var(--color-danger-soft);  color: var(--color-danger); }

/* ── Body ── */
.results-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

/* ── KPI strip ── */
.results-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .results-kpis { grid-template-columns: repeat(4, 1fr); }
}

.results-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.results-kpi__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.results-kpi__value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.results-kpi__value--status { font-size: var(--text-base); }
.results-kpi__value--active  { color: var(--color-success); }
.results-kpi__value--closed  { color: var(--color-danger); }

/* ── Main grid ── */
.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .results-grid {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

/* ── Section title ── */
.results-section-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

/* ── No data ── */
.results-no-data {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.results-no-data__icon { font-size: 36px; }
.results-no-data__title {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.results-no-data__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 340px;
  line-height: 1.6;
}

/* ── Question card ── */
.results-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.results-q-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.results-q-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.results-q-num {
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.results-q-header__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.results-q-text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.results-q-type-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

.results-q-type-badge--multiple_choice { background: var(--color-info-soft);    color: var(--color-info); }
.results-q-type-badge--multi_select    { background: var(--color-primary-soft); color: var(--color-primary); }
.results-q-type-badge--yes_no          { background: var(--color-success-soft); color: var(--color-success); }
.results-q-type-badge--rating          { background: var(--color-warning-soft); color: var(--color-warning); }
.results-q-type-badge--text            { background: var(--color-surface-alt);  color: var(--color-text-secondary); }

.results-q-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Bar chart ── */
.results-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.results-bar-row__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.results-bar-row__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex: 1;
  margin-right: var(--space-3);
}

.results-bar-row__count {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.results-bar-row__pct {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.results-bar-track {
  width: 100%;
  height: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.results-bar-track--thin {
  height: 6px;
}

.results-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.7s ease;
}

.results-bar-fill--primary { background: var(--color-primary); }
.results-bar-fill--success { background: var(--color-success); }
.results-bar-fill--danger  { background: var(--color-danger); }
.results-bar-fill--info    { background: var(--color-info); }
.results-bar-fill--pink    { background: #E879A0; }
.results-bar-fill--muted   { background: var(--color-text-muted); }

.results-total-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ── Rating ── */
.results-rating__avg-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.results-rating__avg-box {
  text-align: center;
  flex-shrink: 0;
}

.results-rating__avg-num {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-warning);
  line-height: 1;
}

.results-rating__avg-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.results-rating__avg-bar-wrap {
  flex: 1;
}

.results-rating__avg-track {
  width: 100%;
  height: 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.results-rating__avg-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-warning), #f5c842);
  border-radius: var(--radius-pill);
  transition: width 0.7s ease;
}

.results-rating__avg-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.results-rating__dist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.results-rating__dist-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.results-rating__dist-label {
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--color-warning);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.results-rating__dist-track {
  flex: 1;
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.results-rating__dist-fill {
  height: 100%;
  background: rgba(232, 160, 32, 0.6);
  border-radius: var(--radius-pill);
  transition: width 0.7s ease;
}

.results-rating__dist-count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.results-rating__dist-pct {
  color: var(--color-text-muted);
}

/* ── Text responses ── */
.results-texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.results-text-item {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.results-show-more {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}

/* ── Sidebar panels ── */
.results-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: 80px;
}

.results-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.results-panel__title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-4);
}

.results-panel__empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.results-panel__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Demographics rows */
.results-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-demo-row__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.results-demo-row__count {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* Age group row */
.results-age-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.results-age-row__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  width: 72px;
  flex-shrink: 0;
}

.results-age-row__count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* Company row */
.results-company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.results-company-row__name {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-company-row__count {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

/* Recent respondent */
.results-respondent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.results-respondent__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.results-respondent__info {
  flex: 1;
  min-width: 0;
}

.results-respondent__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-respondent__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
