/* Desktop Header Styles */

/* Prevent header from wrapping - keep tabs and right side on same line */
@media (min-width: 640px) {
  .header-desktop-container {
    flex-wrap: nowrap !important;
    align-items: flex-start !important; /* Align items to top instead of center */
  }

  /* Make tabs scrollable instead of wrapping */
  .header-desktop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-surface-2)) transparent;
  }

  .header-desktop-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .header-desktop-tabs::-webkit-scrollbar-track {
    background: transparent;
  }

  .header-desktop-tabs::-webkit-scrollbar-thumb {
    background: rgb(var(--color-surface-2));
    border-radius: 2px;
  }

  .header-desktop-tabs::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-surface-3));
  }

  /* Ensure right side stays fixed */
  .header-desktop-right {
    flex-shrink: 0;
  }
}