@extends('layouts.app')

@section('title', 'Repayment Schedule - ' . $loan->loan_number)

@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-calendar-alt me-2 text-primary"></i>Repayment Schedule</h1>
                    <p class="text-muted mb-0">Loan Number: {{ $loan->loan_number }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to Loan
                    </a>
                    <button onclick="window.print()" class="btn btn-outline-info">
                        <i class="fas fa-print me-1"></i>Print
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    <!-- Loan Summary -->
                    <div class="section-wrapper mb-4">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <h5>Loan Summary</h5>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">Client</label>
                                    <div class="info-value">
                                        <i class="fas fa-user me-1 text-primary"></i>
                                        {{ $loan->client->first_name }} {{ $loan->client->last_name }}
                                    </div>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">Loan Amount</label>
                                    <div class="info-value text-success">
                                        <i class="fas fa-dollar-sign me-1"></i>
                                        ${{ number_format($loan->amount, 2) }}
                                    </div>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">Outstanding Balance</label>
                                    <div class="info-value text-primary fw-bold">
                                        <i class="fas fa-money-bill-wave me-1"></i>
                                        ${{ number_format($loan->outstanding_balance, 2) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">Interest Rate</label>
                                    <div class="info-value">
                                        <i class="fas fa-percentage me-1 text-primary"></i>
                                        {{ $loan->interest_rate }}%
                                    </div>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">Loan Term</label>
                                    <div class="info-value">
                                        <i class="fas fa-calendar me-1 text-primary"></i>
                                        {{ $loan->duration_months }} months
                                    </div>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">Monthly Payment</label>
                                    <div class="info-value">
                                        <i class="fas fa-credit-card me-1 text-primary"></i>
                                        ${{ number_format($loan->monthly_payment, 2) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Progress Overview -->
                    <div class="section-wrapper mb-4">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h5>Progress Overview</h5>
                        </div>
                        @php
                            $totalPaid = $loan->repayments->sum('amount');
                            $progressPercentage = $loan->total_repayment > 0 ? ($totalPaid / $loan->total_repayment) * 100 : 0;
                        @endphp
                        <div class="progress-overview">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="progress-label">Repayment Progress</span>
                                <span class="progress-percentage">{{ number_format($progressPercentage, 1) }}%</span>
                            </div>
                            <div class="progress-bar-large">
                                <div class="progress-fill" style="width: {{ $progressPercentage }}%"></div>
                            </div>
                            <div class="progress-stats mt-3">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <div class="stat-item">
                                            <div class="stat-number text-success">${{ number_format($totalPaid, 2) }}</div>
                                            <div class="stat-label">Total Paid</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-item">
                                            <div class="stat-number text-primary">${{ number_format($loan->outstanding_balance, 2) }}</div>
                                            <div class="stat-label">Outstanding</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-item">
                                            <div class="stat-number">${{ number_format($loan->total_repayment, 2) }}</div>
                                            <div class="stat-label">Total Repayment</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-item">
                                            <div class="stat-number">{{ $loan->duration_months }}</div>
                                            <div class="stat-label">Total Months</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Statistics -->
                    @php
                        $paidCount = 0;
                        $dueCount = 0;
                        $overdueCount = 0;
                        $pendingCount = 0;

                        foreach ($schedule as $installment) {
                            if ($installment['status'] === 'paid') $paidCount++;
                            elseif ($installment['status'] === 'due') $dueCount++;
                            elseif ($installment['status'] === 'overdue') $overdueCount++;
                            else $pendingCount++;
                        }

                        $paymentStats = [
                            'paid_count' => $paidCount,
                            'due_count' => $dueCount,
                            'overdue_count' => $overdueCount,
                            'pending_count' => $pendingCount
                        ];
                    @endphp

                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stats-card card border-success">
                                <div class="card-body text-center py-3">
                                    <div class="stats-icon text-success">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <h4 class="stats-number text-success mb-1">{{ $paymentStats['paid_count'] }}</h4>
                                    <p class="stats-label text-muted mb-0">Paid</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card card border-warning">
                                <div class="card-body text-center py-3">
                                    <div class="stats-icon text-warning">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <h4 class="stats-number text-warning mb-1">{{ $paymentStats['due_count'] }}</h4>
                                    <p class="stats-label text-muted mb-0">Due</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card card border-danger">
                                <div class="card-body text-center py-3">
                                    <div class="stats-icon text-danger">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <h4 class="stats-number text-danger mb-1">{{ $paymentStats['overdue_count'] }}</h4>
                                    <p class="stats-label text-muted mb-0">Overdue</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card card border-info">
                                <div class="card-body text-center py-3">
                                    <div class="stats-icon text-info">
                                        <i class="fas fa-calendar"></i>
                                    </div>
                                    <h4 class="stats-number text-info mb-1">{{ $paymentStats['pending_count'] }}</h4>
                                    <p class="stats-label text-muted mb-0">Pending</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Repayment Schedule Table -->
                    <div class="section-wrapper">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-table"></i>
                            </div>
                            <h5>Repayment Schedule</h5>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover repayment-table">
                                <thead class="table-success">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th>Due Date</th>
                                        <th class="text-end">Principal</th>
                                        <th class="text-end">Interest</th>
                                        <th class="text-end">Total Due</th>
                                        <th class="text-end">Amount Paid</th>
                                        <th class="text-end">Balance</th>
                                        <th class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $runningBalance = $loan->amount;
                                        $totalPrincipal = 0;
                                        $totalInterest = 0;
                                        $totalDue = 0;
                                        $totalPaid = 0;
                                    @endphp
                                    @foreach($schedule as $installment)
                                        @php
                                            $principal = $loan->total_repayment > 0 ? $installment['due_amount'] * ($loan->amount / $loan->total_repayment) : 0;
                                            $interest = $installment['due_amount'] - $principal;
                                            $dueAmount = $installment['due_amount'];
                                            $paidAmount = $installment['paid_amount'];
                                            $balance = $dueAmount - $paidAmount;

                                            $totalPrincipal += $principal;
                                            $totalInterest += $interest;
                                            $totalDue += $dueAmount;
                                            $totalPaid += $paidAmount;
                                        @endphp
                                        <tr class="repayment-row {{ $installment['status'] === 'overdue' ? 'row-overdue' :
                                                   ($installment['status'] === 'paid' ? 'row-paid' :
                                                   ($installment['status'] === 'due' ? 'row-due' : 'row-pending')) }}">
                                            <td class="text-center fw-bold">{{ $installment['installment_number'] }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-calendar-day text-primary me-2"></i>
                                                    <div>
                                                        <div class="fw-semibold">{{ $installment['due_date']->format('M d, Y') }}</div>
                                                        <small class="text-muted">{{ $installment['due_date']->diffForHumans() }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-end">${{ number_format($principal, 2) }}</td>
                                            <td class="text-end">${{ number_format($interest, 2) }}</td>
                                            <td class="text-end fw-bold text-dark">${{ number_format($dueAmount, 2) }}</td>
                                            <td class="text-end fw-bold text-success">
                                                ${{ number_format($paidAmount, 2) }}
                                            </td>
                                            <td class="text-end">
                                                @if($balance > 0)
                                                    <span class="balance-amount text-danger">${{ number_format($balance, 2) }}</span>
                                                @else
                                                    <span class="balance-amount text-success">$0.00</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <span class="status-badge status-{{ $installment['status'] }}">
                                                    <i class="fas fa-circle me-1"></i>
                                                    {{ ucfirst($installment['status']) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="2" class="fw-bold text-dark">Totals</td>
                                        <td class="text-end fw-bold text-dark">${{ number_format($totalPrincipal, 2) }}</td>
                                        <td class="text-end fw-bold text-dark">${{ number_format($totalInterest, 2) }}</td>
                                        <td class="text-end fw-bold text-success">${{ number_format($totalDue, 2) }}</td>
                                        <td class="text-end fw-bold text-success">${{ number_format($totalPaid, 2) }}</td>
                                        <td class="text-end fw-bold {{ ($totalDue - $totalPaid) > 0 ? 'text-danger' : 'text-success' }}">
                                            ${{ number_format($totalDue - $totalPaid, 2) }}
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Legend -->
                    <div class="section-wrapper mt-4">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <h5>Status Legend</h5>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="legend-container">
                                    <div class="legend-item">
                                        <span class="legend-color bg-success"></span>
                                        <span class="legend-text">Paid - Payment completed successfully</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color bg-warning"></span>
                                        <span class="legend-text">Due - Payment is currently due</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color bg-danger"></span>
                                        <span class="legend-text">Overdue - Payment is past due date</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color bg-info"></span>
                                        <span class="legend-text">Pending - Future payment</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-green: #198754;
    --primary-green-light: #d1e7dd;
    --primary-green-dark: #146c43;
    --accent-yellow: #ffc107;
    --accent-yellow-light: #fff3cd;
    --success-green: #198754;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --info-blue: #0dcaf0;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

/* 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;
    margin-bottom: 0.5rem;
}

.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-outline-info {
    border: 2px solid var(--info-blue);
    color: var(--info-blue);
}

.action-buttons-nav .btn-outline-info:hover {
    background: var(--info-blue);
    color: white;
    transform: translateY(-1px);
}

/* 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;
}

/* 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: 2px solid var(--primary-green);
}

.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 Items */
.info-item {
    margin-bottom: 1rem;
}

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

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

/* Progress Overview */
.progress-overview {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.progress-label {
    font-weight: 600;
    color: var(--gray-700);
}

.progress-percentage {
    font-weight: 700;
    color: var(--primary-green);
    font-size: 1.1rem;
}

.progress-bar-large {
    height: 12px;
    background: var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--primary-green);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-stats .stat-item {
    padding: 0.5rem;
}

.stat-number {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Stats Cards */
.stats-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: white;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.stats-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.stats-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stats-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Table Styles */
.repayment-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.repayment-table thead th {
    background: var(--primary-green);
    color: white;
    border: none;
    font-weight: 600;
    padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.85rem;
}

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

.repayment-row:hover {
    background: var(--gray-50);
    transform: scale(1.002);
    transition: all 0.2s ease;
}

.row-paid {
    background: var(--primary-green-light);
}

.row-due {
    background: var(--accent-yellow-light);
}

.row-overdue {
    background: #ffe6e6;
}

.row-pending {
    background: white;
}

.balance-amount {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-paid {
    background: var(--primary-green);
    color: white;
    border: 1px solid var(--primary-green-dark);
}

.status-due {
    background: var(--accent-yellow);
    color: #000;
    border: 1px solid #e6a700;
}

.status-overdue {
    background: var(--danger-red);
    color: white;
    border: 1px solid #c82333;
}

.status-pending {
    background: var(--info-blue);
    color: white;
    border: 1px solid #0ba8d1;
}

/* Legend */
.legend-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

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

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.75rem;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-text {
    font-size: 0.9rem;
    color: var(--gray-700);
    font-weight: 500;
}

/* Print Styles */
@media print {
    body {
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #000 !important;
        background: white !important;
    }

    .navigation-bar,
    .action-buttons-nav,
    .btn,
    .horizontal-menu,
    .navbar,
    .alert,
    .footer {
        display: none !important;
    }

    .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card-body {
        padding: 20px !important;
    }

    .section-wrapper {
        border: 1px solid #666 !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid !important;
    }

    .section-header {
        background: #f8f9fa !important;
        border-bottom: 1px solid #666 !important;
        padding: 10px 15px !important;
        margin: -15px -15px 15px -15px !important;
    }

    .section-header h5 {
        font-size: 16px !important;
        font-weight: bold !important;
        margin: 0 !important;
        color: #000 !important;
    }

    .info-item {
        margin-bottom: 8px !important;
    }

    .info-label {
        font-weight: bold !important;
        font-size: 11px !important;
        color: #666 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .info-value {
        font-size: 12px !important;
        color: #000 !important;
        margin-top: 2px !important;
    }

    .progress-overview,
    .stats-card {
        background: white !important;
        border: 1px solid #ddd !important;
        margin-bottom: 15px !important;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .repayment-table {
        font-size: 11px !important;
        margin: 0 !important;
    }

    .repayment-table th,
    .repayment-table td {
        padding: 6px 8px !important;
        border: 1px solid #000 !important;
        vertical-align: top !important;
    }

    .repayment-table thead th {
        background: #f8f9fa !important;
        font-weight: bold !important;
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #000 !important;
    }

    .repayment-table tbody td {
        font-size: 10px !important;
    }

    .repayment-table tfoot td {
        font-weight: bold !important;
        background: #f8f9fa !important;
    }

    .status-badge {
        padding: 2px 6px !important;
        font-size: 9px !important;
        border-radius: 3px !important;
        display: inline-block !important;
    }

    .legend-container {
        display: flex !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
    }

    .legend-item {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 5px !important;
        border: 1px solid #ddd !important;
        padding: 5px 10px !important;
        background: white !important;
    }

    .legend-color {
        width: 12px !important;
        height: 12px !important;
        margin-right: 8px !important;
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .legend-color.bg-success {
        background: #198754 !important;
    }

    .legend-color.bg-warning {
        background: #ffc107 !important;
    }

    .legend-color.bg-danger {
        background: #dc3545 !important;
    }

    .legend-color.bg-info {
        background: #0dcaf0 !important;
    }

    .legend-text {
        font-size: 10px !important;
        color: #000 !important;
        margin: 0 !important;
    }

    .stat-number {
        font-size: 14px !important;
        font-weight: bold !important;
    }

    .stat-label {
        font-size: 10px !important;
        color: #666 !important;
    }

    /* Page breaks */
    .section-wrapper {
        page-break-inside: avoid !important;
    }

    .repayment-table {
        page-break-inside: auto !important;
    }

    .repayment-table tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    .repayment-table thead {
        display: table-header-group !important;
    }

    .repayment-table tfoot {
        display: table-footer-group !important;
    }

    /* Ensure proper page margins */
    @page {
        margin: 0.5in !important;
        size: A4 !important;
    }
}

/* Responsive Design */
@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;
    }

    .section-wrapper {
        padding: 1rem;
    }

    .stats-card .card-body {
        padding: 1rem;
    }

    .legend-container {
        grid-template-columns: 1fr;
    }

    .repayment-table {
        font-size: 0.8rem;
    }

    .repayment-table thead th,
    .repayment-table tbody td {
        padding: 0.5rem;
    }
}
</style>
@endsection