@extends('layouts.superadmin')

@section('title','مراقبة الرسائل — ProSanta')

@section('content')
@php
    use Illuminate\Support\Str;
    use Illuminate\Support\Carbon;

    $fromVal = request('from', isset($from) ? (is_string($from) ? $from : $from->toDateString()) : now()->subDays(14)->toDateString());
    $toVal   = request('to',   isset($to)   ? (is_string($to)   ? $to   : $to->toDateString())   : now()->toDateString());

    // ✅ $messages لازم تكون موجودة (Pagination)
    $rows = $messages ?? collect();

    // ✅ $flagsMap keyBy('message_id') من الكنترولر
    $flagsMap = $flagsMap ?? collect();

    // ===== احصائيات من الصفحة الحالية (فورية) =====
    $totalOnPage   = method_exists($rows,'count') ? $rows->count() : 0;
    $flaggedOnPage = 0;
    $critOnPage    = 0;
    $highOnPage    = 0;
    $openOnPage    = 0;

    // توزيع أنواع
    $typeCounts = [];
    $sevCounts  = ['low'=>0,'medium'=>0,'high'=>0,'critical'=>0];
    $statusCounts = ['open'=>0,'reviewed'=>0,'closed'=>0,'false_positive'=>0];

    if(method_exists($rows,'getCollection')) {
        foreach ($rows->getCollection() as $m) {
            $f = $flagsMap[$m->id] ?? null;
            if($f){
                $flaggedOnPage++;
                $sev = strtolower((string)($f->severity ?? 'low'));
                $st  = strtolower((string)($f->status ?? 'open'));
                $pt  = (string)($f->primary_type ?? $f->flag_type ?? 'unknown');

                if(isset($sevCounts[$sev])) $sevCounts[$sev]++; else $sevCounts['low']++;
                if(isset($statusCounts[$st])) $statusCounts[$st]++; else $statusCounts['open']++;

                if($sev === 'critical') $critOnPage++;
                if($sev === 'high') $highOnPage++;
                if($st === 'open') $openOnPage++;

                $typeCounts[$pt] = ($typeCounts[$pt] ?? 0) + 1;
            }
        }
    }

    // Top types (لـ charts)
    arsort($typeCounts);
    $topTypes = array_slice($typeCounts, 0, 8, true);

    // AI tips (مبسطة لكنها فعالة)
    $aiTips = [];
    if($critOnPage > 0){
        $aiTips[] = "يوجد <b>{$critOnPage}</b> حالة حرجة في هذه الصفحة — الأفضل مراجعتها أولًا.";
    }
    if(($typeCounts['passwords'] ?? 0) > 0 || ($typeCounts['password'] ?? 0) > 0){
        $aiTips[] = "تم رصد مؤشرات على كلمات مرور — فعّل تنبيه توعوي للأعضاء بعدم مشاركة بيانات الدخول.";
    }
    if(($typeCounts['otp'] ?? 0) > 0){
        $aiTips[] = "ظهرت أكواد تحقق/OTP — اقترح إخفاء الأرقام تلقائيًا داخل الرسائل.";
    }
    if(!$aiTips){
        $aiTips[] = "الوضع مستقر ضمن الصفحة الحالية. تابع الحالات المفتوحة فقط.";
    }

    // Helper badges
    $sevBadge = function($sev){
        $sev = strtolower($sev ?: 'low');
        return match($sev){
            'critical' => 'bg-rose-500/15 border-rose-400/25 text-rose-200',
            'high'     => 'bg-amber-500/15 border-amber-400/25 text-amber-200',
            'medium'   => 'bg-cyan-500/12 border-cyan-400/20 text-cyan-200',
            default    => 'bg-white/5 border-white/10 text-white/75',
        };
    };

    $statusBadge = function($st){
        $st = strtolower($st ?: 'open');
        return match($st){
            'open'           => 'bg-rose-500/12 border-rose-400/20 text-rose-200',
            'reviewed'       => 'bg-amber-500/12 border-amber-400/20 text-amber-200',
            'closed'         => 'bg-emerald-500/12 border-emerald-400/20 text-emerald-200',
            'false_positive' => 'bg-slate-500/12 border-white/10 text-white/70',
            default          => 'bg-white/5 border-white/10 text-white/75',
        };
    };
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6 rtl">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-fuchsia-400/30 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-satellite-dish text-xs"></i>
            <span>مراقبة الرسائل — ProSanta • SuperAdmin • Monitoring + Forbidden + Analytics</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            غرفة <span class="text-fuchsia-300">مراقبة الرسائل</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            لوحة ملحمية لمراقبة الرسائل، الحالات الحساسة/الممنوعات، وإحصائيات سريعة — مع أدوات مراجعة واتخاذ قرار.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              بالصفحة: {{ number_format($totalOnPage) }}
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-400/20 text-[11px] text-rose-200">
              <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
              ممنوعات: {{ number_format($flaggedOnPage) }}
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-400/20 text-[11px] text-amber-200">
              <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
              High: {{ number_format($highOnPage) }}
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-400/20 text-[11px] text-rose-200">
              <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
              Critical: {{ number_format($critOnPage) }}
            </span>
          </div>
        </div>

        {{-- FILTER --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-fuchsia-500/20 text-fuchsia-200 grid place-items-center">
                <i class="fa-solid fa-filter"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">فلترة الفترة</div>
                <div class="font-bold text-sm truncate">تحليل سريع</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-2">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $fromVal }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $toVal }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              </div>

              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">بحث سريع</label>
                <input type="text" name="q" value="{{ request('q','') }}" placeholder="ابحث بالموضوع/النص/الاسم…"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
              </div>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 shadow-lg shadow-fuchsia-500/25 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                تحديث
              </button>
            </form>
          </div>
        </div>

      </div>
    </div>

    {{-- TABS --}}
    <div class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-xl p-2">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[12px] font-extrabold">
        <button type="button" class="pm-tab pm-tab-active" data-tab="overview" onclick="pmSwitchTab('overview')">
          <i class="fa-solid fa-gauge-high"></i><span>نظرة عامة</span>
        </button>
        <button type="button" class="pm-tab" data-tab="messages" onclick="pmSwitchTab('messages')">
          <i class="fa-solid fa-inbox"></i><span>كل الرسائل</span>
        </button>
        <button type="button" class="pm-tab" data-tab="forbidden" onclick="pmSwitchTab('forbidden')">
          <i class="fa-solid fa-triangle-exclamation"></i><span>الممنوعات</span>
        </button>
        <button type="button" class="pm-tab" data-tab="members" onclick="pmSwitchTab('members')">
          <i class="fa-solid fa-users"></i><span>الأعضاء</span>
        </button>
      </div>
    </div>

    {{-- OVERVIEW --}}
    <div id="tab-overview" class="space-y-4">

      {{-- STATS CARDS --}}
      <div class="grid gap-4 lg:grid-cols-4">
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5">
          <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-white/8 blur-3xl"></div>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
              <i class="fa-solid fa-layer-group"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">بالصفحة</div>
              <div class="text-2xl font-extrabold text-white">{{ number_format($totalOnPage) }}</div>
            </div>
          </div>
        </div>

        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-rose-600/10 via-slate-950 to-slate-950 border border-rose-400/20 shadow-xl p-5">
          <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-rose-400/10 blur-3xl"></div>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
              <i class="fa-solid fa-shield-halved"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">ممنوعات</div>
              <div class="text-2xl font-extrabold text-rose-200">{{ number_format($flaggedOnPage) }}</div>
            </div>
          </div>
        </div>

        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-600/10 via-slate-950 to-slate-950 border border-amber-400/20 shadow-xl p-5">
          <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-amber-400/10 blur-3xl"></div>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
              <i class="fa-solid fa-triangle-exclamation"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">High</div>
              <div class="text-2xl font-extrabold text-amber-200">{{ number_format($highOnPage) }}</div>
            </div>
          </div>
        </div>

        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-fuchsia-600/10 via-slate-950 to-slate-950 border border-fuchsia-400/20 shadow-xl p-5">
          <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-fuchsia-400/10 blur-3xl"></div>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
              <i class="fa-solid fa-door-open"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">Open</div>
              <div class="text-2xl font-extrabold text-fuchsia-200">{{ number_format($openOnPage) }}</div>
            </div>
          </div>
        </div>
      </div>

      {{-- Charts + AI tips --}}
      <div class="grid gap-4 lg:grid-cols-3">

        <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl p-5 lg:col-span-2">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-white font-extrabold">توزيع الحالات</div>
              <div class="text-[11px] text-slate-300/80 mt-1">حسب الحالة (Open/Reviewed/Closed/False)</div>
            </div>
            <span class="text-[11px] text-slate-200/70">Analytics</span>
          </div>
          <div class="mt-4">
            <canvas id="chartStatus" height="120"></canvas>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl p-5">
          <div class="text-white font-extrabold">نصائح ذكية</div>
          <div class="text-[11px] text-slate-300/80 mt-1">اقتراحات تشغيلية سريعة</div>
          <ul class="mt-4 space-y-2 text-sm text-white/85 leading-relaxed">
            @foreach($aiTips as $t)
              <li class="flex gap-2">
                <span class="mt-1 w-1.5 h-1.5 rounded-full bg-fuchsia-300"></span>
                <span>{!! $t !!}</span>
              </li>
            @endforeach
          </ul>
        </div>

        <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl p-5 lg:col-span-3">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-white font-extrabold">أكثر أنواع المخالفات</div>
              <div class="text-[11px] text-slate-300/80 mt-1">Top 8 حسب primary_type</div>
            </div>
            <span class="text-[11px] text-slate-200/70">Forbidden</span>
          </div>
          <div class="mt-4">
            <canvas id="chartTypes" height="90"></canvas>
          </div>
        </div>

      </div>
    </div>

    {{-- MESSAGES TABLE --}}
    <div id="tab-messages" class="hidden space-y-4">

      <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl">
        <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between">
          <div>
            <h2 class="text-sm sm:text-base font-extrabold text-white">كل الرسائل (Simple)</h2>
            <p class="text-[11px] text-slate-300/80 mt-1">الممنوعات تظهر كبادج + مقتطف آمن.</p>
          </div>
          <div class="text-[11px] text-slate-300/70">
            الصفحة: {{ method_exists($rows,'currentPage') ? $rows->currentPage() : 1 }}
          </div>
        </div>

        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="bg-white/5 text-white/60 text-[11px] font-semibold">
              <tr>
                <th class="text-right px-4 py-3">#</th>
                <th class="text-right px-4 py-3">من</th>
                <th class="text-right px-4 py-3">إلى</th>
                <th class="text-right px-4 py-3">الموضوع</th>
                <th class="text-right px-4 py-3">مقتطف</th>
                <th class="text-right px-4 py-3">ممنوعات</th>
                <th class="text-right px-4 py-3">التاريخ</th>
              </tr>
            </thead>

            <tbody class="divide-y divide-white/5">
              @forelse($rows as $m)
                @php
                  $f = $flagsMap[$m->id] ?? null;
                @endphp
                <tr class="text-white/80 hover:bg-white/5 transition">
                  <td class="px-4 py-3 font-bold text-white">#{{ $m->id }}</td>
                  <td class="px-4 py-3">{{ $m->sender->name ?? ('User#'.$m->sender_id) }}</td>
                  <td class="px-4 py-3">{{ $m->receiver->name ?? ('User#'.$m->receiver_id) }}</td>
                  <td class="px-4 py-3">
                    <div class="font-bold text-white line-clamp-1">{{ $m->subject ?? '(بدون موضوع)' }}</div>
                  </td>
                  <td class="px-4 py-3 text-[12px] text-slate-200/80 line-clamp-2">
                    {{ Str::limit($m->body ?? '', 90) }}
                  </td>
                  <td class="px-4 py-3">
                    @if($f)
                      <div class="flex flex-wrap gap-2">
                        <span class="inline-flex items-center px-3 py-1 rounded-full border text-[11px] font-bold {{ $sevBadge($f->severity) }}">
                          {{ strtoupper($f->severity) }}
                        </span>
                        <span class="inline-flex items-center px-3 py-1 rounded-full border text-[11px] font-bold {{ $statusBadge($f->status) }}">
                          {{ strtoupper($f->status) }}
                        </span>
                        <span class="inline-flex items-center px-3 py-1 rounded-full border text-[11px] font-bold bg-white/5 border-white/10 text-white/85">
                          {{ $f->primary_type ?? $f->flag_type ?? 'flag' }}
                        </span>
                      </div>
                    @else
                      <span class="text-[11px] text-slate-300/60">—</span>
                    @endif
                  </td>
                  <td class="px-4 py-3 text-xs text-slate-300/70 whitespace-nowrap">
                    {{ optional($m->created_at)->format('Y-m-d H:i') }}
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" class="px-4 py-10 text-center text-slate-300/70">
                    لا توجد بيانات ضمن هذه الفلاتر.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        @if(method_exists($rows,'links'))
          <div class="px-4 sm:px-6 py-4 border-t border-white/10">
            {{ $rows->links() }}
          </div>
        @endif
      </div>

    </div>

    {{-- FORBIDDEN QUICK LIST --}}
    <div id="tab-forbidden" class="hidden space-y-4">
      <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl p-5">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-white font-extrabold">ملخص الممنوعات بالصفحة</div>
            <div class="text-[11px] text-slate-300/80 mt-1">تركيز سريع بدون فتح صفحات أخرى.</div>
          </div>
        </div>

        <div class="mt-4 grid gap-3 lg:grid-cols-2">
          @php
            $shown = 0;
          @endphp

          @if(method_exists($rows,'getCollection'))
            @foreach($rows->getCollection() as $m)
              @php $f = $flagsMap[$m->id] ?? null; @endphp
              @if($f)
                @php $shown++; @endphp
                <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
                  <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                      <div class="text-white font-extrabold text-sm">
                        #{{ $m->id }} • {{ $f->primary_type ?? $f->flag_type ?? 'flag' }}
                      </div>
                      <div class="text-[11px] text-slate-300/80 mt-1">
                        {{ $m->sender->name ?? ('User#'.$m->sender_id) }} → {{ $m->receiver->name ?? ('User#'.$m->receiver_id) }}
                      </div>
                      <div class="mt-2 text-[12px] text-slate-200/80 line-clamp-2">
                        {{ $f->snippet ?? Str::limit($m->body ?? '', 120) }}
                      </div>
                    </div>
                    <div class="flex flex-col gap-2 shrink-0">
                      <span class="inline-flex items-center px-3 py-1 rounded-full border text-[11px] font-bold {{ $sevBadge($f->severity) }}">
                        {{ strtoupper($f->severity) }}
                      </span>
                      <span class="inline-flex items-center px-3 py-1 rounded-full border text-[11px] font-bold {{ $statusBadge($f->status) }}">
                        {{ strtoupper($f->status) }}
                      </span>
                    </div>
                  </div>
                </div>
              @endif
            @endforeach
          @endif

          @if($shown === 0)
            <div class="lg:col-span-2 rounded-3xl border border-dashed border-white/15 bg-black/30 px-4 py-10 text-center text-slate-300/70 text-sm">
              لا يوجد ممنوعات ضمن الصفحة الحالية ✅
            </div>
          @endif
        </div>
      </div>
    </div>

    {{-- MEMBERS (placeholder لطيف — بدون ما يكسر) --}}
    <div id="tab-members" class="hidden space-y-4">
      <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl p-6">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="text-white font-extrabold text-lg">إحصائيات لكل عضو</div>
            <div class="text-[11px] text-slate-300/80 mt-1">
              هذا القسم يفتح صفحة “لكل عضو” (Active) لاحقًا — نفس ستايل سقراط.
            </div>
          </div>
          <span class="px-3 py-1 rounded-full bg-amber-500/10 border border-amber-400/25 text-amber-200 text-[11px] font-bold">
            قريبًا
          </span>
        </div>

        <div class="mt-4 text-sm text-slate-200/80 leading-relaxed">
          • إحصائيات الرسائل لكل عضو (Sent/Received/Unread/Flags).<br>
          • Top مخاطرة + آخر 20 رسالة.<br>
          • توصيات تشغيلية “ذكية” حسب سلوك العضو.
        </div>
      </div>
    </div>

  </div>
</div>

{{-- Charts --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Tabs
  function pmSwitchTab(tab){
    document.querySelectorAll('[id^="tab-"]').forEach(el => el.classList.add('hidden'));
    document.getElementById('tab-' + tab)?.classList.remove('hidden');

    document.querySelectorAll('.pm-tab').forEach(b => b.classList.remove('pm-tab-active'));
    document.querySelector(`.pm-tab[data-tab="${tab}"]`)?.classList.add('pm-tab-active');
  }

  // Default show overview
  pmSwitchTab('overview');

  // Charts data from Blade
  const statusLabels = @json(array_keys($statusCounts));
  const statusValues = @json(array_values($statusCounts));

  const typesLabels = @json(array_keys($topTypes));
  const typesValues = @json(array_values($topTypes));

  // Status chart
  const c1 = document.getElementById('chartStatus');
  if(c1){
    new Chart(c1, {
      type: 'bar',
      data: { labels: statusLabels, datasets: [{ data: statusValues }] },
      options: { plugins:{legend:{display:false}}, responsive:true }
    });
  }

  // Types chart
  const c2 = document.getElementById('chartTypes');
  if(c2){
    new Chart(c2, {
      type: 'bar',
      data: { labels: typesLabels, datasets: [{ data: typesValues }] },
      options: { plugins:{legend:{display:false}}, responsive:true }
    });
  }
</script>

<style>
  .line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .pm-tab{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.75rem .6rem;border-radius:1.25rem;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    transition: .15s ease;
    font-weight:900;
  }
  .pm-tab:hover{background: rgba(255,255,255,.10)}
  .pm-tab-active{
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.30) !important;
    color: rgba(167,243,208,1) !important;
  }
</style>
@endsection