/* ============================================================
 * 艺学堂·音鉴 — 全局导航栏 & 页脚
 * Nav & Footer v3.0 — Phase 2 9 步统一导航
 * BEM 命名：.block__element--modifier
 * ============================================================ */

/* ── Body 补偿：固定导航栏 + 固定页脚 ── */
body.has-global-nav {
  padding-top: var(--navbar-height);
  padding-bottom: var(--footer-height);
}

/* 已有 .page-content 的页面（如 report），避免双重 padding */
body.has-global-nav .page-content {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* ── 全局导航栏 ── */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--navbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
}

/* Logo */
.global-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-right: var(--space-md);
  text-decoration: none;
  white-space: nowrap;
}
.global-nav__logo-img {
  width: auto;
  height: 32px;
  max-width: 72px;
  object-fit: contain;
}
.global-nav__logo-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.global-nav__logo:hover {
  opacity: 0.85;
}

/* ── 步骤指示器 ── */
.nav-steps {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  justify-content: center;
  min-width: 0;
}

/* 单个步骤 */
.nav-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: all var(--transition-fast);
  position: relative;
  user-select: none;
  min-width: 24px;
  height: 24px;
  justify-content: center;
}

/* 步骤圆点指示器 */
.nav-step__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.nav-step__label {
  display: none;
}

@media (min-width: 768px) {
  .nav-step__label {
    display: inline;
  }
}

/* ── 已完成步骤 ── */
.nav-step--completed {
  color: var(--color-success);
  cursor: pointer;
}
.nav-step--completed .nav-step__dot {
  background: var(--color-success);
  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
}
.nav-step--completed:hover {
  background: rgba(82, 196, 26, 0.08);
}
.nav-step--completed:active {
  transform: scale(0.95);
}

/* ── 当前步骤 ── */
.nav-step--active {
  color: var(--color-primary);
  font-weight: 700;
  cursor: default;
}
.nav-step--active .nav-step__dot {
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(241, 141, 36, 0.25);
  animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(241, 141, 36, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(241, 141, 36, 0.08);
  }
}

/* ── 待完成步骤 ── */
.nav-step--pending {
  color: var(--color-text-muted);
  cursor: default;
}
.nav-step--pending .nav-step__dot {
  background: var(--color-border);
}

/* ── 步骤间连接线 ── */
.nav-steps__connector {
  width: 16px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 2px;
}
.nav-steps__connector--completed {
  background: var(--color-success);
}

/* ── "查看报告" 按钮 ── */
.nav-report-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: var(--space-md);
}
.nav-report-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.nav-report-btn:active {
  transform: scale(0.97);
}

/* ── 响应式：移动端 ── */
@media (max-width: 767px) {
  .global-nav {
    padding: 0 var(--space-sm);
  }

  .nav-steps {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-steps::-webkit-scrollbar {
    display: none;
  }

  .nav-step {
    padding: var(--space-xxs) 6px;
    min-width: 28px;
    height: 28px;
  }

  .nav-step__dot {
    width: 8px;
    height: 8px;
  }

  .nav-steps__connector {
    width: 8px;
    margin: 0 1px;
  }

  /* 移动端隐藏报告按钮文字，仅显示图标 */
  .nav-report-btn {
    padding: var(--space-xxs) var(--space-xs);
    font-size: var(--text-xs);
    margin-left: var(--space-xs);
  }
  .nav-report-btn__label {
    display: none;
  }

  .global-nav__logo {
    margin-right: var(--space-xs);
  }
  .global-nav__logo-img {
    height: 28px;
    max-width: 64px;
  }
  .global-nav__logo-text {
    display: none;
  }
}

/* ── 全局页脚 ── */
.global-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: var(--footer-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
}

/* 页脚按钮通用 */
.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  line-height: 1.5;
  cursor: pointer;
}

/* 上一步 */
.footer-btn--prev {
  color: var(--color-text-secondary);
  background: transparent;
}
.footer-btn--prev:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

/* 总览 */
.footer-btn--overview {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary-bg);
  font-weight: 600;
}
.footer-btn--overview:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* 下一步 */
.footer-btn--next {
  color: #fff;
  background: var(--color-primary);
}
.footer-btn--next:hover {
  background: var(--color-primary-dark);
}
.footer-btn--next:active {
  transform: scale(0.97);
}

/* 禁用态 */
.footer-btn--disabled,
.footer-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.footer-btn--disabled.footer-btn--next,
.footer-btn--disabled.footer-btn--overview {
  background: var(--color-border);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.footer-btn:not(.footer-btn--disabled):active {
  transform: scale(0.97);
}

/* ── 响应式：移动端页脚 ── */
@media (max-width: 767px) {
  .global-footer {
    padding: 0 var(--space-sm);
  }

  .footer-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    gap: 2px;
  }
}