/* =========================================================
   SHELL MOCKUP V2.38.0
   Full viewport grid: sidebar | header/content/footer
   No outer gap. Header/footer resize automatically with sidebar.
   ========================================================= */

:root{
  --shell-header-height: 98px;
  --shell-footer-height: 54px;
  --shell-content-pad-x: 24px;
  --shell-content-pad-y: 18px;
  --fixed-header-height: 0px;
  --fixed-footer-height: 0px;
  --app-gap: 0px;
  --shell-navy: #0b2f63;
  --shell-blue: #1d4ed8;
  --shell-cyan: #1fb6d4;
  --shell-teal: #0ea5a4;
}

html,
body{
  width:100%;
  max-width:100%;
  min-width:0;
}

body:not(.auth-required){
  overflow:hidden;
}

/* One shell owns the viewport. No margin/gutter around the app. */
.app-shell,
.app-shell.sidebar-collapsed{
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  gap:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:100dvh;
  align-items:stretch;
}

.app-shell{
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
}

.app-shell.sidebar-collapsed{
  grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr);
}

/* Sidebar is the real first grid column, not an overlay on desktop. */
.app-shell > .sidebar{
  grid-column:1;
  grid-row:1;
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  height:100dvh !important;
  min-height:0;
  margin:0 !important;
  border-radius:0 !important;
  overflow-y:auto;
  overflow-x:hidden;
  background:
    linear-gradient(180deg,#082c5a 0%,#0a3764 55%,#0b5a63 100%);
  border-right:1px solid rgba(255,255,255,.10);
}

.app-shell > .sidebar .brand{
  background:linear-gradient(180deg,#082c5a 0%,#09345f 100%);
}

/* Main becomes a true 3-row app shell. */
.app-shell > .main{
  grid-column:2;
  grid-row:1;
  width:auto;
  height:100dvh;
  min-width:0;
  min-height:0;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  display:grid;
  grid-template-rows:var(--shell-header-height) minmax(0,1fr) var(--shell-footer-height);
  background:#f5f9fd;
}

/* Header: flush top/right/sidebar, no outer card gap. */
.app-shell .topbar,
.app-shell.sidebar-collapsed .topbar{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  grid-row:1;
  z-index:40;
  width:100%;
  height:100%;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 24px 0 92px !important;
  border:0 !important;
  border-bottom:1px solid #d7e5f1 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 94% 18%, rgba(14,165,164,.10) 0 2px, transparent 2.4px) 0 0/14px 14px,
    linear-gradient(110deg,#ffffff 0%,#ffffff 56%,#f3fbff 78%,#edfdf9 100%);
  box-shadow:0 8px 26px rgba(15,23,42,.07) !important;
  backdrop-filter:none;
}

/* Blue/teal diagonal brand accent like the approved mockup. */
.app-shell .topbar::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  width:72px;
  background:
    linear-gradient(116deg,
      #19c4d1 0 23%,
      #19c4d1 23% 31%,
      transparent 31% 38%,
      #1d8ff2 38% 64%,
      transparent 64%);
  opacity:.96;
  pointer-events:none;
}

.app-shell .topbar::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-52px;
  right:150px;
  width:270px;
  height:150px;
  border-radius:50%;
  border:28px solid rgba(29,78,216,.045);
  transform:rotate(-10deg);
  pointer-events:none;
}

.app-shell .topbar > *{
  position:relative;
  z-index:1;
}

/* Final brand format: ONE line + facility below. */
.header-brand-lockup{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto;
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}

.header-brand-line{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:7px;
  max-width:100%;
  line-height:1;
  letter-spacing:-.025em;
  overflow:hidden;
}

.header-brand-smart,
.header-brand-ncd,
.header-brand-system{
  font-weight:900;
  font-size:clamp(22px,2vw,30px);
  line-height:1;
}

.header-brand-smart{
  color:#174ea6;
}

.header-brand-ncd{
  color:transparent;
  background:linear-gradient(90deg,#08a9bb 0%,#14b89c 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.header-brand-system{
  color:#113b74;
}

.header-facility-name{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#607795;
  font-size:13px;
  font-weight:700;
  line-height:1.25;
}

/* Keep right-side controls compact and mockup-like. */
.app-shell .header-tools{
  flex:0 0 auto;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap !important;
  gap:10px;
  min-width:0;
}

.app-shell .header-tools .icon-button{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(180deg,#f9fdff,#eef8fb);
  border:1px solid #d9e8f2;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}

.app-shell .user-chip{
  min-height:42px;
  border-radius:14px;
  border:1px solid #d9e8f2;
  background:rgba(255,255,255,.88);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}

/* Scroll ONLY the workspace; header/footer never move. */
.app-shell .main-content{
  grid-row:2;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
  padding:var(--shell-content-pad-y) var(--shell-content-pad-x);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  background:
    radial-gradient(circle at -3% 101%, rgba(29,78,216,.07) 0 170px, transparent 171px),
    radial-gradient(circle at 103% 0%, rgba(14,165,164,.055) 0 190px, transparent 191px),
    linear-gradient(180deg,#f8fbfe 0%,#f4f9fd 100%);
}

/* Old fixed-shell offsets must not create phantom gaps inside main-content. */
.app-shell .main-content .global-filter-bar,
.app-shell .main-content .dashboard-tabs{
  top:0 !important;
}

.app-shell .main-content > .view{
  margin-top:0;
}

/* Footer: flush bottom/right/sidebar and follows grid width automatically. */
.app-shell .app-footer,
.app-shell.sidebar-collapsed .app-footer{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  grid-row:3;
  z-index:35;
  width:100%;
  height:100%;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 28px 0 34px !important;
  border:0 !important;
  border-top:1px solid #d7e5f1 !important;
  border-radius:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:14px;
  overflow:hidden;
  color:#607795;
  font-size:11px;
  background:
    linear-gradient(105deg,#f7fdff 0%,#ffffff 30%,#ffffff 70%,#effcf8 100%);
  box-shadow:0 -8px 24px rgba(15,23,42,.055) !important;
  backdrop-filter:none !important;
}

.app-shell .app-footer::before,
.app-shell .app-footer::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:30px;
  pointer-events:none;
}

.app-shell .app-footer::before{
  left:0;
  background:linear-gradient(135deg,#14c5cc 0 38%,#168be8 40% 72%,transparent 73%);
}

.app-shell .app-footer::after{
  right:0;
  transform:scaleX(-1);
  background:linear-gradient(135deg,#14c5cc 0 38%,#168be8 40% 72%,transparent 73%);
}

.app-shell .footer-main,
.app-shell .footer-developer,
.app-shell .footer-system{
  position:relative;
  z-index:1;
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap !important;
  gap:7px;
  min-width:0;
  white-space:nowrap;
}

.app-shell .footer-main{
  flex:1 1 auto;
  overflow:hidden;
}

.app-shell .footer-main > *{
  flex:0 0 auto;
}

.app-shell .footer-main strong{
  color:#17365f;
  font-weight:800;
}

.app-shell .footer-main a{
  color:#1d64c8;
}

.app-shell .footer-system{
  flex:0 0 auto;
  justify-content:flex-end;
  gap:8px;
}

.app-shell #appVersion{
  color:#165ec8;
  font-weight:800;
}

.app-shell .footer-sync-status{
  min-height:36px;
  padding:5px 10px;
  border-radius:999px;
  background:#ecfbf4;
  border:1px solid #cdf2de;
  box-shadow:none;
}

.app-shell .footer-sync-status strong{
  color:#0b8552;
}

.app-shell .footer-sync-status small{
  color:#67917e;
}

/* Desktop collapse: grid column changes; header/footer/content need NO left calc. */
@media (min-width:1181px){
  .app-shell.sidebar-collapsed > .main{
    grid-column:2;
  }
}

/* Tablet keeps the existing compact sidebar and still uses the same grid shell. */
@media (max-width:1180px) and (min-width:769px){
  :root{
    --shell-header-height:92px;
    --shell-footer-height:54px;
    --shell-content-pad-x:18px;
    --shell-content-pad-y:14px;
  }

  .app-shell,
  .app-shell.sidebar-collapsed{
    display:grid !important;
    grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr) !important;
    grid-template-rows:100dvh;
  }

  .app-shell .topbar,
  .app-shell.sidebar-collapsed .topbar{
    left:auto !important;
    right:auto !important;
    padding:0 16px 0 70px !important;
  }

  .app-shell .topbar::before{
    width:54px;
  }

  .header-brand-smart,
  .header-brand-ncd,
  .header-brand-system{
    font-size:clamp(17px,2vw,23px);
  }

  .header-facility-name{
    font-size:11px;
  }

  .app-shell .app-footer,
  .app-shell.sidebar-collapsed .app-footer{
    left:auto !important;
    right:auto !important;
    padding:0 18px 0 24px !important;
  }

  .app-shell .footer-main a,
  .app-shell .footer-divider{
    display:none;
  }
}

/* Mobile: sidebar remains a drawer; main owns the entire screen. */
@media (max-width:768px){
  :root{
    --shell-header-height:126px;
    --shell-footer-height:78px;
    --shell-content-pad-x:10px;
    --shell-content-pad-y:10px;
  }

  .app-shell,
  .app-shell.sidebar-collapsed{
    display:block !important;
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
  }

  .app-shell > .sidebar{
    position:fixed !important;
    z-index:60;
    top:0 !important;
    left:0 !important;
    width:min(86vw,280px) !important;
    height:100dvh !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
  }

  .app-shell.sidebar-open > .sidebar{
    transform:translateX(0);
  }

  .app-shell > .main{
    width:100vw;
    height:100dvh;
    display:grid !important;
    grid-template-rows:var(--shell-header-height) minmax(0,1fr) var(--shell-footer-height);
    padding:0 !important;
  }

  .app-shell .topbar,
  .app-shell.sidebar-collapsed .topbar{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100%;
    height:100%;
    padding:8px 10px 8px 38px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto;
    align-content:center;
    gap:6px 8px;
  }

  .app-shell .topbar::before{
    width:28px;
  }

  .header-brand-line{
    gap:4px;
  }

  .header-brand-smart,
  .header-brand-ncd,
  .header-brand-system{
    font-size:clamp(13px,4vw,18px);
  }

  .header-facility-name{
    font-size:9px;
  }

  .app-shell .header-tools{
    grid-column:1 / -1 !important;
    width:100%;
    justify-content:flex-end;
  }

  .app-shell .header-tools .icon-button{
    width:36px;
    height:36px;
  }

  .app-shell .user-chip{
    min-height:36px;
  }

  .app-shell .main-content{
    padding:10px;
  }

  .app-shell .app-footer,
  .app-shell.sidebar-collapsed .app-footer{
    position:relative !important;
    width:100%;
    height:100%;
    padding:6px 14px 6px 20px !important;
    display:grid !important;
    grid-template-columns:1fr;
    align-content:center !important;
    gap:2px;
    font-size:9px;
  }

  .app-shell .footer-main,
  .app-shell .footer-system{
    width:100%;
    justify-content:center;
    overflow:hidden;
    gap:5px;
  }

  .app-shell .footer-main a,
  .app-shell .footer-main .footer-divider{
    display:none;
  }

  .app-shell .footer-sync-status{
    min-height:28px;
    padding:3px 7px;
  }
}


/* =========================================================
   SIDEBAR THEME V2.38.1
   Match header/footer language: navy + blue + teal gradients.
   Keep existing navigation structure and logic.
   ========================================================= */

.app-shell > .sidebar{
  color:#f8fbff;
  padding:14px 12px 12px !important;
  gap:8px !important;
  border-right:1px solid rgba(151,227,239,.18) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.05),
    8px 0 26px rgba(7,38,80,.10);
  background:
    radial-gradient(circle at 18% 4%, rgba(44,196,224,.22) 0 78px, transparent 79px),
    radial-gradient(circle at 112% 88%, rgba(17,184,161,.28) 0 150px, transparent 151px),
    linear-gradient(180deg,#082e60 0%,#0a4275 46%,#086573 100%) !important;
  scrollbar-color:rgba(157,220,241,.45) transparent;
  scrollbar-width:thin;
}

.app-shell > .sidebar::-webkit-scrollbar,
.app-shell > .sidebar .nav::-webkit-scrollbar{
  width:6px;
}
.app-shell > .sidebar::-webkit-scrollbar-track,
.app-shell > .sidebar .nav::-webkit-scrollbar-track{
  background:transparent;
}
.app-shell > .sidebar::-webkit-scrollbar-thumb,
.app-shell > .sidebar .nav::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(165,226,239,.34);
}

/* Brand block aligns visually with header brand, while keeping sidebar logo. */
.app-shell > .sidebar .brand{
  position:sticky;
  top:-14px;
  z-index:14;
  margin:-14px -12px 2px !important;
  padding:14px 12px 13px !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) 38px;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(173,226,242,.15) !important;
  background:
    linear-gradient(180deg,rgba(5,38,82,.98) 0%,rgba(7,55,99,.95) 100%) !important;
  box-shadow:0 10px 24px rgba(1,24,52,.10);
}

.app-shell > .sidebar .brand-logo{
  width:48px !important;
  height:48px !important;
  padding:4px !important;
  border-radius:12px !important;
  border:1px solid rgba(194,236,246,.65);
  background:#fff;
  box-shadow:
    0 8px 20px rgba(0,25,61,.22),
    0 0 0 3px rgba(21,183,200,.08);
}

.app-shell > .sidebar .brand-copy{
  min-width:0;
}
.app-shell > .sidebar .brand-copy strong{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
}
.app-shell > .sidebar .brand-copy span{
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#cbe9f6;
  font-size:11px;
  font-weight:600;
}

/* Hamburger stays INSIDE sidebar. */
.app-shell > .sidebar .sidebar-brand-toggle{
  width:38px !important;
  height:38px !important;
  margin-left:0 !important;
  border-radius:11px !important;
  border:1px solid rgba(181,232,245,.22) !important;
  color:#effcff !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 15px rgba(0,28,66,.16);
  font-size:20px;
}
.app-shell > .sidebar .sidebar-brand-toggle:hover{
  border-color:rgba(181,232,245,.48) !important;
  background:linear-gradient(135deg,#179dd7,#11afa9) !important;
  transform:translateY(-1px);
}
.app-shell > .sidebar .sidebar-brand-toggle:active{
  transform:translateY(0);
}

/* Main nav rhythm */
.app-shell > .sidebar .nav{
  gap:5px !important;
  padding:4px 2px 2px 0 !important;
}
.app-shell > .sidebar .nav-group{
  padding:4px 0 6px !important;
  border-bottom:1px solid rgba(194,232,244,.075);
}
.app-shell > .sidebar .nav-group:last-of-type{
  border-bottom:0;
}

/* Parent buttons */
.app-shell > .sidebar .nav-section-toggle{
  min-height:40px !important;
  padding:7px 9px !important;
  grid-template-columns:25px minmax(0,1fr) 18px !important;
  gap:8px !important;
  border:1px solid transparent !important;
  border-radius:11px !important;
  color:#e7f6fc !important;
  background:transparent !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.app-shell > .sidebar .nav-section-toggle:hover{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(175,225,241,.13) !important;
}
.app-shell > .sidebar .nav-section-toggle .nav-parent-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#d9f6ff !important;
  background:rgba(116,204,229,.10);
  font-size:13px;
}
.app-shell > .sidebar .nav-section-toggle b{
  color:#9fd9eb;
  font-size:13px;
}

/* Active parent feels like the mockup but not too loud. */
.app-shell > .sidebar .nav-group.active-parent > .nav-section-toggle{
  color:#fff !important;
  border-color:rgba(109,224,230,.22) !important;
  background:
    linear-gradient(90deg,rgba(12,169,191,.34),rgba(22,112,205,.20)) !important;
  box-shadow:
    inset 3px 0 0 #3ce3dc,
    0 6px 16px rgba(0,31,76,.08) !important;
}
.app-shell > .sidebar .nav-group.active-parent > .nav-section-toggle .nav-parent-icon{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(28,197,207,.34),rgba(38,137,220,.26));
}

/* Child navigation */
.app-shell > .sidebar .nav-submenu{
  gap:3px !important;
  padding:3px 0 1px 7px !important;
}
.app-shell > .sidebar .nav-item{
  min-height:37px !important;
  padding:6px 8px !important;
  grid-template-columns:28px minmax(0,1fr) auto !important;
  column-gap:8px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  color:#dcecf5 !important;
  background:transparent !important;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}
.app-shell > .sidebar .nav-item i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#cfeeff !important;
  background:rgba(123,204,229,.09) !important;
  font-size:12px !important;
}
.app-shell > .sidebar .nav-item:hover{
  color:#fff !important;
  border-color:rgba(173,226,242,.12) !important;
  background:rgba(255,255,255,.075) !important;
}
.app-shell > .sidebar .nav-item:hover i{
  background:rgba(83,208,224,.16) !important;
}

/* Active item = blue to cyan to teal. */
.app-shell > .sidebar .nav-item.active,
.app-shell > .sidebar .nav-item.primary.active{
  color:#fff !important;
  border-color:rgba(132,232,236,.32) !important;
  background:
    linear-gradient(100deg,#1769df 0%,#1789df 47%,#10b6b1 100%) !important;
  box-shadow:
    0 8px 20px rgba(4,59,132,.24),
    inset 3px 0 0 #67f2e5 !important;
}
.app-shell > .sidebar .nav-item.active i{
  color:#fff !important;
  background:rgba(255,255,255,.15) !important;
}

/* Keep alert badges easy to scan. */
.app-shell > .sidebar .nav-badge{
  min-width:27px !important;
  height:21px !important;
  padding:0 6px !important;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg,#ffad24,#f28705) !important;
  box-shadow:0 4px 10px rgba(117,62,0,.16);
}
.app-shell > .sidebar .nav-badge.danger{
  background:linear-gradient(180deg,#fb4a4a,#dc2626) !important;
  box-shadow:0 4px 10px rgba(127,17,17,.16);
}

/* System section */
.app-shell > .sidebar .nav-system-tools{
  margin-top:5px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(183,229,242,.14) !important;
}
.app-shell > .sidebar .nav-system-label{
  color:#7fb7d2 !important;
  font-size:9px !important;
  letter-spacing:.08em !important;
}

/* Decorative bottom glow ties into footer accent without adding images. */
.app-shell > .sidebar::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-58px;
  bottom:-92px;
  width:240px;
  height:180px;
  border-radius:50%;
  background:
    radial-gradient(circle at 56% 28%,rgba(22,201,191,.28),rgba(17,148,213,.16) 45%,transparent 70%);
  pointer-events:none;
}
.app-shell > .sidebar > *{
  position:relative;
  z-index:1;
}

/* Expanded sidebar brand and hamburger */
@media (min-width:1181px){
  .app-shell:not(.sidebar-collapsed) > .sidebar .brand{
    grid-template-columns:48px minmax(0,1fr) 38px !important;
  }
}

/* Collapsed sidebar stays usable: logo + hamburger, then icon-only navigation. */
@media (min-width:769px){
  .app-shell.sidebar-collapsed > .sidebar{
    padding:10px 8px 10px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .brand{
    top:-10px;
    margin:-10px -8px 4px !important;
    padding:10px 8px 11px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center;
    gap:7px;
  }

  .app-shell.sidebar-collapsed > .sidebar .brand-logo{
    width:42px !important;
    height:42px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .brand-copy{
    display:none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-brand-toggle{
    width:36px !important;
    height:34px !important;
    display:grid !important;
    place-items:center;
    background:linear-gradient(135deg,#157cce,#0fa9ad) !important;
    border-color:rgba(162,232,240,.38) !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav{
    padding-right:0 !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-section-toggle{
    grid-template-columns:1fr !important;
    justify-items:center;
    padding:6px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-section-toggle > span,
  .app-shell.sidebar-collapsed > .sidebar .nav-section-toggle > b,
  .app-shell.sidebar-collapsed > .sidebar .nav-item > span,
  .app-shell.sidebar-collapsed > .sidebar .nav-item > small,
  .app-shell.sidebar-collapsed > .sidebar .nav-badge,
  .app-shell.sidebar-collapsed > .sidebar .nav-system-label{
    display:none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-section-toggle .nav-parent-icon{
    width:32px;
    height:32px;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-submenu{
    padding-left:0 !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item{
    grid-template-columns:1fr !important;
    justify-items:center;
    padding:5px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item i{
    width:32px;
    height:32px;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item.active{
    box-shadow:
      0 7px 16px rgba(4,59,132,.22),
      inset 0 0 0 1px rgba(116,237,232,.24) !important;
  }
}

/* Tablet follows collapsed visual language. */
@media (max-width:1180px) and (min-width:769px){
  .app-shell > .sidebar{
    padding:10px 8px 10px !important;
  }
  .app-shell > .sidebar .brand{
    top:-10px;
    margin:-10px -8px 4px !important;
    padding:10px 8px 11px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center;
    gap:7px;
  }
  .app-shell > .sidebar .brand-copy{
    display:none !important;
  }
  .app-shell > .sidebar .sidebar-brand-toggle{
    width:36px !important;
    height:34px !important;
    margin:0 !important;
  }
}

/* Mobile drawer: restore expanded labels and familiar top row. */
@media (max-width:768px){
  .app-shell > .sidebar{
    padding:14px 12px 12px !important;
  }
  .app-shell > .sidebar .brand{
    top:-14px;
    margin:-14px -12px 2px !important;
    padding:14px 12px 13px !important;
    grid-template-columns:48px minmax(0,1fr) 38px !important;
    justify-items:stretch;
  }
  .app-shell > .sidebar .brand-copy{
    display:block !important;
  }
  .app-shell > .sidebar .nav-section-toggle{
    grid-template-columns:25px minmax(0,1fr) 18px !important;
  }
  .app-shell > .sidebar .nav-item{
    grid-template-columns:28px minmax(0,1fr) auto !important;
    justify-items:stretch;
  }
  .app-shell > .sidebar .nav-section-toggle > span,
  .app-shell > .sidebar .nav-section-toggle > b,
  .app-shell > .sidebar .nav-item > span,
  .app-shell > .sidebar .nav-item > small{
    display:initial !important;
  }
}


/* =========================================================
   SHELL INTERACTION FIX V2.38.2
   - active menu background fits 1/2-line labels
   - user dropdown can escape header
   - one scroll container in sidebar, scrollbar hidden
   - main-content scrollbar hidden while scrolling remains enabled
   ========================================================= */

/* 1) Sidebar active/hover geometry follows content height */
.app-shell > .sidebar .nav-item{
  min-height:40px !important;
  height:auto !important;
  padding:7px 8px !important;
  align-items:center !important;
  row-gap:1px !important;
}
.app-shell > .sidebar .nav-item span{
  line-height:1.25 !important;
  align-self:end;
}
.app-shell > .sidebar .nav-item small{
  grid-column:2;
  margin:0 !important;
  line-height:1.15 !important;
  align-self:start;
}
.app-shell > .sidebar .dashboard-main-nav{
  min-height:50px !important;
  height:auto !important;
}
.app-shell > .sidebar .dashboard-main-nav span{
  line-height:1.15 !important;
}
.app-shell > .sidebar .dashboard-main-nav small{
  margin-top:1px !important;
}
.app-shell > .sidebar .nav-item.active,
.app-shell > .sidebar .nav-item.primary.active{
  overflow:visible !important;
}

/* 2) Profile dropdown must not be clipped by header */
.app-shell .topbar,
.app-shell.sidebar-collapsed .topbar{
  overflow:visible !important;
  isolation:isolate;
}
.app-shell .header-tools{
  position:relative;
  z-index:120 !important;
  overflow:visible !important;
}
.app-shell .user-menu{
  position:relative;
  z-index:130 !important;
  overflow:visible !important;
}
.app-shell .user-dropdown{
  z-index:220 !important;
}
.app-shell .user-dropdown[hidden]{
  display:none !important;
}

/* 3) Sidebar: only nav scrolls; outer sidebar never scrolls */
.app-shell > .sidebar{
  overflow:hidden !important;
}
.app-shell > .sidebar .nav{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}
.app-shell > .sidebar .nav::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* 4) Main workspace keeps scroll behavior but hides the visual scrollbar */
.app-shell .main-content{
  overflow:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none;
  scrollbar-gutter:auto !important;
}
.app-shell .main-content::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* collapsed/tablet/mobile keep the same hidden-scrollbar behavior */
@media (max-width:1180px){
  .app-shell > .sidebar,
  .app-shell.sidebar-collapsed > .sidebar{
    overflow:hidden !important;
  }
  .app-shell > .sidebar .nav,
  .app-shell.sidebar-collapsed > .sidebar .nav{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none;
  }
  .app-shell > .sidebar .nav::-webkit-scrollbar,
  .app-shell.sidebar-collapsed > .sidebar .nav::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }
}