/* Portal-wide desktop sidebar shell for staff/principal navigation only.
 * Student pages keep their existing dashboard/mobile app navigation unchanged.
 */
@media (min-width: 993px) {
  .dashboard-layout[data-portal-navigation-audience="staff"] {
    --portal-sidebar-width: 280px;
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    /* Avoid creating a non-scrolling overflow ancestor that defeats sticky headers. */
    overflow: visible !important;
  }

  /*
   * Desktop staff navigation is a true application rail, not part of document
   * scroll. The rail remains pinned while the page content scrolls; only the
   * navigation list itself can scroll when a role has many links.
   */
  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar {
    width: var(--portal-sidebar-width) !important;
    min-width: var(--portal-sidebar-width) !important;
    max-width: var(--portal-sidebar-width) !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    align-self: auto;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    overscroll-behavior: contain;
    z-index: 3000;
    transition: width .28s cubic-bezier(.2,.8,.2,1), min-width .28s cubic-bezier(.2,.8,.2,1), padding .28s ease !important;
  }

  /* Keep the portal identity anchored while only navigation scrolls. */
  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar > div:first-of-type {
    flex: 0 0 auto;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar > ul.nav.flex-column {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: 1rem;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar > ul.nav.flex-column::-webkit-scrollbar {
    width: 7px;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar > ul.nav.flex-column::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .28);
    border-radius: 999px;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar > ul.nav.flex-column::-webkit-scrollbar-track {
    background: transparent;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] > .dashboard-content {
    box-sizing: border-box;
    margin-left: var(--portal-sidebar-width);
    width: calc(100% - var(--portal-sidebar-width));
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* Document scroll owns vertical movement; this keeps sticky positioned to viewport. */
    overflow: visible !important;
    transition: margin-left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), padding .28s ease;
  }

  /*
   * The desktop header remains available while the workspace scrolls so the
   * rail can be collapsed/expanded from anywhere on a long page.
   */
  .dashboard-layout[data-portal-navigation-audience="staff"] .dashboard-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2400;
    margin-top: 0 !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .dashboard-layout[data-portal-navigation-audience="staff"] .sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact {
    --portal-sidebar-width: 84px;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact > .sidebar {
    padding-left: .65rem !important;
    padding-right: .65rem !important;
    overflow-x: visible !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact > .dashboard-content {
    margin-left: var(--portal-sidebar-width);
    width: calc(100% - var(--portal-sidebar-width));
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar > div:first-of-type {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar > div:first-of-type > div:first-child {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 8px !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar > div:first-of-type > div:last-child {
    font-size: 0 !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar > div:first-of-type > div:last-child::after {
    content: "SHCSS";
    font-size: .66rem;
    letter-spacing: .06em;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar-heading {
    height: 24px;
    overflow: hidden;
    padding: .4rem 0 !important;
    margin-top: .8rem !important;
    font-size: 0 !important;
    text-align: center;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar-heading::after {
    content: "•••";
    font-size: .7rem;
    letter-spacing: .16em;
    color: #94a3b8;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .nav-item {
    position: relative;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .nav-item > a {
    min-height: 44px;
    justify-content: center !important;
    padding: .7rem .45rem !important;
    font-size: 0 !important;
    border-radius: 11px !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .nav-item > a > span {
    font-size: 0 !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .nav-item > a i {
    width: auto !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .submenu-icon,
  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .dropdown-icon {
    display: none !important;
  }

  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .submenu,
  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .admin-submenu,
  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .fees-submenu,
  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .academic-submenu,
  .dashboard-layout[data-portal-navigation-audience="staff"].portal-sidebar-compact .sidebar .teacher-submenu {
    display: none !important;
  }

  .portal-sidebar-tooltip {
    position: fixed;
    z-index: 12000;
    pointer-events: none;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: .75rem;
    line-height: 1.3;
    box-shadow: 0 10px 24px rgba(15,23,42,.22);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
  }

  .portal-sidebar-tooltip.show {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 992px) {
  .dashboard-layout.portal-sidebar-compact {
    --portal-sidebar-width: initial;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-layout[data-portal-navigation-audience="staff"] > .sidebar,
  .dashboard-layout[data-portal-navigation-audience="staff"] > .dashboard-content,
  .portal-sidebar-tooltip {
    transition: none !important;
  }
}