/*
 *  Document   : _responsive-sidebar.scss
 *  Author     : Responsive Sidebar Implementation
 *  Description: This scss file contains responsive styles for sidebar functionality across all devices
 */

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  // Sidebar behavior for mobile devices
  .sidebar {
    width: 260px;
    z-index: 99999999;
    margin-left: -260px;
    transition: all 0.3s ease-in-out;
  }

  .overlay-open {
    .sidebar {
      margin-left: 0;
    }
  }

  .ls-closed {
    .sidebar {
      margin-left: -260px;
    }

    section.content {
      margin-left: 15px;
    }
  }

  // Mini sidebar behavior on mobile
  .side-closed {
    .sidebar {
      width: 60px;
      margin-left: 0;
    }

    &.submenu-closed {
      .sidebar {
        width: 60px;
        margin-left: 0;
      }
    }

    &.side-closed-hover {
      .sidebar {
        width: 260px;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  // Navbar adjustments for mobile
  nav.navbar {
    width: calc(100% - 30px) !important;
    left: 15px !important;
    margin: 10px 15px;
  }

  .navbar-header {
    width: auto;
    float: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .collapse-menu-icon {
    display: block !important;
  }

  .nav-toggle {
    display: block !important;
  }

  section.content {
    margin: 80px 15px 0 15px;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles 
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  // Sidebar behavior for small tablets
  .sidebar {
    width: 260px;
    z-index: 99999999;
    margin-left: -260px;
    transition: all 0.3s ease-in-out;
  }

  .overlay-open {
    .sidebar {
      margin-left: 0;
    }
  }

  .ls-closed {
    .sidebar {
      margin-left: -260px;
    }

    section.content {
      margin-left: 15px;
    }
  }

  // Mini sidebar behavior on small tablets
  .side-closed {
    .sidebar {
      width: 60px;
      margin-left: 0;
    }

    &.submenu-closed {
      .sidebar {
        width: 60px;
        margin-left: 0;
      }
    }

    &.side-closed-hover {
      .sidebar {
        width: 260px;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  // Navbar adjustments for small tablets
  nav.navbar {
    width: calc(100% - 30px) !important;
    left: 15px !important;
    margin: 10px 15px;
  }

  .navbar-header {
    width: auto;
    float: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .collapse-menu-icon {
    display: block !important;
  }

  .nav-toggle {
    display: block !important;
  }

  section.content {
    margin: 80px 15px 0 15px;
  }
}

/* 
  ##Device = Tablets, Ipads 
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  // Sidebar behavior for tablets
  .sidebar {
    width: 260px;
    transition: all 0.3s ease-in-out;
  }

  .ls-closed {
    .sidebar {
      margin-left: -260px;
    }

    section.content {
      margin-left: 15px;
    }
  }

  // Mini sidebar behavior on tablets
  .side-closed {
    .sidebar {
      width: 60px;
    }

    &.submenu-closed {
      .sidebar {
        width: 60px;
      }
    }

    &.side-closed-hover {
      .sidebar {
        width: 260px;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  // Navbar adjustments for tablets
  nav.navbar {
    width: calc(100% - 30px) !important;
    left: 15px !important;
    margin: 10px 15px;
  }

  .navbar-header {
    width: auto;
    float: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .collapse-menu-icon {
    display: block !important;
  }

  section.content {
    margin: 80px 15px 0 15px;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  // Sidebar behavior for small desktops/laptops
  .sidebar {
    width: 260px;
    transition: all 0.3s ease-in-out;
  }

  .ls-closed {
    .sidebar {
      margin-left: -260px;
    }

    section.content {
      margin-left: 15px;
    }
  }

  // Mini sidebar behavior on small desktops/laptops
  .side-closed {
    .sidebar {
      width: 60px;
    }

    &.submenu-closed {
      .sidebar {
        width: 60px;
      }
    }

    &.side-closed-hover {
      .sidebar {
        width: 260px;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  // Navbar adjustments for small desktops/laptops
  nav.navbar {
    width: calc(100% - 290px);
    left: 260px;
  }

  .side-closed {
    nav.navbar {
      width: calc(100% - 90px);
      left: 60px;
    }
  }

  section.content {
    margin: 80px 30px 0 290px;
  }

  .side-closed {
    section.content {
      margin-left: 90px;
    }
  }
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  // Sidebar behavior for large desktops
  .sidebar {
    width: 260px;
    transition: all 0.3s ease-in-out;
  }

  .ls-closed {
    .sidebar {
      margin-left: -260px;
    }

    section.content {
      margin-left: 15px;
    }
  }

  // Mini sidebar behavior on large desktops
  .side-closed {
    .sidebar {
      width: 60px;
    }

    &.submenu-closed {
      .sidebar {
        width: 60px;
      }
    }

    &.side-closed-hover {
      .sidebar {
        width: 260px;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  // Navbar adjustments for large desktops
  nav.navbar {
    width: calc(100% - 290px);
    left: 260px;
  }

  .side-closed {
    nav.navbar {
      width: calc(100% - 90px);
      left: 60px;
    }
  }

  section.content {
    margin: 80px 30px 0 290px;
  }

  .side-closed {
    section.content {
      margin-left: 90px;
    }
  }
}

// Additional responsive fixes for sidebar elements
@media (max-width: 1024px) {
  .sidebar {
    .menu {
      .list {
        li {
          .menu-toggle {
            &:before,
            &:after {
              top: calc(50% - 10px);
            }
          }

          a {
            padding: 7px 9px;
            margin: 5px 11px 0px 11px;
          }
        }
      }
    }
  }

  .side-closed {
    .sidebar {
      .menu {
        .list {
          li {
            a {
              line-height: 1.2rem;
              padding-left: 9px;
            }
          }
        }
      }
    }

    &.side-closed-hover {
      .sidebar {
        .menu {
          .list {
            li {
              .menu-toggle {
                &:before {
                  top: calc(50% - 7px);
                }
              }

              a {
                line-height: 1.5rem;
                padding: 7px 9px;
              }
            }
          }
        }
      }
    }
  }
}

// Ensure sidebar overlay works properly on all devices
@media (max-width: 1024px) {
  body {
    &.overlay-open {
      overflow: hidden; // Prevent scrolling when sidebar is open
    }
  }
}

// Fix for sidebar user info on smaller screens
@media (max-width: 767px) {
  .sidebar {
    .user-info {
      height: auto;
      padding: 10px 15px;

      .info-container {
        top: 15px;
      }
    }
  }
}

// Ensure sidebar menu items are properly spaced on all devices
.sidebar {
  .menu {
    .list {
      li {
        a {
          @media (max-width: 767px) {
            padding: 8px 9px;
            margin: 6px 11px 0px 11px;
          }

          @media (min-width: 768px) and (max-width: 1024px) {
            padding: 8px 9px;
            margin: 7px 11px 0px 11px;
          }
        }
      }
    }
  }
}

// Fix for sidebar icons on mobile devices
@media (max-width: 767px) {
  .sidebarIcon {
    height: 16px !important;
    width: 16px !important;
    top: 2px;
  }
}

// Ensure sidebar toggle button is visible and accessible on all devices
@media (max-width: 1024px) {
  .collapse-menu-icon {
    button.sidemenu-collapse {
      padding: 8px;
      margin: 0 5px;
    }
  }
}