:root {
    --primary-color: #667eea;
    --background-color: #F8FAFC;
    --top-panel: #1E293B;
    --top-panel-text: #F8FAFC;
    --card-background: #ffffff;
    --button-background: #3B82F6;
    --button-background-hover: #5a6fd8;
    --primary-text: #0F172A;
    --entries-table-header: #334155;
}
/* Custom styles that Bootstrap doesn't handle well */

/* Custom gradient background */
body {
    background: var(--background-color);
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* Custom balance card styling */
.balance-card {/* align with default card background */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.top-card {
    background: var(--top-panel) !important;
}

/* Custom table hover effect */
.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
    transition: background-color 0.2s ease;
}

/* Custom card shadows */
.card {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    background: var(--card-background);
    border: none;
    color: var(--primary-text);
}

/* Custom button hover effects */
.btn:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

#entries-table {
    color: var(--primary-text);
    th {
        color: var(--entries-table-header);
    }
}

/* Custom responsive adjustments */
@media (max-width: 768px) {
    .display-1 {
        font-size: 2.5rem;
    }
    
    .display-4 {
        font-size: 1.8rem;
    }
    
    .display-6 {
        font-size: 1.5rem;
    }
}