/* dashboard header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 20px;
}

.dashboard-header h2 {
    margin: 0;
}

.dashboard-header .dashboard-controls {
    display: flex;
    align-items: center;
    gap: 16px;

    /* Windows 95 Panel Look for controls */
    background: var(--bg-surface);
    padding: 8px 12px;
    border: 2px solid var(--bg-surface);
    box-shadow:
        inset 1px 1px 0px var(--border-light),
        inset -1px -1px 0px var(--border-black),
        inset 2px 2px 0px #dfdfdf,
        inset -2px -2px 0px var(--border-gray);
}

.dashboard-header .month-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    margin-bottom: 0;
    /* Align with select */
}

.dashboard-header select,
.dashboard-header input {
    width: auto;
    margin-bottom: 0;
}

/* Dashboard Summary Cards (KPIs) */
.summary-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.card.kpi {
    flex: 1;
    text-align: center;
    background: var(--bg-surface);
    border: 2px solid var(--bg-surface);
    box-shadow:
        inset 1px 1px 0px var(--border-light),
        inset -1px -1px 0px var(--border-black),
        inset 2px 2px 0px #dfdfdf,
        inset -2px -2px 0px var(--border-gray);
}

.amount {
    font-size: 24px;
    margin-top: 16px;
    text-shadow: none;
}

.amount.positive {
    color: var(--secondary);
}

.amount.negative {
    color: var(--danger);
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.chart-container canvas {
    max-height: 200px;
    /* filter: sepia(0.2) contrast(1.1); */
    background: #fff;
    border: 1px solid var(--border-gray);
    box-shadow: inset 1px 1px 0 var(--border-black), 1px 1px 0 var(--border-light);
    padding: 5px;
}

/* Dashboard Alert */
.dashboard-alert {
    width: 40px;
    height: 40px;
    background-color: var(--danger);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 var(--border-light);
    animation: blink 1s infinite step-end;
}