/*
 * Interaction layer 2026-08-06
 *
 * Keep the compact shell as the default so page content retains its width.
 * On a fine pointer the sidebar expands over the page while the pointer is
 * inside it. A deliberate click on the small control pins the expanded view.
 * Touch and narrow viewports retain the existing click/drawer behavior.
 */
@media (min-width: 993px) and (hover: hover) and (pointer: fine) {
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    flex: 0 0 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    overflow: visible !important;
    position: relative !important;
    width: 70px !important;
    z-index: 300 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-scroll {
    box-sizing: border-box !important;
    min-height: 100% !important;
    overflow: visible !important;
    position: relative !important;
    transition: width 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
    width: 100% !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-scroll,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-scroll {
    background: var(--qms-surface, #ffffff) !important;
    border-inline-end: 1px solid var(--qms-border, #d8e3ee) !important;
    box-shadow: 18px 0 34px rgba(15, 23, 42, 0.14) !important;
    min-height: calc(100vh - var(--qms-topbar-height, 74px)) !important;
    position: absolute !important;
    top: 0 !important;
    width: 248px !important;
    z-index: 2 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .brand-mini-copy,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .brand-mini-copy,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .nav-group-meta > span:not(.nav-group-icon),
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .nav-group-meta > span:not(.nav-group-icon),
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .nav-group-chevron,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .nav-group-chevron,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-footer,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-footer {
    display: block !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .brand-mini,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .brand-mini,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .nav-group-meta,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .nav-group-meta {
    justify-content: flex-start !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .nav-group-meta > span:not(.nav-group-icon),
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .nav-group-meta > span:not(.nav-group-icon) {
    min-width: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .nav-group-toggle,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .nav-group-toggle {
    justify-content: space-between !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    width: 100% !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-flyout-stage,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-flyout-stage {
    inset-inline-start: 258px !important;
  }

  body.dir-rtl:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-flyout-stage,
  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-flyout-stage,
  body.dir-rtl:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-flyout-stage,
  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-flyout-stage {
    inset-inline-end: 258px !important;
    inset-inline-start: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-hover-expanded .sidebar-footer,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout.is-pinned-expanded .sidebar-footer {
    padding-inline: 4px !important;
  }
}

body:not(.login-body) .sidebar-view-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--qms-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  height: 30px;
  justify-content: center;
  margin-inline-start: auto;
  min-width: 30px;
  padding: 0;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  width: 30px;
}

body:not(.login-body) .sidebar-view-toggle:hover,
body:not(.login-body) .sidebar-view-toggle[aria-pressed="true"] {
  background: var(--qms-surface-soft, #eef5f8);
  border-color: var(--qms-border, #d8e3ee);
  color: var(--qms-primary, #0f766e);
}

body:not(.login-body) .sidebar-top {
  align-items: center;
  display: flex;
  gap: 6px;
}

@media (max-width: 992px) {
  body:not(.login-body) .sidebar-view-toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.login-body) .sidebar.sidebar-flyout-layout .sidebar-scroll,
  body:not(.login-body) .sidebar-view-toggle {
    transition: none !important;
  }
}