@extends('layouts.dash')

@section('content')
<div class="flex min-h-screen" style="display:grid;grid-template-columns:220px 1fr;">

  {{-- ===== SIDEBAR ===== --}}
  <aside class="sticky top-0 h-screen flex flex-col border-r border-white/6 bg-s0">

    {{-- HEADER (fixed) --}}
    <div class="flex-none" style="padding:16px 12px 0;">

      {{-- Brand --}}
      <div class="flex items-center gap-[9px] border-b border-white/6" style="padding:4px 6px 12px;">
        <div class="clu-brand-mark-sm w-[26px] h-[26px] rounded-[7px] flex-none" aria-hidden="true"></div>
        <div class="font-semibold text-[14px] tracking-[-0.01em]">
          CluPilot<span class="text-t2 font-medium ml-1 text-[11px]">v2.4</span>
        </div>
      </div>

      {{-- Workspace switch --}}
      <button class="flex items-center gap-[9px] border border-white/6 rounded-md bg-surface transition-colors hover:bg-[#14141e] cursor-pointer w-full" style="padding:8px 9px;margin-top:12px;" aria-label="Workspace wechseln">
        <div class="w-[22px] h-[22px] rounded-[5px] grid place-items-center text-bg font-bold text-[11px] flex-none" style="background:linear-gradient(135deg,#3ecf8e,#2a9d6f);">AC</div>
        <div class="flex-1 min-w-0 text-left">
          <div class="text-[12.5px] font-medium truncate">Acme Cluster</div>
          <div class="text-[10.5px] text-t2 font-mono">team · 14 user</div>
        </div>
        <svg class="text-dim flex-none" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M8 9l4-4 4 4M8 15l4 4 4-4"/>
        </svg>
      </button>
    </div>

    {{-- Navigation (scrollable) --}}
    <nav class="flex flex-col gap-[14px] flex-1 overflow-y-auto min-h-0" style="padding:12px 12px 0;">

      <div class="flex flex-col gap-[1px]">
        <div class="text-[10.5px] uppercase tracking-[.08em] text-dim font-semibold" style="padding:6px 9px 4px;">Übersicht</div>
        <div class="clu-nav-active flex items-center gap-[9px] rounded-md text-t1 cursor-pointer text-[12.5px] transition-all bg-[#181822]" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-akzent flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
          <span>Dashboard</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 12h4l3-7 4 14 3-7h4"/></svg>
          <span>Metriken</span>
          <span class="ml-auto text-[10.5px] font-mono text-t2 bg-[#14141e] px-[6px] py-[1px] rounded-[10px] border border-white/6">live</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
          <span>Aktivität</span>
        </div>
      </div>

      <div class="flex flex-col gap-[1px]">
        <div class="text-[10.5px] uppercase tracking-[.08em] text-dim font-semibold" style="padding:6px 9px 4px;">Infrastruktur</div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><circle cx="7" cy="7.5" r="0.7" fill="currentColor"/><circle cx="7" cy="16.5" r="0.7" fill="currentColor"/></svg>
          <span>Server</span>
          <span class="ml-auto text-[10.5px] font-mono text-t2 bg-[#14141e] px-[6px] py-[1px] rounded-[10px] border border-white/6">6</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 12V7a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5M3 12h18l-2 8H5l-2-8z"/></svg>
          <span>Cluster</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 17l-5 3v-7l5 3zM15 17l5 3v-7l-5 3zM12 4l5 3v6l-5 3-5-3V7l5-3z"/></svg>
          <span>SSH Keys</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
          <span>DNS &amp; Domains</span>
        </div>
      </div>

      <div class="flex flex-col gap-[1px]">
        <div class="text-[10.5px] uppercase tracking-[.08em] text-dim font-semibold" style="padding:6px 9px 4px;">WordPress</div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3v18"/></svg>
          <span>Sites</span>
          <span class="ml-auto text-[10.5px] font-mono text-t2 bg-[#14141e] px-[6px] py-[1px] rounded-[10px] border border-white/6">87</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 4v16M4 12h16"/><circle cx="12" cy="12" r="9"/></svg>
          <span>Plugins</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          <span>Themes</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 12c0 5-9 9-9 9s-9-4-9-9V5l9-3 9 3v7z"/><path d="M9 11l2 2 4-4"/></svg>
          <span>Backups</span>
        </div>
      </div>

      <div class="flex flex-col gap-[1px]">
        <div class="text-[10.5px] uppercase tracking-[.08em] text-dim font-semibold" style="padding:6px 9px 4px;">Sicherheit</div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/></svg>
          <span>Firewall</span>
          <span class="ml-auto text-[10.5px] font-mono text-warning bg-warning/12 px-[6px] py-[1px] rounded-[10px] border border-warning/25">3</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/></svg>
          <span>Audit-Log</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
          <span>Zertifikate</span>
        </div>
      </div>

      <div class="flex flex-col gap-[1px]">
        <div class="text-[10.5px] uppercase tracking-[.08em] text-dim font-semibold" style="padding:6px 9px 4px;">Einstellungen</div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
          <span>Allgemein</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>
          <span>Team</span>
        </div>
        <div class="flex items-center gap-[9px] rounded-md text-[#c8c8d8] cursor-pointer text-[12.5px] transition-all hover:bg-[#14141e] hover:text-t1" style="padding:6.5px 9px;">
          <svg class="w-[15px] h-[15px] text-t2 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg>
          <span>Abrechnung</span>
        </div>
      </div>
    </nav>

    {{-- FOOTER (fixed) --}}
    <div class="flex-none border-t border-white/6" style="padding:12px;">

      {{-- Plan box --}}
      <div class="clu-plan-box border border-white/6 rounded-[10px] p-3" style="background:linear-gradient(180deg,#11111a 0%,#0e0e15 100%);">
        <div class="relative flex items-center justify-between text-[11.5px]">
          <span class="font-semibold">Team Plan</span>
          <span class="font-mono text-[10px] text-akzent bg-akzent/12 px-[6px] py-[2px] rounded-[4px] border border-akzent/25">PRO</span>
        </div>
        <div class="relative mt-[9px] h-[5px] rounded-[3px] bg-[#191923] overflow-hidden">
          <span class="block h-full w-[62%] rounded-[3px]" style="background:linear-gradient(90deg,#4f8ef7,#7c5cff);"></span>
        </div>
        <div class="relative flex justify-between mt-[6px] text-[10.5px] text-t2 font-mono">
          <span>87 / 140 sites</span><span>62%</span>
        </div>
        <button class="relative mt-[10px] w-full border border-white/10 rounded-md text-[11.5px] font-medium text-t1 bg-s2 transition-colors hover:bg-s3" style="padding:7px;">
          Upgrade auf Scale →
        </button>
      </div>

      {{-- Logout --}}
      <form method="POST" action="{{ route('logout') }}" class="mt-[8px]">
        @csrf
        <button type="submit" class="flex items-center gap-[9px] w-full rounded-md text-t2 text-[12.5px] font-medium transition-all hover:bg-[#14141e] hover:text-t1" style="padding:7px 9px;">
          <svg class="flex-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
          </svg>
          Abmelden
        </button>
      </form>
    </div>
  </aside>

  {{-- ===== MAIN ===== --}}
  <main class="flex flex-col min-w-0">

    {{-- Topbar --}}
    <div class="clu-topbar sticky top-0 z-[5] flex items-center gap-[14px] border-b border-white/6" style="padding:14px 22px;">
      <div class="flex items-center gap-2 min-w-0">
        <span class="text-t2 text-[12.5px]">Acme Cluster</span>
        <span class="text-dim text-[12.5px]">/</span>
        <span class="text-[14.5px] font-semibold tracking-[-0.01em]">Dashboard</span>
      </div>
      <span class="inline-flex items-center gap-[6px] px-2 py-[3px] border border-success/25 bg-success/12 text-success rounded-full text-[11px] font-medium font-mono">
        <span class="clu-pulse-dot w-[6px] h-[6px] rounded-full bg-current"></span>
        All systems operational
      </span>
      <div class="flex-1"></div>
      <div class="clu-search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input placeholder="Sites, Server, Domains suchen…" />
        <kbd class="font-mono text-[10.5px] text-t2 px-[5px] py-[1px] border border-white/6 rounded-[4px] bg-s0">⌘K</kbd>
      </div>
      <button class="relative w-8 h-8 border border-white/6 rounded-[7px] grid place-items-center text-t2 bg-surface transition-all hover:text-t1 hover:border-white/10 hover:bg-[#15151f]" aria-label="Dokumentation">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01"/></svg>
      </button>
      <button class="relative w-8 h-8 border border-white/6 rounded-[7px] grid place-items-center text-t2 bg-surface transition-all hover:text-t1 hover:border-white/10 hover:bg-[#15151f]" aria-label="Benachrichtigungen">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
        <span class="absolute -top-[3px] -right-[3px] bg-danger text-white text-[9.5px] font-semibold min-w-[16px] h-4 rounded-full grid place-items-center px-1 border-2 border-bg font-mono">3</span>
      </button>
      <button class="clu-btn-dash">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
        Server
      </button>
    </div>

    {{-- Content --}}
    <div class="flex flex-col gap-[22px] w-full mx-auto" style="padding:22px;max-width:1600px;">

      {{-- METRICS --}}
      <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:12px;">
        <div class="clu-metric clu-metric-success bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
            Sites Online
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">
            87<span class="text-[13px] text-t2 font-medium ml-[2px]">/87</span>
          </div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-success">100%</span> Verfügbarkeit · 24h
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#3ecf8e" stroke-width="1.5" points="0,16 8,14 16,15 24,12 32,13 40,10 48,11 60,8"/></svg>
        </div>

        <div class="clu-metric bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
            Ø Response
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">
            142<span class="text-[13px] text-t2 font-medium ml-[2px]">ms</span>
          </div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-success">↓ 8.4%</span> vs. letzte Woche
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#4f8ef7" stroke-width="1.5" points="0,8 8,12 16,9 24,14 32,11 40,10 48,7 60,9"/></svg>
        </div>

        <div class="clu-metric clu-metric-warning bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg>
            Updates Pending
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">24</div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-warning">7 kritisch</span> · 17 minor
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#f5a623" stroke-width="1.5" points="0,12 8,14 16,11 24,9 32,10 40,8 48,6 60,5"/></svg>
        </div>

        <div class="clu-metric clu-metric-success bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12c0 5-9 9-9 9s-9-4-9-9V5l9-3 9 3v7z"/><path d="M9 11l2 2 4-4"/></svg>
            Backups 24h
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">
            86<span class="text-[13px] text-t2 font-medium ml-[2px]">/87</span>
          </div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-warning">1 fehlgeschlagen</span> · 02:14 UTC
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#3ecf8e" stroke-width="1.5" points="0,6 8,5 16,6 24,5 32,6 40,5 48,6 60,5"/></svg>
        </div>

        <div class="clu-metric clu-metric-danger bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/><path d="M12 8v5M12 16h.01"/></svg>
            Security Events
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">128</div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-danger">↑ 23%</span> Brute-force blockiert
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#f05252" stroke-width="1.5" points="0,16 8,12 16,14 24,9 32,11 40,6 48,8 60,4"/></svg>
        </div>

        <div class="clu-metric bg-s2 border border-white/6 rounded-[10px] transition-colors hover:border-white/10" style="padding:14px 14px 13px;">
          <div class="flex items-center gap-[7px] text-t2 text-[11.5px] font-medium">
            <svg class="w-[13px] h-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><ellipse cx="12" cy="6" rx="9" ry="3"/><path d="M3 6v12c0 1.7 4 3 9 3s9-1.3 9-3V6M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></svg>
            Storage
          </div>
          <div class="font-mono text-[22px] font-semibold tracking-[-0.02em] leading-[1.1] mt-2">
            1.84<span class="text-[13px] text-t2 font-medium ml-[2px]">TB</span>
          </div>
          <div class="flex items-center gap-[6px] text-t2 text-[11px] mt-[6px]">
            <span class="font-mono font-medium text-warning">73%</span> von 2.5 TB belegt
          </div>
          <svg class="absolute right-[10px] bottom-[10px] opacity-70" width="60" height="22" viewBox="0 0 60 22" aria-hidden="true"><polyline fill="none" stroke="#8888a0" stroke-width="1.5" points="0,14 8,13 16,12 24,11 32,10 40,9 48,8 60,7"/></svg>
        </div>
      </div>

      {{-- SERVER TABLE --}}
      <section class="bg-s2 border border-white/6 rounded-[10px] overflow-hidden">
        <div class="flex items-center justify-between border-b border-white/6" style="padding:13px 16px 12px;">
          <h3 class="m-0 text-[13px] font-semibold tracking-[-0.005em] flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><circle cx="7" cy="7.5" r="0.7" fill="currentColor"/><circle cx="7" cy="16.5" r="0.7" fill="currentColor"/></svg>
            Server-Flotte
            <span class="font-mono text-[10.5px] text-t2 border border-white/6 bg-hover px-[7px] py-[2px] rounded-[4px] ml-[6px]">6 nodes</span>
          </h3>
          <div class="flex gap-[2px]">
            <button class="px-[9px] py-1 text-[11.5px] text-t1 rounded-[5px] bg-hover transition-colors">Alle</button>
            <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">Produktion</button>
            <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">Staging</button>
            <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">Edge</button>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full border-collapse text-[12.5px]">
            <thead>
              <tr>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Server</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Sites</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">CPU · RAM · Disk</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Standort</th>
                <th class="text-right font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Uptime</th>
                <th class="border-b border-white/6 bg-surface sticky top-0 w-[120px]" style="padding:9px 14px;"></th>
              </tr>
            </thead>
            <tbody id="server-body"></tbody>
          </table>
        </div>
      </section>

      {{-- SITES TABLE --}}
      <section class="bg-s2 border border-white/6 rounded-[10px] overflow-hidden">
        <div class="flex items-center justify-between border-b border-white/6" style="padding:13px 16px 12px;">
          <h3 class="m-0 text-[13px] font-semibold tracking-[-0.005em] flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
            WordPress-Sites
            <span class="font-mono text-[10.5px] text-t2 border border-white/6 bg-hover px-[7px] py-[2px] rounded-[4px] ml-[6px]">8 sichtbar · 87 gesamt</span>
          </h3>
          <div class="flex gap-2 items-center">
            <button class="px-[9px] py-[5px] text-[11.5px] text-t2 border border-white/6 rounded-md bg-surface transition-all hover:text-t1 hover:border-white/10">Filter</button>
            <button class="px-[9px] py-[5px] text-[11.5px] text-t2 border border-white/6 rounded-md bg-surface transition-all hover:text-t1 hover:border-white/10">Sortieren</button>
            <button class="px-[9px] py-[5px] text-[11.5px] text-t1 border border-white/10 rounded-md bg-hover transition-all hover:border-white/15">Alle anzeigen →</button>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full border-collapse text-[12.5px]">
            <thead>
              <tr>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Site</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Server</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">WP</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">PHP</th>
                <th class="text-right font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Visitors / 24h</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Updates</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Backup</th>
                <th class="text-left font-medium text-t2 text-[11px] tracking-[.04em] uppercase border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;">Security</th>
                <th class="border-b border-white/6 bg-surface sticky top-0" style="padding:9px 14px;"></th>
              </tr>
            </thead>
            <tbody id="sites-body"></tbody>
          </table>
        </div>
      </section>

      {{-- BOTTOM ROW --}}
      <div style="display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;">

        {{-- Traffic chart --}}
        <section class="bg-s2 border border-white/6 rounded-[10px] overflow-hidden">
          <div class="flex items-center justify-between border-b border-white/6" style="padding:13px 16px 12px;">
            <h3 class="m-0 text-[13px] font-semibold tracking-[-0.005em] flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 17l5-5 4 4 7-8M14 8h6v6"/></svg>
              Traffic
              <span class="inline-flex items-center gap-[5px] font-mono text-[10.5px] text-success font-medium ml-[2px]">
                <span class="clu-pulse-dot w-[6px] h-[6px] rounded-full bg-current"></span>live
              </span>
            </h3>
            <div class="flex gap-[2px]">
              <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">15m</button>
              <button class="px-[9px] py-1 text-[11.5px] text-t1 rounded-[5px] bg-hover transition-colors">60m</button>
              <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">24h</button>
              <button class="px-[9px] py-1 text-[11.5px] text-t2 rounded-[5px] transition-colors hover:text-t1">7d</button>
            </div>
          </div>
          <div style="padding:14px 16px 8px;">
            <div class="flex items-end justify-between mb-[6px]">
              <div>
                <div class="font-mono text-[22px] font-semibold tracking-[-0.02em]">14.2k<span class="text-[13px] text-t2 ml-1 font-medium">req/min</span></div>
                <div class="text-[11px] text-t2 mt-[2px]">Peak vor 12 min · 16.8k req/min</div>
              </div>
              <div class="flex gap-[14px] text-[11px] text-t2 font-mono">
                <span><i class="inline-block w-2 h-2 rounded-[2px] mr-[5px] align-middle" style="background:#4f8ef7;"></i>Requests</span>
                <span><i class="inline-block w-2 h-2 rounded-[2px] mr-[5px] align-middle" style="background:#7c5cff;"></i>Cache hit</span>
              </div>
            </div>
            <svg id="traffic-chart" class="w-full block" height="160" viewBox="0 0 600 160" preserveAspectRatio="none">
              <defs>
                <linearGradient id="grad-req" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stop-color="#4f8ef7" stop-opacity="0.35"/>
                  <stop offset="100%" stop-color="#4f8ef7" stop-opacity="0"/>
                </linearGradient>
                <linearGradient id="grad-cache" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stop-color="#7c5cff" stop-opacity="0.20"/>
                  <stop offset="100%" stop-color="#7c5cff" stop-opacity="0"/>
                </linearGradient>
              </defs>
              <g stroke="rgba(255,255,255,0.04)" stroke-width="1">
                <line x1="0" y1="30" x2="600" y2="30"/>
                <line x1="0" y1="65" x2="600" y2="65"/>
                <line x1="0" y1="100" x2="600" y2="100"/>
                <line x1="0" y1="135" x2="600" y2="135"/>
              </g>
              <text class="clu-chart-axis" x="4" y="34">20k</text>
              <text class="clu-chart-axis" x="4" y="69">15k</text>
              <text class="clu-chart-axis" x="4" y="104">10k</text>
              <text class="clu-chart-axis" x="4" y="139">5k</text>
              <path id="cache-area" fill="url(#grad-cache)"/>
              <path id="cache-line" stroke="#7c5cff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
              <path id="req-area" fill="url(#grad-req)"/>
              <path id="req-line" stroke="#4f8ef7" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
              <circle id="live-dot" cx="0" cy="0" r="3.5" fill="#4f8ef7" stroke="#0a0a0f" stroke-width="2"/>
              <text class="clu-chart-axis" x="40" y="156">-60m</text>
              <text class="clu-chart-axis" x="180" y="156">-45m</text>
              <text class="clu-chart-axis" x="320" y="156">-30m</text>
              <text class="clu-chart-axis" x="460" y="156">-15m</text>
              <text class="clu-chart-axis" x="568" y="156">jetzt</text>
            </svg>
          </div>
        </section>

        {{-- Update pipeline --}}
        <section class="bg-s2 border border-white/6 rounded-[10px] overflow-hidden">
          <div class="flex items-center justify-between border-b border-white/6" style="padding:13px 16px 12px;">
            <h3 class="m-0 text-[13px] font-semibold tracking-[-0.005em] flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg>
              Update-Pipeline
            </h3>
            <span class="text-[11.5px] text-t2 font-mono">5 aktiv · 19 wartend</span>
          </div>
          <div id="pipe-body" class="flex flex-col"></div>
        </section>

        {{-- Activity feed --}}
        <section class="bg-s2 border border-white/6 rounded-[10px] overflow-hidden">
          <div class="flex items-center justify-between border-b border-white/6" style="padding:13px 16px 12px;">
            <h3 class="m-0 text-[13px] font-semibold tracking-[-0.005em] flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
              Live Activity
              <span class="inline-flex items-center gap-[5px] font-mono text-[10.5px] text-success font-medium ml-[2px]">
                <span class="clu-pulse-dot w-[6px] h-[6px] rounded-full bg-current"></span>live
              </span>
            </h3>
            <span class="text-[11.5px] text-t2 font-mono">letzte 30 min</span>
          </div>
          <div id="feed-body" class="py-[6px]"></div>
        </section>
      </div>

      <div class="text-center text-dim text-[11px] font-mono tracking-[.04em] pb-5">
        CluPilot · region: eu-central-1 · build #4f8a32c · uptime 99.984%
      </div>
    </div>
  </main>
