/* ==========================================================================
   达播工作台 — pages-schedule.css
   排期日历 / 排期列表 / 抽屉详情
   ========================================================================== */

/* ============================ 排期日历 ============================ */

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.calendar-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.calendar-filters > * {
  flex: 0 0 auto;
}

.calendar-month {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  min-width: 140px;
  text-align: center;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

.legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  cursor: pointer;
  user-select: none;
}

.legend-item__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm);
}

.legend-item.is-off {
  opacity: 0.4;
}

.calendar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--color-border);
}

.calendar__weekday {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--table-header-fg);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-cell {
  min-height: 140px; /* 桌面格子：一屏多看一周的同时保证每格信息量（条数由 JS 联动，最多 4 条） */
  min-width: 0; /* 让 grid-template-columns: repeat(7, 1fr) 真正按 1/7 均分，不被 cell 内长文字 min-content 撑爆 */
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  padding: var(--space-2);
  position: relative;
  overflow: hidden;
}

.calendar-cell:nth-child(7n) {
  border-right: none;
}

.calendar-cell.is-outside {
  background: var(--color-surface-2);
}
.calendar-cell.is-outside .calendar-cell__day {
  color: var(--color-muted);
}

.calendar-cell.is-today .calendar-cell__day {
  background: var(--color-accent);
  color: var(--color-accent-on);
  border: none;
}

.calendar-cell__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding-top: 1px; /* 补偿中文字面偏上，日期视觉居中 */
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

.calendar-cell__events {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--space-1);
  overflow: hidden;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); /* 默认缩小 DPI：色条更紧凑，一格能显示 5 个事项 */
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.cal-event__bar {
  width: 3px;
  height: 100%;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cal-event__time {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
  flex-shrink: 0;
}

.cal-event__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event:hover {
  filter: brightness(0.96);
}

/* 已结束的排期（日历）：色条淡化，悬停轻微恢复 */
.cal-event.is-past {
  opacity: 0.5;
}
.cal-event.is-past:hover {
  opacity: 0.85;
}

.cal-more {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  padding: 0 var(--space-1);
}

/* ---- 月视图底部：本月待定排期（大概排期达人） ---- */
.cal-approx {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cal-approx__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-2);
  margin-bottom: var(--space-2);
}
.cal-approx__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cal-approx-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease-standard);
}
.cal-approx-item:hover { border-color: var(--color-accent-text); }
.cal-approx-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--color-muted));
  flex-shrink: 0;
}
.cal-approx-item__name {
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  font-weight: var(--font-weight-medium);
}
.cal-approx-item__type {
  font-size: var(--font-size-xs);
}
.cal-approx-item__bd {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* ---- 抽屉详情 ---- */
.drawer-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.detail-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}

/* 详情抽屉大模块之间用虚线分隔（非标题下虚线） */
.detail-block + .detail-block {
  border-top: 1px dashed var(--color-border-soft);
  padding-top: var(--space-3);
}

.detail-section__title--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 事项标题（在事项色块内，用事项颜色高亮，略大更显眼） */
.detail-item-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.detail-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

/* 时间轴事项标签（按事项类型标准色着色） */
.timeline__lbl {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.timeline__item.is-current .timeline__lbl {
  font-weight: var(--font-weight-semibold);
}

/* 行内编辑卡片 */
.ie-box {
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  margin-bottom: var(--space-4);
}

.ie-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: flex-end;
}

/* 详细信息突出展示卡片（整个排期所有事项的完整信息） */
.item-detail {
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
}

.detail-item-block {
  padding: var(--space-2) 0;
}
.detail-item-block + .detail-item-block {
  border-top: 1px dashed var(--color-border-soft);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.detail-item-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.detail-item-block__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.detail-item-block__label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}
