@extends('layouts.app')

@section('title', 'Mes équipements à louer')

@php
    $hasActiveFilters = filled(request('category'))
        || filled(request('subcategory'))
        || filled(request('status'))
        || (filled(request('sort')) && request('sort') !== 'created_at_desc');

    $activeFilterCount = collect([
        request('category'),
        request('subcategory'),
        request('status'),
        filled(request('sort')) && request('sort') !== 'created_at_desc' ? request('sort') : null,
    ])->filter()->count();

    $sortLabels = [
        'created_at_desc' => 'Recent',
        'created_at_asc' => 'Ancien',
        'name_asc' => 'Nom A-Z',
        'name_desc' => 'Nom Z-A',
    ];

    $currentSortLabel = $sortLabels[request('sort', 'created_at_desc')] ?? 'Recent';
@endphp

@section('content')
<div class="min-h-screen bg-linear-to-br from-green-50 to-emerald-100">
    <!-- Success message -->
    @if(session('success') || session('equipment_just_created'))
    <div class="container equipment-page-shell mx-auto px-4 py-4">
        <div class="bg-green-50 border-l-4 border-green-400 p-4 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-green-700">
                        {{ session('success') ?? 'Équipement créé avec succès ! Vous ne pouvez pas revenir en arrière pour éviter les doublons.' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if(session('delete_blocked_rentals') && count(session('delete_blocked_rentals')) > 0)
    <div class="container equipment-page-shell mx-auto px-4 py-2">
        <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-lg">
            <p class="text-sm font-semibold text-amber-900">Locations qui bloquent la suppression</p>
            <div class="mt-3 space-y-2">
                @foreach(session('delete_blocked_rentals') as $blockedRental)
                    <div class="bg-white border border-amber-200 rounded-lg p-3">
                        <p class="text-sm font-semibold text-gray-900">
                            {{ $blockedRental['rental_number'] ?? 'Location' }}
                        </p>
                        <p class="text-xs text-gray-700 mt-1">
                            Statut: <span class="font-semibold">{{ $blockedRental['status'] ?? ($blockedRental['status_raw'] ?? 'Inconnu') }}</span>
                            @if(!empty($blockedRental['start_date']) || !empty($blockedRental['end_date']))
                                | Période: {{ $blockedRental['start_date'] ?? 'N/A' }} - {{ $blockedRental['end_date'] ?? 'N/A' }}
                            @endif
                        </p>
                        @if(!empty($blockedRental['show_url']) && !empty($blockedRental['request_id']))
                            <a href="{{ $blockedRental['show_url'] }}" class="inline-block mt-2 text-xs text-blue-700 hover:text-blue-800 underline">
                                Voir la demande #{{ $blockedRental['request_id'] }}
                            </a>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <div class="container equipment-page-shell mx-auto px-4 pb-6 pt-3 sm:pb-8 sm:pt-4">
        <div class="mb-1.5">
            <a href="{{ route('prestataire.dashboard') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-[11px] font-semibold text-slate-700 shadow-sm transition hover:border-green-200 hover:text-green-700">
                <i class="fas fa-arrow-left text-[11px]"></i>
                Retour
            </a>
        </div>

        <section class="space-y-2.5">
            <div class="flex flex-col gap-1.5 border-b border-slate-200/80 pb-2 sm:flex-row sm:items-center sm:justify-between">
                <div class="min-w-0">
                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1.5">
                        <h1 class="text-base font-semibold tracking-tight text-slate-950 sm:text-2xl">Mes equipements</h1>
                        <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600">
                            {{ $stats['total'] ?? 0 }} total
                        </span>
                    </div>
                    <p class="mt-1 hidden text-xs text-slate-500 sm:block">Catalogue, locations et demandes au meme endroit.</p>
                </div>

                <div class="flex w-full sm:w-auto">
                    <a href="{{ route('prestataire.equipment.create') }}" class="inline-flex items-center justify-center gap-1.5 self-start rounded-lg bg-green-600 px-2.5 py-1.5 text-[11px] font-semibold text-white shadow-sm transition hover:bg-green-700 sm:rounded-2xl sm:px-4 sm:py-2.5 sm:text-sm">
                        <i class="fas fa-plus text-xs"></i>
                        <span class="sm:hidden">Ajouter</span>
                        <span class="hidden sm:inline">Ajouter un equipement</span>
                    </a>
                </div>
            </div>
            @if(($stats['total'] ?? 0) > 0)
                <div class="equipment-overview-grid mt-3">
                    <div class="equipment-stat-tile">
                        <div class="equipment-stat-head">
                            <div class="equipment-stat-icon bg-green-50 text-green-600">
                                <i class="fas fa-tools text-sm"></i>
                            </div>
                            <p class="equipment-stat-label">Equipements</p>
                        </div>
                        <p class="equipment-stat-value">{{ $stats['total'] ?? 0 }}</p>
                    </div>

                    <div class="equipment-stat-tile">
                        <div class="equipment-stat-head">
                            <div class="equipment-stat-icon bg-emerald-50 text-emerald-600">
                                <i class="fas fa-check-circle text-sm"></i>
                            </div>
                            <p class="equipment-stat-label">Actifs</p>
                        </div>
                        <p class="equipment-stat-value">{{ $stats['active'] ?? 0 }}</p>
                    </div>

                    <div class="equipment-stat-tile">
                        <div class="equipment-stat-head">
                            <div class="equipment-stat-icon bg-amber-50 text-amber-600">
                                <i class="fas fa-clock text-sm"></i>
                            </div>
                            <p class="equipment-stat-label">En location</p>
                        </div>
                        <p class="equipment-stat-value">{{ $stats['rented'] ?? 0 }}</p>
                    </div>

                    <div class="equipment-stat-tile">
                        <div class="equipment-stat-head">
                            <div class="equipment-stat-icon bg-blue-50 text-blue-600">
                                <i class="fas fa-inbox text-sm"></i>
                            </div>
                            <p class="equipment-stat-label">Demandes</p>
                        </div>
                        <p class="equipment-stat-value">{{ $stats['pending_requests'] ?? 0 }}</p>
                    </div>
                </div>
            @endif

            @if(($stats['total'] ?? 0) > 0)
                <div class="mt-3 space-y-2">
                    <div class="equipment-filter-bar">
                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2">
                                <h2 class="text-xs font-semibold text-slate-900 sm:text-sm">Filtres</h2>
                                <span class="inline-flex items-center rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-500">
                                    {{ $equipment->total() }} equipement(s)
                                </span>
                                @if($activeFilterCount > 0)
                                    <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700">
                                        {{ $activeFilterCount }} actif(s)
                                    </span>
                                @endif
                            </div>
                        </div>

                        <button type="button" id="toggleFilters" class="equipment-filter-toggle" aria-expanded="{{ $hasActiveFilters ? 'true' : 'false' }}">
                            <span id="filterButtonText">{{ $hasActiveFilters ? 'Masquer' : 'Filtres' }}</span>
                            <i class="fas {{ $hasActiveFilters ? 'fa-chevron-up' : 'fa-chevron-down' }} text-[10px]" id="filterChevron"></i>
                        </button>
                    </div>

                    <form method="GET" action="{{ route('prestataire.equipment.index') }}" class="{{ $hasActiveFilters ? '' : 'hidden' }} equipment-filter-grid" id="filtersForm">
                        <label class="equipment-filter-field">
                            <span class="equipment-filter-label">Categorie</span>
                            <select name="category" id="parentCategory" class="equipment-filter-input">
                                <option value="">Toutes</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </label>

                        <label class="equipment-filter-field">
                            <span class="equipment-filter-label">Sous-categorie</span>
                            <select name="subcategory" id="subcategory" class="equipment-filter-input">
                                <option value="">Toutes</option>
                                @if(request('category') && $subcategories)
                                    @foreach($subcategories as $subcategory)
                                        <option value="{{ $subcategory->id }}" {{ request('subcategory') == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </label>

                        <label class="equipment-filter-field">
                            <span class="equipment-filter-label">Statut</span>
                            <select name="status" class="equipment-filter-input">
                                <option value="">Tous</option>
                                <option value="available" {{ request('status') === 'available' ? 'selected' : '' }}>Disponible</option>
                                <option value="rented" {{ request('status') === 'rented' ? 'selected' : '' }}>En location</option>
                                <option value="maintenance" {{ request('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                                <option value="unavailable" {{ request('status') === 'unavailable' ? 'selected' : '' }}>Indisponible</option>
                            </select>
                        </label>

                        <label class="equipment-filter-field">
                            <span class="equipment-filter-label">Tri</span>
                            <select name="sort" class="equipment-filter-input">
                                <option value="created_at_desc" {{ request('sort') === 'created_at_desc' ? 'selected' : '' }}>Plus recent</option>
                                <option value="created_at_asc" {{ request('sort') === 'created_at_asc' ? 'selected' : '' }}>Plus ancien</option>
                                <option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>Nom A-Z</option>
                                <option value="name_desc" {{ request('sort') === 'name_desc' ? 'selected' : '' }}>Nom Z-A</option>
                            </select>
                        </label>

                        <button type="submit" class="equipment-filter-submit">
                            <i class="fas fa-filter text-xs"></i>
                            Filtrer
                        </button>

                        @if($hasActiveFilters)
                            <a href="{{ route('prestataire.equipment.index') }}" class="equipment-filter-reset">
                                <i class="fas fa-rotate-left text-xs"></i>
                                Reset
                            </a>
                        @endif
                    </form>
                </div>
            @endif

            @if($equipment->count() > 0)
                <div class="mt-3 flex flex-col gap-1.5 border-b border-slate-200/80 pb-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-xs font-semibold text-slate-900 sm:text-sm">{{ $equipment->total() }} equipement(s)</p>
                        <p class="hidden text-xs text-slate-500 sm:block">Tri actuel: {{ $currentSortLabel }}. Page {{ $equipment->currentPage() }} sur {{ max($equipment->lastPage(), 1) }}.</p>
                    </div>
                    <div class="flex flex-wrap gap-1.5">
                        <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-[10px] font-semibold text-green-700">
                            {{ $equipment->count() }} affiche(s)
                        </span>
                        <span class="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700">
                            {{ $stats['pending_requests'] ?? 0 }} demande(s)
                        </span>
                    </div>
                </div>

                <div class="equipment-card-grid mt-2.5 grid grid-cols-2 gap-1.5 lg:grid-cols-3 xl:grid-cols-4">
                    @foreach($equipment as $item)
                        @php
                            $statusColors = [
                                'available' => 'equipment-badge-success',
                                'rented' => 'equipment-badge-warning',
                                'maintenance' => 'equipment-badge-danger',
                                'unavailable' => 'equipment-badge-muted',
                            ];
                            $cardPhoto = (is_array($item->photos) && !empty($item->photos[0]))
                                ? $item->photos[0]
                                : $item->main_photo;
                        @endphp

                        <article class="equipment-card">
                            <div class="equipment-card-media">
                                @if($cardPhoto)
                                    <x-media-image :path="$cardPhoto" :alt="$item->name" class="equipment-card-image" />
                                @else
                                    <div class="equipment-card-placeholder">
                                        <i class="fas fa-tools text-lg"></i>
                                    </div>
                                @endif

                                <div class="equipment-card-badges">
                                    <span class="equipment-badge {{ $statusColors[$item->availability_status] ?? 'equipment-badge-muted' }}">
                                        <i class="fas fa-circle text-[9px]"></i>
                                        {{ $item->formatted_availability_status }}
                                    </span>
                                </div>
                            </div>

                            <div class="equipment-card-body">
                                <h3 class="equipment-card-title line-clamp-2 text-sm font-semibold text-slate-900">{{ $item->name }}</h3>
                                <p class="equipment-card-description line-clamp-2 text-xs text-slate-600">{{ $item->description }}</p>

                                <div class="equipment-meta-row">
                                    <span class="equipment-price">{{ number_format($item->daily_rate, 0, ',', ' ') }} €/j</span>
                                    <span class="equipment-chip bg-amber-50 text-amber-700">
                                        <i class="fas fa-star text-[10px]"></i>
                                        {{ number_format($item->average_rating ?? 0, 1) }}
                                    </span>
                                </div>

                                <div class="flex flex-wrap gap-2">
                                    @if($item->category)
                                        <span class="equipment-chip bg-green-50 text-green-700">{{ $item->category->name }}</span>
                                    @endif
                                    @if($item->subcategory)
                                        <span class="equipment-chip bg-blue-50 text-blue-700">{{ $item->subcategory->name }}</span>
                                    @endif
                                    @if(!$item->category && !$item->subcategory)
                                        <span class="equipment-chip bg-slate-100 text-slate-500">Non categorise</span>
                                    @endif
                                </div>

                                <div class="equipment-card-actions">
                                    <a href="{{ route('equipment.show', $item) }}" class="equipment-action-btn equipment-action-primary">
                                        <i class="fas fa-eye text-[11px]"></i>
                                        Voir
                                    </a>
                                    <a href="{{ route('prestataire.equipment.edit', $item) }}" class="equipment-action-btn equipment-action-secondary">
                                        <i class="fas fa-edit text-[11px]"></i>
                                        Modif.
                                    </a>
                                    <button type="button" class="delete-equipment-btn equipment-action-btn equipment-action-danger" title="Supprimer" data-equipment-id="{{ $item->id }}" data-equipment-name="{{ $item->name }}">
                                        <i class="fas fa-trash text-[11px]"></i>
                                        Suppr.
                                    </button>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="mt-5">
                    {{ $equipment->appends(request()->query())->links() }}
                </div>
            @else
                <div class="mt-4 flex justify-center">
                    <div class="equipment-empty-state">
                        <div class="equipment-empty-icon">
                            <i class="fas fa-tools text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-slate-900">Aucun equipement</h3>
                            <p class="mt-1 text-xs text-slate-500">Ajoute ton premier equipement pour commencer a recevoir des demandes.</p>
                        </div>
                        <div class="equipment-empty-actions">
                            <a href="{{ route('prestataire.equipment.create') }}" class="equipment-filter-submit">
                                <i class="fas fa-plus text-xs"></i>
                                Ajouter
                            </a>
                            <a href="{{ route('prestataire.help.index') }}" class="equipment-filter-reset">
                                <i class="fas fa-circle-info text-xs"></i>
                                Aide
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </section>
    </div>
    
    <div id="deleteConfirmationModal" class="fixed inset-0 z-50 hidden bg-slate-950/55 opacity-0 transition-opacity duration-200 backdrop-blur-sm">
        <div class="delete-modal-shell flex min-h-full w-full items-end justify-center p-3 sm:items-center">
            <div class="equipment-modal-panel w-full max-w-md translate-y-4 rounded-t-[28px] bg-white p-5 opacity-0 shadow-2xl sm:scale-95 sm:rounded-[28px]">
                <div class="text-center">
                    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-rose-50 text-rose-600">
                        <i class="fas fa-triangle-exclamation text-lg"></i>
                    </div>
                    <h3 class="mt-3 text-lg font-semibold text-slate-900">Supprimer cet equipement</h3>
                    <p class="mt-2 text-sm text-slate-600">
                        Cette action retire definitivement l'equipement de votre catalogue.
                    </p>
                    <p id="equipmentName" class="mt-2 text-base font-semibold text-green-700"></p>
                    <div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <button id="cancelDeleteBtn" type="button" class="rounded-2xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                            Annuler
                        </button>
                        <button id="confirmDeleteBtn" type="button" class="rounded-2xl bg-rose-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-rose-700">
                            Supprimer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggleButton = document.getElementById('toggleFilters');
        const filtersForm = document.getElementById('filtersForm');
        const buttonText = document.getElementById('filterButtonText');
        const chevron = document.getElementById('filterChevron');
        const parentCategorySelect = document.getElementById('parentCategory');
        const subcategorySelect = document.getElementById('subcategory');
        const deleteModal = document.getElementById('deleteConfirmationModal');
        const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        const equipmentNameElement = document.getElementById('equipmentName');
        let currentEquipmentId = null;
        const destroyUrlTemplate = @json(route('prestataire.equipment.destroy', ['equipment' => '__EQUIPMENT_ID__']));
        let filtersVisible = @json($hasActiveFilters);

        function syncFiltersUi() {
            if (!filtersForm || !toggleButton || !buttonText || !chevron) {
                return;
            }

            filtersForm.classList.toggle('hidden', !filtersVisible);
            toggleButton.setAttribute('aria-expanded', filtersVisible ? 'true' : 'false');
            buttonText.textContent = filtersVisible ? 'Masquer' : 'Filtres';
            chevron.classList.toggle('fa-chevron-down', !filtersVisible);
            chevron.classList.toggle('fa-chevron-up', filtersVisible);
        }

        function openModal() {
            if (!deleteModal) {
                return;
            }

            deleteModal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');

            requestAnimationFrame(() => {
                deleteModal.classList.remove('opacity-0');
                const modalContent = deleteModal.querySelector('.equipment-modal-panel');

                if (!modalContent) {
                    return;
                }

                modalContent.classList.remove('translate-y-4', 'sm:scale-95', 'opacity-0');
                modalContent.classList.add('translate-y-0', 'sm:scale-100');
            });
        }

        function closeModal() {
            if (!deleteModal) {
                return;
            }

            const modalContent = deleteModal.querySelector('.equipment-modal-panel');

            if (modalContent) {
                modalContent.classList.add('translate-y-4', 'sm:scale-95', 'opacity-0');
                modalContent.classList.remove('translate-y-0', 'sm:scale-100');
            }

            deleteModal.classList.add('opacity-0');

            setTimeout(() => {
                deleteModal.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
                currentEquipmentId = null;
            }, 200);
        }

        syncFiltersUi();

        if (toggleButton) {
            toggleButton.addEventListener('click', function() {
                filtersVisible = !filtersVisible;
                syncFiltersUi();
            });
        }

        if (parentCategorySelect && subcategorySelect) {
            parentCategorySelect.addEventListener('change', function() {
                subcategorySelect.innerHTML = '<option value="">Toutes</option>';

                if (this.value) {
                    this.form.submit();
                }
            });
        }

        document.querySelectorAll('.delete-equipment-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                currentEquipmentId = this.getAttribute('data-equipment-id');
                equipmentNameElement.textContent = this.getAttribute('data-equipment-name');
                openModal();
            });
        });

        if (cancelDeleteBtn) {
            cancelDeleteBtn.addEventListener('click', closeModal);
        }

        if (confirmDeleteBtn) {
            confirmDeleteBtn.addEventListener('click', function() {
                if (!currentEquipmentId) {
                    return;
                }

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = destroyUrlTemplate.replace('__EQUIPMENT_ID__', currentEquipmentId);

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';

                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';

                form.appendChild(csrfToken);
                form.appendChild(methodField);
                document.body.appendChild(form);
                form.submit();
            });
        }

        if (deleteModal) {
            deleteModal.addEventListener('click', function(e) {
                if (e.target === deleteModal) {
                    closeModal();
                }
            });
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && deleteModal && !deleteModal.classList.contains('hidden')) {
                closeModal();
            }
        });
    });