</div>

<script>
/* ── Icon helpers ── */
const IC = {
  terminal: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l5-5-5-5M13 19h7"/></svg>',
  restart:  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg>',
  more:     '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>',
  ext:      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/></svg>',
};

/* ── pill helper ── */
function pill(cls, label) {
  const map = {
    success: 'color:#3ecf8e;background:rgba(62,207,142,0.12);border-color:rgba(62,207,142,0.22);',
    warning: 'color:#f5a623;background:rgba(245,166,35,0.12);border-color:rgba(245,166,35,0.22);',
    danger:  'color:#f05252;background:rgba(240,82,82,0.12);border-color:rgba(240,82,82,0.22);',
    accent:  'color:#4f8ef7;background:rgba(79,142,247,0.12);border-color:rgba(79,142,247,0.22);',
    muted:   'color:#8888a0;background:#1a1a24;border-color:rgba(255,255,255,0.06);',
    default: 'color:#f0f0f5;background:#1a1a24;border-color:rgba(255,255,255,0.06);',
  };
  return `<span style="display:inline-flex;align-items:center;gap:5px;padding:2px 7px;font-size:10.5px;font-weight:500;border-radius:4px;font-family:var(--font-mono);border:1px solid;line-height:1.4;${map[cls]||map.default}">${label}</span>`;
}

