/* ============================================
   AI制造车间调度系统 - 甘特图专用样式
   vis-timeline 主题覆盖
   ============================================ */

/* === 甘特图容器 === */
.gantt-wrapper {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 320px;
}

.gantt-wrapper .vis-timeline {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  background: var(--surface);
}

/* 确保面板有背景色 */
.gantt-wrapper .vis-panel {
  background: var(--surface);
}

/* 确保中心区域有背景 */
.gantt-wrapper .vis-panel.vis-center {
  background: var(--surface);
}

/* 确保左侧标签区域有背景 */
.gantt-wrapper .vis-panel.vis-left {
  background: var(--surface);
  border-right: 1px solid var(--divider);
}

/* 确保顶部时间轴有背景 */
.gantt-wrapper .vis-panel.vis-top {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

/* === 时间轴 === */
.gantt-wrapper .vis-time-axis .vis-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.gantt-wrapper .vis-time-axis .vis-grid.vis-minor {
  border-color: var(--divider);
}

.gantt-wrapper .vis-time-axis .vis-grid.vis-major {
  border-color: var(--border);
}

/* === 产线分组标签 === */
.gantt-wrapper .vis-label .vis-inner {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  padding: 0 12px;
}

.gantt-wrapper .vis-label {
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}

/* === 子分组（产品类别）样式 === */
.gantt-wrapper .vis-label.vis-nested-group .vis-inner {
  font-size: 11px;
  font-weight: var(--weight-medium);
  padding-left: 24px;
}

.gantt-wrapper .vis-label.vis-nested-group {
  background: var(--bg);
  border-left: 3px solid var(--primary);
}

/* 产品类别颜色标识 */
.gantt-wrapper .vis-label.vis-nested-group[data-group*="产品A"] {
  border-left-color: #ECA8A9;
}
.gantt-wrapper .vis-label.vis-nested-group[data-group*="产品B"] {
  border-left-color: #74AED4;
}
.gantt-wrapper .vis-label.vis-nested-group[data-group*="产品C"] {
  border-left-color: #b8c99a;
}
.gantt-wrapper .vis-label.vis-nested-group[data-group*="产品D"] {
  border-left-color: #CFAFD4;
}

/* === 任务条 === */
.gantt-wrapper .vis-item {
  border-radius: 4px;
  border: none;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-inverse);
  box-shadow: none;
  transition: box-shadow var(--transition-fast);
  min-width: 48px !important;
}

.gantt-wrapper .vis-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.gantt-wrapper .vis-item.vis-selected {
  box-shadow: 0 0 0 2px var(--primary);
}

