/* ===== ADMIN LAYOUT FIX - COMPREHENSIVE FULL-WIDTH SOLUTION ===== */

/* Force desktop layout on all admin pages */
@media screen and (min-width: 769px) {
    /* Remove all mobile elements globally */
    .mobile-header,
    .mobile-sidebar,
    .mobile-sidebar-overlay,
    .mobile-bottom-nav,
    .mobile-fab,
    .mobile-menu,
    .mobile-overlay,
    .toggle-nav-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Reset body and html styles */
    html, body {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* Fix Django admin container - CRITICAL FOR FULL WIDTH */
    #container {
        display: block !important;
        min-height: 100vh !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* Fix sidebar positioning - FIXED 250px WIDTH */
    #nav-sidebar,
    .admin-menu,
    .sidebar,
    .menu-manager-container,
    #navigation-menu {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 250px !important;
        height: 100vh !important;
        background: #f8f9fa !important;
        border-right: 1px solid #ddd !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
        transform: translateX(0) !important;
        transition: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Fix main content area for FULL WIDTH */
    #content,
    #main,
    .main,
    .main-content {
        margin-left: 250px !important;
        width: calc(100vw - 250px) !important;
        min-height: 100vh !important;
        padding: 0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow-x: hidden !important;
    }

    /* CRITICAL: Content main area - FULL WIDTH EXPANSION */
    #content-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        min-height: calc(100vh - 40px) !important;
    }

    /* CRITICAL: Form and changelist containers - FULL WIDTH */
    .change-form,
    .changelist,
    .add-form,
    .delete-confirmation {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Changelist specific full width - OVERRIDE DJANGO FLEX */
    #changelist {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        /* Override Django's flex layout that constrains width */
        justify-content: unset !important;
        align-items: unset !important;
    }

    /* CRITICAL: Changelist form container - 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 flex properties that limit width */
        flex: none !important;
        min-width: 100% !important;
    }

    /* CRITICAL: Hide changelist filter sidebar completely */
    #changelist-filter {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: Results table - FULL WIDTH */
    #changelist-form .results,
    #result_list,
    .results {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Changelist form - FULL WIDTH */
    #changelist-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fix specific page layouts */
    .analytics-dashboard,
    .receive-container,
    .dashboard,
    .report-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2rem !important;
        box-sizing: border-box !important;
    }

    /* Fix breadcrumbs */
    .breadcrumbs {
        position: static !important;
        margin: 0 !important;
        padding: 10px 20px !important;
        background: #f8f9fa !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix header area */
    #header {
        margin-left: 250px !important;
        width: calc(100vw - 250px) !important;
        box-sizing: border-box !important;
    }

    /* Ensure tables are responsive and full width */
    .results,
    table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }
}

/* Additional fixes for very large screens */
@media screen and (min-width: 1200px) {
    body.mobile-layout {
        padding: 0 !important;
    }

    /* Ensure sidebar stays fixed */
    #nav-sidebar.toggle {
        transform: translateX(0) !important;
    }

    /* Extra wide screen optimizations */
    #content,
    #main,
    .main,
    .main-content {
        width: calc(100vw - 250px) !important;
    }
}

/* Override any conflicting styles */
body.dashboard #container,
body.admin #container {
    display: block !important;
    width: 100% !important;
}

/* CRITICAL: Disable menu toggle functionality on desktop */
.menu-toggle-btn {
    display: none !important;
}

/* CRITICAL: Prevent menu collapse on desktop */
.menu-manager-container.collapsed {
    width: 250px !important;
}

.main.menu-collapsed {
    margin-left: 250px !important;
    width: calc(100vw - 250px) !important;
}

/* CRITICAL: Form elements full width */
.form-row,
.field-box,
.fieldBox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* CRITICAL: Admin page specific full width fixes */
.change-form #content-main,
.changelist #content-main,
.add-form #content-main,
.delete-confirmation #content-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* CRITICAL: Override any container max-width constraints */
.container,
.container-fluid,
.admin-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Ensure proper scrolling without width constraints */
#content-main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* CRITICAL: Fix any Bootstrap or framework constraints */
.row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.col,
.col-12,
.col-md-12,
.col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* CRITICAL: Dashboard and analytics specific fixes */
.analytics-dashboard .container,
.dashboard .container,
.report-container .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
}

/* CRITICAL: Table container full width */
.table-responsive,
.table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* CRITICAL: Prevent any width inheritance issues */
* {
    box-sizing: border-box !important;
}

/* CRITICAL: Fix for any remaining width constraints */
body.change-list #content-main,
body.change-form #content-main,
body.add-form #content-main {
    width: 100% !important;
    max-width: 100% !important;
}

