/* Compact sidebar layout.
   All rows use one visual start line, single-line labels and no nested boxes. */
:root {
  --simh-sidebar-width: 240px;
}

body.simh-app .app-sidebar {
  width: var(--simh-sidebar-width) !important;
}

body.simh-app .side-nav {
  padding: 8px 10px 18px !important;
}

body.simh-app .nav-section-label {
  margin: 12px 8px 5px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

body.simh-app .side-link,
body.simh-app .side-nav-tree-toggle {
  position: relative;
  width: 100%;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

body.simh-app .side-link:hover,
body.simh-app .side-nav-tree-toggle:hover,
body.simh-app .side-nav-tree.is-open > .side-nav-tree-toggle {
  background: transparent !important;
  color: #fff !important;
}

body.simh-app .side-link.active,
body.simh-app .side-nav-tree.is-active > .side-nav-tree-toggle {
  background: transparent !important;
  color: #71f2dc !important;
}

body.simh-app .side-link.active::before,
body.simh-app .side-nav-tree.is-active > .side-nav-tree-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: #5eead4;
}

body.simh-app .side-link > span:not(.side-icon):not(.side-service-icon):not(.side-network-mark),
body.simh-app .side-nav-tree-toggle > span:not(.side-icon):not(.side-service-icon):not(.side-network-mark):not(.side-nav-chevron) {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.simh-app .side-icon,
body.simh-app .side-nav-tree-toggle > .side-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: grid !important;
  place-items: center !important;
}

body.simh-app .side-icon svg,
body.simh-app .side-nav-tree-toggle > .side-icon svg {
  width: 16px !important;
  height: 16px !important;
}

body.simh-app .side-nav-tree,
body.simh-app .side-nav-tree.is-active,
body.simh-app .side-nav-tree-nested,
body.simh-app .side-nav-tree-category {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.simh-app .side-nav-tree-panel,
body.simh-app .side-nav-tree-nested > .side-nav-tree-panel {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Nested rows have no icons, so their text begins exactly where top-level text begins. */
body.simh-app .side-nav-tree-nested > .side-nav-tree-toggle,
body.simh-app .side-link.side-tree-link {
  min-height: 30px !important;
  padding: 5px 28px 5px 39px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

body.simh-app .side-link.side-tree-link {
  display: flex !important;
  width: 100% !important;
}

body.simh-app .side-link.side-tree-link.active {
  border: 0 !important;
  background: transparent !important;
  color: #71f2dc !important;
}

body.simh-app .side-nav-tree-nested > .side-nav-tree-toggle::before,
body.simh-app .side-link.side-tree-link::before {
  left: 28px !important;
  top: 7px !important;
  bottom: 7px !important;
}

body.simh-app .side-nav-chevron {
  position: absolute !important;
  right: 12px !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
}

body.simh-app .side-nav-tree.is-open > .side-nav-tree-toggle > .side-nav-chevron {
  margin: 3px 0 0 !important;
}

body.simh-app .side-link .nav-badge,
body.simh-app .side-link .simh-ai-nav-alert {
  flex: 0 0 auto !important;
}

body.simh-app .sidebar-hero {
  margin: 10px !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

body.simh-app .sidebar-hero strong {
  font-size: 13px !important;
}

body.simh-app .sidebar-hero span {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

@media (max-width: 1160px) {
  :root {
    --simh-sidebar-width: min(240px, 88vw);
  }

  body.simh-app .side-link,
  body.simh-app .side-nav-tree-toggle {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  body.simh-app .side-nav-tree-nested > .side-nav-tree-toggle,
  body.simh-app .side-link.side-tree-link {
    min-height: 36px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 1161px) {
  body.simh-app .app-main {
    margin-left: var(--simh-sidebar-width) !important;
  }
}

/* Network-specific cloud service icons. */
body.simh-app .side-service-icon{width:21px!important;height:21px!important;flex:0 0 21px!important;display:grid!important;place-items:center!important;border-radius:7px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
body.simh-app .side-service-icon svg{width:13px!important;height:13px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.simh-app .side-service-icon.mtn{background:#ffcc00!important;border-color:#ffda45!important;color:#151515!important}
body.simh-app .side-service-icon.airtel{background:#e60012!important;border-color:#ff4654!important;color:#fff!important}
body.simh-app .side-service-icon.glo{background:#169b45!important;border-color:#42bd6b!important;color:#fff!important}
body.simh-app .side-service-icon.t2{background:linear-gradient(135deg,#0e8f45 0 58%,#f3df00 58%)!important;border-color:#74b94a!important;color:#fff!important}
body.simh-app .side-link.side-tree-link.has-service-icon{padding-left:31px!important;gap:8px!important}
body.simh-app .side-link.side-tree-link.active .side-service-icon{box-shadow:0 0 0 2px rgba(113,242,220,.2)!important}


/* Cloud service icons are child-level circles.
   Network marks stay at 22px; service icons are deliberately smaller at 17px. */
body.simh-app .app-sidebar .side-service-icon{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  max-width:17px!important;
  flex:0 0 17px!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  border-radius:50%!important;
  border-width:1px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
}
body.simh-app .app-sidebar .side-service-icon svg{
  width:10px!important;
  height:10px!important;
  flex:0 0 10px!important;
  stroke-width:2!important;
}
body.simh-app .app-sidebar .side-link.side-tree-link.has-service-icon{
  padding-left:34px!important;
  gap:7px!important;
}
body.simh-app .app-sidebar .side-link.side-tree-link.active .side-service-icon{
  box-shadow:0 0 0 2px rgba(113,242,220,.2),0 2px 6px rgba(0,0,0,.18)!important;
}
body.simh-app .side-service-icon.airtime-cash{
  background:linear-gradient(135deg,#0f9f75,#0f6ecb)!important;
  border-color:#5dd9bd!important;
  color:#fff!important;
}