/* ===== HEADER V2 — Compact global header + filter bar =====
   Uses existing BV theme variables from design-system.css
   Mobile modals use --modal-tint from each theme file
   ========================================================= */

/* ----- THEME TRANSITION: WHITEOUT FADE ----- */
/* Full-page overlay fades to white, page reloads behind it,
   then fades back in. Feels like a page turn. */
.bv-theme-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.bv-theme-fade--out {
  opacity: 1;
  pointer-events: all;
}

/* On page load after theme switch, fade back in */
.bv-theme-fade--in {
  opacity: 1;
  pointer-events: all;
}

/* ----- SHARED DROPDOWN PATTERN ----- */
/* Override base-reset.css 44px touch-target minimum on header elements */
.bv-header button,
.bv-header a,
.bv-header input,
.bv-header select,
.bv-filterbar button,
.bv-filterbar a,
.bv-filterbar input,
.bv-filterbar select {
  min-height: 0;
  min-width: 0;
}
.bv-drop {
  position: relative;
}

.bv-drop__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  color: var(--color-primary);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.bv-drop__trigger:hover,
.bv-drop.open .bv-drop__trigger {
  border-color: var(--border-primary);
  color: var(--color-primary);
}

.bv-drop__arrow {
  font-size: 8px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bv-drop.open .bv-drop__arrow {
  transform: rotate(180deg);
}

.bv-drop__menu {
  position: absolute;
  top: calc(100% + 4px);
  background: var(--glass-bg);
  border: 1px solid var(--border-primary);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100%;
}

.bv-drop.open .bv-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bv-drop__menu--right { right: 0; }
.bv-drop__menu--left  { left: 0; }

.bv-drop__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid var(--border-muted);
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.bv-drop__item:last-child { border-bottom: none; }

.bv-drop__item:hover {
  background: var(--bg-pop, var(--citrus-highlight));
  color: var(--color-primary);
}

.bv-drop__item--active {
  font-weight: 600;
  color: var(--color-primary);
}

.bv-drop__item--danger:hover {
  background: var(--bg-inverse);
  color: var(--bg-primary);
}

/* Theme dot in dropdown */
.bv-drop__dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border-secondary);
}

/* Checkmark for active item */
.bv-drop__check {
  margin-left: auto;
  font-size: 10px;
  opacity: 0;
}

.bv-drop__item--active .bv-drop__check {
  opacity: 1;
}

/* Filter rows inside More dropdown */
.bv-drop__filter-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-muted);
}

.bv-drop__filter-row:last-child {
  border-bottom: none;
}

.bv-drop__filter-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.bv-drop__filter-select,
.bv-drop__filter-input {
  width: 100%;
  height: 26px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  color: var(--color-primary);
  outline: none;
  min-height: 0;
  min-width: 0;
}

.bv-drop__filter-select:focus,
.bv-drop__filter-input:focus {
  border-color: var(--border-primary);
}

.bv-drop__filter-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-drop__filter-input--middle {
  transition: opacity 200ms ease, max-height 200ms ease;
}

.bv-drop__filter-input--middle.hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

/* Language secondary label */
.bv-drop__lang-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-primary);
  opacity: 0.6;
}

