@extends('layouts.enterprise')

@section('title', 'Emails')

@section('content')
  @php
    $isAccountant = request()->routeIs('accountant.*');
    $indexRoute = $isAccountant
      ? route('accountant.incomes.emails.index')
      : route('admin.incomes.emails.index');
    $detailRouteName = $isAccountant
      ? 'accountant.incomes.emails.show'
      : 'admin.incomes.emails.show';
    $destroyRouteName = $isAccountant
      ? 'accountant.incomes.emails.destroy'
      : 'admin.incomes.emails.destroy';
    $suggestionRouteName = $isAccountant
      ? 'accountant.incomes.emails.items.suggestion'
      : 'admin.incomes.emails.items.suggestion';
    $generateInvoiceRoute = $isAccountant
      ? route('accountant.incomes.generate_invoice')
      : route('admin.incomes.generate_invoice');
    $hasActiveFilters = (($filters['q'] ?? '') !== '')
      || (($filters['status'] ?? 'all') !== 'all')
      || (($filters['groupable'] ?? 'all') !== 'all')
      || (($filters['client_id'] ?? null) !== null);
    $groupableGroups = $emailBuckets['groupableGroups'] ?? collect();
    $nonGroupableEmails = $emailBuckets['nonGroupableEmails'] ?? collect();
    $bucketCounts = $emailBuckets['counts'] ?? [
      'all' => $emails->total(),
      'groupable_emails' => 0,
      'groupable_groups' => 0,
      'non_groupable' => 0,
    ];
  @endphp

  <div class="card inbound-emails-page-shell">
    <h1 class="page-title">Emails inbound</h1>
    <p class="subtle">Aquí revisamos los correos transaccionales que llegan por webhook, sus líneas del recibo y el dato que puede ayudarte a decidir si una solicitud es agrupable por cliente + RC.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif
    @if($errors->any())
      <div class="error">
        <ul>
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="card card-dashed inbound-emails-webhook-card">
      <div class="inbound-emails-webhook-card__header">
        <div>
          <h2 class="section-title">Webhook inbound</h2>
          <p class="subtle">Esta es la URL que debe recibir el POST del proveedor de correo inbound.</p>
        </div>
        <span class="badge">Header: {{ $webhookHeaderName }}</span>
      </div>
      <div class="inbound-emails-webhook-card__endpoint">
        <code>{{ $webhookUrl }}</code>
      </div>
      <div class="inbound-emails-webhook-card__tips">
        <span class="badge">Body esperado: `eventType = EMAIL_INBOUND`</span>
        <span class="badge">Se guarda body + campos parseados + líneas</span>
        <span class="badge">La agrupación visible toma el motor configurado en el cliente</span>
      </div>
    </div>

    <sl-details class="filters-collapse" @if($hasActiveFilters) open @endif>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Filtros</span>
        @if($hasActiveFilters)
          <span class="badge">Activos</span>
        @endif
      </div>
      <form method="GET" action="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--four">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Asunto, cliente, RFC, proveedor, OC, RC o entrega">
          </div>
          <div class="field">
            <label>Cliente</label>
            <select name="client_id">
              <option value="">Todos</option>
              @foreach($clients as $client)
                <option value="{{ $client->id }}" @selected(($filters['client_id'] ?? null) === $client->id)>{{ $client->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Parseo</label>
            <select name="status">
              <option value="all" @selected(($filters['status'] ?? 'all') === 'all')>Todos</option>
              <option value="parsed" @selected(($filters['status'] ?? 'all') === 'parsed')>Parseado</option>
              <option value="partial" @selected(($filters['status'] ?? 'all') === 'partial')>Parcial</option>
              <option value="failed" @selected(($filters['status'] ?? 'all') === 'failed')>Fallido</option>
              <option value="pending" @selected(($filters['status'] ?? 'all') === 'pending')>Pendiente</option>
            </select>
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          <span class="badge">Resultados: {{ $emails->total() }}</span>
        </div>
      </form>
    </sl-details>

    <sl-tab-group class="inbound-emails-tabs" style="margin-top:14px;">
      <sl-tab slot="nav" panel="all">Disponibles <span class="tab-count">{{ $bucketCounts['all'] }}</span></sl-tab>
      <sl-tab slot="nav" panel="groupable">Agrupables <span class="tab-count">{{ $bucketCounts['groupable_emails'] }}</span></sl-tab>
      <sl-tab slot="nav" panel="non-groupable">No agrupables <span class="tab-count">{{ $bucketCounts['non_groupable'] }}</span></sl-tab>

      <sl-tab-panel name="all">
        <div class="tab-intro">
          <span class="badge">Grupos activos: {{ $bucketCounts['groupable_groups'] }}</span>
          <span class="badge">No agrupables: {{ $bucketCounts['non_groupable'] }}</span>
        </div>
        <div class="movements-table-wrap">
          <table class="movements-table movements-table--wide">
            <thead>
              <tr>
                <th>Recibido</th>
                <th>Cliente</th>
                <th>OC</th>
                <th>RC cliente</th>
                <th>Tipo RC</th>
                <th>Entrega</th>
                <th>Item inbound</th>
                <th>Monto inbound</th>
                <th>Líneas</th>
                <th>Total</th>
                <th>Grupo</th>
                <th>JN</th>
                <th>Uso</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              @forelse($emails as $email)
                @php
                  $usageSummary = (array) ($email->usage_summary ?? []);
                  $usageStatus = (string) ($usageSummary['status'] ?? 'available');
                  $isActionable = in_array($usageStatus, ['available', 'partial'], true);
                  $usageFolios = collect($usageSummary['folios'] ?? [])->filter()->values();
                  $usageJns = collect($usageSummary['jns'] ?? [])->filter()->values();
                  $jnPreview = (array) ($email->jn_preview ?? []);
                  $previewJns = collect($jnPreview['jns'] ?? [])->filter()->values();
                  $groupingPreview = (array) ($email->grouping_preview ?? []);
                  $operationalGroupCount = (int) ($email->operational_group_count ?? 0);
                  $emailItems = $email->items ?? collect();
                  $singleEmailItem = $emailItems->count() === 1 ? $emailItems->first() : null;
                  $singleItemCandidates = $singleEmailItem ? collect($email->candidate_options[(int) $singleEmailItem->id] ?? [])->values() : collect();
                  $firstInboundItem = $emailItems->first();
                  $inboundItemSummary = $firstInboundItem?->description
                    ? \Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', (string) $firstInboundItem->description) ?: (string) $firstInboundItem->description, 90)
                    : 'Sin item detectado';
                  $inboundItemAmount = $emailItems->sum(fn ($item) => (float) ($item->total ?? 0));
                  $resolvedInboundAmount = $inboundItemAmount > 0 ? $inboundItemAmount : (float) ($email->total_amount ?? 0);
                @endphp
                <tr>
                  <td>
                    <div>{{ optional($email->received_at)->format('Y-m-d H:i') ?: '-' }}</div>
                    <div class="subtle cell-subtle">{{ $email->sender_email ?: '-' }}</div>
                  </td>
                  <td>
                    <div>{{ $email->client?->name ?: ($email->client_name ?: '-') }}</div>
                    <div class="subtle cell-subtle">{{ $email->client_rfc ?: '-' }}</div>
                  </td>
                  <td>
                    <div>{{ $email->purchase_order_number ?: '-' }}</div>
                    <div class="subtle cell-subtle">{{ $email->purchase_order_date_raw ?: '-' }}</div>
                  </td>
                  <td>
                    <div>{{ $email->purchase_receipt_number ?: '-' }}</div>
                    <div class="subtle cell-subtle">{{ $email->purchase_receipt_date_raw ?: '-' }}</div>
                  </td>
                  <td>
                    <span class="badge {{ ($groupingPreview['mode'] ?? 'none') === 'grouped' ? 'badge-income' : '' }}">
                      {{ $groupingPreview['label'] ?? 'Sin tipo RC detectado' }}
                    </span>
                    <div class="subtle cell-subtle">{{ $groupingPreview['engine_label'] ?? 'Sin agrupación' }}</div>
                  </td>
                  <td>
                    <div>{{ $email->delivery_office_code ?: '-' }}</div>
                    <div class="subtle cell-subtle">{{ $email->delivery_office_name ?: ($email->delivery_address ?: '-') }}</div>
                  </td>
                  <td>
                    <div>{{ $inboundItemSummary }}</div>
                    @if($emailItems->count() > 1)
                      <div class="subtle cell-subtle">+{{ $emailItems->count() - 1 }} línea(s) más</div>
                    @endif
                  </td>
                  <td>{{ $resolvedInboundAmount > 0 ? '$'.number_format($resolvedInboundAmount, 2) : '-' }}</td>
                  <td>{{ $email->items_count ?: $email->line_items_count }}</td>
                  <td>{{ $email->total_amount !== null ? '$'.number_format((float) $email->total_amount, 2) : '-' }}</td>
                  <td>
                    @if($operationalGroupCount > 1 && $isActionable)
                      <span class="badge badge-income">Grupo de {{ $operationalGroupCount }}</span>
                      <div class="subtle cell-subtle">{{ $email->operational_group_label ?: 'Listo para agrupar' }}</div>
                    @elseif(!$isActionable)
                      <span class="badge badge-warning">Usado</span>
                      <div class="subtle cell-subtle">Fuera de sugerencias activas</div>
                    @else
                      <span class="badge">Solo</span>
                      <div class="subtle cell-subtle">Sin grupo operativo</div>
                    @endif
                  </td>
                  <td>
                    <span class="badge {{ ($jnPreview['mode'] ?? 'none') === 'linked' ? 'badge-warning' : ((($jnPreview['mode'] ?? 'none') === 'suggested' || ($jnPreview['mode'] ?? 'none') === 'selected') ? 'badge-income' : '') }}">
                      {{ $jnPreview['label'] ?? 'Sin JN detectado' }}
                    </span>
                    @if($previewJns->isNotEmpty())
                      <div class="subtle cell-subtle">{{ $previewJns->take(3)->implode(', ') }}</div>
                      @if($previewJns->count() > 3)
                        <div class="subtle cell-subtle">+{{ $previewJns->count() - 3 }} más</div>
                      @endif
                    @else
                      <div class="subtle cell-subtle">Sin solicitud sugerida todavía</div>
                    @endif
                    @if($isActionable && $singleEmailItem)
                      <form method="POST" action="{{ route($suggestionRouteName, ['inboundEmail' => $email, 'inboundEmailItem' => $singleEmailItem]) }}" class="jn-select-form">
                        @csrf
                        @method('PATCH')
                        <select name="selected_pipefy_request_item_id" onchange="this.form.submit()">
                          <option value="">Selecciona JN manualmente</option>
                          @foreach($singleItemCandidates as $candidate)
                          <option
                              value="{{ (int) ($candidate['request_item_id'] ?? 0) }}"
                              @selected((int) ($singleEmailItem->selected_pipefy_request_item_id ?? 0) === (int) ($candidate['request_item_id'] ?? 0))
                            >
                              {{ ($candidate['jn'] ?? '-') . ' · $' . number_format((float) ($candidate['line_total'] ?? 0), 2) . ' · ' . ($candidate['description'] ?? '-') }}
                            </option>
                          @endforeach
                        </select>
                        @if($singleItemCandidates->isEmpty())
                          <div class="subtle cell-subtle">Abre el detalle para revisar opciones manuales.</div>
                        @endif
                      </form>
                    @elseif($isActionable)
                      <div class="subtle cell-subtle">Edita por línea en el detalle del email.</div>
                    @endif
                  </td>
                  <td>
                    <span class="badge {{ $usageStatus === 'burned' ? 'badge-expense' : ($usageStatus === 'available' ? 'badge-income' : 'badge-warning') }}">
                      {{ $usageSummary['label'] ?? 'Disponible' }}
                    </span>
                    @if($usageFolios->isNotEmpty())
                      <div class="subtle cell-subtle">Vista previa: {{ $usageFolios->implode(', ') }}</div>
                    @endif
                    @if($usageJns->isNotEmpty())
                      <div class="subtle cell-subtle">JN: {{ $usageJns->implode(', ') }}</div>
                    @endif
                    @if(($usageSummary['count_available'] ?? 0) > 0)
                      <div class="subtle cell-subtle">Líneas disponibles: {{ (int) ($usageSummary['count_available'] ?? 0) }}</div>
                    @endif
                  </td>
                  <td>
                    <div class="inbound-emails-actions">
                      <sl-button size="small" href="{{ route($detailRouteName, $email) }}">
                        Ver detalle
                      </sl-button>
                      <form method="POST" action="{{ route($destroyRouteName, $email) }}" onsubmit="return confirm('¿Eliminar este email inbound?');">
                        @csrf
                        @method('DELETE')
                        <sl-button type="submit" size="small" variant="danger">
                          Eliminar
                        </sl-button>
                      </form>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="14">Aún no hay correos inbound registrados.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        <div style="margin-top:16px;">
          {{ $emails->onEachSide(1)->links('vendor.pagination.enterprise') }}
        </div>
      </sl-tab-panel>

      <sl-tab-panel name="groupable">
        <div class="tab-intro">
          <span class="badge">Correos agrupables: {{ $bucketCounts['groupable_emails'] }}</span>
          <span class="badge">Grupos activos: {{ $bucketCounts['groupable_groups'] }}</span>
        </div>
        @if($groupableGroups->isEmpty())
          <div class="card card-dashed empty-state-card">
            <h3 class="section-title">Todavía no hay grupos listos</h3>
            <p class="subtle">Aquí iremos mostrando los correos que sí caen en el mismo cliente + tipo de RC + moneda según el motor de agrupación del cliente.</p>
          </div>
        @else
          <div class="email-group-grid">
            @foreach($groupableGroups as $group)
              @php
                $groupAnchor = 'group-'.md5((string) ($group['group_key'] ?? uniqid('', true)));
              @endphp
              <article class="card card-dashed email-group-card" id="{{ $groupAnchor }}">
                <div class="email-group-card__header">
                  <div>
                    <h3 class="section-title" style="margin-bottom:6px;">{{ $group['client_name'] ?: 'Sin cliente' }}</h3>
                    <div class="email-group-card__meta">
                      <span class="badge badge-income">{{ $group['group_label'] ?: 'Sin tipo RC detectado' }}</span>
                      <span class="badge">{{ $group['engine_label'] ?: 'Sin agrupación' }}</span>
                      @if(!empty($group['currency_code']))
                        <span class="badge">{{ $group['currency_code'] }}</span>
                      @endif
                    </div>
                  </div>
                  <div class="email-group-card__actions">
                    @if((int) ($group['client_id'] ?? 0) > 0)
                      <sl-button
                        size="small"
                        href="{{ $generateInvoiceRoute }}?client_id={{ $group['client_id'] }}&inbound_email_ids={{ collect($group['emails'] ?? collect())->pluck('id')->implode(',') }}"
                      >
                        Ir a vista previa
                      </sl-button>
                    @endif
                  </div>
                </div>

                <div class="email-group-card__stats">
                  <div><strong>{{ $group['count'] }}</strong><span>correos</span></div>
                  <div><strong>${{ number_format((float) ($group['total_amount'] ?? 0), 2) }}</strong><span>total acumulado</span></div>
                  <div><strong>{{ collect($group['rcs'] ?? [])->count() }}</strong><span>RC cliente</span></div>
                </div>

                <div class="email-group-card__info">
                  <div>
                    <span class="subtle">RCs del grupo</span>
                    <div>{{ collect($group['rcs'] ?? [])->implode(', ') ?: 'Sin RC' }}</div>
                  </div>
                  <div>
                    <span class="subtle">Oficinas</span>
                    <div>{{ collect($group['offices'] ?? [])->implode(' · ') ?: 'Sin oficina detectada' }}</div>
                  </div>
                  <div>
                    <span class="subtle">JN sugeridos</span>
                    <div>{{ collect($group['jns'] ?? [])->implode(', ') ?: 'Sin JN sugerido todavía' }}</div>
                  </div>
                </div>

                <div class="email-group-card__emails">
                  @foreach($group['emails'] as $groupEmail)
                    @php
                      $groupEmailJns = collect($groupEmail->jn_preview['jns'] ?? [])->filter()->values();
                    @endphp
                    <a class="email-group-email" href="{{ route($detailRouteName, $groupEmail) }}">
                      <div class="email-group-email__top">
                        <strong>RC {{ $groupEmail->purchase_receipt_number ?: '-' }}</strong>
                        <span>{{ optional($groupEmail->received_at)->format('Y-m-d H:i') ?: '-' }}</span>
                      </div>
                      <div class="email-group-email__subject">{{ \Illuminate\Support\Str::limit($groupEmail->subject ?: '(Sin asunto)', 90) }}</div>
                      <div class="email-group-email__meta">
                        <span>{{ $groupEmail->delivery_office_code ?: '-' }}</span>
                        <span>{{ $groupEmail->delivery_office_name ?: ($groupEmail->delivery_address ?: '-') }}</span>
                        <span>{{ $groupEmailJns->isNotEmpty() ? $groupEmailJns->implode(', ') : 'Sin JN sugerido' }}</span>
                      </div>
                    </a>
                  @endforeach
                </div>
              </article>
            @endforeach
          </div>
        @endif
      </sl-tab-panel>

      <sl-tab-panel name="non-groupable">
        <div class="tab-intro">
          <span class="badge">Disponibles pero sin grupo activo: {{ $bucketCounts['non_groupable'] }}</span>
        </div>
        <div class="movements-table-wrap">
          <table class="movements-table" style="min-width:1200px;">
            <thead>
              <tr>
                <th>Recibido</th>
                <th>Cliente</th>
                <th>RC cliente</th>
                <th>Tipo RC</th>
                <th>Item inbound</th>
                <th>Monto inbound</th>
                <th>Entrega</th>
                <th>JN sugerido</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              @forelse($nonGroupableEmails as $email)
                @php
                  $jnPreview = (array) ($email->jn_preview ?? []);
                  $previewJns = collect($jnPreview['jns'] ?? [])->filter()->values();
                  $groupingPreview = (array) ($email->grouping_preview ?? []);
                  $emailItems = $email->items ?? collect();
                  $firstInboundItem = $emailItems->first();
                  $inboundItemSummary = $firstInboundItem?->description
                    ? \Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', (string) $firstInboundItem->description) ?: (string) $firstInboundItem->description, 90)
                    : 'Sin item detectado';
                  $resolvedInboundAmount = (float) ($emailItems->sum(fn ($item) => (float) ($item->total ?? 0)) ?: ($email->total_amount ?? 0));
                @endphp
                <tr>
                  <td>{{ optional($email->received_at)->format('Y-m-d H:i') ?: '-' }}</td>
                  <td>{{ $email->client?->name ?: ($email->client_name ?: '-') }}</td>
                  <td>{{ $email->purchase_receipt_number ?: '-' }}</td>
                  <td>
                    <span class="badge {{ ($groupingPreview['mode'] ?? 'none') === 'grouped' ? 'badge-income' : '' }}">
                      {{ $groupingPreview['label'] ?? 'Sin tipo RC detectado' }}
                    </span>
                  </td>
                  <td>
                    <div>{{ $inboundItemSummary }}</div>
                    @if($emailItems->count() > 1)
                      <div class="subtle cell-subtle">+{{ $emailItems->count() - 1 }} línea(s) más</div>
                    @endif
                  </td>
                  <td>{{ $resolvedInboundAmount > 0 ? '$'.number_format($resolvedInboundAmount, 2) : '-' }}</td>
                  <td>{{ trim(collect([$email->delivery_office_code, $email->delivery_office_name ?: $email->delivery_address])->filter()->implode(' | ')) ?: '-' }}</td>
                  <td>{{ $previewJns->isNotEmpty() ? $previewJns->implode(', ') : 'Sin solicitud sugerida todavía' }}</td>
                  <td>
                    <sl-button size="small" href="{{ route($detailRouteName, $email) }}">
                      Ver detalle
                    </sl-button>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="9">No hay correos disponibles fuera de grupo.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </sl-tab-panel>

    </sl-tab-group>
  </div>
@endsection

@push('styles')
  <style>
    .wrap {
      max-width: min(1760px, calc(100vw - 32px));
      padding-left: 16px;
      padding-right: 16px;
    }
    .inbound-emails-page-shell {
      width: 100%;
    }
    .filters-collapse {
      margin-top: 14px;
    }
    .filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-favicon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px;
    }
    .filters-grid {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }
    .filters-grid--four {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .inbound-emails-webhook-card {
      margin-top: 14px;
      border: 1px dashed var(--border);
      box-shadow: none;
    }
    .inbound-emails-webhook-card__header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
    }
    .inbound-emails-webhook-card__endpoint {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #0f172a;
      color: #e2e8f0;
      overflow-x: auto;
    }
    .inbound-emails-webhook-card__endpoint code {
      font-size: 0.95rem;
      white-space: nowrap;
    }
    .inbound-emails-webhook-card__tips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .inbound-emails-tabs::part(base) {
      display: block;
    }
    .inbound-emails-tabs::part(nav) {
      border-bottom: 1px solid var(--border);
      gap: 6px;
      flex-wrap: wrap;
      padding-bottom: 8px;
    }
    .inbound-emails-tabs::part(body) {
      padding-top: 14px;
    }
    .tab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      margin-left: 6px;
      padding: 0 6px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #0f172a;
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1;
    }
    .tab-intro {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .movements-table {
      min-width: 1500px;
      margin: 0;
      border: 0;
    }
    .cell-subtle {
      display: block;
      margin-top: 2px;
    }
    .inbound-emails-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .inbound-emails-actions form {
      margin: 0;
    }
    .jn-select-form {
      margin-top: 8px;
    }
    .jn-select-form select {
      width: 100%;
      min-width: 260px;
    }
    .email-group-grid {
      display: grid;
      gap: 14px;
    }
    .email-group-card {
      border-color: #bfe8e9;
      background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.06), rgba(255, 255, 255, 0)) #fff;
    }
    .email-group-card__header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
    }
    .email-group-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .email-group-card__actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: end;
    }
    .email-group-card__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .email-group-card__stats > div,
    .email-group-card__info > div {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #dbeafe;
      background: rgba(255, 255, 255, 0.92);
    }
    .email-group-card__stats strong {
      display: block;
      font-size: 1.1rem;
      color: #0f172a;
    }
    .email-group-card__stats span {
      display: block;
      margin-top: 4px;
      color: #64748b;
      font-size: 0.86rem;
    }
    .email-group-card__info {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .email-group-card__emails {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .email-group-email {
      display: block;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      color: inherit;
      text-decoration: none;
      transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .email-group-email:hover {
      border-color: #14b8a6;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
    }
    .email-group-email__top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: baseline;
    }
    .email-group-email__subject {
      margin-top: 6px;
      color: #0f172a;
      font-weight: 600;
    }
    .email-group-email__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
      color: #64748b;
      font-size: 0.88rem;
    }
    .empty-state-card {
      margin-top: 6px;
    }
    @media (max-width: 960px) {
      .wrap {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
      }
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
      .inbound-emails-webhook-card__header {
        flex-direction: column;
      }
      .email-group-card__header,
      .email-group-card__stats,
      .email-group-card__info,
      .email-group-email__top {
        grid-template-columns: 1fr;
        flex-direction: column;
      }
    }
  </style>
@endpush