/* ── res-bar helper ── */
function resBar(label, pct) {
  const color = pct < 60 ? '#3ecf8e' : pct < 80 ? '#f5a623' : '#f05252';
  return `<div style="display:flex;flex-direction:column;gap:3px;min-width:90px;">
    <div style="display:flex;justify-content:space-between;font-size:10.5px;color:#8888a0;font-family:var(--font-mono);">
      <span>${label}</span><span style="color:#f0f0f5;">${pct}%</span>
    </div>
    <div style="height:4px;background:#1d1d28;border-radius:2px;overflow:hidden;">
      <div style="height:100%;width:${pct}%;background:${color};border-radius:2px;transition:width .3s;"></div>
    </div>
  </div>`;
}

/* ── SERVERS ── */
const servers = [
  {name:'eu-prod-01',         ip:'185.243.117.42', sites:23, cpu:42, ram:58, disk:71, loc:'Frankfurt 🇩🇪', flag:'FRA', uptime:'127d 14h', ok:true,  host:'Hetzner · CX42'},
  {name:'eu-prod-02',         ip:'185.243.117.43', sites:19, cpu:67, ram:74, disk:55, loc:'Frankfurt 🇩🇪', flag:'FRA', uptime:'127d 14h', ok:true,  host:'Hetzner · CX42'},
  {name:'eu-edge-amsterdam',  ip:'78.46.201.18',   sites:14, cpu:31, ram:44, disk:38, loc:'Amsterdam 🇳🇱', flag:'AMS', uptime:'89d 02h',  ok:true,  host:'Hetzner · CX32'},
  {name:'us-east-prod-01',    ip:'5.161.42.198',   sites:21, cpu:78, ram:81, disk:62, loc:'Ashburn 🇺🇸',   flag:'IAD', uptime:'214d 06h', ok:false, host:'Hetzner · CCX23'},
  {name:'eu-staging',         ip:'168.119.84.221', sites:6,  cpu:18, ram:29, disk:22, loc:'Nürnberg 🇩🇪', flag:'NBG', uptime:'43d 11h',  ok:true,  host:'Hetzner · CX22'},
  {name:'apac-sydney-01',     ip:'209.97.165.88',  sites:4,  cpu:54, ram:51, disk:84, loc:'Sydney 🇦🇺',    flag:'SYD', uptime:'62d 19h',  ok:false, host:'DigitalOcean'},
];
const serverBody = document.getElementById('server-body');
servers.forEach(s => {
  const stateIco = s.ok
    ? '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>'
    : '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg>';
  const iconStyle = s.ok
    ? 'color:#3ecf8e;background:rgba(62,207,142,0.06);border-color:rgba(62,207,142,0.18);'
    : 'color:#f5a623;background:rgba(245,166,35,0.06);border-color:rgba(245,166,35,0.18);';
  const tr = document.createElement('tr');
  tr.style.cssText = 'transition:background .12s;';
  tr.onmouseenter = () => tr.style.background = '#1a1a24';
  tr.onmouseleave = () => tr.style.background = '';
  tr.innerHTML = `
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">
      <div style="display:flex;align-items:center;gap:10px;">
        <div style="width:30px;height:30px;border-radius:7px;border:1px solid;display:grid;place-items:center;flex:none;${iconStyle}">${stateIco}</div>
        <div>
          <div style="font-weight:500;color:#f0f0f5;font-size:12.5px;">${s.name}</div>
          <div style="font-family:var(--font-mono);font-size:10.5px;color:#8888a0;">${s.ip} · ${s.host}</div>
        </div>
      </div>
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill('default', s.sites + ' sites')}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">
      <div style="display:grid;grid-template-columns:repeat(3,minmax(80px,1fr));gap:10px;min-width:300px;">
        ${resBar('CPU', s.cpu)}${resBar('RAM', s.ram)}${resBar('Disk', s.disk)}
      </div>
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">
      <span style="color:#f0f0f5;">${s.loc.replace(/(.*) (.*)/, '$1')}</span>
      ${pill('muted', s.flag)}
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:right;font-family:var(--font-mono);">
      <span style="color:#f0f0f5;">${s.uptime}</span>
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:right;">
      <div class="clu-row-actions">
        ${['SSH-Terminal','Neustart','Öffnen','Mehr'].map((t,i)=>`<button title="${t}" style="width:26px;height:26px;border-radius:5px;color:#8888a0;display:grid;place-items:center;transition:all .15s;cursor:pointer;" onmouseenter="this.style.color='#f0f0f5';this.style.background='#22222e'" onmouseleave="this.style.color='#8888a0';this.style.background=''">${[IC.terminal,IC.restart,IC.ext,IC.more][i]}</button>`).join('')}
      </div>
    </td>`;
  serverBody.appendChild(tr);
});

