/* Dark & Premium Theme - Dashboard Specific Styles */

/*
    IMPORTANT: This file should ONLY contain styles specific to the dashboard page.
    General styles for body, header, nav, footer, section titles, and common responsive rules
    should reside in style.css to avoid conflicts and maintain consistency.
    Variables are now ONLY in style.css.
*/

/* Keyframes for card entrance animation */
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Dashboard Summary Section */
#dashboard-summary {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* Welcome message styling */
#dashboard-summary h2 {
    font-weight: 300; /* Lighter font weight for "Welcome," */
    font-size: 2.2em;
    color: var(--secondary-text-color);
}

#username-display {
    color: var(--accent-blue);
    font-weight: 600; /* Bolder font weight for the username */
    margin-left: 0.25em;
}


.summary-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: 40px;
}

.card {
    background-color: var(--secondary-dark-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: left; /* Align text to the left for a cleaner look */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0; /* Initially hidden for animation */
    animation: card-fade-in 0.5s ease-out forwards; /* Apply the animation */
}

/* Stagger the animation for each card */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }


.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.card h3 {
    color: var(--secondary-text-color);
    margin-top: 0;
    font-size: 1.1em;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.card p {
    font-size: 2.5em; /* Larger font size for emphasis */
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Set specific colors for card values */
#current-balance {
    color: var(--primary-text-color); /* Neutral color for balance */
}
.income-card p {
    color: var(--success-green);
}

.expense-card p {
    color: var(--danger-red);
}

#today-expenditure {
    color: var(--danger-red);
}

#savings-goal {
    color: var(--accent-blue);
}

#savings-progress {
    color: var(--success-green);
}


/* Recent Transactions Table Section */
#recent-transactions {
    margin-top: var(--spacing-lg);
    background-color: var(--secondary-dark-bg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 8px var(--card-shadow);
}

/* Chart Section */
#spending-chart {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--secondary-dark-bg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 8px var(--card-shadow);
}

.chart-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 400px; /* Give the container a fixed height */
}

canvas {
    background-color: transparent; /* Make canvas background transparent */
    padding: var(--spacing-sm);
}