/* Bottom navigation (PWA standalone) + hamburger panel extras */

:root {
  --muveup-bottom-nav-offset: 0px;
}

@media (max-width: 900px) and (display-mode: standalone),
       (max-width: 900px) and (display-mode: fullscreen) {
  body[data-bottom-nav="master"],
  body[data-bottom-nav="artist"],
  body[data-bottom-nav="organizer"],
  body[data-bottom-nav="community-member"] {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body[data-bottom-nav="master"]::after,
  body[data-bottom-nav="artist"]::after,
  body[data-bottom-nav="organizer"]::after,
  body[data-bottom-nav="community-member"]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 1099;
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="master"],
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="artist"],
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="organizer"],
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="community-member"] {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="master"]::after,
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="artist"]::after,
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="organizer"]::after,
  html.muveup-pwa-standalone body.has-bottom-nav-chrome[data-bottom-nav="community-member"]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 1099;
    pointer-events: none;
  }

  .muveup-bottom-nav {
    display: none;
  }

  body.has-bottom-nav {
    padding-bottom: var(--muveup-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
  }

  body.has-bottom-nav .toast.show {
    bottom: calc(16px + var(--muveup-bottom-nav-offset)) !important;
  }

  body.has-bottom-nav [data-muveup-bottom-inset] {
    margin-bottom: var(--muveup-bottom-nav-offset);
  }

  body.is-app-mode.has-bottom-nav .container {
    margin-bottom: calc(16px + var(--muveup-bottom-nav-offset, 0px));
  }

  body.is-app-mode footer,
  body.has-bottom-nav footer {
    display: none !important;
  }

  html.muveup-pwa-standalone body.has-bottom-nav .muveup-bottom-nav {
    display: flex !important;
  }

  body.muveup-content-pending .muveup-bottom-nav,
  body.map-access-pending .muveup-bottom-nav {
    visibility: visible;
    opacity: 1;
  }

  .muveup-bottom-nav--hydrating .muveup-bottom-nav__icon {
    opacity: 0.35;
  }

  .muveup-bottom-nav--ready .muveup-bottom-nav__icon {
    opacity: 1;
    transition: opacity 0.15s ease;
  }

  body.is-app-mode .muveup-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    justify-content: space-around;
    align-items: stretch;
    min-height: 56px;
    box-sizing: border-box;
    touch-action: pan-x pan-y;
  }

  /* iOS PWA: fest an Viewport-Unterkante, kein zusätzlicher Versatz */
  html.muveup-pwa-standalone body.is-app-mode .muveup-bottom-nav {
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
  }

  body.has-bottom-nav-chrome .muveup-bottom-nav,
  body.has-bottom-nav-chrome.is-app-mode .muveup-bottom-nav {
    background: transparent;
    border-top: none;
    box-shadow: none;
  }

  .muveup-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding-block: 8px;
    padding-inline: 4px;
    border: none;
    background: transparent;
    color: #88589F;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .muveup-bottom-nav__item svg,
  .muveup-bottom-nav__icon svg {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .muveup-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .muveup-bottom-nav__item span,
  .muveup-bottom-nav__label {
    display: block;
    min-height: calc(11px * 1.2);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .muveup-bottom-nav__item:hover,
  .muveup-bottom-nav__item:focus-visible {
    color: #E28600;
  }

  .muveup-bottom-nav__item.is-active {
    color: #E28600;
  }

  /* PWA: nav links in bottom bar; panel = calendar + legal + logout */
  body.is-app-mode .top-nav > .nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-logout) {
    display: none !important;
  }

  body.is-app-mode .top-nav .close-icon {
    display: block !important;
  }

  /* Browser logged-in ohne muveup-mobile-browser (Fallback): statische Nav-Links */
  body.is-logged-in-mobile:not(.is-app-mode):not(.muveup-mobile-browser) .top-nav > .nav-link:not(.muveup-hamburger-link) {
    display: block !important;
  }

  /* Guest mode: hide static duplicates; show injected guest links like logged-in nav */
  body:not(.is-logged-in-mobile) .top-nav > .nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-guest-link) {
    display: none;
  }

  body:not(.is-logged-in-mobile) .top-nav > .nav-link.muveup-hamburger-guest-link {
    display: block !important;
  }

  /* Mobile Browser eingeloggt: Kalender + injizierte Nav-Gruppe + Logout */
  body.muveup-mobile-browser:not(.is-app-mode) .top-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .top-nav > .nav-link:not([data-muveup-mobile-nav]) {
    display: none !important;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100%;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav [data-muveup-mobile-nav] {
    display: block !important;
    font-family: var(--font-sans);
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #88589F;
    text-decoration: none;
    cursor: pointer;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-lang-toggle,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-dropdown--mobile-panel,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-dropdown--nav-picker,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-master-werkstatt-nav {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-dropdown--mobile-panel,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-dropdown--nav-picker,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-master-werkstatt-nav {
    display: block;
    width: 100%;
    line-height: 1.35 !important;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-trigger--nav,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-profile-nav-trigger.nav-link,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
    margin: 0 !important;
  }

  /* PWA: Hamburger-Panel links ausrichten (wie mobiler Browser) */
  body.is-app-mode .top-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  body.is-app-mode .top-nav > .muveup-hamburger-push-settings,
  body.is-app-mode .top-nav > .muveup-hamburger-logout,
  body.is-app-mode .top-nav > .muveup-hamburger-legal,
  body.is-app-mode .top-nav > .muveup-profile-nav-dropdown--mobile-panel,
  body.is-app-mode .top-nav > .muveup-mobile-browser-nav {
    margin: 0 !important;
    align-self: flex-start;
    width: 100%;
  }

  /* PWA: Mobile-Browser-Nav im Hamburger */
  body.is-app-mode .top-nav > .muveup-mobile-browser-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100%;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PWA: Werkstatt im Hamburger */
  body.is-app-mode .top-nav > .muveup-mobile-browser-nav .muveup-master-werkstatt-nav {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 100%;
    line-height: 1.35 !important;
  }

  body.is-app-mode .top-nav > .muveup-mobile-browser-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
    margin: 0 !important;
    font-family: var(--font-sans);
    font-size: 18px !important;
    line-height: 1.35 !important;
    color: #88589F;
    text-align: left;
  }

  body.is-app-mode .top-nav > .muveup-mobile-browser-nav .muveup-master-werkstatt-nav.is-active .muveup-profile-nav-trigger--nav,
  body.is-app-mode .top-nav > .muveup-mobile-browser-nav .muveup-master-werkstatt-nav.is-open .muveup-profile-nav-trigger--nav {
    color: #E28600;
  }

  /* PWA: Profilauswahl im Hamburger unter Kalender */
  body.is-app-mode .top-nav > .muveup-profile-nav-dropdown--mobile-panel {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.35;
  }

  body.is-app-mode .top-nav > .muveup-profile-nav-dropdown--mobile-panel .muveup-profile-nav-trigger--nav {
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 1.35;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav [data-muveup-mobile-nav]:hover {
    color: #E28600;
  }

  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav [data-muveup-mobile-nav].active,
  body.muveup-mobile-browser:not(.is-app-mode) .muveup-mobile-browser-nav a.nav-link.active {
    color: #E28600;
    font-weight: 600;
  }

  body.is-app-mode .muveup-hamburger-push-settings,
  body.is-app-mode .muveup-hamburger-logout {
    display: block !important;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0;
    border: none;
    background: transparent;
    color: #88589F;
    cursor: pointer;
  }

  body.is-app-mode .muveup-hamburger-push-settings:hover,
  body.is-app-mode .muveup-hamburger-logout:hover {
    color: #E28600;
  }

  body.is-app-mode .muveup-hamburger-legal {
    width: 100%;
    margin: 0 !important;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  body.is-app-mode .muveup-hamburger-legal-link {
    display: block !important;
    font-family: var(--font-sans);
    font-size: 11px !important;
    line-height: 1.5;
    margin: 3px 0 !important;
    padding: 0;
    color: #a0a0a0;
    text-decoration: none;
  }

  body.is-app-mode .muveup-hamburger-legal-link:hover {
    color: #88589F;
    text-decoration: underline;
  }

  /* Burger visible for all mobile pages with burger-menu */
  .burger-icon {
    display: flex !important;
  }

  .burger-icon span {
    display: flex !important;
  }
}

@media (min-width: 901px) {
  .muveup-bottom-nav {
    display: none !important;
  }

  body.has-bottom-nav {
    padding-bottom: 0;
  }

  body.is-logged-in-mobile footer {
    display: block !important;
  }

  /* Desktop-Browser: statische Header-Nav-Links (meine gigs, profil, logout) sichtbar */
  body:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body.muveup-auth-logged-in:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body[data-app-role]:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body[data-bottom-nav="artist"]:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body[data-bottom-nav="organizer"]:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body[data-bottom-nav="master"]:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only),
  body[data-bottom-nav="community-member"]:not(.is-app-mode) header .top-nav > a.nav-link:not(.muveup-hamburger-link):not(.muveup-hamburger-push-settings):not(.muveup-hamburger-guest-link):not(.nav-link-artist-only) {
    display: inline-block !important;
  }

  body:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body.muveup-auth-logged-in:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body[data-app-role]:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body[data-bottom-nav="artist"]:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body[data-bottom-nav="organizer"]:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body[data-bottom-nav="master"]:not(.is-app-mode) header .top-nav > .muveup-lang-toggle,
  body[data-bottom-nav="community-member"]:not(.is-app-mode) header .top-nav > .muveup-lang-toggle {
    display: inline-flex !important;
  }

  body:not(.is-app-mode) header .top-nav > .muveup-master-werkstatt-nav,
  body[data-bottom-nav="master"]:not(.is-app-mode) header .top-nav > .muveup-master-werkstatt-nav {
    display: inline-flex !important;
  }

  .muveup-hamburger-legal,
  .muveup-hamburger-guest-link,
  .muveup-hamburger-master-link,
  .muveup-hamburger-logout {
    display: none !important;
  }

  header .top-nav:has([data-muveup-werkstatt-nav]) > a.nav-link[href*="map.html"],
  header .top-nav:has([data-muveup-werkstatt-nav]) > a.nav-link[href*="discovery-master.html"] {
    display: none !important;
  }
}

/* Buchungsassistent-Link in der Kopfzeile: nur fuer Testprofile (Klasse setzt bottom-nav.js) */
html:not(.muveup-slots-nav-on) [data-muveup-slots-nav] {
  display: none !important;
}