@extends('layouts.app')
@section('title', 'Job Listing — Find Your Dream Job')

@section('content')

<!-- ═══════════════════════════ BREADCRUMB HEADER ═══════════════════════════ -->
<section class="py-5 text-center position-relative overflow-hidden" style="background: linear-gradient(135deg, #fffbeb 0%, #fff1f2 100%); border-bottom: 1px solid #f1f5f9;">
    <!-- Abstract circular lines overlay -->
    <div class="position-absolute" style="top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; border:1px solid rgba(244,63,94,0.04); border-radius:50%; z-index:1;"></div>
    <div class="position-absolute" style="top:-40%; left:50%; transform:translateX(-50%); width:480px; height:480px; border:1px solid rgba(244,63,94,0.06); border-radius:50%; z-index:1;"></div>
    
    <div class="container position-relative py-3" style="z-index:2;">
        <h1 class="fw-900 text-dark mb-2" style="font-size:2.5rem; letter-spacing:-1px;">Job Listing</h1>
        <nav class="d-flex justify-content-center" style="--bs-breadcrumb-divider: '›';">
            <ol class="breadcrumb mb-0" style="font-size:0.95rem; font-weight:600;">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted text-decoration-none hover-teal">Home</a></li>
                <li class="breadcrumb-item active text-teal-accent" aria-current="page">Job Listing</li>
            </ol>
        </nav>
    </div>
</section>

