/* PERSISTENT 8-DESTINATION SIDEBAR & WORKSPACE RESPONSIVE STYLES */
  #main-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    height: 100vh !important;
    background: var(--ti-bg2, #0F172A) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    z-index: 1000 !important;
  }
  .sidebar-nav .nav-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--ti-muted, #94A3B8) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }
  .sidebar-nav .nav-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ti-text, #F8FAFC) !important;
  }
  .sidebar-nav .nav-item.active {
    background: linear-gradient(135deg, var(--ti-blue, #2563EB) 0%, var(--ti-blue, #1D4ED8) 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
  }
  .sidebar-nav .nav-icon {
    font-size: 1.1rem !important;
    width: 22px !important;
    text-align: center !important;
  }
  .sidebar-nav .nav-label {
    flex: 1 !important;
  }
  
  /* Below 900px: Collapse Sidebar to off-canvas drawer with Hamburger button */
  @media (max-width: 900px) {
    #main-sidebar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      height: 100vh !important;
      width: 270px !important;
      max-width: 85vw !important;
      z-index: 1000000 !important;
      transform: translateX(-100%) !important;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
      box-shadow: 10px 0 35px rgba(0, 0, 0, 0.8) !important;
    }
    #main-sidebar.open {
      transform: translateX(0) !important;
    }
    #sidebar-mobile-toggle {
      display: inline-flex !important;
    }
    #sidebar-close-btn {
      display: block !important;
    }
  }

/* Phones: the top bar was wider than the screen, so the language, theme and sync
   controls were cut off with no way to reach them. Search keeps its icon, the rest wraps. */
@media (max-width: 600px) {
  #main-topbar, #main-topbar > div:last-child { flex-wrap: wrap; }
  #main-topbar > div:last-child { justify-content: flex-end; row-gap: 6px; }
  #topbar-search-btn span:nth-child(2), #topbar-search-btn kbd { display: none; }
  /* a phone rule elsewhere stretches every select to the full width */
  #global-studio-language-select { flex: 0 0 auto; width: auto !important; max-width: 140px; }
}