/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  background: var(--color-beige);
  border-top: 1px solid var(--color-lightpink);
  padding: 2px 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: calc(
    20px + constant(safe-area-inset-bottom)
  ); /* iOS 11.0-11.2 */
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* iOS 11.2+ */
}

.mobile-bottom-nav .nav-item {
  flex: 1 1 auto; /* grow shrink basis */
  display: flex;
  flex-direction: column; /* stack icon above label */
  align-items: center; /* center horizontally */
  justify-content: center; /* center vertically */
  text-decoration: none;
  color: var(--color-lighterblack);
  font-family: var(--font-plain);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 0;
  transition: color 0.2s ease;
  min-width: 0; /* prevent flex items from overflowing */
}
.mobile-bottom-nav .nav-icon {
  height: 28px;
}
.mobile-bottom-nav .nav-icon.active {
  color: var(--color-orange);
}

.mobile-bottom-nav .nav-item {
  color: var(--color-lighterblack);
  font-weight: 500;
}
.mobile-bottom-nav .nav-item.active {
  font-weight: 800;
  color: var(--color-purple);
}

.mobile-bottom-nav .nav-item.settings-trigger {
  color: var(--color-lighterblack);
  cursor: pointer;
}

.mobile-bottom-nav .nav-item.settings-trigger:hover {
  color: var(--color-purple);
}

.mobile-bottom-nav .nav-label {
  margin-top: 2px;
}

/* Show bottom navigation only on mobile devices */
@media (max-width: 767px),
  (max-width: 812px) and (orientation: landscape),
  /* iPhone landscape */ (max-width: 915px) and (orientation: landscape),
  /* Android landscape */ (max-height: 600px) and (orientation: landscape),
  /* Short landscape screens */ (max-width: 428px) and (orientation: portrait),
  /* iPhone 12/13/14 Pro Max */ (max-width: 390px) and (orientation: portrait),
  /* iPhone 12/13/14 */ (max-width: 375px) and (orientation: portrait),
  /* iPhone SE,
  6/7/8 */ (max-width: 360px) and (orientation: portrait),
  /* Android small screens */ (max-width: 414px) and (orientation: portrait),
  /* iPhone Plus models */ (max-width: 384px) and (orientation: portrait),
  /* Android medium screens */ (max-width: 320px) and (orientation: portrait) {
  /* iPhone SE 1st gen */
  .mobile-bottom-nav {
    display: -webkit-flex; /* Safari */
    display: flex;
    /* Add fallback colors */
    background: #ffffff; /* fallback */
    background: var(--color-beige);
  }

  /* Ensure page container accounts for navbar height */
  .page-container {
    min-height: 100vh;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }

  /* Ensure content area stays above navbar */
  .content {
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 20px;
  }
}

/* Hide navbar on desktop and tablet */
@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Tablet-specific styles to prevent header gap */
@media (min-width: 768px) and (max-width: 1023px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0;
    padding: 10px 20px;
  }

  .page-container {
    margin-top: 0;
    padding-top: 0;
  }

  /* Ensure no gap at the top */
  body {
    margin: 0;
    padding: 0;
  }
}

/* Desktop Navigation Styles */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.desktop-nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: var(--color-lighterblack);
  font-family: var(--font-plain);
  font-size: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 4px 4px;
  border-radius: 8px;
  /* Prevent layout shift */
  flex: 1;
  justify-content: center;
}

.desktop-nav-icon {
  height: 30px;
  margin-bottom: 0px;
  transition: color 0.2s ease;
}

.desktop-nav-label {
  font-size: 1rem;
  text-align: center;
}

.desktop-nav-item:hover {
  /* Use text-shadow instead of font-weight to avoid layout shift */
  text-shadow: 0 0 1px currentColor;
  transform: scale(1.05);
}

.desktop-nav-item.active {
  color: var(--color-orange);
}

.desktop-nav-item.active .desktop-nav-icon {
  color: var(--color-orange);
}

.desktop-nav-item.settings-trigger {
  color: var(--color-lighterblack);
  cursor: pointer;
}

.desktop-nav-item.settings-trigger:hover {
  color: var(--color-purple);
}

.desktop-nav-item:not(.disabled):hover .desktop-nav-icon {
  color: var(--color-purple);
}

/* Tablet styles */
@media (min-width: 768px) {
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 24px;
  }
}