<x-filament-panels::page>
    <style>
        /* Luftigare kort: mellanrum runt statusbadge, bild, rubrik och detaljer */
        .reserve-card {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            height: 100%;
        }

        .reserve-card-meta {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            height: 100%;
        }

        .reserve-card-image {
            border-radius: 0.5rem;
        }

        .reserve-card > * + *,
        .reserve-card-meta > * + * {
            margin-top: 0 !important;
        }

        .fi-topbar-start {
            display: flex;
        }

        @media (width < 64rem) {
            .fi-topbar-start .fi-logo {
                margin-inline-start: 0;
            }
        }
    </style>

    <p class="text-sm text-gray-500 dark:text-gray-400 -mt-4">
        {{ __('Welcome! Here you can reserve games that you would like to borrow.') }}
    </p>

    {{ $this->table }}
</x-filament-panels::page>
