/* ============================================================================
   MGIOT — sidebar.
   Loaded LAST so it wins over the ~195 inherited .sidebar rules spread across
   style.css, mgiot-v2.css, mgiot-pro.css, mgiot-design.css,
   mgiot-redesign-2027.css, mgiot-shell-2028.css, mgiot-responsive.css and the
   dark sheet. It changes no markup hooks — same classes, same onclicks.

   TWO THINGS THIS FIXES

   1. Scrolling. The rail had two nested scroll containers (.sidebar and
      .sidebar-nav both `overflow-y:auto`) and a `position:fixed` footer laid
      over the top of them, with 90px of padding on the nav to dodge it. The
      result: the outer box reported no overflow, the inner one took the wheel
      first, and once it hit its end the scroll chained straight into the page
      behind. The last two groups sat under the footer, unreachable.

      Now: the rail is a flex column that never scrolls. The nav is the single
      scroller, `overscroll-behavior:contain` keeps the wheel inside it, and
      the footer is a normal flex child again.

   2. Density and hierarchy. Rows were 53px apart, so a menu of 41 items could
      not fit any screen. Group headers were pills that competed with the
      active row for attention. Now a row is 38px, group headers are quiet
      labels, and the active row is marked by a spine on the rail edge rather
      than a filled block.

   Colour follows the logo (#1E458C / #479EDD), the same family as the sign-in
   screen, so the two read as one product.
   ========================================================================== */

:root{
  --sb-mark:#1E458C;
  --sb-signal:#479EDD;
  --sb-ink:#0F2036;
  --sb-ink-2:#41556F;
  --sb-mute:#7E93AC;
  --sb-line:#E2EAF3;
  --sb-hover:#F1F5FA;
  --sb-active:#EAF1FA;
  --sb-rail:14px;      /* the spine's height offset from the row edges */
}

/* ── The rail is a column, and it does not scroll ───────────────────────── */
.app-page.active>.sidebar,
.app-page .sidebar{
  position:fixed!important; top:0!important; bottom:0!important;
  height:100vh!important; height:100dvh!important;
  display:flex!important; flex-direction:column!important;
  overflow:hidden!important;            /* the single scroller is .sidebar-nav */
  background:#fff!important;
  border-inline-start:1px solid var(--sb-line)!important;
  border-inline-end:0!important;
  box-shadow:none!important;
}

/* ── Header: brand and who is signed in ─────────────────────────────────── */
.app-page .sidebar .sidebar-header{
  flex:0 0 auto;
  display:flex!important; flex-direction:row!important; align-items:center; gap:11px;
  padding:16px 16px 14px!important;
  border-bottom:1px solid var(--sb-line);
  text-align:start;
}
.app-page .sidebar .sidebar-logo-box{
  width:40px!important; height:40px!important; flex:0 0 40px;
  margin:0!important; border-radius:11px!important;
  background:#F4F8FC!important; border:1px solid var(--sb-line)!important;
  display:grid!important; place-items:center; overflow:hidden;
}
.app-page .sidebar .sidebar-logo-box img{ width:26px!important; height:26px!important; object-fit:contain; }
.app-page .sidebar .sidebar-header h2{
  margin:0!important; font-size:15px!important; font-weight:800!important;
  color:var(--sb-ink)!important; line-height:1.3; letter-spacing:-.01em;
}
.app-page .sidebar .sidebar-header #sidebarUser{
  margin:1px 0 0!important; font-size:12px!important; font-weight:600!important;
  color:var(--sb-mute)!important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Nav: the only thing that scrolls ───────────────────────────────────── */
.app-page .sidebar .sidebar-nav{
  flex:1 1 auto; min-height:0;          /* min-height:0 lets a flex child shrink */
  overflow-y:auto!important; overflow-x:hidden!important;
  /* Keeps the wheel inside the rail. Without it, reaching the end of the list
     scrolls the page behind — the behaviour this rewrite was asked to fix. */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 10px 16px!important;     /* was 92px at the bottom, to clear a fixed footer */
  display:flex; flex-direction:column; gap:1px;
}

