/*
 * design/themes/ant-shell.css —— Ant 风格外壳范式
 * inspired by Ant Design v5，非官方实现。
 * 范式：深色 Sider（#001529，SubMenu 分组 + 收起触发器 240px ↔ 64px 图标态）
 * + ≤1023 Drawer（汉堡 + 遮罩）。
 * 本文件可脱离表单层单独使用：accent / focus 令牌随 body[data-shell] 提供。
 */
body[data-shell="ant"] {
  --accent: #1677ff;
  --accent-ink: #ffffff;
  --focus-ring: rgba(5, 145, 255, .12);
  --sh-top-bg: #ffffff;
  --sh-top-line: #f0f0f0;
  --sh-line: #d9d9d9;
  --sh-ink: rgba(0, 0, 0, .88); --sh-ink-2: rgba(0, 0, 0, .65); --sh-muted: #8c8c8c; --sh-weak: #d9d9d9;
  --sh-side-bg: #001529;
  --sh-side-text: rgba(255, 255, 255, .72);
  --sh-side-hover: rgba(255, 255, 255, .08);
  --sh-side-active-bg: #1677ff;
  --sh-side-active-text: #fff;
  --sh-side-muted: rgba(255, 255, 255, .45);
  --sh-side-icon: rgba(255, 255, 255, .72);
  --sh-sheet-bg: #ffffff;
}

/* ---------- 桌面：深色 Sider ---------- */
body[data-shell="ant"] .sh-side { background: var(--sh-side-bg); width: 240px; transition: width .2s ease; }
body[data-shell="ant"] .sh-top { box-shadow: 0 1px 4px rgba(0, 21, 41, .08); }
body[data-shell="ant"] .sh-brand { padding: 2px 8px 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body[data-shell="ant"] .sh-brand-text strong { color: #fff; }
body[data-shell="ant"] .sh-brand-text small { color: rgba(255, 255, 255, .45); }

/* SubMenu 分组（域 → 页两层；展开/收起由消费方挂 .is-closed） */
.sh-ant-group { margin: 0 0 2px; }
.sh-ant-sub {
  width: 100%; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px;
  border: none; border-radius: 7px; background: transparent;
  color: rgba(255, 255, 255, .88); font: inherit; font-size: 13.5px; cursor: pointer;
  text-align: left;
}
.sh-ant-sub:hover { background: rgba(255, 255, 255, .08); }
.sh-ant-sub-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ant-caret { transition: transform .18s ease; color: rgba(255, 255, 255, .45); }
.sh-ant-group.is-closed .sh-ant-caret { transform: rotate(-90deg); }
.sh-ant-subbody { display: grid; gap: 1px; padding: 2px 0 4px; }
.sh-ant-group.is-closed .sh-ant-subbody { display: none; }
.sh-item--ant { padding-left: 20px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.sh-item--ant:hover { background: rgba(255, 255, 255, .08); }
.sh-item--ant.is-active { background: #1677ff; color: #fff; }

/* 收起触发器（Sider 底部） */
.sh-sider-trigger {
  margin-top: auto; flex: none;
  display: flex; align-items: center; justify-content: center;
  height: 40px; border: none; border-top: 1px solid rgba(255, 255, 255, .08);
  background: transparent; color: rgba(255, 255, 255, .65);
  font: inherit; cursor: pointer;
}
.sh-sider-trigger:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sh-sider-trigger svg { transition: transform .2s ease; }
body[data-sider="collapsed"] .sh-sider-trigger svg { transform: rotate(180deg); }

/* Sider 折叠（桌面档）：图标态 */
body[data-sider="collapsed"] .sh-side { width: 64px; padding: 18px 8px 0; overflow: visible; }
body[data-sider="collapsed"] .sh-brand-text,
body[data-sider="collapsed"] .sh-ant-sub-t,
body[data-sider="collapsed"] .sh-item-t,
body[data-sider="collapsed"] .sh-ant-subbody { display: none; }
body[data-sider="collapsed"] .sh-ant-sub { justify-content: center; padding: 0; }
body[data-shell="ant"] .sh-main { margin-left: 240px; transition: margin-left .2s ease; }
body[data-shell="ant"][data-sider="collapsed"] .sh-main { margin-left: 64px; }

/* ---------- ≤1023：Sider → Drawer（汉堡 + 遮罩） ---------- */
@media (max-width: 1023px) {
  body[data-shell="ant"] .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, .28);
  }
  body[data-shell="ant"][data-drawer="open"] .sh-side {
    transform: none; visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
  body[data-shell="ant"] .sh-toggle { display: inline-flex; }
  body[data-shell="ant"] .sh-sider-trigger { display: none; }
  body[data-shell="ant"] .sh-main { margin-left: 0 !important; }
  body[data-shell="ant"] .sh-top { padding: 0 12px; }
}