/* Aggressive mobile sidebar fixes with !important overrides */
/* This file should be loaded LAST to override all other styles */

@media screen and (max-width: 767px) {
  /* Force sidebar to render properly */
  body.sidebar-mini.sidebar-collapse .wrapper,
  body.sidebar-mini .wrapper {
    overflow-x: hidden !important;
  }
  
  /* Override ANY sidebar positioning */
  .main-sidebar,
  .sidebar,
  .left-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    min-height: 100vh !important;
    height: 100% !important;
    width: 280px !important;
    z-index: 9999 !important;
    background-color: #222d32 !important;
    transform: translate3d(-280px, 0, 0) !important;
    transition: transform 0.3s ease-in-out !important;
    -webkit-transform: translate3d(-280px, 0, 0) !important;
    -webkit-transition: -webkit-transform 0.3s ease-in-out !important;
    padding-top: 50px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* When sidebar is open - use translate3d for better performance */
  body.sidebar-open .main-sidebar,
  body.sidebar-open .sidebar,
  body.sidebar-open .left-side,
  .sidebar-open .main-sidebar,
  .sidebar-open .sidebar,
  .sidebar-open .left-side {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
  
  /* Force proper rendering of sidebar content */
  .sidebar-menu,
  .sidebar .sidebar-menu,
  .main-sidebar .sidebar-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* Fix ALL menu items regardless of icon size */
  .sidebar-menu > li,
  .sidebar-menu li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    visibility: visible !important;
  }
  
  .sidebar-menu > li > a,
  .sidebar-menu li > a,
  .sidebar-menu li a {
    display: flex !important;
    align-items: center !important;
    padding: 15px 20px !important;
    width: 100% !important;
    color: #b8c7ce !important;
    text-decoration: none !important;
    min-height: 50px !important; /* Touch-friendly */
    position: relative !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  
  /* Fix icons of ANY size */
  .sidebar-menu > li > a > i,
  .sidebar-menu > li > a > .fa,
  .sidebar-menu > li > a > .fas,
  .sidebar-menu > li > a > .far,
  .sidebar-menu > li > a > .glyphicon,
  .sidebar-menu > li > a > .ion,
  .sidebar-menu li a i {
    width: 25px !important;
    margin-right: 15px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    font-size: 18px !important; /* Larger readable size */
  }
  
  /* Fix menu text */
  .sidebar-menu > li > a > span,
  .sidebar-menu li a span {
    display: inline-block !important;
    flex: 1 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  
  /* Remove ANY transform on wrapper and content */
  .wrapper,
  .content-wrapper,
  .main-footer {
    transform: none !important;
    -webkit-transform: none !important;
    margin-left: 0 !important;
    transition: none !important;
  }
  
  /* Fix header */
  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    width: 100% !important;
  }
  
  .main-header .navbar {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Force content below header */
  .content-wrapper {
    padding-top: 50px !important;
    min-height: 100vh !important;
  }
  
  /* Dark overlay when sidebar is open */
  body.sidebar-open::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    display: block !important;
  }
  
  /* Ensure toggle button works */
  .sidebar-toggle {
    display: block !important;
    float: left !important;
    padding: 15px !important;
    margin-right: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
  }
  
  /* Hide elements that break mobile layout */
  .main-header .logo {
    display: none !important;
  }
  
  /* Fix any nested menus */
  .treeview-menu {
    display: block !important;
    padding-left: 20px !important;
    width: 100% !important;
  }
  
  .treeview-menu > li > a {
    padding: 10px 15px !important;
    font-size: 14px !important;
  }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
  /* Larger sidebar on very small screens for better readability */
  .main-sidebar,
  .sidebar,
  .left-side {
    width: 320px !important;
    transform: translate3d(-320px, 0, 0) !important;
    -webkit-transform: translate3d(-320px, 0, 0) !important;
  }
  
  /* Larger text on small screens */
  .sidebar-menu > li > a > span,
  .sidebar-menu li a span {
    font-size: 16px !important;
  }
  
  /* More padding for easier touch */
  .sidebar-menu > li > a,
  .sidebar-menu li > a,
  .sidebar-menu li a {
    padding: 18px 25px !important;
    min-height: 55px !important;
  }
}

/* Fix for iOS specific issues */
@supports (-webkit-touch-callout: none) {
  .main-sidebar {
    -webkit-transform: translate3d(-280px, 0, 0) !important;
  }
  
  body.sidebar-open .main-sidebar {
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}