/* 周视图甘特图样式（仅 /week 加载） */

/* 滚动容器：横向+纵向；高度由 JS 设为视口高度 */
.gantt-container {
  overflow: auto;
  position: relative;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
}

/* 时间轴整体宽度由 JS 按精度与范围动态设置。
   position: relative 为今天线提供绝对定位包含块，不影响内部 sticky：
   sticky 的可位移范围取决于自身宽度与包含块宽度之差，与祖先的
   position 无关（见 .gantt-label / .gantt-group-header 注释）。 */
.gantt-timeline {
  position: relative;
  --cell-width: 80px;       /* 单格宽度，精度切换时由 JS 改此变量 */
  --row-height: 32px;       /* 活动行高，Ctrl+滚轮缩放 */
  --group-header-height: 28px;
  --timeline-header-height: 32px;
}

/* 日期表头：sticky top，横向跟随滚动 */
.gantt-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--timeline-header-height);
  background: #fafafa;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: stretch;
}
.gantt-header-cell {
  flex: 0 0 var(--cell-width);
  border-right: 1px solid #eee;
  font-size: 11px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 2px 0;
  line-height: 1.2;
}
.gantt-header-cell.weekend { background: #fbfaf6; }
.gantt-header-cell.today { background: #fff3e0; color: #f5712c; font-weight: 600; }

/* 分组标题行：sticky top + left（纵向滚动停在表头下，横向滚动左边缘固定）。
   必须用 width: fit-content 把宽度收缩到文字宽度：sticky 元素的横向可
   位移量 = 包含块宽 − 自身宽；块级元素默认宽度等于时间轴全宽，余量为
   0，left sticky 永不触发。收缩后标题文字固定在视口左边缘，灰底则靠
   ::after 伪元素向右延伸一屏补齐，使背景仍横贯视口。 */
.gantt-group-header {
  position: sticky;
  top: var(--timeline-header-height);
  left: 0;
  z-index: 25;
  width: fit-content;
  height: var(--group-header-height);
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
/* 标题固定后，文字右侧的灰底由伪元素补齐：跟随标题固定，向右延伸一屏；
   绝对定位不占据布局宽度，不会扩大滚动范围 */
.gantt-group-header::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100vw;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
}
.gantt-group-header .count { color: #888; font-weight: normal; margin-left: 6px; font-size: 12px; }

/* 活动行：单行高度，行内有网格底纹，色条正常流定位 */
.gantt-row {
  position: relative;
  height: var(--row-height);
  border-bottom: 1px solid #f3f3f3;
  background-image: linear-gradient(to right, #f5f5f5 1px, transparent 1px);
  background-size: var(--cell-width) 100%;
}
.gantt-row:hover { background-color: #fafafa; }

/* 色条：正常流中用 margin-left 定位起始位置，width 控制跨度；
   overflow:visible 让 sticky 活动名可超出色条右边缘 */
.gantt-bar-fill {
  height: calc(var(--row-height) - 6px);
  margin-top: 3px;
  border-radius: 3px;
  min-width: 2px;
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
}
.gantt-bar-fill.no-start { border-left: 2px dashed #999; }

/* 色条按类型着色 */
.gantt-bar-fill[data-type="ACTIVITY"]     { background: #4a90c2; }
.gantt-bar-fill[data-type="GACHA"]        { background: #8a6cc9; }
.gantt-bar-fill[data-type="SHOP"]         { background: #d98a3c; }
.gantt-bar-fill[data-type="COLLAB"]       { background: #3fa87a; }
.gantt-bar-fill[data-type="ANNOUNCEMENT"] { background: #888; }

/* 状态层：未开始半透明；已结束置灰 */
.gantt-bar-fill.state-future { opacity: 0.45; }
.gantt-bar-fill.state-active { opacity: 1; }
.gantt-bar-fill.state-ended  { background: #bbb !important; opacity: 0.7; }

/* 活动名 + chip：色条内部，sticky left 固定在视口左边缘；无独立背景，文字在色条上。
   必须用 width: fit-content 把宽度收缩到内容宽度：sticky 元素的横向可
   位移量 = 包含块（色条）宽 − 自身宽。label 默认作为块级元素填满色条
   （与色条同宽，可达数千像素），余量为 0，left sticky 永不触发，文字
   只会随色条整体滚动。max-width:100% 保证窄色条上文字仍被 overflow
   裁切，不会溢出到色条外。色条右边缘滚出视口后，活动名随色条一起离开，
   这是 sticky 的正常边界行为。 */
.gantt-label {
  position: sticky;
  left: 0;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.gantt-name {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.gantt-chip {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 今天指示线：sticky 只约束纵向（top），不设 left——横向作为正常流元素
   由 JS 写 margin-left 定位，随内容横向滚动；纵向始终贴在日期表头下方。
   高度等于容器可视高度（--gantt-h 由 JS 写入），负 margin-bottom 抵消
   自身占位，避免把活动行整体下推。z-index 高于分组标题(25)与色条。 */
.gantt-today-line {
  position: sticky;
  top: var(--timeline-header-height);
  z-index: 26;
  width: 2px;
  height: calc(var(--gantt-h, 400px) - var(--timeline-header-height));
  margin-bottom: calc((var(--gantt-h, 400px) - var(--timeline-header-height)) * -1);
  background: #e01b24;
  pointer-events: none;
}

/* 隐藏已结束行时 */
.gantt-row.row-ended-hidden { display: none; }

/* 空状态 */
.gantt-empty { padding: 40px; text-align: center; color: #999; font-size: 14px; }