.balance-summary-list {
    font-family: Arial, sans-serif;
    color: #d6dadf;
    background: linear-gradient(145deg, #2E3440, #353b48);
    border-radius: 8px;
}

.account-type {
    margin-bottom: 5px;
}

.account-type-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 10px;
    cursor: pointer;
    background-color: #252a33;
    border-radius: 4px;
}

/* Remove cursor: pointer for headers without children */
.account-type-header:not([data-toggle="collapse"]) {
    cursor: default;
}


.account-type-left {
    display: flex;
    align-items: center;
}

.expand-icon {
    font-size: 14px;
    margin-right: 10px;
}

.expand-placeholder {
    width: 24px; /* Match the width of the expand-icon (14px font-size + 10px margin-right) */
    display: inline-block;
}

.account-name {
    flex-grow: 1;
    font-size: 16px;
}

.account-type-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.balance {
    font-weight: bold;
    font-size: 16px;
}

.available-balance {
    font-size: 12px;    
    margin-top: 2px;
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

.account-sub-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #474e5d;
    border-top: 1px solid #2a5a5a;
}

.account-sub-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.account-sub-item .account-name {
    text-align: left;
    font-size: 14px;
}

.account-sub-item .balance {
    font-weight: normal;
    font-size: 14px;
}

.account-sub-item .available-balance {
    font-size: 11px;    
    margin-top: 2px;
}



/* Ensure the balance summary is visible on larger screens by default */
@media (min-width: 769px) {
    .balance-summary-container {
        display: block;
    }
}


/* Light theme styles */
.light-theme .balance-summary-list {
    color: #333; /* Darker text for light theme */
    background: linear-gradient(145deg, #e0e0e0, #f0f0f0); /* Lighter background */
}

.light-theme .account-type-header {
    background-color: #cccccc; /* Lighter header background */
}

.light-theme .account-sub-item {
    background-color: #dddddd; /* Lighter sub-item background */
    border-top: 1px solid #bbbbbb; /* Lighter border */
}

/* Light theme styles for the main container */
.light-theme .balance-summary-container {
    color: var(--text-color); /* Use text color from SparkyBudget.css */
    background: var(--container-background); /* Use container background from SparkyBudget.css */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3); /* Adjust glow for light theme */
}