/* CRITICAL: Additional changelist layout fixes */
@media screen and (min-width: 769px) {
    /* Override Django admin default changelist flex layout */
    .change-list #changelist {
        display: block !important;
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
    }

    /* Ensure changelist content uses full width */
    .change-list .changelist-form-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 100% !important;
    }

    /* Force table to use full available width */
    .change-list #changelist table,
    .change-list .results,
    .change-list #result_list {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    /* Remove any padding/margin that creates white space */
    .change-list #content-main {
        padding: 0 !important;
    }

    .change-list #changelist-form {
        padding: 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure toolbar uses full width */
    .change-list #toolbar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ensure actions bar uses full width */
    .change-list .actions {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ensure paginator uses full width */
    .change-list .paginator {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Override any responsive CSS that might constrain width */
    .change-list .filtered .results,
    .change-list .filtered .paginator,
    .filtered #toolbar,
    .filtered div.xfull {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* CRITICAL: Ensure no elements have fixed max-width */
    .change-list * {
        max-width: none !important;
    }

    /* Exception: Keep specific UI elements with their intended widths */
    .change-list .action-checkbox-column,
    .change-list .action-checkbox,
    .change-list input[type="checkbox"] {
        max-width: 2em !important;
        width: auto !important;
    }
}


/* ===== Scoped fixes for Tasks modern list to avoid global conflicts ===== */
@media screen and (min-width: 769px){
  body.task-list-page #nav-sidebar,
  body.task-list-page .menu-manager-container,
  body.task-list-page .sidebar,
  body.task-list-page #navigation-menu{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 1000 !important;
  }
  body.task-list-page #content,
  body.task-list-page #main,
  body.task-list-page .main,
  body.task-list-page .main-content{
    margin-left: 250px !important;
    width: calc(100vw - 250px) !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }
  /* Ensure menu is truly fixed to viewport on this page */
  body.task-list-page .menu-manager-container{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 2000 !important;
    transform: none !important;
    margin: 0 !important;
    display: block !important;
  }
  body.task-list-page .modern-task-list{
    margin-left: 0 !important;
    max-width: 1400px !important;
  }
  body.task-list-page .kanban-board .column-content{
    max-height: calc(100vh - 280px);
  }
  body.task-list-page .modern-task-list,
  body.task-list-page .filter-bar,
  body.task-list-page .advanced-filters,
  body.task-list-page .task-grid,
  body.task-list-page .kanban-board{ position: static !important; }
}


/* ===== Scoped layout for Vehicles V2 pages ===== */
@media screen and (min-width: 769px){
  body.vehicles-v2-page #nav-sidebar,
  body.vehicles-v2-page .menu-manager-container{ position:fixed !important; left:0; top:0; width:250px; height:100vh; z-index:1000; }
  body.vehicles-v2-page #content,
  body.vehicles-v2-page #main,
  body.vehicles-v2-page .main{ margin-left:250px !important; width:calc(100vw - 250px) !important; min-height:100vh !important; overflow-x:hidden !important; }
}

/* ===== Scoped layout for Parts Service V2 pages ===== */
@media screen and (min-width: 769px){
  body.parts-service-v2-page #nav-sidebar,
  body.parts-service-v2-page .menu-manager-container{ position:fixed !important; left:0; top:0; width:250px; height:100vh; z-index:1000; }
  body.parts-service-v2-page #content,
  body.parts-service-v2-page #main,
  body.parts-service-v2-page .main{ margin-left:250px !important; width:calc(100vw - 250px) !important; min-height:100vh !important; overflow-x:hidden !important; }
}

/* ===== Scoped layout for CRM dashboards/pages ===== */
@media screen and (min-width: 769px){
  body.crm-dashboard-page #nav-sidebar,
  body.crm-dashboard-page .menu-manager-container{ position:fixed !important; left:0; top:0; width:250px; height:100vh; z-index:1000; }
  body.crm-dashboard-page #content,
  body.crm-dashboard-page #main,
  body.crm-dashboard-page .main{ margin-left:250px !important; width:calc(100vw - 250px) !important; min-height:100vh !important; overflow-x:hidden !important; }
}


/* ===== Scoped layout for Reports dashboards/pages ===== */
@media screen and (min-width: 769px){
  body.reports-dashboard-page #nav-sidebar,
  body.reports-dashboard-page .menu-manager-container{ position:fixed !important; left:0; top:0; width:250px; height:100vh; z-index:1000; }
  body.reports-dashboard-page #content,
  body.reports-dashboard-page #main,
  body.reports-dashboard-page .main{ margin-left:250px !important; width:calc(100vw - 250px) !important; min-height:100vh !important; overflow-x:hidden !important; }
}


/* ===== Scoped layout for CRM forms ===== */
@media screen and (min-width: 769px){
  body.crm-form-page #nav-sidebar,
  body.crm-form-page .menu-manager-container{ position:fixed !important; left:0; top:0; width:250px; height:100vh; z-index:1000; }
  body.crm-form-page #content,
  body.crm-form-page #main,
  body.crm-form-page .main{ margin-left:250px !important; width:calc(100vw - 250px) !important; min-height:100vh !important; overflow-x:hidden !important; }
}