/*
 * 6Flaschen WeinApp
 * Navigation Consistency
 * Hotfix 8.4.9 Revision 9.20
 *
 * Einheitliche Reihenfolge:
 * Start → Erfassen → Archiv → Scannen → Profil → 6Flaschen
 *
 * 6Flaschen ist bewusst permanent der goldene Zielpunkt.
 */

html.coastal-ui {
  --nav-six-gold-start: #e2bd76;
  --nav-six-gold-end: #c79543;
  --nav-six-ink: #13232b;
}

/* Desktop Header ------------------------------------------------------- */
html.coastal-ui .coastal-desktop-navigation-item.is-sixflaschen-featured,
html.coastal-ui .coastal-desktop-navigation-item[data-nav-featured="6flaschen"] {
  color: var(--nav-six-ink) !important;
  background: linear-gradient(135deg, var(--nav-six-gold-start), var(--nav-six-gold-end)) !important;
  border-color: rgba(237, 204, 141, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 8px 20px rgba(122, 85, 29, 0.18) !important;
}

html.coastal-ui .coastal-desktop-navigation-item.is-sixflaschen-featured:hover,
html.coastal-ui .coastal-desktop-navigation-item.is-sixflaschen-featured:focus-visible,
html.coastal-ui .coastal-desktop-navigation-item.is-sixflaschen-featured.is-active {
  color: #0c1a21 !important;
  background: linear-gradient(135deg, #edca86, #d3a14d) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 10px 24px rgba(151, 105, 33, 0.24) !important;
}

/* Footer / Bottom-Bar -------------------------------------------------- */
html.coastal-ui .app-footer-menu {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html.coastal-ui .app-footer-menu-link.is-sixflaschen-featured,
html.coastal-ui .app-footer-menu-link[data-nav-featured="6flaschen"] {
  color: var(--nav-six-ink) !important;
  background: linear-gradient(135deg, var(--nav-six-gold-start), var(--nav-six-gold-end)) !important;
  border-color: rgba(237, 204, 141, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 18px rgba(118, 80, 25, 0.18) !important;
}

html.coastal-ui .app-footer-menu-link.is-sixflaschen-featured .app-footer-menu-icon {
  color: currentColor !important;
}

/* Separate mobile Tabbar ---------------------------------------------- */
html.coastal-ui .mobile-tabbar-inner {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  max-width: 680px !important;
}

html.coastal-ui .mobile-tabbar-item.is-sixflaschen-featured,
html.coastal-ui .mobile-tabbar-item[data-nav-featured="6flaschen"] {
  color: var(--nav-six-ink) !important;
  background: linear-gradient(135deg, var(--nav-six-gold-start), var(--nav-six-gold-end)) !important;
  border: 1px solid rgba(237, 204, 141, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 7px 16px rgba(118, 80, 25, 0.16) !important;
}

html.coastal-ui .mobile-tabbar-item.is-sixflaschen-featured svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Dark Mode ------------------------------------------------------------ */
html[data-theme="dark"].coastal-ui
.coastal-desktop-navigation-item.is-sixflaschen-featured,
html[data-theme="dark"].coastal-ui
.app-footer-menu-link.is-sixflaschen-featured,
html[data-theme="dark"].coastal-ui
.mobile-tabbar-item.is-sixflaschen-featured {
  color: #112029 !important;
  background: linear-gradient(135deg, #e1bb72, #c79342) !important;
  border-color: rgba(237, 207, 149, 0.38) !important;
}

/* Mobile: sechs Punkte ohne Umbruch ----------------------------------- */
@media (max-width: 760px) {
  html.coastal-ui .app-footer-menu {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  html.coastal-ui .app-footer-menu-link {
    min-width: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }

  html.coastal-ui .mobile-tabbar-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  html.coastal-ui .mobile-tabbar-item {
    min-width: 0 !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  html.coastal-ui .app-footer-menu-link {
    font-size: 7.8px !important;
  }

  html.coastal-ui .mobile-tabbar-item {
    font-size: 8.3px !important;
  }
}