/* 任务条内容 */
.gantt-wrapper .vis-item .vis-item-content {
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* === 任务条颜色：按产品类别区分 === */
/* 产品1 - #ECA8A9 柔粉 */
.gantt-wrapper .vis-item.gantt-item--product1 { background: #ECA8A9 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product1.gantt-item--done { background: #dcb0b1 !important; color: #7a4a4b; }
.gantt-wrapper .vis-item.gantt-item--product1.gantt-item--planned { background: #f8e0e0 !important; color: #9a6566; border-left: 3px solid #ECA8A9; }
.gantt-wrapper .vis-item.gantt-item--product1.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 产品2 - #74AED4 雾蓝 */
.gantt-wrapper .vis-item.gantt-item--product2 { background: #74AED4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product2.gantt-item--done { background: #6a9ec4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product2.gantt-item--planned { background: #d4e5f2 !important; color: #4a6a85; border-left: 3px solid #74AED4; }
.gantt-wrapper .vis-item.gantt-item--product2.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 产品3 - #D3E2B7 薄荷绿 */
.gantt-wrapper .vis-item.gantt-item--product3 { background: #b8c99a !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product3.gantt-item--done { background: #a8b98a !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product3.gantt-item--planned { background: #e8f0d8 !important; color: #5a6a4a; border-left: 3px solid #b8c99a; }
.gantt-wrapper .vis-item.gantt-item--product3.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 产品4 - #CFAFD4 藤紫 */
.gantt-wrapper .vis-item.gantt-item--product4 { background: #CFAFD4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product4.gantt-item--done { background: #bfa0c4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product4.gantt-item--planned { background: #f0e0f5 !important; color: #6a5575; border-left: 3px solid #CFAFD4; }
.gantt-wrapper .vis-item.gantt-item--product4.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 产品5 - #F7C97E 暖杏 */
.gantt-wrapper .vis-item.gantt-item--product5 { background: #F7C97E !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product5.gantt-item--done { background: #e7b96e !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--product5.gantt-item--planned { background: #f8ecd8 !important; color: #7a6540; border-left: 3px solid #F7C97E; }
.gantt-wrapper .vis-item.gantt-item--product5.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 产品类别 A/B/C/D（与 product1-4 对应） */
.gantt-wrapper .vis-item.gantt-item--cat-a { background: #ECA8A9 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-a.gantt-item--done { background: #dcb0b1 !important; color: #7a4a4b; }
.gantt-wrapper .vis-item.gantt-item--cat-a.gantt-item--planned { background: #f8e0e0 !important; color: #9a6566; border-left: 3px solid #ECA8A9; }
.gantt-wrapper .vis-item.gantt-item--cat-a.gantt-item--delayed { background: #e8654a !important; color: #fff; }

.gantt-wrapper .vis-item.gantt-item--cat-b { background: #74AED4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-b.gantt-item--done { background: #6a9ec4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-b.gantt-item--planned { background: #d4e5f2 !important; color: #4a6a85; border-left: 3px solid #74AED4; }
.gantt-wrapper .vis-item.gantt-item--cat-b.gantt-item--delayed { background: #e8654a !important; color: #fff; }

.gantt-wrapper .vis-item.gantt-item--cat-c { background: #b8c99a !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-c.gantt-item--done { background: #a8b98a !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-c.gantt-item--planned { background: #e8f0d8 !important; color: #5a6a4a; border-left: 3px solid #b8c99a; }
.gantt-wrapper .vis-item.gantt-item--cat-c.gantt-item--delayed { background: #e8654a !important; color: #fff; }

.gantt-wrapper .vis-item.gantt-item--cat-d { background: #CFAFD4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-d.gantt-item--done { background: #bfa0c4 !important; color: #fff; }
.gantt-wrapper .vis-item.gantt-item--cat-d.gantt-item--planned { background: #f0e0f5 !important; color: #6a5575; border-left: 3px solid #CFAFD4; }
.gantt-wrapper .vis-item.gantt-item--cat-d.gantt-item--delayed { background: #e8654a !important; color: #fff; }

/* 通用状态叠加样式 */
.gantt-item--done {
  opacity: 0.7;
}

.gantt-item--planned {
  opacity: 0.85;
}

.gantt-item--running {
  opacity: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.gantt-item--delayed {
  animation: delayed-pulse 2s ease-in-out infinite;
}

@keyframes delayed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 101, 74, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(232, 101, 74, 0); }
}

/* === 当前时间线（橙红虚线） === */
.gantt-wrapper .vis-current-time {
  background-color: var(--kpi) !important;
  width: 2px !important;
  z-index: 10;
}

.gantt-wrapper .vis-custom-time .vis-custom-time-marker {
  background-color: var(--kpi) !important;
  width: 2px !important;
  border: none !important;
  z-index: 10;
}

/* 自定义时间线标签 */
.gantt-wrapper .vis-custom-time .vis-custom-time-marker::after {
  content: '当前';
  position: absolute;
  top: -18px;
  left: -12px;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--kpi);
  background: var(--kpi-soft);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* === Tooltip === */
.gantt-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-primary);
  pointer-events: none;
  max-width: 240px;
}

.gantt-tooltip__title {
  font-weight: var(--weight-semibold);
  margin-bottom: 4px;
}

.gantt-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 2px 0;
  color: var(--text-secondary);
}

.gantt-tooltip__value {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* === 产线行背景 === */
.gantt-wrapper .vis-foreground .vis-group {
  border-bottom: 1px solid var(--divider);
}

.gantt-wrapper .vis-foreground .vis-group:nth-child(even) {
  background: var(--bg);
}

.gantt-wrapper .vis-foreground .vis-group:nth-child(odd) {
  background: var(--surface);
}

/* === 图例 === */
.gantt-legend {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.gantt-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gantt-legend__color {
  width: 12px;
  height: 8px;
  border-radius: 2px;
}

.gantt-legend__divider {
  width: 1px;
  height: 12px;
  background: var(--divider);
  margin: 0 4px;
}