/*
 * 全站导航、页脚和背单词筛选栏的公共样式。
 * 只负责壳层的布局与状态，具体颜色/间距尽量复用 Bootstrap 5 的工具类和 CSS 变量。
 */

/* ============================ 导航 ============================ */
/* 导航只保留品牌、主题和用户菜单；页面入口都在用户下拉里。 */
.app-shell-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--bs-body-bg);
}

.app-shell-nav .navbar {
  --bs-navbar-padding-y: 0.35rem;
}

.app-shell-nav .navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.app-shell-nav .dropdown-menu {
  min-width: 12rem;
}

/* 壳层在 DOM 就绪后由 app-shell.js 渲染，占位容器先保留高度，避免首屏跳动。 */
#appShellNav {
  min-height: 46px;
}

/* ============================ 页脚 ============================ */
.app-shell-footer {
  font-size: 0.8rem;
}

.app-shell-footer a:hover {
  color: var(--bs-primary);
}

/* 应用页（背单词页除外）：页脚贴近视口底部。 */
body[data-shell="app"]:not([data-page="words"]) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body[data-shell="app"]:not([data-page="words"]) > main,
body[data-shell="app"]:not([data-page="words"]) > .container-fluid {
  flex: 1 0 auto;
}

/* 背单词页是整屏固定布局，导航和筛选栏不参与压缩。 */
body[data-page="words"] > .app-shell-nav,
body[data-page="words"] > #footer-group {
  flex-shrink: 0;
}

/* 认证页原本用 100vh 居中，加了导航后改为 100dvh，避免移动端地址栏导致滚动。 */
body[data-shell="auth"].auth-page,
body[data-shell="auth"].login-page {
  min-height: 100dvh;
}