/* ── SITES ── */
const palette = ['#4f8ef7','#3ecf8e','#f5a623','#7c5cff','#f05252','#22c1d6','#e879f9','#facc15'];
const sites = [
  {url:'kunde-mueller.de',         srv:'eu-prod-01',          wp:'6.5.2', wpOk:true,  php:'8.2', vis:'12.4k', upd:0,  bk:'ok',   grade:'A'},
  {url:'shop.bergmann-coffee.com', srv:'eu-prod-01',          wp:'6.4.3', wpOk:false, php:'8.1', vis:'48.7k', upd:3,  bk:'ok',   grade:'A'},
  {url:'blog.fintech-radar.io',    srv:'eu-prod-02',          wp:'6.5.2', wpOk:true,  php:'8.3', vis:'9.1k',  upd:1,  bk:'ok',   grade:'B'},
  {url:'praxis-dr-schwarz.de',     srv:'eu-prod-02',          wp:'6.2.1', wpOk:false, php:'7.4', vis:'1.2k',  upd:7,  bk:'warn', grade:'D'},
  {url:'agentur-helio.com',        srv:'eu-edge-amsterdam',   wp:'6.5.2', wpOk:true,  php:'8.2', vis:'18.2k', upd:0,  bk:'ok',   grade:'A'},
  {url:'docs.opencrate.dev',       srv:'us-east-prod-01',     wp:'6.5.1', wpOk:true,  php:'8.3', vis:'7.8k',  upd:2,  bk:'ok',   grade:'B'},
  {url:'staging.opencrate.dev',    srv:'eu-staging',          wp:'6.6-RC1',wpOk:true, php:'8.3', vis:'82',    upd:0,  bk:'ok',   grade:'B'},
  {url:'classic.tonhoff-bau.de',   srv:'us-east-prod-01',     wp:'5.9.7', wpOk:false, php:'7.4', vis:'3.4k',  upd:11, bk:'err',  grade:'F'},
];
const sitesBody = document.getElementById('sites-body');
const gradeStyle = {
  A:'color:#3ecf8e;background:rgba(62,207,142,0.15);box-shadow:0 0 0 1px rgba(62,207,142,0.25) inset;',
  B:'color:#4f8ef7;background:rgba(79,142,247,0.15);box-shadow:0 0 0 1px rgba(79,142,247,0.25) inset;',
  C:'color:#f5a623;background:rgba(245,166,35,0.15);box-shadow:0 0 0 1px rgba(245,166,35,0.25) inset;',
  D:'color:#f5a623;background:rgba(245,166,35,0.18);box-shadow:0 0 0 1px rgba(245,166,35,0.32) inset;',
  F:'color:#f05252;background:rgba(240,82,82,0.15);box-shadow:0 0 0 1px rgba(240,82,82,0.28) inset;',
};
const bkMap = {
  ok:   {cls:'success', label:'vor 2 h'},
  warn: {cls:'warning', label:'vor 18 h'},
  err:  {cls:'danger',  label:'fehlgeschl.'},
};
sites.forEach((s, i) => {
  const color   = palette[i % palette.length];
  const updCls  = s.upd === 0 ? 'success' : s.upd >= 5 ? 'danger' : 'warning';
  const updLbl  = s.upd === 0 ? 'aktuell' : s.upd + ' verfügbar';
  const bk      = bkMap[s.bk];
  const tr      = document.createElement('tr');
  tr.style.cssText = 'transition:background .12s;';
  tr.onmouseenter = () => tr.style.background = '#1a1a24';
  tr.onmouseleave = () => tr.style.background = '';
  tr.innerHTML = `
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">
      <div style="display:flex;align-items:center;gap:10px;min-width:0;">
        <div style="width:24px;height:24px;border-radius:5px;display:grid;place-items:center;font-weight:600;font-size:11px;color:#0a0a0f;flex:none;font-family:var(--font-mono);background:${color};">${s.url[0].toUpperCase()}</div>
        <div style="min-width:0;">
          <div style="font-weight:500;color:#f0f0f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;">${s.url}</div>
          <div style="font-family:var(--font-mono);font-size:10.5px;color:#8888a0;">id_${(7300+i).toString(16)} · ssl ✓</div>
        </div>
      </div>
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill('muted', s.srv)}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill(s.wpOk?'success':'warning', 'WP '+s.wp)}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill(parseFloat(s.php)<8?'warning':'muted', 'PHP '+s.php)}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:right;font-family:var(--font-mono);color:#f0f0f5;">${s.vis}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill(updCls, updLbl)}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">${pill(bk.cls, bk.label)}</td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;">
      <div style="display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;font-family:var(--font-mono);font-weight:600;font-size:12px;line-height:1;${gradeStyle[s.grade]}">${s.grade}</div>
    </td>
    <td style="padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:right;">
      <div class="clu-row-actions">
        ${['Site öffnen','WP-Admin','Mehr'].map((t,j)=>`<button title="${t}" style="width:26px;height:26px;border-radius:5px;color:#8888a0;display:grid;place-items:center;transition:all .15s;cursor:pointer;" onmouseenter="this.style.color='#f0f0f5';this.style.background='#22222e'" onmouseleave="this.style.color='#8888a0';this.style.background=''">${[IC.ext,IC.terminal,IC.more][j]}</button>`).join('')}
      </div>
    </td>`;
  sitesBody.appendChild(tr);
});