</script>
@endpush

@endsection

@push('styles')
<style>
    .line-clamp-2,
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
    }

    .line-clamp-3 {
        -webkit-line-clamp: 3;
    }

    .equipment-overview-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .equipment-stat-tile {
        display: flex;
        min-height: 3.9rem;
        min-width: 0;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.22rem;
        border-radius: 0.66rem;
        border: 1px solid rgba(187, 247, 208, 0.95);
        background: rgba(255, 255, 255, 0.95);
        padding: 0.34rem 0.38rem;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.026);
    }

    .equipment-stat-head {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 0.3rem;
        min-width: 0;
    }

    .equipment-stat-icon {
        display: inline-flex;
        height: 1.1rem;
        width: 1.1rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
    }

    .equipment-stat-label {
        font-size: 0.42rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
    }

    .equipment-stat-value {
        margin-top: 0.04rem;
        font-size: 0.58rem;
        font-weight: 700;
        color: #0f172a;
    }

    .equipment-filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.32rem;
        border-bottom: 1px solid rgba(226, 232, 240, 0.92);
        padding-bottom: 0.34rem;
    }

    .equipment-filter-grid {
        display: grid;
        gap: 0.28rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-filter-field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.18rem;
        border-radius: 0.66rem;
        background: #fff;
        padding: 0.38rem 0.42rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .equipment-filter-label {
        font-size: 0.44rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
    }

    .equipment-filter-input {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0;
        font-size: 0.64rem;
        font-weight: 500;
        color: #0f172a;
        outline: none;
        box-shadow: none;
    }

    .equipment-filter-toggle,
    .equipment-filter-submit,
    .equipment-filter-reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.34rem;
        border-radius: 0.62rem;
        padding: 0.38rem 0.46rem;
        font-size: 0.52rem;
        font-weight: 700;
        line-height: 1;
        transition: all 0.2s ease;
    }

    .equipment-filter-toggle {
        width: auto;
        max-width: max-content;
        align-self: flex-start;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: #fff;
        color: #334155;
    }

    .equipment-filter-toggle:hover {
        border-color: #86efac;
        color: #15803d;
    }

    .equipment-filter-submit {
        background: #16a34a;
        color: #fff;
    }

    .equipment-filter-submit:hover {
        background: #15803d;
    }

    .equipment-filter-reset {
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: #fff;
        color: #475569;
    }

    .equipment-filter-reset:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    .equipment-card {
        display: flex;
        flex-direction: column;
        gap: 0.26rem;
        border-radius: 0.66rem;
        border: 1px solid rgba(187, 247, 208, 0.95);
        background: rgba(255, 255, 255, 0.96);
        padding: 0.28rem;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.028);
    }

    .equipment-card-media {
        position: relative;
        overflow: hidden;
        min-width: 0;
        height: 10.5rem;
        border-radius: 0.5rem;
        background: #f8fafc;
    }

    .equipment-card-image,
    .equipment-card-placeholder {
        display: block;
        height: 100% !important;
        width: 100% !important;
        min-height: 100%;
        max-width: none;
        border-radius: inherit;
        object-fit: cover;
    }

    .equipment-card-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
        color: #22c55e;
    }

    .equipment-card-badges {
        position: absolute;
        left: 0.32rem;
        right: 0.32rem;
        top: 0.32rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.22rem;
    }

    .equipment-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
        border-radius: 9999px;
        padding: 0.14rem 0.26rem;
        font-size: 0.42rem;
        font-weight: 700;
        line-height: 1;
        backdrop-filter: blur(10px);
    }

    .equipment-badge-success {
        background: rgba(220, 252, 231, 0.94);
        color: #166534;
    }

    .equipment-badge-warning {
        background: rgba(254, 243, 199, 0.94);
        color: #b45309;
    }

    .equipment-badge-danger {
        background: rgba(254, 226, 226, 0.94);
        color: #b91c1c;
    }

    .equipment-badge-muted {
        background: rgba(241, 245, 249, 0.94);
        color: #475569;
    }

    .equipment-card-body {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.22rem;
    }

    .equipment-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.18rem;
    }

    .equipment-price {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.56rem;
        font-weight: 700;
        color: #0f172a;
    }

    .equipment-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
        border-radius: 9999px;
        padding: 0.14rem 0.24rem;
        font-size: 0.42rem;
        font-weight: 600;
        line-height: 1;
    }

    .equipment-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.18rem;
        border-top: 1px solid rgba(226, 232, 240, 0.92);
        padding-top: 0.28rem;
    }

    .equipment-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.16rem;
        border-radius: 0.56rem;
        padding: 0.32rem 0.18rem;
        font-size: 0.46rem;
        font-weight: 700;
        line-height: 1;
        transition: all 0.2s ease;
    }

    .equipment-action-primary {
        background: #16a34a;
        color: #fff;
    }

    .equipment-action-primary:hover {
        background: #15803d;
    }

    .equipment-action-secondary {
        background: #e2e8f0;
        color: #334155;
    }

    .equipment-action-secondary:hover {
        background: #cbd5e1;
    }

    .equipment-action-danger {
        background: #fef2f2;
        color: #be123c;
    }

    .equipment-action-danger:hover {
        background: #ffe4e6;
    }

    .equipment-empty-state {
        display: flex;
        width: min(100%, 20rem);
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        border-radius: 0.7rem;
        border: 1px solid rgba(187, 247, 208, 0.95);
        background: rgba(255, 255, 255, 0.96);
        padding: 0.52rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.028);
    }

    .equipment-empty-icon {
        display: inline-flex;
        height: 1.9rem;
        width: 1.9rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
        color: #16a34a;
    }

    .equipment-empty-actions {
        display: grid;
        width: 100%;
        gap: 0.26rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-modal-panel {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    #deleteConfirmationModal .delete-modal-shell {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    @media (max-width: 430px) {
        .equipment-page-shell {
            width: min(100%, 390px);
            max-width: 390px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0.625rem;
            padding-right: 0.625rem;
        }

        .equipment-card-grid {
            gap: 0.3rem;
        }
    }

    @media (max-width: 639px) {
        .equipment-card-media {
            height: 10.5rem;
        }

        .equipment-stat-tile {
            min-height: 3.4rem;
            gap: 0.18rem;
            padding: 0.3rem 0.32rem;
            border-radius: 0.58rem;
        }

        .equipment-stat-icon {
            height: 0.95rem;
            width: 0.95rem;
        }

        .equipment-stat-label {
            font-size: 0.38rem;
        }

        .equipment-stat-value {
            font-size: 0.54rem;
        }

        .equipment-filter-field {
            padding: 0.32rem 0.36rem;
            border-radius: 0.58rem;
        }

        .equipment-card {
            gap: 0.22rem;
            padding: 0.24rem;
            border-radius: 0.58rem;
        }

        .equipment-card-image,
        .equipment-card-placeholder {
            border-radius: 0.46rem;
        }

        .equipment-card-body {
            gap: 0.18rem;
        }

        .equipment-price {
            font-size: 0.5rem;
        }

        .equipment-chip {
            padding: 0.1rem 0.2rem;
            font-size: 0.38rem;
        }

        .equipment-card-actions {
            gap: 0.14rem;
            padding-top: 0.22rem;
        }

        .equipment-action-btn {
            padding: 0.24rem 0.12rem;
            font-size: 0.42rem;
            border-radius: 0.5rem;
        }

        .equipment-filter-toggle,
        .equipment-filter-submit,
        .equipment-filter-reset {
            padding: 0.3rem 0.34rem;
            font-size: 0.46rem;
            border-radius: 0.52rem;
        }

        .equipment-empty-state {
            gap: 0.32rem;
            padding: 0.42rem;
            border-radius: 0.6rem;
        }

        .equipment-empty-icon {
            height: 1.65rem;
            width: 1.65rem;
        }

        .equipment-card-title {
            -webkit-line-clamp: 1;
            font-size: 0.6rem;
            line-height: 1.15;
        }

        .equipment-card-description {
            display: none;
        }
    }

    @media (min-width: 640px) {
        #deleteConfirmationModal .delete-modal-shell {
            padding-bottom: 0.75rem;
        }
    }

    @media (min-width: 768px) {
        .equipment-overview-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .equipment-filter-grid {
            grid-template-columns: 1.15fr 1.15fr 0.9fr 0.9fr auto auto;
        }
    }
</style>
@endpush