/* MGIoT sidebar overlap fix — RTL/mobile stable navigation */
:root{
  --mgiot-sidebar-width: 300px;
  --mgiot-sidebar-gap: 10px;
}

html[dir="rtl"] .app-page.active > .sidebar{
  width: var(--mgiot-sidebar-width) !important;
  min-width: var(--mgiot-sidebar-width) !important;
  max-width: var(--mgiot-sidebar-width) !important;
}
html[dir="rtl"] .app-page.active > .main{
  margin-right: var(--mgiot-sidebar-width) !important;
  width: calc(100% - var(--mgiot-sidebar-width)) !important;
  max-width: calc(100% - var(--mgiot-sidebar-width)) !important;
}

.sidebar{
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
.sidebar-header{
  display: grid !important;
  grid-template-columns: 64px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}
.sidebar-header .sidebar-logo-box{
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
.sidebar-header > div:not(.sidebar-logo-box){
  min-width: 0 !important;
}
.sidebar-header h2,
.sidebar-header p{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-nav{
  gap: var(--mgiot-sidebar-gap) !important;
  padding: 14px 14px !important;
}
.sidebar .nav-section{
  overflow: visible !important;
  border-radius: 18px !important;
}
.sidebar .nav-section:not(.collapsed){
  overflow: hidden !important;
}

.sidebar .nav-top-item,
.sidebar .nav-section-hdr,
.sidebar .nav-item{
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.25 !important;
}
.sidebar .nav-top-item,
.sidebar .nav-section-hdr{
  min-height: 54px !important;
  padding: 10px 14px !important;
}
.sidebar .nav-section-body{
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.sidebar .nav-section.collapsed .nav-section-body{
  display: none !important;
}
.sidebar .nav-item{
  min-height: 46px !important;
  height: auto !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  border-radius: 14px !important;
}

.sidebar .section-icon,
.sidebar .nav-item-icon{
  order: 1 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: #eef5ff !important;
  color: #0B5CA8 !important;
  font-size: 17px !important;
  margin: 0 !important;
}
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-icon,
.sidebar .nav-item.active .nav-item-icon,
.sidebar .nav-top-item.active .section-icon{
  background: rgba(255,255,255,.22) !important;
  color: inherit !important;
}

.sidebar .section-label,
.sidebar .nav-top-item > span:not(.section-icon),
.sidebar .nav-item > span:not(.nav-item-icon):not(.sidebar-badge){
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: right !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
}
.sidebar .section-label,
.sidebar .nav-top-item > span:not(.section-icon){
  white-space: nowrap !important;
}
.sidebar .section-arrow,
.sidebar .sidebar-badge{
  order: 3 !important;
  flex: 0 0 auto !important;
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}
.sidebar .section-arrow{
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.14) !important;
  color: #64748b !important;
  transform-origin: center !important;
}
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-arrow{
  background: rgba(255,255,255,.20) !important;
  color: inherit !important;
}

.sidebar .nav-item.active{
  background: linear-gradient(135deg,#0B5CA8,#08477f) !important;
  color: #fff !important;
  border-right: 0 !important;
  border-left: 0 !important;
}
.sidebar .nav-item.active::before{
  display: none !important;
}
.sidebar .nav-section-hdr,
.sidebar .nav-top-item,
.sidebar .nav-item{
  box-shadow: none;
}
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr{
  background: #eaf4ff !important;
  color: #0B5CA8 !important;
  box-shadow: none !important;
}

.sidebar-footer{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}
.sidebar .footer-brand{
  display: grid !important;
  grid-template-columns: 44px minmax(0,1fr) 44px !important;
  gap: 10px !important;
  align-items: center !important;
}
.sidebar .footer-meta{
  min-width: 0 !important;
  text-align: center !important;
}

@media (max-width: 768px){
  :root{ --mgiot-sidebar-width: min(88vw, 340px); }
  html[dir="rtl"] .app-page.active > .sidebar{
    width: var(--mgiot-sidebar-width) !important;
    min-width: var(--mgiot-sidebar-width) !important;
    max-width: var(--mgiot-sidebar-width) !important;
  }
  html[dir="rtl"] .app-page.active > .main{
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sidebar-nav{
    padding: 12px !important;
  }
  .sidebar .nav-section-body{
    padding: 7px !important;
  }
  .sidebar .nav-top-item,
  .sidebar .nav-section-hdr{
    min-height: 52px !important;
  }
  .sidebar .nav-item{
    min-height: 44px !important;
  }
}

/* MGIoT sidebar full-open patch — keep every section fully reachable */
.sidebar,
.app-page.active > .sidebar{
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.sidebar-nav{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 140px !important;
  scroll-padding-bottom: 140px !important;
}
.sidebar .nav-section:not(.collapsed),
.sidebar .nav-section:not(.collapsed) .nav-section-body{
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
}
.sidebar .nav-section.collapsed .nav-section-body{
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
.sidebar-footer{
  flex: 0 0 auto !important;
  margin-top: auto !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px) !important;
}
@media (max-width: 768px){
  .sidebar-nav{ padding-bottom: 160px !important; }
  .sidebar-footer{ position: sticky !important; bottom: 0 !important; }
}