:root {
  --brand:        #ff4d4f;
  --brand-hover:  #ff7875;
  --brand-soft:   #fff1f0;
  --brand-ink:    #cf1322;
  --bg:           #f5f7f9;
  --surface:      #ffffff;
  --border:       #f0f0f0;
  --text:         #1f1f1f;
  --muted:        #8c8c8c;
  --text-secondary:#595959;
  --success:      #52c41a;
  --warning:      #faad14;
  --info:         #1890ff;
  --radius:       8px;
  --shadow:       0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}

/* 全局字号 -1：根字号 16px→15px，Bootstrap 文本/组件基于 rem 整体等比缩小约 1 级；固定 px 布局不受影响 */
html { font-size: 15px; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== 布局：侧边栏 + 内容 ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 208px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar.offcanvas, .sidebar.offcanvas-start { width: 208px; }
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  font-weight: 700;
}
.sidebar-header .brand { font-size: 1.05rem; }
.nav-menu .nav-link {
  display: flex; align-items: center; gap: 10px;
  color: #50556a; font-weight: 500;
  padding: 10px 12px; margin: 2px 0;
  border-radius: 10px; border: none; background: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.nav-menu .nav-link .ico { width: 20px; text-align: center; }
.nav-menu .nav-link:hover { background: var(--brand-soft); color: var(--brand-ink); }
.nav-menu .nav-link.active { background: var(--brand-soft); color: var(--brand); border-left: 3px solid var(--brand); padding-left: 9px; }

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 56px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1020;
}
.topbar-title { font-weight: 600; }
.btn-icon { border: none; background: none; font-size: 1.25rem; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.btn-icon:hover { background: var(--brand-soft); }
.page-main { padding: 14px 20px; max-width: 100%; width: 100%; margin: 0; }

/* 桌面端：侧边栏常驻 */
@media (min-width: 768px) {
  .sidebar.offcanvas-md {
    position: sticky !important;
    top: 0;
    visibility: visible !important;
    transform: none !important;
    height: 100vh;
    z-index: 1100 !important;
    overflow-y: auto;
    background: var(--surface) !important;
  }
  .sidebar .offcanvas-body { flex-grow: 1 !important; }
}
/* 移动端：侧边栏为抽屉，内容占满 */
@media (max-width: 767.98px) {
  .sidebar { background: var(--surface); }
  .page-main { padding: 14px; }
}

/* ===== 卡片 / 组件 ===== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}
/* 商品卡片：名称超长时由 .name 的 min-width:0 + text-truncate 控制换行，不再整卡 overflow:hidden（否则会裁掉「更多」下拉） */
.stat-card {
  border: none; border-top: 3px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s; cursor: pointer; height: 100%;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.stat-card.clickable { text-decoration: none; }
.stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--brand); }
.stat-label { color: var(--muted); font-size: .85rem; }

.upcoming-soon { border-left: 4px solid var(--brand) !important; background: var(--brand-soft); border-radius: 8px; }

.product-img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.table .product-img { width: 44px; height: 44px; }

