<script setup lang="ts">
definePageMeta({ ssr: false })
usePageTitle('Colectivos · Cartera')

const { accounts, activeAccounts, totalMembers, totalDependents, totalPremium } = useColectivos()

/* ── Filters & sort ── */

const search = ref('')
const viewMode = ref<'card' | 'list'>('card')
const lobFilter = ref<string>('all')
const statusFilter = ref<string>('all')
const carrierFilter = ref<string>('all')
const agentFilter = ref<string>('all')
const sortBy = ref<string>('premium_desc')

const lobOptions = [
  { label: 'All LOBs', value: 'all' },
  { label: 'Health', value: 'Health' },
  { label: 'Life', value: 'Life' },
  { label: 'Disability', value: 'Disability' },
]

const statusOptions = [
  { label: 'All statuses', value: 'all' },
  { label: 'Active', value: 'active' },
  { label: 'Onboarding', value: 'onboarding' },
  { label: 'Renewal Due', value: 'renewal_due' },
  { label: 'Suspended', value: 'suspended' },
]

const sortOptions = [
  { label: 'Premium (high → low)', value: 'premium_desc' },
  { label: 'Members (high → low)', value: 'members_desc' },
  { label: 'Renewal date', value: 'renewal' },
  { label: 'Alphabetical', value: 'alpha' },
]

const carrierOptions = computed(() => [
  { label: 'All Carriers', value: 'all' },
  ...([...new Set(accounts.value.map(a => a.carrier))].sort().map(c => ({ label: c, value: c })))
])

const agentOptions = computed(() => [
  { label: 'All Agents', value: 'all' },
  ...([...new Set(accounts.value.map(a => a.agent))].sort().map(a => ({ label: a, value: a })))
])

/* ── Derived data ── */

const onboardingCount = computed(() =>
  accounts.value.filter(a => a.status === 'onboarding').length,
)
const renewalDueCount = computed(() =>
  accounts.value.filter(a => a.status === 'renewal_due').length,
)
const suspendedCount = computed(() =>
  accounts.value.filter(a => a.status === 'suspended').length,
)
const totalMonthlyPremium = computed(() =>
  accounts.value.reduce((s, a) => s + a.monthlyPremium, 0),
)
const avgCommission = computed(() => {
  if (!accounts.value.length) return 0
  return accounts.value.reduce((s, a) => s + a.commissionPct, 0) / accounts.value.length
})

const filtered = computed(() => {
  let rows = [...accounts.value]

  if (lobFilter.value !== 'all') rows = rows.filter(a => a.lob === lobFilter.value)
  if (statusFilter.value !== 'all') rows = rows.filter(a => a.status === statusFilter.value)
  if (carrierFilter.value !== 'all') rows = rows.filter(a => a.carrier === carrierFilter.value)
  if (agentFilter.value !== 'all') rows = rows.filter(a => a.agent === agentFilter.value)

  const q = search.value.trim().toLowerCase()
  if (q) {
    rows = rows.filter(a =>
      a.name.toLowerCase().includes(q) ||
      a.carrier.toLowerCase().includes(q) ||
      a.product.toLowerCase().includes(q),
    )
  }

  switch (sortBy.value) {
    case 'premium_desc': rows.sort((a, b) => b.annualPremium - a.annualPremium); break
    case 'members_desc': rows.sort((a, b) => b.totalMembers - a.totalMembers); break
    case 'renewal': rows.sort((a, b) => a.renewalDate.localeCompare(b.renewalDate)); break
    case 'alpha': rows.sort((a, b) => a.name.localeCompare(b.name)); break
  }

  return rows
})

const filteredTotalAnnual = computed(() =>
  filtered.value.reduce((s, a) => s + a.annualPremium, 0),
)
const filteredTotalMembers = computed(() =>
  filtered.value.reduce((s, a) => s + a.totalMembers, 0),
)
const filteredTotalDependents = computed(() =>
  filtered.value.reduce((s, a) => s + a.dependentsCount, 0),
)

/* ── Portfolio health segments ── */

const healthSegments = computed(() => {
  const total = accounts.value.length || 1
  const active = activeAccounts.value.length
  const onboarding = onboardingCount.value
  const renewal = renewalDueCount.value
  const suspended = suspendedCount.value
  return [
    { label: 'Active', count: active, pct: (active / total) * 100, color: '#16a34a' },
    { label: 'Onboarding', count: onboarding, pct: (onboarding / total) * 100, color: '#3b82f6' },
    { label: 'Renewal Due', count: renewal, pct: (renewal / total) * 100, color: '#f59e0b' },
    { label: 'Suspended', count: suspended, pct: (suspended / total) * 100, color: '#dc2626' },
  ]
})

