/* Monthly view tab specific styles */

.month-year-selector-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 38px; /* Set consistent height */
    margin-top: 1rem; /* Add space above the selectors */
}

.month-selector-dropdown,
.year-selector-dropdown {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0;
}

.month-selector-dropdown {
    width: 140px;
}

.year-selector-dropdown {
    width: 120px;
}

.month-selector-label,
.year-selector-label {
    margin-right: 0.5rem;
    margin-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 38px; /* Match container height */
    height: 38px;
}

/* Ensure Dash dropdown components align properly */
.month-year-selector-container .Select-control,
.month-year-selector-container .dash-dropdown .Select-control {
    margin-bottom: 0;
    margin-top: 0;
    height: 38px;
    line-height: 38px;
}

/* Reset any default margins/padding on the container children */
.month-year-selector-container > * {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}

.daily-heatmap-container {
    min-height: 400px;
}

.category-breakdown-container {
    min-height: 350px;
}

.spending-type-container {
    min-height: 300px;
}

/* Monthly view specific card modifications */
.monthly-view .card-body {
    padding: 1rem;
}

.monthly-view .chart-container {
    padding: 0.5rem;
}

/* Loading states for monthly charts */
.monthly-loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}