@extends('layouts.app')

@section('title', $client->full_name)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-user me-2"></i>{{ $client->full_name }}</h1>
                    <p class="text-muted mb-0">Client # {{ $client->client_number }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Client Profile Sidebar -->
        <div class="col-lg-4 mb-4">
            <!-- Profile Card -->
            <div class="form-card card">
                <div class="card-body text-center">
                    <!-- Removed avatar section since client photo is shown in KYC documents -->

                    <h3 class="fw-bold mb-2">{{ $client->full_name }}</h3>
                    <p class="text-muted mb-3">{{ $client->client_number }}</p>

                    <div class="mb-4">
                        @if($client->status == 'active')
                            <span class="status-badge badge bg-success">
                                <i class="fas fa-circle me-1"></i>Active
                            </span>
                        @elseif($client->status == 'inactive')
                            <span class="status-badge badge bg-secondary">
                                <i class="fas fa-circle me-1"></i>Inactive
                            </span>
                        @elseif($client->status == 'suspended')
                            <span class="status-badge badge bg-warning">
                                <i class="fas fa-circle me-1"></i>Suspended
                            </span>
                        @else
                            <span class="status-badge badge bg-danger">
                                <i class="fas fa-circle me-1"></i>Blacklisted
                            </span>
                        @endif
                    </div>

                    <!-- KYC Status -->
                    <div class="kyc-status-card mb-4">
                        <div class="kyc-status-header">
                            <i class="fas fa-id-card me-2"></i>
                            <span>KYC Status</span>
                        </div>
                        <div class="kyc-status-value">
                            @if($client->kyc_status == 'approved')
                                <span class="kyc-badge approved">
                                    <i class="fas fa-check me-1"></i>Approved
                                </span>
                            @elseif($client->kyc_status == 'rejected')
                                <span class="kyc-badge rejected">
                                    <i class="fas fa-times me-1"></i>Rejected
                                </span>
                            @else
                                <span class="kyc-badge pending">
                                    <i class="fas fa-clock me-1"></i>Pending
                                </span>
                            @endif
                        </div>
                        <a href="{{ route('clients.show.kyc', $client) }}" class="kyc-action-link">
                            Manage KYC <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>

                    <!-- Quick Actions -->
                    <div class="action-buttons-profile">
                        <a href="tel:{{ $client->phone }}" class="btn-action btn-call" title="Call Client">
                            <i class="fas fa-phone"></i>
                            <span>Call</span>
                        </a>
                        @if($client->email)
                        <a href="mailto:{{ $client->email }}" class="btn-action btn-email" title="Send Email">
                            <i class="fas fa-envelope"></i>
                            <span>Email</span>
                        </a>
                        @endif
                        <a href="{{ route('clients.show.kyc', $client) }}" class="btn-action btn-kyc" title="View KYC">
                            <i class="fas fa-id-card"></i>
                            <span>KYC</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="form-card card mt-4">
                <div class="card-body">
                    <div class="section-header">
                        <div class="icon-wrapper">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h5>Quick Stats</h5>
                    </div>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-icon loan">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ $client->loans->count() }}</div>
                                <div class="stat-label">Total Loans</div>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-icon savings">
                                <i class="fas fa-piggy-bank"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ $client->savingsAccounts->count() }}</div>
                                <div class="stat-label">Savings Accounts</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="form-card card mt-4">
                <div class="card-body">
                    <div class="section-header">
                        <div class="icon-wrapper">
                            <i class="fas fa-address-book"></i>
                        </div>
                        <h5>Contact Info</h5>
                    </div>
                    <div class="contact-info">
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <div>
                                <div class="contact-label">Phone</div>
                                <div class="contact-value">{{ $client->phone }}</div>
                            </div>
                        </div>
                        @if($client->email)
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <div class="contact-label">Email</div>
                                <div class="contact-value">{{ $client->email }}</div>
                            </div>
                        </div>
                        @endif
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <div class="contact-label">Address</div>
                                <div class="contact-value">{{ $client->address }}, {{ $client->city }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-8">
            <div class="form-card card">
                <div class="card-body">
                    <!-- Tabs Navigation -->
                    <div class="tabs-navigation">
                        <div class="nav nav-tabs" id="clientTabs" role="tablist">
                            <button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button" role="tab">
                                <i class="fas fa-user me-2"></i>
                                Personal Info
                            </button>
                            <button class="nav-link" id="loans-tab" data-bs-toggle="tab" data-bs-target="#loans" type="button" role="tab">
                                <i class="fas fa-money-bill-wave me-2"></i>
                                Loans ({{ $client->loans->count() }})
                            </button>
                            <button class="nav-link" id="savings-tab" data-bs-toggle="tab" data-bs-target="#savings" type="button" role="tab">
                                <i class="fas fa-piggy-bank me-2"></i>
                                Savings ({{ $client->savingsAccounts->count() }})
                            </button>
                        </div>
                    </div>

                    <!-- Tabs Content -->
                    <div class="tab-content mt-4" id="clientTabsContent">
                        <!-- Personal Information Tab -->
                        <div class="tab-pane fade show active" id="personal" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="section-wrapper">
                                        <div class="section-header">
                                            <div class="icon-wrapper">
                                                <i class="fas fa-id-card"></i>
                                            </div>
                                            <h5>Personal Details</h5>
                                        </div>
                                        <div class="info-grid">
                                            <div class="info-item">
                                                <label>ID Number</label>
                                                <div class="info-value">{{ $client->id_number }}</div>
                                            </div>
                                            <div class="info-item">
                                                <label>Date of Birth</label>
                                                <div class="info-value">
                                                    {{ $client->date_of_birth->format('M d, Y') }}
                                                    <small class="text-muted">({{ $client->age }} years)</small>
                                                </div>
                                            </div>
                                            <div class="info-item">
                                                <label>Gender</label>
                                                <div class="info-value">{{ ucfirst($client->gender) }}</div>
                                            </div>
                                            <div class="info-item">
                                                <label>Occupation</label>
                                                <div class="info-value">{{ $client->occupation ?? 'Not specified' }}</div>
                                            </div>
                                            <div class="info-item">
                                                <label>Monthly Income</label>
                                                <div class="info-value">
                                                    {{ $client->monthly_income ? 'USD ' . number_format($client->monthly_income, 2) : 'Not specified' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    @if($client->next_of_kin_name)
                                    <div class="section-wrapper">
                                        <div class="section-header">
                                            <div class="icon-wrapper">
                                                <i class="fas fa-users"></i>
                                            </div>
                                            <h5>Next of Kin</h5>
                                        </div>
                                        <div class="info-grid">
                                            <div class="info-item">
                                                <label>Full Name</label>
                                                <div class="info-value">{{ $client->next_of_kin_name }}</div>
                                            </div>
                                            <div class="info-item">
                                                <label>Phone Number</label>
                                                <div class="info-value">{{ $client->next_of_kin_phone }}</div>
                                            </div>
                                            <div class="info-item">
                                                <label>Relationship</label>
                                                <div class="info-value">{{ $client->next_of_kin_relationship }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            @if($client->notes)
                            <div class="section-wrapper">
                                <div class="section-header">
                                    <div class="icon-wrapper">
                                        <i class="fas fa-sticky-note"></i>
                                    </div>
                                    <h5>Additional Notes</h5>
                                </div>
                                <div class="notes-content">
                                    {{ $client->notes }}
                                </div>
                            </div>
                            @endif
                        </div>

                        <!-- Loans Tab -->
                        <div class="tab-pane fade" id="loans" role="tabpanel">
                            @if($client->loans->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover client-table">
                                        <thead>
                                            <tr>
                                                <th>LOAN ID</th>
                                                <th>AMOUNT</th>
                                                <th>TYPE</th>
                                                <th>STATUS</th>
                                                <th>CREATED</th>
                                                <th>ACTIONS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($client->loans as $loan)
                                            <tr>
                                                <td>
                                                    <strong>{{ $loan->loan_number }}</strong>
                                                </td>
                                                <td class="fw-semibold">USD {{ number_format($loan->amount, 2) }}</td>
                                                <td>
                                                    <span class="badge bg-info">{{ ucfirst($loan->loan_type) }}</span>
                                                </td>
                                                <td>
                                                    @if($loan->status == 'approved')
                                                        <span class="status-badge badge bg-success">
                                                            <i class="fas fa-check-circle me-1"></i>Approved
                                                        </span>
                                                    @elseif($loan->status == 'pending')
                                                        <span class="status-badge badge bg-warning">
                                                            <i class="fas fa-clock me-1"></i>Pending
                                                        </span>
                                                    @else
                                                        <span class="status-badge badge bg-secondary">
                                                            <i class="fas fa-times me-1"></i>{{ ucfirst($loan->status) }}
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>{{ $loan->created_at->format('M d, Y') }}</td>
                                                <td>
                                                    <div class="action-buttons-table">
                                                        <a href="#" class="btn-action btn-view" title="View Loan">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="empty-state text-center py-5">
                                    <i class="fas fa-money-bill-wave fa-3x text-muted mb-3"></i>
                                    <h4 class="text-muted">No loans found</h4>
                                    <p class="text-muted mb-3">This client doesn't have any loans yet.</p>
                                    <a href="#" class="btn btn-primary">
                                        <i class="fas fa-plus me-1"></i>Create New Loan
                                    </a>
                                </div>
                            @endif
                        </div>

                        <!-- Savings Tab -->
                        <div class="tab-pane fade" id="savings" role="tabpanel">
                            @if($client->savingsAccounts->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover client-table">
                                        <thead>
                                            <tr>
                                                <th>ACCOUNT NO.</th>
                                                <th>PRODUCT</th>
                                                <th>TYPE</th>
                                                <th>BALANCE</th>
                                                <th>STATUS</th>
                                                <th>ACTIONS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($client->savingsAccounts as $account)
                                            <tr>
                                                <td>
                                                    <strong>{{ $account->account_number }}</strong>
                                                </td>
                                                <td>{{ $account->product_name }}</td>
                                                <td>
                                                    <span class="badge bg-info">{{ ucfirst($account->type) }}</span>
                                                </td>
                                                <td class="fw-semibold">USD {{ number_format($account->current_balance, 2) }}</td>
                                                <td>
                                                    @if($account->status == 'active')
                                                        <span class="status-badge badge bg-success">
                                                            <i class="fas fa-check-circle me-1"></i>Active
                                                        </span>
                                                    @else
                                                        <span class="status-badge badge bg-warning">
                                                            <i class="fas fa-clock me-1"></i>{{ ucfirst($account->status) }}
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="action-buttons-table">
                                                        <a href="{{ route('savings.accounts.show', $account) }}" class="btn-action btn-view" title="View Account">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="empty-state text-center py-5">
                                    <i class="fas fa-piggy-bank fa-3x text-muted mb-3"></i>
                                    <h4 class="text-muted">No savings accounts</h4>
                                    <p class="text-muted mb-3">This client doesn't have any savings accounts yet.</p>
                                    <a href="{{ route('savings.accounts.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus me-1"></i>Create Savings Account
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<!-- CSS styles remain the same -->
<style>
    :root {
        --primary-green: #198754;
        --primary-green-dark: #146c43;
        --accent-yellow: #fbbf24;
        --accent-yellow-light: #fef3c7;
        --success-green: #198754;
        --white: #ffffff;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-900: #111827;
        --danger: #ef4444;
    }

    /* Navigation Bar Styles */
    .navigation-bar {
        background: white;
        padding: 1.5rem 0;
        margin-bottom: 2rem;
        border-bottom: 2px solid var(--gray-200);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .page-title h1 {
        color: var(--gray-900);
        font-weight: 700;
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
    }

    .page-title h1 i {
        color: var(--primary-green);
    }

    .page-title p {
        color: var(--gray-600);
        margin-bottom: 0;
    }

    .action-buttons-nav .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .action-buttons-nav .btn-outline-secondary {
        border: 2px solid var(--gray-300);
        color: var(--gray-700);
    }

    .action-buttons-nav .btn-outline-secondary:hover {
        background: var(--gray-100);
        border-color: var(--gray-400);
        transform: translateY(-1px);
    }

    .action-buttons-nav .btn-primary {
        background: var(--primary-green);
        border: none;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
    }

    .action-buttons-nav .btn-primary:hover {
        background: var(--primary-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(25, 135, 84, 0.35);
    }

    /* Form Card */
    .form-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        border: none;
        overflow: hidden;
    }

    .form-card .card-body {
        padding: 2rem;
    }

    /* Status Badge */
    .status-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
    }

    .status-badge i {
        font-size: 0.5rem;
    }

    /* KYC Status Card */
    .kyc-status-card {
        background: var(--gray-50);
        padding: 1.5rem;
        border-radius: 12px;
        border: 2px solid var(--gray-200);
        margin-bottom: 1.5rem;
    }

    .kyc-status-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--gray-700);
    }

    .kyc-status-header i {
        color: var(--primary-green);
    }

    .kyc-status-value {
        margin-bottom: 1rem;
    }

    .kyc-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .kyc-badge.approved {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .kyc-badge.rejected {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .kyc-badge.pending {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .kyc-action-link {
        display: inline-flex;
        align-items: center;
        color: var(--primary-green);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .kyc-action-link:hover {
        color: var(--primary-green-dark);
        text-decoration: none;
    }

    /* Profile Action Buttons */
    .action-buttons-profile {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
    }

    .btn-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        border: 2px solid var(--gray-200);
        border-radius: 12px;
        text-decoration: none;
        color: var(--gray-700);
        transition: all 0.3s ease;
        min-width: 80px;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    .btn-action i {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .btn-action span {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .btn-call:hover {
        border-color: #10b981;
        color: #10b981;
        background: rgba(16, 185, 129, 0.05);
    }

    .btn-email:hover {
        border-color: #3b82f6;
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }

    .btn-kyc:hover {
        border-color: var(--primary-green);
        color: var(--primary-green);
        background: rgba(25, 135, 84, 0.05);
    }

    /* Stats Grid */
    .stats-grid {
        display: flex;
        gap: 1rem;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
    }

    .stat-icon.loan {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    .stat-icon.savings {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--gray-600);
        margin-top: 0.25rem;
    }

    /* Contact Information */
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .contact-item:hover {
        background: var(--gray-100);
    }

    .contact-item i {
        color: var(--primary-green);
        font-size: 1.125rem;
        margin-top: 0.125rem;
    }

    .contact-label {
        font-size: 0.75rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .contact-value {
        font-weight: 500;
        color: var(--gray-900);
    }

    /* Section Styles */
    .section-wrapper {
        background: var(--gray-50);
        padding: 1.5rem;
        border-radius: 14px;
        border: 2px solid var(--gray-200);
        transition: all 0.3s ease;
    }

    .section-wrapper:hover {
        border-color: var(--primary-green);
        box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12);
    }

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid transparent;
        background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        border-image: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        border-image-slice: 1;
        border-bottom: 3px solid;
    }

    .section-header h5 {
        margin: 0;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-header .icon-wrapper {
        width: 36px;
        height: 36px;
        background: var(--primary-green);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
    }

    /* Info Grid */
    .info-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .info-item label {
        font-weight: 600;
        color: var(--gray-600);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
        display: block;
    }

    .info-value {
        color: var(--gray-900);
        font-weight: 500;
        font-size: 0.95rem;
    }

    /* Notes Content */
    .notes-content {
        background: var(--gray-50);
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid var(--primary-green);
        color: var(--gray-700);
        line-height: 1.6;
    }

    /* Tabs Navigation */
    .tabs-navigation {
        border-bottom: 2px solid var(--gray-200);
    }

    .tabs-navigation .nav-tabs {
        border: none;
        gap: 0.5rem;
    }

    .tabs-navigation .nav-link {
        border: 2px solid transparent;
        border-radius: 10px;
        padding: 1rem 1.5rem;
        font-weight: 600;
        color: var(--gray-600);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
    }

    .tabs-navigation .nav-link:hover {
        border-color: var(--gray-300);
        color: var(--gray-700);
    }

    .tabs-navigation .nav-link.active {
        border-color: var(--primary-green);
        background: rgba(25, 135, 84, 0.05);
        color: var(--primary-green);
    }

    /* Table Styles */
    .client-table {
        margin-bottom: 0;
    }

    .client-table thead th {
        background: var(--gray-50);
        border-bottom: 2px solid var(--gray-200);
        padding: 1rem 0.75rem;
        font-weight: 700;
        color: var(--gray-700);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        vertical-align: middle;
    }

    .client-table tbody td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--gray-100);
    }

    .client-table tbody tr {
        transition: all 0.2s ease;
    }

    .client-table tbody tr:hover {
        background: var(--gray-50);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Action Buttons Table */
    .action-buttons-table {
        display: flex;
        gap: 0.5rem;
    }

    .btn-action-table {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-view {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .btn-view:hover {
        background: #3b82f6;
        color: white;
        transform: translateY(-1px);
    }

    /* KYC Overview */
    .kyc-overview {
        padding: 1rem 0;
    }

    .document-status-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .document-status-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        background: var(--gray-50);
        border-radius: 8px;
        border: 1px solid var(--gray-200);
    }

    .document-status-item.completed {
        border-color: rgba(16, 185, 129, 0.3);
        background: rgba(16, 185, 129, 0.05);
    }

    .document-status-item.pending {
        border-color: rgba(245, 158, 11, 0.3);
        background: rgba(245, 158, 11, 0.05);
    }

    .btn-view-file {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .btn-view-file:hover {
        background: #3b82f6;
        color: white;
        text-decoration: none;
    }

    .verification-badge {
        display: flex;
        align-items: center;
        padding: 1.5rem;
        border-radius: 12px;
        border: 2px solid;
    }

    .verification-badge.approved {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
        color: #059669;
    }

    .verification-badge.rejected {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
        color: #dc2626;
    }

    .verification-badge.pending {
        background: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.3);
        color: #d97706;
    }

    .verification-badge i {
        font-size: 2rem;
        margin-right: 1rem;
    }

    .status-title {
        font-weight: 700;
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .status-date {
        font-size: 0.875rem;
        opacity: 0.8;
    }

    /* Empty State */
    .empty-state {
        padding: 2rem 0;
    }

    .empty-state i {
        opacity: 0.5;
    }

    @media (max-width: 768px) {
        .navigation-bar {
            padding: 1rem 0;
        }

        .page-title h1 {
            font-size: 1.5rem;
        }

        .action-buttons-nav {
            margin-top: 1rem;
        }

        .action-buttons-nav .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .form-card .card-body {
            padding: 1.5rem;
        }

        .stats-grid {
            flex-direction: column;
        }

        .tabs-navigation .nav-link {
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
        }

        .action-buttons-profile {
            flex-wrap: wrap;
        }

        .document-status-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .btn-view-file {
            align-self: flex-end;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tabs
        const triggerTabList = document.querySelectorAll('#clientTabs button')
        triggerTabList.forEach(triggerEl => {
            const tabTrigger = new bootstrap.Tab(triggerEl)
            triggerEl.addEventListener('click', event => {
                event.preventDefault()
                tabTrigger.show()
            })
        });

        // Auto-activate tab based on URL hash
        const urlHash = window.location.hash;
        if (urlHash) {
            const targetTab = document.querySelector(`[data-bs-target="${urlHash}"]`);
            if (targetTab) {
                bootstrap.Tab.getInstance(targetTab).show();
            }
        }
    });
</script>
@endsection