.detail-item-block__fields {
  padding-left: var(--space-4);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.kv-row__k {
  color: var(--color-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kv-row__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  flex-shrink: 0;
}
.kv-row__icon svg {
  display: block;
}

.kv-row__v {
  color: var(--color-fg);
  text-align: right;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================ 排期列表 / 表单 ============================ */

.schedule-conflict {
  margin-top: var(--space-3);
}

/* ============================ 排期表单：卡片化布局 ============================ */

.sf-card {
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-5);
}
.sf-card .card__body {
  max-width: none;
}

/* 分产品 GSV 动态行（业绩表单） */
.pf-prod-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.pf-prod-row .icon-btn {
  color: var(--color-danger);
}

/* sticky 底部操作栏（全宽背景，内部内容限宽右对齐） */
.sf-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-soft);
}
.sf-actions__inner {
  max-width: var(--form-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

/* 非 sticky 的底部操作区（普通 form-actions）：与 sf-actions 内容区对齐 */
.page-header ~ .form-actions {
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ============================ 排期表单：左侧时间轴 ============================ */

/* 「分场次维护」——单个直播场次里的「本场提成点位」（助播 / 商务助理）。
   与上方的人员字段用一条浅分隔线断开，表明这是"本场独立的一组参数"、不与人员混在一起。 */
.node-rate-block {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}
.node-rate-block__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
}

/* 基本信息卡里「各场点位」的只读汇总（第 1 场 0.2% / 第 2 场 0.1%）。
   高度对齐同排的输入框（40px），避免与左侧商务输入框错位。 */
.sf-rate-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}
.sf-rate-sum__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.sf-rate-sum__k { color: var(--color-muted); }
.sf-rate-sum__v {
  color: var(--color-fg);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
/* 该场留空 = 回退默认档：灰字提示，别让它看起来像一个已配好的值 */
.sf-rate-sum__v.is-empty {
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
}
.sf-rate-sum--empty {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--color-muted);
  font-size: var(--font-size-base);
}

/* 「各场提成点位」表格（2026-09-15 从「行程排期」每场搬到「基本信息 → 提成点位」卡，乐哥拍板方案 A）。
   形态：**场次 × 角色** 两列输入框。
   为什么是表格而不是一行行堆叠：表格天然把「哪个值属于哪一场」对齐 ——
   这正是当初把它放在场次里的理由；现在带上「第 N 场 + 时间」，在基本信息里同样不会配错场次。 */
.rate-sched { width: 100%; border-collapse: collapse; }
.rate-sched th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  padding: 0 var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.rate-sched td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}
.rate-sched tr:last-child td { border-bottom: 0; }
.rate-sched th:last-child, .rate-sched td:last-child { padding-right: 0; }
/* 输入框不给满宽：跟项目其它表单一致（过宽的 number 输入框会显得像"要填长内容"） */
.rate-sched input.input { width: 100%; max-width: 160px; }
.rate-sched__k { font-size: var(--font-size-sm); color: var(--color-fg); white-space: nowrap; }
.rate-sched__d { font-size: var(--font-size-xs); color: var(--color-muted); margin-left: var(--space-2); }

/* 「已按人配」标记（2026-09-15）：本场配了逐人点位时，整场值对本场**不生效**（后端 P1 优先于 P2）。
   为什么必须标：不标的话用户在本场填了值却算不出预期金额，会以为系统算错。
   ⚠️ 2026-09-15 晚改为**纯提示**（原来是 button、点了滚到下方「按人配点位」区块）：
      那块 UI 已按乐哥要求下线，跳转目标不存在 → 去掉 cursor:pointer 与 hover，
      否则会呈现"看着能点、点了没反应"的假可点。 */
.rate-sched__tag {
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-warning-border);
  border-radius: 10px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  white-space: nowrap;
}

/* 被逐人点位覆盖的场次：整行略作弱化，提示"这里的整场值不是最终生效值" */
.rate-sched tr.is-by-person td input.rsc-input {
  border-style: dashed;
  color: var(--color-muted);
}

