@extends('layouts/layoutMaster')

@section('title', 'Laporan Arus Kas')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/select2/select2.js'
])
@endsection

@section('page-script')
@vite('Modules/Akuntansi/resources/assets/js/cashflow-report.js')
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <!-- Header Section -->
        <div class="card-header">
            <div class="row justify-content-between align-items-center mb-3">
                <div class="col-12 col-md-6">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar bg-label-primary rounded p-2">
                            <i class="ri-exchange-funds-line"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">{{ $company->company_name }}</h5>
                            <small class="text-muted">
                                Periode: {{ \Carbon\Carbon::parse($startDate)->format('d/m/Y') }} -
                                {{ \Carbon\Carbon::parse($endDate)->format('d/m/Y') }}
                            </small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 text-md-end mt-3 mt-md-0">
                    <div class="btn-group me-2">
                        <button onclick="expandAll()" class="btn btn-outline-primary">
                            <i class="ri-expand-height-line me-1"></i>
                            Expand Semua
                        </button>
                        <button onclick="collapseAll()" class="btn btn-outline-primary">
                            <i class="ri-contract-left-right-line me-1"></i>
                            Collapse Semua
                        </button>
                    </div>
                    {{-- <button onclick="exportToExcel()" class="btn btn-primary">
                        <i class="ri-file-excel-2-line me-1"></i>
                        Ekspor Excel
                    </button> --}}
                </div>
            </div>

            <!-- Filter Section -->
            <div class="row g-3 mt-3">
                <div class="col-12 col-md-4">
                    <div class="form-floating form-floating-outline">
                        <select id="branch" class="form-select select2" onchange="applyFilters()">
                            <option value="">Semua Cabang</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}"
                                    {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}
                                </option>
                            @endforeach
                        </select>
                        <label>Lokasi Cabang</label>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="form-floating form-floating-outline">
                        <input type="date" id="start_date" class="form-control"
                            value="{{ $startDate }}" onchange="applyFilters()">
                        <label>Tanggal Mulai</label>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="form-floating form-floating-outline">
                        <input type="date" id="end_date" class="form-control"
                            value="{{ $endDate }}" onchange="applyFilters()">
                        <label>Tanggal Akhir</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
            <!-- Summary Cards -->
            <div class="row g-4 mb-4">
                <!-- Beginning Balance Card -->
                <div class="col-12 col-md-3">
                    <div class="card bg-info bg-opacity-10 border-0 h-100 summary-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar bg-info bg-opacity-10 p-2 rounded me-3">
                                    <i class="ri-calendar-check-line ri-xl text-info"></i>
                                </div>
                                <div>
                                    <p class="card-text mb-0">Saldo Awal</p>
                                    <h4 class="card-title mb-0 text-info">
                                        {{ rupiah_format($beginningCashBalance, 0, ',', '.') }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Net Change Card -->
                <div class="col-12 col-md-3">
                    <div class="card {{ $netChange >= 0 ? 'bg-success' : 'bg-danger' }} bg-opacity-10 border-0 h-100 summary-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar {{ $netChange >= 0 ? 'bg-success' : 'bg-danger' }} bg-opacity-10 p-2 rounded me-3">
                                    <i class="ri-swap-line ri-xl {{ $netChange >= 0 ? 'text-success' : 'text-danger' }}"></i>
                                </div>
                                <div>
                                    <p class="card-text mb-0">Perubahan Kas</p>
                                    <h4 class="card-title mb-0 {{ $netChange >= 0 ? 'text-success' : 'text-danger' }}">
                                        {{ rupiah_format($netChange, 0, ',', '.') }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ending Balance Card -->
                <div class="col-12 col-md-3">
                    <div class="card bg-warning bg-opacity-10 border-0 h-100 summary-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar bg-warning bg-opacity-10 p-2 rounded me-3">
                                    <i class="ri-calendar-todo-line ri-xl text-warning"></i>
                                </div>
                                <div>
                                    <p class="card-text mb-0">Saldo Akhir</p>
                                    <h4 class="card-title mb-0 text-warning">
                                        {{ rupiah_format($endingCashBalance, 0, ',', '.') }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cash Details Card -->
                <div class="col-12 col-md-3">
                    <div class="card bg-secondary bg-opacity-10 border-0 h-100 summary-card cash-details-card" data-bs-toggle="tooltip" data-bs-title="Klik untuk melihat rincian">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar bg-secondary bg-opacity-10 p-2 rounded me-3">
                                    <i class="ri-bank-line ri-xl text-secondary"></i>
                                </div>
                                <div>
                                    <p class="card-text mb-0">Rincian Kas</p>
                                    <h4 class="card-title mb-0 text-secondary">
                                        {{ $cashAccounts->count() }} Akun
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cash Accounts Details Panel (Hidden by default) -->
            <div class="cash-accounts-panel mb-4 d-none">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Rincian Kas dan Setara Kas</h6>
                        <button type="button" class="btn btn-sm btn-icon close-details">
                            <i class="ri-close-line"></i>
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Akun</th>
                                        <th class="text-end">Saldo Awal</th>
                                        <th class="text-end">Perubahan</th>
                                        <th class="text-end">Saldo Akhir</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cashAccounts as $account)
                                        <tr>
                                            <td>{{ $account->name }}</td>
                                            <td class="text-end">{{ rupiah_format($account->beginning_balance, 0, ',', '.') }}</td>
                                            <td class="text-end {{ $account->change >= 0 ? 'text-success' : 'text-danger' }}">
                                                {{ rupiah_format($account->change, 0, ',', '.') }}
                                            </td>
                                            <td class="text-end">{{ rupiah_format($account->ending_balance, 0, ',', '.') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th>Total</th>
                                        <th class="text-end">{{ rupiah_format($beginningCashBalance, 0, ',', '.') }}</th>
                                        <th class="text-end {{ $netChange >= 0 ? 'text-success' : 'text-danger' }}">
                                            {{ rupiah_format($netChange, 0, ',', '.') }}
                                        </th>
                                        <th class="text-end">{{ rupiah_format($endingCashBalance, 0, ',', '.') }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cash Flow Statement Table -->
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr class="table-active">
                            <th style="min-width: 400px;">DESKRIPSI</th>
                            <th class="text-end" style="min-width: 200px;">JUMLAH</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Operating Activities Section with Monthly Grouping -->
                        <tr class="bg-label-primary bg-opacity-10 section-header">
                            <td colspan="2" class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-primary fw-bold">AKTIVITAS OPERASI</h6>
                            </td>
                        </tr>

                        @if($cashFlowData['operating']['data']->isEmpty())
                            <tr>
                                <td colspan="2" class="text-center text-muted py-3">
                                    Tidak ada data aktivitas operasi pada periode ini
                                </td>
                            </tr>
                        @else
                            @foreach($cashFlowData['operating']['data'] as $monthGroup)
                                <!-- Monthly group row -->
                                <tr data-expandable data-level="1" data-target="operating-month-{{ $loop->index }}" class="level-1">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                <i class="ri-add-line"></i>
                                            </button>
                                            <span class="fw-semibold">{{ $monthGroup['month_name'] }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end {{ $monthGroup['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                        {{ rupiah_format(abs($monthGroup['amount']), 0, ',', '.') }}
                                        <small class="text-muted ms-1">{{ $monthGroup['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                    </td>
                                </tr>

                                <!-- View all link for this month -->
                                <tr class="d-none level-2 bg-light" data-parent="operating-month-{{ $loop->index }}">
                                    <td colspan="2" class="text-end">
                                        <a href="{{ route('cash-flow-month-detail', ['category' => 'operating', 'month' => $monthGroup['month'], 'start_date' => $startDate, 'end_date' => $endDate, 'branch_id' => $branchId]) }}"
                                          class="btn btn-sm btn-outline-primary">
                                          <i class="ri-search-line me-1"></i> Lihat Detail {{ $monthGroup['month_name'] }}
                                        </a>
                                    </td>
                                </tr>

                                <!-- Transaction groups within this month -->
                                @foreach($monthGroup['transactions'] as $item)
                                    <tr class="d-none level-2" data-parent="operating-month-{{ $loop->parent->index }}" data-expandable data-level="2" data-target="operating-month-{{ $loop->parent->index }}-item-{{ $loop->index }}">
                                        <td>
                                            <div class="d-flex align-items-center" style="padding-left: 2rem;">
                                                @if($item['count'] > 1)
                                                    <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                        <i class="ri-add-line"></i>
                                                    </button>
                                                @else
                                                    <span class="ms-4"></span>
                                                @endif
                                                <span class="fw-semibold">{{ $item['description'] }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end {{ $item['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                            {{ rupiah_format(abs($item['amount']), 0, ',', '.') }}
                                            <small class="text-muted ms-1">{{ $item['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                        </td>
                                    </tr>

                                    <!-- Individual transactions (only shown for transaction groups with multiple items) -->
                                    @if($item['count'] > 1 && isset($item['transactions']))
                                        @foreach($item['transactions'] as $transaction)
                                            <tr class="d-none level-3" data-parent="operating-month-{{ $loop->parent->parent->index }}-item-{{ $loop->parent->index }}">
                                                <td>
                                                    <div style="padding-left: 4rem;">
                                                        <span class="text-muted">{{ $transaction['code'] }} - {{ $transaction['description'] }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end text-muted">
                                                    {{ rupiah_format(abs($transaction['amount']), 0, ',', '.') }}
                                                    <small class="text-muted ms-1">{{ $transaction['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                @endforeach
                            @endforeach
                        @endif

                        <!-- Operating Activities Total -->
                        <tr class="bg-primary bg-opacity-10 total-row">
                            <td>
                                <h6 class="mb-0 fw-bold">TOTAL AKTIVITAS OPERASI</h6>
                            </td>
                            <td class="text-end {{ $operatingTotal >= 0 ? 'text-success' : 'text-danger' }}">
                                <h6 class="mb-0 fw-bold">
                                    {{ rupiah_format($operatingTotal, 0, ',', '.') }}
                                </h6>
                            </td>
                        </tr>

                        <!-- Investing Activities Section with Monthly Grouping -->
                        <tr class="bg-label-success bg-opacity-10 section-header">
                            <td colspan="2" class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-success fw-bold">AKTIVITAS INVESTASI</h6>
                            </td>
                        </tr>

                        @if($cashFlowData['investing']['data']->isEmpty())
                            <tr>
                                <td colspan="2" class="text-center text-muted py-3">
                                    Tidak ada data aktivitas investasi pada periode ini
                                </td>
                            </tr>
                        @else
                            @foreach($cashFlowData['investing']['data'] as $monthGroup)
                                <!-- Monthly group row -->
                                <tr data-expandable data-level="1" data-target="investing-month-{{ $loop->index }}" class="level-1">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                <i class="ri-add-line"></i>
                                            </button>
                                            <span class="fw-semibold">{{ $monthGroup['month_name'] }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end {{ $monthGroup['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                        {{ rupiah_format(abs($monthGroup['amount']), 0, ',', '.') }}
                                        <small class="text-muted ms-1">{{ $monthGroup['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                    </td>
                                </tr>

                                <!-- View all link for this month -->
                                <tr class="d-none level-2 bg-light" data-parent="investing-month-{{ $loop->index }}">
                                    <td colspan="2" class="text-end">
                                        <a href="{{ route('cash-flow-month-detail', ['category' => 'investing', 'month' => $monthGroup['month'], 'start_date' => $startDate, 'end_date' => $endDate, 'branch_id' => $branchId]) }}"
                                          class="btn btn-sm btn-outline-success">
                                          <i class="ri-search-line me-1"></i> Lihat Detail {{ $monthGroup['month_name'] }}
                                        </a>
                                    </td>
                                </tr>

                                <!-- Transaction groups within this month -->
                                @foreach($monthGroup['transactions'] as $item)
                                    <tr class="d-none level-2" data-parent="investing-month-{{ $loop->parent->index }}" data-expandable data-level="2" data-target="investing-month-{{ $loop->parent->index }}-item-{{ $loop->index }}">
                                        <td>
                                            <div class="d-flex align-items-center" style="padding-left: 2rem;">
                                                @if($item['count'] > 1)
                                                    <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                        <i class="ri-add-line"></i>
                                                    </button>
                                                @else
                                                    <span class="ms-4"></span>
                                                @endif
                                                <span class="fw-semibold">{{ $item['description'] }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end {{ $item['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                            {{ rupiah_format(abs($item['amount']), 0, ',', '.') }}
                                            <small class="text-muted ms-1">{{ $item['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                        </td>
                                    </tr>

                                    <!-- Individual transactions (only shown for transaction groups with multiple items) -->
                                    @if($item['count'] > 1 && isset($item['transactions']))
                                        @foreach($item['transactions'] as $transaction)
                                            <tr class="d-none level-3" data-parent="investing-month-{{ $loop->parent->parent->index }}-item-{{ $loop->parent->index }}">
                                                <td>
                                                    <div style="padding-left: 4rem;">
                                                        <span class="text-muted">{{ $transaction['code'] }} - {{ $transaction['description'] }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end text-muted">
                                                    {{ rupiah_format(abs($transaction['amount']), 0, ',', '.') }}
                                                    <small class="text-muted ms-1">{{ $transaction['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                @endforeach
                            @endforeach
                        @endif

                        <!-- Investing Activities Total -->
                        <tr class="bg-success bg-opacity-10 total-row">
                            <td>
                                <h6 class="mb-0 fw-bold">TOTAL AKTIVITAS INVESTASI</h6>
                            </td>
                            <td class="text-end {{ $investingTotal >= 0 ? 'text-success' : 'text-danger' }}">
                                <h6 class="mb-0 fw-bold">
                                    {{ rupiah_format($investingTotal, 0, ',', '.') }}
                                </h6>
                            </td>
                        </tr>

                        <!-- Financing Activities Section with Monthly Grouping -->
                        <tr class="bg-label-warning bg-opacity-10 section-header">
                            <td colspan="2" class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-warning fw-bold">AKTIVITAS PENDANAAN</h6>
                            </td>
                        </tr>

                        @if($cashFlowData['financing']['data']->isEmpty())
                            <tr>
                                <td colspan="2" class="text-center text-muted py-3">
                                    Tidak ada data aktivitas pendanaan pada periode ini
                                </td>
                            </tr>
                        @else
                            @foreach($cashFlowData['financing']['data'] as $monthGroup)
                                <!-- Monthly group row -->
                                <tr data-expandable data-level="1" data-target="financing-month-{{ $loop->index }}" class="level-1">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                <i class="ri-add-line"></i>
                                            </button>
                                            <span class="fw-semibold">{{ $monthGroup['month_name'] }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end {{ $monthGroup['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                        {{ rupiah_format(abs($monthGroup['amount']), 0, ',', '.') }}
                                        <small class="text-muted ms-1">{{ $monthGroup['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                    </td>
                                </tr>

                                <!-- View all link for this month -->
                                <tr class="d-none level-2 bg-light" data-parent="financing-month-{{ $loop->index }}">
                                    <td colspan="2" class="text-end">
                                        <a href="{{ route('cash-flow-month-detail', ['category' => 'financing', 'month' => $monthGroup['month'], 'start_date' => $startDate, 'end_date' => $endDate, 'branch_id' => $branchId]) }}"
                                          class="btn btn-sm btn-outline-warning">
                                          <i class="ri-search-line me-1"></i> Lihat Detail {{ $monthGroup['month_name'] }}
                                        </a>
                                    </td>
                                </tr>

                                <!-- Transaction groups within this month -->
                                @foreach($monthGroup['transactions'] as $item)
                                    <tr class="d-none level-2" data-parent="financing-month-{{ $loop->parent->index }}" data-expandable data-level="2" data-target="financing-month-{{ $loop->parent->index }}-item-{{ $loop->index }}">
                                        <td>
                                            <div class="d-flex align-items-center" style="padding-left: 2rem;">
                                                @if($item['count'] > 1)
                                                    <button class="btn btn-xs btn-icon me-2 toggle-btn">
                                                        <i class="ri-add-line"></i>
                                                    </button>
                                                @else
                                                    <span class="ms-4"></span>
                                                @endif
                                                <span class="fw-semibold">{{ $item['description'] }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end {{ $item['amount'] < 0 ? 'text-danger' : 'text-success' }}">
                                            {{ rupiah_format(abs($item['amount']), 0, ',', '.') }}
                                            <small class="text-muted ms-1">{{ $item['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                        </td>
                                    </tr>

                                    <!-- Individual transactions (only shown for transaction groups with multiple items) -->
                                    @if($item['count'] > 1 && isset($item['transactions']))
                                        @foreach($item['transactions'] as $transaction)
                                            <tr class="d-none level-3" data-parent="financing-month-{{ $loop->parent->parent->index }}-item-{{ $loop->parent->index }}">
                                                <td>
                                                    <div style="padding-left: 4rem;">
                                                        <span class="text-muted">{{ $transaction['code'] }} - {{ $transaction['description'] }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end text-muted">
                                                    {{ rupiah_format(abs($transaction['amount']), 0, ',', '.') }}
                                                    <small class="text-muted ms-1">{{ $transaction['amount'] < 0 ? '(-)' : '(+)' }}</small>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                @endforeach
                            @endforeach
                        @endif

                        <!-- Financing Activities Total -->
                        <tr class="bg-warning bg-opacity-10 total-row">
                            <td>
                                <h6 class="mb-0 fw-bold">TOTAL AKTIVITAS PENDANAAN</h6>
                            </td>
                            <td class="text-end {{ $financingTotal >= 0 ? 'text-success' : 'text-danger' }}">
                                <h6 class="mb-0 fw-bold">
                                    {{ rupiah_format($financingTotal, 0, ',', '.') }}
                                </h6>
                            </td>
                        </tr>

                        <!-- Net Increase/Decrease in Cash -->
                        <tr class="table {{ $netChange >= 0 ? 'table-success' : 'table-danger' }}">
                            <td>
                                <h6 class="mb-0 fw-bold">KENAIKAN (PENURUNAN) BERSIH KAS DAN SETARA KAS</h6>
                            </td>
                            <td class="text-end">
                                <h6 class="mb-0 fw-bold">{{ rupiah_format($netChange, 0, ',', '.') }}</h6>
                            </td>
                        </tr>

                        <!-- Beginning Cash Balance -->
                        <tr class="table table-light">
                            <td>
                                <h6 class="mb-0">KAS DAN SETARA KAS AWAL PERIODE</h6>
                            </td>
                            <td class="text-end">
                                <h6 class="mb-0">{{ rupiah_format($beginningCashBalance, 0, ',', '.') }}</h6>
                            </td>
                        </tr>

                        <!-- Ending Cash Balance -->
                        <tr class="table table-primary">
                            <td>
                                <h6 class="mb-0 fw-bold">KAS DAN SETARA KAS AKHIR PERIODE</h6>
                            </td>
                            <td class="text-end">
                                <h6 class="mb-0 fw-bold">{{ rupiah_format($endingCashBalance, 0, ',', '.') }}</h6>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<style>
    .level-1 {
        background-color: rgba(67, 89, 113, 0.02);
    }

    .level-2 {
        background-color: rgba(67, 89, 113, 0.01);
    }

    .level-3 {
        background-color: rgba(67, 89, 113, 0.005);
    }

    /* Level indicators with different colors for each level */
    [data-level="1"] td:first-child {
        border-left: 3px solid #696cff;
    }

    [data-level="2"] td:first-child {
        border-left: 2px solid #03c3ec;
    }

    [data-level="3"] td:first-child {
        border-left: 1px solid #71dd37;
    }

    /* Toggle button styling */
    .toggle-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d9dee3;
        background-color: transparent;
        color: #697a8d;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

    .toggle-btn:hover {
        background-color: rgba(67, 89, 113, 0.04);
        transform: scale(1.1);
    }

    .toggle-btn i {
        transition: transform 0.2s ease;
    }

    /* Expandable row styling */
    [data-expandable]:not(.no-expand) {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .row-hover {
        background-color: rgba(67, 89, 113, 0.04);
    }

    .row-clicked {
        background-color: rgba(67, 89, 113, 0.08);
    }

    /* Section headers */
    .section-header {
        background-color: #f5f5f9;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Total rows */
    .total-row {
        border-top: 2px solid #d9dee3;
        border-bottom: 2px solid #d9dee3;
        font-weight: bold;
    }

    /* Summary cards */
    .summary-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45);
    }

    /* Cash details card */
    .cash-details-card {
        cursor: pointer;
    }

    /* Cash accounts panel animation */
    .cash-accounts-panel {
        transition: all 0.3s ease;
    }

    /* Print optimization */
    @media print {
        .card {
            box-shadow: none !important;
            border: 1px solid #ddd;
        }

        .no-print {
            display: none !important;
        }

        tr.d-none[data-parent] {
            display: table-row !important;
        }

        .toggle-btn {
            display: none !important;
        }

        .cash-accounts-panel {
            display: block !important;
        }
    }
</style>
@endsection