/*
 * Tenant Navigation - Pop Art Edition
 * Main navigation bar with bold styling and slide hover effects
 */

@layer components {
  .tenant-nav {
    background: var(--color-surface);
    border-block-end: var(--border-thick) solid var(--color-comic-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 0 var(--comic-shadow-color);
  }

  .tenant-nav-container {
    max-inline-size: var(--max-width-6xl);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  /* Brand / Logo - Pop Art badge with halftone */
  .tenant-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    text-decoration: none;
    padding: var(--space-1) var(--space-3);
    padding-inline-start: var(--space-1);
    background: 
      radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px),
      var(--color-kapow-pink);
    background-size: 4px 4px, 100% 100%;
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    transform: rotate(-2deg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:hover {
      color: white;
      text-decoration: none;
      transform: rotate(-2deg) translate(-2px, -2px);
      box-shadow: var(--comic-shadow-md);
    }
  }

  .tenant-nav-mascot {
    height: 36px;
    width: auto;
    margin-block: -4px;
  }

  /* Nav Links - uses .pill-tabs component, just adds margin for layout */
  .tenant-nav-links {
    margin-inline-end: auto; /* Push actions to the right */
  }

  /* Actions area (user menu, logout) */
  .tenant-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  /* User display */
  .tenant-nav-user {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-ink-muted);
  }

  /* User avatar */
  .tenant-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: var(--color-kapow-pink);
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    border: var(--border-medium) solid var(--color-comic-border);
    transition: transform 0.15s ease;

    &:hover {
      transform: scale(1.1);
    }
  }

  /* Icon buttons in nav (notifications, settings) */
  .tenant-nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    color: var(--color-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;

    &:hover {
      transform: translate(1px, 1px) rotate(8deg);
      color: var(--color-wham-blue);
    }

    /* Notification badge */
    &.has-badge {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 8px;
        height: 8px;
        background: var(--color-pow-red);
        border: 1px solid var(--color-comic-border);
      }
    }
  }

  /* Mobile menu button */
  .tenant-nav-mobile-btn {
    display: none;
    padding: var(--space-1);
    color: var(--color-ink);
    background: transparent;
    border: none;
    cursor: pointer;

    @media (max-width: 768px) {
      display: flex;
    }
  }

  /* Hide links on mobile, show hamburger */
  @media (max-width: 768px) {
    .tenant-nav-links {
      display: none;
    }

    .tenant-nav-links.mobile-open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--color-surface);
      border-block-end: var(--border-thick) solid var(--color-comic-border);
      padding: var(--space-2);
      box-shadow: 0 4px 0 var(--comic-shadow-color);
    }
  }

  /* ==========================================================================
     Collapsible Sidebar Navigation (for sidebar layouts)
     ========================================================================== */

  .sidebar-nav {
    background: var(--color-surface);
    border-inline-end: var(--border-thick) solid var(--color-comic-border);
    box-shadow: 4px 0 0 var(--comic-shadow-color);
    transition: width 0.2s ease;

    &.sidebar-collapsed {
      width: 48px;
    }

    &.sidebar-expanded {
      width: 192px;
    }
  }

  .sidebar-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2);
    border-block-end: var(--border-thick) solid var(--color-comic-border);
  }

  .sidebar-nav-toggle {
    padding: var(--space-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-ink);
    transition: all 0.15s ease;

    &:hover {
      background: light-dark(#fef3c7, #4b5563);
    }
  }

  .sidebar-nav-items {
    padding: var(--space-1);
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    margin-block-end: 2px;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: transparent;
    border: var(--border-thin) solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;

    &:hover:not(.sidebar-nav-item-active) {
      background: light-dark(#fef3c7, #4b5563);
      transform: translateX(4px);
    }

    /* Active state - Pink with shadow to match pill tabs */
    &.sidebar-nav-item-active {
      background: var(--color-kapow-pink);
      color: white;
      border-color: var(--color-comic-border);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
    }
  }
}