@extends('adminlte::page')

@section('title', 'Detail Pendaftar | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                Detail Calon Santri
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Informasi lengkap pendaftar, pemeriksaan berkas, dan penetapan kelulusan.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <a href="{{ route('admin.ppdb.pendaftar') }}" class="btn btn-light text-muted font-weight-bold btn-sm rounded-pill px-4 shadow-sm hover-lift">
                <i class="fas fa-arrow-left mr-2"></i> Kembali
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    <div class="row">
        
        {{-- KOLOM KIRI: PROFIL & STATUS --}}
        <div class="col-lg-4 mb-4">
            
            {{-- Card Profil --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
                <div class="card-body text-center pt-5 pb-4">
                    <div class="symbol symbol-100px mb-3 mx-auto">
                        <div class="symbol-label bg-gradient-purple text-white font-weight-bold rounded-circle d-flex align-items-center justify-content-center mx-auto shadow-lg" 
                             style="width: 100px; height: 100px; font-size: 3rem;">
                            {{ substr($calonSiswa->nama_lengkap, 0, 1) }}
                        </div>
                    </div>
                    
                    <h4 class="font-weight-bold text-dark mb-1">{{ $calonSiswa->nama_lengkap }}</h4>
                    <p class="text-muted small mb-3">{{ $calonSiswa->asal_sekolah }}</p>
                    
                    @if($calonSiswa->sekolah)
                        <span class="badge bg-light-purple text-purple px-3 py-2 rounded-pill font-weight-bold mb-4">
                            <i class="fas fa-university mr-1"></i> {{ $calonSiswa->sekolah->nama_sekolah }}
                        </span>
                    @else
                        <span class="badge bg-light-secondary text-muted px-3 py-2 rounded-pill mb-4">-</span>
                    @endif

                    <div class="d-flex justify-content-center mb-4">
                        @if($calonSiswa->status_verifikasi == 'verified')
                            <span class="badge bg-light-success text-success px-3 py-2 rounded-pill font-weight-bold border-0">
                                <i class="fas fa-check-circle mr-1"></i> TERVERIFIKASI
                            </span>
                        @elseif($calonSiswa->status_verifikasi == 'rejected')
                            <span class="badge bg-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold border-0">
                                <i class="fas fa-times-circle mr-1"></i> DITOLAK
                            </span>
                        @else
                            <span class="badge bg-light-warning text-warning px-3 py-2 rounded-pill font-weight-bold border-0">
                                <i class="fas fa-clock mr-1"></i> MENUNGGU
                            </span>
                        @endif
                    </div>

                    <div class="bg-light rounded p-3 text-left">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">No. Daftar</span>
                            <span class="text-dark font-weight-bold text-sm">{{ $calonSiswa->no_daftar }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">NIK</span>
                            <span class="text-dark font-weight-bold text-sm">{{ $calonSiswa->nik }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">WhatsApp</span>
                            <span class="text-dark font-weight-bold text-sm">
                                {{ $calonSiswa->no_wa_ortu ?? '-' }}
                                @if($calonSiswa->no_wa_ortu)
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $calonSiswa->no_wa_ortu) }}" target="_blank" class="text-success ml-1"><i class="fab fa-whatsapp"></i></a>
                                @endif
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card Keputusan Akhir (Hanya jika Verified) --}}
            @if($calonSiswa->status_verifikasi == 'verified')
            <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h6 class="font-weight-bold text-dark mb-0"><i class="fas fa-gavel text-purple mr-2"></i> Keputusan Akhir</h6>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.ppdb.graduation', $calonSiswa->id) }}" method="POST">
                        @csrf
                        <div class="form-group mb-3">
                            <label class="text-xs text-muted font-weight-bold text-uppercase">Status Kelulusan</label>
                            <select name="status_kelulusan" class="form-control form-control-solid select2-bs4">
                                <option value="proses" {{ $calonSiswa->status_kelulusan == 'proses' ? 'selected' : '' }}>⏳ Dalam Proses</option>
                                <option value="lulus" {{ $calonSiswa->status_kelulusan == 'lulus' ? 'selected' : '' }}>✅ LULUS</option>
                                <option value="cadangan" {{ $calonSiswa->status_kelulusan == 'cadangan' ? 'selected' : '' }}>⚠️ CADANGAN</option>
                                <option value="tidak_lulus" {{ $calonSiswa->status_kelulusan == 'tidak_lulus' ? 'selected' : '' }}>❌ TIDAK LULUS</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-success btn-block rounded-pill font-weight-bold shadow-sm hover-lift">
                            <i class="fas fa-save mr-2"></i> Simpan Keputusan
                        </button>
                    </form>
                </div>
            </div>
            @endif

        </div>

        {{-- KOLOM KANAN: TABS INFORMASI --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <ul class="nav nav-pills nav-fill bg-light rounded p-1" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active font-weight-bold rounded-pill" id="pills-berkas-tab" data-toggle="pill" href="#pills-berkas" role="tab">
                                <i class="fas fa-file-alt mr-2"></i> Pemeriksaan Berkas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold rounded-pill" id="pills-biodata-tab" data-toggle="pill" href="#pills-biodata" role="tab">
                                <i class="fas fa-user mr-2"></i> Biodata & Jalur
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body p-4">
                    <div class="tab-content" id="pills-tabContent">
                        
                        {{-- TAB 1: BERKAS --}}
                        <div class="tab-pane fade show active" id="pills-berkas" role="tabpanel">
                            <div class="alert bg-light-primary border-0 rounded-lg d-flex align-items-center p-3 mb-4">
                                <i class="fas fa-info-circle text-primary fa-lg mr-3"></i>
                                <div>
                                    <h6 class="font-weight-bold text-primary mb-0">Instruksi Verifikasi</h6>
                                    <small class="text-dark opacity-75">Periksa keabsahan dokumen fisik di bawah ini sebelum mengambil keputusan.</small>
                                </div>
                            </div>

                            <div class="table-responsive mb-4">
                                <table class="table table-hover align-middle mb-0 w-100">
                                    <thead class="bg-light">
                                        <tr class="text-uppercase text-muted text-xs font-weight-bold">
                                            <th class="border-0 pl-3">Dokumen Wajib & Jalur</th>
                                            <th class="border-0 text-center">Preview</th>
                                            <th class="border-0 text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- DOKUMEN WAJIB --}}
                                        <tr>
                                            <td class="pl-3 font-weight-bold text-dark text-sm">
                                                <i class="fas fa-users text-muted mr-2"></i> Kartu Keluarga
                                            </td>
                                            <td class="text-center">
                                                @if($calonSiswa->getDoc('kk'))
                                                    <a href="{{ $calonSiswa->getDoc('kk') }}" target="_blank" class="btn btn-icon btn-light-primary text-primary btn-sm rounded-circle shadow-sm hover-lift" title="Lihat File"><i class="fas fa-eye"></i></a>
                                                @else
                                                    <span class="badge bg-light-danger text-danger">Kosong</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                {!! $calonSiswa->getDoc('kk') ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-times-circle text-danger"></i>' !!}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pl-3 font-weight-bold text-dark text-sm">
                                                <i class="fas fa-book text-muted mr-2"></i> Rapor Terakhir
                                            </td>
                                            <td class="text-center">
                                                @if($calonSiswa->getDoc('rapor'))
                                                    <a href="{{ $calonSiswa->getDoc('rapor') }}" target="_blank" class="btn btn-icon btn-light-primary text-primary btn-sm rounded-circle shadow-sm hover-lift" title="Lihat File"><i class="fas fa-eye"></i></a>
                                                @else
                                                    <span class="badge bg-light-danger text-danger">Kosong</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                {!! $calonSiswa->getDoc('rapor') ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-times-circle text-danger"></i>' !!}
                                            </td>
                                        </tr>

                                       {{-- DOKUMEN KHUSUS JALUR --}}
                                        @if($calonSiswa->jalur_pendaftaran == 'afirmasi')
                                        @php 
                                            // Cek beberapa kemungkinan nama file di database
                                            $docAfirmasi = $calonSiswa->getDoc('sktm') ?? $calonSiswa->getDoc('kip') ?? $calonSiswa->getDoc('afirmasi') ?? $calonSiswa->getDoc('kip_sktm'); 
                                        @endphp
                                        <tr>
                                            <td class="pl-3 font-weight-bold text-success text-sm">
                                                <i class="fas fa-hands-helping mr-2"></i> KIP / SKTM (Jalur Afirmasi)
                                            </td>
                                            <td class="text-center">
                                                @if($docAfirmasi)
                                                    <a href="{{ $docAfirmasi }}" target="_blank" class="btn btn-icon btn-light-success text-success btn-sm rounded-circle shadow-sm hover-lift" title="Lihat File"><i class="fas fa-eye"></i></a>
                                                @else
                                                    <span class="badge bg-light-danger text-danger">Kosong</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                {!! $docAfirmasi ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-times-circle text-danger"></i>' !!}
                                            </td>
                                        </tr>
                                        @endif
                                        @if($calonSiswa->jalur_pendaftaran == 'prestasi')
                                        <tr>
                                            <td class="pl-3 font-weight-bold text-warning text-sm">
                                                <i class="fas fa-medal mr-2"></i> Sertifikat (Jalur Prestasi)
                                            </td>
                                            <td class="text-center">
                                                @if($calonSiswa->getDoc('prestasi'))
                                                    <a href="{{ $calonSiswa->getDoc('prestasi') }}" target="_blank" class="btn btn-icon btn-light-warning text-warning btn-sm rounded-circle shadow-sm hover-lift" title="Lihat File"><i class="fas fa-eye"></i></a>
                                                @else
                                                    <span class="badge bg-light-danger text-danger">Kosong</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                {!! $calonSiswa->getDoc('prestasi') ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-times-circle text-danger"></i>' !!}
                                            </td>
                                        </tr>
                                        @endif

                                        @if($calonSiswa->jalur_pendaftaran == 'perpindahan')
                                        <tr>
                                            <td class="pl-3 font-weight-bold text-purple text-sm">
                                                <i class="fas fa-briefcase mr-2"></i> Surat Pindah Tugas Orang Tua
                                            </td>
                                            <td class="text-center">
                                                @if($calonSiswa->getDoc('pindah_tugas'))
                                                    <a href="{{ $calonSiswa->getDoc('pindah_tugas') }}" target="_blank" class="btn btn-icon btn-light-purple text-purple btn-sm rounded-circle shadow-sm hover-lift" title="Lihat File"><i class="fas fa-eye"></i></a>
                                                @else
                                                    <span class="badge bg-light-danger text-danger">Kosong</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                {!! $calonSiswa->getDoc('pindah_tugas') ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-times-circle text-danger"></i>' !!}
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                            <div class="separator separator-dashed my-4"></div>

                            <h6 class="font-weight-bold text-dark mb-3">Form Verifikasi</h6>
                            <form action="{{ route('admin.ppdb.verify', $calonSiswa->id) }}" method="POST">
                                @csrf
                                <div class="form-group mb-3">
                                    <label class="text-xs text-muted font-weight-bold text-uppercase">Catatan Verifikator</label>
                                    <textarea name="catatan_verifikator" class="form-control form-control-solid" rows="3" 
                                              placeholder="Tulis alasan jika menolak berkas (misal: Foto KK buram)...">{{ $calonSiswa->catatan_verifikator }}</textarea>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <button type="submit" name="status_verifikasi" value="verified" 
                                                class="btn btn-success btn-block rounded-pill font-weight-bold py-2 shadow-sm hover-lift">
                                            <i class="fas fa-check-circle mr-2"></i> Terima Berkas
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="submit" name="status_verifikasi" value="rejected" 
                                                class="btn btn-danger btn-block rounded-pill font-weight-bold py-2 shadow-sm hover-lift" 
                                                onclick="return confirm('Yakin menolak berkas ini?')">
                                            <i class="fas fa-times-circle mr-2"></i> Tolak / Revisi
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- TAB 2: BIODATA & JALUR --}}
                        <div class="tab-pane fade" id="pills-biodata" role="tabpanel">
                            
                            {{-- HIGHLIGHT JALUR --}}
                            <div class="alert bg-light-info border-0 rounded-lg p-3 mb-4">
                                <div class="row align-items-center">
                                    <div class="col-sm-4 text-xs font-weight-bold text-uppercase text-info mb-2 mb-sm-0">
                                        Jalur Pendaftaran
                                    </div>
                                    <div class="col-sm-8 font-weight-bold text-uppercase text-info">
                                        <i class="fas fa-route mr-1"></i> {{ $calonSiswa->jalur_pendaftaran ?? 'UMUM' }}
                                    </div>
                                </div>
                                
                                @if($calonSiswa->jalur_pendaftaran == 'zonasi')
                                <div class="row align-items-center mt-2 pt-2 border-top border-info">
                                    <div class="col-sm-4 text-xs font-weight-bold text-uppercase text-info mb-2 mb-sm-0">
                                        Jarak ke Sekolah
                                    </div>
                                    <div class="col-sm-8 font-weight-bold text-dark">
                                        {{ $calonSiswa->jarak_ke_sekolah ? $calonSiswa->jarak_ke_sekolah . ' KM' : 'Tidak Terdeteksi' }}
                                        @if($calonSiswa->latitude)
                                            <a href="http://googleusercontent.com/maps.google.com/3{{ $calonSiswa->latitude }},{{ $calonSiswa->longitude }}" target="_blank" class="btn btn-xs btn-info ml-2 rounded-pill shadow-sm"><i class="fas fa-map-marker-alt mr-1"></i> Buka Peta</a>
                                        @endif
                                    </div>
                                </div>
                                @endif
                            </div>

                            {{-- Peringatan jika biodata belum diisi --}}
                            @if(!$calonSiswa->biodata)
                                <div class="alert alert-warning border-0 rounded-lg p-3 mb-4 text-dark shadow-sm">
                                    <i class="fas fa-exclamation-triangle text-warning mr-2"></i> 
                                    <strong>Peringatan:</strong> Calon siswa ini belum menyimpan formulir biodata. Data di bawah ini mungkin kosong.
                                </div>
                            @endif

                            {{-- FORM-STYLE DATA PRIBADI --}}
                            <div class="form-group row mb-2 mt-4">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Nama Lengkap</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->nama_lengkap ?? $calonSiswa->nama_lengkap ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Jenis Kelamin</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->jenis_kelamin == 'L' ? 'Laki-laki' : ($calonSiswa->biodata?->jenis_kelamin == 'P' ? 'Perempuan' : '-') }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Tempat, Tanggal Lahir</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->tempat_lahir ?? '-' }}, {{ $calonSiswa->biodata?->tanggal_lahir ? \Carbon\Carbon::parse($calonSiswa->biodata->tanggal_lahir)->translatedFormat('d F Y') : '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Agama</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->agama ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">NIK</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->nik ?? $calonSiswa->nik ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Asal Sekolah</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->asal_sekolah ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2 bg-light-purple rounded p-2">
                                <label class="col-sm-4 col-form-label text-purple text-xs font-weight-bold text-uppercase mb-0">Sekolah Tujuan</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-purple mb-0 pt-2">
                                        {{ $calonSiswa->sekolah->nama_sekolah ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Gelombang Pendaftaran</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->wave->nama_gelombang ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="separator separator-dashed my-4"></div>
                            <h6 class="font-weight-bold text-purple mb-3"><i class="fas fa-map-marked-alt mr-2"></i>Alamat Lengkap</h6>
                            
                            <div class="form-group row mb-2">
                                <div class="col-sm-12">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->alamat_lengkap ?? '-' }}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Desa / Kec / Kab</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->desa_kelurahan ?? '-' }} / {{ $calonSiswa->biodata?->kecamatan ?? '-' }} / {{ $calonSiswa->biodata?->kabupaten_kota ?? '-' }}
                                    </div>
                                </div>
                            </div>

                            <div class="separator separator-dashed my-4"></div>
                            <h6 class="font-weight-bold text-purple mb-3"><i class="fas fa-user-tie mr-2"></i>Data Orang Tua / Wali</h6>

                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Nama Ayah</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->nama_ayah ?? '-' }}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">Nama Ibu</label>
                                <div class="col-sm-8">
                                    <div class="font-weight-bold text-dark border-bottom border-light pb-1 pt-2">
                                        {{ $calonSiswa->biodata?->nama_ibu ?? '-' }}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label class="col-sm-4 col-form-label text-muted text-xs font-weight-bold text-uppercase">No. WhatsApp Wali</label>
                                <div class="col-sm-8 d-flex align-items-center border-bottom border-light pb-1 pt-2">
                                    <div class="font-weight-bold text-dark flex-grow-1">
                                        {{ $calonSiswa->biodata?->whatsapp_wali ?? $calonSiswa->no_wa_ortu ?? '-' }}
                                    </div>
                                    @if(isset($calonSiswa->biodata->whatsapp_wali) || $calonSiswa->no_wa_ortu)
                                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $calonSiswa->biodata?->whatsapp_wali ?? $calonSiswa->no_wa_ortu) }}" target="_blank" class="btn btn-xs btn-success ml-2 rounded-pill"><i class="fab fa-whatsapp mr-1"></i> Chat</a>
                                    @endif
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    .bg-gradient-purple { background: linear-gradient(135deg, #5B247A 0%, #2E1451 100%); }
    
    /* Colors */
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    .bg-light-primary { background-color: #E1F0FF !important; }
    .text-primary { color: #3699FF !important; }
    .bg-light-info { background-color: #E8F8FE !important; }
    .text-info { color: #00bcd4 !important; }
    
    /* Form Inputs */
    .form-control-solid {
        background-color: #F5F8FA; border-color: #F5F8FA; color: #5E6278; border-radius: 10px;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; box-shadow: none; }
    .form-control-plaintext { padding-left: 0; outline: none; }

    /* Nav Pills */
    .nav-pills .nav-link { color: #5E6278; background-color: transparent; transition: all 0.3s; }
    .nav-pills .nav-link.active { background-color: white; color: #5B247A; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

    /* Hover Lift */
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    
    .btn-icon {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('.select2-bs4').select2({
            theme: 'bootstrap4',
            width: '100%'
        });
    });
</script>
@stop