/* ===== CHANGELIST FULL-WIDTH FIX - AGGRESSIVE OVERRIDE ===== */

/* CRITICAL: Force desktop changelist to use full width */
@media screen and (min-width: 769px) {
    
    /* STEP 1: Override Django's default changelist flex layout */
    #changelist {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        /* Remove flex properties that constrain width */
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
    }

    /* STEP 2: Completely hide the filter sidebar */
    #changelist-filter {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* STEP 3: Force changelist form container to full width */
    #changelist .changelist-form-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        /* Override all flex properties */
        flex: none !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important;
        min-width: 100% !important;
    }

    /* STEP 4: Force changelist form to full width */
    #changelist-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 5: Force results table to full width */
    #changelist-form .results,
    #result_list,
    .results,
    #changelist table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-collapse: collapse !important;
    }

    /* STEP 6: Ensure table cells expand properly */
    #changelist table th,
    #changelist table td,
    .results th,
    .results td {
        box-sizing: border-box !important;
        max-width: none !important;
    }

    /* STEP 7: Fix toolbar to full width */
    #toolbar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 8: Fix actions bar to full width */
    .actions {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 9: Fix paginator to full width */
    .paginator {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 10: Override any responsive constraints */
    .change-list .filtered .results,
    .change-list .filtered .paginator,
    .filtered #toolbar,
    .filtered div.xfull {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* STEP 11: Remove content-main padding for changelist */
    .change-list #content-main {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* STEP 12: Ensure breadcrumbs don't constrain width */
    .change-list .breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 13: Override any module constraints */
    .change-list .module {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 14: Force object-tools to full width */
    .change-list .object-tools {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* STEP 15: Aggressive override for any remaining constraints */
    .change-list * {
        max-width: none !important;
    }

    /* STEP 16: Exceptions for specific UI elements that should keep their size */
    .change-list .action-checkbox-column,
    .change-list .action-checkbox,
    .change-list input[type="checkbox"],
    .change-list .action-select {
        max-width: 3em !important;
        width: auto !important;
    }

    /* STEP 17: Fix any Bootstrap grid constraints */
    .change-list .container,
    .change-list .container-fluid,
    .change-list .row,
    .change-list .col,
    .change-list .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* STEP 18: Ensure no hidden overflow issues */
    .change-list #changelist,
    .change-list #changelist-form,
    .change-list .changelist-form-container {
        overflow: visible !important;
        overflow-x: visible !important;
    }

    /* STEP 19: Force table wrapper to full width */
    .change-list .table-responsive,
    .change-list .table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* STEP 20: Final aggressive override */
    body.change-list #content,
    body.change-list #content-main,
    body.change-list #changelist,
    body.change-list .changelist-form-container,
    body.change-list #changelist-form {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile responsiveness - keep existing behavior */
@media (max-width: 768px) {
    #changelist {
        flex-direction: column !important;
    }
    
    #changelist-filter {
        display: block !important;
        position: static !important;
        left: auto !important;
        width: auto !important;
    }
}