.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.card-icon {
    font-size: 2.5rem;
    margin-right: 1.5rem;
}

.card-info h3 {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
}

.card-info .amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-heading);
    margin-bottom: 0.25rem;
}

.card-info .desc {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.income .amount { color: var(--color-income); }
.expense .amount, .today-expense .amount { color: var(--color-expense); }

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
}

.quick-input-card, .recent-transactions-card, .category-summary-card {
    height: 100%;
}

.type-select {
    display: flex;
    gap: 1rem;
}

/* Transaction List */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.transaction-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tx-date {
    font-size: 0.9rem;
    color: var(--color-muted);
    width: 50px;
}

.tx-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tx-category {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-muted);
}

.tx-memo {
    color: var(--color-heading);
    font-weight: 500;
}

.tx-amount {
    font-weight: bold;
}

.expense-item .tx-amount { color: var(--color-expense); }
.income-item .tx-amount { color: var(--color-income); }

/* CSS Bar Chart */
.css-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-item {
    display: flex;
    flex-direction: column;
}

.chart-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.chart-bar-wrap {
    width: 100%;
    height: 10px;
    background-color: var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}

.chart-bar {
    height: 100%;
    border-radius: 5px;
}

.bg-food { background-color: #f6c23e; }
.bg-transport { background-color: #36b9cc; }
.bg-living { background-color: #1cc88a; }
.bg-telecom { background-color: #e74a3b; }
.bg-subscribe { background-color: #4e73df; }
.bg-etc { background-color: #858796; }

/* Dashboard Budget Card */
.dashboard-budget-card {
    border-top: 4px solid var(--color-primary);
    margin-bottom: 1.5rem;
}

.budget-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.budget-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.budget-stats-grid div {
    display: flex;
    flex-direction: column;
}

.budget-stats-grid .label {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.budget-stats-grid .val {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-heading);
}

.budget-progress {
    margin-top: 1rem;
}

.bg-over { background-color: var(--color-expense) !important; }
.bg-warning { background-color: #f6c23e !important; }

.empty-budget {
    text-align: center;
    padding: 2rem 0;
    color: var(--color-muted);
}

.text-over { color: var(--color-expense) !important; }

/* Responsive Dashboard */
@media (max-width: 1023px) {
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }
    .transaction-item {
        background: var(--color-bg);
        padding: 1rem;
        border-radius: var(--radius-card);
        border-bottom: none;
    }
}