/* ── PIPELINE ── */
const pipeItems = [
  {type:'WP', cls:'wp',  title:'WordPress 6.5.2 → 6.5.3',   sub:'agentur-helio.com',         pct:78,  status:'läuft',    sCls:'accent'},
  {type:'PL', cls:'pl',  title:'WooCommerce 8.7 → 8.8.1',   sub:'shop.bergmann-coffee.com',  pct:42,  status:'läuft',    sCls:'accent'},
  {type:'PL', cls:'pl',  title:'Yoast SEO 22.4 → 22.5',     sub:'blog.fintech-radar.io',     pct:100, status:'erledigt', sCls:'success'},
  {type:'PHP',cls:'php', title:'PHP 7.4 → 8.2 Migration',   sub:'praxis-dr-schwarz.de',      pct:12,  status:'review',   sCls:'warning'},
  {type:'WP', cls:'wp',  title:'WordPress 5.9 → 6.5.2',     sub:'classic.tonhoff-bau.de',    pct:0,   status:'fehler',   sCls:'danger'},
  {type:'PL', cls:'pl',  title:'Wordfence 7.11 → 7.12.0',   sub:'+ 14 sites batch',          pct:0,   status:'wartet',   sCls:'muted'},
];
const icoClsMap = {
  wp:  'color:#21759b;border-color:rgba(33,117,155,0.3);background:rgba(33,117,155,0.08);',
  pl:  'color:#4f8ef7;border-color:rgba(79,142,247,0.25);background:rgba(79,142,247,0.12);',
  php: 'color:#7c5cff;border-color:rgba(124,92,255,0.28);background:rgba(124,92,255,0.10);',
};
const barColor = {accent:'#4f8ef7', success:'#3ecf8e', warning:'#f5a623', danger:'#f05252'};
const pipeBody = document.getElementById('pipe-body');
pipeItems.forEach(p => {
  const div = document.createElement('div');
  div.style.cssText = 'display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .12s;cursor:default;';
  div.onmouseenter = () => div.style.background = '#1a1a24';
  div.onmouseleave = () => div.style.background = '';
  div.innerHTML = `
    <div style="width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none;border:1px solid;font-size:10.5px;font-family:var(--font-mono);font-weight:600;${icoClsMap[p.cls]}">${p.type}</div>
    <div style="flex:1;min-width:0;">
      <div style="font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${p.title}</div>
      <div style="font-size:11px;color:#8888a0;font-family:var(--font-mono);">${p.sub}</div>
    </div>
    <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
      ${pill(p.sCls, (p.pct>0&&p.pct<100?p.pct+'% ':'')+p.status)}
      ${p.pct>0?`<div style="width:60px;height:4px;background:#1d1d28;border-radius:2px;overflow:hidden;"><div style="height:100%;width:${p.pct}%;background:${barColor[p.sCls]||'#4f8ef7'};border-radius:2px;"></div></div>`:''}
    </div>`;
  pipeBody.appendChild(div);
});

