/* MeetingX 辅助决策层样式（新版风格 M4 / 组合版）。
 *
 * 三种界面风格通过 body 上的类切换，均不改动后端：
 *   .ui-mode-m4      新版风格（默认）：最近可约推荐条 + 未来一周最空三天 + 单日时间条；
 *                    月视图日历保持 1.0.10 原有样式，不加任何装饰。
 *   .ui-mode-combo   组合版：在新版风格基础上，日历每个日期格再叠加 24 小时热力行与空闲摘要；
 *                    该档位当前不在右上角切换控件中暴露，样式与实现保留备用。
 *   .ui-mode-classic 返回旧版：整个辅助决策层（.combo-only）隐藏，界面与 1.0.10 完全一致。
 *
 * 颜色沿用 styles.css 的既有令牌，占用状态配色与 .booking-pill 保持一致，
 * 保证同一场会议在月视图色块、热力格、时间条里颜色相同。
 */

body.ui-mode-m4,
body.ui-mode-combo,
body {
  --c-own: #1677ff;
  --c-own-bg: #eaf3ff;
  --c-own-tx: #173e6c;
  --c-active: #d68500;
  --c-active-bg: #fff6df;
  --c-active-tx: #7b510b;
  --c-failed: #c73737;
  --c-failed-bg: #fff0f0;
  --c-failed-tx: #8f2727;
  --c-uncertain: #7a5af8;
  --c-uncertain-bg: #f1ecff;
  --c-uncertain-tx: #4a2fb0;
  --c-muted: #8b95a1;
  --c-muted-bg: #eef1f4;
  --c-muted-tx: #566270;
  --c-occupied: #b6bfca;
  --c-occupied-bg: #eef1f4;
  --c-occupied-tx: #586270;
  --c-free: #eef1f5;
  --c-ok: #15805d;
  --c-ok-bg: #e7f6ef;
}

/* 旧版模式下组合层整体隐藏 */
body.ui-mode-classic .combo-only { display: none !important; }

