/* TodoVcComponent styles — layout via .row, .fill in markup */
.todo-page { max-width: 600px; width: 100%; }

.todo-stats { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

.todo-form { margin-bottom: 24px; }
.todo-input {
  padding: 10px 12px;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 14px;
}
.todo-input:focus { outline: none; border-color: var(--accent-blue); }
.todo-add-btn {
  padding: 10px 20px;
  background: var(--accent-green); color: var(--color-on-accent); border: none; border-radius: 6px;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.todo-add-btn:hover { background: var(--accent-green-hover); }

.todo-list { list-style: none; }
.todo-item {
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
}
.todo-item:hover { background: var(--bg-surface); }
.todo-item--done .todo-title { text-decoration: line-through; color: var(--text-muted); }

.todo-check {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-primary); font-size: 14px;
}
.todo-checkbox {
  width: 20px; height: 20px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; color: var(--accent-blue);
}
.todo-item--done .todo-checkbox { background: var(--accent-green); border-color: var(--accent-green); color: var(--color-on-accent); }

.todo-title { font-size: 14px; }
.todo-desc { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.todo-due { display: block; font-size: 11px; color: var(--accent-blue); margin-top: 2px; }

.todo-delete {
  background: none; border: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.todo-delete:hover { color: var(--accent-red); }

.todo-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 32px; }