/* ── KPI cards config ── */

const kpiCards = computed(() => [
  {
    label: 'Total Groups',
    value: accounts.value.length.toString(),
    icon: 'i-heroicons-building-office-2',
    iconBg: 'rgba(1,105,111,0.08)',
    iconColor: '#01696f',
    accent: '',
  },
  {
    label: 'Active Groups',
    value: activeAccounts.value.length.toString(),
    icon: 'i-heroicons-check-badge',
    iconBg: 'rgba(22,163,74,0.08)',
    iconColor: '#16a34a',
    accent: '',
  },
  {
    label: 'Total Members',
    value: totalMembers.value.toLocaleString(),
    icon: 'i-heroicons-users',
    iconBg: 'rgba(59,130,246,0.08)',
    iconColor: '#3b82f6',
    accent: '',
  },
  {
    label: 'Total Dependents',
    value: totalDependents.value.toLocaleString(),
    icon: 'i-heroicons-user-plus',
    iconBg: 'rgba(139,92,246,0.08)',
    iconColor: '#8b5cf6',
    accent: '',
  },
  {
    label: 'Annual Premium',
    value: fmtCurrency(totalPremium.value),
    icon: 'i-heroicons-banknotes',
    iconBg: 'rgba(1,105,111,0.08)',
    iconColor: '#01696f',
    accent: 'gc-kpi--teal',
  },
  {
    label: 'Monthly Premium',
    value: fmtCurrency(totalMonthlyPremium.value),
    icon: 'i-heroicons-calendar-days',
    iconBg: 'rgba(1,105,111,0.08)',
    iconColor: '#01696f',
    accent: 'gc-kpi--teal',
  },
  {
    label: 'Renewals Due',
    value: renewalDueCount.value.toString(),
    icon: 'i-heroicons-clock',
    iconBg: 'rgba(245,158,11,0.08)',
    iconColor: '#f59e0b',
    accent: 'gc-kpi--amber',
  },
  {
    label: 'Onboarding',
    value: onboardingCount.value.toString(),
    icon: 'i-heroicons-arrow-path',
    iconBg: 'rgba(59,130,246,0.08)',
    iconColor: '#3b82f6',
    accent: '',
  },
  {
    label: 'Avg Commission',
    value: avgCommission.value.toFixed(1) + '%',
    icon: 'i-heroicons-chart-bar',
    iconBg: 'rgba(139,92,246,0.08)',
    iconColor: '#8b5cf6',
    accent: '',
  },
])

/* ── Helpers ── */

function fmtCurrency(n: number) {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(n)
}

function fmtDate(d: string) {
  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}

function lobColor(lob: string) {
  switch (lob) {
    case 'Health': return 'success'
    case 'Life': return 'info'
    case 'Disability': return 'warning'
    default: return 'neutral'
  }
}

function statusBadge(s: string) {
  switch (s) {
    case 'active': return { label: 'Active', color: 'success' as const }
    case 'onboarding': return { label: 'Onboarding', color: 'info' as const }
    case 'renewal_due': return { label: 'Renewal Due', color: 'warning' as const }
    case 'quoting': return { label: 'Quoting', color: 'neutral' as const }
    case 'suspended': return { label: 'Suspended', color: 'error' as const }
    case 'cancelled': return { label: 'Cancelled', color: 'neutral' as const }
    default: return { label: s, color: 'neutral' as const }
  }
}

function renewalClass(d: string) {
  const diff = (new Date(d).getTime() - Date.now()) / 86_400_000
  if (diff < 0) return 'gc-renewal--overdue'
  if (diff <= 30) return 'gc-renewal--urgent'
  if (diff <= 90) return 'gc-renewal--soon'
  return ''
}

function renewalDotClass(d: string) {
  const diff = (new Date(d).getTime() - Date.now()) / 86_400_000
  if (diff < 0) return 'gc-rdot gc-rdot--red'
  if (diff <= 30) return 'gc-rdot gc-rdot--orange'
  if (diff <= 90) return 'gc-rdot gc-rdot--amber'
  return ''
}

function initials(name: string) {
  return name.split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
}

function initialsColor(name: string) {
  const colors = ['#01696f', '#3b82f6', '#8b5cf6', '#16a34a', '#ea580c', '#dc2626', '#ca8a04']
  let hash = 0
  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
  return colors[Math.abs(hash) % colors.length]
}
</script>

