/* ============================================================
   统一导航条样式（配套 assets/js/app-nav.js）
   导航项数据源只有一份：assets/js/app-nav.js
   本文件只负责"导航项"的样式，容器布局由各页面自己的顶栏决定
   ============================================================ */

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  list-style: none;
  display: flex;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  transition: color .16s;
}

.nav-links a:hover { color: #1e3a8a; }
.nav-links a.active { color: #1e3a8a; font-weight: 600; }

/* 当前用户 / 退出（各页面自己放在导航项后面） */
.nav-links .nav-user {
  font-size: 13px;
  color: #86868b;
  white-space: nowrap;
}
.nav-links .nav-logout {
  font-size: 13px;
  color: #f56c6c;
  white-space: nowrap;
}

@media (max-width: 1500px) {
  .nav-links { gap: 12px; }
  .nav-links a, .nav-links .nav-user, .nav-links .nav-logout { font-size: 12.5px; }
}
@media (max-width: 1280px) {
  .nav-links { gap: 8px; }
  .nav-links a, .nav-links .nav-user, .nav-links .nav-logout { font-size: 12px; }
}

/* ============================================================
   「A+」大字模式按钮（全站，桌面/手机都显示）
   点击作用：给 <html> 加/去 .big-text，配合 assets/css/app-readable.css
   里的 CSS 变量整体放大文字（只放大文字、不改布局宽度，所以不会挤出横向滚动条）
   ============================================================ */
.nav-bigtext {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 10px;
  -webkit-tap-highlight-color: transparent;
}
.nav-bigtext:hover { border-color: #1e3a8a; color: #1e3a8a; }
.nav-bigtext:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 1px; }
.nav-bigtext[aria-pressed="true"] { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }

/* ============================================================
   手机端折叠导航（汉堡菜单）
   —— 只在 ≤768px 生效；桌面端样式完全不受影响（按钮默认 display:none）
   ============================================================ */

/* 汉堡按钮：桌面端隐藏，只有窄屏显示 */
.nav-toggle { display: none; }
/* 抽屉遮罩：默认不占位 */
.nav-mask { display: none; }

@media (max-width: 768px) {
  /* 汉堡按钮：z-index 要比遮罩高，展开后仍点得到（点它=关闭） */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3100;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    color: #1d1d1f;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:active { background: #f2f2f5; }
  .nav-toggle:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 1px; }

  /* 收起状态：横排导航整条隐藏，不再横向溢出。
     ⚠️ 必须带 !important + :not(.nav-open)：
     部分页面（table.html / schedule.html / internal-files.html …）在自己页面的 <style> 里
     也写了 `.nav-links{display:flex}`，位置在本文件之后 → 同优先级会被它盖掉（导航又横排溢出）。 */
  .nav-links:not(.nav-open) { display: none !important; }

  /* 展开状态：从右侧滑出的抽屉（竖排、好点、可滚动）
     注意：top 由 JS 按"汉堡按钮位置"动态设置（因为各页面顶栏高度不同），
     而且打开时这块 DOM 会被挪到 <body> 下 —— 顶栏有 backdrop-filter，
     会劫持 position:fixed 的定位容器，放在顶栏里抽屉会被压扁。 */
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: auto;
    width: 76%;
    max-width: 300px;
    height: auto;
    gap: 0;
    margin: 0;
    padding: 10px 0;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .16);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 3000;
    animation: navDrawerIn .18s ease-out;
  }
  .nav-links.nav-open li { display: block; width: 100%; }

  /* 抽屉里的每一项：做成整行可点（手机手指友好） */
  .nav-links.nav-open a,
  .nav-links.nav-open .nav-user,
  .nav-links.nav-open .nav-logout {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 18px;
    font-size: 15px;          /* 比桌面版大，便于点按 */
    white-space: normal;
  }
  .nav-links.nav-open a.active { background: #f0f4ff; }
  .nav-links.nav-open .nav-user {
    color: #86868b;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f2;
  }

  /* 遮罩：点一下关闭（top 同样由 JS 设置，避免盖住汉堡按钮） */
  .nav-mask.show {
    display: block;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .38);
    z-index: 2900;
    animation: navMaskIn .18s ease-out;
  }
}

@keyframes navDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes navMaskIn { from { opacity: 0; } to { opacity: 1; } }