<!-- ═══════════════════════════ MAIN JOB LISTING AREA ═══════════════════════════ -->
<section class="py-5" style="background:#ffffff; min-height:100vh;">
    <div class="container">
        
        <!-- Search bar hidden inside search form to carry values -->
        <form action="{{ route('jobs.index') }}" method="GET" id="job-search-form">
            <!-- Hold keyword & location search values -->
            <input type="hidden" name="q" value="{{ request('q') }}">
            <input type="hidden" name="location" value="{{ request('location') }}">

            <div class="row g-4 mt-2">
                
                <!-- ─── FILTERS COLUMN ─── -->
                <div class="col-lg-4 col-md-12">
                    <div class="d-flex flex-column gap-4" style="position:sticky; top:100px;">
                        
                        <!-- 1. Job Category Card -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Job Category</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3" style="max-height:260px; overflow-y:auto; padding-right:5px;">
                                @foreach($categories as $cat)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="category" id="cat_{{ $cat->id }}" value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="cat_{{ $cat->id }}">
                                                {{ $cat->name }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ $cat->jobs_count ?? 12 }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 2. Type of Employments -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Type of Employments</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3">
                                @foreach([
                                    'full-time' => 'Full Time',
                                    'freelance' => 'Freelance',
                                    'part-time' => 'Part Time',
                                    'remote' => 'Remote',
                                    'contract' => 'Contract',
                                    'internship' => 'Internship'
                                ] as $val => $label)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="job_type" id="jt_{{ $val }}" value="{{ $val }}" {{ request('job_type') == $val ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="jt_{{ $val }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ mt_rand(10, 100) }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 3. Date of Post -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Date of Post</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3">
                                @foreach([
                                    'today' => 'Today',
                                    'week' => 'Last week ago',
                                    'month' => 'Last month ago',
                                    '3months' => '3 month ago',
                                    'year' => '1 year ago'
                                ] as $val => $label)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="posted_date" id="date_{{ $val }}" value="{{ $val }}" {{ request('posted_date') == $val ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="date_{{ $val }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ mt_rand(20, 120) }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 4. Salary Range -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Salary Range</h5>
                            
                            <div class="mt-3">
                                <div class="text-teal-accent fw-700 small mb-2 text-start">₹3L - ₹30L+</div>
                                <input type="range" class="form-range custom-slider-accent mb-3" min="3" max="30" step="1" id="salary_slider">
                                
                                <div class="filter-list d-flex flex-column gap-2">
                                    @foreach([
                                        '300000-500000' => '₹3L - ₹5L',
                                        '500000-1000000' => '₹5L - ₹10L',
                                        '1000000-1500000' => '₹10L - ₹15L',
                                        '1500000-2000000' => '₹15L - ₹20L',
                                        '2000000-3000000' => '₹20L - ₹30L'
                                    ] as $val => $label)
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="form-check text-start">
                                                <input class="form-check-input filter-radio-custom" type="radio" name="salary_range" id="sal_{{ $val }}" value="{{ $val }}" {{ request('salary_range') == $val ? 'checked' : '' }}>
                                                <label class="form-check-label text-muted small fw-600 cursor-pointer" for="sal_{{ $val }}">
                                                    {{ $label }}
                                                </label>
                                            </div>
                                            <span class="text-muted small fw-500">({{ mt_rand(10, 80) }})</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- 5. Date of Post / Skills Tags -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Popular Skills</h5>
                            <div class="d-flex flex-wrap gap-2 mt-3">
                                @foreach(['Technology', 'Marketing', 'Sales', 'Transport', 'Medical', 'Design', 'Data Analyst', 'Development', 'Non-Profit', 'Manager', 'Health'] as $skillTag)
                                    <a href="{{ route('jobs.index', ['q' => $skillTag]) }}" class="badge bg-light text-dark border p-2 text-decoration-none" style="border-radius:20px; font-size:0.75rem; font-weight:600; transition:all 0.2s;" onmouseover="this.style.background='#0d9488'; this.style.color='#fff';" onmouseout="this.style.background='#f8fafc'; this.style.color='#212529';">
                                        {{ $skillTag }}
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        <!-- Apply Filters & Clear Buttons -->
                        <div class="d-flex gap-2">
                            <a href="{{ route('jobs.index') }}" class="btn btn-outline-glass flex-fill py-3 fw-700 shadow-sm" style="border-radius:12px; font-size:0.92rem;">Clear All</a>
                            <button type="submit" class="btn btn-primary-gradient flex-fill py-3 fw-800" style="border-radius:12px; font-size:0.92rem;">Go to Job Alert</button>
                        </div>

                    </div>
                </div>

                <!-- ─── RESULTS COLUMN ─── -->
                <div class="col-lg-8 col-md-12">
                    
                    <!-- Upper Filter Sorting bar -->
                    <div class="d-flex justify-content-between align-items-center mb-4 p-3 bg-white rounded-4 shadow-sm" style="border:1px solid #f1f5f9;">
                        <p class="text-muted mb-0 fw-600" style="font-size:0.92rem;">
                            Showing results <span class="text-dark fw-800">{{ $jobs->count() }}</span> in <span class="text-dark fw-800">{{ $jobs->total() }}</span> jobs list
                        </p>
                        
                        <div class="d-flex align-items-center gap-3">
                            <select name="sort" class="form-select border shadow-xs" style="width:170px; border-radius:10px; font-weight:600; font-size:0.85rem;" onchange="this.form.submit()">
                                <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Sort By(Default)</option>
                                <option value="salary_high" {{ request('sort') == 'salary_high' ? 'selected' : '' }}>Highest Salary</option>
                                <option value="salary_low" {{ request('sort') == 'salary_low' ? 'selected' : '' }}>Lowest Salary</option>
                            </select>

                            <!-- List/Grid Switcher Icons -->
                            <div class="d-flex gap-1">
                                <button type="button" class="btn p-2 rounded-2 border-0 view-switch-btn" id="btn-grid-view" style="width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#475569;"><i class="fas fa-th-large fs-6"></i></button>
                                <button type="button" class="btn p-2 rounded-2 border-0 view-switch-btn" id="btn-list-view" style="width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#0d9488; color:#fff;"><i class="fas fa-list fs-6"></i></button>
                            </div>
                        </div>
                    </div>

                    <!-- ── LAYOUT 1: LIST VIEW CONTAINER ── -->
                    <div id="list-layout-container" class="d-flex flex-column gap-3">
                        @forelse($jobs as $job)
                            <div class="card bg-white border shadow-sm p-4 rounded-4 hover-lift hover-shadow transition-all-300 position-relative" style="border-color:#f1f5f9 !important;">
                                <div class="d-flex flex-column flex-md-row align-items-start gap-4">
                                    
                                    <!-- Circular Company Logo -->
                                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-light shadow-xs" style="width:64px; height:64px; border:1px solid #f1f5f9; flex-shrink:0;">
                                        <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name=C&background=0d9488&color=fff' }}" alt="{{ $job->company->name ?? 'Company' }}" class="rounded-circle" style="width:52px; height:52px; object-fit:contain;">
                                    </div>
                                    
                                    <!-- Job Attributes Main content -->
                                    <div class="flex-fill text-start">
                                        <div class="d-flex align-items-start justify-content-between mb-1">
                                            <div>
                                                <h4 class="fw-800 text-dark mb-0 fs-5 hover-teal">
                                                    <a href="{{ route('jobs.show', $job->slug) }}" class="text-decoration-none text-dark">{{ $job->title }}</a>
                                                </h4>
                                                <p class="text-muted mb-3 fw-600 small">{{ $job->company->name ?? 'Company' }}</p>
                                            </div>
                                            
                                            <!-- Top-Right Bookmark Icon -->
                                            <button type="button" class="btn btn-save-job rounded-circle" data-id="{{ $job->id }}" style="background:#f1f5f9; color:#0d9488; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; transition:all 0.2s;" title="Save Job">
                                                <i class="far fa-bookmark"></i>
                                            </button>
                                        </div>

                                        <!-- Bulleted Meta Details -->
                                        <div class="row g-2 mb-3 text-muted small fw-600">
                                            <div class="col-md-6 d-flex align-items-center gap-2">
                                                <span style="color:#0d9488;">●</span> Salary: <span class="text-dark fw-700">{{ $job->salary_range }}</span> / Per Month
                                            </div>
                                            <div class="col-md-6 d-flex align-items-center gap-2">
                                                <span style="color:#2fd1c5;">●</span> Deadline: <span class="text-dark fw-700">{{ $job->deadline ? $job->deadline->format('d M, Y') : now()->addDays(20)->format('d M, Y') }}</span>
                                            </div>
                                        </div>

                                        <!-- Tags & Apply button row -->
                                        <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                            <div class="d-flex gap-2">
                                                <span class="badge" style="background:#fee2e2; color:#ef4444; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                    {{ ucwords(str_replace('-',' ',$job->job_type)) }}
                                                </span>
                                                @if($job->is_remote)
                                                    <span class="badge" style="background:#ccfbf1; color:#0d9488; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                        Remote
                                                    </span>
                                                @endif
                                                <span class="badge" style="background:#f3e8ff; color:#a855f7; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                    {{ ucfirst($job->experience_level) }}
                                                </span>
                                            </div>

                                            <!-- Apply Now chevron link -->
                                            <a href="{{ route('jobs.show', $job->slug) }}" class="fw-800 text-teal-accent text-decoration-none small hover-teal d-flex align-items-center gap-1">
                                                Apply Now <i class="fas fa-arrow-right fs-7"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card shadow-sm border-0 p-5 text-center bg-white rounded-4">
                                <div style="font-size:5rem; margin-bottom:1rem;">🔍</div>
                                <h4 class="text-dark fw-800 mb-2">No Matching Jobs Found</h4>
                                <p class="text-muted mb-4">Try clearing filters or search options to explore jobs.</p>
                                <a href="{{ route('jobs.index') }}" class="btn btn-primary-gradient px-5 py-3 fw-700 rounded-3">Browse All Jobs</a>
                            </div>
                        @endforelse
                    </div>

                    <!-- ── LAYOUT 2: GRID VIEW CONTAINER ── -->
                    <div id="grid-layout-container" class="row g-4 d-none">
                        @php
                            $gradients = [
                                'linear-gradient(135deg, #fda4af 0%, #f43f5e 100%)', // Rose
                                'linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%)', // Purple
                                'linear-gradient(135deg, #fed7aa 0%, #f97316 100%)', // Orange
                                'linear-gradient(135deg, #99f6e4 0%, #0d9488 100%)', // Teal
                                'linear-gradient(135deg, #bfdbfe 0%, #2563eb 100%)', // Blue
                                'linear-gradient(135deg, #fed7aa 0%, #ea580c 100%)'  // Warm Orange
                            ];
                        @endphp
                        @foreach($jobs as $idx => $job)
                            <div class="col-md-6">
                                <div class="card bg-white border shadow-sm rounded-4 overflow-hidden hover-lift hover-shadow transition-all-300 position-relative h-100" style="border-color:#f1f5f9 !important;">
                                    
                                    <!-- Header cover pattern -->
                                    <div class="cover-pattern position-relative" style="height:110px; background:{{ $gradients[$idx % count($gradients)] }};">
                                        
                                        <!-- Optional red "Urgent" badge overlay -->
                                        @if($job->is_urgent)
                                            <span class="badge position-absolute" style="top:12px; left:12px; background:#ef4444; color:#fff; border-radius:4px; font-weight:800; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; z-index:5;">Urgent</span>
                                        @elseif($job->is_featured)
                                            <span class="badge position-absolute" style="top:12px; left:12px; background:#f59e0b; color:#fff; border-radius:4px; font-weight:800; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; z-index:5;">Featured</span>
                                        @endif

                                        <!-- Circular bookmark overlay -->
                                        <button type="button" class="btn btn-save-job rounded-circle position-absolute" data-id="{{ $job->id }}" style="top:12px; right:12px; background:#ffffff; color:#0d9488; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 4px 10px rgba(0,0,0,0.1); z-index:5;" title="Save Job">
                                            <i class="far fa-bookmark"></i>
                                        </button>
                                    </div>

                                    <!-- Overlapping Company avatar -->
                                    <div class="position-relative text-start px-4" style="margin-top:-32px; z-index:6;">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center bg-white shadow-md" style="width:64px; height:64px; border:2px solid #ffffff; overflow:hidden;">
                                            <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name=C&background=0d9488&color=fff' }}" alt="{{ $job->company->name ?? 'Company' }}" style="width:100%; height:100%; object-fit:contain; padding:4px;">
                                        </div>
                                    </div>

                                    <!-- Card Content body -->
                                    <div class="card-body p-4 text-start">
                                        <h5 class="fw-800 text-dark mb-1 hover-teal fs-5">
                                            <a href="{{ route('jobs.show', $job->slug) }}" class="text-decoration-none text-dark">{{ $job->title }}</a>
                                        </h5>
                                        <p class="text-muted small fw-700 mb-1">{{ $job->company->name ?? 'Company' }}</p>
                                        <p class="text-muted small fw-600 mb-3"><i class="far fa-calendar-alt me-1"></i>Deadline: <span class="text-dark fw-700">{{ $job->deadline ? $job->deadline->format('d M, Y') : now()->addDays(20)->format('d M, Y') }}</span></p>

                                        <!-- Bullet attributes -->
                                        <div class="d-flex flex-column gap-2 mb-4 text-muted small fw-600 border-top pt-3" style="border-top-color:#f1f5f9 !important;">
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#0d9488;">●</span> Salary: <span class="text-dark fw-700">{{ $job->salary_range }}</span> / Month
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#2fd1c5;">●</span> Experience: <span class="text-dark fw-700">{{ $job->experience_min ? $job->experience_min.'-'.$job->experience_max.' Years' : '2-3 Years' }}</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#a855f7;">●</span> Location: <span class="text-dark fw-700">{{ $job->location->city ?? $job->city ?? 'Remote' }}, IN</span>
                                            </div>
                                        </div>

                                        <!-- Card Footer row -->
                                        <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                            <span class="badge" style="background:#fee2e2; color:#ef4444; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                {{ ucwords(str_replace('-',' ',$job->job_type)) }}
                                            </span>

                                            <a href="{{ route('jobs.show', $job->slug) }}" class="fw-800 text-teal-accent text-decoration-none small hover-teal d-flex align-items-center gap-1">
                                                Apply Now <i class="fas fa-arrow-right fs-7"></i>
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Styled circular pagination -->
                    @if($jobs->hasPages())
                        <div class="d-flex justify-content-center mt-5">
                            <nav>
                                <ul class="pagination gap-2 border-0">
                                    {{-- Previous Page Link --}}
                                    @if ($jobs->onFirstPage())
                                        <li class="page-item disabled"><span class="page-link rounded-circle d-flex align-items-center justify-content-center text-muted" style="width:40px; height:40px; background:#f1f5f9; border:1px solid #cbd5e1;"><i class="fas fa-arrow-left"></i></span></li>
                                    @else
                                        <li class="page-item"><a href="{{ $jobs->previousPageUrl() }}" class="page-link rounded-circle d-flex align-items-center justify-content-center hover-teal text-dark" style="width:40px; height:40px; border:1px solid #cbd5e1;"><i class="fas fa-arrow-left"></i></a></li>
                                    @endif

                                    {{-- Pagination Elements --}}
                                    @foreach ($jobs->links()->elements[0] as $page => $url)
                                        @if ($page == $jobs->currentPage())
                                            <li class="page-item active"><span class="page-link rounded-circle d-flex align-items-center justify-content-center bg-primary-gradient text-white fw-700" style="width:40px; height:40px; border:none;">{{ sprintf("%02d", $page) }}</span></li>
                                        @else
                                            <li class="page-item"><a href="{{ $url }}" class="page-link rounded-circle d-flex align-items-center justify-content-center text-dark fw-700" style="width:40px; height:40px; border:1px solid #cbd5e1;">{{ sprintf("%02d", $page) }}</a></li>
                                        @endif
                                    @endforeach

                                    {{-- Next Page Link --}}
                                    @if ($jobs->hasMorePages())
                                        <li class="page-item"><a href="{{ $jobs->nextPageUrl() }}" class="page-link rounded-circle d-flex align-items-center justify-content-center hover-teal text-dark" style="width:40px; height:40px; border:1px solid #cbd5e1;"><i class="fas fa-arrow-right"></i></a></li>
                                    @else
                                        <li class="page-item disabled"><span class="page-link rounded-circle d-flex align-items-center justify-content-center text-muted" style="width:40px; height:40px; background:#f1f5f9; border:1px solid #cbd5e1;"><i class="fas fa-arrow-right"></i></span></li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                    @endif

                </div>

            </div>
        </form>

    </div>
</section>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // ─── List/Grid Switcher Logic ───
    const storedView = localStorage.getItem('jobs_view_mode') || 'list';
    setViewMode(storedView);

    $('#btn-list-view').on('click', function() {
        setViewMode('list');
    });

    $('#btn-grid-view').on('click', function() {
        setViewMode('grid');
    });

    function setViewMode(mode) {
        if (mode === 'grid') {
            // update wrapper layouts
            $('#list-layout-container').addClass('d-none');
            $('#grid-layout-container').removeClass('d-none');
            
            // update buttons state
            $('#btn-grid-view').css({'background': '#0d9488', 'color': '#ffffff'});
            $('#btn-list-view').css({'background': '#f1f5f9', 'color': '#475569'});
        } else {
            // update wrapper layouts
            $('#grid-layout-container').addClass('d-none');
            $('#list-layout-container').removeClass('d-none');
            
            // update buttons state
            $('#btn-list-view').css({'background': '#0d9488', 'color': '#ffffff'});
            $('#btn-grid-view').css({'background': '#f1f5f9', 'color': '#475569'});
        }
        localStorage.setItem('jobs_view_mode', mode);
    }

    // ─── Auto-submit Filters on radio change ───
    $('.filter-radio-custom').on('change', function() {
        $('#job-search-form').submit();
    });
});
</script>
@endsection

@section('styles')
<style>
    .fw-900 { font-weight: 900; }
    .fw-800 { font-weight: 800; }
    .fw-700 { font-weight: 700; }
    .fw-600 { font-weight: 600; }
    .fw-500 { font-weight: 500; }

    .text-teal-accent {
        color: #0d9488 !important;
    }
    .text-teal-accent:hover {
        color: #0f766e !important;
    }
    .bg-teal-accent-light {
        background: rgba(13,148,136,0.08) !important;
    }

    .hover-teal:hover {
        color: #0d9488 !important;
    }

    /* Custom Radio checkbox styles */
    .filter-radio-custom {
        width: 17px;
        height: 17px;
        border-color: #cbd5e1;
        cursor: pointer;
    }
    .filter-radio-custom:checked {
        background-color: #0d9488 !important;
        border-color: #0d9488 !important;
    }

    /* Custom Slider Styles */
    .custom-slider-accent::-webkit-slider-thumb {
        background: #0d9488 !important;
    }
    .custom-slider-accent::-moz-range-thumb {
        background: #0d9488 !important;
    }

    /* hover lift transition */
    .hover-lift {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(13,148,136,0.06) !important;
        border-color: rgba(13,148,136,0.2) !important;
    }

    .pagination .page-item .page-link {
        color: #475569;
        background-color: #fff;
    }
    .pagination .page-item.active .page-link {
        color: #fff;
    }
</style>
@endsection