/* Wallet Layout Fix - Enhanced
 * Ensures wallet content uses full width and is not stuck to the right or top
 */

/* Core wallet view container – full-width and aligned to the left */
#wallet-view {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Make sure the wallet view is not shifted to the right by any parent margins */
#page-content-wrapper,
#page-content-wrapper #wallet-view {
    margin-left: 0 !important;
}

/* Fix container-fluid within wallet-view so it fills the available width */
#wallet-view .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Rows should span full width and not float */
#wallet-view .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Ensure balance cards row uses full width */
#wallet-view .row.g-3.mb-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Individual cards: always stretch to container width */
#wallet-view .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
}

/* Add a comfortable top padding so content is not glued to the very top */
#wallet-view > .container-fluid {
    padding-top: 1.25rem !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    #wallet-view {
        padding: 0 !important;
    }

    #wallet-view .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    #wallet-view .row.g-3 {
        --bs-gutter-x: 0.75rem !important;
        --bs-gutter-y: 0.75rem !important;
    }
    
    /* Balance cards mobile layout – stack nicely with spacing */
    #wallet-view .row.g-3.mb-4 .col-md-6 {
        margin-bottom: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Override any main-content conflicts */
.main-content #wallet-view {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure all content views (including wallet) can use full width */
.content-view {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}