/* Styles for the finances (income & expenses tabs) */

#incomeHeader,
#expenseHeader {
    display: flex;
}

/* Styles for the autocomplete fields */
#autocompleteIncome-container {
    position: relative;
    display: inline-block;
}

#autocompleteIncome-list {
    position: absolute;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    width: 300px;
    overflow-y: auto;
    background-color: #fff; /* Set a background color for better contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
    transition: max-height 0.3s ease; /* Add a smooth transition for resizing */
}

#autocompleteIncome-list li {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#autocompleteIncome-list li:hover {
    background-color: #f0f0f0; /* Lighter background on hover for better visibility */
}

#autocompleteIncome-list.resizable {
    resize: both; /* Allow vertical resizing */
    overflow: auto; /* Enable scrolling when resized */
}

/* Styles for the expense autocomplete fields */
#autocomplete-container {
    position: relative;
    display: inline-block;
}

#autocomplete-list {
    position: absolute;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    width: 300px;
    overflow-y: auto;
    background-color: #fff; /* Set a background color for better contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
    transition: max-height 0.3s ease; /* Add a smooth transition for resizing */
}

#autocomplete-list li {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#autocomplete-list li:hover {
    background-color: #f0f0f0; /* Lighter background on hover for better visibility */
}

#autocomplete-list.resizable {
    resize: both; /* Allow vertical resizing */
    overflow: auto; /* Enable scrolling when resized */
}

#saveExpenseRow, #saveIncomeRow {
    font-size: 25px;
    cursor: pointer;
    border: none;
    
    /* set background color to same as page background */
    background-color: #f6f6f9ff;

}

#income-table {
    margin-top: 20px;
}

#income-sections-container {
    display: grid;
    justify-items: center;
}

/* In table "expense-table", the minimum widht of column 4 must be 150px */
#income-table th:nth-child(4),
#income-table td:nth-child(4) {
    width: 12%; /* Adjust the width as per your requirement */
}

/* In table "expense-table", the minimum widht of column 4 must be 150px */
#income-table th:nth-child(5),
#income-table td:nth-child(5) {
    width: 25%; /* Adjust the width as per your requirement */
}

#expense-table {
    margin-top: 20px;
}

#expense-sections-container {
    display: grid;
    justify-items: center;
}

/* In table "expense-table", the minimum widht of column 4 must be 150px */
#expense-table th:nth-child(4),
#expense-table td:nth-child(4) {
    width: 12%; /* Adjust the width as per your requirement */
}

/* In table "expense-table", the minimum widht of column 4 must be 150px */
#expense-table th:nth-child(5),
#expense-table td:nth-child(5) {
    width: 25%; /* Adjust the width as per your requirement */
}