/* ⚠️ 已废弃（2026-09-15 晚）：`.member-rate-session*` 与 `rate-session-flash` 原是
   「按人配点位（助播 / 商务助理）」按场次分组的壳 + 从「已按人配」跳过来时的高亮动画。
   该区块已按乐哥要求下线（「功能多余，不要」），故整段删除。
   商务侧的逐人点位是**平铺列表**（`.member-rate-list`，见 pages.css），不用分组壳。 */

/* 「默认点位档」在**混合排期**（部分场有商务助理、部分没有）退化成两档并排：
   生产实测只有 1 条这种排期（#57 农科之声），所以样式从简 —— 两个数字 + 各自适用条件。 */
.sf-readonly--two {
  gap: var(--space-3);
  justify-content: flex-start;
}
.sf-readonly--two > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sf-readonly--two em {
  font-style: normal;
  font-size: var(--font-size-xs);
  color: var(--color-meta);
}
.sf-readonly__sep {
  width: 1px;
  height: 14px;
  background: var(--color-border);
}

/* ⚠️ 已废弃（2026-09-15）：`.node-rate-block` 原是「行程排期 → 每个直播场次」里的
   「本场提成点位」区块，该 UI 已搬到基本信息卡（见上面的 `.rate-sched`）。
   样式**保留**仅因 `.render-check/POINTS-LAYOUT-方案对比.html` 那版方案原型还在引用；
   日后清理原型文件时可连同这段一起删。 */

/* 「大概排期」与下方时间轴的**上下呼吸**（2026-09-15 乐哥：「上下间距大点」）。
   该块已改用 `.module-card--bare`（去卡片化 + 一条分隔线收尾）——分隔线两侧要**等宽留白**，
   读起来才是"一组结束 / 下一组开始"，而不是"线贴在某一侧"。
   ⚠️ 两侧留白来自**两个不同的属性**，必须成对调整：
       上方 = bare 块自己的 `padding-bottom`（components.css 给的是 --space-6 = 24px）
       下方 = 时间轴自己的 `margin-top`（#sf-timeline **不是** .module-card，
              拿不到 `.module-card + .module-card` 那 24px）
      只改一个 → 线两侧一边 24 一边 32，肉眼看着"线偏了一边"。
   ⚠️ 分隔线上下**必须等宽**（实测第一版 25 / 32 → 线明显"偏下"，像贴在时间轴那侧）：
      两侧都统一到 --space-8（32px），上面的用 padding-bottom 补、下面的用 margin-top 补。
   ❌ 踩过的坑（2026-09-15 当日更正）：本块与 tab 栏之间的间距**原本不需要补** ——
      `#sf-tab-body` 已经给了 20px，而普通 tab 的首个卡片靠 `-16px` 负 margin 抵消卡片内边距后，
      标题行的边界正好也落在 20px 上。我先前误判成"靠卡片 16px 内边距撑着"，
      又给它加了 `margin-top: --space-2`(8px) → 区块起点变成 28px，比"基本信息"tab 低 8px，
      切 tab 时标题会上下跳。**正确做法是让标题行自己补上内边距**（见 components.css 的
      `.module-card--bare > .module-card__head { padding: var(--space-3) 0 0 }`），
      这里保持 margin 为 0，两个 tab 的区块起点与标题文字顶才会同时对齐。 */
.sf-tab-panel[data-panel="detail"] > #sf-approx-card {
  padding-bottom: var(--space-8); /* 分隔线**上方**留白（与下方 32px 对齐） */
}
.sf-tab-panel[data-panel="detail"] > #sf-timeline {
  margin-top: var(--space-8); /* 分隔线**下方**留白 */
}

.tl {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 连续时间轴线：从第一个 dot 中心到最后一个 dot 中心（height 由 JS 动态算，避免溢出到离开节点下方） */
.tl::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 11px;
  height: var(--tl-line-h, 0);
  width: 2px;
  background: var(--color-border);
  pointer-events: none;
}

.tl-item {
  display: flex;
  gap: var(--space-3);
}

