/* 千牛式字体规范：正文使用系统 Regular，标题和关键数据使用 Medium。 */
:root {
  --xy-font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif;
  --xy-font-regular: 400;
  --xy-font-medium: 500;
}

html,
body,
#app,
button,
input,
select,
textarea,
.n-config-provider {
  font-family: var(--xy-font-family) !important;
  letter-spacing: 0;
}

body,
button,
input,
select,
textarea,
.n-data-table,
.n-form,
.n-menu,
.n-modal,
.n-popover,
.n-select {
  font-weight: var(--xy-font-regular);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.n-card-header__main,
.n-data-table-th,
.n-statistic-value,
.n-menu-item--selected {
  font-weight: var(--xy-font-medium);
}

/* ---------- 千牛式外壳（Figma 设计稿「星屹服饰后台 · 千牛改版」） ---------- */
:root {
  --xy-primary: #3D7EFF;
  --xy-primary-light: #EBF2FF;
  --xy-title: #111111;
  --xy-text: #666666;
  --xy-muted: #999999;
  --xy-border: #E6E8ED;
  --xy-page: #F0F2F5;
}
/* 内容区浅灰底 */
.admin-layout-content,
.admin-layout-content .n-layout-scroll-container { background: var(--xy-page) !important; }
.admin-layout-sider { border-right: 1px solid var(--xy-border); box-shadow: none !important; }
.admin-layout-sider .n-layout-sider-scroll-container { overflow: hidden !important; }
.xy-nav { display: flex; height: 100%; min-height: calc(100vh - 64px); background: #fff; }
/* 一级图标栏：72px，图标在上、两字简称在下，选中浅蓝底蓝字 */
.xy-rail { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; overflow-y: auto; border-right: 1px solid var(--xy-border); }
.xy-rail-item { width: 60px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--xy-text); font-size: 12px; border-radius: 10px; cursor: pointer; transition: background-color .2s, color .2s; }
.xy-rail-item:hover { color: var(--xy-primary); background: #F7F8FA; }
.xy-rail-item.active { color: var(--xy-primary); background: var(--xy-primary-light); font-weight: 500; }
.xy-rail-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 20px; }
.xy-rail-icon > * { max-width: 22px; max-height: 22px; }
.xy-rail-label { line-height: 1; white-space: nowrap; }
/* 二级文字菜单：168px，只放文字 */
.xy-sub { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; overflow-y: auto; }
.xy-sub-title { padding: 0 8px 8px; color: var(--xy-title); font-size: 16px; font-weight: 500; }
.xy-sub-group { padding: 12px 8px 4px; color: var(--xy-muted); font-size: 12px; }
.xy-sub-item { height: 36px; display: flex; align-items: center; padding: 0 12px; overflow: hidden; color: var(--xy-text); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; border-radius: 8px; cursor: pointer; transition: background-color .2s, color .2s; }
.xy-sub-item:hover { color: var(--xy-primary); background: #F7F8FA; }
.xy-sub-item.active { color: var(--xy-primary); background: var(--xy-primary-light); font-weight: 500; }
/* 顶栏：白底、底部分割线 */
.admin-layout-header { border-bottom: 1px solid var(--xy-border); box-shadow: none !important; }

/* 侧边栏加宽到 240（72 + 168）后，内容区、顶栏、标志区同步让位；收起时为 72。 */
.admin-layout-fix-side .admin-layout-content-son { padding-left: 240px !important; }
.admin-layout-fix-side .admin-layout-header .layout-header { padding-left: 240px !important; }
.admin-layout-collapse.admin-layout-fix-side .admin-layout-content-son,
.admin-layout-collapse .admin-layout-content-son { padding-left: 72px !important; }
.admin-layout-collapse.admin-layout-fix-side .admin-layout-header .layout-header,
.admin-layout-collapse .admin-layout-header .layout-header { padding-left: 72px !important; }
.admin-layout-header .logo { width: 240px !important; }
.admin-layout-collapse .admin-layout-header .logo { width: 72px !important; }

/* 顶栏：60px 高；左侧圆角搜索框，右侧图标下方带小字，账号显示企业名和用户名 */
.layout-header { height: 60px !important; }
.layout-header-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.xy-search { display: flex; align-items: center; gap: 8px; width: 320px; max-width: 32vw; height: 36px; margin: 0 auto 0 16px; padding: 0 14px; color: var(--xy-muted); font-size: 14px; background: var(--xy-page); border-radius: 18px; cursor: pointer; }
.xy-search:hover { color: var(--xy-text); }
.layout-header-right .layout-header-trigger { padding: 0 10px !important; }
.layout-header-right .layout-header-trigger .h-full.flex { flex-direction: column; justify-content: center; gap: 2px; color: var(--xy-text) !important; }
.xy-hd-label { font-size: 12px; line-height: 1; color: var(--xy-text); }
.notifier-plus .h-full.flex::after { content: "消息"; font-size: 12px; line-height: 1; color: var(--xy-text); }
.layout-header-right .xy-hide { display: none !important; }
.layout-header-right .avatar { display: flex !important; align-items: center; gap: 10px; }
.layout-header-right .avatar .n-avatar { background: var(--xy-primary) !important; }
.xy-account { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.xy-account b { color: var(--xy-title); font-size: 14px; font-weight: 500; }
.xy-account small { color: var(--xy-muted); font-size: 12px; }
.xy-caret { color: var(--xy-muted); font-size: 14px; }
/* 首页嵌入页铺满内容区 */
.admin-layout-content-main { background: var(--xy-page); }

/* ---------- 外壳细节按设计稿 ---------- */
/* 两栏菜单通高（从页面顶部开始），标志在图标栏顶部；顶栏只覆盖右侧内容区。 */
.admin-layout-sider { top: 0 !important; height: 100vh !important; z-index: 20 !important; }
.admin-layout-header .logo { display: none !important; }
.xy-nav { min-height: 100vh; }
.xy-rail { padding-top: 16px; }
.xy-rail-logo { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; object-fit: contain; }
/* 顶栏按设计稿：只保留搜索框、下载、消息、账号；面包屑、刷新、收起、全屏不显示（收起用侧边栏的小箭头）。 */
.layout-header-left { display: none !important; }
.layout-header-right .layout-header-trigger:has(.xy-fs) { display: none !important; }
.xy-search { margin-left: 24px; }
.layout-header { padding-right: 16px !important; }

/* 线性图标（设计稿）：一级菜单 22px，顶栏 20px，搜索框 16px，颜色随文字 */
.xy-rail-icon svg { width: 22px; height: 22px; }
.xy-hd-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--xy-text); }
.xy-hd-icon svg { width: 20px; height: 20px; }
.xy-hd-icon.small svg { width: 16px; height: 16px; }
.xy-search .xy-hd-icon { color: var(--xy-muted); }
.xy-caret { display: inline-flex; }
.xy-caret svg { width: 14px; height: 14px; color: var(--xy-muted); }
.notifier-plus .h-full.flex { gap: 2px; }

/* 嵌入页高度：顶栏改为 60px 后，嵌入页占满剩余高度（原来按旧顶栏 + 页签预留了 128px）。 */
.xy-embed-frame { height: calc(100vh - 61px) !important; }
/* 嵌入页自带上边距，去掉原布局页面顶部的 20px 外边距，避免整页多出滚动条。 */
.main-view:has(> .xy-embed-frame) { margin-top: 0 !important; }

/* 一级菜单（千牛风格）：常态线性图标；悬停图标上浮、浅灰底；选中面性图标 + 浅蓝底 + 左侧蓝色指示条 */
.xy-rail-item { position: relative; }
.xy-rail-icon { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.xy-rail-item:hover .xy-rail-icon { transform: translateY(-2px) scale(1.08); }
.xy-rail-item.active .xy-rail-icon { transform: none; }
.xy-rail-item.active::before { content: ""; position: absolute; left: -6px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--xy-primary); }
.xy-rail-item:active .xy-rail-icon { transform: scale(.94); }

/* 千牛式圆润图标：图标略放大，选中底色更圆润。 */
.xy-rail-item { border-radius: 14px; }
.xy-rail-icon, .xy-rail-icon svg { width: 24px; height: 24px; }
.xy-rail-icon > * { max-width: 24px; max-height: 24px; }

/* ---------- 外壳优化（DD 2026-10-16）：原后台页面按千牛规范统一 ---------- */
/* 按钮胶囊圆角（同星屹页面：高 32、圆角 16），主按钮蓝色渐变，按下微缩。文字按钮不变。 */
.n-button:not(.n-button--text-type):not(.n-button--circle-shape) { --n-border-radius: 16px !important; transition: transform .1s, box-shadow .2s; }
.n-button.n-button--medium-type:not(.n-button--text-type):not(.n-button--circle-shape) { --n-height: 32px !important; --n-padding: 0 18px !important; }
/* 透明底的文字式按钮（--n-color: #0000，如表格里的编辑、个人资料里的修改）不加渐变。 */
.n-button--primary-type.n-button--medium-type:not(.n-button--text-type):not(.n-button--ghost):not(.n-button--secondary):not(.n-button--disabled):not([style*="--n-color: #0000;"]) { background: linear-gradient(90deg, #3D7EFF, #1966FF) !important; box-shadow: 0 2px 4px rgba(61, 126, 255, .2); }
.n-data-table .n-button { background: transparent !important; box-shadow: none !important; }
.n-button:not(.n-button--disabled):active { transform: scale(.98); }
/* 输入框、下拉 6px 圆角；卡片 12px 圆角、无边框轻阴影。 */
.n-input, .n-base-selection, .n-input-number { --n-border-radius: 6px !important; }
.admin-layout-content .n-card { --n-border-radius: 12px !important; border: 0 !important; box-shadow: 0 2px 8px rgba(17, 17, 17, .04); }
/* 表格表头浅灰圆角、正文 14px，同星屹表格。 */
.admin-layout-content .n-data-table { --n-th-color: #F7F8FA !important; --n-th-text-color: #666666 !important; --n-th-font-weight: 400 !important; --n-border-color: #F0F2F5 !important; }
.admin-layout-content .n-data-table .n-data-table-thead .n-data-table-th:first-child { border-radius: 8px 0 0 8px; }
.admin-layout-content .n-data-table .n-data-table-thead .n-data-table-th:last-child { border-radius: 0 8px 8px 0; }
/* 弹窗 16px 圆角 */
.n-modal .n-card, .n-dialog { --n-border-radius: 16px !important; }

/* 二级菜单的收起按钮放到菜单底部，不再压住内容区边缘。 */
.admin-layout-sider .n-layout-toggle-button { top: auto !important; bottom: 16px !important; right: 12px !important; transform: none !important; }
.admin-layout-collapse .admin-layout-sider .n-layout-toggle-button { right: 24px !important; }
.xy-sub, .xy-rail { padding-bottom: 56px; }

/* ---------- 平板竖屏（DD 2026-10-18）：宽度 ≤ 900px 时左边只留 72px 图标栏，二级菜单改成顶栏下面一排横向标签（可左右滑），内容区让出更多宽度。 ---------- */
@media (max-width: 900px) {
  .admin-layout-sider { width: 72px !important; min-width: 72px !important; max-width: 72px !important; flex-basis: 72px !important; }
  .admin-layout-fix-side .admin-layout-content-son, .admin-layout-content-son { padding-left: 72px !important; }
  .admin-layout-fix-side .admin-layout-header .layout-header, .admin-layout-header .layout-header { padding-left: 72px !important; }
  .xy-sub { position: fixed; top: 60px; left: 72px; right: 0; z-index: 19; height: 48px; flex-direction: row; align-items: center; gap: 4px; padding: 6px 12px; overflow-x: auto; overflow-y: hidden; background: #fff; border-bottom: 1px solid var(--xy-border); scrollbar-width: none; }
  .xy-sub::-webkit-scrollbar { display: none; }
  .xy-sub-title, .xy-sub-group { display: none; }
  .xy-sub-item { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; }
  .admin-layout-content-main { margin-top: 48px; }
  .xy-search { width: auto; max-width: 40vw; }
}