/*
 * AppShell navigation overflow ("Mehr") — co-located with the component to keep
 * index.css contention-free (shared-file rule). Overrides the base .app-nav
 * layout from index.css; loaded after it, so these rules win.
 *
 * Phone: bottom bar shows 4 primary tabs + a "Mehr" button; the secondary items
 * live in a sheet that opens ABOVE the bar. Laptop (>=768px): full sidebar, all
 * items inline, no "Mehr" button.
 */

/* --- Phone (base) --- */
.app-nav {
  /* column-reverse so .nav-secondary (2nd in DOM) renders ABOVE the bar */
  flex-direction: column-reverse;
  justify-content: flex-start;
  padding: 0;
}

.nav-primary {
  display: flex;
  justify-content: space-around;
}

.nav-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.nav-secondary {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.nav-secondary--open {
  display: flex;
}

/* --- Laptop / Tablet (>=768px): full sidebar, no overflow --- */
@media (min-width: 768px) {
  .app-nav {
    flex-direction: column;
    padding: 1rem 0.5rem;
  }

  .nav-primary {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav-more-btn {
    display: none;
  }

  .nav-secondary {
    display: flex;
    gap: 0.25rem;
    background: none;
    border-bottom: none;
    box-shadow: none;
    margin-top: 0.25rem;
  }
}