/* ── ACTIVITY FEED ── */
const feedItems = [
  {ic:'success', title:'Backup erstellt für', target:'agentur-helio.com',       meta:'vor 12 sek · 248 MB · eu-prod-02',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg>'},
  {ic:'danger',  title:'17 Login-Versuche blockiert auf', target:'classic.tonhoff-bau.de', meta:'vor 1 min · IP 185.220.101.18 · TOR exit',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/></svg>'},
  {ic:'accent',  title:'Plugin-Update Yoast SEO 22.5 auf 3 Sites', target:null, meta:'vor 4 min · ausgeführt von m.weber',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg>'},
  {ic:'warning', title:'CPU > 80% auf', target:'us-east-prod-01',              meta:'vor 7 min · sustained 4m 12s',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg>'},
  {ic:'success', title:'SSL-Zertifikat erneuert ·', target:'*.kunde-mueller.de', meta:'vor 14 min · gültig bis 25.08.2026',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>'},
  {ic:'accent',  title:'SSH-Session geöffnet auf', target:'eu-prod-01',         meta:'vor 19 min · user j.koch · key id_ed25519_jk',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M4 17l5-5-5-5M13 19h7"/></svg>'},
  {ic:'success', title:'Health-Check OK · 87/87 Sites', target:null,            meta:'vor 23 min · run #4421',
   icon:'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg>'},
];
const icoStyle = {
  success: 'color:#3ecf8e;background:rgba(62,207,142,0.12);border-color:rgba(62,207,142,0.20);',
  warning: 'color:#f5a623;background:rgba(245,166,35,0.12);border-color:rgba(245,166,35,0.20);',
  danger:  'color:#f05252;background:rgba(240,82,82,0.12);border-color:rgba(240,82,82,0.20);',
  accent:  'color:#4f8ef7;background:rgba(79,142,247,0.12);border-color:rgba(79,142,247,0.22);',
};
const feedBody = document.getElementById('feed-body');
feedItems.forEach(f => {
  const targetHtml = f.target
    ? ` <span style="font-family:var(--font-mono);color:#f0f0f5;background:#1d1d28;padding:1px 5px;border-radius:3px;font-size:11px;border:1px solid rgba(255,255,255,0.06);">${f.target}</span>`
    : '';
  const div = document.createElement('div');
  div.style.cssText = 'display:flex;gap:11px;padding:10px 16px;align-items:flex-start;transition:background .12s;cursor:default;';
  div.onmouseenter = () => div.style.background = '#1a1a24';
  div.onmouseleave = () => div.style.background = '';
  div.innerHTML = `
    <div style="width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none;border:1px solid;${icoStyle[f.ic]}">${f.icon}</div>
    <div style="flex:1;min-width:0;font-size:12px;">
      <div style="color:#8888a0;">${f.title}${targetHtml}</div>
      <div style="color:#8888a0;font-size:10.5px;margin-top:2px;font-family:var(--font-mono);">${f.meta}</div>
    </div>`;
  feedBody.appendChild(div);
});

/* ── TRAFFIC CHART ── */
(function(){
  const W=600,H=160,padL=30,padR=8,padT=10,padB=28,N=60;
  const req=[],cache=[];
  let v=11;
  for(let i=0;i<N;i++){
    v+=(Math.random()-.45)*1.6;
    if(i>40&&i<52) v+=Math.sin((i-40)/12*Math.PI)*3.5;
    v=Math.max(5,Math.min(19,v));
    req.push(v);
    cache.push(v*(.55+Math.random()*.15));
  }
  const xc=i=>padL+(W-padL-padR)*(i/(N-1));
  const yc=v=>{const t=v/20;return H-padB-t*(H-padT-padB);};
  function pathFor(arr){
    let d=`M ${xc(0)} ${yc(arr[0])}`;
    for(let i=1;i<arr.length;i++){
      const cx=(xc(i-1)+xc(i))/2;
      d+=` Q ${xc(i-1)} ${yc(arr[i-1])} ${cx} ${(yc(arr[i-1])+yc(arr[i]))/2}`;
    }
    return d+` T ${xc(arr.length-1)} ${yc(arr[arr.length-1])}`;
  }
  function areaFor(arr){return pathFor(arr)+` L ${xc(arr.length-1)} ${H-padB} L ${xc(0)} ${H-padB} Z`;}
  document.getElementById('req-line').setAttribute('d',pathFor(req));
  document.getElementById('req-area').setAttribute('d',areaFor(req));
  document.getElementById('cache-line').setAttribute('d',pathFor(cache));
  document.getElementById('cache-area').setAttribute('d',areaFor(cache));
  const dot=document.getElementById('live-dot');
  dot.setAttribute('cx',xc(N-1));dot.setAttribute('cy',yc(req[N-1]));
  let t0=0;
  (function tick(){t0+=.04;dot.setAttribute('r',3.5+Math.sin(t0)*.8);requestAnimationFrame(tick);})();
})();
</script>
@endsection