/* Theme dot colors — static, not theme-dependent */
.dot--minimal { background: #d2d218; border-color: #000; } /*renamed Bookvitae Haus*/
.dot--kyoto   { background: #3D5A80; border-color: #3D5A80; }
.dot--garden  { background: #7A9B76; border-color: #7A9B76; }
.dot--balloon { background: #E8726A; border-color: #E8726A; }
.dot--egypt   { background: #11849b; border-color: #11849b; }
.dot--dark    { background: #333;    border-color: #333; } /*renamed um... Nocturne... */
.dot--high-contrast { background: #000; border-color: #ff0; }


/* ----- HEADER BAR ----- */
.bv-header {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Brand */
.bv-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-primary);
  flex-shrink: 0;
}

.bv-header__logo {
  height: 40px;
  width: auto;
}

.bv-header__wordmark {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

/* Inline nav (desktop) */
.bv-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 24px;
}

.bv-header__link {
  padding: 6px 12px;
  text-decoration: none;
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.bv-header__link:hover {
  color: var(--color-primary);
}

.bv-header__link--active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--bg-pop, var(--citrus-highlight));
  margin-bottom: -2px;
}

/* Right cluster */
.bv-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bv-header__divider {
  width: 1px;
  height: 20px;
  background: var(--border-secondary);
  flex-shrink: 0;
}

/* Theme dot in trigger */
.bv-header__theme-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Avatar */
.bv-header__avatar {
  width: 40px;
  height: 40px;
  background: var(--bg-inverse);
  color: var(--bg-pop, var(--citrus-highlight));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  overflow: hidden;
}

.bv-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bv-header__avatar:hover {
  background: var(--bg-pop, var(--citrus-highlight));
  color: var(--color-primary);
}

/* Auth buttons (logged out) */
.bv-header__auth {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bv-header__auth-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  text-decoration: none;
  color: var(--color-primary);
  border: 1px solid var(--border-secondary);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bv-header__auth-link:hover {
  border-color: var(--border-primary);
}

.bv-header__auth-link--primary {
  background: var(--bg-pop, var(--citrus-highlight));
  border-color: var(--border-primary);
  font-weight: 600;
}

.bv-header__auth-link--primary:hover {
  background: var(--bg-inverse);
  color: var(--bg-pop, var(--citrus-highlight));
}


/* ----- FILTER BAR (index.php only) ----- */
.bv-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  background: var(--bg-bv-filterbar);
  border-bottom: 1px solid var(--border-secondary);
  position: sticky;
  top: 52px;
  z-index: 90;
  overflow: visible;
  scrollbar-width: none;
}

.bv-filterbar::-webkit-scrollbar { display: none; }

.bv-filterbar__search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-secondary);
  height:24px;
  flex-shrink: 0;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--wall-header-pills);
}

.bv-filterbar__search:focus-within {
  border-color: var(--border-primary);
}

.bv-filterbar__search-icon {
  padding: 0 6px;
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
}

.bv-filterbar__search-input {
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 130px;
  height: 100%;
  background: transparent;
  color: var(--color-primary);
  padding-right: 6px;
}

.bv-filterbar__search-input::placeholder {
  color: var(--color-secondary);
  opacity: 0.8;
}

.bv-filterbar__divider {
  width: 1px;
  height: 16px;
  background: var(--border-primary);
  flex-shrink: 0;
  opacity: 0.3;
}

/* Filter pills */
.bv-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-secondary);
  background: var(--wall-header-pills);
  color: var(--color-primary);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.bv-pill:hover {
  border-color: var(--border-primary);
  color: var(--color-primary);
}

.bv-pill.active {
  background: var(--bg-pop, var(--citrus-highlight));
  border: 1px solid var(--border-primary);
  color: var(--bg-tertiary);
  font-weight: 600;
}

.bv-pill__count {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  background: var(--bg-inverse);
  color: var(--bg-tertiary);
  min-width: 18px;
  text-align: center;
}

.bv-pill.active .bv-pill__count {
  color: var(--bg-tertiary, var(--citrus-highlight));
}

.bv-pill--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Clear X on active attribute pills — shows to the LEFT of label */
.bv-pill__clear {
  order: -1;
  margin-right: 2px;
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  width: 0;
  overflow: hidden;
  cursor: pointer;
  line-height: 1;
  transition: opacity 150ms, width 150ms;
}

.bv-pill.active .bv-pill__clear {
  opacity: 0.6;
  width: auto;
}

.bv-pill.active .bv-pill__clear:hover {
  opacity: 1;
}

/* Clear All pill button — same style as other pills */
.bv-filterbar__clear-all {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 0;
  min-width: 0;
}

.bv-filterbar__clear-all:hover {
  border-color: var(--border-primary);
  color: var(--color-primary);
}

.bv-filterbar__clear-all.visible {
  display: flex;
}

/* Inline expanding filter select */
.bv-inline-filter {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bv-inline-filter__select {
  display: none;
  height: 24px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border-primary);
  border-left: none;
  background: var(--bg-tertiary);
  color: var(--color-primary);
  outline: none;
  cursor: pointer;
  max-width: 160px;
  animation: bv-slide-in 150ms ease-out;
}

.bv-inline-filter.expanded .bv-pill {
  border-color: var(--border-primary);
  color: var(--color-primary);
  background: var(--bg-tertiary);
}

.bv-inline-filter.expanded .bv-inline-filter__select {
  display: block;
}

@keyframes bv-slide-in {
  from { max-width: 0; opacity: 0; padding: 0; }
  to   { max-width: 160px; opacity: 1; padding: 0 8px; }
}

/* Stats (right end of filter bar) */
.bv-filterbar__stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bv-filterbar__stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-secondary);
}

.bv-filterbar__stat-num {
  font-weight: 700;
  font-size: 12px;
  color: var(--color-primary);
}


/* ----- MOBILE OVERRIDES ----- */

/* Mobile trigger buttons (theme/lang in header) */
.m-trigger {
  display: none; /* Hidden on desktop */
}

.bv-header__hamburger {
  display: none; /* Hidden on desktop */
}

/* Mobile-only avatar (separate from dropdown avatar) */
.bv-header__avatar[data-modal],
.bv-header__avatar--mobile {
  display: none; /* Hidden on desktop */
}

