Enhance reports page UI with colorful gradient cards and improved filter layout

- Add gradient backgrounds to summary cards (Total Payin, Total Payout, Total Balance, CAP Redistribution)
- Include circular icon boxes with relevant icons for each metric
- Implement dynamic color for Total Balance (green for positive, red for negative)
- Reorganize filters into compact, collapsible layout with logical grouping
- Add collapsible header with animated chevron icon
- Enhance filter sections with icons and improved spacing
- Add comprehensive CSS styles for gradients, flexbox utilities, and visual effects
- Include JavaScript for smooth collapsible animation with icon rotation

app/templates/base.html

@@ -169,6 +169,146 @@
         .gap-1 {
             gap: 1rem;
         }
+        .gap-2 {
+            gap: 0.5rem;
+        }
+        .flex-shrink-0 {
+            flex-shrink: 0;
+        }
+        .flex-grow-1 {
+            flex-grow: 1;
+        }
+        .ms-3 {
+            margin-left: 1rem;
+        }
+        .me-1 {
+            margin-right: 0.25rem;
+        }
+        .me-2 {
+            margin-right: 0.5rem;
+        }
+        .mb-1 {
+            margin-bottom: 0.25rem;
+        }
+        .mb-3 {
+            margin-bottom: 1rem;
+        }
+        .mb-4 {
+            margin-bottom: 1.5rem;
+        }
+        .mb-0 {
+            margin-bottom: 0;
+        }
+        .fw-bold {
+            font-weight: bold;
+        }
+        .fw-semibold {
+            font-weight: 600;
+        }
+        .text-white-50 {
+            color: rgba(255, 255, 255, 0.75);
+        }
+        .text-muted {
+            color: #6c757d;
+        }
+        .text-success {
+            color: #28a745;
+        }
+        .text-danger {
+            color: #dc3545;
+        }
+        .text-end {
+            text-align: right;
+        }
+        .shadow-sm {
+            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+        }
+        .border-0 {
+            border: 0;
+        }
+        .rounded-circle {
+            border-radius: 50%;
+        }
+        .bg-opacity-25 {
+            background-color: rgba(255, 255, 255, 0.25);
+        }
+        .bg-gradient-primary {
+            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+        }
+        .bg-gradient-info {
+            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
+        }
+        .bg-gradient-success {
+            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
+        }
+        .bg-gradient-danger {
+            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+        }
+        .bg-gradient-warning {
+            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
+        }
+        .bg-white {
+            background-color: white;
+        }
+        .icon-box {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .input-group {
+            display: flex;
+            width: 100%;
+        }
+        .input-group input {
+            border-radius: 4px 0 0 4px;
+        }
+        .input-group input:last-child {
+            border-radius: 0 4px 4px 0;
+            border-left: 0;
+        }
+        .btn-outline-secondary {
+            background-color: transparent;
+            border: 1px solid #6c757d;
+            color: #6c757d;
+        }
+        .btn-outline-secondary:hover {
+            background-color: #6c757d;
+            color: white;
+        }
+        .btn-link {
+            background: none;
+            border: none;
+            color: #007bff;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        .btn-link:hover {
+            text-decoration: underline;
+        }
+        .text-decoration-none {
+            text-decoration: none;
+        }
+        .w-100 {
+            width: 100%;
+        }
+        .text-start {
+            text-align: left;
+        }
+        .p-0 {
+            padding: 0;
+        }
+        .p-3 {
+            padding: 1rem;
+        }
+        .fa-2x {
+            font-size: 2em;
+        }
+        .fa-chevron-down {
+            transition: transform 0.3s ease;
+        }
+        .collapsed .fa-chevron-down {
+            transform: rotate(-90deg);
+        }
         {% block extra_css %}{% endblock %}
     </style>
 </head>