{{-- Responsive Topbar: Chips links (grid), IP rechts (stacked) --}}
<div class="md:flex md:items-center md:justify-between gap-3">

    {{-- Chips: auf Mobile 1–2 Spalten Grid, ab lg wieder flex/wrap --}}
    <div class="grid grid-cols-1 min-[420px]:grid-cols-2 lg:flex lg:flex-wrap gap-2">
        {{-- Domains --}}
        <div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
                px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
            <i class="ph-duotone ph-globe text-white/70"></i>
            <span class="font-medium tracking-wide">Domains</span>
            <span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
                   rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $domainsCount ?? 0 }}</span>
        </div>

        {{-- Warnungen --}}
        <div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
                px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
            <i class="ph-duotone ph-warning-octagon text-white/70"></i>
            <span class="font-medium tracking-wide">Warnungen</span>
            <span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
                   rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $warningsCount ?? 0 }}</span>
        </div>

        {{-- Updates --}}
        <div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
                px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
            <i class="ph-duotone ph-arrows-counter-clockwise text-white/70"></i>
            <span class="font-medium tracking-wide">Updates</span>
            <span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
                   rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $updatesCount ?? 0 }}</span>
        </div>
    </div>

    {{-- IPs: auf Mobile unter die Chips, ab md rechtsbündig; mono, kompakt --}}
    <div class="mt-2 md:mt-0 flex flex-col items-stretch md:items-end gap-2">
        <div class="inline-flex items-center gap-2 rounded-xl border border-sky-400/30 bg-sky-400/10
                px-3 py-1.5 text-[13px] leading-none font-mono text-white/85">
            <i class="ph-duotone ph-globe-simple text-sky-300/80"></i>
            <span class="truncate max-w-[60vw] md:max-w-none">{{ $ipv4 ?? '–' }}</span>
        </div>

        @if(!empty($ipv6) && $ipv6 !== '–')
            <div class="inline-flex items-center gap-2 rounded-xl border border-violet-400/30 bg-violet-400/10
                  px-3 py-1.5 text-[13px] leading-none font-mono text-white/85">
                <i class="ph-duotone ph-globe-hemisphere-east text-violet-300/80"></i>
                <span class="truncate max-w-[60vw] md:max-w-none">{{ $ipv6 }}</span>
            </div>
        @endif
    </div>
</div>