/* ----- 标签（收敛为 绿/红/蓝/灰 四色） ----- */
.tag { font-size: .75rem; padding: .15rem .55rem; border-radius: 4px; font-weight: 500; }
.tag-arrived { background: #f6ffed; color: #389e0d; }            /* 绿：正向/完成 */
.tag-pending { background: var(--brand-soft); color: var(--brand-ink); } /* 红：待处理 */
.tag-resample { background: var(--brand-soft); color: var(--brand-ink); } /* 红：需补样（并入关注） */
.tag-success { background: #f6ffed; color: #389e0d; }            /* 绿：补样成功/可见 */
.tag-default { background: #e6f7ff; color: var(--info); }        /* 蓝：普通标签 */
.tag-info    { background: #e6f7ff; color: var(--info); }        /* 蓝：信息 */
.tag-warning { background: var(--brand-soft); color: var(--brand-ink); } /* 红：并入关注 */
.tag-trial   { background: #fff7e6; color: #d46b08; }            /* 橙：试用租户 */
.tag-muted   { background: #f5f5f5; color: #8c8c8c; }            /* 灰：弱化 */

.queue-box { display: flex; flex-wrap: wrap; }
.card-paused { opacity: .72; border-style: dashed; }
.row-paused { opacity: .7; }
.row-paused td:first-child { border-left: 3px solid var(--muted); }

/* ----- 表单与按钮微调 ----- */
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(255,77,79,.15);
}
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color:#fff; }

/* 链接图标（商品名称旁的 "🔗"） */
.product-link-icon {
  display: inline-block;
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.product-link-icon:hover { color: var(--brand); background: var(--brand-soft); }

/* 标签图片缩略图（标签类型 image） */
.tag-img { height: 22px; border-radius: 4px; vertical-align: middle; }

/* 上传分区：主图(蓝) / 附件(灰) 视觉区分 */
.upload-zone { border: 1px dashed var(--border); border-radius: var(--radius); padding: .75rem; background: #fafbfc; }
.upload-zone--img { border-color: #91caff; background: #f0f8ff; }
.upload-zone--att { border-color: #d9d9d9; background: #fafafa; }
.upload-zone .uz-title { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .35rem; color: var(--text-secondary); }

/* 列表表头美化（商品/商家/标签/账号统一） */
.table thead th {
  font-weight: 600; color: var(--text-secondary);
  font-size: .82rem; letter-spacing: .02em;
  background: #fafbfc; border-bottom: 2px solid var(--border);
  white-space: nowrap; vertical-align: middle; padding: .7rem .75rem;
  text-align: left;
}
.table tbody td { vertical-align: middle; }

/* 徽章小组件 */
.mini-btn { padding: .15rem .5rem; font-size: .78rem; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.mini-btn:hover { background: var(--brand-soft); }

/* 附件网格 */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.attach-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: #fff; }
.attach-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; background: #f1f2f6; }
.attach-name { font-size: .72rem; color: var(--muted); word-break: break-all; margin-top: 4px; }

/* 弹窗顶栏 */
.modal-header { border-bottom: 1px solid var(--border); }
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow); }

/* 让弹窗整体高于常驻侧边栏(1100)，修复「管理」弹窗左侧被遮挡的回归：
   侧边栏保持 1100（卡片模式下拉规避溢出），弹窗与遮罩均高于它，打开时侧边栏被压暗 */
.modal { z-index: 1200 !important; }
.modal-backdrop { z-index: 1190 !important; }

/* 弹窗字段自定义排序：手柄 ⠿ 在字段名前、▲▼ 在字段名后（行内布局） */
.form-field { position: relative; }
.form-field.dragging { opacity: .45; }
.ff-handle { cursor: grab; color: var(--muted); user-select: none; line-height: 1; font-size: .95rem; margin-right: 4px; vertical-align: middle; }
.ff-handle:active { cursor: grabbing; }
.ff-arrows { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.ff-btn { border: none; background: none; color: var(--muted); padding: 0 3px; font-size: .72rem; line-height: 1; cursor: pointer; }
.ff-btn:hover { color: var(--brand); }
/* 字段显示设置弹窗里的字段项 */
.field-layout-item.dragging { opacity: .45; }
.field-layout-item .ff-handle { margin-right: 0; }

/* ===== 通用：自动填充卡片网格（最后一行自适应无空缺） ===== */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem; }
.grid-auto > .card { width: 100%; }

/* 表格内下拉被下一行/边框遮挡修复 */
.table .dropdown-menu { z-index: 1090; }
.table-responsive > .table { position: relative; }
/* Portal 到 <body> 的 fixed 菜单（数据 <更多> 等）：脱离 .table/.list-panel 上下文后，
   需要一个比 JS 临时提升的 td/.card(z=1080) 更高的 z-index，否则会被同一行/卡盖住。
   选择器 body > .dropdown-menu 比 Bootstrap 默认 .dropdown-menu(z=1000) 更具体，天然覆盖。 */
body > .dropdown-menu { z-index: 1100; }

/* 列表分页：固定高度容器（约 10 行/项），超出滚动；页码在右下角（由 .pagination 控制） */
.list-panel { max-height: 78vh; overflow: auto; padding-right: 2px; position: relative; }
/* 商家视图内的商品面板略矮，避免单商家卡片出现过大留白 */
.list-panel.mv-products { max-height: 64vh; }
/* 下拉菜单统一抬到所在行/卡片之上（JS 在 show.bs.dropdown 时再临时提升 td / card / 按钮组 z-index）。
   注意：不要在普通态给所有「更多」按钮组加高 z-index —— 否则相邻行的按钮组(1080)反而会压住
   当前打开的下拉（其所在 td 被 JS 提升后的 stacking context 反而更低）。提升仅作用于「打开的那一行」。 */
.list-panel .dropdown-menu { z-index: 1090; }
/* 卡片 / 按钮组成为 stacking context 起点，便于 JS 临时整体提升单卡 / 单行 */
.list-panel .card,
.list-panel .btn-group { position: relative; }

/* 视图切换：仅图标 + 悬浮文字提示（title 提供 hover 提示） */
.vt-ico { width: 0.9em; height: 0.9em; display: block; }
/* 移动端左右内边距收窄 */
@media (max-width: 576px) {
  .page-main { padding-left: 12px; padding-right: 12px; }
}

/* 仅查看模式：前端守卫 —— 隐藏所有写操作控件，仅保留查看/导航/登出 */body.view-only .editable { display: none !important; }
body.view-only .btn-primary,
body.view-only .btn-outline-primary,
body.view-only .btn-outline-danger { display: none !important; }
/* btn-outline-secondary 大多为写操作（联系方式/重置密码/测试/更多▾/↑↓ 等）；
   视图切换按钮加 .view-allow 豁免 */
body.view-only .btn-outline-secondary:not(.view-allow) { display: none !important; }

/* 视图切换：看板强调色 + 激活态实心高亮，三者明显区分 */
.view-allow { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.view-allow span { white-space: nowrap; }
.view-allow.view-board-accent { color: var(--brand); border-color: var(--brand); }
.view-allow.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.view-allow.active .vt-ico { color: #fff; }
/* 弹窗内输入/选择/文本域：禁用交互、置灰，保留可读 */
body.view-only .modal-body :is(input, select, textarea) {
  pointer-events: none; opacity: .55; background: #f5f5f5;
}

/* 编导角色：商品本身只读（隐藏内联 editable 控件与新建商品按钮），
   但保留「管理」入口与详情内对排期/视频/补样的增删改查 */
body.role-director .editable { display: none !important; }
body.role-director #btn-new-product { display: none !important; }

/* ===== 商品详情：排期 / 视频 子资源美化 ===== */
/* 排期录入表单 */
.schedule-form { border: 1px solid var(--border) !important; }
.schedule-form .form-label { color: var(--text-secondary); font-size: .82rem; }

/* 排期列表项 */
.schedule-item { background: var(--surface); transition: background .12s, box-shadow .12s; }
.schedule-item:hover { background: #fafbfc; box-shadow: var(--shadow); }
.schedule-item .sched-date { color: var(--brand-ink); font-size: .95rem; }
.schedule-item .btn-group .btn { font-size: .8rem; }

/* 视频区块分区与小标题 */
.video-section { }
.video-section .section-head { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.video-section .section-title { font-weight: 600; color: var(--text-secondary); font-size: .9rem; }
.video-list:empty { display: none; }
.video-card { background: var(--surface); transition: box-shadow .12s; }
.video-card:hover { box-shadow: var(--shadow); }
.video-card.bg-light-subtle { background: var(--bg) !important; }

/* 补样记录项 */
.resample-item { background: var(--surface); }

/* ===== 页头：字段显示按钮（仅图标） + 新建/搜索响应式布局 ===== */
/* 字段显示设置：去掉文字，仅保留图标（全端统一） */
.field-display-btn { padding: .25rem .5rem; }
.field-display-btn .vt-ico { width: 1.1em; height: 1.1em; }

/* 三段式页头：
   - 左簇 .header-left：标题 + 视图切换 + 搜索 + [筛选]，内部可换行
   - 右上簇 .header-right：字段显示图标 + 新建，永不被换行，始终第一行右上
   PC：搜索框紧跟视图切换后内联；移动端放不下时换行到标题下方、居左。
   核心四元素（标题 / 视图切换 / 标签显示设置 / 新建）在 PC 与移动端永远在第一行。 */
/* PC：两簇垂直居中对齐；移动端：右上簇顶对齐到第一行（保证留在第一行）。
   标题与按钮等高（min-height=34px）并居中，使第一行底部齐平、排列美观。 */
.page-header { align-items: center; }
.page-header h5 { margin: 0; display: inline-flex; align-items: center; min-height: 34px; }
.header-left {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem; flex: 1 1 0; min-width: 0;
}
.header-right {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: .5rem; flex: 0 0 auto; margin-left: auto;
}
.header-search { display: flex; flex: 0 0 220px; max-width: 240px; }
.header-search input { width: 100%; }

@media (max-width: 767.98px) {
  /* 移动端：右上簇顶对齐第一行，搜索换行到标题下方、居左 */
  .page-header { align-items: flex-start; }
  .header-search { flex-basis: 220px; max-width: 100%; }
}

@media (max-width: 767.98px) {
  /* 移动端：搜索框放不下视图切换后时，换行到标题下方、居左（不伸缩，确保右上簇始终第一行） */
  .header-search { flex-basis: 220px; max-width: 100%; }
}