/* ============ 顶部工具条上的风格切换（三档分段控件） ============ */
.style-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.style-switch .style-option {
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #4d5866;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.style-switch .style-option + .style-option { border-left: 1px solid var(--border); }
.style-switch .style-option:hover { background: #f4f8ff; color: var(--primary-dark); }
.style-switch .style-option.on {
  background: #eef5ff;
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primary);
}
/* 新版风格下"热力行"不存在，图例里的热力说明随之隐藏 */
body.ui-mode-m4 .legend-tip { display: none; }

/* ============ 推荐条 ============ */
.combo-strip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.combo-strip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.combo-strip-head b { font-size: 14px; color: #2b3540; }
.combo-strip-head .combo-hint { font-size: 12px; color: var(--muted); }
.combo-strip-head .combo-hint:first-of-type { margin-right: auto; }

.combo-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.combo-empty { font-size: 12.5px; color: var(--muted); }

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfe3ff;
  background: #f4f9ff;
  color: #173e6c;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.slot-chip .slot-day { font-weight: 600; }
.slot-chip:hover { background: #e8f2ff; border-color: var(--primary); box-shadow: 0 1px 6px rgba(22, 119, 255, .16); }
.slot-chip em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-dark); }
.slot-chip i { font-style: normal; font-size: 11px; color: #7b8794; }
.slot-chip.earliest { border-color: #b9e2d0; background: #f3fbf7; color: #0f6349; }
.slot-chip.earliest em { color: var(--c-ok); }
.slot-chip.earliest:hover { background: #e8f7ef; border-color: var(--c-ok); }

/* ============ 图例 ============ */
.combo-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 0 4px 10px;
  font-size: 12px;
  color: #4d5866;
}
.combo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.combo-legend .sw { width: 13px; height: 13px; border-radius: 3px; display: block; background: var(--c-free); }
.combo-legend .sw.free { background: var(--c-free); }
.combo-legend .sw.occupied { background: var(--c-occupied); }
.combo-legend .sw.own { background: var(--c-own); }
.combo-legend .sw.active { background: var(--c-active); }
.combo-legend .sw.failed { background: var(--c-failed); }
.combo-legend .sw.buffer { background: #dbe3ec; }
.combo-legend .legend-tip { color: var(--muted); margin-left: auto; }

/* ============ 日期格内的摘要与热力行 ============ */
.cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  min-height: 20px;
  margin-bottom: 4px;
  min-width: 0;
}
.cell-head .day-number { width: auto; height: auto; min-width: 20px; }
.cell-free {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.cell-free.free { color: var(--c-ok); font-weight: 600; }
.cell-free.full { color: var(--danger); }
.cell-free.closed, .cell-free.past { color: #aab3bd; }

/* 热力行：24 格 = 24 小时，位置即时间 */
.heat {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 1px;
  height: 14px;
  margin-bottom: 6px;
}
.heat .hb { background: var(--c-free); border-radius: 1.5px; display: block; }
.heat .hb.occupied { background: var(--c-occupied); }
.heat .hb.buffer { background: #dbe3ec; }
.heat .hb.own, .heat .hb.confirmed { background: var(--c-own); }
.heat .hb.pending, .heat .hb.creating, .heat .hb.update_pending, .heat .hb.cancel_pending { background: var(--c-active); }
.heat .hb.failed { background: var(--c-failed); }
.heat .hb.uncertain { background: var(--c-uncertain); }
.heat .hb.invalid, .heat .hb.cancelled { background: var(--c-muted); }
.heat .hb.closed { background: #f4f6f8; }

/* 选中态与可点性（新版风格/组合版通用：点日期格切换单日时间条） */
body.ui-mode-m4 .day-cell.selectable,
body.ui-mode-combo .day-cell.selectable { cursor: pointer; }
body.ui-mode-m4 .day-cell.selectable:hover,
body.ui-mode-combo .day-cell.selectable:hover { background: #f7fbff; }
body.ui-mode-m4 .day-cell.combo-selected,
body.ui-mode-combo .day-cell.combo-selected { box-shadow: inset 0 0 0 2px var(--primary); background: #f5faff; }
body.ui-mode-m4 .day-cell.outside.combo-selected,
body.ui-mode-combo .day-cell.outside.combo-selected { background: #f0f6ff; }

/* ============ 单日时间条 ============ */
.combo-daypicker { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.combo-daypicker button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #4d5866;
  min-height: 0;
}
.combo-daypicker button.on { border-color: var(--primary); background: #eef5ff; color: var(--primary-dark); font-weight: 600; }

.combo-daycanvas {
  position: relative;
  height: 78px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fdfdfe;
  overflow: hidden;
}
/* 小时刻度线：按显示窗口内的小时数等分（由 app.js 设 --hours，默认 24） */
.combo-daycanvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right, #eef1f5 0 1px, transparent 1px calc(100% / var(--hours, 24)));
}
/* 今天已过去的小时：浅灰底纹，避免和"可约空档"一样看着是空白 */
.combo-past {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--w, 0%);
  background: #f1f3f6;
  border-right: 1px solid #e3e7ec;
  color: #9aa5b1;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}
.combo-nowline {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--s, 0%);
  border-left: 2px solid var(--danger);
  z-index: 5;
  pointer-events: none;
}
.combo-buffer {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--s, 0%);
  width: var(--w, 0%);
  background: repeating-linear-gradient(45deg, #eaeff4, #eaeff4 3px, #dfe6ed 3px, #dfe6ed 6px);
  opacity: .8;
  z-index: 1;
}
.combo-block {
  position: absolute;
  top: 7px; bottom: 7px;
  left: var(--s, 0%);
  width: var(--w, 0%);
  border-left: 3px solid var(--c-occupied);
  background: var(--c-occupied-bg);
  color: var(--c-occupied-tx);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 10.5px;
  overflow: hidden;
  z-index: 3;
  cursor: default;
}
.combo-block b { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-block span { font-size: 10px; opacity: .82; font-variant-numeric: tabular-nums; }
.combo-block.own, .combo-block.confirmed { border-left-color: var(--primary); background: var(--c-own-bg); color: var(--c-own-tx); cursor: pointer; }
.combo-block.pending, .combo-block.creating, .combo-block.update_pending, .combo-block.cancel_pending { border-left-color: var(--c-active); background: var(--c-active-bg); color: var(--c-active-tx); cursor: pointer; }
.combo-block.failed { border-left-color: var(--c-failed); background: var(--c-failed-bg); color: var(--c-failed-tx); cursor: pointer; }
.combo-block.uncertain { border-left-color: var(--c-uncertain); background: var(--c-uncertain-bg); color: var(--c-uncertain-tx); cursor: pointer; }
.combo-block.invalid, .combo-block.cancelled { border-left-color: var(--c-muted); background: var(--c-muted-bg); color: var(--c-muted-tx); }
.combo-block:hover { filter: brightness(.97); }

.combo-gap {
  position: absolute;
  top: 24px; bottom: 24px;
  left: var(--s, 0%);
  width: var(--w, 0%);
  background: rgba(21, 128, 93, .13);
  border: 1px dashed #79b79c;
  border-radius: 5px;
  color: #0f6349;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 2;
  padding: 0 2px;
}
.combo-gap:hover { background: rgba(21, 128, 93, .24); border-color: var(--c-ok); }

.combo-daylabels { position: relative; height: 16px; margin-top: 3px; }
.combo-daylabels span {
  position: absolute;
  top: 0;
  left: var(--s, 0%);
  transform: translateX(-50%);
  font-size: 10px;
  color: #98a3ae;
  font-variant-numeric: tabular-nums;
}
/* 窗口首尾两个标签贴边：居中会把半个"08:00"挤出条子外面 */
.combo-daylabels span.at-start { transform: none; }
.combo-daylabels span.at-end { transform: translateX(-100%); }
.combo-daynote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* ============ 窄屏适配 ============ */
@media (max-width: 760px) {
  .combo-strip { padding: 10px 10px; }
  .combo-strip-head { gap: 6px; }
  .combo-strip-head .combo-hint { display: none; }
  .combo-legend { gap: 10px; font-size: 11px; }
  .combo-legend .legend-tip { margin-left: 0; }
  .cell-free { display: none; }
  .cell-head { height: 18px; min-height: 18px; }
  .combo-daycanvas { height: 64px; }
  .combo-block { font-size: 10px; padding: 2px 4px; }
  .combo-daypicker { margin-left: 0; }
  .style-switch .style-option { min-height: 30px; padding: 4px 8px; font-size: 12px; }
  .combo-strip { margin-bottom: 10px; }
}