{{--
  Menu background previews + sidebar backgrounds.
  Uses path-only URLs (same host as the page) — asset() full URLs use APP_URL and break on 127.0.0.1 vs localhost.
  Previews are on <label>, not <input>, so Tailwind preflight cannot strip background-image from radios.
--}}
@php
    use App\Support\Admin\AdminMenuBackgroundPayload;

    $menuBgImages = AdminMenuBackgroundPayload::switcherUrls();
    $menuBgTransparent = parse_url(asset('admin/assets/img/menu-bg-images/transparent.png'), PHP_URL_PATH)
        ?? '/admin/assets/img/menu-bg-images/transparent.png';
@endphp
<style id="admin-theme-menu-backgrounds">
@foreach ($menuBgImages as $index => $path)
    #hs-overlay-switcher .menu-image label.bgimage-input.bg-img{{ $index }} {
        display: inline-block;
        width: 3rem !important;
        height: 5rem !important;
        min-width: 3rem;
        min-height: 5rem;
        cursor: pointer;
        border-radius: 0.5rem;
        border: 1px solid rgb(226 232 240);
        background-image: url('{{ $path }}') !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    #hs-overlay-switcher .menu-image label.bgimage-input.bg-img{{ $index }}:has(input:checked) {
        background-image: url('{{ $path }}') !important;
        background-color: transparent !important;
        border-width: 4px;
        border-color: rgb(226 232 240);
        padding: 0.5rem;
        box-sizing: border-box;
    }

    :is(.dark) #hs-overlay-switcher .menu-image label.bgimage-input.bg-img{{ $index }}:has(input:checked) {
        border-color: rgb(255 255 255 / 0.1);
    }

    html[bg-img="bgimg{{ $index }}"] .app-sidebar {
        background-image: url('{{ $path }}') !important;
    }
@endforeach

    #hs-overlay-switcher .theme-colors .switch-select .color-input.color-transparent {
        background-image: url('{{ $menuBgTransparent }}') !important;
    }

    #hs-overlay-switcher .menu-image input[type='radio'].sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
</style>