/* QA 790: keep the navigation rail continuous and render collapsed labels above the page. */
@media (min-width: 901px) {
  .premium-app > .crm-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    align-self: start !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #081824 0%, #06131d 100%) !important;
  }

  .premium-app > .crm-sidebar > .sidebar-scroll {
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
  }

  .premium-app.sidebar-collapsed > .crm-sidebar > .sidebar-scroll {
    width: 76px !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

.sidebar-collapsed .tab-button[title]:hover::after,
.sidebar-collapsed .workspace-card-actions button[title]:hover::after {
  display: none !important;
  content: none !important;
}

.collapsed-sidebar-flyout {
  position: fixed;
  z-index: 50000;
  isolation: isolate;
  min-width: max-content;
  max-width: min(260px, calc(100vw - 28px));
  padding: 9px 13px;
  color: #f5f6f7;
  background: #121212;
  border: 1px solid #4a515c;
  border-left: 3px solid #f58216;
  border-radius: 7px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .5);
  font-family: var(--ifg-font-sans, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transform: none;
  filter: none;
  backdrop-filter: none;
  text-shadow: none;
  font-synthesis: none;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  will-change: auto;
}

/* Phones use a full navigation drawer, never the compact desktop rail.
   Keep every label on the same crisp rendering path as the flyout. */
@media (max-width: 900px) {
  .premium-app.menu-open > .crm-sidebar {
    width: min(330px, 88vw) !important;
    padding: 18px 16px !important;
    overflow: hidden !important;
    background: #11161c !important;
  }

  .premium-app.menu-open > .crm-sidebar > .sidebar-scroll {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 0 96px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #11161c !important;
  }

  .premium-app.menu-open .crm-sidebar :where(
    .brand-text,
    .workspace-card-body,
    .workspace-color-row,
    .nav-section-label,
    .nav-label,
    .sidebar-collapse-btn span
  ) {
    display: block !important;
    font-synthesis: none;
    text-rendering: auto !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-shadow: none !important;
    filter: none !important;
  }

  .premium-app.menu-open .crm-sidebar .workspace-card-actions span:not(.nav-badge) {
    display: inline !important;
  }

  .premium-app.menu-open .crm-sidebar .tab-button {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  .premium-app.menu-open .crm-sidebar .tab-button .nav-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .premium-app.menu-open .crm-sidebar .nav-label {
    color: #f5f6f7 !important;
    font-family: var(--ifg-font-sans, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .premium-app.menu-open .crm-sidebar .sidebar-collapse-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 12px !important;
  }

  .premium-app.menu-open .crm-sidebar .sidebar-collapse-btn svg {
    transform: none !important;
  }

  .collapsed-sidebar-flyout {
    display: none !important;
  }
}