/* Phase C · 侧边栏 SPA 外壳 — 单一真相源 design-tokens.css */
.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px;
  background: var(--fh-bg-primary, #0F1A3C);
  border-right: 1px solid var(--fh-border, #2A3A6B);
  display: flex; flex-direction: column;
  font-family: var(--fh-font, sans-serif);
  z-index: 100; overflow-y: auto;
}

.app-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; border-bottom: 1px solid var(--fh-border, #2A3A6B);
  color: var(--fh-gold, #C8A24E); font-size: 13px; font-weight: 500;
}
.app-brand-mark { width: 12px; height: 12px; background: var(--fh-gold, #C8A24E); border-radius: 2px; flex-shrink: 0; }

.app-nav { padding: 8px 0; flex: 1; }
.app-nav-group { color: #5A6B8C; font-size: 11px; padding: 12px 16px 6px; letter-spacing: .5px; }

.app-nav-item {
  display: block; padding: 9px 16px; margin: 1px 8px; border-radius: 6px;
  color: var(--fh-text-secondary, #8A9BBF); font-size: 13px; text-decoration: none;
  border-left: 2px solid transparent; transition: background .15s, color .15s;
}
.app-nav-item:hover { background: var(--fh-bg-hover, #1E2D55); color: var(--fh-text-primary, #E8EAF0); }
.app-nav-item.active { color: var(--fh-gold, #C8A24E); background: var(--fh-bg-hover, #1E2D55); border-left-color: var(--fh-gold, #C8A24E); }

.app-shell-foot { border-top: 1px solid var(--fh-border, #2A3A6B); padding: 12px 16px; }
.app-shell-foot a { color: var(--fh-text-secondary, #8A9BBF); font-size: 12px; text-decoration: none; margin-right: 14px; }
.app-shell-foot a:hover { color: var(--fh-gold, #C8A24E); }

.app-theme-toggle {
  width: 100%; margin-bottom: 8px; padding: 7px 10px;
  background: var(--fh-bg-hover, #1E2D55); color: var(--fh-text-primary, #E8EAF0);
  border: 1px solid var(--fh-border, #2A3A6B); border-radius: 6px;
  font-size: 12px; font-family: var(--fh-font, sans-serif); cursor: pointer;
  transition: background .15s, color .15s;
}
.app-theme-toggle:hover { background: var(--fh-gold, #C8A24E); color: #0F1A3C; }

/* 常驻悬浮主题切换按钮：金底深字，深浅背景上都清晰可见；fixed 挂 body，永远不被侧栏遮挡。
   PC 端默认隐藏——侧栏底部已有 #fhThemeToggle 切换，悬浮按钮冗余；仅移动端（侧栏收起）显示。 */
.app-theme-fab {
  display: none;                 /* PC：隐藏冗余悬浮按钮，改用侧栏底部切换 */
  position: fixed; right: 18px; bottom: 108px; z-index: 9999;
  padding: 10px 16px; border: none; border-radius: 24px;
  background: var(--fh-gold, #C8A24E); color: #0F1A3C;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--fh-font, sans-serif);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s;
  touch-action: manipulation;   /* 移动端避免点击被缩放/位移逻辑吞掉 */
}
.app-theme-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
/* 触摸设备：禁用 hover 位移，避免 :hover 触发导致元素偏移、合成 click 落空 */
@media (hover: none) {
  .app-theme-fab:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
}

.app-main { margin-left: 220px; min-height: 100vh; }

.app-shell-toggle { display: none; }

/* 隐藏纯跨页顶栏（减少重复壳）；admin 保留其含页内 tab 的顶栏 */
.app-shell--notop .topbar { display: none; }

@media (max-width: 768px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 200px; }
  .app-shell.open .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-shell-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 101;
    width: 38px; height: 38px; background: var(--fh-bg-card, #162247);
    border: 1px solid var(--fh-border, #2A3A6B); border-radius: 6px;
    color: var(--fh-gold, #C8A24E); cursor: pointer; font-size: 18px;
  }
  /* 手机端：侧栏收起，侧栏内 #fhThemeToggle 不可见；悬浮按钮是唯一可达入口，固定在左下角，
     避开右下角的小塔/找代账悬浮按钮与浏览器底栏遮挡 */
  .app-theme-fab {
    display: inline-flex; align-items: center; justify-content: center;
    left: 18px; right: auto; bottom: 24px;
  }
}