@extends('layouts.app')

@section('title', 'Mes Services')

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

    $activeFilterCount = collect([
        request('parent_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',
        'title_asc' => 'Titre A-Z',
        'title_desc' => 'Titre Z-A',
    ];

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

@section('content')
<div class="min-h-screen bg-linear-to-br from-slate-50 via-blue-50 to-indigo-100">
    <div class="container mx-auto px-4 pb-8 pt-4 sm:pb-10">
        @if(session('success') || session('service_just_created') || session('info'))
            <div class="mb-3 rounded-2xl border border-emerald-200 bg-white/95 px-4 py-3 shadow-sm">
                <div class="flex items-start gap-3">
                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                        <i class="fas fa-check text-sm"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-slate-900">Mise a jour prise en compte</p>
                        <p class="mt-0.5 text-sm text-slate-600">
                            {{ session('success') ?? session('info') ?? 'Service cree avec succes. Vous ne pouvez pas revenir en arriere pour eviter les doublons.' }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <div class="mb-2">
            <a href="{{ route('prestataire.dashboard') }}" class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:border-blue-200 hover:text-blue-700">
                <i class="fas fa-arrow-left text-[11px]"></i>
                Retour
            </a>
        </div>

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

                <div class="flex w-full sm:w-auto">
                    <a href="{{ route('prestataire.services.create') }}" class="inline-flex items-center justify-center gap-2 self-start rounded-xl bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-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 service</span>
                    </a>
                </div>
            </div>
            @if($stats['total'] > 0)
                <div class="services-overview-grid mt-3">
                    <div class="service-stat-tile">
                        <div class="service-stat-head">
                            <div class="service-stat-icon bg-blue-50 text-blue-600">
                                <i class="fas fa-concierge-bell text-sm"></i>
                            </div>
                            <p class="service-stat-label">Services</p>
                        </div>
                        <p class="service-stat-value">{{ $stats['total'] }}</p>
                    </div>

                    <div class="service-stat-tile">
                        <div class="service-stat-head">
                            <div class="service-stat-icon bg-emerald-50 text-emerald-600">
                                <i class="fas fa-calendar-check text-sm"></i>
                            </div>
                            <p class="service-stat-label">Reservables</p>
                        </div>
                        <p class="service-stat-value">{{ $stats['reservable'] }}</p>
                    </div>

                    <div class="service-stat-tile">
                        <div class="service-stat-head">
                            <div class="service-stat-icon bg-amber-50 text-amber-600">
                                <i class="fas fa-book-open text-sm"></i>
                            </div>
                            <p class="service-stat-label">Reservations</p>
                        </div>
                        <p class="service-stat-value">{{ $stats['total_bookings'] }}</p>
                    </div>

                    <div class="service-stat-tile">
                        <div class="service-stat-head">
                            <div class="service-stat-icon bg-violet-50 text-violet-600">
                                <i class="fas fa-check-double text-sm"></i>
                            </div>
                            <p class="service-stat-label">Confirmees</p>
                        </div>
                        <p class="service-stat-value">{{ $stats['confirmed_bookings'] }}</p>
                    </div>
                </div>

                <div class="mt-3 space-y-2">
                    <div class="services-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">
                                    {{ $services->total() }} service(s)
                                </span>
                                @if($activeFilterCount > 0)
                                    <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700">
                                        {{ $activeFilterCount }} actif(s)
                                    </span>
                                @endif
                            </div>
                        </div>

                        <button type="button" id="toggleFilters" class="service-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.services.index') }}" class="{{ $hasActiveFilters ? '' : 'hidden' }} services-filter-grid" id="filtersForm">
                        <label class="service-filter-field">
                            <span class="service-filter-label">Categorie</span>
                            <select name="parent_category" id="parentCategory" class="service-filter-input">
                                <option value="">Toutes</option>
                                @foreach($parentCategories as $category)
                                    <option value="{{ $category->id }}" {{ request('parent_category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </label>

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

                        <label class="service-filter-field">
                            <span class="service-filter-label">Statut</span>
                            <select name="status" class="service-filter-input">
                                <option value="">Tous</option>
                                <option value="reservable" {{ request('status') === 'reservable' ? 'selected' : '' }}>Reservable</option>
                                <option value="non-reservable" {{ request('status') === 'non-reservable' ? 'selected' : '' }}>Non reservable</option>
                            </select>
                        </label>

                        <label class="service-filter-field">
                            <span class="service-filter-label">Tri</span>
                            <select name="sort" class="service-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="title_asc" {{ request('sort') === 'title_asc' ? 'selected' : '' }}>Titre A-Z</option>
                                <option value="title_desc" {{ request('sort') === 'title_desc' ? 'selected' : '' }}>Titre Z-A</option>
                            </select>
                        </label>

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

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

            @if($services->count() > 0)
                <div class="mt-4 flex flex-col gap-2 border-b border-slate-200/80 pb-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ $services->total() }} service(s) au catalogue</p>
                        <p class="text-xs text-slate-500">Tri actuel: {{ $currentSortLabel }}. Page {{ $services->currentPage() }} sur {{ max($services->lastPage(), 1) }}.</p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
                            {{ $services->count() }} affiche(s)
                        </span>
                        <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                            {{ $stats['reservable'] }} reservable(s)
                        </span>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-2.5 lg:grid-cols-3 xl:grid-cols-4">
                    @foreach($services as $service)
                        @php
                            $displayCategories = $service->categories->take(2);
                            $extraCategories = max($service->categories->count() - $displayCategories->count(), 0);
                            $servicePrice = $service->price ? number_format($service->price, 2, ',', ' ') . ' €' : 'Prix sur devis';
                        @endphp

                        <article class="service-card">
                            <div class="service-card-media">
                                @if($service->images->isNotEmpty())
                                    <x-media-image :path="$service->images->first()->image_path" :alt="$service->title" class="service-card-image" />
                                @else
                                    <div class="service-card-placeholder">
                                        <i class="fas fa-image text-lg"></i>
                                    </div>
                                @endif

                                <div class="service-card-badges">
                                    <span class="service-badge {{ $service->reservable ? 'service-badge-success' : 'service-badge-muted' }}">
                                        <i class="fas {{ $service->reservable ? 'fa-calendar-check' : 'fa-circle' }} text-[10px]"></i>
                                        {{ $service->reservable ? 'Reservable' : 'Non reservable' }}
                                    </span>
                                </div>
                            </div>

                            <div class="service-card-body">
                                <div class="flex min-w-0 flex-1 flex-col gap-2">
                                    <h3 class="line-clamp-2 text-sm font-semibold text-slate-900">{{ $service->title }}</h3>
                                    <p class="line-clamp-2 text-xs text-slate-600">{{ $service->description }}</p>
                                    <div class="service-meta-row">
                                        <span class="service-price">{{ $servicePrice }}</span>
                                        <span class="service-chip bg-blue-50 text-blue-700">
                                            <i class="fas fa-book-open text-[10px]"></i>
                                            {{ $service->bookings->count() }}
                                        </span>
                                    </div>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($displayCategories as $category)
                                            <span class="service-chip bg-slate-100 text-slate-700">{{ $category->name }}</span>
                                        @endforeach
                                        @if($extraCategories > 0)
                                            <span class="service-chip bg-slate-100 text-slate-500">+{{ $extraCategories }}</span>
                                        @endif
                                        @if($service->categories->isEmpty())
                                            <span class="service-chip bg-slate-100 text-slate-500">Non categorise</span>
                                        @endif
                                    </div>

                                </div>

                                <div class="service-card-actions">
                                    <a href="{{ route('services.show', $service) }}" class="service-action-btn service-action-primary">
                                        <i class="fas fa-eye text-[11px]"></i>
                                        Voir
                                    </a>
                                    <a href="{{ route('prestataire.services.edit', $service) }}" class="service-action-btn service-action-secondary">
                                        <i class="fas fa-edit text-[11px]"></i>
                                        Modifier
                                    </a>
                                    @if($service->reservable)
                                        <a href="{{ route('prestataire.availabilities.index', $service) }}" class="service-icon-btn bg-emerald-50 text-emerald-700" title="Gerer les disponibilites" aria-label="Gerer les disponibilites">
                                            <i class="fas fa-calendar-alt text-xs"></i>
                                            <span>Dispo</span>
                                        </a>
                                    @endif
                                    <button type="button" class="service-icon-btn bg-rose-50 text-rose-700 delete-service-btn" title="Supprimer" aria-label="Supprimer" data-service-id="{{ $service->id }}" data-service-title="{{ $service->title }}">
                                        <i class="fas fa-trash text-xs"></i>
                                        <span>Suppr.</span>
                                    </button>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="mt-5">
                    {{ $services->appends(request()->query())->links() }}
                </div>
            @else
                <div class="mt-4 flex justify-center">
                    <div class="services-empty-state">
                        <div class="services-empty-icon">
                            <i class="fas fa-concierge-bell text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-slate-900">Aucun service</h3>
                            <p class="mt-1 text-xs text-slate-500">Ajoute ton premier service pour le rendre visible et reservable.</p>
                        </div>
                        <div class="services-empty-actions">
                            <a href="{{ route('prestataire.services.create') }}" class="service-filter-submit">
                                <i class="fas fa-plus text-xs"></i>
                                Ajouter
                            </a>
                            <a href="{{ route('prestataire.help.index') }}" class="service-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="flex min-h-full items-end justify-center p-3 sm:items-center">
            <div class="service-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 ce service</h3>
                    <p class="mt-2 text-sm text-slate-600">
                        Cette action retire definitivement le service de votre catalogue.
                    </p>
                    <p id="serviceTitle" class="mt-2 text-base font-semibold text-blue-800"></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>
@endsection

@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 serviceTitleElement = document.getElementById('serviceTitle');
        let currentServiceId = null;
        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 les filtres' : 'Afficher les 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('.service-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('.service-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');
                currentServiceId = 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-service-btn').forEach(button => {
            button.addEventListener('click', function() {
                currentServiceId = this.getAttribute('data-service-id');
                serviceTitleElement.textContent = this.getAttribute('data-service-title');
                openModal();
            });
        });

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

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

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/prestataire/services/${currentServiceId}`;

                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

@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;
    }

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

    .service-stat-tile {
        display: flex;
        min-height: 5.2rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.42rem;
        min-width: 0;
        border-radius: 0.85rem;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(255, 255, 255, 0.95);
        padding: 0.56rem 0.6rem;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
    }

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

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

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

    .service-stat-value {
        margin-top: 0.08rem;
        font-size: 0.82rem;
        font-weight: 700;
        color: #0f172a;
    }

    .service-filter-field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.34rem;
        border-radius: 0.85rem;
        background: #fff;
        padding: 0.58rem 0.64rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

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

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

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

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

    .service-filter-toggle,
    .service-filter-submit,
    .service-filter-reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border-radius: 0.8rem;
        padding: 0.58rem 0.72rem;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1;
        transition: all 0.2s ease;
    }

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

    .service-filter-toggle:hover {
        border-color: #93c5fd;
        color: #1d4ed8;
    }

    .service-filter-submit {
        background: #2563eb;
        color: #fff;
    }

    .service-filter-submit:hover {
        background: #1d4ed8;
    }

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

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

    .service-card {
        display: flex;
        flex-direction: column;
        gap: 0.46rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(226, 232, 240, 0.96);
        background: rgba(255, 255, 255, 0.96);
        padding: 0.46rem;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
    }

    .service-card-media {
        position: relative;
        min-width: 0;
        aspect-ratio: 4 / 3;
    }

    .service-card-image,
    .service-card-placeholder {
        height: 100%;
        width: 100%;
        border-radius: 0.72rem;
        object-fit: cover;
    }

    .service-card-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
        color: #60a5fa;
    }

    .service-card-badges {
        position: absolute;
        left: 0.5rem;
        right: 0.5rem;
        top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.28rem;
    }

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

    .service-badge-success {
        background: rgba(236, 253, 245, 0.94);
        color: #047857;
    }

    .service-badge-muted {
        background: rgba(248, 250, 252, 0.94);
        color: #475569;
    }

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

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

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

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

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

    .service-action-btn,
    .service-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        border-radius: 0.78rem;
        font-size: 0.64rem;
        font-weight: 700;
        line-height: 1;
        transition: all 0.2s ease;
    }

    .service-action-btn {
        padding: 0.54rem 0.62rem;
    }

    .service-action-primary {
        background: #2563eb;
        color: #fff;
    }

    .service-action-primary:hover {
        background: #1d4ed8;
    }

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

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

    .service-icon-btn {
        padding: 0.54rem 0.4rem;
    }

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

    .services-empty-state {
        display: flex;
        width: min(100%, 22rem);
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(255, 255, 255, 0.96);
        padding: 0.82rem;
        text-align: center;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
    }

    .services-empty-icon {
        display: inline-flex;
        height: 3rem;
        width: 3rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 100%);
        color: #2563eb;
    }

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

    @media (max-width: 639px) {
        .service-stat-tile {
            min-height: 4.5rem;
            gap: 0.34rem;
            padding: 0.48rem 0.52rem;
            border-radius: 0.78rem;
        }

        .service-stat-icon {
            height: 1.5rem;
            width: 1.5rem;
        }

        .service-stat-label {
            font-size: 0.5rem;
        }

        .service-stat-value {
            font-size: 0.72rem;
        }

        .service-filter-field {
            padding: 0.5rem 0.56rem;
            border-radius: 0.76rem;
        }

        .services-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .service-card {
            gap: 0.42rem;
            padding: 0.4rem;
            border-radius: 0.8rem;
        }

        .service-card-image,
        .service-card-placeholder {
            border-radius: 0.64rem;
        }

        .service-badge {
            padding: 0.18rem 0.34rem;
            font-size: 0.5rem;
        }

        .service-card-body {
            gap: 0.42rem;
        }

        .service-price {
            font-size: 0.64rem;
        }

        .service-chip {
            padding: 0.2rem 0.34rem;
            font-size: 0.52rem;
        }

        .service-card-actions {
            gap: 0.26rem;
            padding-top: 0.44rem;
        }

        .service-action-btn {
            padding: 0.46rem 0.5rem;
            font-size: 0.6rem;
            border-radius: 0.72rem;
        }

        .service-icon-btn {
            padding: 0.46rem 0.32rem;
            border-radius: 0.68rem;
        }

        .service-filter-toggle,
        .service-filter-submit,
        .service-filter-reset {
            padding: 0.5rem 0.6rem;
            font-size: 0.62rem;
            border-radius: 0.72rem;
        }

        .services-empty-state {
            gap: 0.55rem;
            padding: 0.72rem;
            border-radius: 0.82rem;
        }

        .services-empty-icon {
            height: 2.5rem;
            width: 2.5rem;
        }
    }

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

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