/* =============================================
   NAVIGATION COMPONENT
   Mobile: Fixed bottom bar (64px)
   Tablet+: Left sidebar (240px)
   ============================================= */

/* --- Bottom Nav (Mobile) --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height-mobile);
  background-color: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--space-2);
  z-index: var(--z-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.nav-item__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  font-size: 20px;
}

.nav-item__label {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-item--active .nav-item__icon,
.nav-item--active .nav-item__label {
  color: var(--color-accent-teal);
}

.nav-item--active {
  background-color: rgba(78, 204, 163, 0.08);
}

.nav-item:hover .nav-item__icon,
.nav-item:hover .nav-item__label {
  color: var(--color-text-primary);
}

/* Active indicator dot */
.nav-item--active::before {
  content: '';
  position: absolute;
  top: -1px;
  width: 24px;
  height: 2px;
  background-color: var(--color-accent-teal);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* --- Sidebar Nav (Tablet/Desktop) --- */
.sidebar-nav {
  display: none;
}

@media (min-width: 768px) {
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--nav-width-sidebar);
    background-color: var(--color-bg-card);
    border-right: 1px solid var(--color-border);
    padding: var(--space-8) var(--space-4);
    z-index: var(--z-nav);
    overflow-y: auto;
  }
}

.sidebar-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-8);
  text-decoration: none;
}

.sidebar-nav__logo-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-gold));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  color: var(--color-bg-dark);
}

.sidebar-nav__app-name {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.sidebar-nav__section {
  margin-bottom: var(--space-6);
}

.sidebar-nav__section-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar-nav .nav-item {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: 2px;
}

.sidebar-nav .nav-item--active::before {
  top: 0;
  left: -1px;
  right: auto;
  width: 3px;
  height: 100%;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sidebar-nav .nav-item__label {
  font-size: var(--font-size-small);
  letter-spacing: 0;
}

.sidebar-nav__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}