/* A hairline scrollbar. Present enough to show position, quiet enough not to
   sit in the corner of the eye all day. */
.app-page .sidebar .sidebar-nav{ scrollbar-width:thin; scrollbar-color:#CBD8E6 transparent; }
.app-page .sidebar .sidebar-nav::-webkit-scrollbar{ width:8px; }
.app-page .sidebar .sidebar-nav::-webkit-scrollbar-track{ background:transparent; }
.app-page .sidebar .sidebar-nav::-webkit-scrollbar-thumb{
  background:#D3DEEA; border-radius:99px;
  border:2.5px solid #fff;              /* inset, so the bar reads as 3px wide */
}
.app-page .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb{ background:#B9C9DA; }

/* ── Rows ───────────────────────────────────────────────────────────────── */
.app-page .sidebar .nav-item,
.app-page .sidebar .nav-top-item{
  position:relative;
  background-image:none!important; box-shadow:none!important;
  display:flex!important; align-items:center; gap:10px;
  min-height:38px!important; height:auto!important;
  padding:0 10px!important; margin:0!important;
  border:0!important; border-radius:9px!important;
  background:transparent!important;
  color:var(--sb-ink-2)!important;
  font-size:13px!important; font-weight:600!important; line-height:1.4;
  cursor:pointer;
  transition:background .13s ease, color .13s ease;
}
.app-page .sidebar .nav-item>span:first-child,
.app-page .sidebar .nav-top-item>span:not(.section-icon){
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:start;
}

/* Icon column. Its position in the row is set by mgiot-redesign-2027.css
   (order:-1), which puts it at the leading edge — correct in both directions —
   so only its size and colour are set here. */
.app-page .sidebar .nav-item .nav-item-icon,
.app-page .sidebar .nav-top-item .section-icon{
  flex:0 0 20px; width:20px; height:20px;
  display:grid!important; place-items:center;
  color:var(--sb-mute)!important; font-size:14px;
  background:transparent!important; border:0!important;
  transition:color .13s ease;
}
.app-page .sidebar .nav-item .nav-item-icon svg,
.app-page .sidebar .nav-top-item .section-icon svg{ width:17px!important; height:17px!important; }

.app-page .sidebar .nav-item:hover,
.app-page .sidebar .nav-top-item:hover{ background:var(--sb-hover)!important; color:var(--sb-ink)!important; }
.app-page .sidebar .nav-item:hover .nav-item-icon,
.app-page .sidebar .nav-top-item:hover .section-icon{ color:var(--sb-ink-2)!important; }

/* Active: a spine on the rail edge, not a filled block. A solid bar on every
   selected row is a lot of weight in a menu this long, and it left no room to
   show hover on top of it. */
.app-page .sidebar .nav-item.active,
.app-page .sidebar .nav-top-item.active{
  background:var(--sb-active)!important;
  background-image:none!important;
  color:var(--sb-mark)!important; font-weight:800!important;
  box-shadow:none!important;
  padding-inline-start:15px!important;
}
.app-page .sidebar .nav-item.active::before,
.app-page .sidebar .nav-top-item.active::before{
  content:''; position:absolute;
  inset-inline-start:0;                 /* inside the row: the scroller clips anything outside it */
  top:var(--sb-rail); bottom:var(--sb-rail);
  width:3px; border-radius:0 3px 3px 0;
  background:var(--sb-mark);
}
html[dir="ltr"] .app-page .sidebar .nav-item.active::before,
html[dir="ltr"] .app-page .sidebar .nav-top-item.active::before{ border-radius:3px 0 0 3px; }
.app-page .sidebar .nav-item.active .nav-item-icon,
.app-page .sidebar .nav-top-item.active .section-icon{
  /* Colour only. The inherited sheet gives the selected row's icon a filled
     chip, which next to the tinted row and the spine is a third marker for one
     state. */
  color:var(--sb-mark)!important;
  background:transparent!important; background-image:none!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  width:20px!important; height:20px!important;
}

.app-page .sidebar .nav-item:focus-visible,
.app-page .sidebar .nav-top-item:focus-visible,
.app-page .sidebar .nav-section-hdr:focus-visible{
  outline:2px solid var(--sb-signal); outline-offset:-2px; border-radius:9px;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.app-page .sidebar .sidebar-badge{
  flex:0 0 auto;
  min-width:20px; height:19px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px;
  background:#E23D5A!important; color:#fff!important;
  font-size:11px!important; font-weight:800!important; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ── Groups ─────────────────────────────────────────────────────────────── */
.app-page .sidebar .nav-section{ margin:0!important; }
.app-page .sidebar .nav-section+.nav-section{ margin-top:2px!important; }

/* Quiet label, not a pill. The pill version carried a border and a filled
   background, which read as loud as the selected row underneath it. */
.app-page .sidebar .nav-section-hdr,
.app-page .sidebar .nav-section:not(.collapsed)>.nav-section-hdr{
  display:flex!important; align-items:center; gap:9px;
  height:32px!important; margin-top:9px;
  padding:0 10px!important;
  background:transparent!important; background-image:none!important;
  border:0!important; border-radius:8px!important; box-shadow:none!important;
  color:var(--sb-ink-2)!important;
  font-size:11.5px!important; font-weight:800!important;
  letter-spacing:.03em;
  cursor:pointer;
  transition:color .13s ease, background .13s ease;
}
.app-page .sidebar .nav-section-hdr:hover{ color:var(--sb-ink)!important; background:var(--sb-hover)!important; }
.app-page .sidebar .nav-section-hdr .section-icon,
.app-page .sidebar .nav-section.collapsed>.nav-section-hdr .section-icon,
.app-page .sidebar .nav-section:not(.collapsed)>.nav-section-hdr .section-icon{
  /* One treatment in both states. The inherited sheet gave the collapsed
     heading a filled icon and the open one an outline, so a group appeared to
     change identity when you opened it. */
  flex:0 0 16px;
  color:var(--sb-mute)!important; font-size:12px;
  background:transparent!important; background-image:none!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  width:auto!important; height:auto!important;
  display:grid!important; place-items:center;
}
.app-page .sidebar .nav-section-hdr .section-icon svg{ width:14px!important; height:14px!important; }
.app-page .sidebar .nav-section-hdr .section-label,
.app-page .sidebar .nav-section:not(.collapsed)>.nav-section-hdr .section-label{
  flex:1 1 auto; text-align:start;
  color:var(--sb-ink-2)!important; background:transparent!important;
  font-size:11.5px!important; font-weight:800!important;
}
.app-page .sidebar .nav-section-hdr:hover .section-label{ color:var(--sb-ink)!important; }

/* One glyph for both states, rotated — the markup used ▼ open and ◀ closed,
   which reads as two different controls. */
.app-page .sidebar .nav-section-hdr .section-arrow{
  flex:0 0 auto;
  font-size:9px; color:var(--sb-mute)!important;
  transition:transform .18s ease;
  transform:rotate(0deg);
}
.app-page .sidebar .nav-section.collapsed .nav-section-hdr .section-arrow{ transform:rotate(-90deg); }
html[dir="ltr"] .app-page .sidebar .nav-section.collapsed .nav-section-hdr .section-arrow{ transform:rotate(90deg); }

.app-page .sidebar .nav-section-body{ padding-top:1px!important; }
.app-page .sidebar .nav-section.collapsed .nav-section-body{ display:none!important; }

/* A group's rows are indented under their heading. The indent plus the quieter
   heading is the whole hierarchy cue — a tie line on top of it was one marker
   too many. */
.app-page .sidebar .nav-section-body{ padding-inline-start:11px!important; }

/* ── Footer: a normal flex child again ──────────────────────────────────── */
.app-page .sidebar .sidebar-footer{
  position:static!important;
  flex:0 0 auto; width:auto!important;
  padding:10px 12px!important; margin:0!important;
  background:#fff!important;
  border:0!important; border-top:1px solid var(--sb-line)!important;
  box-shadow:none!important;
}
.app-page .sidebar .footer-brand{
  display:flex!important; align-items:center; gap:10px;
  /* mgiot-design.css paints this a light card with !important, which stays
     light in dark mode and swallows the text on it. The footer itself is the
     surface now. */
  background:transparent!important; background-image:none!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  padding:0!important; margin:0!important;
}
/* The mark already sits in the header; twice in one rail is once too many. */
.app-page .sidebar .footer-logo{ display:none!important; }
.app-page .sidebar .footer-meta{ flex:1 1 auto; min-width:0; }
.app-page .sidebar .footer-role{
  display:block; font-size:12px!important; font-weight:700!important;
  color:var(--sb-ink)!important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-page .sidebar .footer-copy{
  display:block; font-size:10.5px!important; font-weight:500!important;
  color:var(--sb-mute)!important; letter-spacing:.02em;
}
.app-page .sidebar .footer-logout{
  flex:0 0 34px; width:34px!important; height:34px!important;
  display:grid!important; place-items:center;
  border-radius:9px!important;
  border:1px solid var(--sb-line)!important;
  background:#fff!important; color:#C6304A!important;
  cursor:pointer;
  transition:background .13s ease, border-color .13s ease, color .13s ease;
}
.app-page .sidebar .footer-logout:hover{
  background:#FDF2F4!important; border-color:#F3C6CF!important; color:#A81F38!important;
}
.app-page .sidebar .footer-logout:focus-visible{ outline:2px solid var(--sb-signal); outline-offset:2px; }

/* ── Dark ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .app-page .sidebar{
  --sb-ink:#EAF1FA; --sb-ink-2:#B8C9DE; --sb-mute:#7C93AE;
  --sb-line:rgba(140,180,225,.15);
  --sb-hover:rgba(140,180,225,.09);
  --sb-active:rgba(71,158,221,.14);
  --sb-mark:#7FD8FF;
  background:#0B1A2E!important;
}
html[data-theme="dark"] .app-page .sidebar .sidebar-header,
html[data-theme="dark"] .app-page .sidebar .sidebar-footer{ background:#0B1A2E!important; }
html[data-theme="dark"] .app-page .sidebar .sidebar-logo-box{ background:rgba(140,180,225,.08)!important; }
html[data-theme="dark"] .app-page .sidebar .sidebar-nav{ scrollbar-color:rgba(140,180,225,.28) transparent; }
html[data-theme="dark"] .app-page .sidebar .sidebar-nav::-webkit-scrollbar-thumb{
  background:rgba(140,180,225,.26); border-color:#0B1A2E;
}
html[data-theme="dark"] .app-page .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb{ background:rgba(140,180,225,.4); }
html[data-theme="dark"] .app-page .sidebar .footer-logout{
  background:rgba(140,180,225,.06)!important; color:#FF9DAD!important;
}
html[data-theme="dark"] .app-page .sidebar .footer-logout:hover{
  background:rgba(226,61,90,.16)!important; border-color:rgba(226,61,90,.4)!important;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */
/* Width and the slide-in transform are left to the existing responsive rules —
   the rail already lands fully on screen at 280px with its footer visible, and
   a width override here did not win the cascade, so shipping one would just be
   a declaration that lies about what it does. Only the shadow is raised, to
   separate the rail from the page it now covers. */
@media (max-width:1023px){
  .app-page.active>.sidebar,
  .app-page .sidebar{ box-shadow:-18px 0 45px rgba(15,23,42,.16)!important; }
}

@media (prefers-reduced-motion:reduce){
  .app-page .sidebar .nav-item,
  .app-page .sidebar .nav-top-item,
  .app-page .sidebar .nav-section-hdr,
  .app-page .sidebar .section-arrow,
  .app-page .sidebar .footer-logout{ transition:none; }
  .app-page .sidebar .sidebar-nav{ scroll-behavior:auto; }
}