/* Duplicate divider before mobile avatar */
.bv-header__right > .bv-header__divider[style*="display:none"] {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop nav, show mobile controls */
  .bv-header__nav { display: none; }
  .bv-header__themes-desktop { display: none; }

  /* Hide desktop dropdown versions and their dividers */
  .bv-drop[data-dropdown="theme"],
  .bv-drop[data-dropdown="lang"],
  .bv-drop[data-dropdown="avatar"],
  .bv-drop[data-dropdown="theme"] + .bv-header__divider,
  .bv-drop[data-dropdown="lang"] + .bv-header__divider {
    display: none;
  }

  /* Show mobile-only avatar */
  .bv-header__avatar[data-modal],
  .bv-header__avatar--mobile {
    display: flex;
    order: 99; /* Always far right */
  }

  .bv-header__hamburger {
    order: 98; /* Just before avatar */
  }

  .m-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    height: 24px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--border-secondary);
    background: var(--bg-primary);
    color: var(--color-secondary);
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
  }

  .m-trigger:hover {
    border-color: var(--border-primary);
    color: var(--color-primary);
  }

  .m-trigger__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }

  .bv-header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    font-size: 16px;
    color: var(--color-primary);
    font-family: var(--font-mono);
  }

  .bv-header {
    padding: 0 12px;
    height: 48px;
    overflow: hidden;
    max-width: 100vw;
    width: 100%;
  }

  /* Filter bar mobile tweaks */
  .bv-filterbar {
    padding: 0 12px;
    height: 38px;
    top: 48px;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .bv-pill {
    font-size: 10px;
    padding: 3px 7px;
    height: 26px;
  }

  .bv-pill__count {
    font-size: 9px;
    padding: 1px 4px;
  }

  .bv-filterbar__search-input {
    width: 80px;
  }

  /* Hide stats on mobile to save space */
  .bv-filterbar__stats { display: none; }

  /* More dropdown: constrain to viewport but break out of overflow */
  .bv-drop__menu {
    max-width: calc(100vw - 24px);
    position: fixed;
    z-index: 500;
  }
}


/* ----- MOBILE FULLSCREEN MODALS ----- */
.bv-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bv-modal.open {
  opacity: 1;
  visibility: visible;
}

/* Backdrop — translucent dark with theme tint */
.bv-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--modal-tint, rgba(210,210,24,0.06)), var(--modal-tint, rgba(210,210,24,0.06))),
    rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Content panel */
.bv-modal__panel {
  position: relative;
  z-index: 1;
  width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(12px);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bv-modal.open .bv-modal__panel {
  transform: translateY(0);
}

.bv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bv-modal__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.bv-modal__close {
  font-size: 18px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-mono);
  transition: color 150ms;
  padding: 0 4px;
  line-height: 1;
}

.bv-modal__close:hover {
  color: #fff;
}

.bv-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: left;
}

.bv-modal__item:last-child { border-bottom: none; }

.bv-modal__item:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.bv-modal__item--active {
  color: #fff;
  font-weight: 600;
}

.bv-modal__item--active::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--bg-pop, var(--citrus-highlight));
  margin-left: auto;
  flex-shrink: 0;
}

.bv-modal__item--danger {
  color: rgba(255,100,100,0.6);
}

.bv-modal__item--danger:hover {
  color: #ff6b6b;
}

/* Modal theme swatch dots */
.bv-modal__dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

.bv-modal__item--active .bv-modal__dot {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

.bv-modal__lang-sub {
  margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}

/* Only show mobile modals on small screens */
@media (min-width: 769px) {
  .bv-modal--mobile-only { display: none !important; }
}


/* ----- HIDE OLD HEADER/NAV on pages using v2 ----- */
body.header-v2 .page__header,
body.header-v2 .page__nav {
  display: none;
}

/* Also hide old wall-header toggle and panel when filter bar is present */
body.header-v2 .wall-header-toggle,
body.header-v2 .wall-header {
  display: none;
}

/* Prevent horizontal scroll on mobile */
body.header-v2 {
  overflow-x: hidden;
}

/* Wall page: filter bar sits flush edge-to-edge inside main */
.page__main--wall {
  padding-top: 0;
  background: var(--bg-body);
}

.page__main--wall > .bv-filterbar {
  margin-left: calc(-1 * var(--space-md, 16px));
  margin-right: calc(-1 * var(--space-md, 16px));
  width: calc(100% + 2 * var(--space-md, 16px));
  max-width: 100vw;
}

/* ----- LEGACY LANGUAGE MODAL: hide when using v2 header ----- */
body.header-v2 .language-modal {
  display: none !important;
}