/* ==============================================
   Global Navigation Bar
   Neutral-palette bar am unteren Rand.
   Unsichtbar, erscheint wenn Maus in die Nähe kommt.
   Pin-Toggle hält ihn permanent sichtbar.
   Layout: [Home] [Section ▼] [< >] ... [Theme ▼] [Pin]
   ============================================== */

.gnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 var(--space-4);
  overflow: hidden;
  background: color-mix(in srgb, var(--neutral-950) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  translate: 0 100%;
  transition: opacity 300ms ease, translate 300ms ease;
  pointer-events: none;
}

/* --- Pinned state --- */

.gnav.is-pinned {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

body:has(.gnav.is-pinned) {
  padding-bottom: 40px;
}

/* --- Trigger zone --- */

.gnav-trigger {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 8999;
}

.gnav-trigger:hover + .gnav,
.gnav:hover {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

/* --- Left & Right groups --- */

.gnav-left,
.gnav-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* --- Home button (icon only) --- */

.gnav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.gnav-home .gnav-icon {
  font-size: 16px;
}

.gnav-home:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 10%, transparent);
}

.gnav-home.is-active {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 12%, transparent);
}

/* --- Select boxes (shared) --- */

.gnav-select {
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A7AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-radius: var(--radius-full);
  height: 32px;
  padding: 0 28px 0 12px;
  font-family: var(--font-family);
  font-size: 0.75rem;                    /* 12px — Dev-UI, bleibt klein */
  font-weight: var(--font-weight-medium);
  color: var(--neutral-200);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  outline: none;
}

.gnav-select:hover {
  background-color: color-mix(in srgb, var(--white) 12%, transparent);
  border-color: color-mix(in srgb, var(--white) 20%, transparent);
}

.gnav-select:focus-visible {
  border-color: var(--neutral-400);
}

.gnav-select option,
.gnav-select optgroup {
  background: var(--neutral-900);
  color: var(--neutral-100);
}

/* Section select: slightly wider */
.gnav-section-select {
  min-width: 110px;
}

/* Theme select: compact */
.gnav-theme-select {
  min-width: 80px;
}

/* --- Chevron nav buttons --- */

.gnav-chevrons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gnav-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  color: var(--neutral-400);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.gnav-chevron .gnav-icon {
  font-size: 14px;
}

.gnav-chevron:hover:not(:disabled) {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 10%, transparent);
}

.gnav-chevron:disabled {
  color: var(--neutral-700);
  cursor: default;
}

/* --- Pin button (very right) --- */

.gnav-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  color: var(--neutral-500);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.gnav-pin-btn .gnav-icon {
  font-size: 14px;
}

.gnav-pin-btn:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 10%, transparent);
}

.gnav-pin-btn.is-active {
  color: var(--white);
}