/*
 * Component: Navigation
 *
 * Navigation system for authenticated users and auth navigation
 * for unauthenticated users. Includes accessibility features.
 * Follows Rails conventions for navigation helpers.
 */

/* ============================================================================
   NAVIGATION - Mobile-First Design
   ============================================================================ */

.nav {
  inset: auto 0 0 0;
  z-index: 100;
  /* Mobile: bg background with top border */
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.nav-container {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0));
  max-width: 48rem;
  margin: 0 auto;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.3);
  transition: color var(--transition-standard), opacity var(--transition-standard);
  position: relative;
  /* Min touch target: 48px × 48px per WCAG AAA */
  min-height: var(--touch-target-recommended);
  /* Bottom padding extends into safe area on iOS */
  padding: var(--space-sm) var(--space-xs) calc(var(--space-sm) + env(safe-area-inset-bottom, 0)) var(--space-xs);
}

.nav-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}

turbo-frame#nav_user_avatar,
#nav_user_avatar {
  display: contents;
}

.nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  display: block;
}

.nav-label {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  color: currentColor;
}

/* Active State */
.nav-item.active {
  color: var(--accent);
}

.nav-item.active .nav-avatar {
  border-color: var(--accent);
}

/* Mobile/Desktop Visibility Helpers */
.desktop-only {
  display: none;
}

.mobile-only {
  display: flex;
}

/* Add Session Button - Prominent on Mobile */
.nav-item-add {
  position: relative;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  margin-top: -20px;
  /* Account for safe area so button stays visually centered */
  margin-bottom: env(safe-area-inset-bottom, 0);
  flex: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.nav-item-add .nav-icon {
  width: 28px;
  height: 28px;
  color: currentColor;
  margin: 0;
}

.nav-item-add .nav-label {
  display: none;
}

/* Hover State - Desktop Only */
@media (any-hover: hover) {
  .nav-item:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-lighter);
  }

  .nav-item.active:hover {
    color: var(--accent);
  }

  /* Add Session button has lighter background on hover, no outline */
  .nav-item-add:hover {
    background: color-mix(in oklch, var(--accent) 85%, white);
    color: var(--bg);
    outline: none;
    border: none;
  }

  .nav-item-add:hover .nav-icon {
    color: var(--bg);
  }
}

/* Active state for Add Session button - reverts to normal */
.nav-item-add:active {
  outline: none;
  transition-duration: 0.05s;
}

/* Desktop: Keep bottom nav consistent with mobile */
@media (min-width: 48rem) {
  /* Desktop visibility toggles */
  .desktop-only {
    display: flex;
  }

  .mobile-only {
    display: none;
  }
}


/* User Menu Items */
.user-menu-item {
  --btn-outline-color: var(--accent);
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: opacity var(--transition-standard), transform var(--transition-standard);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sign-out-btn {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

/* Mobile-first responsive navigation - 37signals approach */
/* Base mobile styles */
.user-name {
  display: none;
}

.user-summary {
  justify-content: center;
  padding: 0;
  min-block-size: 2.75rem;
  /* 44px touch target */
  touch-action: manipulation;
  border: none;
  background: transparent;
  border-radius: 50%;
  gap: 0;
}

.user-summary:hover {
  background: transparent;
  border: none;
}

.nav-user {
  justify-self: end;
}

/* User avatar maintains consistent size across all viewports */

/* User menu mobile styling */
.user-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  margin-block-start: var(--space-xs);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  z-index: 1001;
  max-block-size: 50vh;
  overflow-y: auto;
  min-inline-size: 10rem;
}

.user-menu-item {
  min-block-size: 2.75rem;
  /* 44px touch target */
  display: flex;
  align-items: center;
  touch-action: manipulation;
}

/* Navigation menu mobile layout */
.nav-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

/* ============================================================================
   UNIVERSAL NAVIGATION STATE PATTERNS
   ============================================================================ */

/* Universal Hover/Focus-Visible Pattern - Navigation elements */
@media (any-hover: hover) {

  .user-menu-item:hover,
  .user-menu-item:focus-visible {
    outline: var(--btn-outline-width, 2px) solid var(--btn-outline-color, var(--accent));
    color: var(--accent);
  }
}

/* Universal Active Pattern - Reverts to normal state */
.user-menu-item:active {
  outline: none;
  transition-duration: var(--btn-active-transition, 0.05s);
}