/*
 * Main Navigation Component Styles
 *
 * A responsive navigation component with:
 * - Consistent brand styling
 * - Active state indicators
 * - User menu dropdown
 * - Mobile-responsive hamburger menu
 *
 * Uses design system tokens for consistent styling.
 */

@layer components {

/* ============================================
 * MAIN NAVIGATION BAR
 * ============================================ */
.main-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: var(--color-neutral-white);
  border-block-end: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-sm);
}

  /* ============================================
   * BRAND SECTION
   * ============================================ */
  .main-nav__brand {
    flex-shrink: 0;
  }

  .main-nav__logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: opacity 0.15s ease;
  }

    .main-nav__logo-link:hover {
      opacity: 0.8;
    }

  .main-nav__logo-icon {
    color: var(--color-primary-500);
    flex-shrink: 0;
  }

  .main-nav__logo-text {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
  }

    @media (width <= 768px) {
  .main-nav__logo-text {
      display: none
  }
    }

  .main-nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    block-size: 64px;
  }

    @media (width <= 768px) {
  .main-nav__container {
      padding: 0 var(--space-4);
      block-size: 56px
  }
    }

    /* Small mobile adjustments */
    @media (width <= 480px) {
  .main-nav__container {
      padding: 0 var(--space-3)
  }
    }

  /* ============================================
   * MOBILE MENU TOGGLE
   * ============================================ */
  .main-nav__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

    .main-nav__mobile-toggle:hover {
      background-color: var(--color-neutral-100);
    }

    .main-nav__mobile-toggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--color-indigo-alpha-30);
    }

    /* Hamburger to X animation */
      .main-nav__mobile-toggle[aria-expanded="true"] .main-nav__hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .main-nav__mobile-toggle[aria-expanded="true"] .main-nav__hamburger-line:nth-child(2) {
        opacity: 0;
      }

      .main-nav__mobile-toggle[aria-expanded="true"] .main-nav__hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

    @media (width <= 768px) {
  .main-nav__mobile-toggle {
      display: flex
  }
    }

  .main-nav__mobile-toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    inline-size: 20px;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .main-nav__hamburger-line {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--color-neutral-700);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* ============================================
   * NAVIGATION MENU (Desktop)
   * ============================================ */
  .main-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 1;
    justify-content: flex-end;
  }

    @media (width <= 768px) {
  .main-nav__menu {
      position: fixed;
      inset-block-start: 56px;
      left: 0;
      right: 0;
      inset-block-end: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--space-4);
      background-color: var(--color-neutral-white);
      border-block-start: 1px solid var(--color-border-primary);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      overflow-y: auto
  }

      .main-nav__menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }

    /* Small mobile adjustments */
    @media (width <= 480px) {
  .main-nav__menu {
      padding: var(--space-3)
  }
    }

  .main-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    margin-inline-end: auto;
    padding-inline-start: var(--space-8);
  }

    @media (width <= 768px) {
  .main-nav__links {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-1);
      padding-inline-start: 0;
      margin-inline-end: 0;
      padding-block-end: var(--space-4);
      border-block-end: 1px solid var(--color-border-primary);
      margin-block-end: var(--space-4)
  }
    }

  .main-nav__item {
    position: relative;
  }

  .main-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

    .main-nav__link:hover {
      color: var(--color-text-primary);
      background-color: var(--color-neutral-100);
    }

    .main-nav__link:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--color-indigo-alpha-30);
    }

    /* Active state indicator */
    .main-nav__link--active {
      color: var(--color-primary-600);
      background-color: var(--color-primary-50);
    }

      .main-nav__link--active:hover {
        color: var(--color-primary-700);
        background-color: var(--color-primary-100);
      }

      /* Active state underline indicator */
      .main-nav__link--active::after {
        content: "";
        position: absolute;
        inset-block-end: -12px;
        left: var(--space-3);
        right: var(--space-3);
        block-size: 2px;
        background-color: var(--color-primary-500);
        border-radius: 2px 2px 0 0;
      }

      .main-nav__link--active .main-nav__link-icon {
        opacity: 1;
      }

    @media (width <= 768px) {
      .main-nav__link--active::after {
        display: none;
      }
    }

    @media (width <= 768px) {
  .main-nav__link {
      padding: var(--space-3) var(--space-4);
      border-radius: 8px
  }
    }

  /* stylelint-disable-next-line no-descending-specificity */
  .main-nav__link-icon {
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* ============================================
   * WORKSPACE STATUS INDICATOR
   * ============================================ */
  .main-nav__workspace-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-success-700);
    background-color: var(--color-success-50);
    border-radius: 9999px;
    border: 1px solid var(--color-success-200);
  }

    @media (width <= 768px) {
  .main-nav__workspace-status {
      margin-block-end: var(--space-4);
      justify-content: center
  }
    }

  .main-nav__workspace-indicator {
    inline-size: 8px;
    block-size: 8px;
    background-color: var(--color-success-500);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }

  .main-nav__workspace-name {
    max-inline-size: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

    @media (width <= 768px) {
  .main-nav__workspace-name {
      max-inline-size: none
  }
    }

  /* ============================================
   * USER MENU DROPDOWN
   * ============================================ */
  .main-nav__user-menu {
    position: relative;
  }

    .main-nav__user-menu.open .main-nav__dropdown-arrow {
      transform: rotate(180deg);
    }

    .main-nav__user-menu.open .main-nav__dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    @media (width <= 768px) {
  .main-nav__user-menu {
      inline-size: 100%
  }

      .main-nav__user-menu.open .main-nav__dropdown {
        display: block;
      }
    }

  .main-nav__user-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

    .main-nav__user-toggle:hover {
      background-color: var(--color-neutral-50);
      border-color: var(--color-neutral-300);
    }

    .main-nav__user-toggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--color-indigo-alpha-30);
    }

    @media (width <= 768px) {
  .main-nav__user-toggle {
      inline-size: 100%;
      justify-content: space-between;
      border-radius: 8px;
      padding: var(--space-3) var(--space-4)
  }
    }

  .main-nav__user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-neutral-white);
    background-color: var(--color-primary-500);
    border-radius: 50%;
  }

  .main-nav__user-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    max-inline-size: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

    @media (width <= 768px) {
  .main-nav__user-name {
      max-inline-size: none;
      flex: 1;
      text-align: start
  }
    }

  /* stylelint-disable-next-line no-descending-specificity */
  .main-nav__dropdown-arrow {
    color: var(--color-neutral-500);
    transition: transform 0.15s ease;
  }

  /* User Dropdown Panel */
  /* stylelint-disable-next-line no-descending-specificity */
  .main-nav__dropdown {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    right: 0;
    min-inline-size: 220px;
    background-color: var(--color-neutral-white);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: 200;
  }

    @media (width <= 768px) {
  .main-nav__dropdown {
      position: static;
      min-inline-size: auto;
      margin-block-start: var(--space-2);
      box-shadow: none;
      border: 1px solid var(--color-border-primary);
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none
  }
    }

  .main-nav__dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .main-nav__dropdown-email {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-nav__dropdown-badge {
    flex-shrink: 0;
    padding: var(--space-0-5) var(--space-2);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-700);
    background-color: var(--color-primary-100);
    border-radius: 4px;
  }

    /* Impersonation Badge */
    .main-nav__dropdown-badge--impersonating {
      color: var(--color-warning-800);
      background-color: var(--color-warning-100);
    }

  .main-nav__dropdown-divider {
    block-size: 1px;
    background-color: var(--color-border-primary);
    margin: 0;
  }

  .main-nav__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

    .main-nav__dropdown-item:hover {
      background-color: var(--color-neutral-50);
    }

    .main-nav__dropdown-item:focus-visible {
      outline: none;
      background-color: var(--color-neutral-100);
    }

    .main-nav__dropdown-item--danger {
      color: var(--color-error-600);
    }

      .main-nav__dropdown-item--danger:hover {
        background-color: var(--color-error-50);
      }

    .main-nav__dropdown-item--warning {
      color: var(--color-warning-700);
      font-weight: 600;
    }

      .main-nav__dropdown-item--warning:hover {
        background-color: var(--color-warning-50);
      }

  /* Impersonation Info in Dropdown */
  .main-nav__dropdown-impersonation-info {
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-warning-50);
  }

  .main-nav__dropdown-impersonation-text {
    font-size: 0.75rem;
    color: var(--color-warning-700);
  }

  /* ============================================
   * AUTH LINKS (Not logged in)
   * ============================================ */
  .main-nav__auth-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

    @media (width <= 768px) {
  .main-nav__auth-links {
      flex-direction: column;
      gap: var(--space-2)
  }

      .main-nav__auth-links .btn {
        inline-size: 100%;
        justify-content: center;
      }
    }

/* ============================================
 * MAIN CONTENT AREA
 * ============================================ */
.main-content {
  min-block-size: calc(100vh - 64px);
  min-block-size: calc(100dvh - 64px);
}

  @media (width <= 768px) {
.main-content {
    min-block-size: calc(100vh - 56px);
    min-block-size: calc(100dvh - 56px)
}
  }

/* ============================================
 * FLASH MESSAGES (Updated positioning)
 * ============================================ */
.flash-notice,
.flash-alert {
  position: relative;
  max-inline-size: 1400px;
  margin: var(--space-4) auto;
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.flash-notice {
  background-color: var(--color-success-50);
  color: var(--color-success-800);
  border: 1px solid var(--color-success-200);
}

.flash-alert {
  background-color: var(--color-error-50);
  color: var(--color-error-800);
  border: 1px solid var(--color-error-200);
}
} /* @layer components */