.tl-item__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.tl-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 5px;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.tl-item__content {
  flex: 1;
  min-width: 0;
  margin-bottom: var(--space-4);
}

/* 节点之间的分隔线 + 居中「新增其他事项」按钮 */
.tl-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3) 32px; /* 32px 对齐 content（rail 20 + gap 12） */
}
.tl-add-row__line {
  flex: 1;
  border-top: 1px dashed var(--color-border);
}
.tl-add-row__btn {
  flex-shrink: 0;
}

.tl-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tl-item__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-fg);
}

.tl-item__title .is-sub {
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
}

.tl-item__time {
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  margin-left: var(--space-2);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

/* 额外支持 / 住宿信息：开关子项（开关独占一行 + 间距 + 文字加粗） */
.sf-switch {
  display: flex;
  width: fit-content;
  margin: var(--space-3) 0 var(--space-2);
}
.sf-switch .switch__label {
  font-weight: var(--font-weight-semibold);
}
/* 大概排期开关：文字浅色不加粗（注释性质，区别于加粗的功能开关） */
.sf-switch--muted .switch__label {
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}
/* 基本信息：普通布局——label 在 input 上方（不浮动），所有字段统一框高 40px + 字号 14px */
.sf-card-row {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}
.sf-card-row:last-child { margin-bottom: 0; }
.sf-field-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sf-field-col .sf-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}
.sf-field-col .sf-label .req { color: var(--color-danger); margin-left: 2px; }
/* 输入框宽度撑满列；高度/字号已由全局 .input/.select/.textarea 统一（40px / 14px），此处不再硬编码 */
.sf-field-col .input,
.sf-field-col .select {
  width: 100%;
}
.sf-field-col textarea {
  width: 100%;
}
/* fp 自定义（达人选择/所属商务）：统一框高 40px + 字号随全局 */
.sf-field-col .fp__box {
  min-height: 40px;
  font-size: var(--font-size-base);
}
.sf-field-col .fp__value { font-size: var(--font-size-base); }
.sf-field-col .fp__search { font-size: var(--font-size-base); }
/* 只读 div（达人简称）：统一高 40px + 字号随全局 */
.sf-field-col .sf-readonly {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: var(--font-size-base);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-disabled-bg);
  color: var(--color-fg-2);
}
.sf-field-col.sf-grow-1 { flex: 1; }
.sf-field-col.sf-grow-15 { flex: 1.5; }
.sf-field-col.sf-w-live { flex: 0 0 170px; }
.sf-field-col.sf-w-gmv  { flex: 0 0 220px; }
/* 直播平台多选 + 佣金配置按平台分套 */
.sf-platform-checks {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-height: 40px;
}
.sf-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-base);
  color: var(--color-fg);
  cursor: pointer;
}
.sf-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.pta-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-top: 2px;
}
/* 排期表单各面板：内容间距统一由 `.module-card + .module-card` 保证（见 components.css 模块卡标准），
   这里不再需要容器 gap，也不再需要佣金/提成的中间包裹层 */
.sf-commission-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
  margin-bottom: var(--space-2);
}
/* 模块卡的容器与标题栏已抽为**全站通用组件**，定义在 components.css：
   .module-card / .module-card__head / .module-card__head--plain / .module-card__title
   规则：标题栏有状态底色就不加线，没底色才用线补分界；状态色只进标题栏，不外溢到卡片边界。
   本页只保留排期表单特有的部分（状态开关、支持行、面板间距）。 */
/* 状态开关（仅佣金配置 / 提成点位的「单独维护」用）：开启 = 橙，呼应开启态的浅黄标题栏。
   只覆盖组件变量，不去重写 .switch 的选择器（那样会靠加载顺序生效、易静默失效）。 */
