/* Todo list component styles for the Flow State app */

/* Make the todoCard a flex container to better control space distribution */
#todoCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#todoCard h2 {
  margin-bottom: 12px;
}

#todoCard .focus-tips {
  margin-bottom: 15px;
}

#todoCard .todo-input {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

#addTodoBtn {
  min-width: 3rem;
  font-size: 0.9rem;
}

/* Make the todoList take up remaining space */
#todoList {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 100px; /* Ensure a minimum height even when empty */
  max-height: 500px; /* Ensure a minimum height even when empty */
  margin: 0;
  padding: 0;
}

#todoList li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--shadow);
  cursor: grab; /* Indicate item can be dragged */
  transition: background-color var(--transition);
}

#todoList li:last-child {
  border-bottom: none;
}

/* Styling for when an item is being dragged */
#todoList li.dragging {
  opacity: 0.6;
  background-color: var(--bg);
  cursor: grabbing;
  box-shadow: 0 0 8px var(--shadow);
}

/* Drop indicator styles */
#todoList li.drop-target-above {
  border-top: 2px solid var(--accent);
}

#todoList li.drop-target-below {
  border-bottom: 2px solid var(--accent);
}

#todoList li input[type="checkbox"] {
  margin-right: 12px;
}

.todo-text {
  flex: 1;
  margin-right: 10px;
}

/* Todo status styles */
#todoList li.completed .todo-text {
  text-decoration: line-through;
  color: var(--muted);
  font-style: italic;
}

#todoList li.status-not-started .todo-text {
  /* Default style */
  color: var(--fg);
}

#todoList li.status-in-progress .todo-text {
  color: #3498db; /* Blue */
  font-weight: 500;
}

#todoList li.status-blocked .todo-text {
  color: #e74c3c; /* Red */
  font-style: italic;
}

#todoList li.status-testing .todo-text {
  color: #9b59b6; /* Purple */
  font-weight: 500;
}

/* Todo status indicator */
.todo-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
}

.status-not-started .todo-status-indicator {
  background-color: var(--muted);
}

.status-in-progress .todo-status-indicator {
  background-color: #3498db;
}

.status-blocked .todo-status-indicator {
  background-color: #e74c3c;
}

.status-completed .todo-status-indicator {
  background-color: #2ecc71;
}

.status-testing .todo-status-indicator {
  background-color: #9b59b6;
}

/* Todo status dropdown */
.todo-status {
  margin-right: 8px;
  position: relative;
}

.todo-status-select {
  padding: 2px 4px;
  font-size: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--muted);
  background-color: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

/* Styling for the new todo buttons with FA icons */
.todo-buttons {
  display: flex;
  gap: 4px;
}

.todo-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.8rem;
  border-radius: var(--radius);
  transition: all var(--transition);
}

.todo-btn:hover {
  color: var(--fg);
  background-color: rgba(var(--accent-rgb), 0.1);
}

.todo-btn.remove-btn:hover {
  color: #ff5252;
  background-color: rgba(255, 82, 82, 0.1);
}

/* Drag handle styling */
.todo-btn.drag-handle {
  cursor: grab;
  color: var(--muted);
  opacity: 0.5;
  transition: opacity var(--transition);
}

.todo-btn.drag-handle:hover {
  opacity: 1;
}

/* Adjust cursor when dragging */
#todoList li:active {
  cursor: grabbing;
}

/* Edit mode styling */
.todo-edit-input {
  flex: 1;
  padding: 4px 8px;
  margin-right: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background-color: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
}

.todo-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
}

/* Hide certain elements when in edit mode */
#todoList li.editing {
  cursor: default;
}

#todoList li.editing .todo-text {
  display: none;
}

/* Edit button styling */
.todo-btn.edit-btn:hover {
  color: #3498db;
  background-color: rgba(52, 152, 219, 0.1);
}

/* Save edit button styling */
.todo-btn.save-edit-btn {
  color: #2ecc71;
}

.todo-btn.save-edit-btn:hover {
  color: #27ae60;
  background-color: rgba(46, 204, 113, 0.1);
}

/* Cancel edit button styling */
.todo-btn.cancel-edit-btn {
  color: #e74c3c;
}

.todo-btn.cancel-edit-btn:hover {
  color: #c0392b;
  background-color: rgba(231, 76, 60, 0.1);
}