/*
 * design/themes/fluent-shell.css —— Fluent 风格外壳范式
 * inspired by Microsoft Fluent 2 / SharePoint 侧边导航语系，非官方实现。
 * 范式：浅色侧边导航（分组 + 选中强调条）+ ≤1023 overlay 抽屉（off-canvas + 汉堡）。
 * 本文件可脱离表单层单独使用：accent / focus 令牌随 body[data-shell] 提供。
 */
body[data-shell="fluent"] {
  --accent: #0f6cbd;
  --accent-ink: #ffffff;
  --focus-ring: rgba(15, 108, 189, .18);
  --sh-top-bg: #ffffff;
  --sh-top-line: #edebe9;
  --sh-line: #d1d1d1;
  --sh-ink: #242424; --sh-ink-2: #616161; --sh-muted: #8a8a8a; --sh-weak: #c8c8c8;
  --sh-side-bg: #faf9f8;
  --sh-side-text: #424242;
  --sh-side-hover: #f3f2f1;
  --sh-side-active-bg: #f0f0f0;
  --sh-side-active-text: #242424;
  --sh-side-muted: #979797;
  --sh-side-icon: #616161;
  --sh-sheet-bg: #ffffff;
}

/* ---------- 桌面：侧边导航 ---------- */
body[data-shell="fluent"] .sh-side { background: var(--sh-side-bg); border-right: 1px solid #edebe9; }
body[data-shell="fluent"] .sh-brand { padding: 0 8px 14px; border-bottom: 1px solid #edebe9; margin-bottom: 10px; }
/* 侧栏是 fixed 256px：主内容必须让位，≤1023 抽屉档归零（见响应式块） */
body[data-shell="fluent"] .sh-main { margin-left: 256px; }
body[data-shell="fluent"] .sh-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 2px; background: var(--accent);
}

/* ---------- ≤1023：侧栏 → off-canvas 抽屉（非对称 visibility 过渡） ---------- */
@media (max-width: 1023px) {
  body[data-shell="fluent"] .sh-side {
    width: min(320px, 86vw);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .14);
  }
  body[data-shell="fluent"][data-drawer="open"] .sh-side {
    transform: none; visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
  body[data-shell="fluent"] .sh-toggle { display: inline-flex; }
  body[data-shell="fluent"] .sh-top { padding: 0 12px; }
  body[data-shell="fluent"] .sh-main { margin-left: 0; }
}