.sf-switch--state {
  --switch-active-bg: var(--color-warning);
}
/* 标题栏内状态文字：底色已由整条标题栏承载，这里不再挂药丸底 */
.sf-comm-state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
}
/* 状态提示：无底色，直接用状态色文字（橙=单独维护 / 绿=跟随达人） */
.sf-comm-mode-tip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.sf-comm-mode-tip svg {
  flex-shrink: 0;
}
.sf-comm-mode-tip--follow { color: var(--color-success-text); }
.sf-comm-mode-tip--lock { color: var(--color-warning-text); }
/* 「佣金配置」卡内的「本场直播平台」行：它是佣金套的渠道来源（勾哪个平台就出哪套佣金），
   与佣金同处一块，用一条浅线把它和下面的佣金设置分开。 */
.sf-comm-plat {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}
.sf-comm-plat:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.sf-commission-block {
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
}
.sf-commission-block:last-child { margin-bottom: 0; }
.sf-commission-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}
/* 达人选择器：右侧加下拉箭头指示（与 select/输入框箭头一致） */
.sf-inf-box {
  position: relative;
  padding-right: 30px;
}
.sf-inf-box::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238595A4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  pointer-events: none;
}
/* 只读展示（达人简称等）：与输入框等高、垂直居中 */
.sf-readonly {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-3);
  color: var(--color-fg-2);
  font-size: var(--font-size-base);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-disabled-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 移动端：字段换行成单列 */
@media (max-width: 768px) {
  .sf-card-row { flex-wrap: wrap; }
  .sf-card-row .sf-field-col { flex: 1 1 100% !important; }
}

/* 电脑端默认：手机版图例/订阅隐藏（仅手机端显示） */
.calendar-legend-mobile,
.calendar-subscribe-mobile {
  display: none;
}

/* 移动端：日历月/周视图压缩，日期格子拉高以显示至少 5 个事项、色条更小（缩小 DPI） */
@media (max-width: 768px) {
  .calendar-cell {
    min-height: 104px;
    padding: 3px;
    overflow: hidden;
  }
  .calendar-cell__day {
    width: 18px;
    height: 18px;
    font-size: var(--font-size-xs);
  }
  .calendar-cell__holiday,
  .calendar-cell__workday {
    font-size: var(--font-size-xs);
    line-height: 13px;
  }
  .cal-event {
    height: 14px;
    padding: 0 3px;
    gap: 2px;
    font-size: var(--font-size-xs);
    border-radius: 3px;
  }
  .cal-event__bar {
    width: 2px;
    height: 9px;
  }
  /* 手机端也显示「还有 N 项」折叠（超过 3 个时） */
  .cal-more {
    display: block;
    font-size: var(--font-size-xs);
  }
  /* 周视图：横向滚动，表头与格子同步（每天固定宽） */
  .calendar--week {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendar--week .calendar__weekdays,
  .calendar--week .calendar__grid {
    min-width: 620px;
  }
  .calendar__grid--week .calendar-cell {
    min-height: 160px;
  }
  /* 工具栏/筛选栏在手机上重排 */
  .calendar-toolbar .calendar-month {
    min-width: 0;
    flex: 1 1 auto;
  }
  /* 电脑端工具栏图例隐藏，手机版图例显示在月视图下面 */
  .calendar-toolbar .legend {
    display: none;
  }
  .calendar-legend-mobile {
    display: flex;
    margin-top: var(--space-3);
  }
  /* 电脑端 header 订阅按钮隐藏，手机版订阅显示在最下面 */
  .page-actions #cal-subscribe {
    display: none;
  }
  .calendar-subscribe-mobile {
    display: block;
    margin-top: var(--space-4);
    text-align: center;
  }
  /* 筛选栏：达人选择器全宽一行 */
  .calendar-filters > * {
    flex: 1 1 auto;
    max-width: 100%;
  }
  #cal-filter-inf {
    flex: 1 1 100% !important;
  }
  /* 场地 + 直播类型：一行两个，各占一半 */
  .calendar-filters .input--search {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px);
  }
  .calendar-filters #cal-filter-live-type {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px);
  }
  .calendar-filters .select {
    width: 100% !important;
  }
  .calendar-filters .input--search .select {
    width: 100% !important;
  }
  /* 视图切换（月/周/日程）+ 只看与我相关：一行 */
  #cal-viewswitch {
    margin-left: 0;
    flex: 0 0 auto;
  }
  #cal-only-mine-switch {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}

