@extends('layouts.app')

@section('title', 'Daftar Laporan')

@section('content')

@php
    $user     = auth()->user();
    $qcDept   = \App\Models\Department::whereRaw("LOWER(name) LIKE '%quality%'")
                    ->orWhereRaw("LOWER(name) LIKE '%qc%'")->first();
    $isQcUser = $user->role === 'staff_departemen'
                && $qcDept
                && $user->department_id == $qcDept->id;

    $isMachineAuditor = $user->role === 'auditor'
                        && $user->auditType
                        && strtolower($user->auditType->name) === 'mesin';

@endphp

<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <h5 class="mb-0">
                            <i class="bi bi-file-earmark-text"></i>
                            @if($user->role === 'auditor')
                                Laporan Saya
                            @elseif($isQcUser)
                                Laporan untuk Diverifikasi QC
                            @elseif($user->role === 'staff_departemen')
                                Laporan yang Ditugaskan
                            @else
                                Semua Laporan
                            @endif
                        </h5>

                        <div class="d-flex gap-2 mt-2 mt-md-0">
                            @if($user->role === 'auditor')
                                <a href="{{ route('reports.create') }}" class="btn btn-light btn-sm">
                                    <i class="bi bi-plus-circle"></i> Buat Laporan
                                </a>
                            @endif
                            @if(in_array($user->role, ['super_admin', 'auditor', 'staff_departemen']))
                                <a href="{{ route('reports.exportPage') }}" class="btn btn-success btn-sm">
                                    <i class="bi bi-file-earmark-excel"></i> Ekspor & Arsip
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filter -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0"><i class="bi bi-funnel"></i> Filter Laporan</h6>
                            <button class="btn btn-sm btn-outline-secondary d-md-none" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterCollapse">
                                <i class="bi bi-funnel"></i> Tampilkan Filter
                            </button>
                        </div>

                        <div class="collapse show" id="filterCollapse">
                            <form method="GET" action="{{ route('reports.index') }}" id="filterForm">
                                <div class="row g-3">
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <label class="form-label small fw-bold">Cari Laporan</label>
                                        <div class="input-group input-group-sm">
                                            <input type="text" name="search" class="form-control"
                                                   placeholder="Nomor, lokasi, jenis masalah..."
                                                   value="{{ request('search') }}">
                                            <button class="btn btn-primary" type="submit">
                                                <i class="bi bi-search"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label small fw-bold">Status</label>
                                        <select name="status" class="form-select form-select-sm">
                                            <option value="">Semua Status</option>
                                            <option value="submitted"   {{ request('status') === 'submitted'   ? 'selected' : '' }}>Diajukan</option>
                                            <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>Dalam Proses</option>
                                            <option value="fixed"       {{ request('status') === 'fixed'       ? 'selected' : '' }}>Diperbaiki</option>
                                            <option value="approved"    {{ request('status') === 'approved'    ? 'selected' : '' }}>Disetujui</option>
                                            <option value="rejected"    {{ request('status') === 'rejected'    ? 'selected' : '' }}>Ditolak</option>

                                            @if($isMachineAuditor || $isQcUser || $user->role === 'super_admin')
                                                <option value="qc_review"           {{ request('status') === 'qc_review'           ? 'selected' : '' }}>Verifikasi QC</option>
                                                <option value="final_approved"      {{ request('status') === 'final_approved'      ? 'selected' : '' }}>Disetujui Final</option>
                                                <option value="rejected_by_qc"      {{ request('status') === 'rejected_by_qc'      ? 'selected' : '' }}>Ditolak QC</option>
                                                <option value="rejected_by_auditor" {{ request('status') === 'rejected_by_auditor' ? 'selected' : '' }}>Ditolak Auditor</option>
                                            @endif

                                            @if($user->role === 'staff_departemen' && !$isQcUser)
                                                <option value="qc_review"           {{ request('status') === 'qc_review'           ? 'selected' : '' }}>Verifikasi QC</option>
                                                <option value="final_approved"      {{ request('status') === 'final_approved'      ? 'selected' : '' }}>Disetujui Final</option>
                                                <option value="rejected_by_qc"      {{ request('status') === 'rejected_by_qc'      ? 'selected' : '' }}>Ditolak QC</option>
                                                <option value="rejected_by_auditor" {{ request('status') === 'rejected_by_auditor' ? 'selected' : '' }}>Ditolak Auditor</option>
                                            @endif
                                        </select>
                                    </div>

                                    @if($user->role === 'staff_departemen')
                                        <div class="col-6 col-md-4 col-lg-3">
                                            <label class="form-label small fw-bold">Tipe Audit</label>
                                            <select name="audit_type" class="form-select form-select-sm">
                                                <option value="">Semua Tipe</option>
                                                @foreach($auditTypes as $type)
                                                    <option value="{{ $type->id }}" {{ request('audit_type') == $type->id ? 'selected' : '' }}>
                                                        {{ $type->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @else
                                        <div class="col-6 col-md-4 col-lg-3">
                                            <label class="form-label small fw-bold">Departemen</label>
                                            <select name="department" class="form-select form-select-sm">
                                                <option value="">Semua Departemen</option>
                                                @foreach($departments as $dept)
                                                    <option value="{{ $dept->id }}" {{ request('department') == $dept->id ? 'selected' : '' }}>
                                                        {{ $dept->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    {{-- Filter Auditor: hanya untuk super_admin --}}
                                    @if($user->role === 'super_admin')
                                        <div class="col-6 col-md-4 col-lg-3">
                                            <label class="form-label small fw-bold">
                                                <i class="bi bi-person-badge"></i> Auditor
                                            </label>
                                            <select name="auditor" class="form-select form-select-sm">
                                                <option value="">Semua Auditor</option>
                                                @foreach($auditors as $auditor)
                                                    <option value="{{ $auditor->id }}" {{ request('auditor') == $auditor->id ? 'selected' : '' }}>
                                                        {{ $auditor->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    <div class="col-6 col-md-4 col-lg-3">
                                        <label class="form-label small fw-bold">Periode</label>
                                        <select name="period" class="form-select form-select-sm">
                                            <option value="">Semua Waktu</option>
                                            <option value="today" {{ request('period') === 'today' ? 'selected' : '' }}>Hari Ini</option>
                                            <option value="week"  {{ request('period') === 'week'  ? 'selected' : '' }}>Minggu Ini</option>
                                            <option value="month" {{ request('period') === 'month' ? 'selected' : '' }}>Bulan Ini</option>
                                            <option value="year"  {{ request('period') === 'year'  ? 'selected' : '' }}>Tahun Ini</option>
                                        </select>
                                    </div>

                                    <div class="col-6 col-md-4 col-lg-3">
                                        <label class="form-label small fw-bold">Dari Tanggal</label>
                                        <input type="date" name="date_from" class="form-control form-control-sm"
                                               value="{{ request('date_from') }}">
                                    </div>

                                    <div class="col-6 col-md-4 col-lg-3">
                                        <label class="form-label small fw-bold">Sampai Tanggal</label>
                                        <input type="date" name="date_to" class="form-control form-control-sm"
                                               value="{{ request('date_to') }}">
                                    </div>

                                    <div class="col-12 col-md-4 col-lg-3 d-flex align-items-end gap-2">
                                        <button type="submit" class="btn btn-primary btn-sm flex-fill">
                                            <i class="bi bi-filter"></i> Terapkan
                                        </button>
                                        <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm">
                                            <i class="bi bi-arrow-clockwise"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    @if(request()->hasAny(['status', 'department', 'audit_type', 'auditor', 'period', 'date_from', 'date_to', 'search']))
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            <i class="bi bi-info-circle"></i>
                            Menampilkan <strong>{{ $reports->total() }}</strong> laporan dari hasil filter
                            @if($user->role === 'super_admin' && request('auditor'))
                                &mdash; Auditor: <strong>{{ $auditors->firstWhere('id', request('auditor'))->name ?? '-' }}</strong>
                            @endif
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if($reports->count() > 0)
                        {{-- ══ Desktop Table ══ --}}
                        <div class="table-responsive d-none d-lg-block">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>No. Laporan</th>
                                        @if($user->role === 'staff_departemen')
                                            <th>Tipe Audit</th>
                                        @else
                                            <th>Departemen</th>
                                        @endif
                                        @if($user->role === 'super_admin')
                                            <th>Auditor</th>
                                        @endif
                                        <th>Jenis Masalah</th>
                                        <th>Lokasi</th>
                                        @if($isMachineAuditor)
                                            <th><i class="bi bi-gear-fill text-warning"></i> Nama Mesin</th>
                                        @endif
                                        <th class="text-center">Status</th>
                                        <th>Tanggal</th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reports as $report)
                                        @php
                                            $isThisMachine = $report->auditType && strtolower($report->auditType->name) === 'mesin';
                                            $now = now();
                                            $overdueMsg = null;

                                            if ($report->status === 'submitted') {
                                                $days = (int) $report->created_at->diffInDays($now);
                                                if ($days >= 7) $overdueMsg = "Terlambat {$days} hari";
                                            } elseif ($report->status === 'in_progress' && $report->deadline) {
                                                $dl = \Carbon\Carbon::parse($report->deadline);
                                                if ($now->greaterThan($dl)) {
                                                    $late = (int) $dl->diffInDays($now);
                                                    $overdueMsg = $late === 0 ? 'Lewat deadline hari ini' : "Lewat deadline {$late} hari";
                                                }
                                            }
                                        @endphp
                                        <tr>
                                            <td class="fw-bold text-primary">
                                                <a href="{{ route('reports.show', $report) }}" class="text-decoration-none">
                                                    {{ $report->report_number }}
                                                </a>
                                            </td>
                                            @if($user->role === 'staff_departemen')
                                                <td>
                                                    <span class="badge bg-info bg-opacity-10 text-info border border-info">
                                                        {{ $report->auditType->name }}
                                                    </span>
                                                </td>
                                            @else
                                                <td>{{ $report->department->name }}</td>
                                            @endif
                                            @if($user->role === 'super_admin')
                                                <td>
                                                    <small class="text-muted">
                                                        <i class="bi bi-person-badge me-1"></i>{{ $report->auditor->name ?? '-' }}
                                                    </small>
                                                </td>
                                            @endif
                                            <td>{{ Str::limit($report->issue_type, 28) }}</td>
                                            <td><i class="bi bi-geo-alt text-muted"></i> {{ Str::limit($report->location, 28) }}</td>

                                            @if($isMachineAuditor)
                                                <td>
                                                    @if($report->machine_name)
                                                        <span class="badge bg-warning text-dark">
                                                            <i class="bi bi-gear-fill"></i>
                                                            {{ Str::limit($report->machine_name, 22) }}
                                                        </span>
                                                    @else
                                                        <span class="text-muted small">—</span>
                                                    @endif
                                                </td>
                                            @endif

                                            <td class="text-center">{!! $report->status_badge !!}</td>

                                            <td>
                                                <small class="{{ $overdueMsg ? 'text-danger fw-semibold' : 'text-muted' }} d-block">
                                                    <i class="bi bi-calendar3"></i> {{ $report->created_at->format('d M Y') }}
                                                </small>
                                                <small class="{{ $overdueMsg ? 'text-danger' : 'text-muted' }} d-block">
                                                    <i class="bi bi-clock"></i> {{ $report->created_at->format('H:i') }}
                                                </small>
                                                @if($overdueMsg)
                                                    <span class="overdue-pill mt-1">
                                                        <i class="bi bi-exclamation-circle-fill"></i> {{ $overdueMsg }}
                                                    </span>
                                                @endif
                                            </td>

                                            <td class="text-center">
                                                <a href="{{ route('reports.show', $report) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-eye"></i> Lihat
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        {{-- ══ Tablet ══ --}}
                        <div class="d-none d-md-block d-lg-none">
                            @foreach($reports as $report)
                                @php
                                    $isThisMachine = $report->auditType && strtolower($report->auditType->name) === 'mesin';
                                    $now = now();
                                    $overdueMsg = null;
                                    if ($report->status === 'submitted') {
                                        $days = (int) $report->created_at->diffInDays($now);
                                        if ($days >= 7) $overdueMsg = "Terlambat {$days} hari";
                                    } elseif ($report->status === 'in_progress' && $report->deadline) {
                                        $dl = \Carbon\Carbon::parse($report->deadline);
                                        if ($now->greaterThan($dl)) {
                                            $late = (int) $dl->diffInDays($now);
                                            $overdueMsg = $late === 0 ? 'Lewat deadline hari ini' : "Lewat deadline {$late} hari";
                                        }
                                    }
                                @endphp
                                <div class="card mb-3 shadow-sm">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-8">
                                                <h6 class="fw-bold text-primary mb-2">{{ $report->report_number }}</h6>
                                                <div class="mb-2">
                                                    @if($user->role === 'staff_departemen')
                                                        <span class="badge bg-info bg-opacity-10 text-info border border-info me-1">
                                                            {{ $report->auditType->name }}
                                                        </span>
                                                    @else
                                                        <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary me-1">
                                                            {{ $report->department->name }}
                                                        </span>
                                                    @endif
                                                    @if($user->role === 'super_admin')
                                                        <span class="badge bg-light text-dark border me-1">
                                                            <i class="bi bi-person-badge"></i> {{ $report->auditor->name ?? '-' }}
                                                        </span>
                                                    @endif
                                                    @if($isMachineAuditor && $report->machine_name)
                                                        <span class="badge bg-warning text-dark">
                                                            <i class="bi bi-gear-fill"></i> {{ Str::limit($report->machine_name, 18) }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-4 text-end">{!! $report->status_badge !!}</div>
                                        </div>
                                        <p class="mb-1"><i class="bi bi-geo-alt text-primary"></i> <strong>{{ $report->location }}</strong></p>
                                        <p class="mb-1 text-muted small"><i class="bi bi-exclamation-triangle"></i> {{ $report->issue_type }}</p>
                                        <p class="mb-1 {{ $overdueMsg ? 'text-danger fw-semibold' : 'text-muted' }} small">
                                            <i class="bi bi-calendar3"></i> {{ $report->created_at->format('d M Y H:i') }}
                                        </p>
                                        @if($overdueMsg)
                                            <span class="overdue-pill mb-2">
                                                <i class="bi bi-exclamation-circle-fill"></i> {{ $overdueMsg }}
                                            </span>
                                        @endif
                                        <a href="{{ route('reports.show', $report) }}" class="btn btn-sm btn-primary w-100 mt-2">
                                            <i class="bi bi-eye"></i> Lihat Detail
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- ══ Mobile ══ --}}
                        <div class="d-md-none">
                            @foreach($reports as $report)
                                @php
                                    $isThisMachine = $report->auditType && strtolower($report->auditType->name) === 'mesin';
                                    $now = now();
                                    $overdueMsg = null;
                                    if ($report->status === 'submitted') {
                                        $days = (int) $report->created_at->diffInDays($now);
                                        if ($days >= 7) $overdueMsg = "Terlambat {$days} hari";
                                    } elseif ($report->status === 'in_progress' && $report->deadline) {
                                        $dl = \Carbon\Carbon::parse($report->deadline);
                                        if ($now->greaterThan($dl)) {
                                            $late = (int) $dl->diffInDays($now);
                                            $overdueMsg = $late === 0 ? 'Lewat deadline hari ini' : "Lewat deadline {$late} hari";
                                        }
                                    }
                                @endphp
                                <div class="card mb-3 shadow-sm">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h6 class="mb-0 fw-bold text-primary small">{{ $report->report_number }}</h6>
                                            <div>{!! $report->status_badge !!}</div>
                                        </div>
                                        <div class="mb-2">
                                            @if($user->role === 'staff_departemen')
                                                <span class="badge bg-info bg-opacity-10 text-info border border-info me-1" style="font-size:0.7rem;">
                                                    {{ Str::limit($report->auditType->name, 15) }}
                                                </span>
                                            @else
                                                <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary me-1" style="font-size:0.7rem;">
                                                    {{ Str::limit($report->department->name, 15) }}
                                                </span>
                                            @endif
                                            @if($user->role === 'super_admin')
                                                <span class="badge bg-light text-dark border me-1" style="font-size:0.7rem;">
                                                    <i class="bi bi-person-badge"></i> {{ Str::limit($report->auditor->name ?? '-', 15) }}
                                                </span>
                                            @endif
                                            @if($isMachineAuditor && $report->machine_name)
                                                <span class="badge bg-warning text-dark" style="font-size:0.7rem;">
                                                    <i class="bi bi-gear-fill"></i> {{ Str::limit($report->machine_name, 15) }}
                                                </span>
                                            @endif
                                        </div>
                                        <p class="mb-1 small"><i class="bi bi-geo-alt text-primary"></i> <strong>{{ Str::limit($report->location, 35) }}</strong></p>
                                        <p class="mb-1 text-muted small"><i class="bi bi-exclamation-triangle"></i> {{ Str::limit($report->issue_type, 30) }}</p>
                                        <p class="mb-1 {{ $overdueMsg ? 'text-danger fw-semibold' : 'text-muted' }}" style="font-size:0.75rem;">
                                            <i class="bi bi-calendar3"></i> {{ $report->created_at->format('d M Y H:i') }}
                                        </p>
                                        @if($overdueMsg)
                                            <span class="overdue-pill mb-2">
                                                <i class="bi bi-exclamation-circle-fill"></i> {{ $overdueMsg }}
                                            </span>
                                        @endif
                                        <a href="{{ route('reports.show', $report) }}" class="btn btn-sm btn-primary w-100 mt-1">
                                            <i class="bi bi-eye"></i> Lihat Detail
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Pagination Custom --}}
                        @if($reports->lastPage() > 1)
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2 mt-4 pt-3 border-top">
                            <p class="text-muted small mb-0">
                                Menampilkan <strong>{{ $reports->firstItem() }}</strong>–<strong>{{ $reports->lastItem() }}</strong>
                                dari <strong>{{ $reports->total() }}</strong> laporan
                            </p>
                            <nav aria-label="Pagination">
                                <ul class="custom-pagination mb-0">
                                    <li class="{{ $reports->onFirstPage() ? 'disabled' : '' }}">
                                        @if($reports->onFirstPage())
                                            <span class="pg-btn pg-nav"><i class="bi bi-chevron-left"></i></span>
                                        @else
                                            <a href="{{ $reports->previousPageUrl() }}&{{ http_build_query(request()->except('page')) }}" class="pg-btn pg-nav">
                                                <i class="bi bi-chevron-left"></i>
                                            </a>
                                        @endif
                                    </li>

                                    @php
                                        $current  = $reports->currentPage();
                                        $last     = $reports->lastPage();
                                        $window   = 2;
                                        $start    = max(1, $current - $window);
                                        $end      = min($last, $current + $window);
                                    @endphp

                                    @if($start > 1)
                                        <li>
                                            <a href="{{ $reports->url(1) }}&{{ http_build_query(request()->except('page')) }}" class="pg-btn">1</a>
                                        </li>
                                        @if($start > 2)
                                            <li><span class="pg-dots">…</span></li>
                                        @endif
                                    @endif

                                    @for($p = $start; $p <= $end; $p++)
                                        <li>
                                            @if($p === $current)
                                                <span class="pg-btn pg-active">{{ $p }}</span>
                                            @else
                                                <a href="{{ $reports->url($p) }}&{{ http_build_query(request()->except('page')) }}" class="pg-btn">{{ $p }}</a>
                                            @endif
                                        </li>
                                    @endfor

                                    @if($end < $last)
                                        @if($end < $last - 1)
                                            <li><span class="pg-dots">…</span></li>
                                        @endif
                                        <li>
                                            <a href="{{ $reports->url($last) }}&{{ http_build_query(request()->except('page')) }}" class="pg-btn">{{ $last }}</a>
                                        </li>
                                    @endif

                                    <li class="{{ !$reports->hasMorePages() ? 'disabled' : '' }}">
                                        @if($reports->hasMorePages())
                                            <a href="{{ $reports->nextPageUrl() }}&{{ http_build_query(request()->except('page')) }}" class="pg-btn pg-nav">
                                                <i class="bi bi-chevron-right"></i>
                                            </a>
                                        @else
                                            <span class="pg-btn pg-nav"><i class="bi bi-chevron-right"></i></span>
                                        @endif
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        @endif

                    @else
                        <div class="text-center py-5">
                            <i class="bi bi-inbox display-1 text-muted"></i>
                            <h5 class="text-muted mt-3 mb-3">Tidak ada laporan ditemukan</h5>
                            @if(request()->hasAny(['status', 'department', 'audit_type', 'auditor', 'period', 'date_from', 'date_to', 'search']))
                                <p class="text-muted mb-3">Coba ubah kriteria filter atau pencarian Anda</p>
                                <a href="{{ route('reports.index') }}" class="btn btn-outline-primary">
                                    <i class="bi bi-arrow-clockwise"></i> Reset Filter
                                </a>
                            @elseif($user->role === 'auditor')
                                <p class="text-muted mb-3">Anda belum membuat laporan apapun</p>
                                <a href="{{ route('reports.create') }}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> Buat Laporan Pertama
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    }
    .card {
        border: none;
        border-radius: 10px;
    }
    .card-header {
        border-radius: 10px 10px 0 0 !important;
    }
    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
    }
    .table th {
        border-bottom: 2px solid #dee2e6;
        font-size: 0.875rem;
        white-space: nowrap;
        font-weight: 600;
    }
    .table td {
        font-size: 0.875rem;
        vertical-align: middle;
    }
    .table {
        min-width: 900px;
    }
    .table tbody tr {
        transition: background 0.15s;
    }
    .table tbody tr:hover {
        background: rgba(6, 95, 70, 0.04);
    }
    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive::-webkit-scrollbar { height: 6px; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
    .table-responsive::-webkit-scrollbar-thumb { background: #047857; border-radius: 10px; }

    /* ══ Overdue Pill Badge ══ */
    .overdue-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.67rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        background-color: #FEE2E2;
        color: #B91C1C;
        border: 1px solid #FECACA;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }
    .overdue-pill i { font-size: 0.65rem; }

    /* ══ Custom Pagination ══ */
    .custom-pagination {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .pg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        color: #374151;
        background: #fff;
        border: 1px solid #E5E7EB;
        text-decoration: none;
        transition: all 0.15s ease;
        cursor: pointer;
    }
    .pg-btn:hover {
        background: #F0FDF4;
        border-color: #047857;
        color: #047857;
    }
    .pg-btn.pg-active {
        background: linear-gradient(135deg, #065F46, #047857);
        border-color: transparent;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(6,95,70,0.3);
    }
    .pg-btn.pg-nav { color: #6B7280; }
    li.disabled .pg-btn {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
    .pg-dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: #9CA3AF;
        font-size: 0.85rem;
    }

    @media (max-width: 576px) {
        .pg-btn { width: 30px; height: 30px; font-size: 0.75rem; border-radius: 6px; }
        .pg-dots { width: 24px; }
    }
    @media (max-width: 767.98px) {
        .card-body { padding: 1rem; }
        .badge { font-size: 0.65rem !important; padding: 0.25em 0.5em; }
    }
</style>
@endpush