/* ===================== Budget Overview CSS ===================== */


/* -------- Column selectors -------- */
.budget-column-selector-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.budget-column-selector {
    position: relative; /* Viktigt för dropdown */
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

    .budget-column-selector span {
        font-weight: 500;
        margin-bottom: 2px;
    }

    .budget-column-selector input[type="text"] {
        padding: 3px 6px;
        font-size: 13px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

/* -------- Dropdown -------- */
.budget-dropdown-menu {
    position: absolute;
    top: 100%; /* Ligger direkt under inputfältet */
    left: 0;
    right: 0; /* Matchar inputens bredd */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 999;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column; /* Vertikal lista */
    padding: 2px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

    .budget-dropdown-menu label {
        padding: 4px 8px;
        cursor: pointer;
        font-size: 12px;
    }

        .budget-dropdown-menu label:hover {
            background: #f5f5f5;
        }

/* -------- Spreadsheet -------- */
.budget-year-header {
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 4px;
}

.budget-sheet-header, .budget-sheet-row {
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid #ccc;
}

.budget-sheet-header {
    font-weight: 600;
    background: #f2f2f2;
}

/* Fixed main columns */
.budget-sheet-cell.month {
    flex: 0 0 120px;
    text-align: left;
    padding: 4px 6px;
}

.budget-sheet-cell.income,
.budget-sheet-cell.expense,
.budget-sheet-cell.net {
    flex: 0 0 100px;
    text-align: right;
    padding: 4px 6px;
}

/* Extra columns scrolls horizontally */
.budget-extra-columns-wrapper {
    flex: 1;
    overflow-x: auto;
}

.budget-extra-columns {
    display: flex;
}

.budget-sheet-cell.other {
    flex: 0 0 90px;
    text-align: right;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row hover & stripe */
.budget-sheet-row:nth-child(even) {
    background: #f9f9f9;
}

.budget-sheet-row:hover {
    background: #f0f0f0;
}

/* Positive/Negative coloring */
.budget-positive {
    color: #014903;
    font-weight: 470;
}

.budget-negative {
    color: #960000;
    font-weight: 470;
}

/* Loading indicator */
.budget-loading-indicator {
    font-style: italic;
    color: #aaa;
    margin: 12px 0;
}
.budget-total-row {
    font-weight: bold;
    background-color: #f0f0f0;
}

.budget-month-selector {
    margin-bottom: 10px;
}

.budget-dropdown-menu {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background: white;
    z-index: 100;
    padding: 5px;
}