/* 基本信息板块内：大概排期开关上方分割线 */
.support-body {
  margin-top: var(--space-2);
  margin-bottom: calc(var(--space-3) * 2.25);
}
/* 模块卡内的支持内容：底部留白交给卡片内边距，不再叠加 */
.module-card .support-body {
  margin-bottom: 0;
}
/* 额外支持：卡内多行（行 = 左侧名称 + 右侧开关；开关打开时该行下方展开内容） */
.sf-support-item {
  border-bottom: 1px solid var(--color-border-soft);
}
.sf-support-item:last-child {
  border-bottom: none;
}
.sf-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.sf-support-row .sf-switch {
  margin: 0;
}
.sf-support-row__name {
  font-size: var(--font-size-sm);
  color: var(--color-fg);
}
.sf-support-body {
  padding-bottom: var(--space-3);
}
.sf-support-hint {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-2);
  margin-bottom: var(--space-2);
}

.tl-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tl-add {
  margin-top: var(--space-2);
}

/* 节点内字段卡片（去掉外框，改浅底） */
.tl .node-card {
  border: none;
  padding: 0;
  margin-top: 0;
  background: transparent;
}

/* ============================ 视图切换 / 节假日 / 周视图 / 日程视图 ============================ */

/* 视图切换（月/周/日程）：与全局 .seg 同规格——白容器 + 选中项内缩蓝色圆角块 */
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-left: auto;
}
.view-switch__btn {
  height: 28px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-seg);
  background: transparent;
  color: var(--color-fg-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease-standard),
    color var(--motion-fast) var(--motion-ease-standard);
}
.view-switch__btn:hover {
  color: var(--color-accent-text);
}
.view-switch__btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-on);
}

/* 节假日 / 周末 / 调休标注 */
.calendar-cell__day { position: relative; }
.calendar-cell.is-weekend:not(.is-today) .calendar-cell__day { color: var(--color-muted); }
.calendar-cell.is-holiday:not(.is-today) .calendar-cell__day { color: var(--color-muted); font-weight: var(--font-weight-semibold); }
/* 节假日/调休标注放格子右上角（.calendar-cell 已 position:relative） */
.calendar-cell__holiday {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0 3px;
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  line-height: 15px;
  pointer-events: none;
}
.calendar-cell__workday {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0 3px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: 15px;
  pointer-events: none;
}

/* 周视图：格子更高，显示全部事项 */
.calendar__grid--week .calendar-cell {
  min-height: 320px;
}

