.gantt-card {
  background: var(--chola-surface);
  border: 1px solid var(--chola-border);
  border-radius: 14px;
  padding: 20px;
}

.gantt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.gantt-card-title {
  font-family: var(--chola-font-head);
  font-size: 17px; font-weight: 600;
  color: var(--chola-ink);
  margin: 0;
}

.gantt-controls {
  display: flex; align-items: center; gap: 16px;
}

.view-mode-group {
  display: flex; gap: 4px;
  background: var(--chola-bg);
  border: 1px solid var(--chola-border);
  border-radius: 8px;
  padding: 3px;
}
.view-mode-btn {
  border: none; background: transparent;
  font-family: var(--chola-font-body);
  font-size: 12.5px; font-weight: 600;
  color: var(--chola-text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-mode-btn:hover { color: var(--chola-ink); }
.view-mode-btn.active {
  background: var(--chola-surface);
  color: var(--chola-accent-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gantt-legend {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--chola-text-secondary);
}
.gantt-legend-item { display: flex; align-items: center; gap: 6px; }
.gantt-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

#ganttContainer {
  overflow-x: auto;
  border-radius: 10px;
}

.gantt .bar-completed .bar { fill: #1e5c32; }
.gantt .bar-completed .bar-progress { fill: #14421f; }

.gantt .bar-in-progress .bar { fill: var(--chola-accent); }
.gantt .bar-in-progress .bar-progress { fill: var(--chola-accent-dark); }

.gantt .bar-to-do .bar { fill: #8a8a86; }
.gantt .bar-to-do .bar-progress { fill: #6f6e69; }

.gantt .bar-on-hold .bar { fill: var(--chola-danger); }
.gantt .bar-on-hold .bar-progress { fill: var(--chola-danger); }

.gantt .bar-label { fill: white; font-family: var(--chola-font-body); font-size: 11px; }
.gantt .bar-label.big { fill: var(--chola-ink); }

.gantt .grid-header { fill: var(--chola-bg); stroke: var(--chola-border); }
.gantt .lower-text, .gantt .upper-text {
  fill: var(--chola-text-secondary);
  font-family: var(--chola-font-body);
  font-size: 11px;
}
.gantt .today-highlight { fill: var(--chola-accent-light); opacity: 0.5; }

.gantt-popup-wrapper {
    background: var(--chola-primary-dark) !important;
    border-radius: 8px !important;
  font-family: var(--chola-font-body) !important;
}
.close-pop-up {
    display: flex; justify-content: end;
}
.close-pop-up button {
  background: transparent; border: none; 
  color: white; text-align: end;
}

.gantt-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--chola-text-secondary);
}
.gantt-empty i { font-size: 30px; color: var(--chola-border); margin-bottom: 10px; display: block; }