<template>
  <div class="gc-page">
    <!-- Header -->
    <div class="gc-header">
      <div class="gc-header-left">
        <h1 class="gc-title">Colectivos</h1>
        <span class="gc-count-badge">{{ filtered.length }}</span>
      </div>
      <div class="gc-header-right">
        <NuxtLink to="/support/collectivos" class="gc-header-link">
          <UIcon name="i-heroicons-cog-6-tooth" class="gc-header-link-icon" />
          Go to Operations
        </NuxtLink>
      </div>
    </div>

    <!-- Filter bar -->
    <div class="gc-filters">
      <UInput
        v-model="search"
        icon="i-heroicons-magnifying-glass"
        placeholder="Search group name, carrier, product..."
        class="gc-filter-search"
      />
      <USelect v-model="lobFilter" :items="lobOptions" value-key="value" label-key="label" class="gc-filter-select" />
      <USelect v-model="statusFilter" :items="statusOptions" value-key="value" label-key="label" class="gc-filter-select" />
      <USelect v-model="carrierFilter" :items="carrierOptions" value-key="value" label-key="label" class="gc-filter-select" />
      <USelect v-model="agentFilter" :items="agentOptions" value-key="value" label-key="label" class="gc-filter-select" />
      <USelect v-model="sortBy" :items="sortOptions" value-key="value" label-key="label" class="gc-filter-select" />
      <div class="gc-view-toggle">
        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'card' && 'gc-view-toggle-btn--active']" title="Card view" @click="viewMode = 'card'">
          <UIcon name="i-heroicons-squares-2x2" style="width: 16px; height: 16px;" />
        </button>
        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'list' && 'gc-view-toggle-btn--active']" title="List view" @click="viewMode = 'list'">
          <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
        </button>
      </div>
    </div>

    <!-- Card View -->
    <div v-if="viewMode === 'card'" class="gc-card-grid">
      <NuxtLink
        v-for="a in filtered"
        :key="a.id"
        :to="`/support/collectivos/${a.id}`"
        class="gc-card-item"
      >
        <div class="gc-card-item__top">
          <span class="gc-avatar" :style="{ background: initialsColor(a.name) + '12', color: initialsColor(a.name) }">{{ initials(a.name) }}</span>
          <div style="flex: 1; min-width: 0;">
            <p class="gc-card-item__name">{{ a.name }}</p>
            <span class="gc-ruc">{{ a.ruc }}</span>
          </div>
          <span class="gc-lob-pill" :class="'gc-lob--' + lobColor(a.lob)">{{ a.lob }}</span>
        </div>
        <div class="gc-card-item__body">
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Carrier</span>
            <span class="gc-card-item__value">{{ a.carrier }}</span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Members</span>
            <span class="gc-card-item__value">{{ a.totalMembers.toLocaleString() }} <span class="gc-dependents">({{ a.dependentsCount }})</span></span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Annual Premium</span>
            <span class="gc-card-item__value" style="font-weight: 600;">{{ fmtCurrency(a.annualPremium) }}</span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Commission</span>
            <span class="gc-card-item__value">{{ a.commissionPct }}%</span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Status</span>
            <span class="gc-status-pill" :class="'gc-status--' + statusBadge(a.status).color">{{ statusBadge(a.status).label }}</span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Renewal</span>
            <span :class="renewalClass(a.renewalDate)">{{ fmtDate(a.renewalDate) }}</span>
          </div>
          <div class="gc-card-item__field">
            <span class="gc-card-item__label">Agent</span>
            <span class="gc-card-item__value">{{ a.agent }}</span>
          </div>
        </div>
        <div v-if="a.hasUrgentIssues" class="gc-card-item__urgent">
          <UIcon name="i-heroicons-exclamation-triangle" style="width: 12px; height: 12px;" />
          Urgent issues
        </div>
      </NuxtLink>
      <div v-if="filtered.length === 0" class="gc-empty" style="grid-column: 1 / -1;">No group accounts match your filters.</div>
    </div>

    <!-- List View -->
    <div v-else class="gc-table-wrap">
      <table class="gc-table">
        <thead>
          <tr>
            <th class="gc-th gc-th--left">Group Name</th>
            <th class="gc-th gc-th--left">LOB</th>
            <th class="gc-th gc-th--left gc-hide-mobile">Carrier</th>
            <th class="gc-th gc-th--right">Members</th>
            <th class="gc-th gc-th--right">Annual Premium</th>
            <th class="gc-th gc-th--right gc-hide-tablet">Monthly Premium</th>
            <th class="gc-th gc-th--right gc-hide-tablet">Comm %</th>
            <th class="gc-th gc-th--left">Status</th>
            <th class="gc-th gc-th--left gc-hide-mobile">Renewal</th>
            <th class="gc-th gc-th--left gc-hide-tablet">Agent</th>
            <th class="gc-th gc-th--center" title="Issues">
              <UIcon name="i-heroicons-exclamation-triangle" class="gc-th-icon" />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="a in filtered" :key="a.id" class="gc-row">
            <td class="gc-td">
              <div class="gc-group-cell">
                <span
                  class="gc-avatar"
                  :style="{ background: initialsColor(a.name) + '12', color: initialsColor(a.name) }"
                >{{ initials(a.name) }}</span>
                <div>
                  <NuxtLink :to="`/support/collectivos/${a.id}`" class="gc-group-link">
                    {{ a.name }}
                  </NuxtLink>
                  <span class="gc-ruc">{{ a.ruc }}</span>
                </div>
              </div>
            </td>
            <td class="gc-td">
              <span class="gc-lob-pill" :class="'gc-lob--' + lobColor(a.lob)">{{ a.lob }}</span>
            </td>
            <td class="gc-td gc-hide-mobile">{{ a.carrier }}</td>
            <td class="gc-td gc-td--num">
              {{ a.totalMembers.toLocaleString() }}
              <span class="gc-dependents">({{ a.dependentsCount }})</span>
            </td>
            <td class="gc-td gc-td--num gc-td--premium">{{ fmtCurrency(a.annualPremium) }}</td>
            <td class="gc-td gc-td--num gc-hide-tablet">{{ fmtCurrency(a.monthlyPremium) }}</td>
            <td class="gc-td gc-td--num gc-hide-tablet">{{ a.commissionPct }}%</td>
            <td class="gc-td">
              <span class="gc-status-pill" :class="'gc-status--' + statusBadge(a.status).color">
                {{ statusBadge(a.status).label }}
              </span>
            </td>
            <td class="gc-td gc-hide-mobile" :class="renewalClass(a.renewalDate)">
              <span :class="renewalDotClass(a.renewalDate)" />
              {{ fmtDate(a.renewalDate) }}
            </td>
            <td class="gc-td gc-hide-tablet">{{ a.agent }}</td>
            <td class="gc-td gc-td--center">
              <span
                v-if="a.hasUrgentIssues"
                class="gc-dot gc-dot--red"
                :title="`Urgent issues on ${a.name}`"
              />
              <span
                v-else-if="a.pendingTasks > 0"
                class="gc-dot gc-dot--amber"
                :title="`${a.pendingTasks} pending task${a.pendingTasks !== 1 ? 's' : ''} on ${a.name}`"
              />
              <span v-else class="gc-dot gc-dot--clear" />
            </td>
          </tr>
          <tr v-if="filtered.length === 0">
            <td colspan="11" class="gc-empty">No group accounts match your filters.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 6. Bottom Summary Bar -->
    <div class="gc-bottom-bar">
      <div class="gc-bottom-inner">
        <span class="gc-bottom-item">
          <UIcon name="i-heroicons-table-cells" class="gc-bottom-icon" />
          {{ filtered.length }} group{{ filtered.length !== 1 ? 's' : '' }} shown
        </span>
        <span class="gc-bottom-sep" />
        <span class="gc-bottom-item">
          Annual premium: <strong>{{ fmtCurrency(filteredTotalAnnual) }}</strong>
        </span>
        <span class="gc-bottom-sep" />
        <span class="gc-bottom-item">
          Members + dependents: <strong>{{ (filteredTotalMembers + filteredTotalDependents).toLocaleString() }}</strong>
        </span>
      </div>
    </div>

    <!-- 7. Cross-links -->
    <div class="gc-crosslinks">
      <NuxtLink to="/support/collectivos" class="gc-crosslink">
        Go to Operations
        <UIcon name="i-heroicons-arrow-right" class="gc-crosslink-icon" />
      </NuxtLink>
      <NuxtLink to="/policies" class="gc-crosslink">
        View All Policies
        <UIcon name="i-heroicons-arrow-right" class="gc-crosslink-icon" />
      </NuxtLink>
    </div>
  </div>