/* 日程视图 */
.agenda { display: flex; flex-direction: column; gap: var(--space-3); }
.agenda-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.agenda-day__head {
  padding: var(--space-3) var(--space-4);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.agenda-day__items { padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.agenda-day__items .cal-event { cursor: pointer; }

/* ---- 点「某一天」抽屉：当日全部事项列表 ---- */
.calendar-cell[data-date] { cursor: pointer; }

.calendar-cell[data-date]:hover {
  background: var(--table-row-hover);
}

.day-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.day-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

.day-item:hover {
  border-color: var(--color-accent-text);
}

/* 已结束的排期（日历）：事项卡片淡化，悬停恢复 */
.day-item.is-past {
  opacity: 0.55;
}
.day-item.is-past:hover {
  opacity: 1;
}

.day-item__bar {
  width: 3px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.day-item__body {
  min-width: 0;
  flex: 1;
}

.day-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.day-item__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}
.day-item__type svg {
  flex-shrink: 0;
}

/* 达人名称行：名称（显眼）+ 达人类型/平台标签同行 */
.day-item__person {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  min-width: 0;
}

.day-item__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-item__tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.day-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: var(--space-2);
  line-height: 1.7;
  word-break: break-word;
}

.day-item__meta span + .day-item__sep,
.day-item__meta .day-item__sep + span {
  margin: 0 var(--space-1);
  color: var(--color-meta);
}

.day-item__sep {
  color: var(--color-meta);
}

/* 时间（放事项后面）：muted 小字，紧跟事项名 */
.day-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 协助人（角色标签在外 + 胶囊头像+人名在内，如「商务助理 [头像]叶平彬」） */
.day-item__staffs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: var(--space-2);
}
.day-item__staff {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.day-item__role {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  flex-shrink: 0;
}
.day-item__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 9px 0 2px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  line-height: 1;
}
.day-item__chip-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  padding-top: 1px; /* 补偿中文字面偏上，与同行头像视觉居中 */
}
.day-item__avatar {
  padding-top: 1px; /* 补偿中文字面偏上 */
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-100);
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  flex: none;
  overflow: hidden;
  box-sizing: border-box;
}
.day-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.day-item__remark {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* ---- 手机端全屏查看（真全屏 + 横屏 + DPI 密度缩放 + 悬浮退出） ---- */
.cal-fs-toggle { display: none; }
@media (max-width: 768px) {
  .cal-fs-toggle { display: inline-flex; }
}
.cal-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1150; /* 高于侧边栏/顶栏(1100)，低于抽屉(1200)，点日期抽屉能叠加其上 */
  background: var(--color-bg);
  overflow: hidden;
}
.cal-fs__stage {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
}
/* 月视图内容（zoom 密度缩放由 JS 控制，缩放会真正重排布局） */
.cal-fs__zoombox .calendar {
  margin: 0 auto;
}
/* 悬浮退出按钮：右上角圆形 X，始终浮在日历上方 */
.cal-fs__exit {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1250;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cal-fs__exit:active { background: rgba(0, 0, 0, 0.75); }
/* 悬浮缩放控制：右下角胶囊（- / 百分比 / + / 复位） */
.cal-fs__zoomctrl {
  position: fixed;
  right: 12px;
  bottom: 16px;
  z-index: 1250;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 24px;
  padding: 6px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cal-fs__zbtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cal-fs__zbtn:active { background: rgba(255, 255, 255, 0.35); }
.cal-fs__level {
  min-width: 42px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* 全屏时抽屉变窄（点某天的排期详情别太大太突兀） */
.cal-fs-active .drawer {
  width: 380px;
  max-width: 70vw;
}

/* 排期表单：跟随达人佣金的只读摘要（默认展示当前达人佣金，判断对不对） */
.sf-comm-follow-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sf-comm-follow-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.sf-comm-follow-plat {
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.sf-comm-follow-val {
  color: var(--color-info);
  font-weight: var(--font-weight-semibold);
}
.sf-comm-follow-empty {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   「提成点位」tab（2026-09-16 乐哥需求 · 拍板方案 A）
   · .pt-ov —— 顶部「本排期点位总览」：所有人的点位一眼看全（乐哥明确要的）
   · .pt-off —— 矩阵里「该场某人不在场」的占位（灰、不可填，避免误填出无效应配）
   · 表格复用既有 .rate-sched（表头/单元格/输入框宽度已有规范，不另造一套）
   ========================================================================== */
.pt-ov {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-primary-200);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-accent-bg);
}
.pt-ov__grp { font-size: var(--font-size-sm); color: var(--color-accent-text); }
.pt-ov__grp b { font-weight: var(--font-weight-semibold); margin-right: var(--space-1); }
.pt-ov__grp em { font-style: normal; font-variant-numeric: tabular-nums; }
.pt-off { font-size: var(--font-size-sm); color: var(--color-meta); }
.pt-name { font-size: var(--font-size-sm); color: var(--color-fg); }
.rate-sched td .pt-input { max-width: 130px; }