</template>

<style scoped>
/* ── gc- prefix: group cartera scoped styles ── */

.gc-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 48px;
  max-width: 80rem;
  margin: 0 auto;
}

/* ── Header ── */

.gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gc-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gc-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: #01696f;
  background: rgba(1,105,111,0.08);
  padding: 2px 9px;
  border-radius: 10px;
}

.gc-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1;
}

.gc-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #01696f;
  text-decoration: none;
  white-space: nowrap;
  transition: all 150ms ease;
}

.gc-header-link:hover { text-decoration: underline; }

.gc-header-link-icon {
  width: 14px;
  height: 14px;
}

/* ── View toggle ── */

.gc-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  margin-left: auto;
}
.gc-view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #8a8a86;
  cursor: pointer;
  transition: all 0.15s ease;
}
.gc-view-toggle-btn:hover { color: var(--text-primary); }
.gc-view-toggle-btn--active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Card grid ── */

.gc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1023px) { .gc-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .gc-card-grid { grid-template-columns: 1fr; } }

.gc-card-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.gc-card-item:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
  border-color: rgba(1, 105, 111, 0.15);
}
.gc-card-item__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gc-card-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-card-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.gc-card-item__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gc-card-item__label {
  font-size: 12px;
  color: #8a8a86;
}
.gc-card-item__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.gc-card-item__urgent {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #dc2626;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.06);
  border-radius: 6px;
  margin-top: 2px;
}

/* ── Filters ── */

.gc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.gc-filter-search {
  flex: 1 1 220px;
  min-width: 180px;
}

.gc-filter-select {
  width: 100%;
  max-width: 180px;
}

@media (max-width: 639px) {
  .gc-filter-select { max-width: 100%; }
}

/* ── Table ── */

.gc-table-wrap {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
}

.gc-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.gc-th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8a86;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
  white-space: nowrap;
}

.gc-th--left { text-align: left; }
.gc-th--right { text-align: right; }
.gc-th--center { text-align: center; }

.gc-th-icon {
  width: 13px;
  height: 13px;
  color: #8a8a86;
}

.gc-row {
  transition: all 150ms ease;
}

.gc-row:hover {
  background: rgba(1, 105, 111, 0.03);
}

.gc-row:not(:last-child) .gc-td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.gc-td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--text-primary);
}

.gc-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gc-td--premium {
  font-weight: 600;
}

.gc-td--center {
  text-align: center;
}

/* ── Group name cell with avatar ── */

.gc-group-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gc-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.gc-group-link {
  font-weight: 600;
  color: #01696f;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  transition: all 150ms ease;
}

.gc-group-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gc-ruc {
  display: block;
  font-size: 11px;
  color: #8a8a86;
  margin-top: 1px;
}

.gc-dependents {
  color: #8a8a86;
  font-size: 11px;
  margin-left: 2px;
}

/* ── Custom pill badges (LOB) ── */

.gc-lob-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.6;
}

.gc-lob--success {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

.gc-lob--info {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.gc-lob--warning {
  color: #ca8a04;
  background: rgba(202, 138, 4, 0.1);
}

.gc-lob--neutral {
  color: #8a8a86;
  background: rgba(0, 0, 0, 0.06);
}

/* ── Custom pill badges (Status) ── */

.gc-status-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.6;
}

.gc-status--success {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

.gc-status--info {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.gc-status--warning {
  color: #ca8a04;
  background: rgba(202, 138, 4, 0.1);
}

.gc-status--error {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.gc-status--neutral {
  color: #8a8a86;
  background: rgba(0, 0, 0, 0.06);
}

/* ── Renewal color-coding ── */

.gc-renewal--overdue { color: #dc2626; font-weight: 600; }
.gc-renewal--urgent { color: #ea580c; font-weight: 600; }
.gc-renewal--soon { color: #ca8a04; }

/* ── Renewal date dots ── */

.gc-rdot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.gc-rdot--red { background: #dc2626; }
.gc-rdot--orange { background: #ea580c; }
.gc-rdot--amber { background: #f59e0b; }

/* ── Issues dot ── */

.gc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: default;
}

.gc-dot--red { background: #dc2626; }
.gc-dot--amber { background: #f59e0b; }
.gc-dot--clear { background: transparent; }

/* ── Empty state ── */

.gc-empty {
  padding: 40px 14px;
  text-align: center;
  color: #8a8a86;
  font-size: 14px;
}

/* ── Responsive hide classes ── */

@media (max-width: 767px) {
  .gc-hide-mobile { display: none; }
}

@media (max-width: 1023px) {
  .gc-hide-tablet { display: none; }
}

/* ── Bottom Summary Bar ── */

.gc-bottom-bar {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  padding: 14px 20px;
}

.gc-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gc-bottom-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
}

.gc-bottom-item strong {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gc-bottom-icon {
  width: 14px;
  height: 14px;
  color: #8a8a86;
}

.gc-bottom-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d4d4d0;
  flex-shrink: 0;
}

/* ── Cross-links ── */

.gc-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.gc-crosslink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #01696f;
  text-decoration: none;
  transition: all 150ms ease;
}

.gc-crosslink:hover { text-decoration: underline; }

.gc-crosslink-icon {
  width: 14px;
  height: 14px;
}
</style>
